/* ============================================================
   Module: Hobbycraft Concessions
   Light-themed module styles.
   ============================================================ */

/* Page title */
.page-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

/* KPI metrics row */
.kpi-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

/* Chart & table sections */
.chart-section,
.table-section {
  margin-bottom: var(--space-7);
}

/* Card container */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--shadow-sm);
}

.card h2 {
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: var(--space-4);
}

/* Chart container */
.chart-container {
  min-height: 300px;
  display: flex;
  flex-direction: column;
}

/* Empty state */
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Header overrides */
.dashboard-header h1 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.user-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.user-name {
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
}

.sign-out-btn {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 5px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 150ms ease;
}

.sign-out-btn:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}