/* ============================================================================
   TryoutEngine - parent portal design system.

   One stylesheet for everything a parent sees: the portal hub, the groupings,
   the schedule, the posting pools and the final team postings.

   Why a shared file rather than per-page <style> blocks. The parent pages open
   inside a fancybox IFRAME from the hub, so each one is a separate document
   with its own <head>. Before this they each carried their own look, and three
   of them carried none at all - raw Times New Roman on white. A parent moving
   from Groupings to Pool Play walked into what looked like a different, older
   product. One file, linked from every page, keeps them the same product.

   Colours follow te-nav.css so the portal matches the bar above it:
     #ED4E22  brand orange, the only accent
     #14161A  near-black, headers and headings
     #F6F7F9  page ground
   Class prefix is tep- (TryoutEngine Parent) on purpose. Bootstrap 3 is still
   loaded on the master-page children and owns .card, .table and .badge.
   ========================================================================== */

/* ---------------------------------------------------------------- reset ---- */

.tep-body {
    margin: 0;
    background: #F6F7F9;
    color: #14161A;
    font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.tep-body * {
    box-sizing: border-box;
}

/* The standalone pages are ASP.NET WebForms, so a <form> wraps the whole
   document and would otherwise collapse the layout. */
.tep-body form {
    margin: 0;
}

/* --------------------------------------------------------------- layout ---- */

.tep-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 22px 60px;
}

.tep-shell--narrow {
    max-width: 900px;
}

/* Inside the portal's fancybox IFRAME there is no room to spare at the top. */
.tep-shell--frame {
    padding-top: 18px;
}

/* ----------------------------------------------------------------- hero ---- */

.tep-hero {
    text-align: center;
    padding: 6px 0 22px;
}

.tep-eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #ED4E22;
    margin-bottom: 8px;
}

.tep-title {
    margin: 0;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.015em;
    color: #14161A;
    word-break: break-word;
}

.tep-sub {
    margin: 10px auto 0;
    max-width: 620px;
    font-size: 15px;
    color: #5B6470;
}

/* ------------------------------------------------------------ level grid --- */

.tep-levels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 18px;
    align-items: start;
}

.tep-level {
    background: #fff;
    border: 1px solid #E4E7EC;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 22, 30, .05);
    overflow: hidden;
    transition: box-shadow .16s ease, border-color .16s ease;
}

.tep-level:hover {
    border-color: #D6DAE1;
    box-shadow: 0 6px 20px rgba(16, 22, 30, .09);
}

.tep-level-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px 13px;
    border-bottom: 1px solid #EEF0F3;
}

.tep-level-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #14161A;
    min-width: 0;
    word-break: break-word;
}

.tep-level-count {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5B6470;
    background: #F2F4F7;
    border-radius: 999px;
    padding: 4px 10px;
}

.tep-level-body {
    padding: 12px;
    display: grid;
    gap: 8px;
}

/* --------------------------------------------------------------- tiles ----- */

/* One tile per published item. Nothing renders for an item the association has
   not published yet, so a parent is never handed a link into an empty page. */
.tep-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #E4E7EC;
    border-radius: 11px;
    background: #fff;
    color: #14161A;
    text-decoration: none;
    transition: border-color .14s ease, background .14s ease, transform .08s ease, box-shadow .14s ease;
}

.tep-tile:hover,
.tep-tile:focus {
    text-decoration: none;
    color: #14161A;
    border-color: #ED4E22;
    background: #FFF8F5;
    box-shadow: 0 3px 12px rgba(237, 78, 34, .14);
}

.tep-tile:active {
    transform: translateY(1px);
}

.tep-tile:focus-visible {
    outline: 2px solid #ED4E22;
    outline-offset: 2px;
}

.tep-tile-ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #FFF0EA;
    color: #ED4E22;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tep-tile-ico svg {
    width: 18px;
    height: 18px;
    display: block;
}

.tep-tile-txt {
    min-width: 0;
}

.tep-tile-nm {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.25;
}

.tep-tile-hint {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: #6B7480;
}

.tep-tile-go {
    margin-left: auto;
    flex: 0 0 auto;
    color: #B6BDC6;
    font-size: 17px;
    line-height: 1;
    transition: color .14s ease, transform .14s ease;
}

.tep-tile:hover .tep-tile-go {
    color: #ED4E22;
    transform: translateX(2px);
}

/* Level with nothing posted yet. Kept visible on purpose - a parent should be
   able to see their level exists and that it is simply not posted, rather than
   wonder whether they are on the wrong page. */
.tep-level--quiet {
    background: #FBFBFC;
}

.tep-nothing {
    padding: 16px 14px 18px;
    text-align: center;
    font-size: 13.5px;
    color: #79828E;
}

