/* ========================================
   Pup File — Dashboard Styles
   ======================================== */

/* --- Dashboard Layout --- */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
}

.dashboard-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dashboard-content {
  flex: 1;
  padding: var(--space-5);
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

/* --- Desktop Sidebar (Dashboard) --- */
.dash-sidebar {
  width: 240px;
  border-right: 1px solid var(--border-color);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.dash-sidebar-header {
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dash-sidebar-logo {
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dash-sidebar-logo .logo-mark {
  width: 24px;
  height: 24px;
  background: var(--orange-600);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
}

.dash-sidebar-nav {
  padding: var(--space-3);
  flex: 1;
}

.dash-sidebar-nav .nav-section-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 20px 12px 4px;
  pointer-events: none;
}

.dash-sidebar-nav .nav-section-label:first-child {
  padding-top: 4px;
}

.dash-sidebar-nav a,
.dash-sidebar-nav button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  margin-bottom: 2px;
  text-align: left;
}

.dash-sidebar-nav a:hover,
.dash-sidebar-nav button:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.dash-sidebar-nav a.active {
  background: var(--orange-50);
  color: var(--orange-600);
}
[data-theme="dark"] .dash-sidebar-nav a.active {
  background: rgba(249,115,22,0.1);
  color: var(--orange-400);
}

.dash-sidebar-nav svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.dash-sidebar-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--border-color);
}

.user-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--orange-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.user-info {
  min-width: 0;
}
.user-info .user-name {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-info .user-tier {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: capitalize;
}

/* --- Pet Selector --- */
.pet-selector {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.pet-selector select {
  flex: 1;
  padding: 8px 36px 8px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--text-primary);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

/* --- Timeline --- */
.timeline {
  padding: 0;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  position: relative;
  animation: slideUp 0.3s ease both;
}

.timeline-item:nth-child(1) { animation-delay: 0.02s; }
.timeline-item:nth-child(2) { animation-delay: 0.06s; }
.timeline-item:nth-child(3) { animation-delay: 0.10s; }
.timeline-item:nth-child(4) { animation-delay: 0.14s; }
.timeline-item:nth-child(5) { animation-delay: 0.18s; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.timeline-header h2 {
  font-size: 0.95rem;
  font-weight: 600;
}

.timeline-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.timeline-group {
  margin-bottom: var(--space-5);
}

.timeline-group-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
  padding-left: var(--space-8);
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  position: relative;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 38px;
  bottom: -12px;
  width: 1px;
  background: var(--border-color);
}

.timeline-item:last-child::before {
  display: none;
}

.timeline-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.timeline-icon.meal { background: #FEF3C7; border-color: #FDE68A; }
.timeline-icon.medication { background: #DBEAFE; border-color: #BFDBFE; }
.timeline-icon.bathroom { background: #D1FAE5; border-color: #A7F3D0; }
.timeline-icon.custom { background: var(--orange-50); border-color: var(--orange-200); }

[data-theme="dark"] .timeline-icon.meal { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.25); }
[data-theme="dark"] .timeline-icon.medication { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.25); }
[data-theme="dark"] .timeline-icon.bathroom { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.25); }
[data-theme="dark"] .timeline-icon.custom { background: rgba(249,115,22,0.15); border-color: rgba(249,115,22,0.25); }

.timeline-body {
  flex: 1;
  min-width: 0;
}

.timeline-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.timeline-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.timeline-title-row .timeline-title {
  flex: 1;
  min-width: 0;
}

.sitter-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 500;
  padding: 2px 6px;
  background: var(--orange-100);
  color: var(--orange-700);
  border-radius: var(--radius-full);
  margin-left: 6px;
  vertical-align: middle;
}
[data-theme="dark"] .sitter-badge {
  background: rgba(249,115,22,0.2);
  color: var(--orange-400);
}

.timeline-notes {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 2px;
}

.timeline-time {
  font-size: 0.65rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin-left: 8px;
}

.timeline-actions {
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.timeline-item:hover .timeline-actions { opacity: 1; }

.timeline-actions button {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all var(--transition-fast);
}
.timeline-actions button:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.timeline-actions button svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* --- Quick Actions --- */
.quick-actions {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  overflow-x: auto;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  white-space: nowrap;
  cursor: pointer;
}

.quick-action-btn:hover {
  border-color: var(--orange-400);
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.quick-action-btn .qa-icon {
  font-size: 0.9rem;
}

/* --- QR Section --- */
.qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8) var(--space-4);
}

.qr-canvas-wrap {
  background: #fff;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-md);
}

.qr-url {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: var(--space-3);
  text-align: center;
  word-break: break-all;
}

/* --- Subscription Cards --- */
.pricing-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--bg-secondary);
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.pricing-card.featured {
  border-color: var(--orange-500);
  box-shadow: 0 0 0 1px var(--orange-500);
}

.pricing-card .plan-name {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.pricing-card .plan-price {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-1);
}

.pricing-card .plan-price span {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
}

