/* Responsive layout overrides only — colors, fonts, and visual style unchanged */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.main-content,
.container-fluid,
.card,
.card-body,
.newform,
.row {
  max-width: 100%;
}

/* Tables: allow horizontal scroll instead of breaking the page */
.table-responsive,
.bill-tables-wrapper,
.dataTables_wrapper,
.card-body.px-0 {
  max-width: 100%;
}

table.display,
table.dataTable,
table#example,
table#Accounts {
  max-width: 100%;
}

.dt-scroll {
  width: 100%;
  flex: 0 0 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#sidenav-main.bg-gradient-dark {
  background-color: #1E4B59 !important;
  background-image: none !important;
}

#sidenav-main .nav-link.active.bg-gradient-primary {
  background-image: none !important;
  background-color: rgba(255, 255, 255, 0.18) !important;
}

#sidenav-main .dropdown-menu {
  background-color: #163A45 !important;
}

/* Sidebar: scroll as one column on all sizes (incl. short laptop height) */
#sidenav-main {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Override theme calc(100vh - 360px) that assumed an absolute footer */
#sidenav-main #sidenav-collapse-main,
#sidenav-main.navbar-vertical .navbar-collapse {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

#sidenav-main .navbar-nav {
  margin-right: 0 !important;
}

#sidenav-main .navbar-nav > .nav-item {
  margin-top: 0 !important;
}

/* Dropdown triggers were wrapped in col-5 (~40% width) and wrapped badly */
#sidenav-main .navbar-nav > .nav-item > [class*="col-"] {
  flex: 0 0 100%;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

#sidenav-main .navbar-nav > .nav-item .dropdown {
  padding: 0 !important;
}

#sidenav-main .navbar-nav > .nav-item .dropdown > a.cursor-pointer {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100% !important;
  padding: 0.55rem 1rem !important;
  margin: 0 !important;
  white-space: nowrap;
  float: none !important;
}

#sidenav-main .navbar-nav > .nav-item .dropdown > a.cursor-pointer > i {
  margin: 0 !important;
}

#sidenav-main .dropdown-menu {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  width: calc(100% - 1rem) !important;
  max-width: none !important;
  margin: 0.25rem 0.5rem !important;
}

/* Theme keeps closed menus display:block with opacity 0, which leaves gaps once they are static */
#sidenav-main .dropdown-menu:not(.show) {
  display: none !important;
}

#sidenav-main .dropdown-menu.show {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin-top: 0.25rem !important;
}

#sidenav-main .dropdown-menu:before {
  display: none !important;
}

#sidenav-main .dropdown-menu .dropdown-item {
  white-space: normal !important;
}

#sidenav-main .sidenav-footer {
  position: static !important;
  height: auto !important;
  margin: 0.5rem 0 1rem !important;
}

#sidenav-main .sidenav-footer #indexbutton1 {
  width: 100% !important;
  margin: 0.5rem 0 0 !important;
  justify-content: center;
  text-align: center;
}

#sidenav-main a.cursor-pointer[style*="width"] {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}

main.main-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-bottom: 0;
}

.main-content > .fixed_footer {
  position: relative;
  margin: auto 0 0 !important;
  width: 100%;
}

.dataTables_wrapper > .dataTables_scroll {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

.dataTables_scroll table.dataTable {
  max-width: none;
}

@media (max-width: 991.98px) {
  .dt-scroll table.dataTable th,
  .dt-scroll table.dataTable td {
    white-space: nowrap;
  }
}

/* =========================
   Large tablets / small laptops
   ========================= */
@media (max-width: 1199.98px) {
  .dropdown-container {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
  }

  #indexbutton1 {
    width: 100% !important;
    max-width: 210px;
    margin-right: 0 !important;
  }

  .fixed_footer {
    margin-right: 0 !important;
    width: 100% !important;
  }

  .navbar.navbar-main {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
  }

  /* Ensure main content uses full width when sidenav is off-canvas */
  .sidenav.fixed-start + .main-content,
  .main-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Keep the sidenav colour when the mobile menu is open */
  #sidenav-main.bg-gradient-dark.bg-white {
    background-color: #1E4B59 !important;
    background-image: none !important;
  }

  #sidenav-main .navbar-brand .text-white,
  #sidenav-main .nav-link.text-white {
    color: #fff !important;
  }

  #sidenav-main {
    max-width: 100vw;
  }
}

/* =========================
   Tablets
   ========================= */
