/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .shell,
    .hero,
    .grid,
    .grid-dashboard,
    .admin-card-grid,
    .form-grid,
    .flag-grid {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .sidebar {
        position: static;
        height: auto;
        padding-bottom: 0.9rem;
    }

    .nav {
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    }

    .nav-link.active::before {
        left: 0;
        top: auto;
        bottom: 0;
        right: 0;
        width: auto;
        height: 3px;
        border-radius: 3px 3px 0 0;
    }
}

@media (max-width: 720px) {
    .main {
        padding: 0 1rem 1.5rem;
    }

    /* Celular: capa compacta e menu como faixa de abas rolavel, o conteudo aparece logo. */
    .sidebar {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        padding: 0.5rem 0.75rem;
        overflow: visible;
    }

    .brand {
        flex: none;
        padding: 0.35rem 0.5rem;
    }

    .brand-logo {
        width: 4.5rem;
    }

    .nav {
        display: flex;
        gap: 0.25rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav-link {
        flex: none;
        min-height: 2.25rem;
        padding: 0.35rem 0.6rem;
    }

    .nav-link.active::before {
        left: 0.4rem;
        right: 0.4rem;
    }

    .environment-banner {
        margin: 0 -1rem;
        padding: 0.5rem 1rem;
    }

    .filters-grid,
    .details-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .topbar {
        flex-wrap: wrap;
        padding: 0.6rem 0;
    }

    .page-header-actions.inline-actions {
        justify-content: flex-start;
    }

    .realtime-controls {
        border-radius: var(--radius-sm);
    }

    /* Estacoes empilhadas: rotulo a esquerda, numero a direita, mesma ordem do fluxo. */
    .station-strip {
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }

    .station {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        border-top-width: 3px;
        padding: 0.6rem 0.9rem;
    }

    .station-ftd {
        margin-left: 0;
        margin-top: 5px;
    }

    .station-count {
        font-size: 1.75rem;
        grid-row: 1 / span 2;
        grid-column: 2;
    }

    .data-table {
        min-width: 44rem;
    }

    .filter-actions,
    .pagination,
    .pagination-pages {
        width: 100%;
    }

    .table-actions-column,
    .table-actions {
        text-align: left;
    }
}

/* Painel compartilhado FTD x Integrador: grafico sem dependencia externa. */
.traffic-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.traffic-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.traffic-swatch {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.25rem;
    display: inline-block;
}

.traffic-swatch-inbound {
    background: var(--info);
}

.traffic-swatch-outbound {
    /* Verde da marca escurecido: passa contraste 3:1 e separacao CVD contra o azul (validate_palette). */
    background: var(--chart-outbound);
}

.traffic-columns {
    margin: 0 0 1rem;
}

.traffic-plot {
    position: relative;
    height: 18rem;
    margin-left: 3.25rem;
}

.traffic-grid {
    position: absolute;
    inset: 0 0 1.6rem 0;
    pointer-events: none;
}

.traffic-gridline {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--line);
}

.traffic-gridline span {
    position: absolute;
    right: calc(100% + 0.5rem);
    top: 0;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.traffic-days {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--traffic-days), minmax(0, 1fr));
}

.traffic-day {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 1.6rem;
    min-width: 0;
    border-radius: 0.35rem;
    outline: none;
    cursor: default;
}

.traffic-day:hover,
.traffic-day:focus-visible {
    background: var(--accent-soft);
}

.traffic-day:focus-visible {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.traffic-day-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    min-height: 0;
    padding: 0 12%;
}

.traffic-column {
    flex: 1 1 0;
    max-width: 24px;
    min-width: 0;
    border-radius: 4px 4px 0 0;
}

.traffic-column-inbound {
    background: var(--info);
}

.traffic-column-outbound {
    background: var(--chart-outbound);
}

.traffic-day time {
    align-self: center;
    justify-self: center;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.traffic-day time.is-hidden-label {
    visibility: hidden;
}

.traffic-tooltip {
    position: absolute;
    z-index: 5;
    display: grid;
    gap: 0.25rem;
    min-width: 11rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.6rem;
    border: 1px solid var(--line);
    background: var(--panel-strong);
    box-shadow: var(--shadow-raised);
    color: var(--text);
    font-size: 0.82rem;
    pointer-events: none;
    top: 0.5rem;
    transform: translateX(-50%);
}

.traffic-tooltip[hidden] {
    display: none;
}

.traffic-tooltip strong {
    color: var(--muted);
    font-size: 0.76rem;
}

.traffic-tooltip span {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted);
}

.traffic-tooltip b {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.traffic-key {
    display: inline-block;
    width: 0.8rem;
    height: 2px;
    border-radius: 1px;
}

.traffic-key-inbound {
    background: var(--info);
}

.traffic-key-outbound {
    background: var(--chart-outbound);
}

.traffic-table-toggle summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.9rem;
}