/* ─────────────────────────────────────────────────────────────
   كارواتس طلبات — Merchant web app
   Single-page vanilla JS app for merchants to manage orders.
   Reuses the brand variables from /assets/style.css.
   ───────────────────────────────────────────────────────────── */

body.merchant-app {
  background: var(--bg);
  min-height: 100vh;
  margin: 0;
  font-family: 'Cairo', sans-serif;
}

.boot-loader {
  min-height: 100vh;
  display: grid;
  place-items: center;
  gap: 14px;
}
.boot-loader img { width: 80px; height: 80px; border-radius: 16px; }
.boot-loader p { color: var(--text-secondary); }

/* ─────── Top bar ─────── */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-sm);
}
.app-bar .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}
.app-bar .brand img { width: 36px; height: 36px; border-radius: 9px; }
.app-bar .spacer { flex: 1; }
.app-bar .merchant-name {
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-surface);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
}
.app-bar button.icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 14px;
  transition: background-color 120ms;
}
.app-bar button.icon-btn:hover {
  background: var(--surface-variant);
  color: var(--text-primary);
}

/* ─────── Layout shell ─────── */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 65px);
}
.app-side {
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  padding: 24px 16px;
  position: sticky;
  top: 65px;
  height: calc(100vh - 65px);
  overflow-y: auto;
}
.app-side .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 4px;
  transition: background-color 120ms;
  text-decoration: none;
  font-size: 15px;
}
.app-side .nav-item:hover { background: var(--surface-variant); }
.app-side .nav-item.active {
  background: var(--primary);
  color: var(--on-primary);
}
.app-main {
  padding: 28px 32px 56px;
  overflow-x: hidden;
}

/* ─────── Login page ─────── */
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  width: 100%;
  max-width: 460px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}
.login-logo {
  text-align: center;
  margin-bottom: 28px;
}
.login-logo img {
  width: 160px;
  height: auto;
  margin: 0 auto;
  display: block;
}
.login-title {
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 6px;
}
.login-subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 28px;
}
.field {
  margin-bottom: 16px;
}
.field label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font: inherit;
  background: var(--surface-variant);
  font-size: 16px;
  text-align: start;
  direction: ltr;
}
.field input:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.field-error {
  color: var(--text-secondary);
  background: #FEE2E2;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 14px;
}
.btn-primary-wide {
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 120ms, transform 120ms;
}
.btn-primary-wide:hover { background: var(--primary-dark); }
.btn-primary-wide:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn-text {
  background: transparent;
  border: none;
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 8px;
}
.note {
  color: var(--text-tertiary);
  font-size: 13px;
  text-align: center;
  margin-top: 16px;
}

