/* =========================================================
   EFLIS MOBILE FINAL — additive responsive safety layer
   Desktop rules are intentionally untouched.
   ========================================================= */
html,body{max-width:100%}
img,svg,video,canvas{max-width:100%;height:auto}

@media (max-width: 760px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{overflow-x:hidden}
  *,*::before,*::after{box-sizing:border-box}
  main,.main,.content,.page,.page-content,.container,.wrap,.shell,
  .ef-shell-main,.ef-page,.ef-page-content{min-width:0;max-width:100%}

  /* Forms: prevent iOS zoom and horizontal overflow. */
  input,select,textarea,button{max-width:100%;font-size:16px}
  textarea{width:100%;min-height:120px}
  input[type="checkbox"],input[type="radio"]{font-size:initial}
  button,.btn,.ef-action{min-height:42px;touch-action:manipulation}
  .actions,.activity-actions,.form-actions,.modal-actions{
    display:flex;flex-wrap:wrap;gap:8px
  }

  /* Dialogs/modals stay inside the phone viewport. */
  dialog,.modal,.modal-card,.modal-content,.dialog,.dialog-card,
  .ef-modal,.ef-modal__panel{
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 20px)!important;
  }
  .modal-content,.dialog-card,.ef-modal__panel{
    overflow:auto;-webkit-overflow-scrolling:touch
  }

  /* Tables remain usable instead of widening the whole page. */
  .table-wrap,.table-responsive,.ef-table-wrap{
    width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch
  }
  table{max-width:100%}

  /* Central EFLIS editor: toolbar wraps, editing surface stays readable. */
  .eflis-editor,.ef-rte,.eflis-rte,.ef-editor{max-width:100%!important;min-width:0!important}
  .eflis-editor-toolbar,.ef-rte-toolbar,.eflis-rte__toolbar,.ef-editor-toolbar{
    display:flex!important;flex-wrap:wrap!important;gap:4px!important;
    max-width:100%!important;overflow:visible!important
  }
  .eflis-editor-toolbar button,.ef-rte-toolbar button,
  .eflis-rte__toolbar button,.ef-editor-toolbar button{
    min-width:38px;min-height:38px;padding:6px 8px
  }
  [contenteditable="true"]{max-width:100%;overflow-wrap:anywhere}

  /* Long EFLIS titles/labels should wrap, never force horizontal scrolling. */
  h1,h2,h3,h4,.title,.card-title,.module-title,.activity-title,
  .announcement-title,.report-title{
    overflow-wrap:anywhere;word-break:normal
  }

  /* Dense grids collapse naturally on phones. */
  .stats-grid,.dashboard-grid,.cards-grid,.module-grid,.form-grid,
  .filter-grid,.report-grid,.announcement-grid{
    grid-template-columns:1fr!important
  }
}

@media (max-width: 430px){
  body{font-size:14px}
  h1{font-size:clamp(22px,7vw,28px)}
  h2{font-size:clamp(19px,6vw,24px)}
  h3{font-size:clamp(17px,5vw,21px)}
  .actions>button,.actions>.btn,.form-actions>button,.form-actions>.btn{
    flex:1 1 auto
  }
}