/* ============================================================
   KO-OP KASH — Global Responsiveness Enhancements
   Keeps existing layout intact while adapting to small screens.
   ============================================================ */

/* ===== Sidebar toggle for mobile ===== */
@media (max-width: 768px) {
  #sidebar {
    display: none !important;
  }
#sidebar.open {
  display: block !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  z-index: 50;
  /* background: #fff; */
  background: #f9fafb !important;
  color: #111 !important; /* ✅ ensures sidebar text is visible */
  overflow-y: auto;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  padding: 1rem;
}

#sidebar {
  transition: transform 0.3s ease-in-out;
  transform: translateX(-100%);
}

#sidebar.open {
  transform: translateX(0);
}

#sidebar.open::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: -1;
}



}

/* ===== General padding adjustments ===== */
@media (max-width: 768px) {
  main,
  .p-6,
  .p-5,
  .p-4 {
    padding: 1rem !important;
  }
  h1,
  h2,
  h3 {
    font-size: 1.1rem !important;
  }
}

/* ===== Tables: horizontal scroll ===== */
.table-responsive,
.overflow-x-auto {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100% !important;
}

/* ===== QR containers / images ===== */
#qrContainer,
#walletQR,
#qr,
.qr-wrapper img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* ===== Buttons ===== */
button,
.btn {
  white-space: normal !important;
  word-break: break-word !important;
}

/* ===== Fix long wallet addresses ===== */
#walletAddress,
code,
pre {
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* ===== Modals & alerts fit small screens ===== */
.modal-dialog {
  max-width: 95% !important;
  margin: auto !important;
}