/* =========================================================
   MOF HEAD TO HEAD DATABASE
   ========================================================= */

.mof-h2h-selector {
    margin: 18px 0 22px 0;
}

.mof-h2h-selector label {
    display: block;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 5px;
}

.mof-h2h-selector select {
    width: 230px;
    max-width: 100%;
    padding: 7px 8px;
    border: 1px solid #999;
    background: #fff;
    font-size: 13px;
}


/* =========================================================
   OLD COACH NAME BAR
   ========================================================= */

.mof-h2h-coach-title {
    margin-top: 12px;
    padding: 8px 10px;

    background: linear-gradient(
        to bottom,
        #2c6495 0%,
        #003b70 100%
    );

    border-bottom: 2px solid #aaa;

    color: #fff;

    font-size: 16px;
    font-weight: bold;
}


/* =========================================================
   H2H TABS
   ========================================================= */

.mof-h2h-tabs {
    display: flex;
    flex-wrap: wrap;

    margin-top: 8px;

    background: #eeeeee;

    border: 1px solid #cccccc;
    border-bottom: none;
}

.mof-h2h-tabs a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 72px;
    min-height: 64px;

    padding: 8px 10px;

    color: #111;

    text-decoration: none;

    font-size: 12px;
    font-weight: bold;

    border-right: 1px solid #cccccc;

    box-sizing: border-box;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.mof-h2h-tabs a:hover {
    background: #d8d8d8;
    color: #003b70;
}

.mof-h2h-tabs a.active {
    background: #003b70;
    color: #fff;
}


/* Team logo inside edition tabs */

.h2h-tab-logo {
    display: block;

    width: 34px;
    height: 34px;

    object-fit: contain;

    margin: 2px auto 6px auto;
}


/* Edition text under logo */

.mof-h2h-tabs a span {
    display: block;

    width: 100%;

    text-align: center;

    line-height: 1;

    margin-top: 4px;

    white-space: nowrap;
}


/* Career H2H tab */

.mof-h2h-tabs a:first-child {
    min-width: 95px;
}


/* =========================================================
   H2H SECTION TITLE
   ========================================================= */

.mof-h2h-section-title {
    padding: 10px 12px;

    background: #f5f5f5;

    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;

    font-size: 14px;
    font-weight: bold;

    color: #222;
}


/* =========================================================
   H2H TABLE
   ========================================================= */

.mof-h2h-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.mof-h2h-table {
    width: 100%;

    border-collapse: collapse;

    background: #fff;

    font-size: 13px;
}


/* Headers */

.mof-h2h-table thead th {
    position: relative;

    padding: 7px 25px 7px 8px !important;

    background: #003b70;

    color: #fff;

    border: 1px solid #003b70;

    text-align: center;

    font-weight: bold;

    cursor: pointer;

    white-space: nowrap;

    user-select: none;

    transition: background .15s ease;
}

.mof-h2h-table thead th:hover {
    background: #2c6495;
}

.mof-h2h-table thead th:first-child {
    text-align: left;
}


/* Cells */

.mof-h2h-table td {
    padding: 7px 8px;

    border: 1px solid #999;

    color: #111;

    text-align: center;
}

.mof-h2h-table td.opponent-name {
    text-align: left;
    font-weight: 500;
}

.mof-h2h-table td.team-abbr {
    font-weight: bold;
}


/* =========================================================
   ALTERNATING H2H ROW COLORS
   ========================================================= */

.mof-h2h-table tbody tr:not(.h2h-total-row):not(.sortbottom):nth-child(odd) td {
    background: #ffffff;
}

.mof-h2h-table tbody tr:not(.h2h-total-row):not(.sortbottom):nth-child(even) td {
    background: #f3f6f8;
}

/* Slight blue/gray hover */

.mof-h2h-table tbody tr:not(.h2h-total-row):not(.sortbottom):hover td {
    background: #e8f0f7;
}


/* No records */

.no-records {
    padding: 20px !important;

    text-align: center !important;

    color: #777 !important;
}


/* =========================================================
   SORTABLE TABLE HEADERS
   ========================================================= */

/* Hide sorttable.js built-in arrows */