/* ------------------------------------------------------ in-page viewer ---- */

/* Opening a posting used to throw up a fancybox overlay - a modal inside the
   page, with its own chrome and its own scrollbar, on top of a page that then
   had two. The viewer below swaps the card grid out for the posting itself and
   gives back one clear way out, so the posting gets the whole window. */

.tep-viewer {
    display: flex;
    flex-direction: column;
    min-height: 70vh;
}

.tep-viewbar {
    position: sticky;
    top: 64px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #E4E7EC;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 22, 30, .05);
}

.tep-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #14161A;
    background: #fff;
    border: 1px solid #D6DAE1;
    border-radius: 9px;
    padding: 8px 14px;
    cursor: pointer;
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}

.tep-back:hover,
.tep-back:focus {
    border-color: #ED4E22;
    color: #B23C11;
    background: #FFF8F5;
}

.tep-back:focus-visible {
    outline: 2px solid #ED4E22;
    outline-offset: 2px;
}

.tep-viewttl {
    font-size: 15px;
    font-weight: 700;
    color: #14161A;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tep-viewttl small {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #ED4E22;
}

.tep-viewframe {
    flex: 1 1 auto;
    width: 100%;
    min-height: 70vh;
    border: 1px solid #E4E7EC;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 22, 30, .05);
}

@media (max-width: 640px) {
    .tep-viewbar { top: 56px; }
    .tep-viewframe { min-height: 76vh; }
}

/* -------------------------------------------------------------- toolbar ---- */

.tep-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #E4E7EC;
    border-radius: 12px;
    margin-bottom: 18px;
}

.tep-bar-lbl {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6B7480;
}

.tep-bar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The WebForms DropDownList renders a bare <select>; style it by element so the
   markup does not have to carry a CssClass through every data-bound control. */
.tep-bar select,
.tep-select {
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #14161A;
    background: #fff;
    border: 1px solid #D6DAE1;
    border-radius: 9px;
    padding: 8px 12px;
    min-width: 190px;
    max-width: 100%;
    cursor: pointer;
}

.tep-bar select:hover,
.tep-select:hover {
    border-color: #B6BDC6;
}

.tep-bar select:focus,
.tep-select:focus {
    outline: none;
    border-color: #ED4E22;
    box-shadow: 0 0 0 3px rgba(237, 78, 34, .16);
}

.tep-search {
    font: inherit;
    font-size: 15px;
    color: #14161A;
    background: #fff;
    border: 1px solid #D6DAE1;
    border-radius: 9px;
    padding: 8px 12px;
    min-width: 200px;
    flex: 1 1 200px;
    max-width: 320px;
}

.tep-search:focus {
    outline: none;
    border-color: #ED4E22;
    box-shadow: 0 0 0 3px rgba(237, 78, 34, .16);
}

/* --------------------------------------------------------------- panels ---- */

.tep-panel {
    background: #fff;
    border: 1px solid #E4E7EC;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 22, 30, .05);
    margin-bottom: 18px;
    overflow: hidden;
}

.tep-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #14161A;
    color: #fff;
}

.tep-panel-nm {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .01em;
}

.tep-panel-count {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #E7E9EC;
    background: rgba(255, 255, 255, .13);
    border-radius: 999px;
    padding: 3px 10px;
}

.tep-panel-body {
    padding: 16px 18px 18px;
}

/* --------------------------------------------------------------- roster ---- */

/* Names read down the column, which is how a parent scans an alphabetical
   posting: find the letter, then the name. A wrapping flex row made them read
   across, which meant scanning the whole block to know a name was not there. */
.tep-roster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px 14px;
}

/* Some associations post jersey numbers instead of names. A number is two
   characters, so the cells get much narrower - but not so narrow that a
   two-digit number wraps onto two lines next to the goalie badge. */
.tep-roster--num {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}

.tep-name {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14.5px;
    color: #14161A;
    background: #FAFBFC;
    border: 1px solid #EEF0F3;
    min-width: 0;
}

.tep-name-txt {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tep-roster--num .tep-name {
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .02em;
}

.tep-roster--num .tep-name-txt {
    white-space: nowrap;
}

/* The bullet gives a name a left edge to line up against. A centred
   number does not need one. */
.tep-roster--num .tep-dot {
    display: none;
}

.tep-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ED4E22;
    opacity: .55;
}

.tep-empty {
    padding: 22px 10px;
    text-align: center;
    color: #79828E;
    font-size: 14px;
}

/* --------------------------------------------------------------- badges ---- */

.tep-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .03em;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}

