:root {
  /* Default (fallback) brand palette — overridden dynamically via /api/v1/branding */
  --brand-primary: #4B2B7F;   /* purple */
  --brand-secondary: #0B1F3A; /* dark navy */
  --brand-accent: #F39C12;    /* orange */
  --brand-bg: #FFFFFF;
  --brand-text: #0B1F3A;

  /* UI tokens */
  --ui-bg: #f5f6f8;
  --ui-card: #ffffff;
  --ui-border: #e6e8ee;
  --ui-muted: #667085;
  --ui-shadow: 0 2px 10px rgba(0,0,0,0.08);
  --ui-radius: 10px;
}

html, body {
  color: var(--brand-text);
  background: var(--ui-bg);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Header / top bar */
.header {
  background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 100%) !important;
  color: #fff !important;
  box-shadow: var(--ui-shadow) !important;
}

/* Core surfaces */
.card, .section, .modal-content, .timer-display, .report-section {
  background: var(--ui-card) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow) !important;
}

/* Primary buttons */
.btn-primary, .btn-submit, .btn-start {
  background: var(--brand-accent) !important;
  color: #111 !important;
  border: none !important;
}
.btn-primary:hover, .btn-submit:hover, .btn-start:hover {
  filter: brightness(0.92);
}

/* Secondary buttons */
.btn, .tab {
  border-color: rgba(255,255,255,0.35);
}

/* Common “action” buttons in tables */
.btn-edit, .btn-assign, .btn-reassign, .btn-view, .btn-details {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border: none !important;
}
.btn-edit:hover, .btn-assign:hover, .btn-reassign:hover, .btn-view:hover, .btn-details:hover {
  filter: brightness(0.92);
}

/* Stat highlights */
.stat-value {
  color: var(--brand-primary) !important;
}

/* Tabs */
.tab.active {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}
.tab:hover {
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

/* Table headers */
table th, .report-section table th {
  background: var(--brand-secondary) !important;
  color: #fff !important;
}

/* Badges (role/status) */
.badge {
  background: var(--brand-primary) !important;
  color: #fff !important;
}
.badge.completed { background: var(--brand-primary) !important; }
.badge.in_progress { background: var(--brand-accent) !important; color: #111 !important; }

/* Focus rings */
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(75, 43, 127, 0.18) !important;
}