/* Shared responsive rules, loaded after desktop console styles. */
.mobile-cell-value { display: contents; }
body:has(.overlay:not(.hidden)) { overflow: hidden; }
@media (max-width: 760px) {
  .global-header { padding-inline: 12px; gap: 8px; }
  .header-leading { min-width: 0; flex: 1; gap: 8px; }
  .brand { display: none; }
  .project-switcher { flex: 1; width: auto; min-width: 0; max-width: 240px; }
  .project-switcher-trigger { min-height: 44px; }
  .project-switcher-name { font-size: 14px; }
  .header-actions { flex-shrink: 0; }
  .icon-button, .dialog-header .icon-button { width: 44px; height: 44px; flex-shrink: 0; }
  .project-menu { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 80px); overflow-y: auto; }
  .sidebar { width: min(288px, calc(100vw - 48px)); padding-bottom: max(20px, env(safe-area-inset-bottom)); visibility: hidden; pointer-events: none; overscroll-behavior: contain; }
  .sidebar.open { visibility: visible; pointer-events: auto; }
  .nav-item, .subnav .nav-item { min-height: 44px; font-size: 14px; }
  .sidebar-footer { padding-top: 24px; }
  .main { padding: 84px 12px max(32px, env(safe-area-inset-bottom)); min-width: 0; }
  .topbar { margin-bottom: 20px; gap: 14px; }
  h1 { font-size: 24px; }
  .subtitle { font-size: 13px; line-height: 1.65; }
  .panel, .panel-header, .panel-actions, .form-grid, .field, .offering-card, .package-chip { min-width: 0; }
  .panel-header { padding: 16px; gap: 14px; }
  .panel-header h2 { font-size: 16px; }
  .panel-header p { font-size: 13px; }
  .panel-actions { flex-wrap: wrap; gap: 10px; }
  .panel-actions > *, .top-actions > * { max-width: 100%; min-width: 0; }
  .button, .button.small, .table-action, .custom-select-trigger { min-height: 44px; font-size: 14px; }
  .field input, .field textarea, .field select, .search input, #feedbackReplyText { font-size: 16px; }
  .field input, .field select, .search { min-height: 44px; }
  .environment-switch { display: flex; max-width: 100%; }
  .environment-switch button { min-height: 44px; }
  .table-wrap { padding: 12px; }
  table, tbody, .commerce-table, .profile-orders-table { width: 100%; min-width: 0; }
  tbody { gap: 12px; }
  tbody tr { border-radius: 10px; }
  table tbody td, .commerce-table tbody td, .profile-orders-table tbody td, [data-page="orders"] tbody td {
    display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: start;
    gap: 10px; padding: 11px 12px; border-top: 0; border-bottom: 1px solid var(--line);
    font-size: 14px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere;
  }
  table tbody td::before { grid-column: 1; grid-row: 1; font-size: 12px; font-weight: 500; line-height: 1.8; }
  table tbody td:last-child { border-bottom: 0; }
  table tbody td > .mobile-cell-value { display: block; grid-column: 2; min-width: 0; }
  table tbody td[colspan], table tbody td:not([data-label]) { display: block; }
  table tbody td[colspan]::before, table tbody td:not([data-label])::before { display: none; }
  .mobile-cell-value .text-button, .mobile-cell-value .customer-link { max-width: 100%; overflow-wrap: anywhere; line-height: 1.6; }
  .mobile-cell-value button { min-height: 36px; }
  .mobile-cell-value code, .mobile-cell-value small, .cell-secondary { font-size: 12px; }
  .mobile-cell-value .badge, .mobile-cell-value .state-chip { display: inline-block; max-width: 100%; white-space: normal; }
  .offering-card { padding: 16px; }
  .offering-card > .table-action { justify-self: stretch; }
  .offering-card h3 { line-height: 1.6; overflow-wrap: anywhere; }
  .package-chips { min-width: 0; flex-wrap: wrap; }
  .package-chip { max-width: 100%; }
  .overlay { padding: 8px; align-items: center; }
  .dialog, .wide-dialog, .customer-profile-dialog, .webhook-dialog {
    width: 100%; max-width: 100%; max-height: calc(100dvh - 16px); border-radius: 14px;
  }
  .dialog-header { padding: 14px 16px; gap: 8px; align-items: center; }
  .dialog-header > div { min-width: 0; }
  .dialog-header h2, .customer-profile-dialog h2 { margin-bottom: 0; max-width: 100%; font-size: 18px; overflow-wrap: anywhere; }
  .dialog-header p { margin-top: 6px; font-size: 13px; }
  .dialog-body, .customer-profile-content { padding: 16px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .dialog-footer { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); gap: 10px; flex-wrap: wrap; }
  .dialog-footer .button { flex: 1; }
  .form-grid, .webhook-dialog .form-grid, .profile-facts { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2 { grid-column: auto; }
  .section-title { align-items: stretch; flex-direction: column; gap: 12px; }
  .section-title > .button { align-self: flex-start; white-space: nowrap; }
  .package-block { padding: 52px 12px 12px; }
  .package-block .remove-package { min-height: 40px; padding-inline: 12px; top: 6px; right: 6px; }
  .check-item { min-width: 0; min-height: 52px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; }
  .check-item-copy strong { font-size: 13px; }
  .check-item-copy, .check-item-copy strong, .check-item code { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
  .check-item .state-chip { font-size: 11px; }
  .login-dialog { padding: 24px; overflow-y: auto; }
  .profile-facts dd, .feedback-content { font-size: 14px; }
  .feedback-images { gap: 10px; }
  .feedback-images img { width: 120px; height: 120px; }
  .feedback-message small { display: block; margin: 5px 0 0; }
  #feedbackReplyForm { padding-bottom: 8px; }
  #feedbackReplyForm > button { width: 100%; }
  .feedback-image-preview { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 12px; background: var(--panel); }
  .feedback-image-preview img { max-width: calc(100vw - 40px); max-height: calc(100dvh - 110px); }
  .toast { left: 12px; right: 12px; bottom: max(16px, env(safe-area-inset-bottom)); max-width: none; }
}
@media (max-width: 360px) {
  table tbody td, .commerce-table tbody td, .profile-orders-table tbody td, [data-page="orders"] tbody td { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; padding-inline: 10px; }
  .business-metrics article { padding: 16px 12px; }
  .business-metrics svg { display: none; }
  .business-metrics strong { font-size: 24px; }
  .check-item { grid-template-columns: 20px minmax(0, 1fr); }
  .check-item .state-chip { grid-column: 2; justify-self: start; }
}