/* ============================================================
   DASHBOARD STORYS — HEADER MOBILE SAFE V1

   Só CSS.
   Desktop não é alterado.
============================================================ */


@media(max-width:700px){

  /* =========================================================
     HEADER GLOBAL
  ========================================================= */

  .topbar{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr) !important;

    width:100% !important;

    gap:12px !important;

    padding:
      14px 16px 13px !important;

    align-items:stretch !important;
  }


  /* =========================================================
     MARCA
  ========================================================= */

  .topbar > .brand{
    width:100% !important;

    min-width:0 !important;

    display:flex !important;

    align-items:center !important;

    gap:11px !important;
  }


  .topbar .brand-mark.brand-mark-photo{
    width:48px !important;
    height:48px !important;

    min-width:48px !important;

    flex:0 0 48px !important;

    border-radius:12px !important;
  }


  .topbar .brand-kicker{
    font-size:9px !important;

    line-height:1.15 !important;

    letter-spacing:.13em !important;
  }


  .topbar .brand h1{
    margin-top:3px !important;

    font-size:15px !important;

    line-height:1.1 !important;

    white-space:nowrap !important;
  }


  /* =========================================================
     ZONA DIREITA

     Mobile:
     1.º utilizador / acções
     2.º período dos dados
  ========================================================= */

  .topbar > .topbar-right{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr) !important;

    width:100% !important;

    margin:0 !important;

    gap:10px !important;

    align-items:stretch !important;
  }


  /* =========================================================
     PERÍODO DOS DADOS

     Reverte a regra antiga que escondia .topbar-status
     abaixo de 600 px.
  ========================================================= */

  .topbar-right
  .topbar-status{
    order:2 !important;

    display:block !important;

    width:100% !important;

    margin:0 !important;
  }


  /*
    Em mobile o estado "Dados consistentes"
    é secundário e ocupa demasiado espaço.
  */

  .topbar-right
  #quality-badge{
    display:none !important;
  }


  .topbar-right
  .data-range{
    width:100% !important;

    min-height:40px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    gap:4px !important;

    margin:0 !important;

    padding:
      8px 10px !important;

    border:
      1px solid rgba(96,165,250,.17) !important;

    border-radius:11px !important;

    background:
      rgba(255,255,255,.025) !important;

    font-size:9.5px !important;

    line-height:1.2 !important;

    text-align:center !important;

    white-space:nowrap !important;
  }


  .topbar-right
  .data-range::before{
    content:"📅";

    margin-right:2px;
  }


  .topbar-right
  .data-range span{
    color:#8093af !important;
  }


  .topbar-right
  .data-range strong{
    color:#ffffff !important;

    font-weight:850 !important;
  }

}


/* ============================================================
   TELEMÓVEIS MAIS ESTREITOS
============================================================ */

@media(max-width:390px){

  .topbar{
    padding-left:12px !important;
    padding-right:12px !important;
  }


  .topbar
  .brand-mark.brand-mark-photo{
    width:44px !important;
    height:44px !important;

    min-width:44px !important;

    flex-basis:44px !important;
  }


  .topbar .brand h1{
    font-size:14px !important;
  }


  .topbar-right
  .data-range{
    font-size:9px !important;

    padding-left:7px !important;
    padding-right:7px !important;
  }

}