/* ============================================================
   CBOzetuonline v3.0 — GLOBAL RESPONSIVE
   Loaded by all base templates. Fixes layout, tables, forms,
   and typography across every screen size.
   Mobile-first. Works with Bootstrap 4/5 and standalone pages.
   ============================================================ */

/* ── 1. Foundation ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-width: 0;      /* allow body to shrink below 320px if needed */
  overflow-x: hidden;
}

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

/* ── 2. Viewport-aware max-width containers ────────────────── */
/* Any element with a fixed max-width is made fluid on small screens */
[style*="max-width:1100px"],
[style*="max-width: 1100px"] { max-width: min(1100px, 100%) !important; width: 100% !important; }

[style*="max-width:900px"],
[style*="max-width: 900px"]  { max-width: min(900px,  100%) !important; width: 100% !important; }

[style*="max-width:760px"],
[style*="max-width: 760px"]  { max-width: min(760px,  100%) !important; width: 100% !important; }

[style*="max-width:740px"],
[style*="max-width: 740px"]  { max-width: min(740px,  100%) !important; width: 100% !important; }

[style*="max-width:700px"],
[style*="max-width: 700px"]  { max-width: min(700px,  100%) !important; width: 100% !important; }

[style*="max-width:680px"],
[style*="max-width: 680px"]  { max-width: min(680px,  100%) !important; width: 100% !important; }

[style*="max-width:640px"],
[style*="max-width: 640px"]  { max-width: min(640px,  100%) !important; width: 100% !important; }

[style*="max-width:520px"],
[style*="max-width: 520px"]  { max-width: min(520px,  100%) !important; width: 100% !important; }

[style*="max-width:480px"],
[style*="max-width: 480px"]  { max-width: min(480px,  100%) !important; width: 100% !important; }

[style*="max-width:440px"],
[style*="max-width: 440px"]  { max-width: min(440px,  100%) !important; width: 100% !important; }

[style*="max-width:420px"],
[style*="max-width: 420px"]  { max-width: min(420px,  100%) !important; width: 100% !important; }

/* Page wrappers that use margin:0 auto */
[style*="margin:32px auto"],
[style*="margin: 32px auto"],
[style*="margin:24px auto"],
[style*="margin: 24px auto"],
[style*="margin:0 auto"],
[style*="margin: 0 auto"] {
  padding-left: max(1rem, env(safe-area-inset-left))  !important;
  padding-right: max(1rem, env(safe-area-inset-right)) !important;
}

/* ── 3. Tables — universal scroll ─────────────────────────── */
table { width: 100%; border-collapse: collapse; }

/* Wrap any bare table in a scroll container */
.auto-table-wrap, .table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Minimum table width so columns never collapse below readability */
.table-responsive table,
.auto-table-wrap table {
  min-width: 480px;
}

/* Tables with very many columns need more space */
table[data-cols="7"], table[data-cols="8"],
table[data-cols="9"], table[data-cols="10"] {
  min-width: 640px;
}

/* ── 4. Forms ──────────────────────────────────────────────── */
input, select, textarea, button {
  max-width: 100%;
  font-size: max(16px, 1em);  /* prevents iOS auto-zoom on focus */
}

.form-control, .form-select {
  width: 100%;
  min-height: 44px;
}

textarea.form-control { min-height: 88px; }

/* Stack form rows on mobile */
@media (max-width: 767px) {
  .row > [class*="col-"]:not([class*="col-sm-"]):not([class*="col-xs-"]) {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* But allow cols that are explicitly small */
  .row > .col-sm-6, .row > .col-md-6, .row > .col-lg-6 { flex: 0 0 100%; max-width: 100%; }
  .row > .col-sm-4, .row > .col-md-4, .row > .col-lg-4 { flex: 0 0 100%; max-width: 100%; }
  .row > .col-sm-3, .row > .col-md-3, .row > .col-lg-3 { flex: 0 0 50%;  max-width: 50%;  }
}

/* ── 5. Buttons ────────────────────────────────────────────── */
.btn, button[type="submit"], input[type="submit"] {
  min-height: 44px;
  touch-action: manipulation;
}

@media (max-width: 575px) {
  /* Action groups: wrap and stretch */
  .btn-group-responsive .btn,
  .btn-toolbar .btn { margin-bottom: .35rem; }
}

/* ── 6. Sidebar layouts (common pattern across bases) ─────── */
.sidebar-wrapper, nav.sidebar, .side-nav {
  min-width: 0;
  flex-shrink: 0;
}

/* Fixed sidebar widths become fluid below 992px */
@media (max-width: 991px) {
  nav[style*="width:248px"],
  nav[style*="width: 248px"],
  nav[style*="width:245px"],
  nav[style*="width:240px"],
  nav[style*="width:220px"],
  nav[style*="width:210px"],
  .sidebar, .side-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 260px !important;
    height: 100vh !important;
    z-index: 9999 !important;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
  }

  .sidebar.open, .sidebar.active,
  .side-nav.open, .side-nav.active {
    transform: translateX(0) !important;
    box-shadow: 8px 0 32px rgba(0,0,0,.35);
  }

  /* Main panel takes full width when sidebar hidden */
  .main-panel, .page-content, main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Mobile overlay */
  .mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9998;
    backdrop-filter: blur(2px);
  }
  .mobile-overlay.active { display: block; }
}

