/* StorieUp v26 — responsividade integral e tabelas administrativas em cartões no celular */
:root{--mobile-pad:14px}
html,body,#app{max-width:100%;width:100%;min-width:0}
body{overflow-x:hidden}
*,*::before,*::after{min-width:0}
img,video,canvas,svg{max-width:100%}
input,select,textarea,button{max-width:100%}
pre,code,.muted,p,small,label,h1,h2,h3,h4,.card,.stat,.field{overflow-wrap:anywhere;word-break:normal}
.shell,.container,.main,.card,.form-card,.admin-section,.admin-split,.stats,.event-list,.form-grid,.guest-page,.guest-wrap,.guest-card,.topbar,.hero-grid,.live-panel{max-width:100%;min-width:0}
.table-scroll{max-width:100%}

@media(max-width:900px){
  .app-layout{display:block!important;width:100%!important;max-width:100%!important}
  .main{width:100%!important;max-width:100%!important;padding-left:18px!important;padding-right:18px!important}
  .main-head{min-width:0}
  .main-head>div{min-width:0;max-width:100%}
  .main-head h1{font-size:clamp(1.9rem,6vw,2.35rem);overflow-wrap:anywhere}
  .main-head p{max-width:100%;overflow-wrap:anywhere}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .admin-split{grid-template-columns:1fr!important}
}

