/* Shared responsive hardening for CRM pages. */
html, body { max-width: 100%; }
.main, main, .content, .card, .card-body { min-width: 0; }
.table-wrap, .table-container { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
img, canvas, svg { max-width: 100%; }

.crm-menu-backdrop {
  display: none; position: fixed; inset: 0; z-index: 49;
  background: rgba(15, 23, 42, .48); backdrop-filter: blur(2px);
}
.crm-mobile-menu {
  display: none; width: 40px; height: 40px; align-items: center;
  justify-content: center; flex: 0 0 40px; border: 0; border-radius: 9px;
  background: #059669; color: #fff; font-size: 18px; cursor: pointer;
}

@media (max-width: 768px) {
  body { overflow-x: hidden !important; }
  .sidebar {
    width: min(280px, 86vw) !important; transform: translateX(-105%) !important;
    transition: transform .25s ease !important; z-index: 50 !important;
    box-shadow: 14px 0 35px rgba(15, 23, 42, .22);
  }
  .sidebar.open { transform: translateX(0) !important; }
  .sidebar.open ~ .crm-menu-backdrop, .crm-menu-backdrop.open { display: block; }
  .sidebar .sidebar-brand h1, .sidebar .sidebar-brand small { display: block !important; }
  .sidebar .menu-title { font-size: 10px !important; padding: 14px 14px 6px !important; text-align: left !important; }
  .sidebar .menu-item { justify-content: flex-start !important; padding: 10px 14px !important; font-size: 13px !important; gap: 12px !important; }
  .sidebar .menu-item i { width: 20px !important; font-size: 16px !important; }
  .main, main { margin-left: 0 !important; width: 100% !important; max-width: 100vw !important; }
  .crm-mobile-menu { display: inline-flex; }
  .menu-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
  .topbar { padding: 12px 15px !important; flex-wrap: wrap; }
  .topbar-actions { margin-left: auto; min-width: 0; }
  .user-info { display: none; }
  .content { width: 100%; max-width: 100vw; padding: 14px !important; }
  .stats, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .stat, .stat-card { min-width: 0; padding: 14px !important; }
  .stat-value { font-size: clamp(17px, 5vw, 22px) !important; overflow-wrap: anywhere; }
  .card-header { align-items: flex-start !important; padding: 15px !important; }
  .card-header > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
  .filters { padding: 12px 15px !important; }
  .search { flex-basis: 100%; min-width: 0 !important; }
  .sel { flex: 1 1 130px; min-width: 0 !important; max-width: 100%; }
  .btn { min-height: 40px; }
  .ibtn, .act { min-width: 40px !important; min-height: 40px !important; }
  table { width: max-content; min-width: 760px !important; }
}

@media (max-width: 420px) {
  .stats, .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .topbar h2 { font-size: 18px !important; }
  .topbar p { font-size: 11px !important; }
  .card-header .btn { padding: 9px 11px; }
}