/* Archivo: app/static/css/custom.css */

/* Estilos mínimos */
.login-page { background: #f4f6f9; }
.alert { margin-bottom: 12px; }

/* Footer fijo */
:root { --footer-height: 50px; --vh: 1vh; }
.main-footer { position: fixed; left:0; right:0; bottom:0; z-index:1030; }
.content-wrapper { padding-bottom: calc(var(--footer-height) + 16px); }

/* Acciones del navbar con color y hover */
.nav-action { border-radius: 8px; transition: background-color .2s ease, color .2s ease; }
.nav-action--menu { color: #495057; }
.nav-action--dark { color: #343a40; }
.nav-action--msg { color: #0c5460; }
.nav-action--notify { color: #7a5200; }
.nav-action--user { color: #2f4f4f; }

.nav-action--menu:hover { background: #e9ecef; color:#212529; }
.nav-action--dark:hover { background: #343a40; color:#fff; }
.nav-action--msg:hover { background: #17a2b8; color:#fff; }
.nav-action--notify:hover { background: #ffc107; color:#212529; }
.nav-action--user:hover { background: #6c757d; color:#fff; }

/* Badges en navbar un poco más compactos */
.navbar .navbar-badge { font-size: .65rem; }

/* Dropdown de usuario: avatar redondo y espaciamiento */
.user-menu .user-image { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.user-menu .user-header { text-align: left; }
.user-menu .user-header img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; }
.user-menu .user-footer .btn-default { border-color: #ced4da; }

/* ------------------------------------------------------------- */
/* Bloque general de formularios y controles                     */
/* ------------------------------------------------------------- */

.form-control, .custom-select { transition: box-shadow .2s ease, border-color .2s ease; }
.form-control:focus, .custom-select:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}
::placeholder { color: #adb5bd; opacity: 1; }
.form-group > label, .col-form-label { font-weight: 600; color: #495057; }

.btn { border-radius: .4rem; }
.btn-primary { background-color: #007bff; border-color: #007bff; }
.btn-warning { background-color: #ffc107; border-color: #ffc107; color: #1f2d3d; }
.btn-danger  { background-color: #dc3545; border-color: #dc3545; }

.btn i.fas, .btn i.far, .btn i.fab { margin-right: 4px; }

/* ------------------------------------------------------------- */
/* DataTables                                                     */
/* ------------------------------------------------------------- */

table.dataTable tbody tr.selected { background-color: #cce5ff; }
table.dataTable thead th { white-space: nowrap; }
.dataTables_wrapper .dataTables_paginate .paginate_button { padding: .2rem .6rem; }
.dataTables_wrapper .dataTables_length select { min-width: 60px; }
.dataTables_length label select { width: auto; }

/* ------------------------------------------------------------- */
/* Widgets tipo AdminLTE                                         */
/* ------------------------------------------------------------- */

.small-box .icon { opacity: .2; }
.small-box:hover .icon { opacity: .35; }

.card { border-radius: .5rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.card .card-header { border-bottom: 1px solid rgba(0,0,0,.05); }

/* ------------------------------------------------------------- */
/* Modales – ajustes globales                                    */
/* ------------------------------------------------------------- */

.modal { -webkit-overflow-scrolling: touch; }

/* +5px de ancho para modales */
@media (min-width: 992px) {
  .modal-lg, .modal-xl { max-width: 905px; }   /* antes 900 */
  .modal-xl { max-width: 1145px; }             /* antes 1140 */
}

.modal-header.bg-primary { color: #fff; }
.modal-header.bg-warning { color: #1f2d3d; }
.modal-header.bg-danger  { color: #fff; }

.modal-header .close { opacity: 1; text-shadow: none; }
.modal-content { border-radius: .65rem; }

/* ------------------------------------------------------------- */
/* Modal de Perfil (funciona como referencia)                    */
/* ------------------------------------------------------------- */

#globalProfileModal .modal-header { border-bottom: 1px solid #e9ecef; }
#globalProfileModal .modal-footer { border-top: 1px solid #e9ecef; }

#globalProfileModal .modal-dialog.modal-dialog-scrollable .modal-body {
  max-height: calc(100vh - 7.5rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#globalProfileModal .modal-dialog {
  margin: .5rem auto;
  max-height: calc(var(--vh, 1vh) * 100 - 1rem);
}
@supports (height: 100dvh) {
  #globalProfileModal .modal-dialog { max-height: calc(100dvh - 1rem); }
}
#globalProfileModal .modal-content {
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
#globalProfileModal .modal-header,
#globalProfileModal .modal-footer { flex: 0 0 auto; }
#globalProfileModal .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 576px) {
  #globalProfileModal .modal-header,
  #globalProfileModal .modal-footer { padding: .5rem .75rem; }
}

/* Azul (Nuevo) */
.modal-header.sysfood-modal-header {
    background: #0d6efd;
    color: #fff;
    border-bottom: none;
}
.modal-header.sysfood-modal-header .modal-title,
.modal-header.sysfood-modal-header .close {
    color: #fff;
}

/* Amarillo (Editar) */
.modal-header.sysfood-modal-warning {
    background: #ffc107;
    color: #212529;
    border-bottom: none;
}
.modal-header.sysfood-modal-warning .modal-title,
.modal-header.sysfood-modal-warning .close {
    color: #212529;
}

/* ------------------------------------------------------------- */
/* BLOQUE GLOBAL PARA MODALES SCROLLABLE                         */
/* ------------------------------------------------------------- */

.modal { overflow-y: auto !important; }

.modal-dialog.modal-dialog-scrollable {
  margin: .5rem auto;
  max-height: calc(var(--vh, 1vh) * 100 - 1rem);
}
@supports (height: 100dvh) {
  .modal-dialog.modal-dialog-scrollable { max-height: calc(100dvh - 1rem); }
}
.modal-dialog.modal-dialog-scrollable .modal-content {
  display: flex; 
  flex-direction: column; 
  max-height: 100%;
  height: auto;
}
.modal-dialog.modal-dialog-scrollable .modal-header,
.modal-dialog.modal-dialog-scrollable .modal-footer { flex: 0 0 auto; }
.modal-dialog.modal-dialog-scrollable .modal-body {
  flex: 1 1 auto; 
  min-height: 0;
  overflow-y: auto; 
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 576px) {
  .modal-dialog.modal-dialog-scrollable { margin: .5rem; }
  .modal-dialog.modal-dialog-scrollable .modal-header,
  .modal-dialog.modal-dialog-scrollable .modal-footer { padding: .5rem .75rem; }
}

/* ------------------------------------------------------------- */
/* Formularios dentro de modales – Reparación de tamaños         */
/* ------------------------------------------------------------- */

.modal .form-row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-right: -7.5px;
  margin-left: -7.5px;
}
.modal .form-row > [class*='col-'] {
  padding-right: 7.5px;
  padding-left: 7.5px;
  min-width: 0;
}
@media (max-width: 576px){
  .modal .form-row > [class*='col-'] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
.modal .form-control,
.modal .custom-select,
.modal .input-group .form-control {
  min-height: 42px;
}
.modal .input-group .input-group-text {
  height: 42px;
  min-width: 42px;
  justify-content: center;
}

/* ------------------------------------------------------------- */
/* FIX: Scroll móvil universal (Android/iOS)                     */
/* ------------------------------------------------------------- */

@media (max-width: 576px) {
  .modal { 
    overflow-y: auto !important; 
    overscroll-behavior: contain;
  }
  .modal-dialog { margin: .5rem auto !important; }
  .modal .modal-content {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100dvh - 1rem) !important;
  }
  .modal .modal-header,
  .modal .modal-footer { flex: 0 0 auto !important; }
  .modal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}
@supports not (height: 100dvh) {
  @media (max-width: 576px) {
    .modal .modal-content { max-height: calc(100vh - 1rem) !important; }
  }
}
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
  .modal { position: fixed; left: 0; right: 0; top: 0; bottom: 0; }
}

/* ------------------------------------------------------------- */
/* REGLAS ESPECÍFICAS: #personalModal (igual que Perfil)         */
/* ------------------------------------------------------------- */

/* ✅ Damos a #personalModal el mismo tratamiento que al de Perfil */
#personalModal .modal-dialog { margin: .5rem auto; }
#personalModal .modal-dialog.modal-dialog-scrollable .modal-content {
  display: flex; flex-direction: column; max-height: 100%;
}
#personalModal .modal-header,
#personalModal .modal-footer { flex: 0 0 auto; }
#personalModal .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tope explícito para el body (igual patrón que perfil) */
#personalModal .modal-dialog.modal-dialog-scrollable .modal-body {
  max-height: calc(100vh - 7.5rem);
}
@supports (height: 100dvh) {
  #personalModal .modal-dialog.modal-dialog-scrollable .modal-body {
    max-height: calc(100dvh - 7.5rem);
  }
}

/* ------------------------------------------------------------- */
/* Modales específicos (otros)                                   */
/* ------------------------------------------------------------- */

#userAvatarPreview { 
  width: 72px; height: 72px; border-radius: 50%; 
  object-fit: cover; background: #e9ecef; 
  border: 1px solid #dee2e6;
}
.inputfile { width: .1px; height: .1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.inputfile + label { 
  font-weight: 600; cursor: pointer; 
  padding: .25rem .5rem; background: #f8f9fa; border: 1px solid #ced4da; border-radius: .25rem;
}
.inputfile + label:hover { background: #e9ecef; }

.modal-header.bg-warning .modal-title, 
.modal-header.bg-primary .modal-title,
.modal-header.bg-danger  .modal-title { font-weight: 700; }

/* ------------------------------------------------------------- */
/* Parches visuales menores                                      */
/* ------------------------------------------------------------- */

.navbar .nav-link[ data-widget="pushmenu" ] { border-radius: .35rem; }
.navbar .nav-link[ data-widget="pushmenu" ]:hover { background: rgba(0,0,0,.05); }
.nav-sidebar > .nav-item > .nav-link.active { background: #343a40; color: #fff; }
.nav-sidebar .nav-icon { font-size: 1.05rem; }

/* ---- FIN ---- */

/* ===================== DESCUENTOS: Scroll móvil fiable ===================== */

 /* 0) Neutralizar posibles alturas forzadas de la clase extra */
 .modal-mobile-full .modal-content {
   height: auto !important;         /* evita estirar a pantalla completa */
   max-height: none !important;     /* dejamos que flex + JS definan el tope */
 }

 /* 1) Patrón flex igual que Perfil/Personal */
 #descuentoModal .modal-content {
   display: flex !important;
   flex-direction: column !important;
   max-height: 100% !important;
 }
 #descuentoModal .modal-header,
 #descuentoModal .modal-footer {
   flex: 0 0 auto !important;
 }
 #descuentoModal .modal-body {
   flex: 1 1 auto !important;
   min-height: 0 !important;
   overflow-y: auto !important;
   -webkit-overflow-scrolling: touch !important;
 }

 /* 2) Tope por CSS (fallback) en móvil: si no corre el JS, ya tenemos un límite */
 @media (max-width: 576px) {
   #descuentoModal .modal-dialog { margin: .5rem auto !important; }
   #descuentoModal .modal-dialog.modal-dialog-scrollable .modal-body {
     max-height: calc(100dvh - 7.5rem) !important;
   }
 }
 @supports not (height: 100dvh) {
   @media (max-width: 576px) {
     #descuentoModal .modal-dialog.modal-dialog-scrollable .modal-body {
       max-height: calc(100vh - 7.5rem) !important;
     }
   }
 }

 /* ===================== USUARIOS: Scroll móvil fiable ===================== */

 /* 1) Patrón flex igual que Perfil/Personal/Descuentos */
 #userModal .modal-content {
   display: flex !important;
   flex-direction: column !important;
   max-height: 100% !important;
 }
 #userModal .modal-header,
 #userModal .modal-footer {
   flex: 0 0 auto !important;
 }
 #userModal .modal-body {
   flex: 1 1 auto !important;
   min-height: 0 !important;
   overflow-y: auto !important;
   -webkit-overflow-scrolling: touch !important; /* inercia iOS */
 }

 /* 2) Tope por CSS (fallback) en móvil: si el JS no corre, ya tenemos límite */
 @media (max-width: 576px) {
   #userModal .modal-dialog { margin: .5rem auto !important; }
   #userModal .modal-dialog.modal-dialog-scrollable .modal-body {
     max-height: calc(100dvh - 7.5rem) !important; /* viewport dinámico si está disponible */
   }
 }
 @supports not (height: 100dvh) {
   @media (max-width: 576px) {
     #userModal .modal-dialog.modal-dialog-scrollable .modal-body {
       max-height: calc(100vh - 7.5rem) !important; /* fallback para navegadores sin dVH */
     }
   }
 }

 
 /* ===================== CLIENTES: Scroll móvil fiable ===================== */

 /* Patrón flex común (igual que Perfil/Personal/Usuarios/Descuentos) */
 #cliModal .modal-content,
 #cliRolesModal .modal-content,
 #rolCUmodal .modal-content,
 #cliUsersModal .modal-content,
 #userCUmodal .modal-content {
   display: flex !important;
   flex-direction: column !important;
   max-height: 100% !important;
 }
 #cliModal .modal-header, #cliModal .modal-footer,
 #cliRolesModal .modal-header, #cliRolesModal .modal-footer,
 #rolCUmodal .modal-header, #rolCUmodal .modal-footer,
 #cliUsersModal .modal-header, #cliUsersModal .modal-footer,
 #userCUmodal .modal-header, #userCUmodal .modal-footer {
   flex: 0 0 auto !important;
 }
 #cliModal .modal-body,
 #cliRolesModal .modal-body,
 #rolCUmodal .modal-body,
 #cliUsersModal .modal-body,
 #userCUmodal .modal-body {
   flex: 1 1 auto !important;
   min-height: 0 !important;
   overflow-y: auto !important;
   -webkit-overflow-scrolling: touch !important; /* inercia iOS */
 }

 /* Tope por CSS (fallback) en móvil: si el JS no corre, ya tenemos límite */
 @media (max-width: 576px) {
   #cliModal .modal-dialog,
   #cliRolesModal .modal-dialog,
   #rolCUmodal .modal-dialog,
   #cliUsersModal .modal-dialog,
   #userCUmodal .modal-dialog {
     margin: .5rem auto !important;
   }
   #cliModal .modal-dialog.modal-dialog-scrollable .modal-body,
   #cliRolesModal .modal-dialog.modal-dialog-scrollable .modal-body,
   #rolCUmodal .modal-dialog.modal-dialog-scrollable .modal-body,
   #cliUsersModal .modal-dialog.modal-dialog-scrollable .modal-body,
   #userCUmodal .modal-dialog.modal-dialog-scrollable .modal-body {
     max-height: calc(100dvh - 7.5rem) !important; /* viewport dinámico si está disponible */
   }
 }
 @supports not (height: 100dvh) {
   @media (max-width: 576px) {
     #cliModal .modal-dialog.modal-dialog-scrollable .modal-body,
     #cliRolesModal .modal-dialog.modal-dialog-scrollable .modal-body,
     #rolCUmodal .modal-dialog.modal-dialog-scrollable .modal-body,
     #cliUsersModal .modal-dialog.modal-dialog-scrollable .modal-body,
     #userCUmodal .modal-dialog.modal-dialog-scrollable .modal-body {
       max-height: calc(100vh - 7.5rem) !important; /* fallback para navegadores sin dVH */
     }
   }
 }


 /* Centrar contenido de small-box y mantener el ícono en la esquina */
.small-box .inner { text-align: center; }
.small-box .icon { right: 10px; top: 10px; }

/* Botones del header de tarjetas compactos */
.card .card-header .btn.btn-xs { padding: 2px 6px; font-size: 11px; }

/* Estilos específicos para el dashboard del sistema */
/* Tabla de actividad reciente */
#sys-activity td {
  vertical-align: top;
  font-size: 0.9rem;
}
#sys-activity .text-danger {
  color: #dc3545 !important;
}
#sys-activity .text-success {
  color: #28a745 !important;
}

