/* Widget standalone "Tabela Moderna" — só estilos desktop (≥769px).
 * No mobile (≤768px), os estilos vêm do bloco mtb-* compartilhado em
 * common.css (mesmo visual da tabela diária mobile do gráfico). */

.wf-table-modern{
    font-family:var(--wf-sans);color:var(--wf-text-primary);
    width:100%;box-sizing:border-box;background:transparent;
    border-radius:inherit;overflow:visible;
}

@media(min-width:769px){
    .wf-table-modern{padding:0 0.5rem}

    /* Day header */
    .wf-table-modern .mtb-day{
        padding:0.9rem 0.3rem 0.55rem;
        font-size:clamp(0.9rem, 1.1vw, 1.05rem);font-weight:800;
        letter-spacing:0.05em;text-transform:uppercase;background:transparent;
        border:none;cursor:pointer;display:flex;align-items:center;gap:0.5rem;
        color:var(--wf-text-primary);
    }
    .wf-table-modern .mtb-arrow{font-size:0.75rem;color:var(--wf-text-primary);transition:transform 0.2s}
    .wf-table-modern .mtb-day.open .mtb-arrow{transform:rotate(0deg)}
    .wf-table-modern .mtb-day:not(.open) .mtb-arrow{transform:rotate(-90deg)}

    /* Rows container */
    .wf-table-modern .mtb-rows{display:none;flex-direction:column;gap:clamp(0.4rem, 0.6vw, 0.6rem)}
    .wf-table-modern .mtb-day.open + .mtb-rows{display:flex}

    /* Column headers */
    .wf-table-modern .mtb-head{
        display:flex;padding:0.15rem 0 0.5rem;
        font-size:0.78rem;font-weight:700;text-transform:uppercase;
        letter-spacing:0.06em;color:var(--wf-text-muted);background:transparent;
    }
    .wf-table-modern .mth-time{width:clamp(36px, 4vw, 56px);flex-shrink:0}
    .wf-table-modern .mth-col{flex:1;text-align:center;min-width:0}

    /* Row */
    .wf-table-modern .mtb-row{
        display:flex;align-items:center;padding:0;
        gap:clamp(0.2rem, 0.4vw, 0.5rem);width:100%;
    }
    .wf-table-modern .mtb-time{
        width:clamp(36px, 4vw, 56px);flex-shrink:0;
        font-size:clamp(0.85rem, 1vw, 1rem);
        font-weight:700;color:var(--wf-text-muted);
        text-align:left;padding-left:0.1rem;
    }

    /* Card */
    .wf-table-modern .mtb-card{
        flex:1;min-width:0;display:flex;align-items:stretch;
        background:#fff;border-radius:16px;
        box-shadow:0 4px 20px rgba(0,0,0,0.10),0 1px 3px rgba(0,0,0,0.05);
        padding:clamp(0.85rem, 1.3vw, 1.3rem) clamp(0.3rem, 0.6vw, 0.7rem);
        min-height:clamp(80px, 7vw, 110px);overflow:hidden;
    }

    /* Columns inside card */
    .wf-table-modern .mtb-col{
        flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-start;
        gap:clamp(0.35rem, 0.7vw, 0.85rem);
        border-right:1px solid rgba(0,0,0,0.07);
        padding:0 clamp(0.2rem, 0.4vw, 0.55rem) 0 clamp(2rem, 15%, 6rem);
        overflow:hidden;
    }
    .wf-table-modern .mtb-col:last-child{border-right:none}
    .wf-table-modern .mtb-col-info{
        display:flex;flex-direction:row;align-items:center;
        gap:clamp(0.35rem, 0.6vw, 0.7rem);
        line-height:1;min-width:0;white-space:nowrap;
    }

    /* SWELL col: grid com 3 colunas de larguras FIXAS — período (3em,
     * right-aligned), ícone (auto), direção/graus (6em, left-aligned).
     * `justify-content: center` centraliza o bloco inteiro dentro da col,
     * deixando margens iguais à esquerda e à direita. Ícone fica em
     * posição fixa entre todas as linhas (sem efeito minhoca). */
    .wf-table-modern .mtb-col--swell{
        display:grid;
        grid-template-columns:3em auto 6em;
        align-items:center;
        gap:clamp(0.6rem, 1.2vw, 1.2rem);
        padding:0;
        justify-content:center;
        /* Border deslocada 5px para a direita via pseudo-elemento. */
        border-right:none;
        overflow:visible;
        position:relative;
    }
    .wf-table-modern .mtb-col--swell::after{
        content:'';position:absolute;right:-5px;top:0;bottom:0;
        width:1px;background:rgba(0,0,0,0.07);
    }
    .wf-table-modern .mtb-col--swell .mtb-period{justify-self:end;text-align:right}
    .wf-table-modern .mtb-col--swell .mtb-icon{justify-self:center}
    .wf-table-modern .mtb-col--swell .mtb-col-info{justify-self:start}

    /* All values share the same fluid font-size — cresce até 2rem em telas largas */
    .wf-table-modern .mtb-height,
    .wf-table-modern .mtb-period,
    .wf-table-modern .mtb-dir,
    .wf-table-modern .mtb-score,
    .wf-table-modern .mtb-deg,
    .wf-table-modern .mtb-kmh{
        font-size:clamp(1.15rem, 1.7vw, 2rem);
        font-weight:800;line-height:1;letter-spacing:-0.02em;white-space:nowrap;
    }
    .wf-table-modern .mtb-height{color:var(--wf-text-primary)}
    .wf-table-modern .mtb-period{color:var(--wf-text-primary)}
    .wf-table-modern .mtb-dir{color:var(--wf-text-primary)}
    .wf-table-modern .mtb-score{display:flex;align-items:center;gap:clamp(0.7rem, 1vw, 1.1rem)}
    .wf-table-modern .mtb-deg{color:var(--wf-text-muted);font-weight:600}
    .wf-table-modern .mtb-kmh{color:var(--wf-text-muted);font-weight:600}

    /* Score dot — bullet "O—score" com traço lateral à direita */
    .wf-table-modern .mtb-score-dot{
        width:clamp(11px, 0.95vw, 14px);height:clamp(11px, 0.95vw, 14px);
        border-radius:50%;position:relative;flex-shrink:0;
    }
    .wf-table-modern .mtb-score-dot::after{
        content:'';position:absolute;left:100%;top:50%;
        transform:translateY(-50%);
        width:clamp(5px, 0.5vw, 7px);height:2px;
        background-color:inherit;border-radius:0 1px 1px 0;
    }

    /* Icon boxes — desktop (responsivo) */
    .wf-table-modern .mtb-icon{
        display:inline-flex;align-items:center;justify-content:center;
        width:clamp(46px, 4.2vw, 64px);height:clamp(46px, 4.2vw, 64px);
        border-radius:14px;flex-shrink:0;
    }
    .wf-table-modern .mtb-icon svg{display:block;width:60%;height:60%}
    .wf-table-modern .mtb-icon.swell{background:rgba(0,0,0,0.07)}
    .wf-table-modern .mtb-icon.wind-t{background:var(--wf-offshore-soft)}
    .wf-table-modern .mtb-icon.wind-c{background:var(--wf-cross-soft)}
    .wf-table-modern .mtb-icon.wind-m{background:var(--wf-onshore-soft)}
}