/*
 * Responsividade global do Painel IBO
 * Desktop / notebook / tablet / celular
 * Mantém navegação, tabelas, formulários, cards e modais utilizáveis em qualquer largura.
 */
:root{--panel-mobile-gutter:.75rem;--panel-table-min:680px}
*{box-sizing:border-box}
html,body{width:100%;max-width:100%;min-width:0;overflow-x:hidden}
body{min-height:100vh;min-height:100dvh}
#wrapper{width:100%;min-width:0;min-height:100vh;min-height:100dvh;display:flex!important;align-items:stretch}
#content-wrapper{flex:1 1 0%!important;width:auto!important;max-width:100%;min-width:0!important;overflow-x:hidden!important}
#content{width:100%;min-width:0;flex:1 0 auto}
.container,.container-fluid,.container-sm,.container-md,.container-lg,.container-xl{min-width:0;max-width:100%}
.row>[class*="col-"]{min-width:0}
.card,.card-body,.card-header,.card-footer{min-width:0;max-width:100%}
.card-body{overflow-wrap:anywhere}
img,video,svg,canvas{max-width:100%;height:auto}
iframe{max-width:100%}
.embed-responsive iframe{width:100%;height:100%}
pre,code,kbd,samp{max-width:100%}
pre{overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.text-break,.manual-banner-url,[class*="url"]{overflow-wrap:anywhere;word-break:break-word}


/*
 * Rolagem independente da função/página central.
 * O menu lateral continua com sua própria rolagem e a área da função pode percorrer
 * listas longas (ex.: dezenas de clientes) sem mover o menu ou a estrutura externa.
 */
body#page-top{height:100vh;height:100dvh;overflow:hidden!important}
body#page-top #wrapper{height:100vh;height:100dvh;max-height:100dvh;overflow:hidden!important}
body#page-top #content-wrapper{height:100vh!important;height:100dvh!important;max-height:100dvh!important;min-height:0!important;overflow:hidden!important}
body#page-top #content{flex:1 1 auto!important;min-height:0!important;max-height:100%;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scroll-behavior:smooth}
body#page-top .sticky-footer{flex:0 0 auto!important}

/* Tabelas nunca podem empurrar o painel para fora da tela. */
.table-responsive{display:block;width:100%;max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
.table-responsive>.table{margin-bottom:0}
.table{max-width:100%}
.table th,.table td{vertical-align:middle}
.table td .btn-group,.table td .btn-toolbar{white-space:normal}

/* Formulários e controles. */
.form-control,.custom-select,.input-group,.custom-file,.custom-file-input,.custom-file-label{max-width:100%}
.input-group{min-width:0}
.input-group>.form-control,.input-group>.custom-select{min-width:0}
textarea.form-control{resize:vertical}
.btn{max-width:100%}
.btn-group,.btn-toolbar,.form-inline{flex-wrap:wrap}
.form-inline .form-control,.form-inline .custom-select{max-width:100%}

/* Modais e menus. */
.modal-dialog{max-width:calc(100vw - 2rem)}
.modal-content{max-width:100%}
.modal-body{overflow-wrap:anywhere}
.dropdown-menu{max-width:calc(100vw - 1.5rem);overflow-wrap:anywhere}

/* Cabeçalhos de páginas/cards com ações não podem colidir. */
.card-header.d-flex,.page-header-actions,.panel-actions,.dashboard-actions,.manual-banner-actions,.tmdb-actions,.bg-actions,.app-texts-actions,.chat-actions{gap:.6rem;flex-wrap:wrap}

/* Desktop e notebook: o conteúdo usa todo o espaço restante do menu. */
@media (min-width:768px){
  /*
   * Navegação desktop GLOBAL: o menu é independente da rolagem de TODAS as páginas.
   * Vale para Dashboard, Clientes/MACs, editar listas, revendas, playlists, TMDB,
   * banners, temas, cores, QR Code, chatbot, perfil, logs e qualquer tela que use
   * os cabeçalhos padrão do painel.
   */
  #wrapper{display:block!important;width:100%!important;min-height:100vh;min-height:100dvh}
  .sidebar{
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    z-index:1040!important;
    width:14rem!important;
    min-width:14rem!important;
    max-width:14rem!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:100vh!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  #content-wrapper{
    display:flex!important;
    flex-direction:column!important;
    margin-left:14rem!important;
    width:calc(100% - 14rem)!important;
    max-width:calc(100% - 14rem)!important;
    min-width:0!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    overflow-x:hidden!important;
    transition:margin-left .18s ease,width .18s ease,max-width .18s ease;
  }
  .sidebar.toggled{
    width:6.5rem!important;
    min-width:6.5rem!important;
    max-width:6.5rem!important;
  }
  .sidebar.toggled + #content-wrapper{
    margin-left:6.5rem!important;
    width:calc(100% - 6.5rem)!important;
    max-width:calc(100% - 6.5rem)!important;
  }
  #content{width:100%!important;min-width:0!important;flex:1 0 auto}
  .container-fluid{padding-left:1.25rem;padding-right:1.25rem}
  .topbar{min-width:0}
  .topbar>div:first-of-type{min-width:0}
  .topbar h5{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Notebook/tablet em paisagem: reduz um pouco os espaçamentos sem perder o menu completo. */
@media (min-width:768px) and (max-width:1199.98px){
  .container-fluid{padding-left:1rem;padding-right:1rem}
  .card-body{padding:1.1rem}
  .table th,.table td{padding:.65rem .7rem}
}

/* Celular: menu lateral vira gaveta e o conteúdo ocupa 100%. */
@media (max-width:767.98px){
  :root{--panel-table-min:660px}
  body{width:100%;min-width:0}
  body.mobile-sidebar-open{overflow:hidden;touch-action:none}
  #wrapper{display:block!important;min-height:100vh;min-height:100dvh}
  #content-wrapper,#content{width:100%!important;max-width:100%!important;margin:0!important;min-width:0!important}

  .sidebar,.sidebar.toggled{
    position:fixed!important;left:0;top:0;bottom:0;z-index:1060;
    display:block!important;width:min(86vw,310px)!important;min-width:min(86vw,310px)!important;max-width:min(86vw,310px)!important;
    height:100vh;height:100dvh;max-height:100dvh;
    overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;
    transform:translateX(-103%);transition:transform .2s ease!important;
    box-shadow:14px 0 36px rgba(0,0,0,.42)!important;
    padding-bottom:max(1rem,env(safe-area-inset-bottom));
  }
  body.mobile-sidebar-open .sidebar{transform:translateX(0)}
  .sidebar .sidebar-brand{min-height:76px!important;height:auto!important;padding:.5rem 0!important}
  .sidebar .sidebar-brand img{width:54px!important;height:54px!important;object-fit:contain}
  .sidebar .text-menu-header{display:block!important;margin:.9rem 1rem .3rem!important;text-align:left!important}
  .sidebar .nav-item{margin:.12rem .65rem!important;width:auto!important}
  .sidebar .nav-item .nav-link,.sidebar.toggled .nav-item .nav-link{
    width:auto!important;min-height:44px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;
    gap:.7rem!important;padding:.7rem .85rem!important;text-align:left!important;white-space:normal!important;
  }
  .sidebar .nav-item .nav-link i,.sidebar.toggled .nav-item .nav-link i{display:inline-block!important;width:1.25rem!important;min-width:1.25rem!important;margin:0!important;text-align:center!important}
  .sidebar .nav-item .nav-link span,.sidebar.toggled .nav-item .nav-link span{display:inline!important;font-size:.9rem!important;line-height:1.25!important;overflow-wrap:anywhere}
  .sidebar .collapse,.sidebar.toggled .collapse{position:static!important;margin:0!important}
  .sidebar .collapse-inner{margin:.3rem .65rem .5rem!important;padding:.4rem!important;max-width:calc(100% - 1.3rem)}
  .sidebar #sidebarToggle{display:none!important}

  #panelMobileBackdrop{display:none;position:fixed;inset:0;z-index:1050;background:rgba(0,0,0,.58);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}
  body.mobile-sidebar-open #panelMobileBackdrop{display:block}

  .topbar{position:sticky!important;top:0;z-index:1030;height:64px!important;min-height:64px!important;margin-bottom:1rem!important;padding:.4rem var(--panel-mobile-gutter)!important;padding-top:max(.4rem,env(safe-area-inset-top))!important}
  .topbar #sidebarToggleTop{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;margin-right:.6rem!important}
  .topbar>div{min-width:0}
  .topbar h5{max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem!important}
  .topbar .navbar-nav{flex-shrink:0;margin-left:auto!important}.topbar .nav-link{padding:.45rem!important}.topbar .badge{font-size:.72rem}

  .container-fluid{padding-left:var(--panel-mobile-gutter)!important;padding-right:var(--panel-mobile-gutter)!important}
  .container{padding-left:var(--panel-mobile-gutter)!important;padding-right:var(--panel-mobile-gutter)!important;max-width:100%!important}
  main.container-fluid{padding-top:.15rem}
  .row{margin-left:-.375rem!important;margin-right:-.375rem!important}
  .row>[class*="col-"]{padding-left:.375rem!important;padding-right:.375rem!important}

  .card{border-radius:.7rem!important;margin-bottom:1rem!important;max-width:100%!important}
  .card-header{padding:.85rem 1rem!important}
  .card-body{padding:1rem!important}
  .card-header.d-flex{gap:.6rem;flex-wrap:wrap;align-items:flex-start!important}
  .card-header.d-flex .btn{margin-left:0!important}

  h1,.h1{font-size:1.65rem!important}h2,.h2{font-size:1.45rem!important}h3,.h3{font-size:1.28rem!important}h4,.h4{font-size:1.12rem!important}
  p,small,.small,label{overflow-wrap:anywhere}

  input.form-control,select.form-control,textarea.form-control,.custom-select{font-size:16px!important;min-height:44px}
  input[type="checkbox"],input[type="radio"]{min-width:18px;min-height:18px}
  textarea.form-control{min-height:110px}
  .input-group>.form-control{min-width:0}
  .input-group{flex-wrap:nowrap;width:100%}
  .form-group{margin-bottom:1rem}.form-row{margin-left:-.375rem!important;margin-right:-.375rem!important}
  .form-inline{display:flex;align-items:stretch!important;gap:.5rem}
  .form-inline .form-control,.form-inline .custom-select,.form-inline .btn{flex:1 1 100%;width:100%!important;margin:0!important}

  .table-responsive{border-radius:.6rem!important;max-width:100vw}
  .table-responsive>.table{min-width:var(--panel-table-min)}
  .table th,.table td{padding:.65rem .7rem!important;vertical-align:middle!important}
  .table .btn{margin:.1rem!important;min-height:36px}
  .table td.text-right{white-space:nowrap}

  .modal-dialog{width:auto!important;margin:.75rem!important;max-width:calc(100vw - 1.5rem)!important}
  .modal-body{max-height:70vh;max-height:70dvh;overflow-y:auto}
  .modal-footer{gap:.5rem;flex-wrap:wrap}
  .modal-footer .btn{margin:0!important;flex:1 1 auto;min-height:42px}

  .d-flex.justify-content-between,.d-sm-flex.justify-content-between{gap:.75rem;flex-wrap:wrap!important}
  .d-sm-flex.align-items-center{align-items:flex-start!important}
  .pagination{flex-wrap:wrap}.pagination .page-link{min-width:38px;text-align:center}
  .sticky-footer{padding:1rem 0!important}.scroll-to-top{right:.75rem!important;bottom:.75rem!important}

  /* Botões de ação principais ficam fáceis de tocar no celular. */
  .panel-actions>.btn,.dashboard-actions>.btn,.manual-banner-actions>.btn,.tmdb-actions>.btn,.bg-actions>.btn,.app-texts-actions>.btn,.chat-actions>.btn{flex:1 1 100%;width:100%;min-height:44px}
}

@media (max-width:420px){
  :root{--panel-mobile-gutter:.6rem;--panel-table-min:620px}
  .topbar h5{max-width:43vw}.topbar .badge{display:none}
  .card-body{padding:.85rem!important}.btn{white-space:normal}
  .modal-dialog{margin:.5rem!important;max-width:calc(100vw - 1rem)!important}
}

/* Telas muito estreitas em modo paisagem (celular girado). */
@media (max-height:520px) and (max-width:900px){
  .sidebar,.sidebar.toggled{width:min(72vw,300px)!important;min-width:min(72vw,300px)!important;max-width:min(72vw,300px)!important}
  .sidebar .sidebar-brand{min-height:58px!important}.sidebar .sidebar-brand img{width:44px!important;height:44px!important}
  .sidebar .nav-item .nav-link,.sidebar.toggled .nav-item .nav-link{min-height:40px!important;padding:.52rem .8rem!important}
  .topbar{height:56px!important;min-height:56px!important;margin-bottom:.6rem!important}
}