#sorttable_sortfwdind,
#sorttable_sortrevind,
span.sortarrow {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Font Awesome icon */

.mof-h2h-table thead th .sort-icon {
    position: absolute;

    right: 8px;
    top: 50%;

    transform: translateY(-50%);

    margin: 0;

    width: auto;

    color: #8fb8e3;

    font-size: 11px;

    opacity: .7;

    pointer-events: none;
}

.mof-h2h-table thead th:hover .sort-icon {
    opacity: 1;
}


/* =========================================================
   H2H TOTAL ROW
   ========================================================= */

/*
   The TOTAL row is identified by h2h-total-row in our PHP.
   sorttable.js can also use the sortbottom class to keep that
   row pinned to the bottom. Target BOTH so no other table rule
   can turn the row white.
*/

.mof-h2h-table tbody tr.h2h-total-row td,
.mof-h2h-table tbody tr.sortbottom td {
    background: #626262 !important;
    background-image: linear-gradient(
        to bottom,
        #777777 0%,
        #5b5b5b 100%
    ) !important;

    color: #ffffff !important;

    border-color: #505050 !important;
    border-top: 2px solid #3f3f3f !important;

    font-weight: 600;
}

.mof-h2h-table tbody tr.h2h-total-row td:first-child,
.mof-h2h-table tbody tr.sortbottom td:first-child {
    text-align: left;
    padding-left: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 700;
}

/* Never allow hover/zebra rules to alter TOTAL */
.mof-h2h-table tbody tr.h2h-total-row:hover td,
.mof-h2h-table tbody tr.sortbottom:hover td,
.mof-h2h-table tbody tr.h2h-total-row:nth-child(odd) td,
.mof-h2h-table tbody tr.h2h-total-row:nth-child(even) td,
.mof-h2h-table tbody tr.sortbottom:nth-child(odd) td,
.mof-h2h-table tbody tr.sortbottom:nth-child(even) td {
    background: #626262 !important;
    background-image: linear-gradient(
        to bottom,
        #777777 0%,
        #5b5b5b 100%
    ) !important;
    color: #ffffff !important;
}

/* =========================================================
   LEGEND
   ========================================================= */

.mof-h2h-legend {
    margin-top: 22px;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   PAGE SUBTITLE
   ========================================================= */

.mof-subtitle {
    text-align: center;

    color: #666;

    font-size: 15px;

    letter-spacing: .5px;

    margin: 12px 0 18px;

    font-style: italic;
}


/* =========================================================
   COACH PROFILE
   ========================================================= */

.mof-coach-profile {
    width: 100%;

    margin: 20px 0 8px 0;

    border: 1px solid #c7c7c7;

    background: #ffffff;

    box-sizing: border-box;
}


/* Profile Header */

.mof-coach-profile-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 9px 12px;

    background: linear-gradient(
        to bottom,
        #2c6495 0%,
        #003b70 100%
    );

    border-bottom: 2px solid #aaa;

    color: #ffffff;
}

.mof-coach-profile-name {
    font-size: 17px;
    font-weight: bold;
}




/* =========================================================
   ACTIVE / INACTIVE
   ========================================================= */

.mof-coach-status {
    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 10px;
    font-weight: bold;

    letter-spacing: .5px;
}

.status-dot {
    display: inline-block;

    width: 8px;
    height: 8px;

    border-radius: 50%;
}

.mof-coach-status.active .status-dot {
    background: #4fd15a;

    box-shadow:
        0 0 5px rgba(79, 209, 90, .7);
}

.mof-coach-status.inactive .status-dot {
    background: #999999;
}


/* =========================================================
   PROFILE BODY
   ========================================================= */

.mof-coach-profile-body {
    display: flex;

    align-items: stretch;

    padding: 16px;

    gap: 22px;

    box-sizing: border-box;
}


/* =========================================================
   COACH PHOTO
   ========================================================= */

.mof-coach-photo-column {
    flex: 0 0 220px;
}

.mof-coach-profile-photo {
    display: block;

    width: 220px;
    height: 300px;

    object-fit: cover;
    object-position: top center;

    border: 2px solid #555;
    border-radius: 4px;

    background: #ddd;

    box-sizing: border-box;
}


/* =========================================================
   PROFILE INFORMATION
   ========================================================= */

.mof-coach-info-column {
    flex: 1;

    min-width: 0;
}

.mof-profile-section {
    margin-bottom: 20px;
}

.mof-profile-section:last-child {
    margin-bottom: 0;
}

.mof-profile-section-title {
    margin-bottom: 9px;

    padding-bottom: 5px;

    border-bottom: 1px solid #d5d5d5;

    color: #003b70;

    font-size: 13px;
    font-weight: bold;

    letter-spacing: .4px;
}

.mof-career-placeholder {
    color: #888;

    font-size: 12px;

    font-style: italic;
}


/* =========================================================
   CAREER RECORD
   ========================================================= */

/*
   Outer grid:
   Two equal columns of stat bars.
*/

.mof-career-record {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px 18px;

    width: 100%;
}


/*
   Each individual gray stat bar:
   label fills the left;
   value sits cleanly at the far right.
*/

.mof-career-record > div {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) max-content;

    align-items: center;

    column-gap: 15px;

    min-width: 0;

    padding: 9px 10px;

    background: #f5f5f5;

    border-bottom: 1px solid #ddd;

    font-size: 12px;

    line-height: 1.2;

    box-sizing: border-box;
}