@media(max-width:700px){
  :root{--mobile-pad:12px}
  body{font-size:15px}
  .container{width:calc(100% - 24px)!important;margin-inline:12px!important}
  .main{padding:14px var(--mobile-pad) calc(40px + env(safe-area-inset-bottom))!important}
  .card,.form-card{padding:16px!important;border-radius:18px!important}
  .main-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;margin-bottom:16px!important}
  .main-head h1{font-size:clamp(1.85rem,9vw,2.25rem)!important;line-height:1.05!important;letter-spacing:-.035em!important}
  .main-head .btn,.main-head>a.btn,.main-head>button{width:100%!important;max-width:100%!important}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .stat{padding:14px!important;min-height:108px}.stat strong{font-size:clamp(1.55rem,8vw,2rem)!important;overflow-wrap:anywhere}
  .admin-split{gap:10px!important}.admin-split .card{width:100%!important}.admin-split h2{font-size:1.7rem!important;overflow-wrap:anywhere}

  /* navegação do Admin: tudo visível, sem barra horizontal */
  .admin-jump{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important;max-width:100%!important;overflow:visible!important;flex-wrap:initial!important;padding:0!important;margin:0 0 16px!important}
  .admin-jump button{width:100%!important;min-width:0!important;white-space:normal!important;text-align:center!important;padding:10px 8px!important;line-height:1.2!important}

  .admin-section{width:100%!important;max-width:100%!important;overflow:visible!important;border-radius:18px!important;margin-bottom:16px!important}
  .admin-section-head{padding:16px 14px 8px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important}
  .admin-section-head>div{width:100%!important;max-width:100%!important}
  .admin-section-head h2{font-size:1.5rem!important;line-height:1.15!important;overflow-wrap:anywhere}
  .admin-section-head p{width:100%!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;margin:4px 0 0!important}
  .admin-section-head .admin-actions{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .admin-section-head .admin-actions .btn{width:100%!important}
  .admin-section>h3,.admin-section>p{margin-left:14px!important;margin-right:14px!important;max-width:calc(100% - 28px)!important;white-space:normal!important;overflow-wrap:anywhere!important}

  /* formulários administrativos: uma única coluna e campos limitados ao viewport */
  .admin-form-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;width:100%!important;max-width:100%!important;padding:12px 14px 16px!important}
  .admin-form-grid .field,.admin-form-grid .field>*{min-width:0!important;max-width:100%!important;width:100%!important}
  .admin-form-grid small{display:block!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.4!important}
  .admin-form-button{grid-column:auto!important;width:100%!important}.admin-form-button .btn{width:100%!important;white-space:normal!important}
  .input,.admin-mini{width:100%!important;max-width:100%!important;min-width:0!important}

  /* Tabelas viram cartões empilhados: nenhum campo fica fora da tela */
  .table-scroll{overflow:visible!important;width:100%!important;max-width:100%!important;padding:0 12px 12px!important}
  .admin-table{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;border-collapse:separate!important}
  .admin-table thead{display:none!important}
  .admin-table tbody{display:grid!important;width:100%!important;gap:12px!important}
  .admin-table tr{display:block!important;width:100%!important;max-width:100%!important;background:#fff!important;border:1px solid var(--line)!important;border-radius:15px!important;overflow:hidden!important;box-shadow:0 5px 18px rgba(35,20,63,.04)!important}
  .admin-table td{display:grid!important;grid-template-columns:minmax(96px,34%) minmax(0,1fr)!important;align-items:start!important;gap:10px!important;width:100%!important;max-width:100%!important;padding:10px 12px!important;border-bottom:1px solid #eee9f2!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  .admin-table td:last-child{border-bottom:0!important}
  .admin-table td::before{content:attr(data-label);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.045em;color:#7a7086;padding-top:3px;overflow-wrap:anywhere}
  .admin-table td.responsive-empty-cell{display:block!important;color:var(--muted)!important;padding:14px!important}
  .admin-table td.responsive-empty-cell::before{display:none!important}
  .admin-table td>*{max-width:100%!important;min-width:0!important}
  .admin-table code{display:inline-block!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-all!important}
  .admin-table .admin-status{white-space:normal!important;max-width:100%!important;justify-self:start!important}
  .admin-actions{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .admin-actions .btn,.admin-actions a.btn{width:100%!important;min-width:0!important;white-space:normal!important;padding:8px 7px!important;line-height:1.2!important;text-align:center!important}

  /* Álbum do convidado: 3 colunas verdadeiras sem corte */
  .guest-page{width:100%!important;max-width:100%!important;overflow-x:hidden!important;padding-left:0!important;padding-right:0!important}
  .guest-wrap{width:100%!important;max-width:100%!important;padding:0 10px!important;margin:0 auto!important;overflow:visible!important}
  .guest-top{padding-left:6px!important;padding-right:6px!important}.guest-top .brand-logo{max-width:min(230px,75vw)!important}
  .guest-card{width:100%!important;max-width:100%!important;padding:12px!important;overflow:visible!important}
  .dropzone{padding:24px 10px!important}
  .tabs{display:flex!important;max-width:100%!important;gap:6px!important;align-items:center!important;overflow:visible!important;flex-wrap:wrap!important}
  .tabs #moment-count,.tabs .muted{margin-left:0!important;width:100%!important;text-align:left!important}
  .preview-grid,.gallery{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;width:100%!important;max-width:100%!important;overflow:visible!important;margin-left:0!important;margin-right:0!important}
  .preview-item,.gallery-item{width:100%!important;max-width:100%!important;min-width:0!important;aspect-ratio:1/1!important;border-radius:9px!important;overflow:hidden!important}
  .gallery-item .overlay{padding:18px 3px 4px!important;gap:2px!important;min-width:0!important}
  .gallery-item .overlay>span{display:none!important}
  .photo-actions{width:100%!important;display:flex!important;justify-content:flex-end!important;gap:3px!important;min-width:0!important}
  .like-btn{height:28px!important;min-width:28px!important;padding:0 5px!important;font-size:.76rem!important}.instagram-btn{width:28px!important;height:28px!important;min-width:28px!important;padding:5px!important}.instagram-btn svg{width:16px!important;height:16px!important}

  /* Demais layouts e componentes */
  .form-grid,.event-list,.features,.steps,.plans{grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important}
  .row{max-width:100%!important;min-width:0!important;flex-wrap:wrap!important}
  .actions{max-width:100%!important;min-width:0!important;flex-wrap:wrap!important}.actions .btn,.actions a.btn{max-width:100%!important}
  .modal-backdrop{padding:10px!important}.modal{width:min(100%,calc(100vw - 20px))!important;max-width:calc(100vw - 20px)!important;max-height:calc(100svh - 20px)!important;overflow:auto!important}
  .instagram-share-actions{grid-template-columns:1fr!important}
  .footer-row{width:100%!important}.footer-row>*{max-width:100%!important}
}

@media(max-width:390px){
  .stats{grid-template-columns:1fr!important}
  .admin-jump{grid-template-columns:1fr 1fr!important}
  .admin-actions{grid-template-columns:1fr!important}
  .preview-grid,.gallery{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media(max-width:320px){
  .admin-jump{grid-template-columns:1fr!important}
  .preview-grid,.gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* StorieUp v27 — correção pontual dos botões nos cards de mídia do organizador */
@media(max-width:620px){
  /* Não aplicar o aspect-ratio quadrado do álbum aos cards de gerenciamento. */
  .gallery .gallery-item.manage-media{
    aspect-ratio:auto!important;
    min-height:0!important;
    height:auto!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    background:#231735!important;
  }
  .gallery .gallery-item.manage-media>img,
  .gallery .gallery-item.manage-media>video{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1/1!important;
    object-fit:cover!important;
    display:block!important;
    flex:none!important;
  }
  .gallery .gallery-item.manage-media .overlay{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    padding:7px!important;
    background:#231735!important;
    min-height:0!important;
    height:auto!important;
  }
  .gallery .gallery-item.manage-media .overlay .row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:2px!important;
    color:#fff!important;
    font-size:.72rem!important;
    line-height:1.2!important;
    margin:0 0 6px!important;
  }
  .gallery .gallery-item.manage-media .overlay .row span{
    display:block!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
  }
  .gallery .gallery-item.manage-media .private-message{
    display:none!important;
  }
  .gallery .gallery-item.manage-media .manage-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:4px!important;
    margin-top:5px!important;
    width:100%!important;
  }
  .gallery .gallery-item.manage-media .manage-actions .btn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:29px!important;
    height:auto!important;
    padding:5px 4px!important;
    margin:0!important;
    border-radius:7px!important;
    font-size:.66rem!important;
    line-height:1.05!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
}