/* contractor-crm-mobile.css - pass 9. Mobile fixes for website-examples CRM demos (Riverside / Clearline style). */
html { -webkit-text-size-adjust: 100%; }
.cnm-crm-app, .app { max-width: 100%; }
.cnm-crm-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(18,35,45,.5); z-index: 40;
}
body.cnm-crm-open .cnm-crm-backdrop { display: block; }
.cnm-crm-menu {
  display: none; min-height: 44px; min-width: 44px; padding: .55rem 1rem;
  border: 0; border-radius: 8px; background: #e85a1a; color: #fff; font-weight: 700; cursor: pointer;
}

@media (max-width: 900px) {
  .app, .cnm-crm-app {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  .app > .side, .cnm-crm-app > .side, aside.side {
    position: fixed !important; top: 0; left: 0; bottom: 0;
    width: min(280px, 88vw) !important; z-index: 50;
    transform: translateX(-105%); transition: transform .22s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  body.cnm-crm-open .app > .side,
  body.cnm-crm-open .cnm-crm-app > .side,
  body.cnm-crm-open aside.side {
    transform: translateX(0);
  }
  .cnm-crm-menu { display: inline-flex; align-items: center; justify-content: center; }
  .app > .main, .cnm-crm-app > .main, main.main {
    padding: 14px 14px 40px !important; width: 100%;
  }
  .metrics, .grid2, .hub-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .pipe {
    display: flex !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 10px; padding-bottom: 8px;
    grid-template-columns: none !important;
  }
  .pipe .col { flex: 0 0 min(78vw, 280px); min-height: 280px; }
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .btn, button.btn, a.btn { min-height: 44px; touch-action: manipulation; }
  input, select, textarea { font-size: 16px; max-width: 100%; }
  .top { align-items: stretch !important; }
  .top > div { width: 100%; }
  .drawer, .modal { width: min(100vw, 520px) !important; }
}

@media (max-width: 560px) {
  .metrics, .grid2 { grid-template-columns: 1fr !important; }
  .line { grid-template-columns: 1fr 1fr !important; }
}