.tep-badge--skater { background: #EEF1F4; color: #3C4650; }
.tep-badge--goalie { background: #1E5AA8; color: #fff; }
.tep-badge--scrim  { background: #FFE3D9; color: #B23C11; }
.tep-badge--skills { background: #D7EEEE; color: #0B5658; }
.tep-badge--event  { background: #EDE4F7; color: #59318C; }

/* ---------------------------------------------------------------- table ---- */

/* GridView renders a plain <table>; everything below is by element inside the
   wrapper so the server control does not need a per-cell CssClass. */
.tep-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tep-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14.5px;
    background: #fff;
}

.tep-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #14161A;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
    padding: 11px 14px;
    white-space: nowrap;
}

.tep-table th a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, .45);
}

.tep-table th a:hover {
    color: #FFB79E;
    border-bottom-color: #FFB79E;
}

.tep-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #EEF0F3;
    color: #232830;
    vertical-align: middle;
}

.tep-table tr:last-child td {
    border-bottom: 0;
}

.tep-table tbody tr:nth-child(even) td {
    background: #FAFBFC;
}

.tep-table tbody tr:hover td {
    background: #FFF6F2;
}

/* ------------------------------------------------------------ check-in ---- */

/* The check-in kiosk is a volunteer with a clipboard-sized phone ticking off
   kids as they walk in. The checkbox is the whole job, so it gets a real tap
   target instead of the browser default. */
.tep-body input[type="checkbox"] {
    width: 24px;
    height: 24px;
    accent-color: #ED4E22;
    cursor: pointer;
    vertical-align: middle;
}

.tep-body .tep-table td,
.tep-body .tep-table th {
    padding-top: 9px;
    padding-bottom: 9px;
}

/* A checked-in row should be obvious at a glance down the list. */
.tep-body .tep-table td:first-child { width: 1%; white-space: nowrap; }

/* Body cells only. A sortable header is already a link, and colouring those
   the same turned the dark header row orange-on-black. Every row being a link
   also means the colour carries no information, so it stays quiet until hover. */
.tep-body .tep-table td a { color: #232830; text-decoration: none; font-weight: 600; }
.tep-body .tep-table td a:hover { color: #B23C11; text-decoration: underline; }

/* Each roster reads as its own card with a real header. Before this the three
   rosters were three bare tables under three words of plain text, and a
   volunteer scanning for the right column had nothing to aim at.

   The stripe colours identify the COLUMN, not the jersey - the label itself
   carries the team's actual colour name, which is configurable per level, so
   painting the banner to match would be a guess that is wrong as soon as an
   association runs Red vs Blue. */
.ci-team {
    display: block;
    padding: 12px 14px;
    margin-bottom: 0;
    background: #14161A;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: center;
    border-radius: 12px 12px 0 0;
    border-bottom: 4px solid #ED4E22;
}

.ci-team--b { border-bottom-color: #1E5AA8; }
.ci-team--g { border-bottom-color: #12874A; }

/* Lift the roster into the card the header sits on. */
.tep-body .ci-team + * .tep-table,
.tep-body .tep-table {
    border-radius: 0;
}

.ci-count {
    display: inline-block;
    min-width: 30px;
    padding: 3px 10px;
    background: #14161A;
    color: #fff;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
}

/* The rosters themselves sit in cards so the columns separate cleanly. */
.tep-body .ci-team ~ * {
    background: #fff;
}

/* --------------------------------------------------------------- footer ---- */

.tep-foot {
    max-width: 1180px;
    margin: 34px auto 0;
    padding: 18px 22px 0;
    border-top: 1px solid #E4E7EC;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: baseline;
    font-size: 12.5px;
    color: #79828E;
}

.tep-foot-when {
    margin-left: auto;
}

.tep-note {
    margin: 14px 0 0;
    text-align: center;
    font-size: 13px;
    color: #79828E;
}

.tep-congrats {
    margin: 18px 0 0;
    text-align: center;
    font-size: 15.5px;
    font-weight: 600;
    color: #ED4E22;
}

/* ------------------------------------------------------------ ad slot ------ */

.tep-ad {
    margin: 26px auto 0;
    text-align: center;
}

.tep-ad img {
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------- responsive -- */

@media (max-width: 640px) {
    .tep-shell { padding: 18px 14px 44px; }
    .tep-title { font-size: 25px; }
    .tep-levels { grid-template-columns: 1fr; gap: 14px; }
    .tep-roster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .tep-bar select, .tep-select { min-width: 0; width: 100%; }
    .tep-bar-right { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------------------ print -- */

@media print {
    .tep-body { background: #fff; }
    .tep-bar, .tep-ad, .tep-tile-go, .tep-foot { display: none !important; }
    .tep-panel, .tep-level { break-inside: avoid; box-shadow: none; }
    .tep-panel-head { background: #14161A !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .tep-table th { position: static; background: #14161A !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
