/*
  V11.62.1 — Mobile Agenda + Topbar Fix Safe
  Escopo: SOMENTE mobile via media queries.
  Corrige: busca/logout brancos no topo e Agenda com títulos/cards espremidos.
  Não altera desktop, Supabase, cache, PDF ou regras de negócio.
*/

@media (max-width:900px){
  /* Topbar mobile: neutraliza regra antiga que deixava a área da busca branca no Safari/mobile. */
  .topbar,
  .topbar .top-actions,
  .topbar .top-actions-left{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    color:#f4f4f4!important;
    box-sizing:border-box!important;
  }

  .topbar{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  .topbar .top-actions,
  .topbar .top-actions-left{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }

  .topbar .search,
  .topbar .search-wide,
  .top-actions-left > .search{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:46px!important;
    background:rgba(255,255,255,.055)!important;
    border:1px solid rgba(255,255,255,.13)!important;
    color:#f4f4f4!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
    -webkit-appearance:none!important;
    appearance:none!important;
  }

  .topbar .search input,
  .topbar .search-wide input,
  #topSearch{
    background:transparent!important;
    border:0!important;
    color:#f4f4f4!important;
    -webkit-text-fill-color:#f4f4f4!important;
    box-shadow:none!important;
    min-width:0!important;
    width:100%!important;
    font-size:16px!important;
    line-height:1.2!important;
  }

  .topbar .search input::placeholder,
  #topSearch::placeholder{
    color:rgba(244,244,244,.48)!important;
    -webkit-text-fill-color:rgba(244,244,244,.48)!important;
  }

  .topbar .search span,
  .topbar .search .kbd{
    color:#f4f4f4!important;
    -webkit-text-fill-color:#f4f4f4!important;
    opacity:.78!important;
    background:transparent!important;
  }

  .topbar .search .kbd{
    border:1px solid rgba(255,255,255,.18)!important;
    background:rgba(255,255,255,.045)!important;
    border-radius:11px!important;
  }

  .topbar .top-logout-btn{
    flex:0 0 auto!important;
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    padding:0!important;
    background:rgba(255,255,255,.055)!important;
    border:1px solid rgba(255,255,255,.13)!important;
    color:#f4f4f4!important;
    -webkit-text-fill-color:#f4f4f4!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
    font-size:0!important;
    overflow:hidden!important;
  }

  .topbar .top-logout-btn::before{
    content:'⏻';
    display:block!important;
    font-size:18px!important;
    line-height:1!important;
    color:#f4f4f4!important;
    -webkit-text-fill-color:#f4f4f4!important;
  }

  /* Agenda mobile: evita o título vertical e prioriza leitura rápida. */
  #demandas .periodbar,
  #demandas .kanban-controls{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  #demandas .periodbar > div,
  #demandas .kanban-controls > div,
  #demandas .panel-head > div{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  #demandas .periodbar h2,
  #demandas .kanban-controls h2,
  #demandas .panel-head h2{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    line-height:1.04!important;
    letter-spacing:-.055em!important;
  }

  #demandas .periodbar p,
  #demandas .kanban-controls p,
  #demandas .panel-head p{
    max-width:100%!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  #demandas .period-controls,
  #demandas .agenda-tabs{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    padding-bottom:2px!important;
  }

  #demandas .period-controls::-webkit-scrollbar,
  #demandas .agenda-tabs::-webkit-scrollbar{
    display:none!important;
  }

  #demandas .period-controls .btn,
  #demandas .agenda-tabs .btn,
  #demandas .period-controls input,
  #demandas .period-controls select{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    white-space:nowrap!important;
  }

  /* KPIs da Agenda: duas colunas legíveis em vez de quatro cards espremidos. */
  #demandas > .grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }

  #demandas > .grid > .kpi,
  #demandas > .grid > .card.kpi{
    grid-column:auto!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    min-height:112px!important;
    padding:15px!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }

  #demandas > .grid > .kpi label{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    line-height:1.08!important;
    letter-spacing:.03em!important;
    font-size:10.5px!important;
  }

  #demandas > .grid > .kpi strong{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    line-height:.98!important;
    font-size:clamp(28px,9vw,40px)!important;
  }

  #demandas > .grid > .kpi small{
    display:block!important;
    max-width:100%!important;
    line-height:1.25!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  /* Mantém a semana em uma coluna limpa sem apertar os títulos. */
  #demandas .agenda-shell,
  #demandas .agenda-week,
  #demandas .agenda-day,
  #demandas .agenda-bottom-grid,
  #demandas .agenda-inbox-panel{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  #demandas .agenda-week{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    overflow:visible!important;
  }

  #demandas .agenda-day-head,
  #demandas .agenda-card-top{
    min-width:0!important;
  }

  #demandas .agenda-day h3,
  #demandas .task-title{
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
  }
}

@media (max-width:430px){
  #demandas > .grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  #demandas > .grid > .kpi,
  #demandas > .grid > .card.kpi{
    min-height:104px!important;
    padding:13px!important;
  }

  #demandas > .grid > .kpi strong{
    font-size:clamp(25px,8.8vw,36px)!important;
  }
}