/* Responsive overrides for small screens */
/* Ensures media scale and prevents horizontal overflow */
*, *::before, *::after { box-sizing: border-box; }

img, iframe, embed, video { max-width: 100%; height: auto; display: block; }

/* Make tables scrollable on small screens */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Prevent long words or strings from breaking layout */
.text-break { word-break: break-word !important; }

/* Modal and card adjustments */
.modal-dialog { max-width: 100%; margin: 0.5rem; }
.card { word-wrap: break-word; }

/* Header / navbar tweaks */
.navbar-brand-box .logo-lg { display: inline-block; }
.navbar-brand-box .logo-sm { display: none; }

@media (max-width: 575.98px) {
  /* show compact logo on extra small screens */
  .navbar-brand-box .logo-lg { display: none !important; }
  .navbar-brand-box .logo-sm { display: inline-block !important; }

  /* reduce paddings to fit smaller viewports */
  .layout-width { padding-left: 0.5rem; padding-right: 0.5rem; }
  .navbar-header, .navbar-header .d-flex { align-items: center; gap: 0.25rem; }

  /* hide wide search input (uses dropdown on xs in template) */
  .app-search { display: none !important; }

  /* adjust header buttons */
  .header-item .btn, .btn-topbar { padding: 0.35rem 0.45rem; }

  /* smaller profile avatar */
  .header-profile-user, .header-profile-user.img { width: 36px; height: 36px; }

  /* sidebar tweaks */
  .app-menu.navbar-menu { position: relative; width: 100%; }
  .navbar-nav { font-size: 0.95rem; }

  /* main content spacing */
  .main-content { padding: 0.5rem; }
}

/* Utility: prevent horizontal scroll caused by very wide elements */
html, body { overflow-x: hidden; }

/* Boxed layout override for small screens */
@media (max-width: 991.98px) {
  [data-layout-width=boxed] #layout-wrapper { max-width: 100% !important; margin: 0; }
  [data-layout-width=boxed] #page-topbar, [data-layout-width=boxed] .footer { max-width: 100% !important; left: 0 !important; }
}

/* Make the vertical sidebar behave as off-canvas on small screens */
@media (max-width: 991.98px) {
  .app-menu.navbar-menu {
    position: fixed;
    left: -260px;
    top: 0;
    height: 100vh;
    width: 250px;
    z-index: 1055;
    background: var(--vz-secondary-bg);
    transition: left .25s ease;
    overflow-y: auto;
  }

  /* Common toggler classes used by templates: show menu when these classes are present */
  .sidebar-enable .app-menu.navbar-menu,
  .vertical-menu-enable .app-menu.navbar-menu,
  .sidebar-show .app-menu.navbar-menu { left: 0; }

  .main-content, .page-content { margin-left: 0 !important; padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* Make sure large fixed-width components wrap */
.table, .table-responsive, .dataTables_wrapper, .gridjs-wrapper { max-width: 100% !important; overflow-x: auto; }

/* Landing page mobile fixes */
.landing {
  width: 100%;
  overflow-x: hidden;
}

.landing .navbar-landing {
  max-width: 100%;
  overflow-x: hidden;
}

/* Small container padding */
@media (max-width: 991.98px) {
  .landing .navbar-landing .navbar-brand {
    width: auto !important;
    max-width: 70%;
    margin: 0;
  }

  .landing .navbar-landing .navbar-brand img {
    width: auto !important;
    max-height: 72px;
  }
}

@media (max-width: 575.98px) {
  .container, .container-fluid { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

  .landing .demo-carousel,
  .landing .carousel,
  .landing .carousel-inner {
    max-width: 100%;
    overflow: hidden;
  }

  .landing .custom-footer,
  .landing section {
    overflow-x: hidden;
  }

  .landing .navbar-landing {
    padding: 8px 0;
  }

  .landing .navbar-landing .container {
    align-items: center;
  }

  .landing .navbar-landing .navbar-brand img {
    max-height: 60px;
  }

  .landing .navbar-toggler {
    flex: 0 0 auto;
  }

  .landing .navbar-collapse {
    flex-basis: 100%;
    max-width: 100%;
    padding-top: 0.75rem;
  }

  .landing .display-6,
  .landing h1 {
    font-size: 1.75rem;
    line-height: 1.25;
  }

  .landing h4 {
    font-size: 1.15rem;
    line-height: 1.4;
  }

  .landing .custom-footer {
    text-align: left;
  }
}