/*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: 46px;
    }

    .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__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) {

    /* ===== Mobile fine-tuning (M1/M2/M3/M5) — values to fine-tune on device ===== */

    /* M1: bigger KPI value font on mobile. */
    .map-panel__kpis .stat-card__value,
    .region-header__stats .stat-card__value {
        font-size: 0.95rem !important;   /* adjust to taste */
        font-weight: 700;
    }

    /* M2: date font colour (Today/Tomorrow/After) — readable dark. */
    .map-panel__time-controls .time-btn__date,
    .map-panel__time-controls .time-btn__label {
        color: #1a1a1a;
    }
    .map-panel__time-controls .time-btn--active .time-btn__date,
    .map-panel__time-controls .time-btn--active .time-btn__label {
        color: #000;
    }

    /* M3: age-toggle button font colour — readable dark; black when active. */
    .chart-toggle__item {
        color: #1a1a1a;
    }
    .chart-toggle__item--active {
        color: #000;
    }

    /* M5: Location selector collapses to just the icon on mobile and expands
       horizontally when the icon is tapped (.is-expanded). Collapsed, it no
       longer covers the variable name on the map. */
    .location-selector__icon {
        display: inline-flex;   /* mobile: show the icon (desktop hides it) */
        cursor: pointer;
        padding: 2px 4px;
    }
    .location-selector .location-selector__btn {
        display: none;   /* hidden until expanded */
    }
    .location-selector.is-expanded .location-selector__btn {
        display: inline-block;
    }
    .location-selector__btn {
        padding: 5px 8px;
        font-size: 12px;
    }

    /* Raise the zoom control on mobile so the Leaflet tiles attribution
       (bottom of the map) doesn't overlap it. */
    .leaflet-bottom.leaflet-left {
        bottom: 30px;
    }


    /* feedback #7: back-to-top fixed to the viewport on mobile (the page
       scrolls, not the panel), so it stays reachable while scrolling. */
    .back-to-top {
        position: fixed;
        bottom: 16px;
        right: 16px;
        margin: 0;
        z-index: 1000;
    }



    .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: 40px;                     /* align lower cards with zoom buttons */
        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);
    }

    /* feedback #3: selected-variable card filled with the season colour, even
       on mobile (override the transparent rule above via higher specificity). */
    .map-panel__kpis .stat-card.is-active,
    .map-panel__kpis .region-header__stats .stat-card.is-active {
        background: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
    }

    .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) var(--space-md);
    }

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

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

}