/* ── PawDee shared UI system ─────────────────────────────────────
   Standardized buttons, shadows, toast, skeleton loaders, a11y helpers.
   Load AFTER Tailwind CDN so utility classes still win when combined. */

:root {
  --pd-orange: #F97316;
  --pd-orange-deep: #EA580C;
  --pd-cream: #FFFBEB;
  --pd-shadow-sm: 0 1px 4px rgba(41,37,36,0.06);
  --pd-shadow-md: 0 4px 16px rgba(41,37,36,0.08);
  --pd-shadow-lg: 0 16px 48px rgba(249,115,22,0.14);
}

/* ── Buttons ── */
.pd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-weight: 700; font-size: 0.9rem; padding: 0.75rem 1.5rem;
  border-radius: 1rem; transition: transform .15s, box-shadow .15s, opacity .15s, background-color .15s;
  cursor: pointer; border: none; line-height: 1.2;
}
.pd-btn:active { transform: scale(0.98); }
.pd-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.pd-btn-primary { background: var(--pd-orange); color: white; box-shadow: var(--pd-shadow-md); }
.pd-btn-primary:hover:not(:disabled) { background: var(--pd-orange-deep); }
.pd-btn-secondary { background: white; color: #374151; border: 2px solid #e5e7eb; }
.pd-btn-secondary:hover:not(:disabled) { border-color: var(--pd-orange); color: var(--pd-orange); }
.pd-btn-danger { background: #DC2626; color: white; }
.pd-btn-danger:hover:not(:disabled) { background: #B91C1C; }

/* Loading spinner inside a button */
.pd-btn .pd-spin { width: 1em; height: 1em; border: 2px solid rgba(255,255,255,0.4); border-top-color: white; border-radius: 50%; animation: pd-spin 0.7s linear infinite; display: inline-block; }
.pd-btn-secondary .pd-spin { border-color: #d1d5db; border-top-color: var(--pd-orange); }
@keyframes pd-spin { to { transform: rotate(360deg); } }

/* ── Skeleton loader (context-aware, replaces bare spinners) ── */
.pd-skeleton { background: linear-gradient(90deg, #f3f4f6 25%, #eceae4 37%, #f3f4f6 63%); background-size: 400% 100%; animation: pd-shimmer 1.4s ease infinite; border-radius: 0.75rem; }
@keyframes pd-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.pd-skeleton-card { height: 96px; border-radius: 1.25rem; margin-bottom: 0.75rem; }
.pd-skeleton-text { height: 14px; border-radius: 6px; }

/* ── Required field marker ── */
.pd-required { color: #ef4444; margin-left: 2px; }

/* ── Horizontal scroll fade affordance ── */
.pd-scroll-fade { position: relative; }
.pd-scroll-fade::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
  background: linear-gradient(to right, transparent, var(--pd-scroll-fade-bg, #FFFBEB));
  pointer-events: none;
}
.pd-scroll-fade.pd-scroll-end::after { display: none; }

/* ── Toast notifications ── */
#pd-toast-root { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; padding: 0 1rem; pointer-events: none; }
.pd-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 0.6rem;
  background: #292524; color: white; font-size: 0.85rem; font-weight: 600;
  padding: 0.75rem 1.25rem; border-radius: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  max-width: 420px; animation: pd-toast-in 0.25s ease forwards;
}
.pd-toast.pd-toast-success { background: #16A34A; }
.pd-toast.pd-toast-error { background: #DC2626; }
.pd-toast.pd-toast-leave { animation: pd-toast-out 0.2s ease forwards; }
@keyframes pd-toast-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pd-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }

/* ── Focus visibility (keyboard nav accessibility) ── */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2.5px solid var(--pd-orange); outline-offset: 2px; border-radius: 4px;
}

/* ── Empty state (consistent tone across pages) ── */
.pd-empty { text-align: center; padding: 3.5rem 1rem; }
.pd-empty .pd-empty-icon { font-size: 2.75rem; margin-bottom: 0.75rem; }
.pd-empty .pd-empty-title { font-weight: 700; color: #57534e; margin-bottom: 0.35rem; }
.pd-empty .pd-empty-desc { font-size: 0.85rem; color: #a8a29e; margin-bottom: 1.25rem; }