.pricing-card .plan-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.pricing-card .plan-features {
  margin-bottom: var(--space-5);
}

.pricing-card .plan-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 4px 0;
}

.pricing-card .plan-features li svg {
  width: 16px;
  height: 16px;
  stroke: var(--orange-500);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  margin-top: 1px;
}

/* --- Tab Content --- */
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

/* --- Lock Overlay --- */
.lock-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lock-overlay svg {
  width: 28px;
  height: 28px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 1.5;
  margin-bottom: var(--space-3);
}

.lock-overlay p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  text-align: center;
}

/* --- Sitter Link --- */
.sitter-link-box {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 0.8rem;
  color: var(--text-secondary);
  word-break: break-all;
  box-shadow: var(--shadow-sm);
}

.sitter-link-box input {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-primary);
  background: none;
  border: none;
  outline: none;
}

/* --- AI Report --- */
.ai-report {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-wrap;
}
.ai-report h2 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 16px 0 8px; }
.ai-report h2:first-child { margin-top: 0; }
.ai-report h3 { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin: 12px 0 6px; }
.ai-report strong { color: var(--text-primary); }
.ai-report ul, .ai-report ol { margin: 8px 0; padding-left: 20px; }
.ai-report li { margin: 4px 0; }
.ai-report p { margin: 8px 0; }

/* --- Bottom Nav (Mobile) --- */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
}

.bottom-nav-inner {
  display: flex;
  justify-content: space-around;
}

.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

.bottom-nav a.active {
  color: var(--orange-600);
}

.bottom-nav a svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* --- Responsive Dashboard --- */
@media (max-width: 768px) {
  .dash-sidebar {
    display: none;
  }

  .bottom-nav {
    display: block;
  }

  .dashboard-content {
    padding: var(--space-4);
    padding-bottom: 80px;
  }

  .pet-selector {
    padding: var(--space-3);
  }
}

@media (min-width: 769px) {
  .mobile-header { display: none; }
}

/* --- Sitter Wizard Steps --- */
.sitter-wizard-step { display:flex; flex-direction:column; gap:14px; }
.sitter-wizard-step[style*="display:none"] { display:none !important; }
#sitter-wizard-steps { display:flex; justify-content:center; gap:8px; margin-bottom:16px; }
#sitter-wizard-steps .step-dot { width:8px; height:8px; border-radius:50%; background:var(--border-color); transition:background 0.2s; flex:none; }
#sitter-wizard-steps .step-dot.active { background:var(--orange-500); }
#sitter-wizard-steps .step-dot.done { background:var(--orange-300); }

/* --- Sitter Notifications --- */
.sitter-notif { display:flex; gap:10px; padding:12px; background:var(--bg-tertiary); border-radius:var(--radius-md); margin-bottom:8px; border-left:3px solid var(--orange-500); }
.sitter-notif-icon { flex-shrink:0; width:20px; height:20px; color:var(--orange-500); }
.sitter-notif-content { flex:1; }
.sitter-notif-title { font-size:0.85rem; font-weight:600; }
.sitter-notif-msg { font-size:0.78rem; color:var(--text-secondary); }

/* --- Active Sitter Link Card --- */
.sitter-link-card { background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:12px 16px; margin-bottom:8px; }
.sitter-link-card .slc-top { display:flex; justify-content:space-between; align-items:start; margin-bottom:6px; }
.sitter-link-card .slc-name { font-weight:600; font-size:0.85rem; }
.sitter-link-card .slc-label { font-size:0.78rem; color:var(--text-muted); }
.sitter-link-card .slc-expiry { font-size:0.75rem; color:var(--text-muted); }
.sitter-link-card .slc-actions { display:flex; gap:6px; margin-top:6px; }

/* --- Food Inventory --- */
.inventory-card { border:1px solid var(--border-color); }
.inventory-card:hover { border-color: var(--orange-200); }
.inv-category-badge { text-transform:capitalize; }
.inv-low-badge { animation: pulse-badge 2s infinite; }
@keyframes pulse-badge { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
.inv-progress-bar { width:100%; }
.inv-card-bottom { font-size:0.78rem; }
.inv-actions { display:flex; gap:4px; }
#inventory-low-stock-warning { animation: slideDown 0.3s ease; }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* --- Weight Tracking --- */
.weight-card { border:1px solid var(--border-color); }
.weight-card:hover { border-color: var(--orange-200); }
.weight-value-badge { box-shadow:0 2px 6px rgba(249,115,22,0.15); }
.weight-card-left { display:flex; align-items:center; gap:16px; }
#weight-chart-container { overflow:hidden; }

/* --- Vet Records --- */
.vetrecord-card { border:1px solid var(--border-color); }
.vetrecord-card:hover { border-color: var(--orange-200); }
.vr-type-badge { text-transform:capitalize; }
.vr-actions { display:flex; gap:4px; }

/* --- Stat Cards (shared) --- */
.stat-card { background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:var(--radius-lg); }
.stat-card:hover { border-color: var(--orange-200); }