/* ✅ Ticket resaltado (abierto desde notificación / URL ?open=) */
table.dataTable tbody tr.ticket-open-row {
  background: rgba(255, 193, 7, 0.25) !important; /* amarillo suave */
}
table.dataTable tbody tr.ticket-open-row td {
  font-weight: 600;
}

/* =========================================================
   SIDEBAR SYSFOOD - ESTILO UNIFICADO (CLIENTE + SISTEMA)
   ========================================================= */

.main-sidebar .nav-sidebar > .nav-item > .nav-link,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
  border-radius: .35rem;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* Estado normal */
.main-sidebar .nav-sidebar > .nav-item > .nav-link,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
  color: #c2c7d0;
}

/* Hover uniforme */
.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
  background: rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
}

/* Activo / abierto uniforme */
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
  background: #495057 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Íconos en hover/activo */
.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover .nav-icon,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover .nav-icon,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active .nav-icon,
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link .nav-icon,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active .nav-icon {
  color: #ffffff !important;
}

/* Header tipo "Cuenta" */
.main-sidebar .nav-header {
  color: rgba(255,255,255,.75);
  font-weight: 600;
}

/* Logout sin fondo rojo fuerte al hover */
.main-sidebar .nav-link.text-danger {
  color: #e9ecef !important;
}
.main-sidebar .nav-link.text-danger:hover {
  background: rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
}

