/* =========================================================
   CEO Dashboard – Mobile full-width fix (equal left/right)
   ========================================================= */

/* 0) Global safety: stop horizontal overflow everywhere */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Safer box sizing (prevents width calc surprises) */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 1) Make common wrappers never exceed viewport width */
.page,
.main-content,
.app-content,
.container-fluid {
  max-width: 100%;
}

/* =========================================================
   Mobile-only fixes
   ========================================================= */
@media (max-width: 576px) {

  /* A) Kill template side offsets + transforms (sidebar shifting) */
  html[data-nav-layout="vertical"] .page,
  html[data-nav-layout="vertical"] .main-content,
  html[data-nav-layout="vertical"] .app-content,
  .main-content.app-content {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;

    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    width: 100vw !important;      /* IMPORTANT: forces equal sides */
    max-width: 100vw !important;

    left: 0 !important;
    right: 0 !important;

    transform: none !important;   /* IMPORTANT: removes tiny shifts */
    overflow-x: hidden !important;
  }

  /* B) Give tiny equal padding inside the content area */
  html[data-nav-layout="vertical"] .main-content.app-content > .container-fluid,
  .main-content.app-content > .container-fluid {
    width: 100% !important;
    max-width: 100% !important;

    padding-left: 12px !important;
    padding-right: 12px !important;

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

    overflow-x: hidden !important;
  }

  /* C) IMPORTANT: Fix unequal side space by removing .row negative margins
        (Bootstrap rows use negative margins which get clipped unevenly sometimes) */
  .main-content.app-content .row {
    --bs-gutter-x: 1rem;          /* 16px gutter total */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Re-apply equal gutter padding to columns since we removed row negative margins */
  .main-content.app-content .row > * {
    padding-left: calc(var(--bs-gutter-x) / 2) !important;  /* 8px */
    padding-right: calc(var(--bs-gutter-x) / 2) !important; /* 8px */
  }

  /* D) Images / SVGs / Canvas shouldn’t overflow */
  img, svg, canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* E) ApexCharts overflow fix (very common) */
  .apexcharts-canvas,
  .apexcharts-canvas svg,
  .apexcharts-svg {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Chart wrappers: hide tiny overflow caused by transforms */
  #sales-overview,
  #orders,
  #sales-statistics,
  #line-graph1, #line-graph2, #line-graph3, #line-graph4, #line-graph5 {
    overflow: hidden !important;
  }

  /* F) Tables should scroll inside (not push the whole page wide) */
  .table-responsive {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* G) Cards should never exceed screen */
  .card,
  .card-header,
  .card-body {
    max-width: 100% !important;
  }

  .top-space {
    margin-top: 100px !important;
  }
}

/* =========================================================
   Common Code Fixes
   ========================================================= */

.signin-eye {
  position: absolute !important;
  top: 45px !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
}

.sidebar-icon {
  font-size: 16px !important;
  margin-right: 10px !important;
}

.my-form-input {
  height: 40px !important;
  font-size: 17px !important;
}