/*Mobile Styles and Smaller Computers*/

@media (max-width: 1597px) {

    .topbar__title {
        font-size: 0.875rem;
        padding: 0rem 2rem;
    }

    .topbar__logo {
        height: 33px;
    }

    .bottombar__logo {
        height: 28px;
    }

    .topbar__logo {
        height: 63px;
    }

    .map-panel {
        flex: 1 1 45%;
    }


    .varbar {
        padding: 0.5rem 1rem;
        justify-content: center;
    }

    .varbar__item {
        padding: 0.3rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .sidebar {
        width: 75px;
    }

    .region-header {
        padding: 1rem 0.7rem;
    }

    .region-header__title {
        font-size: 1rem;
    }

    .region-header__season {
        display: none; /*In order to be able to row*/
    }

    .region-header__info {
        gap: 0px;
    }

    .stat-card{
        padding: 4px;
    }

    .stat-card__value{
        font-size: 1rem;
    }

}

@media (max-width: 1215px) {

    .topbar__title {
        font-size: 0.875rem;
        padding: 0rem 2rem;
    }


    .topbar__logo {
        height: 33px;
    }

    .bottombar__logo {
        height: 28px;
    }

    .map-panel {
        flex: 1 1 45%;
    }


    .varbar {
        padding: 0.5rem 1rem;
    }

    .varbar__item {
        padding: 0.3rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .sidebar {
        width: 75px;
    }

    .region-header {
        padding: 1rem 0.7rem;
    }

    .region-header__title {
        font-size: 1rem;
    }

    .region-header__season {
        display: none; /*In order to be able to row*/
    }

    .region-header__info {
        gap: 0px;
    }

    .stat-card{
        padding: 4px;
    }

    .stat-card__value{
        font-size: 1rem;
    }

}

@media (max-width: 991.98px) {


    .graphics-panel__subscribe-mobile {
        display: flex;
        justify-content: center;
        padding: var(--space-md);
    }

    .graphics-panel__subscribe-mobile .action-btn {
        display: flex;
        flex-direction: row;
        width: auto;

        margin: 0 auto;
        padding: 0.5rem 1.25rem;   /* altura e largura do botão */
        font-size: 1rem;           /* tamanho do texto */
        gap: 0.5rem;               /* espaço entre texto e ícone */
        background-color: var(--color-primary);
    }

    /* ícone dentro do botão */
    .graphics-panel__subscribe-mobile .action-btn__icon {
        width: 20px;
        height: 20px;
    }


    /* Main */
    .topbar,
    .bottombar {
        display: none;
    }

    .content-row {
        flex-direction: column;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: revert;
    }

    .desktop-only {
        display: none;
    }

    html, body {
        height: auto;
        overflow-x: hidden;   /* no horizontal */
        overflow-y: auto;     /* vertical scroll */
    }

    .main-content {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    /*Dashbar*/
    .dashbar {
        flex-direction: column;
    }

    .map-panel {
        flex: 1 1 auto;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        min-height: 55vh;
    }

    /*KPI*/
    .map-panel__kpis.mobile-only {
        display: flex;
        flex-direction: column;
        justify-content: space-between;   /* white top, 3 bottom */
        gap: var(--space-xs);
        position: absolute;
        top: var(--space-sm);
        bottom: var(--space-xl);          /* spans map height */
        right: var(--space-sm);
        z-index: 500;
        max-width: 45%;
        pointer-events: none;
    }

    /* The shared stats container inside the overlay stacks too. */
    .map-panel__kpis .region-header__stats {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    /* Cards are interactive + legible over the map. */
    .map-panel__kpis .stat-card {
        pointer-events: auto;
        min-width: 0;
        padding: var(--space-xs) var(--space-sm);
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* transparent cards with season-colored border */
    .map-panel__kpis .stat-card {
        background: transparent;
        border: 2px solid var(--color-primary);   /* orange summer / blue winter */
        border-radius: 8px;
        box-shadow: none;
        backdrop-filter: blur(2px);
    }

    .map-panel__kpis .stat-card--variable {
        background: #fff;
        margin-bottom: var(--space-md);
    }


    /* the variable-name card — emphasised */
    .map-panel__kpis .stat-card--variable .stat-card__value {
        font-weight: 700;
    }

    /*Sidebar*/
    .sidebar {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        overflow-x: auto;
        overflow-y: hidden;
    }

    /* the real nav (no .mobile-only on it anymore) */
    .sidebar-nav {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;   /* logo left, actions right */
        flex-wrap: nowrap;
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-md);
    }

    /* actions become a row */
    .sidebar-mobile__actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-sm);
    }

    .sidebar-item {
        flex-shrink: 0;
        width: 6.5rem;
    }

    .sidebar-mobile__logo img {
        height: 4.5rem;
        width: auto;
        display: block;
    }

    .sidebar-item__label {
        font-size: 1.2rem;
        line-height: 1.2;
    }


    .body{
        /*padding-left: 8px;*/
        /*padding-right: 8px;*/
    }

    .map-panel {
        min-height: 70vh;
    }

    /*
    .map-panel__canvas {
        height: 70vh;
        flex: none;
        min-height: 0;
    }
    */

    .map-panel__kpis .stat-card--variable .stat-card__value{
        margin: 0px;
    }

    .sidebar-mobile__logo img{
        height: 2.5rem;
    }

    .sidebar-item {
        width: 4rem;
        padding: 2px 2px 2px 2px;
    }

    .sidebar-item__icon {
        width: 22px;
        height: 22px;
    }

    .sidebar-item__label {
        font-size: 0.8rem;
    }

    .stat-card__value {
        font-size: 0.8rem
    }

    .region-header__location{
        gap: 0px;
        line-height: 1;
    }

    .region-header__subtitle {
        font-size:0.8rem;
        font-weight: 700;
    }

    .region-header__title {
        font-size:1.0rem;
        font-weight: 700;
    }

    .region-header-wrapper{
        padding-left: 10px;
    }

    .map-panel__time-controls.mobile-only,
    .time-btn,
    .action-btn{
        padding-top: 1px;
        padding-left: 1px;
        padding-right: 1px;
        padding-bottom: 1px;
    }

    .time-btn,
    .action-btn{
        gap: 1px;
    }

    .time-btn__date, 
    .time-btn__label, 
    .action-btn{
        font-size: 0.7rem;
    }

    .action-btn, 
    .time-btn{
        min-width: 60px;
    }


    .map-panel__time-controls.mobile-only{
        display: flex;
        flex-direction: row;
        border-bottom: none;
        padding-right: 10px;
    }

    .region-header {
        padding: var(--space-xs);
    }

    .chart-toggle__item{
        padding: 4px 4px;
    }

    .chart-block__canvas-wrap{
        height: 330px;
    }

}

@media (max-width: 770px){

    .action-btn {
        display: flex;
        flex-direction: column;
    }

    .body{
        /*padding-left: 8px;*/
        /*padding-right: 8px;*/
    }

    .map-panel {
        min-height: 70vh;
    }

    /*
    .map-panel__canvas {
        height: 70vh;
        flex: none;
        min-height: 0;
    }
    */

    .map-panel__kpis .stat-card--variable .stat-card__value{
        margin: 0px;
    }

    .sidebar-mobile__logo img{
        height: 2.5rem;
    }

    .sidebar-item {
        width: 4rem;
        padding: 2px 2px 2px 2px;
    }

    .sidebar-item__icon {
        width: 22px;
        height: 22px;
    }

    .sidebar-item__label {
        font-size: 0.8rem;
    }

    .stat-card__value {
        font-size: 0.8rem;
    }

    .region-header__location{
        gap: 0px;
        line-height: 1;
    }

    .region-header__subtitle {
        font-size:0.8rem;
        font-weight: 700;
    }

    .region-header__title {
        font-size:1.0rem;
        font-weight: 700;
    }

    .region-header-wrapper{
        padding-left: 10px;
    }

    .map-panel__time-controls.mobile-only,
    .time-btn,
    .action-btn{
        padding-top: 1px;
        padding-left: 1px;
        padding-right: 1px;
        padding-bottom: 1px;
    }

    .time-btn,
    .action-btn{
        gap: 1px;
    }

    .time-btn__date, 
    .time-btn__label, 
    .action-btn{
        font-size: 0.7rem;
    }

    .action-btn, 
    .time-btn{
        min-width: 60px;
    }


    .map-panel__time-controls.mobile-only{
        display: flex;
        flex-direction: row;
        border-bottom: none;
        padding-right: 10px;
    }

    .region-header {
        padding: var(--space-xs);
    }

    .chart-toggle__item{
        padding: 4px 4px;
    }

    .chart-block__canvas-wrap{
        height: 330px;
    }
}

@media (max-width: 436px) {

    .action-btn {
        display: flex;
        flex-direction: column;
    }

    .body{
        /*padding-left: 8px;*/
        /*padding-right: 8px;*/
    }

    .map-panel {
        min-height: 70vh;
    }

    /*
    .map-panel__canvas {
        height: 70vh;
        flex: none;
        min-height: 0;
    }
    */

    .map-panel__kpis .stat-card--variable .stat-card__value{
        margin: 0px;
    }

    .sidebar-mobile__logo img{
        height: 2.5rem;
    }

    .sidebar-item {
        width: 3.2rem;
    }

    .sidebar-item__icon {
        width: 20px;
        height: 20px;
    }

    .sidebar-item__label {
        font-size: 0.7rem;
    }

    .stat-card__value {
        font-size: 0.5rem
    }

    .region-header__location{
        gap: 0px;
        line-height: 1;
    }

    .region-header__subtitle {
        font-size:0.8rem;
        font-weight: 700;
    }

    .region-header__title {
        font-size:1.0rem;
        font-weight: 700;
    }

    .region-header-wrapper{
        padding-left: 10px;
    }

    .map-panel__time-controls.mobile-only,
    .time-btn,
    .action-btn{
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
    }

    .time-btn,
    .action-btn{
        gap: 0px;
    }

    .time-btn__date, 
    .time-btn__label, 
    .action-btn{
        font-size: 0.5rem;
    }

    .action-btn, 
    .time-btn{
        min-width: 45px;
    }


    .map-panel__time-controls.mobile-only{
        display: flex;
        flex-direction: row;
        border-bottom: none;
    }

    .region-header {
        padding: var(--space-xs);
    }

    .chart-toggle__item{
        padding: 2px 2px;
    }

    .chart-block__canvas-wrap{
        height: 330px;
    }

}

@media (max-width: 376px) {

    .action-btn {
        display: flex;
        flex-direction: column;
    }    

    .body{
        /*padding-left: 8px;*/
        /*padding-right: 8px;*/
    }

    .map-panel {
        min-height: 70vh;
    }

    /*
    .map-panel__canvas {
        height: 70vh;
        flex: none;
        min-height: 0;
    }
    */

    .map-panel__kpis .stat-card--variable .stat-card__value{
        margin: 0px;
    }

    .sidebar-mobile__logo img{
        height: 2.5rem;
    }

    .sidebar-item {
        width: 3.2rem;
    }

    .sidebar-item__icon {
        width: 20px;
        height: 20px;
    }

    .sidebar-item__label {
        font-size: 0.7rem;
    }

    .stat-card__value {
        font-size: 0.5rem
    }

    .region-header__location{
        gap: 0px;
        line-height: 1;
    }

    .region-header__subtitle {
        font-size:0.8rem;
        font-weight: 700;
    }

    .region-header__title {
        font-size:1.0rem;
        font-weight: 700;
    }

    .region-header-wrapper{
        padding-left: 10px;
    }

    .map-panel__time-controls.mobile-only,
    .time-btn,
    .action-btn{
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
    }

    .time-btn,
    .action-btn{
        gap: 0px;
    }

    .time-btn__date, 
    .time-btn__label, 
    .action-btn{
        font-size: 0.5rem;
    }

    .action-btn, 
    .time-btn{
        min-width: 45px;
    }


    .map-panel__time-controls.mobile-only{
        display: flex;
        flex-direction: row;
        border-bottom: none;
    }

    .region-header {
        padding: var(--space-xs);
    }

    .chart-toggle__item{
        padding: 2px 2px;
    }

    .chart-block__canvas-wrap{
        height: 330px;
    }

}