/* ─────── Filter chips ─────── */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.filter-chip {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 120ms;
}
.filter-chip:hover {
  background: var(--surface-variant);
}
.filter-chip.active {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.filter-chip .count {
  display: inline-block;
  margin-inline-start: 6px;
  background: rgba(0, 0, 0, 0.10);
  border-radius: 999px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
}
.filter-chip.active .count {
  background: rgba(255, 255, 255, 0.25);
}

/* ─────── Order list ─────── */
.orders-list {
  display: grid;
  gap: 12px;
}
.order-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color 120ms, box-shadow 120ms;
}
.order-card:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-sm);
}
.order-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.order-code {
  font-weight: 800;
  font-size: 16px;
}
.order-time {
  color: var(--text-tertiary);
  font-size: 13px;
}
.order-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--text-secondary);
  font-size: 14px;
}
.order-meta span { display: inline-flex; align-items: center; gap: 6px; }
.order-meta strong { color: var(--text-primary); font-weight: 700; }
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.status-pending_dispatch        { background: #FDF6E3; color: #6F5400; }
.status-driver_assigned         { background: #E1EDF7; color: #1A4068; }
.status-driver_arrived_pickup   { background: #FFF1E5; color: #993F00; }
.status-picked_up               { background: #FFF1E5; color: #993F00; }
.status-driver_arrived_dropoff  { background: #DCFCE7; color: #166534; }
.status-delivered               { background: #DCFCE7; color: #166534; }
.status-cancelled_by_merchant   { background: #FEE2E2; color: #991B1B; }
.status-cancelled_by_individual { background: #FEE2E2; color: #991B1B; }
.status-cancelled_by_driver     { background: #FEE2E2; color: #991B1B; }
.status-cancelled_by_admin      { background: #FEE2E2; color: #991B1B; }
.status-failed_delivery         { background: #FEE2E2; color: #991B1B; }
.status-no_driver_found         { background: #FEF3C7; color: #92400E; }

/* Pulse the card while a new order is still awaiting a driver — a
   gentle attention-grabber for a busy merchant who's flipping
   between this dashboard and other tasks. */
.order-card.is-new {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-surface);
  animation: pulse-new 1.6s ease-in-out 2;
}
@keyframes pulse-new {
  0%, 100% { box-shadow: 0 0 0 3px var(--primary-surface); }
  50%      { box-shadow: 0 0 0 8px var(--primary-surface); }
}

/* ─────── Empty / loading states ─────── */
.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-secondary);
}
.empty-state .icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.empty-state h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.center-spinner { text-align: center; padding: 64px 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─────── Order detail drawer ─────── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
  display: none;
}
.drawer-backdrop.open { display: block; }
.drawer {
  position: fixed;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  width: min(560px, 100%);
  background: var(--surface);
  z-index: 101;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 240ms ease;
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.18);
}
[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.open { transform: translateX(0); }
.drawer-head {
  position: sticky;
  top: 0;
  background: var(--surface);
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer-body {
  padding: 24px;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed var(--divider);
  font-size: 15px;
}
.detail-row:last-child { border-bottom: none; }
.detail-row .label { color: var(--text-secondary); }
.detail-row .value { font-weight: 700; }
.items-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  display: grid;
  gap: 8px;
}
.items-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-variant);
  border-radius: var(--radius-md);
  font-size: 14px;
}
.items-list .qty {
  color: var(--primary);
  font-weight: 800;
  margin-inline-end: 6px;
}
.drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.drawer-actions .btn-primary-wide { width: 100%; }

/* Neutral secondary action — used for print receipt + non-destructive
   buttons inside drawers and the settings panel. */
.btn-secondary-wide {
  width: 100%;
  padding: 14px;
  background: var(--surface-variant);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 120ms;
}
.btn-secondary-wide:hover { background: var(--primary-surface); }

/* Destructive action — reject / cancel order. Keeps the red treatment
   the previous .btn-secondary-wide had so muscle memory carries over. */
.btn-danger-wide {
  width: 100%;
  padding: 14px;
  background: transparent;
  color: var(--error, #DC2626);
  border: 1px solid var(--error, #DC2626);
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
}
.btn-danger-wide:hover { background: #FEE2E2; }

/* Settings panel widgets ---------------------------------------- */
.settings-section {
  margin-top: 24px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
}
.settings-section:first-child { margin-top: 0; }
.pill-toggle {
  background: var(--surface-variant);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.pill-toggle:hover { background: var(--primary-surface); }
.pill-toggle.on {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.pill-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.pill-status.ok  { background: #DCFCE7; color: #166534; }
.pill-status.off { background: #FEE2E2; color: #991B1B; }

/* ─────── Toast ─────── */
.toast {
  position: fixed;
  bottom: 24px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  z-index: 200;
  box-shadow: var(--shadow-md);
  animation: toast-in 200ms ease;
}
@keyframes toast-in {
  from { transform: translate(-50%, 16px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}

/* ─────── Page header (used by catalog + reports) ─────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 12px;
}
.page-header h2 {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
}
.btn-primary-pill {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 120ms;
}
.btn-primary-pill:hover { background: var(--primary-dark); }

/* ─────── Catalog grid ─────── */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.product-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.product-card:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.product-card.unavailable { opacity: 0.6; }
.product-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface-variant);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  overflow: hidden;
}
.product-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-photo.placeholder { color: var(--text-tertiary); }
.product-body { padding: 14px 16px 16px; }
.product-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-price {
  font-weight: 800;
  font-size: 16px;
  color: var(--primary);
  margin-bottom: 10px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.product-price .promo { color: var(--primary); }
.product-price .old {
  color: var(--text-tertiary);
  text-decoration: line-through;
  font-size: 13px;
  font-weight: 600;
}
.product-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.card-delete {
  position: absolute;
  top: 8px; inset-inline-start: 8px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 120ms, transform 120ms;
}
.card-delete:hover { background: #FEE2E2; transform: scale(1.05); }

/* ─────── Drawer field rows + photo picker ─────── */
.drawer-body .field { margin-bottom: 14px; }
.drawer-body .field input,
.drawer-body .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 15px;
  background: var(--surface-variant);
  text-align: start;
}
.drawer-body .field input:focus,
.drawer-body .field textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.drawer-body .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.drawer-body .field-row .field { margin-bottom: 0; }
.photo-picker { display: block; }
.photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 140px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 700;
  background: var(--surface-variant);
  transition: border-color 120ms, background-color 120ms;
}
.photo-empty:hover {
  border-color: var(--primary);
  background: var(--primary-surface);
  color: var(--primary);
}
.photo-preview {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-variant);
}
.photo-preview img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
}
.photo-preview .btn-text {
  position: absolute;
  top: 8px; inset-inline-start: 8px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
}

/* ─────── Reports stats grid ─────── */
.window-chips { display: flex; gap: 8px; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-icon { font-size: 24px; }
.stat-label {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}
.stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
}
.reports-section {
  margin-top: 8px;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}
.top-list {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}
.top-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.top-row img,
.top-row .product-photo.placeholder {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  font-size: 28px;
  aspect-ratio: 1;
}
.top-name { font-weight: 700; font-size: 15px; }
.top-units { color: var(--text-secondary); font-size: 14px; }
.top-revenue { color: var(--primary); font-weight: 800; font-size: 14px; }

/* ─────── Order create form ─────── */
.order-form, .settings-form {
  max-width: 760px;
}
.order-form h3.reports-section,
.settings-form h3.reports-section {
  margin-top: 24px;
  margin-bottom: 12px;
}
.order-form h3.reports-section:first-of-type,
.settings-form h3.reports-section:first-of-type {
  margin-top: 0;
}
.map-wrap {
  width: 100%;
  height: 280px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-variant);
  margin-bottom: 6px;
}

/* Item picker grid (manual order create) */
.order-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.order-item-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 120ms, box-shadow 120ms;
}
.order-item-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-surface);
}
.order-item-card .item-name {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}
.order-item-card .item-price {
  color: var(--primary);
  font-weight: 800;
  font-size: 14px;
}
.qty-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface-variant);
  border-radius: 999px;
  padding: 4px 6px;
}
.qty-stepper .stepper-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--text-primary);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-stepper .stepper-btn:hover:not(:disabled) {
  background: var(--primary);
  color: var(--on-primary);
}
.qty-stepper .stepper-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.qty-stepper .qty-num {
  font-weight: 800;
  font-size: 15px;
  min-width: 24px;
  text-align: center;
}

.order-total-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--primary-surface);
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-top: 14px;
  font-size: 15px;
}
.order-total-preview strong {
  color: var(--primary);
  font-size: 18px;
  font-weight: 800;
}

.pill-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─────── Onboarding (setup / register / claim) ─────── */
.app-main.onboarding {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 16px 56px;
}
.onboarding-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  padding: 36px 32px;
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.onboarding-card.wide { max-width: 760px; }
.onboarding-card h2 {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  text-align: center;
}
.onboarding-illu {
  font-size: 56px;
  text-align: center;
  margin-bottom: 4px;
}
.onboarding-sub {
  color: var(--text-secondary);
  text-align: center;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
}

/* Category picker (register) */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.category-pick {
  background: var(--surface-variant);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: start;
  transition: border-color 120ms, background-color 120ms, color 120ms;
}
.category-pick:hover { border-color: var(--primary-light); }
.category-pick.on {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.cat-icon { font-size: 18px; }

/* Claim search results */
.claim-results {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.claim-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  text-align: start;
  transition: border-color 120ms, transform 120ms;
}
.claim-row:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.claim-row .claim-name {
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 2px;
}
.claim-row .claim-addr {
  color: var(--text-secondary);
  font-size: 13px;
}
.claim-row .claim-arrow {
  color: var(--primary);
  font-weight: 800;
  font-size: 18px;
}
.claim-summary {
  background: var(--primary-surface);
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 12px;
}
.claim-summary .claim-name {
  font-weight: 800;
  font-size: 16px;
  color: var(--primary);
}
.claim-summary .claim-addr {
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 2px;
}

/* ─────── Integrations / API keys view ─────── */
.integrations-body { max-width: 820px; }

.integration-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.btn-secondary-pill {
  background: var(--surface);
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  padding: 9px 18px;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 120ms;
}
.btn-secondary-pill:hover {
  background: var(--primary-surface);
}

.api-key-reveal {
  background: var(--primary-surface);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin: 14px 0;
}
.api-key-reveal h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
}
.api-key-value {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}
.api-key-value code {
  flex: 1;
  background: var(--surface);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  word-break: break-all;
  border: 1px solid var(--border);
  user-select: all;
}
.api-key-value .btn-secondary-wide { width: auto; padding: 12px 18px; }

.api-keys-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.api-key-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 120ms;
}
.api-key-row:hover { border-color: var(--primary-light); }
.api-key-row.revoked {
  opacity: 0.55;
  background: var(--surface-variant);
}
.api-key-meta { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.api-key-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
}
.api-key-prefix {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--text-secondary);
}
.api-key-sub {
  font-size: 12px;
  color: var(--text-tertiary);
}

.code-block {
  background: #0f172a;
  color: #e2e8f0;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  direction: ltr;
  text-align: start;
  margin: 12px 0;
  white-space: pre;
}

.integration-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.integration-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.integration-tile .tile-icon { font-size: 28px; }
.integration-tile .tile-title { font-weight: 800; font-size: 14px; }
.integration-tile .tile-desc {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

/* ─────── Responsive ─────── */
@media (max-width: 880px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-side {
    position: static;
    height: auto;
    border-inline-end: none;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 4px;
    padding: 8px;
    overflow-x: auto;
  }
  .app-side .nav-item {
    flex-shrink: 0;
    padding: 8px 14px;
    margin-bottom: 0;
  }
  .app-main { padding: 18px 16px 48px; }
}

/* ─────── Web Push toggle bell ─────── */
/* Sits to the right of the spacer, just before the in-app bell.
   Two glyphs drive the visual state: 🔔 when subscribed (button
   tinted primary), 🔕 when not, ⌛ while a click is in flight. */
.push-bell-pocket {
  margin-inline-end: 8px;
}
.push-bell-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: #888;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
  transition: transform 120ms, background 120ms, color 120ms;
}
.push-bell-btn:hover { transform: translateY(-1px); }
.push-bell-btn:active { transform: translateY(0); }
.push-bell-btn:disabled { cursor: not-allowed; opacity: 0.6; }
.push-bell-btn.on {
  background: #FF6A00;
  color: #fff;
}
.push-bell-btn.blocked {
  background: rgba(255,255,255,0.85);
  color: #c33;
}

/* ─────── Notification bell + dropdown ─────── */
/* Sits in the app-bar between the spacer and the merchant name.
   Click toggles the dropdown; click outside closes (handled in JS). */
.bell-pocket {
  position: relative;
  margin-inline-end: 8px;
}
.bell-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: #FF6A00;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
  transition: transform 120ms, box-shadow 120ms;
}
.bell-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.15); }
.bell-btn:active { transform: translateY(0); }
.bell-btn.has-unread {
  animation: bell-shake 1.6s ease-in-out infinite;
}
@keyframes bell-shake {
  0%, 92%, 100% { transform: rotate(0deg); }
  93%   { transform: rotate(-12deg); }
  95%   { transform: rotate(10deg); }
  97%   { transform: rotate(-6deg); }
  99%   { transform: rotate(4deg); }
}
.bell-badge {
  position: absolute;
  top: -2px;
  inset-inline-end: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #DC2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  pointer-events: none;
}

