/* ==========================================================================
   schedule.css - telas de cronograma da competicao

   Serve as 3 views de resources/views/schedule/ (cronograma publico, cronograma
   completo com equipes e a lista de equipes por categoria).

   Substitui os dois <style> inline quase identicos que existiam em
   printTableWods2 e printSchedules2. Regras do desenho:

   - tabela de verdade (<table> + rowspan), nunca flexbox fingindo tabela:
     nada de altura de linha calculada em PHP nem corte de texto nas pontas;
   - fonte em rem/clamp(), nunca vh (vh estourava a linha no 4K e ficava
     ilegivel no celular);
   - nome longo quebra em varias linhas (overflow-wrap: anywhere) e a celula
     cresce - o wrapper com overflow-x e so rede de seguranca;
   - impressao de verdade: @page A4 + print-color-adjust exact, porque o
     bootstrap 3 apaga TODO fundo no @media print.
   ========================================================================== */

/* --------------------------------------------------------------- base ---- */

html.schedulePage,
body.schedulePage {
    background-color: #fff;
    color: #1b2733;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 100%;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

body.schedulePage {
    margin: 0;
    padding: 0;
}

/* o cinza de tela fica no wrapper, nao no body: o background do body virava o
   canvas do PDF e saia impresso na folha inteira */
.schedulePageBg {
    background-color: #eef1f4;
    min-height: 100vh;
    padding-bottom: 3rem;
}

.schedulePage * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.scheduleWrap {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 0.75rem;
}

/* ------------------------------------------------------------- header ---- */

.scheduleHeader {
    background-color: #18384e;
    color: #fff;
    padding: 0.9rem 0;
    margin-bottom: 1.25rem;
    border-bottom: 4px solid #0e2333;
}

.scheduleHeaderInner {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 0.75rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.scheduleHeaderLogo {
    width: auto;
    height: auto;
    max-height: 4.5rem;
    max-width: 9rem;
    margin-right: 1rem;
    background-color: #fff;
    border-radius: 4px;
    padding: 3px;
}

.scheduleHeaderText {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 12rem;
    flex: 1 1 12rem;
    min-width: 0;
}

.scheduleHeaderTitle {
    margin: 0;
    font-size: clamp(1.05rem, 2.6vw, 1.6rem);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    word-break: break-word;
}

.scheduleHeaderSubtitle {
    margin: 0.15rem 0 0 0;
    font-size: clamp(0.75rem, 1.6vw, 0.9rem);
    color: #a9c2d3;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.scheduleHeaderBrand {
    height: 1.75rem;
    width: auto;
    margin-left: auto;
    opacity: 0.9;
}

/* ---------------------------------------------------------- toolbar ------ */

.scheduleToolbar {
    max-width: 62rem;
    margin: 0 auto 1rem auto;
    padding: 0 0.75rem;
    text-align: right;
}

.scheduleToolbar .btn {
    margin-left: 0.35rem;
}

/* --------------------------------------------------------- navegacao ----- */

.scheduleDayNav {
    margin: 0 0 1rem 0;
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.scheduleDayNav li {
    margin: 0 0.4rem 0.4rem 0;
    list-style: none;
}

.scheduleDayNav a {
    display: block;
    padding: 0.3rem 0.85rem;
    border: 1px solid #c3ced8;
    border-radius: 999px;
    background-color: #fff;
    color: #18384e;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}

.scheduleDayNav a:hover,
.scheduleDayNav a:focus {
    background-color: #18384e;
    border-color: #18384e;
    color: #fff;
    text-decoration: none;
}

/* -------------------------------------------------------------- dia ------ */

.scheduleDay {
    margin-bottom: 1.75rem;
}

.scheduleDayTitle {
    margin: 0 0 0.85rem 0;
    padding: 0.5rem 0.85rem;
    background-color: #223c4f;
    color: #fff;
    border-radius: 4px 4px 0 0;
    font-size: clamp(0.95rem, 2.2vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.scheduleDayTitle small {
    color: #a9c2d3;
    font-size: 0.7em;
    font-weight: 400;
    margin-left: 0.5rem;
}

/* ----------------------------------------------------------- painel ------ */

.schedulePanel {
    background-color: #fff;
    border: 1px solid #d8dee4;
    border-radius: 5px;
    margin-bottom: 0.9rem;
    overflow: hidden;
}

.schedulePanelHead {
    padding: 0.45rem 0.75rem;
    background-color: #f2f5f7;
    border-bottom: 1px solid #d8dee4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.scheduleTime {
    font-size: clamp(1rem, 2.4vw, 1.35rem);
    font-weight: 700;
    color: #18384e;
    line-height: 1.1;
    margin-right: 0.6rem;
}

.schedulePanelLabel {
    font-size: clamp(0.72rem, 1.5vw, 0.85rem);
    color: #6b7885;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ------------------------------------------------------- bloco de wod ---- */

.scheduleBlock {
    border-top: 1px solid #e6eaee;
}

.scheduleBlock:first-child {
    border-top: none;
}

.scheduleBlockHead {
    padding: 0.4rem 0.75rem;
    font-size: clamp(0.8rem, 1.8vw, 0.95rem);
    font-weight: 500;
    color: #1b2733;
    background-color: #fff;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    word-break: break-word;
}

.scheduleBlockHead .scheduleBatteryTag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    margin-right: 0.45rem;
    background-color: #18384e;
    color: #fff;
    border-radius: 3px;
    font-size: 0.78em;
    font-weight: 700;
    white-space: nowrap;
}

.scheduleBlockHead small {
    color: #6b7885;
    font-weight: 400;
}

/* ----------------------------------------------------------- tabela ------ */

/* rede de seguranca: conteudo patologico rola aqui dentro, nunca no body */
.scheduleTableWrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.scheduleTable {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: clamp(0.72rem, 1.6vw, 0.9rem);
}

table.scheduleTable > thead > tr > th {
    padding: 0.3rem 0.5rem;
    background-color: #18384e !important;
    color: #fff !important;
    font-weight: 500;
    font-size: 0.88em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    border: 1px solid #14304a;
    vertical-align: middle;
    white-space: nowrap;
}

table.scheduleTable > tbody > tr > td,
table.scheduleTable > tbody > tr > th {
    padding: 0.3rem 0.5rem;
    border: 1px solid #e0e5ea;
    vertical-align: middle;
    text-align: left;
    line-height: 1.3;
    /* o ponto do redesign: nome comprido quebra e a celula cresce */
    overflow-wrap: anywhere;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* zebrado por linha: as celulas com cor propria (categoria, evento, horario)
   ficam fora. Nao vale para .scheduleTableSlots, que zebra por horario. */
table.scheduleTable:not(.scheduleTableSlots) > tbody > tr:nth-of-type(2n) > td:not(.scheduleCat):not(.scheduleWod):not(.scheduleHour) {
    background-color: #f6f8fa !important;
}

/* zebrado por horario (cronograma resumido): um <tbody> por bateria */
table.scheduleTable > tbody.scheduleAltSlot > tr > td:not(.scheduleCat):not(.scheduleWod):not(.scheduleHour) {
    background-color: #f6f8fa !important;
}

table.scheduleTable > tbody.scheduleAltSlot > tr > td.scheduleHour {
    background-color: #e3e9ee !important;
}

table.scheduleTable > tbody.scheduleAltSlot > tr > td.scheduleWod {
    background-color: #faf3de !important;
}

.scheduleNum,
.scheduleLane {
    text-align: center !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.scheduleLane {
    font-weight: 700;
    color: #18384e;
}

.scheduleTeam {
    font-weight: 500;
}

.scheduleBox {
    color: #46545f;
}

.scheduleMembers {
    color: #46545f;
    font-size: 0.95em;
}

.scheduleMembers span {
    display: block;
}

/* celula da categoria.

   O padrao e neutro claro com texto escuro: e o que sobra quando a cor cadastrada
   em Athleteslevels.color nao serve de cor CSS (no banco existem "azul", "ROXO",
   "Scale Masc", "0123456") ou quando quem pinta e a classe backgroundColorNOME de
   affiliateCSS (afiliado antigo sem cor propria, tons pastel claros).

   Quando o servidor conseguiu resolver a cor, o Blade acrescenta .scheduleCatPaint
   e passa fundo e texto em custom properties. O !important mora AQUI, na folha, e
   nao no atributo style: o reset de impressao do bootstrap 3
   (* { background: transparent !important }) ganhava do style inline e a celula
   saia branca no branco na folha. A cor do texto vem calculada pelo contraste
   (WODEngageHelpers::categoryCellColors), entao nunca e branco no amarelo. */
td.scheduleCat,
th.scheduleCat {
    text-align: center !important;
    font-weight: 700;
    background-color: #eef1f4;
    color: #102a3d;
    vertical-align: middle;
}

.scheduleCatPaint {
    background-color: var(--catBg) !important;
    color: var(--catFg) !important;
}

td.scheduleCat small,
th.scheduleCat small {
    display: block;
    font-weight: 400;
    font-size: 0.8em;
    opacity: 0.9;
    color: inherit;
}

.scheduleWod {
    background-color: #fdf8e6 !important;
    color: #7a5c00 !important;
    font-weight: 500;
    vertical-align: middle;
}

.scheduleWod small {
    display: block;
    color: #9a7c22 !important;
    font-weight: 400;
}

.scheduleHour {
    background-color: #eef1f4 !important;
    font-weight: 700;
    color: #18384e !important;
    text-align: center !important;
    white-space: nowrap;
    vertical-align: middle;
}

/* ------------------------------------------------------- lista equipes --- */

.scheduleCatHead {
    margin: 0 0 0.6rem 0;
    padding: 0.45rem 0.85rem;
    border-radius: 4px;
    background-color: #eef1f4;
    color: #102a3d;
    font-size: clamp(0.95rem, 2.2vw, 1.25rem);
    font-weight: 700;
}

.scheduleCatHead small {
    color: inherit;
    opacity: 0.85;
    font-weight: 400;
    font-size: 0.65em;
    margin-left: 0.5rem;
}

/* -------------------------------------------------------------- vazio ---- */

.scheduleEmpty {
    background-color: #fff;
    border: 1px dashed #c3ced8;
    border-radius: 5px;
    padding: 1.5rem;
    text-align: center;
    color: #6b7885;
    font-size: 0.95rem;
}

/* ------------------------------------------------------------- avisos ---- */

.scheduleWarning {
    background-color: #fcf4e3;
    border: 1px solid #e6d9b4;
    border-left: 4px solid #d8a900;
    border-radius: 4px;
    padding: 0.6rem 0.85rem;
    margin-bottom: 1rem;
    color: #6c5300;
    font-size: 0.85rem;
}

.scheduleWarning ul {
    margin: 0.3rem 0 0 1.1rem;
    padding: 0;
}

/* ------------------------------------------------------------ celular ---- */

@media (max-width: 30rem) {
    .scheduleWrap,
    .scheduleHeaderInner,
    .scheduleToolbar {
        padding: 0 0.5rem;
    }

    .scheduleHeaderBrand {
        display: none;
    }

    table.scheduleTable > thead > tr > th,
    table.scheduleTable > tbody > tr > td,
    table.scheduleTable > tbody > tr > th {
        padding: 0.25rem 0.3rem;
    }

    /* no celular o cabecalho pode quebrar em duas linhas: com nowrap
       "Categoria" nao caberia na coluna e a tabela ganhava rolagem interna */
    table.scheduleTable > thead > tr > th {
        white-space: normal;
        letter-spacing: 0;
        /* em em, o 0.72 caia para 8,3px em 320-414px (ilegivel); com clamp o
           cabecalho tem piso de 10px e continua menor que o corpo da tabela.
           No piso "Categoria" (uma palavra so) fica ~2px mais larga que a coluna
           em 320px: o anywhere deixa ela quebrar em duas linhas em vez de vazar */
        font-size: clamp(0.625rem, 1.15vw, 0.8rem);
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* ---------------------------------------------------------- impressao ---- */

@page {
    size: A4;
    margin: 10mm 8mm;
}

@media print {
    html.schedulePage,
    body.schedulePage {
        width: auto;
        background-color: #fff !important;
        color: #000;
        font-size: 9pt;
        padding: 0;
        margin: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .schedulePageBg {
        background-color: transparent !important;
        min-height: 0;
        padding-bottom: 0;
    }

    /* o bootstrap 3 zera o fundo de tudo no print; o card precisa voltar branco */
    .schedulePanel {
        background-color: #fff !important;
    }

    .noprint {
        display: none !important;
    }

    /* o bootstrap 3 imprime o href depois de cada link */
    .schedulePage a[href]:after {
        content: "" !important;
    }

    /* uma folga pequena pra nada encostar no corte da folha */
    .scheduleWrap,
    .scheduleHeaderInner {
        max-width: none;
        padding: 0 2mm;
    }

    .scheduleHeader {
        background-color: #18384e !important;
        color: #fff !important;
        padding: 0.4rem 0;
        margin-bottom: 0.6rem;
        border-bottom-width: 2px;
    }

    .scheduleHeaderTitle,
    .scheduleHeaderSubtitle {
        color: #fff !important;
    }

    .scheduleHeaderLogo {
        max-height: 18mm;
        background-color: #fff !important;
    }

    .scheduleDay {
        page-break-after: always;
    }

    .scheduleDay:last-child {
        page-break-after: auto;
    }

    .scheduleDayTitle {
        background-color: #223c4f !important;
        color: #fff !important;
    }

    /* o painel PODE quebrar entre paginas: uma bateria de 42 raias (ou a lista de
       68 equipes de uma categoria) nunca cabe numa folha, e com page-break-inside
       avoid o painel inteiro era empurrado, deixando a pagina anterior em branco.
       O que nao pode quebrar e a LINHA, e o cabecalho da tabela se repete. */
    .schedulePanel {
        page-break-inside: auto;
        border-color: #999;
        margin-bottom: 4mm;
        overflow: visible;
    }

    .schedulePanelHead {
        background-color: #eceff1 !important;
        border-bottom-color: #999;
        page-break-after: avoid;
    }

    .scheduleBlockHead,
    .scheduleCatHead,
    .scheduleDayTitle {
        page-break-after: avoid;
    }

    .scheduleTime {
        color: #18384e !important;
    }

    .scheduleBlockHead .scheduleBatteryTag {
        background-color: #18384e !important;
        color: #fff !important;
    }

    /* o bootstrap 3 força .table td/th com background-color:#fff!important
       no print; estas regras tem especificidade maior e ganham */
    table.scheduleTable {
        page-break-inside: auto;
    }

    table.scheduleTable > thead {
        display: table-header-group;
    }

    table.scheduleTable > thead > tr > th {
        background-color: #18384e !important;
        color: #fff !important;
        border-color: #14304a !important;
    }

    table.scheduleTable > tbody > tr {
        page-break-inside: avoid;
    }

    table.scheduleTable > tbody > tr > td,
    table.scheduleTable > tbody > tr > th {
        border-color: #b5bcc3 !important;
        color: #000;
    }

    table.scheduleTable:not(.scheduleTableSlots) > tbody > tr:nth-of-type(2n) > td:not(.scheduleCat):not(.scheduleWod):not(.scheduleHour),
    table.scheduleTable > tbody.scheduleAltSlot > tr > td:not(.scheduleCat):not(.scheduleWod):not(.scheduleHour) {
        background-color: #f0f2f4 !important;
    }

    /* o texto da categoria nao pode ser forcado a branco: sem a classe
       backgroundColorNOME (ou com cor invalida) o fundo desaparece na impressao e
       ficava branco no branco. Quem tem cor valida ganha .scheduleCatPaint, que
       carrega fundo E texto com !important e sobrevive ao reset do bootstrap. */
    td.scheduleCat,
    th.scheduleCat,
    .scheduleCatHead {
        text-shadow: none;
    }

    .scheduleWod {
        background-color: #fdf8e6 !important;
        color: #6b5000 !important;
    }

    .scheduleHour {
        background-color: #e9edf0 !important;
        color: #18384e !important;
    }

    .scheduleTableWrap {
        overflow: visible !important;
    }
}