/* ARCHIVO: app/static/css/custom.css */
/* AGREGAR AL FINAL DEL ARCHIVO */

/* =========================================================
   SYSFOOD - RESPONSIVE GLOBAL PARA TABLAS Y FILTROS
   ========================================================= */

.sysfood-filters-row .form-group {
  margin-bottom: 1rem;
}

.sysfood-table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.sysfood-table-wrap > table {
  width: 100% !important;
  min-width: 980px;
}

.sysfood-inline-search {
  width: 100%;
  min-width: 0 !important;
}

.sysfood-inline-search .form-control {
  width: 100%;
}

@media (max-width: 767.98px) {
  .card-header .card-tools {
    width: 100%;
    margin-top: .5rem;
    display: flex;
    justify-content: flex-end;
  }

  .sysfood-table-wrap > table {
    min-width: 900px;
  }

  .sysfood-filters-row .form-group label {
    margin-bottom: .35rem;
  }
}

/* ARCHIVO: app/static/css/custom.css */
/* AGREGAR AL FINAL DEL ARCHIVO */

/* =========================================================
   SYSFOOD - BASE RESPONSIVE GLOBAL PARA MÓDULOS CLIENTE
   ========================================================= */

.sysfood-client-card .card-header {
  padding-top: .85rem;
  padding-bottom: .85rem;
}

