/* V112.3 — camada de estabilidade visual, responsividade global e modais */

/* ---------- Hierarquia visual ---------- */
.workspace-tabs-bar{z-index:300!important}
.mobile-app-header{z-index:1200!important}
.mobile-menu-backdrop{z-index:1090!important}
.modal-backdrop{
  z-index:5000!important;
  isolation:isolate;
  padding:clamp(8px,1.35vw,24px)!important;
}
.modal-backdrop>.modal,
.modal-backdrop>.post-modal-shell,
.modal-backdrop .post-modal{
  position:relative;
  z-index:1;
}
.toast{z-index:6000!important}

/* ---------- Base fluida ---------- */
html,body,#app{width:100%;max-width:100%;min-width:0}
html{min-width:320px}
body{overflow-x:hidden}
img,video,canvas,svg{max-width:100%}

.app-shell{
  width:100%;
  min-width:0;
  grid-template-columns:clamp(228px,15vw,290px) minmax(0,1fr)!important;
}
.sidebar,.main,.workspace-page-content,.card,.grid>* ,.form-grid>* ,.topbar>*{min-width:0}
.main{
  width:100%;
  min-width:0;
  padding:clamp(16px,1.45vw,28px)!important;
  overflow-x:clip!important;
  overflow-y:visible!important;
}
.workspace-page-content{max-width:100%}

.input,.select,.textarea,input,select,textarea{max-width:100%;min-width:0}
.topbar{flex-wrap:wrap;min-width:0}
.toolbar,.actions{max-width:100%}
h1{font-size:clamp(28px,2.25vw,36px)!important;overflow-wrap:anywhere}
h2{font-size:clamp(20px,1.65vw,24px)!important}
.card{max-width:100%}
.table{max-width:100%}
.table th,.table td{overflow-wrap:anywhere}
.calendar-grid-wrap{max-width:100%;overscroll-behavior-x:contain}
.calendar-title h2{font-size:clamp(30px,3.4vw,52px)!important}
.month-side{font-size:clamp(36px,3.4vw,54px)!important}

/* Modais sempre cabem na viewport e rolam por dentro, não pela página. */
.modal{
  max-width:calc(100vw - 16px)!important;
  max-height:calc(100dvh - 16px)!important;
  overscroll-behavior:contain;
}
.post-modal-shell{
  max-width:calc(100vw - 12px)!important;
  max-height:calc(100dvh - 12px)!important;
}
.post-modal{
  max-height:calc(100dvh - 16px)!important;
  min-width:0;
}

/* ---------- Desktop médio / notebook largo ---------- */
@media (min-width:1181px) and (max-width:1440px){
  .app-shell{grid-template-columns:238px minmax(0,1fr)!important}
  .sidebar{padding:20px 14px!important}
  .brand{padding:4px 8px 17px!important;margin-bottom:17px!important}
  .brand img{width:165px!important}
  .nav{gap:5px!important}
  .nav button{padding:11px 12px!important;font-size:14px}
  .main{padding:18px!important}
  .grid.cols-4{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .calendar-head{padding:18px 24px 16px 96px!important}
}

/* ---------- Notebook / tablet horizontal ----------
   Mantém a navegação lateral compacta. O CSS legado desmontava a sidebar
   abaixo de 1150 px, causando uma interface completamente diferente. */
@media (min-width:761px) and (max-width:1180px){
  .app-shell{
    grid-template-columns:210px minmax(0,1fr)!important;
    padding-top:0!important;
  }
  .mobile-app-header,.mobile-menu-backdrop{display:none!important}
  .sidebar{
    position:sticky!important;
    top:0!important;
    left:auto!important;
    right:auto!important;
    width:auto!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:16px 11px!important;
    opacity:1!important;
    transform:none!important;
    pointer-events:auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .brand{padding:3px 7px 14px!important;margin-bottom:14px!important}
  .brand img{width:150px!important;margin-bottom:10px!important}
  .brand strong{font-size:20px!important}
  .brand span{font-size:11px!important}
  .nav{
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    gap:4px!important;
  }
  .nav button{
    padding:10px 10px!important;
    border-radius:12px!important;
    font-size:13px!important;
  }
  .main{padding:16px!important}
  .grid.cols-4,.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .calendar-head{padding:16px 18px 14px 82px!important}
  .calendar-board{grid-template-columns:58px minmax(0,1fr)!important}
}

@media (min-width:761px) and (max-width:980px){
  .app-shell{grid-template-columns:188px minmax(0,1fr)!important}
  .sidebar{padding:14px 9px!important}
  .brand img{width:136px!important}
  .nav button{padding:9px 9px!important;font-size:12px!important}
  .main{padding:14px!important}
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr!important}
  .form-grid{grid-template-columns:1fr!important}
  .topbar{gap:10px!important;margin-bottom:16px!important}
  .calendar-head{padding:14px 14px 12px 70px!important}
  .calendar-board{grid-template-columns:48px minmax(0,1fr)!important}
}

/* ---------- Telas baixas (notebooks 768/800/900p) ---------- */
@media (min-width:761px) and (max-height:900px){
  .main{padding-top:12px!important;padding-bottom:12px!important}
  .workspace-tabs-bar{margin-top:-12px!important;margin-bottom:12px!important}
  .topbar{margin-bottom:14px!important}
  .card{padding:16px!important}
  .metric{min-height:108px!important}
  .metric strong{font-size:32px!important}
  .input,.select{padding:10px 12px!important}
  .textarea{min-height:86px!important;padding:10px 12px!important}
  .btn{padding:10px 14px!important}
  .modal-backdrop{padding:7px 10px!important}
  .modal,.post-modal{max-height:calc(100dvh - 14px)!important}
  .modal-header{margin-bottom:12px!important}
  .post-modal-shell{max-height:calc(100dvh - 10px)!important}
}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  .app-shell{
    grid-template-columns:minmax(0,1fr)!important;
    padding-top:74px!important;
  }
  .main{padding:12px!important;overflow-x:clip!important}
  .grid.cols-4,.grid.cols-3,.grid.cols-2,.form-grid{grid-template-columns:1fr!important}
  .topbar{gap:10px!important;margin-bottom:14px!important}
  .topbar .actions{width:100%;justify-content:flex-start!important}
  .card{padding:14px!important;border-radius:16px!important}
  .modal-backdrop{padding:5px!important;align-items:center!important}
  .modal{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 10px)!important;
    padding:13px!important;
    border-radius:17px!important;
  }
  .post-modal-shell{width:100%!important;max-width:100%!important}
  .post-modal{width:100%!important;max-width:100%!important}
  .modal-header{gap:10px!important;margin-bottom:12px!important}
  .modal-top-actions{width:100%;display:flex;flex-wrap:wrap;gap:8px}
  .modal-top-actions .btn{flex:1 1 auto}
  .workspace-tabs-bar{z-index:300!important}
  .calendar-head{padding:12px!important;grid-template-columns:1fr!important;text-align:center}
  .calendar-logo{justify-self:center}
  .calendar-board{grid-template-columns:1fr!important}
  .month-side{display:none!important}
}

/* Evita que conteúdo textual isolado force largura maior que a viewport. */
.workspace-page-content p,
.workspace-page-content strong,
.workspace-page-content small,
.workspace-page-content a,
.modal p,.modal strong,.modal small,.modal a{
  overflow-wrap:anywhere;
}