/**
 * Pampered Paws — Dashboard compat layer
 * Upgrades legacy .dash-* templates without rewriting markup.
 */

body {
  font-family: var(--pp-font);
  background: var(--pp-bg);
  color: var(--pp-ink);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pp-border-strong); border-radius: 10px; }

.dashboard-wrapper,
.staff-container {
  max-width: var(--pp-max-width);
  margin: 0 auto;
}

.pp-staff-dashboard-embed .staff-dashboard,
#pp-staff-dashboard-root .staff-dashboard,
#pp-customer-dashboard-root .dashboard-wrapper,
body > .staff-dashboard {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* Topbar polish */
.dash-topbar,
.staff-header {
  background: var(--pp-surface) !important;
  border: 1px solid var(--pp-border);
  box-shadow: var(--pp-shadow-sm) !important;
  border-radius: var(--pp-radius-lg) !important;
}

.dash-topbar-left h1,
.staff-header h1 {
  font-weight: 800 !important;
  letter-spacing: var(--pp-tracking-tight);
  color: var(--pp-ink) !important;
}

/* Nav tabs → brand green active state */
.dash-nav,
.staff-tabs {
  background: var(--pp-surface) !important;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg) !important;
  box-shadow: var(--pp-shadow-sm) !important;
}

.dash-nav-item.active,
.staff-tab.active,
.staff-tab-btn.active {
  background: linear-gradient(135deg, var(--pp-brand-500), var(--pp-brand-600)) !important;
  color: #fff !important;
  box-shadow: var(--pp-shadow-brand) !important;
}

.dash-nav-item:focus-visible,
.staff-tab:focus-visible {
  outline: none;
  box-shadow: var(--pp-focus-ring) !important;
}

/* Buttons */
.dash-btn-primary,
.staff-btn-primary,
.dog-btn-edit {
  background: linear-gradient(135deg, var(--pp-brand-500), var(--pp-brand-600)) !important;
  border: none !important;
  color: #fff !important;
}

.dash-btn-primary:hover,
.staff-btn-primary:hover {
  box-shadow: var(--pp-shadow-brand) !important;
  transform: translateY(-1px);
}

.dash-btn-ghost,
.staff-btn-secondary {
  border-color: var(--pp-border) !important;
  color: var(--pp-muted) !important;
}

/* Cards */
.dash-card,
.staff-card,
.dog-card {
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-lg) !important;
  box-shadow: var(--pp-shadow-sm) !important;
  transition: box-shadow var(--pp-duration) var(--pp-ease),
              transform var(--pp-duration) var(--pp-ease);
}

.dash-card:hover,
.dog-card:hover {
  box-shadow: var(--pp-shadow) !important;
}

/* Empty states — map to new system */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--pp-space-12) var(--pp-space-6);
  background: var(--pp-surface);
  border: 1px dashed var(--pp-border);
  border-radius: var(--pp-radius-lg);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--pp-space-4);
}

.empty-state-title {
  font-size: var(--pp-text-xl);
  font-weight: 700;
  color: var(--pp-ink);
  margin-bottom: var(--pp-space-2);
}

.empty-state-text {
  font-size: var(--pp-text-sm);
  color: var(--pp-muted);
  max-width: 28rem;
  margin-bottom: var(--pp-space-4);
}

/* Loading spinner upgrade */
.loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--pp-border);
  border-top-color: var(--pp-primary);
  border-radius: 50%;
  animation: pp-spin 0.75s linear infinite;
  margin: var(--pp-space-8) auto;
}

/* Modal upgrade */
.modal.active {
  backdrop-filter: blur(4px);
}

/* v4.1 — legacy modal overlays → sheet feel */
.pp-v4 .modal-overlay {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.pp-v4 .staff-dashboard .modal-overlay.active > .staff-modal-panel,
.pp-v4 #pp-staff-dashboard-root .modal-overlay.active > .staff-modal-panel {
  background: #fff !important;
}

.pp-v4 .modal {
  border-radius: var(--pp-radius-2xl) !important;
}

.modal-content,
.modal-box {
  border-radius: var(--pp-radius-xl) !important;
  box-shadow: var(--pp-shadow-lg) !important;
}

.pp-v4 .modal-content,
.pp-v4 .modal-box {
  border-radius: var(--pp-radius-2xl) !important;
  box-shadow: var(--pp-shadow-sheet) !important;
}

/* Notification badge */
.notification-badge {
  background: var(--pp-danger) !important;
}

/* Staff header gradient → clean surface on compat load */
.staff-header {
  background: var(--pp-surface) !important;
  color: var(--pp-ink) !important;
}

.staff-header p,
.staff-header .subtitle {
  color: var(--pp-muted) !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .dash-topbar,
  .staff-header {
    padding: var(--pp-space-4) !important;
  }
  .dash-nav-item,
  .staff-tab {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dash-card:hover,
  .dash-btn-primary:hover {
    transform: none !important;
  }
}

/* Shared dog placeholder icon */
.pp-dog-icon,
svg.dog-silhouette,
svg.staff-dog-sil,
img.pp-dog-placeholder,
img.dog-silhouette,
img.staff-dog-sil {
  flex-shrink: 0;
}

img.pp-dog-placeholder,
img.dog-silhouette,
img.staff-dog-sil {
  object-fit: contain;
  display: block;
  margin: 0 auto;
  opacity: 0.82;
}

.pp-dog-icon--sm,
.dog-silhouette.pp-dog-icon--sm,
.staff-dog-sil.pp-dog-icon--sm { transform: scale(0.82); transform-origin: center; }

.pp-dog-icon--lg,
.dog-silhouette.pp-dog-icon--lg,
.staff-dog-sil.pp-dog-icon--lg { transform: scale(1.12); transform-origin: center; }

.pp-dog-icon--xl,
.dog-silhouette.pp-dog-icon--xl,
.staff-dog-sil.pp-dog-icon--xl { transform: scale(1.28); transform-origin: center; }