/* ============================================================
   dashboard.css — Page-specific styles for index.html
   All foundation tokens come from variables.css.
   All base layout comes from base.css.
   All shared components come from components.css.
   This file only adds what is unique to the dashboard page.
   ============================================================ */

/* ── Page header overrides for dashboard ─────────────────── */

.dash-title {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--gold);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.dash-subtitle {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}

.dash-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  /* .avatar class from components.css provides border-radius + border */
}

/* ── Stats grid ───────────────────────────────────────────── */

/* Use 2-col on mobile, 4-col on desktop — matches mockup exactly */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

@media (min-width: 769px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
  }
}

/* ── Stat card overrides ──────────────────────────────────── */
/* .stat-card, .stat-card-value, .stat-card-label, .stat-card-icon
   are all defined in components.css — we only extend here. */

.stat-card {
  /* Hover lift */
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  cursor: default;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
  border-color: var(--gold);
}

/* Gold value variant — used by Revenue Today card */
.stat-card-value--gold {
  color: var(--gold);
}

/* Icon colour variant for warning (Errors/hr) */
.stat-card-icon--warning {
  color: var(--warning);
}

/* Online Now — subtle green pulse on the icon */
.stat-card-icon--pulse {
  position: relative;
}

.stat-card-icon--pulse::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ── Skeleton loading animation ──────────────────────────── */

.skeleton {
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  color: transparent !important;
  animation: shimmer 1.6s ease-in-out infinite;
  user-select: none;
  pointer-events: none;
}

/* Override stat-card-value and stat-card-label when skeleton */
.stat-card .stat-card-value.skeleton {
  width: 60%;
  height: 32px;
  display: block;
}

.stat-card .stat-card-value--gold.skeleton {
  /* Revenue card is never skeleton — it's manual */
  display: none;
}

@keyframes shimmer {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Section header ───────────────────────────────────────── */

.dash-section-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

/* ── Activity card container ──────────────────────────────── */

.activity-card {
  background: var(--bg-card);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}

.activity-empty {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ── Activity rows ────────────────────────────────────────── */

.activity-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-neutral);
  transition: background var(--transition-fast);
}

.activity-row:last-child {
  border-bottom: none;
}

.activity-row:hover {
  background: var(--bg-card-hover);
}

.activity-row.skeleton-row {
  pointer-events: none;
}

/* Coloured dot */
.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.activity-dot--green { background: var(--success); }
.activity-dot--blue  { background: var(--info); }
.activity-dot--red   { background: var(--danger); }
.activity-dot--gold  { background: var(--gold); }
.activity-dot--warn  { background: var(--warning); }

/* Row icon */
.activity-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-secondary);
}

/* Row text */
.activity-text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Row time */
.activity-time {
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Quick Actions row ────────────────────────────────────── */

.quick-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.quick-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: transparent;
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-pill);
  color: var(--gold);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.quick-action-btn:hover {
  background: var(--gold-glow);
  box-shadow: var(--shadow-gold);
  border-color: var(--gold);
}

.quick-action-btn:active {
  transform: scale(0.97);
}

/* ── Mobile-specific page content padding ─────────────────── */

@media (max-width: 768px) {
  .page-content {
    padding: var(--sp-4);
  }

  .stats-grid {
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
  }

  .stat-card-value {
    font-size: var(--text-xl);
  }

  .quick-actions-row {
    gap: var(--sp-2);
  }
}