/* Customer form sizing: header/footer stay visible, only the form fields scroll. */
.modal-backdrop { padding: 18px; }
.customer-modal { width: min(760px, calc(100vw - 36px)); max-height: min(860px, calc(100dvh - 36px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; }
.customer-modal-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; scrollbar-width: thin; }
.customer-modal .modal-actions { flex: 0 0 auto; }
.customer-types { display: grid !important; grid-template-columns: repeat(7, minmax(76px, 1fr)); gap: 9px; }
.type-card { min-width: 0; min-height: 76px; padding: 8px 4px; text-align: center; }
.type-card span { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: #eef4ff; color: #2864e3; font-size: 15px; }
.type-card:has(input:checked) span { color: #fff; background: #2864e3; }

/* Mobile app-shell: touch-friendly off-canvas navigation. */
.sidebar-backdrop { display: none; }
@media (max-width: 720px) {
  .sidebar { width: min(286px, 82vw); padding: 18px 14px; box-shadow: 14px 0 40px rgba(2,16,37,.28); }
  .sidebar.open + .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 9; background: rgba(5,19,41,.46); backdrop-filter: blur(2px); }
  .main-nav { gap: 3px; }
  .nav-item { padding: 12px 13px; }
  .upgrade-card { display: none; }
  .profile-mini { margin-top: auto; }
  .topbar { min-height: 66px; height: auto; }
  .menu-toggle { width: 40px; height: 40px; border-radius: 10px; background: #eef4ff; color: #1d5ed9; font-size: 20px; }
  .search { margin: 0; min-width: 0; }
  .search input { font-size: 12px; }
  .page-head { align-items: flex-start; }
  .page-head .date-btn { padding: 9px; font-size: 11px; white-space: nowrap; }
  .metric { min-height: 118px; }
  .metric strong { font-size: 22px; }
  .card, .table-card { border-radius: 11px; }
  .table-card { overflow-x: auto; }
  .data-table { min-width: 670px; }
  .customer-modal { width: 100%; max-height: calc(100dvh - 18px); border-radius: 14px; }
  .modal-backdrop { padding: 9px; align-items: flex-end; }
  .customer-types { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .type-card { min-height: 58px; grid-template-columns: 28px 1fr; display: grid; justify-content: start; text-align: left; padding: 8px 11px; }
  .customer-modal-head { padding: 18px 18px 15px; }
  .customer-modal-body { padding: 17px 18px 22px; }
  .customer-modal .modal-actions { padding: 13px 18px; }
}