/* CardEdge — custom styles */

:root {
  --primary: #1a73e8;
  --success: #34a853;
  --danger: #ea4335;
  --muted: #6c757d;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: #f8f9fa;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--primary) !important;
}

/* Card grid */
.card-grid {
  display: grid;
  gap: 1rem;
}

/* Ranked card row */
.card-row {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: box-shadow .15s;
}

.card-row:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.card-img-thumb {
  width: 64px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  background: #e9ecef;
}

.card-img-placeholder {
  width: 64px;
  height: 90px;
  background: #dee2e6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-size: 0.7rem;
}

/* Profit badge */
.profit-positive { color: var(--success); font-weight: 700; }
.profit-negative { color: var(--danger); font-weight: 700; }

/* Filter form */
.filter-form .form-control, .filter-form .btn {
  font-size: 0.875rem;
}

/* Pagination */
.pagination .page-item.active .page-link {
  background: var(--primary);
  border-color: var(--primary);
}

/* Detail page */
.metric-badge {
  background: #e8f0fe;
  color: var(--primary);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  font-weight: 600;
  font-size: 0.85rem;
}

.sales-table th { font-size: 0.8rem; text-transform: uppercase; color: var(--muted); }
.sales-table td { font-size: 0.875rem; vertical-align: middle; }

#chart-container {
  min-height: 350px;
}