/* Dropdown — anchored to the bell pocket. Pinned just below the
   app-bar so it doesn't overlap the bar's gradient. */
.notif-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: -4px;
  width: min(380px, calc(100vw - 32px));
  max-height: min(72vh, 560px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  direction: rtl;
  animation: dropdown-in 180ms ease-out;
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notif-head {
  padding: 12px 14px;
  border-bottom: 1px solid #F0EDE6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.notif-title { font-weight: 700; font-size: 14px; color: #222; }
.notif-actions { display: flex; gap: 6px; }
.notif-action {
  background: #FFF1E5;
  color: #FF6A00;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  cursor: pointer;
  font-weight: 600;
}
.notif-action.danger { background: #FEE2E2; color: #B91C1C; }
.notif-action[disabled] { opacity: 0.45; cursor: default; }

.notif-list {
  overflow-y: auto;
  flex: 1;
}
.notif-empty {
  padding: 36px 18px;
  text-align: center;
  color: #888;
  font-size: 13px;
}
.notif-row {
  width: 100%;
  background: #fff;
  border: none;
  border-bottom: 1px solid #F5F2EC;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 36px 1fr 8px;
  align-items: start;
  gap: 10px;
  cursor: pointer;
  text-align: start;
  transition: background 120ms;
}
.notif-row:hover { background: #FFFAF3; }
.notif-row.unread { background: #FFF7EE; }
.notif-row.unread:hover { background: #FFF1DF; }
.notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #FFE4CC;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.notif-row.unread .notif-icon { background: #FFD3AB; }
.notif-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.notif-row-title {
  font-weight: 700;
  font-size: 13px;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-row.read .notif-row-title { color: #555; font-weight: 500; }
.notif-row-msg {
  font-size: 12px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-row-time {
  font-size: 10.5px;
  color: #999;
}
.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF6A00;
  margin-top: 8px;
}