/* V22.3.12 / build 2335 — hotfix de layout e progresso real.
   Escopo: Central de Notificações mobile + navegação do Modo Set desktop + upload da OD. */

/* A regra genérica de dialogs do preview usa cabeçalho sticky com margens negativas.
   Na Central isso fazia o título e o fechar escaparem visualmente do card no iPhone. */
@media (max-width:760px){
  #notificationsDialog.notifications-dialog[open]{
    box-sizing:border-box!important;
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
    height:auto!important;
    max-height:calc(100dvh - 12px)!important;
    inset:0!important;
    margin:auto!important;
    padding:0!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:18px!important;
    background:transparent!important;
    transform:none!important;
  }
  #notificationsDialog .notifications-card{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 12px)!important;
    min-height:0!important;
    margin:0!important;
    padding:12px!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-rows:auto auto minmax(0,1fr)!important;
    gap:8px!important;
    border-radius:18px!important;
  }
  #notificationsDialog .dialog-head{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    z-index:1!important;
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    margin:0!important;
    padding:0 0 8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    border-bottom:1px solid #30343a!important;
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  #notificationsDialog .dialog-head>div{min-width:0!important;padding-left:2px!important}
  #notificationsDialog .dialog-head h3{margin:0!important;max-width:100%!important;overflow:visible!important;white-space:normal!important}
  #notificationsDialog .dialog-head .icon-btn{
    position:static!important;
    flex:0 0 40px!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    border-radius:50%!important;
  }
  #notificationsDialog .dialog-head .icon-btn:focus-visible{outline:2px solid #ffd400!important;outline-offset:1px!important}
  #notificationsDialog .notifications-toolbar{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    max-height:min(320px,44dvh)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  #notificationsDialog .notifications-list,
  #notificationsDialog .notifications-list.has-scroll{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-height:min(390px,calc(100dvh - 300px))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    margin:0!important;
    padding:2px 2px 4px 1px!important;
  }
  #notificationsDialog .notification-item{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important}
}
@media (max-width:390px){
  #notificationsDialog.notifications-dialog[open]{width:calc(100vw - 8px)!important;max-width:calc(100vw - 8px)!important;max-height:calc(100dvh - 8px)!important}
  #notificationsDialog .notifications-card{max-height:calc(100dvh - 8px)!important;padding:10px!important}
  #notificationsDialog .notifications-list,#notificationsDialog .notifications-list.has-scroll{max-height:min(370px,calc(100dvh - 285px))!important}
}

/* Desktop: os sete atalhos continuam na mesma linha, mas não viram blocos gigantes.
   Em notebooks estreitos a faixa pode rolar horizontalmente sem cortar o conteúdo. */
@media (min-width:761px){
  #setmodeView .so-tabs{
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    gap:6px!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:thin;
    padding:6px!important;
  }
  #setmodeView .so-tabs button{
    flex:1 1 96px!important;
    width:auto!important;
    min-width:86px!important;
    max-width:132px!important;
    min-height:58px!important;
    padding:8px 7px!important;
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    gap:4px!important;
  }
  #setmodeView .so-tabs button>span{font-size:18px!important;line-height:1!important}
  #setmodeView .so-tabs button>b{font-size:10px!important;line-height:1.12!important;white-space:normal!important;text-align:center!important;text-overflow:clip!important}
}

/* Ordem do Dia: progresso do upload ocupa a largura inteira e exibe bytes reais. */
.so-upload-progress{grid-template-columns:minmax(0,1fr) auto!important}
.so-upload-progress progress{grid-column:1/-1!important;height:12px!important}
.so-upload-progress [data-od-bytes]{grid-column:1/-1!important;color:var(--muted,#adb1bc)!important;font-size:12px!important;line-height:1.35!important;overflow-wrap:anywhere}
.so-upload-progress [data-od-stage]{min-width:0!important;overflow-wrap:anywhere}
.so-upload-progress [data-od-percent]{font-variant-numeric:tabular-nums;white-space:nowrap}
.so-upload-progress [data-od-stage][data-state="error"]{color:#ff6b6b!important}
.so-upload-progress [data-od-stage][data-state="done"]{color:#74d99f!important}