/* ── 7. Top navbar ─────────────────────────────────────────── */
nav.navbar, .top-navbar, header.navbar {
  min-height: 56px;
  flex-wrap: nowrap;
}

.navbar-brand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }

/* Mobile hamburger */
.hamburger-btn {
  display: none;
  background: transparent;
  border: none;
  padding: .5rem;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 991px) { .hamburger-btn { display: flex; } }

/* ── 8. Cards ──────────────────────────────────────────────── */
.card { border-radius: 8px; overflow: hidden; }

.row.card-deck > .col-,
.row.card-deck > [class*="col-"] { margin-bottom: 1rem; }

/* Card grids */
.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

/* ── 9. Stats / metric rows ────────────────────────────────── */
.stats-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* ── 10. Modal & dialog ────────────────────────────────────── */
.modal-dialog {
  max-width: min(560px, calc(100vw - 2rem));
  margin: 1rem auto;
}

@media (max-width: 575px) {
  .modal-dialog { margin: .5rem; max-width: calc(100vw - 1rem); }
  .modal-content { border-radius: 8px; }
}

/* ── 11. Dropdown menus ────────────────────────────────────── */
.dropdown-menu {
  max-width: calc(100vw - 2rem);
  overflow-x: hidden;
}

@media (max-width: 575px) {
  .dropdown-menu-right, .dropdown-menu-end {
    left: 0 !important;
    right: auto !important;
  }
}

/* ── 12. Fixed pixel widths on common patterns ─────────────── */
/* Override the 768px breakpoints baked into some sidebars */
@media (max-width: 991px) {
  [style*="width:768px"], [style*="width: 768px"] { width: 100% !important; }
  [style*="min-width:210px"], [style*="min-width: 210px"] { min-width: 0 !important; }
  [style*="min-width:220px"], [style*="min-width: 220px"] { min-width: 0 !important; }
  [style*="width:320px"], [style*="width: 320px"] { width: 100% !important; max-width: 100% !important; }
}

@media (max-width: 575px) {
  [style*="width:560px"], [style*="width: 560px"],
  [style*="width:480px"], [style*="width: 480px"],
  [style*="width:440px"], [style*="width: 440px"],
  [style*="width:420px"], [style*="width: 420px"],
  [style*="width:400px"], [style*="width: 400px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── 13. Typography ────────────────────────────────────────── */
h1 { font-size: clamp(1.3rem,  4vw, 2rem); }
h2 { font-size: clamp(1.1rem,  3vw, 1.6rem); }
h3 { font-size: clamp(1rem,    2.5vw, 1.3rem); }
h4 { font-size: clamp(.95rem,  2vw, 1.1rem); }
p, li, td, th { font-size: clamp(.8rem, 1.8vw, 1rem); }

/* ── 14. Error pages ───────────────────────────────────────── */
.error-page { padding: 2rem 1rem; text-align: center; }

/* ── 15. Auth / login cards ────────────────────────────────── */
.auth-card, .login-card, .register-card {
  width: 100%;
  max-width: min(440px, calc(100vw - 2rem));
  margin: 0 auto;
}

/* ── 16. Viewport meta inject (for pages that miss it) ─────── */
/* JS handles this if the meta tag is missing */

/* ── 17. Scrollable overflow containers ────────────────────── */
[style*="overflow-y:auto"][style*="max-height"],
[style*="overflow-y: auto"][style*="max-height"] {
  -webkit-overflow-scrolling: touch;
}

/* Clamp max-height on mobile */
@media (max-width: 767px) {
  [style*="max-height:600px"], [style*="max-height: 600px"] { max-height: 40vh !important; }
  [style*="max-height:500px"], [style*="max-height: 500px"] { max-height: 35vh !important; }
  [style*="max-height:400px"], [style*="max-height: 400px"] { max-height: 30vh !important; }
  [style*="max-height:300px"], [style*="max-height: 300px"] { max-height: 25vh !important; }
}

/* ── 18. Safe area insets (notches, home indicators) ──────── */
body {
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── 19. Touch feedback ────────────────────────────────────── */
a, button, [role="button"], .btn {
  -webkit-tap-highlight-color: rgba(0,0,0,.08);
  touch-action: manipulation;
}

/* ── 20. Print base ────────────────────────────────────────── */
@media print {
  nav, aside, .sidebar, .navbar, footer, .no-print,
  .btn:not(.btn-print), [data-bs-toggle] { display: none !important; }
  body { padding: 0; }
  .container, .container-fluid { max-width: 100%; padding: 0; }
  table { min-width: auto !important; page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  .card { box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; }
}