/* Career labels */

.mof-career-record > div > span {
    display: block;

    min-width: 0;

    color: #555;

    white-space: nowrap;
}


/* Career values */

.mof-career-record > div > strong {
    display: block;

    color: #111;

    font-weight: 700;

    text-align: right;

    white-space: nowrap;
}


/* =========================================================
   CURRENT / M26 TEAM
   ========================================================= */

.mof-current-teams {
    display: flex;

    flex-wrap: wrap;

    gap: 16px;
}

.mof-current-team {
    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 12px;
    font-weight: bold;
}

.mof-current-team-logo {
    width: 54px;
    height: 54px;

    object-fit: contain;
}


/* =========================================================
   ACCOLADES
   ========================================================= */

.mof-profile-accolades {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px;
}

.mof-accolade-item {
    display: flex;

    align-items: center;

    gap: 10px;
}

.mof-hof-badge {
    width: 70px;
    height: 70px;

    object-fit: contain;
}

.mof-accolade-text {
    display: flex;

    flex-direction: column;

    color: #222;

    font-size: 12px;
}

.mof-accolade-text strong {
    color: #003b70;

    font-size: 12px;
}

.mof-accolade-text span {
    margin-top: 2px;

    color: #666;

    font-size: 11px;
}

.mof-no-accolades {
    color: #888;

    font-size: 11px;

    font-style: italic;
}

/* =========================================================
   FORCE TOTAL ROW STYLE
   ========================================================= */

.mof-h2h-table td.h2h-total-cell {
    background: #626262 !important;

    background-image: linear-gradient(
        to bottom,
        #777777 0%,
        #5b5b5b 100%
    ) !important;

    color: #ffffff !important;

    border: 1px solid #505050 !important;
    border-top: 2px solid #3f3f3f !important;

    font-weight: 600 !important;
}

.mof-h2h-table td.h2h-total-label {
    text-align: left !important;
    padding-left: 12px !important;

    font-weight: 700 !important;

    letter-spacing: 0.5px;

    text-transform: uppercase;
}

.mof-h2h-table tbody tr.h2h-total-row:hover td.h2h-total-cell {
    background: #626262 !important;

    background-image: linear-gradient(
        to bottom,
        #777777 0%,
        #5b5b5b 100%
    ) !important;

    color: #ffffff !important;
}

.mof-win-token {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

/* =========================================================
   SUPER BOWL TROPHIES
   ========================================================= */

.super-bowl-accolade {
    align-items: center;
}

.mof-super-bowl-trophies {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 3px;

    max-width: 260px;
}

.mof-super-bowl-trophy {
    width: 28px;
    height: 38px;

    object-fit: contain;

    display: block;
}

/* =========================================================
   MOF COACH DATABASE LANDING PAGE
   ========================================================= */

.mof-database-landing {
    margin-top: 18px;
    padding: 28px 28px 24px;

    border: 1px solid #ccc;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #f5f7f9 100%
        );

    box-sizing: border-box;
}


/* =========================================================
   LANDING TITLE
   ========================================================= */

