/* ================================================= */
/* OSIBYTES: GLOBAL RESPONSIVE FLUID LAYOUT PATCH    */
/* ================================================= */

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

/* 1. Smash the Tailwind container limits */
.container {
    width: 100% !important;
    max-width: 98% !important; /* 1% margin on each side for breathing room */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* 2. Only stretch full-page content shells — keep dialog/card max-widths intact */
main .max-w-5xl, main .max-w-6xl, main .max-w-7xl, main .max-w-screen-xl {
    max-width: 100% !important;
}
dialog.max-w-4xl, dialog .max-w-4xl {
    max-width: min(56rem, 95vw) !important;
}

/* 3. Unlock hardcoded inline max-widths (e.g., footers) */
[style*="max-width: 1200px"], [style*="max-width:1200px"],
[style*="max-width: 1000px"], [style*="max-width:1000px"],
[style*="max-width: 800px"],  [style*="max-width:800px"] {
    max-width: 98% !important;
}

/* 4. Smart Grid scaling for Ultrawide Monitors */
@media (min-width: 1600px) {
    .container {
        max-width: 96% !important; 
    }
    /* Allow main content blocks to consume available space */
    .lg\:col-span-2 {
        grid-column: span 3 / span 3 !important; 
    }
    /* Scale widgets slightly up on huge screens */
    .ad-widget-container {
        max-width: 100% !important;
    }
}

/* 5. iPad / Tablet specific tweaks */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* 6. Fluid Tables and Images */
.admin-table, table {
    width: 100% !important;
    table-layout: auto;
}
.overflow-x-auto {
    width: 100%;
}
img, video, iframe {
    max-width: 100%;
}

/* ============================================================
   SALES CRM — RESPONSIVE HARDENING
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100vw; }
img, video, iframe, canvas { max-width: 100%; height: auto; }
main { min-width: 0; }
.table-scroll, .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
table { width: 100%; }

/* Global floating menu open (sidebar already off-canvas < lg) */
.osi-sales-burger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,0.35);
  background: #0f172a;
  color: #22d3ee;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  cursor: pointer;
}
@media (max-width: 1023.98px) {
  .osi-sales-burger { display: inline-flex !important; }
  main > .h-16, main > div.h-16 {
    padding-left: 56px !important;
    flex-wrap: wrap;
    height: auto !important;
    min-height: 4rem;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  main form, main .flex.gap-3 { flex-wrap: wrap; }
  main table { font-size: 0.8rem; }
  main th, main td { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  main .max-w-\[1400px\] { max-width: 100% !important; }
  main input, main select { font-size: 16px !important; }
}

@media (max-width: 640px) {
  main .p-6 { padding: 0.85rem !important; }
  main .w-40, main .w-64 { width: 100% !important; max-width: 100%; }
  main .hidden.sm\:block { /* keep search usable if toggled */ }
}

@media (min-width: 1400px) {
  main .max-w-\[1400px\] { max-width: min(1600px, 96%) !important; }
}
@media (min-width: 1800px) {
  main .max-w-\[1400px\] { max-width: min(1800px, 94%) !important; }
}