/* =========================================================
   MxService Printer Monitor DEMO
   Responsive mobile/tablette
   Couche additive - ne modifie pas le design desktop
   ========================================================= */


/* ---------- TABLETTE ---------- */

@media (max-width: 1024px) {

  body {
    min-width: 0 !important;
  }

  .console-shell {
    width: 100% !important;
    min-width: 0 !important;
  }

  .console-main {
    min-width: 0 !important;
    width: auto !important;
  }

  .console-content,
  .console-center {
    min-width: 0 !important;
    width: 100% !important;
  }

  .console-sidebar {
    width: 64px !important;
    min-width: 64px !important;
    flex: 0 0 64px !important;
  }

  .sidebar-brand-text,
  .ui-nav-group-title,
  .sidebar-link > span:last-child,
  .sidebar-footer span {
    display: none !important;
  }

  .sidebar-brand {
    justify-content: center !important;
  }

  .ui-nav-group .sidebar-link {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .sidebar-link-icon {
    margin: 0 !important;
  }

  .console-topbar.ui-contextbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .ui-context-metrics {
    display: none !important;
  }

  .ui-dashboard-layout {
    grid-template-columns: 1fr !important;
  }

  .ui-dashboard-side {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ui-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ui-fleet-stats {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}


/* ---------- MOBILE ---------- */

@media (max-width: 650px) {

  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.ui-polish-v3 {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .console-shell {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100vh !important;
  }


  /* =====================================
     NAVIGATION MOBILE
     Sidebar -> barre horizontale
     ===================================== */

  .console-sidebar {
    position: relative !important;
    top: auto !important;
    left: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    display: flex !important;
    align-items: center !important;

    padding: 6px 8px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch;

    z-index: 50 !important;
  }

  .sidebar-brand {
    flex: 0 0 auto !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
  }

  .sidebar-brand-mini {
    width: 34px !important;
    height: 34px !important;
  }

  .sidebar-brand-text {
    display: none !important;
  }

  .sidebar-nav {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;

    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .ui-nav-group {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .ui-nav-group-title {
    display: none !important;
  }

  .ui-nav-group .sidebar-link {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border-left: 0 !important;
    border-radius: 6px !important;
  }

  .sidebar-link > span:last-child {
    display: none !important;
  }

  .sidebar-link-icon {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .sidebar-footer {
    flex: 0 0 auto !important;
    margin: 0 0 0 5px !important;
    padding: 0 !important;
  }

  .sidebar-footer .sidebar-logout {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
  }

  .sidebar-footer span {
    display: none !important;
  }


  /* =====================================
     CONTENU PRINCIPAL
     ===================================== */

  .console-main {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
  }

  .console-content {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding: 10px !important;

    overflow: visible !important;
  }

  .console-center {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
  }

  .console-view {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }


  /* =====================================
     TOPBAR
     ===================================== */

  .console-topbar.ui-contextbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    min-width: 0 !important;

    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .ui-context-main,
  .topbar-context {
    min-width: 0 !important;
  }

  .topbar-context-title {
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .topbar-context-label {
    font-size: 9px !important;
  }

  .ui-context-subtitle,
  .ui-context-metrics {
    display: none !important;
  }

  .ui-context-actions {
    flex: 0 0 auto !important;
  }


  /* =====================================
     DASHBOARD
     ===================================== */

  .dashboard-premium,
  .dashboard-v25,
  .ui-operations-dashboard {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .ui-dashboard-layout,
  .ui-dashboard-main,
  .ui-dashboard-side {
    display: grid !important;
    grid-template-columns: 1fr !important;

    width: 100% !important;
    min-width: 0 !important;

    gap: 10px !important;
  }

  .ui-page-heading {
    display: block !important;
  }

  .ui-page-heading-main {
    width: 100% !important;
    min-width: 0 !important;
  }

  .ui-page-heading h1 {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }

  .ui-page-heading p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .ui-service-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .ui-service-row {
    border-right: 0 !important;
  }

  .ui-fleet-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;
    min-width: 0 !important;

    overflow: visible !important;
  }


  /* =====================================
     CARTES / PANELS
     ===================================== */

  .card,
  .panel,
  .ui-panel,
  .dashboard-card,
  .dashboard-panel {
    max-width: 100% !important;
    min-width: 0 !important;
  }


  /* =====================================
     TABLEAUX
     ===================================== */

  .dataTables_wrapper,
  .table-responsive,
  .table-container {
    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table {
    max-width: none;
  }


  /* =====================================
     FORMULAIRES
     ===================================== */

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }


  /* =====================================
     MODALES
     ===================================== */

  .modal-overlay,
  .remote-assistance-modal {
    padding: 10px !important;
  }

  .modal,
  .modal-content,
  .remote-assistance-modal > div {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;

    overflow-y: auto !important;
  }


  /* =====================================
     USERS
     ===================================== */

  .users-console-layout {
    display: block !important;
  }

  .users-left-panel {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    margin-bottom: 10px !important;
  }

  .users-center-panel {
    width: 100% !important;
    min-width: 0 !important;
  }


  /* =====================================
     PROTECTION ANTI-DEBORDEMENT
     ===================================== */

  img,
  svg,
  canvas {
    max-width: 100% !important;
  }

  pre,
  code {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

}


/* ---------- PETITS MOBILES ---------- */

@media (max-width: 420px) {

  .console-content {
    padding: 7px !important;
  }

  .ui-fleet-stats {
    grid-template-columns: 1fr !important;
  }

  .ui-page-heading h1 {
    font-size: 20px !important;
  }

}


/* =========================================================
   MXSERVICE LAB DEMO — MOBILE FINAL OVERRIDE
   ========================================================= */

@media screen and (max-width: 700px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* ===== SHELL ===== */

  body.ui-polish-v3 .console-shell,
  body.theme-system-v4 .console-shell,
  body .console-shell,
  .console-shell {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: calc(100dvh - 42px) !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* ===== SIDEBAR -> BARRE MOBILE ===== */

  body.ui-polish-v3 .console-sidebar,
  body.theme-system-v4 .console-sidebar,
  body .console-sidebar,
  .console-sidebar {
    position: relative !important;
    inset: auto !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    margin: 0 !important;
    padding: 5px 8px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;

    flex: 0 0 58px !important;
  }


  /* Logo sidebar */

  .console-sidebar .sidebar-brand,
  .console-sidebar .sidebar-brand-mini {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;

    margin: 0 7px 0 0 !important;
    padding: 0 !important;

    flex: 0 0 44px !important;
  }


  /* ===== NAVIGATION ===== */

  .console-sidebar .sidebar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    width: auto !important;
    min-width: max-content !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 3px !important;

    overflow: visible !important;
  }


  .console-sidebar .ui-nav-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    width: auto !important;
    min-width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 3px !important;
  }


  /* Masquer les titres SUPERVISION / EXPLOITATION / etc. */

  .console-sidebar .ui-nav-group-title,
  .console-sidebar .sidebar-section-title,
  .console-sidebar .nav-section-title {
    display: none !important;
  }


  /* Liens = boutons icônes */

  .console-sidebar .sidebar-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    height: 42px !important;
    min-height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 42px !important;

    border-radius: 4px !important;
  }


  .console-sidebar .sidebar-link-icon {
    margin: 0 !important;
  }


  /* Texte des liens caché sur téléphone */

  .console-sidebar .sidebar-link-label,
  .console-sidebar .sidebar-link-text,
  .console-sidebar .sidebar-label {
    display: none !important;
  }


  /* Footer / logout sidebar */

  .console-sidebar .sidebar-footer {
    display: none !important;
  }


  /* ===== CONTENU PRINCIPAL ===== */

  body.ui-polish-v3 .console-main,
  body.theme-system-v4 .console-main,
  body .console-main,
  .console-main {
    position: relative !important;
    inset: auto !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    margin-left: 0 !important;

    padding: 0 !important;

    flex: 1 1 auto !important;

    overflow: visible !important;
  }


  .console-content {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    margin-left: 0 !important;

    padding: 8px !important;
  }


  .console-center,
  .console-view,
  .console-view.active {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
  }


  /* ===== DASHBOARD ===== */

  .ui-operations-dashboard,
  .ui-dashboard-layout,
  .ui-dashboard-main,
  .ui-dashboard-side {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }


  .ui-dashboard-layout {
    display: block !important;
    grid-template-columns: 1fr !important;
  }


  .ui-dashboard-main,
  .ui-dashboard-side {
    display: block !important;
  }


  /* ===== SECURITE ANTI-DEBORDEMENT ===== */

  .console-main *,
  .console-content * {
    box-sizing: border-box;
  }

}


/* Très petits écrans */

@media screen and (max-width: 420px) {

  .console-sidebar {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    flex-basis: 54px !important;
  }

  .console-sidebar .sidebar-link {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex-basis: 40px !important;
  }

}


/* =========================================================
   MXSERVICE LAB DEMO — MOBILE NAVIGATION FINAL
   ========================================================= */

.mx-mobile-more,
.mx-mobile-menu{
  display:none;
}

@media screen and (max-width:700px){

  /* Seulement quatre fonctions visibles directement */

  .console-sidebar .sidebar-link.mx-mobile-primary{
    display:flex!important;
  }

  .console-sidebar .sidebar-link.mx-mobile-secondary{
    display:none!important;
  }

  .console-sidebar .ui-nav-group{
    display:none!important;
  }

  .console-sidebar .ui-nav-group.mx-mobile-primary-group{
    display:flex!important;
  }


  /* Barre */

  body .console-sidebar{
    overflow:hidden!important;
    gap:4px!important;
  }

  .console-sidebar .sidebar-nav{
    flex:1 1 auto!important;
    min-width:0!important;
    overflow:hidden!important;
  }


  /* Bouton ... */

  .mx-mobile-more{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    width:42px!important;
    min-width:42px!important;
    height:42px!important;

    flex:0 0 42px!important;

    margin-left:auto!important;
    padding:0!important;

    border:1px solid #35505d!important;
    border-radius:5px!important;

    background:#142c36!important;
    color:#dce9ed!important;

    cursor:pointer!important;
  }


  /* Overlay */

  .mx-mobile-menu{
    position:fixed!important;
    inset:0!important;

    z-index:30000!important;

    align-items:flex-end!important;

    background:rgba(0,0,0,.62)!important;

    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .mx-mobile-menu.is-open{
    display:flex!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }


  /* Panneau */

  .mx-mobile-menu-panel{
    width:100%!important;
    max-height:75vh!important;

    display:flex!important;
    flex-direction:column!important;

    background:#10232c!important;

    border-top:1px solid #3c5560!important;

    box-shadow:0 -18px 50px rgba(0,0,0,.4)!important;
  }


  .mx-mobile-menu-header{
    min-height:64px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;

    padding:12px 15px!important;

    border-bottom:1px solid #304650!important;

    color:#edf5f7!important;
  }

  .mx-mobile-menu-header small{
    display:block!important;

    margin-bottom:2px!important;

    color:#55d9c8!important;

    font-size:8px!important;
    font-weight:800!important;
    letter-spacing:.15em!important;
  }

  .mx-mobile-menu-header strong{
    font-size:15px!important;
  }


  .mx-mobile-menu-close{
    width:38px!important;
    height:38px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:1px solid #38515d!important;
    border-radius:4px!important;

    background:#17303a!important;
    color:#fff!important;
  }


  /* Fonctions */

  .mx-mobile-menu-body{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;

    padding:12px!important;

    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  .mx-mobile-menu-item{
    min-width:0!important;
    min-height:54px!important;

    display:flex!important;
    align-items:center!important;

    gap:10px!important;

    padding:9px 10px!important;

    border:1px solid #304a55!important;
    border-radius:5px!important;

    background:#152e39!important;
    color:#dce8ec!important;

    font-size:11px!important;
    text-align:left!important;
  }

  .mx-mobile-menu-item:active{
    background:#204858!important;
  }

  .mx-mobile-menu-icon{
    width:26px!important;
    min-width:26px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    color:#58d2c6!important;
  }

  body.mx-mobile-menu-open{
    overflow:hidden!important;
  }
}


@media screen and (max-width:420px){

  .mx-mobile-menu-body{
    grid-template-columns:1fr!important;
  }

}