/* FRECUENCIA DENTAL MOBILE / TABLET RESPONSIVE LAYER v26 */

html,body{max-width:100%;overflow-x:hidden}
img,video,canvas,iframe{max-width:100%}
input,select,textarea,button{font-size:16px} /* prevent iOS zoom */

@media(max-width:900px){
  .topbar{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    min-height:62px!important;
    grid-template-columns:1fr auto!important;
    gap:10px!important;
    padding:8px 12px!important;
  }
  .top-search{display:none!important}
  .brand{
    justify-self:start!important;
    font-size:16px!important;
    min-width:0!important;
    white-space:normal!important;
  }
  .brand img{
    width:38px!important;height:38px!important;
    min-width:38px!important;
  }
  .brand small{
    font-size:8px!important;
    letter-spacing:.10em!important;
  }
  .userbox{
    justify-self:end!important;
    min-width:0!important;
    gap:6px!important;
  }
  .userbox span:not(.avatar){display:none!important}
  .userbox a{font-size:12px!important}

  .mainnav{
    position:relative!important;
    top:auto!important;
    height:48px!important;
    padding-left:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .mainnav::-webkit-scrollbar{display:none}
  .mainnav a{
    flex:0 0 auto!important;
    padding:0 16px!important;
    font-size:13px!important;
  }

  .page{
    width:100%!important;
    max-width:none!important;
    margin:14px auto 100px!important;
    padding:0 10px!important;
  }

  .layout{display:block!important}
  .sidebar{
    position:relative!important;
    top:auto!important;
    display:flex!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    margin-bottom:12px!important;
    padding:8px!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .sidebar::-webkit-scrollbar{display:none}
  .sidehead,.side-sep{display:none!important}
  .sidebtn{
    flex:0 0 auto!important;
    min-width:max-content!important;
    width:auto!important;
    padding:9px 11px!important;
    margin:0!important;
    font-size:12px!important;
  }

  .metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .metric{
    padding:12px!important;
    min-height:78px!important;
  }
  .metric strong{font-size:24px!important}
  .metric small{font-size:9px!important}

  .toolbar{
    align-items:stretch!important;
    gap:8px!important;
  }
  .toolbar form,
  .toolbar .group{
    width:100%!important;
  }
  .toolbar form .input,
  .toolbar form select{
    flex:1 1 150px!important;
    min-width:0!important;
  }
  .toolbar .group .btn,
  .toolbar > .btn{
    width:100%!important;
    text-align:center!important;
  }

  .grid2,.grid3,.form-grid{
    grid-template-columns:1fr!important;
  }
  .form-grid .full,.quickcase-full{grid-column:auto!important}

  .section,.card.pad{
    padding:13px!important;
    border-radius:9px!important;
  }

  .table-wrap{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  table{
    min-width:760px!important;
    font-size:12px!important;
  }
  th,td{
    padding:9px 8px!important;
    white-space:nowrap;
  }

  .file-row{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
  }
  .file-row > div{
    min-width:0!important;
    flex:1 1 100%!important;
  }
  .file-row .btn{
    flex:1 1 auto!important;
    text-align:center!important;
  }

  .message{
    margin-left:0!important;
  }

  .dropbar{
    min-height:64px!important;
    padding:9px 12px!important;
    text-align:center!important;
  }
  .dropbar-inner{
    gap:6px!important;
    font-size:12px!important;
  }

  .quickcase-backdrop{
    padding:8px!important;
    align-items:end!important;
  }
  .quickcase-modal{
    width:100%!important;
    max-height:94vh!important;
    border-radius:14px 14px 0 0!important;
  }
  .quickcase-head{
    padding:14px!important;
  }
  .quickcase-head h2{
    font-size:19px!important;
  }
  .quickcase-modal form{
    padding:12px!important;
  }
  .quickcase-files{
    grid-template-columns:1fr!important;
  }
  .quickcase-grid{
    grid-template-columns:1fr!important;
  }
  .quickcase-actions{
    position:sticky;
    bottom:0;
    background:#08151b;
    padding:10px 0 2px;
    flex-wrap:wrap;
  }
  .quickcase-actions #quickCaseStatus{
    width:100%!important;
    margin:0 0 6px!important;
  }
  .quickcase-actions .btn{
    flex:1 1 140px!important;
  }

  .designed-files-header{
    align-items:center!important;
  }
  .designed-file-row{
    gap:8px!important;
  }

  .design-dropzone{
    min-height:150px!important;
    padding:18px 12px!important;
  }
  .design-file-chip{
    align-items:flex-start!important;
  }

  .login-card{
    width:100%!important;
    max-width:430px!important;
    padding:20px!important;
  }
}

@media(max-width:560px){
  .metrics{grid-template-columns:1fr 1fr!important}
  .metric:nth-child(5){grid-column:1/-1}

  .brand span{line-height:1.05}
  .brand small{display:none!important}

  .avatar{
    width:30px!important;height:30px!important;
    min-width:30px!important;
  }

  .mainnav a{
    padding:0 13px!important;
    font-size:12px!important;
  }

  .page{padding:0 8px!important}

  h1{font-size:24px!important}
  h2{font-size:20px!important}
  h3{font-size:13px!important}

  .toolbar .btn,
  .toolbar button{
    min-height:42px!important;
  }

  .btn{
    min-height:40px!important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .field .value{
    overflow-wrap:anywhere;
  }

  .notes{
    font-size:14px!important;
    line-height:1.45!important;
  }

  .stl-modal-backdrop{
    padding:0!important;
  }
  .stl-modal{
    width:100vw!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    border-radius:0!important;
  }
  .stl-modal-head{
    padding:10px 12px!important;
  }
  .stl-modal-head h2{
    font-size:15px!important;
    max-width:75vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .designed-count{
    min-width:30px!important;
    height:30px!important;
  }
}

/* Touch friendly targets */
@media(pointer:coarse){
  .btn,.sidebtn,.mainnav a,.drop-browse,.quickcase-close,.stl-modal-close{
    min-height:44px;
  }
  input,select,textarea{
    min-height:44px;
  }
}