/* Responsive interaction layer: desktop navigation and dense layouts remain
   visible, while touch devices receive larger controls and stacked content. */
button, .button, input, select { min-height: 44px; }
.nav-toggle { display: none; min-height: 42px; padding: 8px 14px; color: var(--brand); font-weight: 750; cursor: pointer; }
.role-badge { border-radius: 999px; background: #f0e5f5; color: var(--brand-dark); padding: 5px 9px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.admin-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.admin-actions form { margin: 0; }
.compact { min-height: 36px; padding: 6px 10px; font-size: .86rem; }
.danger-button { background: #fff; border-color: #e9a8a3; color: var(--danger); font-weight: 750; cursor: pointer; }
.danger-button:hover { background: #fee4e2; }
.switch-row { flex-direction: row; align-items: center; border: 1px solid var(--line); border-radius: 9px; padding: 12px; }
.switch-row input { width: 1.2rem; height: 1.2rem; min-height: auto; accent-color: var(--brand); }
.switch-row span { color: var(--ink); }
.admin-edit-card hr { width: 100%; border: 0; border-top: 1px solid var(--line); }
.recipient-warning { grid-column: 1 / -1; margin: 0; border: 1px solid #e8c87a; background: #fff7dd; color: #694d00; border-radius: 9px; padding: 12px; }
button:disabled { cursor: not-allowed; opacity: .55; }

@media (max-width: 820px) {
  .topbar { min-height: 64px; height: auto; padding-block: 12px; position: relative; align-items: center; }
  .brand { font-size: 1.05rem; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .topbar nav { display: none; position: absolute; z-index: 20; top: calc(100% + 1px); left: 12px; right: 12px; align-items: stretch; gap: 4px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
  .topbar nav.nav-open { display: flex; }
  .topbar nav a, .topbar nav .link-button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 9px 11px; border-radius: 8px; }
  .topbar nav a:hover, .topbar nav .link-button:hover { background: var(--bg); }
  .topbar nav .inline { width: 100%; }
  .topbar nav .role-badge { align-self: flex-start; margin: 5px 11px; }
  .container { width: 100%; padding: 24px 14px 56px; }
  .hero { margin-bottom: 20px; }
  .hero h1, .page-heading h1 { font-size: clamp(1.8rem, 9vw, 2.5rem); }
  .card { padding: 20px 16px; border-radius: 13px; }
  .form-grid, .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid { gap: 17px; }
  .wide { grid-column: auto; }
  .page-heading { flex-direction: column; align-items: stretch; gap: 14px; }
  .heading-actions { justify-content: flex-start; }
  .heading-actions .button, .heading-actions form, .heading-actions form button { flex: 1 1 auto; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .stats div { padding: 15px; }
  .filters { grid-template-columns: minmax(0, 1fr); }
  .filters button { width: 100%; }
  .ticket-row { display: grid; grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .row-meta { min-width: 0; text-align: left; }
  .checkbox-group { grid-template-columns: minmax(0, 1fr); }
  .check-option { min-height: 48px; }
  .sticky { position: static; }
  .admin-row { align-items: flex-start; flex-direction: column; }
  .admin-actions { width: 100%; justify-content: flex-start; }
  .admin-actions .button, .admin-actions form, .admin-actions form button { flex: 1 1 auto; }
  dl { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .heading-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .heading-actions .button, .heading-actions form button { width: 100%; }
}

@media (min-width: 1100px) {
  .container { padding-top: 52px; }
  .detail-grid { grid-template-columns: minmax(0, 2.15fr) minmax(320px, .85fr); gap: 28px; }
  .form-grid { padding: 34px; gap: 24px; }
}