@media (max-width: 991.98px) {
  .dataTables_wrapper {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .dataTables_filter {
    margin-right: 0 !important;
    width: 100%;
  }

  .toolbar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
  }

  .Fillter {
    height: auto !important;
    margin-bottom: 1.5rem !important;
    gap: 0.75rem;
    width: 100%;
  }

  .Fillter > * {
    max-width: 100%;
  }

  /* Form fields that use float + fixed % widths */
  .input-group {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .newform {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .EditControl {
    width: auto !important;
    min-width: 140px;
    max-width: 90%;
    position: relative !important;
    margin-top: 0.5rem !important;
  }

  /* Custom modals used across bill/account pages */
  .modal {
    width: 94% !important;
    max-width: 94% !important;
    height: auto !important;
    max-height: 85vh;
    margin-left: 3% !important;
    margin-right: 3% !important;
    overflow: auto !important;
  }

  .modal-content {
    width: 100% !important;
  }

  /* Report filter columns with inline fixed widths */
  .row > [class*="col-"][style*="width"] {
    width: 48% !important;
    max-width: 48% !important;
    flex: 0 0 48%;
  }

  .tablink {
    width: 33.33% !important;
    margin-right: 0 !important;
    float: none !important;
  }

  .dropdown-menu {
    max-width: min(300px, 90vw) !important;
  }

  /* DataTables toolbar create buttons */
  #createbutton1,
  [id^="createbutton"] {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0.25rem 0 !important;
  }

  .bill-tables-wrapper {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    overflow-x: auto !important;
  }

  .bill-form-actions .input-group {
    max-width: 100% !important;
  }

  /*
   * Clamp containers that used widths > 100% (115%, 125%, 130%, 150%, 175%, etc.)
   * Attribute selectors catch both "width:115%" and "width: 115%"
   */
  .row[style*="width"],
  .table-responsive[style*="width"],
  .container-fluid .row[style*="width"],
  div[style*="width: 102%"],
  div[style*="width:102%"],
  div[style*="width: 114%"],
  div[style*="width:114%"],
  div[style*="width: 115%"],
  div[style*="width:115%"],
  div[style*="width: 121%"],
  div[style*="width:121%"],
  div[style*="width: 125%"],
  div[style*="width:125%"],
  div[style*="width: 130%"],
  div[style*="width:130%"],
  div[style*="width: 150%"],
  div[style*="width:150%"],
  div[style*="width: 175%"],
  div[style*="width:175%"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    float: none !important;
  }

  /* Report / log print-style body sections */
  .body-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 12px !important;
  }

  .registerbtn {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  img[style*="width:300"],
  img[style*="width: 300"] {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
  }

  select[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Inline side margins used to “center” form fields on desktop */
  [style*="margin-right:30%"],
  [style*="margin-right: 30%"],
  [style*="margin-right:10%"],
  [style*="margin-right: 10%"] {
    margin-right: 0 !important;
  }

  .input-group-outline[style*="width: 40%"],
  .input-group-outline[style*="width:40%"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  input[type="date"][style*="width"],
  input[type="text"][style*="width: 175"],
  input[type="text"][style*="width:175"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* =========================
   Phones / small tablets
   ========================= */
@media (max-width: 767.98px) {
  .container-fluid.py-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .navbar.navbar-main {
    height: auto !important;
    min-height: 50px;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }

  .card-header h5,
  .card-header .text-white {
    font-size: 1rem;
    margin-right: 0.5rem !important;
  }

  .row > [class*="col-"][style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100%;
    margin-top: 0.5rem !important;
  }

  .tablink {
    width: 100% !important;
    margin: 0.25rem 0 !important;
  }

  .tablink {
    float: none !important;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    width: 100% !important;
    text-align: center !important;
    float: none !important;
    margin: 0.5rem 0 !important;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Keep wide tables usable via horizontal scroll on the wrapper */
  .dataTables_wrapper,
  .card .card-body,
  .bill-tables-wrapper,
  .bill-tables-wrapper .table-responsive,
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .table:not(.dataTable) {
    width: 100% !important;
  }

  .sidenav-footer #indexbutton1 {
    width: 90% !important;
    margin: 0.5rem auto !important;
  }

  .sidenav-footer #indexbutton1 a {
    margin-right: 0 !important;
  }

  button[style*="background-image: url"],
  button[style*="background-image:url"] {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    position: static !important;
    margin: 0.5rem auto !important;
    display: block;
  }

  .footer.fixed_footer {
    position: relative !important;
    width: 100% !important;
    margin: auto 0 0 !important;
  }

  /* Nested rows floated wider than viewport */
  .row[style*="float"],
  div.row[style*="margin-right: -"] {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    float: none !important;
  }

  .input-group-outline[style*="margin-right: 30%"],
  .input-group-outline[style*="width: 40%"],
  div[style*="width:40%"],
  div[style*="width: 40%"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    float: none !important;
  }
}

/* =========================
   Small phones
   ========================= */
@media (max-width: 575.98px) {
  .container-fluid.py-4 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 1rem !important;
  }

  .card.my-4 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .card-header.p-0.mx-3 {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
  }

  .btn,
  .btn-custon-four {
    white-space: normal;
  }

  .modal {
    width: 98% !important;
    max-width: 98% !important;
    margin-left: 1% !important;
    margin-right: 1% !important;
    padding-top: 1rem !important;
  }

  .login,
  .screen {
    width: 100% !important;
    max-width: 100%;
  }

  .heading {
    font-size: 1.35rem !important;
  }
}