.mof-database-landing-title {
    text-align: center;

    color: #003b70;

    font-size: 24px;
    font-weight: bold;

    letter-spacing: .7px;
}


.mof-database-landing-subtitle {
    margin-top: 6px;

    text-align: center;

    color: #666;

    font-size: 13px;
}


/* =========================================================
   DATABASE STATS
   ========================================================= */

.mof-database-stats {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin: 26px 0 28px;
}


.mof-database-stat {

    padding: 20px 14px;

    min-height: 104px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    background:#fff;

    border:1px solid #d7d7d7;

    box-shadow:0 2px 8px rgba(0,0,0,.05);

}


.mof-database-stat strong {

    font-size: 36px;

    color:#003b70;

    line-height:1;

    margin-bottom:10px;

}


.mof-database-stat span{

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.8px;

    color:#777;

    text-align:center;

    line-height:16px;

}


/* =========================================================
   FEATURES
   ========================================================= */

.mof-database-features {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


.mof-database-feature {
    display: grid;

    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: max-content max-content;

    column-gap: 16px;
    row-gap: 5px;

    align-content: center;
    align-items: start;

    min-height: 110px;

    padding: 17px 20px;

    background: #ffffff;

    border: 1px solid #d8d8d8;

    box-sizing: border-box;

    overflow: hidden;
}


.mof-database-feature i {
    grid-column: 1;
    grid-row: 1 / 3;

    align-self: center;
    justify-self: center;

    width: 42px;

    color: #2c6495;

    font-size: 32px;

    text-align: center;
}


.mof-database-feature strong {
    grid-column: 2;
    grid-row: 1;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #003b70;

    font-size: 17px;
    line-height: 20px;

    font-weight: 700;
}


.mof-database-feature span {
    grid-column: 2;
    grid-row: 2;

    display: block !important;

    position: static !important;
    float: none !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #666;

    font-size: 12px;
    line-height: 17px;
}

/* =========================================================
   START MESSAGE
   ========================================================= */

.mof-database-start {
    display: block !important;

    position: relative !important;

    width: 100% !important;

    margin: 24px 0 0 0 !important;

    padding: 16px 20px !important;

    background: #003b70 !important;

    color: #ffffff !important;

    text-align: center !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    clear: both;
}


.mof-database-start > strong {
    display: block !important;

    position: static !important;
    float: none !important;

    width: auto !important;

    margin: 0 0 5px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 18px;
    line-height: 22px;

    font-weight: 700;

    text-align: center !important;
}


.mof-database-start > span {
    display: block !important;

    position: static !important;
    float: none !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #d8e5f0 !important;

    font-size: 12px;
    line-height: 17px;

    text-align: center !important;
}


/* =========================================================
   ALL-TIME RECORDS LINK
   ========================================================= */

.mof-database-other-link {
    margin-top: 18px;

    text-align: center;
}


.mof-database-other-link a {
    color: #003b70;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;
}

.mof-database-other-link a:hover {
    color: #2c6495;
}


/* =========================================================
   LANDING MOBILE
   ========================================================= */

@media screen and (max-width: 700px) {

    .mof-database-landing {
        padding: 18px;
    }


    .mof-database-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .mof-database-features {
        grid-template-columns: 1fr;
    }


    .mof-database-landing-title {
        font-size: 20px;
    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 700px) {

    .mof-coach-profile-body {
        flex-direction: column;
    }

    .mof-coach-photo-column {
        flex: none;

        width: 100%;

        display: flex;

        justify-content: center;
    }

    .mof-coach-profile-photo {
        width: 190px;
        height: 260px;
    }

    .mof-coach-profile-header {
        align-items: flex-start;
    }

    .mof-current-teams {
        justify-content: flex-start;
    }


    /* Career stats become one column */

    .mof-career-record {
        grid-template-columns: 1fr;
    }


    /* Tabs */

    .mof-h2h-tabs a {
        flex: 1 0 72px;

        min-width: 72px;

        padding: 8px;

        text-align: center;

        font-size: 11px;
    }

    .h2h-tab-logo {
        width: 30px;
        height: 30px;
    }


    /* H2H table */

    .mof-h2h-table {
        min-width: 650px;
    }


    /* Coach selector */

    .mof-h2h-selector select {
        width: 100%;
    }
}