/*
 * Regole trasversali per telefono e tablet, caricate da _includes/css_require.php dopo il tema:
 * valgono per tutte le pagine del portale (comuni, agenzie, postini). Niente stile "nuovo": solo
 * far stare nello schermo quello che c'e' (barre di pulsanti che vanno a capo, tabelle che
 * scorrono dentro il loro riquadro, moduli a tutta larghezza, modali senza margini fissi).
 */

/* fila di pulsanti-azione (es. barra Flussi/Accettazioni/... di pub): va a capo invece di uscire dallo schermo */
.spike-azioni{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px}
.spike-azioni .button{margin:0!important}

/* tablet e "modalita' desktop" dei telefoni (viewport ~980-1024px) */
@media (max-width:1024px){
  #page-title .container,.content-wrap .container[style*="width"],#header-wrap .container[style*="width"]{width:auto!important;max-width:100%;padding-left:12px;padding-right:12px}
  .dataTables_wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length{float:none;text-align:left;margin:6px 0}
  .dataTables_wrapper .dataTables_filter label{display:block}
  .dataTables_wrapper .dataTables_filter input{width:100%;max-width:420px;box-sizing:border-box}
  .dt-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;float:none}
  .topnav{display:flex;flex-wrap:wrap}
  .topnav a{float:none;flex:1 1 auto;text-align:center;font-size:13.5px;padding:10px 10px}
  .button.button-mini{padding:8px 12px;font-size:12px}
}

/* telefono */
@media (max-width:767px){
  .container{width:auto!important;max-width:100%}
  img{max-width:100%;height:auto}
  .modal-dialog{width:auto;margin:10px}
  .modal-body{overflow-x:auto}
  .button,.btn{white-space:normal}
  input[type=text],input[type=email],input[type=number],input[type=password],input[type=date],select,textarea,.form-control,.sm-form-control{max-width:100%}
  textarea.past-enabled,textarea.sm-form-control{width:100%!important;box-sizing:border-box}
  .form-group .control-label{text-align:left}
  .input-group{width:100%}
  iframe{max-width:100%}
  #page-title h1{font-size:22px}
  #page-title{padding:14px 0}
  .panel-body.margin-top-30,.panel-body.padding-20{padding-left:8px;padding-right:8px}
  table.dataTable td,table.dataTable th{font-size:13px;padding:6px 6px}
  .dataTables_wrapper .dataTables_paginate{float:none;text-align:center;margin-top:8px}
  .dataTables_wrapper .dataTables_info{float:none;text-align:center}
}