/* ── Theme variables ── */
:root {
  --bg:        #f4f5f7;
  --surface:   #ffffff;
  --surface-2: #f9fafb;
  --border:    #e5e7eb;
  --text:      #111827;
  --muted:     #6b7280;
  --primary:   #2563eb;
  --primary-d: #1d4ed8;
  --primary-a: rgba(37, 99, 235, 0.12);
  --success:   #16a34a;
  --danger:    #dc2626;
  --warning:   #d97706;
  --urgent:    #fef2f2;
  --warn-bg:   #fffbeb;
  --shadow:    0 4px 12px rgba(0,0,0,0.06);
}

[data-theme="dark"] {
  --bg:        #0f172a;
  --surface:   #1e293b;
  --surface-2: #273449;
  --border:    #334155;
  --text:      #f1f5f9;
  --muted:     #94a3b8;
  --primary:   #3b82f6;
  --primary-d: #2563eb;
  --primary-a: rgba(59, 130, 246, 0.18);
  --success:   #22c55e;
  --danger:    #ef4444;
  --warning:   #f59e0b;
  --urgent:    #3f1d1d;
  --warn-bg:   #3a2a10;
  --shadow:    0 4px 14px rgba(0,0,0,0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0f172a;
    --surface:   #1e293b;
    --surface-2: #273449;
    --border:    #334155;
    --text:      #f1f5f9;
    --muted:     #94a3b8;
    --primary:   #3b82f6;
    --primary-d: #2563eb;
    --primary-a: rgba(59, 130, 246, 0.18);
    --success:   #22c55e;
    --danger:    #ef4444;
    --warning:   #f59e0b;
    --urgent:    #3f1d1d;
    --warn-bg:   #3a2a10;
    --shadow:    0 4px 14px rgba(0,0,0,0.4);
  }
}

/* ── Keyframe animations ── */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-6px); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes newArrival {
  0%   { background: var(--primary-a); transform: translateX(-12px); opacity: 0; }
  10%  { transform: translateX(0); opacity: 1; }
  90%  { background: var(--primary-a); }
  100% { background: var(--surface); }
}

/* Phase / features gate. Must beat Tailwind @apply display rules on .hs-item, .nav-btn, .page. */
.feature-hidden { display: none !important; }

/* Phase-1 preview mode (dogfood toggle). Outline + warning tint so the operator
   never forgets they're not seeing the real Phase-2 surface. */
.hs-item-active {
  background: var(--primary-a, #fef3c7) !important;
  border-color: var(--primary, #d97706) !important;
  color: var(--primary, #92400e) !important;
}

/* Users panel — pending request count badge */
.hs-item-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 9px;
  background: #ef4444;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.users-section { margin-bottom: 24px; }
.users-section-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 8px;
}
.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--surface);
}
.user-row .user-phone {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 0.85rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-row .user-meta { color: var(--muted); font-size: 0.75rem; }
.user-row .role-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.user-row .role-badge.owner  { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.user-row .role-badge.member { background: #dbeafe; color: #1e3a8a; border-color: #bfdbfe; }
.user-row .row-actions { display: flex; gap: 6px; }
.user-row button {
  font-size: 0.8rem;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
}
.user-row button.approve { background: #10b981; color: white; border-color: #10b981; }
.user-row button.approve:hover { background: #059669; }
.user-row button.reject { background: var(--surface); color: #ef4444; border-color: #fecaca; }
.user-row button.reject:hover { background: #fee2e2; }
.users-empty {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 12px;
  font-style: italic;
}