.sysfood-client-card .card-title {
  font-weight: 700;
}

.sysfood-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: flex-end;
  align-items: center;
}

.sysfood-toolbar .btn {
  white-space: nowrap;
}

.sysfood-filters-row .form-group {
  margin-bottom: 1rem;
}

.sysfood-table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.sysfood-table-wrap > table {
  width: 100% !important;
  min-width: 960px;
}

.sysfood-inline-search {
  width: 100%;
  min-width: 0 !important;
}

.sysfood-inline-search .form-control {
  width: 100%;
}

/* DataTables: comportamiento base */
.dataTables_wrapper {
  width: 100%;
}

.dataTables_wrapper .row {
  align-items: center;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  margin-top: .35rem;
  margin-bottom: .35rem;
}

.dataTables_wrapper .dataTables_filter input {
  max-width: 100%;
}

.dataTables_wrapper .dataTables_length select {
  width: auto;
  min-width: 70px;
}

/* Responsive móvil global */
@media (max-width: 767.98px) {
  .sysfood-client-card .card-header .d-flex {
    width: 100%;
  }

  .sysfood-client-card .card-header .card-tools,
  .sysfood-toolbar {
    width: 100%;
    justify-content: flex-start;
  }

  .sysfood-toolbar .btn {
    margin-bottom: .25rem;
  }

  .sysfood-table-wrap > table {
    min-width: 900px;
  }

  .dataTables_wrapper .row > div[class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    text-align: left !important;
  }

  .dataTables_wrapper .dataTables_filter {
    width: 100%;
  }

  .dataTables_wrapper .dataTables_filter label {
    width: 100%;
    margin-bottom: 0;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: .35rem;
  }

  .dataTables_wrapper .dataTables_paginate {
    text-align: left !important;
    white-space: normal;
  }

  .dataTables_wrapper .dataTables_info {
    white-space: normal;
  }
}

/* Campana cliente - evitar que textos largos salgan del recuadro */
#notify-list .notify-item {
  white-space: normal !important;
  max-width: 360px;
}

#notify-list .notify-msg-wrap {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

#notify-list .notify-item .flex-fill {
  min-width: 0;
}

/* =========================================================
   SYSFood - Tabla optimizada para celular global
   Usar clase: .sysfood-mobile-table
   ========================================================= */

@media (max-width: 768px) {

  .sysfood-mobile-table {
    font-size: 0.82rem;
  }

  .sysfood-mobile-table th,
  .sysfood-mobile-table td {
    padding: 0.35rem;
    vertical-align: middle;
    white-space: nowrap;
  }

  .sysfood-mobile-table .btn-group .btn,
  .sysfood-mobile-table .btn {
    padding: 2px 5px;
    font-size: 0.72rem;
  }

  .sysfood-mobile-table td {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sysfood-mobile-table th:last-child,
  .sysfood-mobile-table td:last-child {
    min-width: 92px;
    max-width: 110px;
    text-align: center;
  }

  .sysfood-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sysfood-table-wrap table {
    margin-bottom: 0;
  }
}

.dscto-chart-box {
  position: relative;
  height: 260px;
  max-height: 260px;
  width: 100%;
  overflow: hidden;
}

.dscto-chart-box canvas {
  max-height: 260px !important;
}