/*
 * Mentu Theme Override
 * Drop this AFTER modern-design-system.css to apply the brand design tokens.
 * No layout changes — only color, typography, and surface adjustments.
 */

/* ── Google Fonts are loaded via <link> in each HTML head ─────────────────── */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Replace blue primary with Mentu green */
  --primary-50:  #EAF4E0;
  --primary-100: #D4E9BE;
  --primary-200: #B4D98E;
  --primary-300: #8DC85A;
  --primary-400: #72C132;
  --primary-500: #5FAE2E;
  --primary-600: #4A8C22;
  --primary-700: #3A6E1A;
  --primary-800: #2A5012;
  --primary-900: #1B340B;

  /* Warm neutral surfaces */
  --gray-50:  #F4F6F4;
  --gray-100: #ECEEE9;
  --gray-200: #E0E2DA;
  --gray-300: #C8CCC2;
  --gray-400: #9EA39A;
  --gray-500: #6B6D5F;
  --gray-600: #4E5047;
  --gray-700: #363830;
  --gray-800: #23251E;
  --gray-900: #12160F;

  /* Radius — slightly more generous */
  --radius-md:  0.625rem;
  --radius-lg:  0.875rem;
  --radius-xl:  1.125rem;
  --radius-2xl: 1.5rem;

  /* Shadows — warmer tint */
  --shadow-sm: 0 1px 2px rgba(18,22,15,.05), 0 4px 12px rgba(18,22,15,.06);
  --shadow-md: 0 4px 10px rgba(18,22,15,.06), 0 12px 28px rgba(18,22,15,.10);
  --shadow-lg: 0 8px 20px rgba(18,22,15,.10), 0 24px 48px rgba(18,22,15,.16);
}

/* ── Base typography ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--gray-50);
  color: var(--gray-900);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -0.01em;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn-primary,
.btn.btn-primary,
button.btn-primary {
  background: var(--primary-500) !important;
  border-color: var(--primary-500) !important;
  color: #fff !important;
  border-radius: 25px !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: 0.02em;
  transition: background .2s ease, transform .15s ease !important;
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
  transform: translateY(-1px);
}
.btn-primary:active, .btn.btn-primary:active {
  transform: scale(.98) !important;
}

.btn-secondary, .btn.btn-secondary {
  border-radius: 25px !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.btn-success, .btn.btn-success {
  background: var(--primary-500) !important;
  border-color: var(--primary-500) !important;
  border-radius: 25px !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.btn-success:hover { background: var(--primary-600) !important; }

.btn-outline, .btn.btn-outline {
  border-radius: 25px !important;
  font-weight: 700 !important;
}

/* ── Form inputs ────────────────────────────────────────────────────────────── */
.input-field,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"],
select, textarea {
  font-family: 'Plus Jakarta Sans', sans-serif;
  border-radius: 10px !important;
  border-color: var(--gray-200) !important;
  background: #F8FAF6 !important;
  color: var(--gray-900) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.input-field:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 3px rgba(95,174,46,.14) !important;
  background: #fff !important;
  outline: none !important;
}

/* ── Cards + stat cards ─────────────────────────────────────────────────────── */
.stat-card, .card, .course-card {
  border-radius: var(--radius-xl) !important;
  border-color: var(--gray-200) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ── Nav items (sidebar) ────────────────────────────────────────────────────── */
.nav-item.active {
  background: var(--primary-50) !important;
  color: var(--primary-700) !important;
}
.nav-item:hover {
  background: var(--gray-100) !important;
}

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge-primary, .badge.badge-primary { background: var(--primary-500) !important; }

/* ── Links ──────────────────────────────────────────────────────────────────── */
a { color: var(--primary-600); }
a:hover { color: var(--primary-700); }

/* ── Accent colors used in existing pages (override blue → green) ───────────── */
[style*="color: var(--primary-600)"] { color: var(--primary-600) !important; }
[style*="background: var(--primary"] { background: var(--primary-500) !important; }

/* ── Scrollbar (webkit) ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ── Focus ring ─────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--primary-500) !important;
  outline-offset: 2px !important;
}

/* ══════════════════════════════════════════════════════════════
   COMPONENT OVERRIDES — replace #667eea / #764ba2 blue-purple
   across all pages without touching their HTML or JS
══════════════════════════════════════════════════════════════ */

/* ── Generic blue-coloured buttons that haven't been converted ── */
[style*="background:#667eea"],
[style*="background: #667eea"],
[style*="background-color:#667eea"],
[style*="background-color: #667eea"] {
  background: var(--primary-500) !important;
}
[style*="background:linear-gradient(135deg,#667eea"],
[style*="background: linear-gradient(135deg, #667eea"] {
  background: var(--primary-500) !important;
}
[style*="color:#667eea"],
[style*="color: #667eea"] {
  color: var(--primary-600) !important;
}
[style*="border-color:#667eea"],
[style*="border-color: #667eea"] {
  border-color: var(--primary-400) !important;
}

/* ── Tab active states ─────────────────────────────────────────── */
.qdg-tab.qdg-tab-active,
.tab-active,
[class*="tab-active"],
[class*="tab--active"] {
  background: var(--primary-500) !important;
  border-color: var(--primary-500) !important;
  color: #fff !important;
}

/* ── Inline btn-primary overrides (pages with their own .btn-primary) ── */
.btn-primary {
  background: var(--primary-500) !important;
  border-color: var(--primary-500) !important;
  color: #fff !important;
  border-radius: 25px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
}

/* ── Preview cards / brand boxes ──────────────────────────────── */
.preview-card,
.preview-box {
  border-color: var(--primary-200) !important;
}

/* ── Days pill / chips ─────────────────────────────────────────── */
.days-pill,
.trial-pill,
.chip {
  background: var(--primary-50) !important;
  color: var(--primary-700) !important;
  border-color: var(--primary-200) !important;
}

/* ── Progress / bar tracks ─────────────────────────────────────── */
.bar-fill,
.progress-fill,
[class*="progress-bar"] {
  background: var(--primary-500) !important;
}

/* ── Issue / action buttons ────────────────────────────────────── */
.issue-btn,
.action-btn-primary {
  background: var(--primary-500) !important;
  border-color: var(--primary-500) !important;
  color: #fff !important;
  border-radius: 25px !important;
}
.issue-btn:hover { background: var(--primary-600) !important; }

/* ── Selection highlight ───────────────────────────────────────── */
::selection {
  background: var(--primary-100);
  color: var(--primary-900);
}

/* ── Tailwind primary-blue overrides (for pages using src/output.css) ── */
.bg-blue-600, .bg-blue-500, .bg-indigo-600, .bg-indigo-500,
.bg-purple-600, .bg-purple-500, .bg-violet-600, .bg-violet-500 {
  background-color: var(--primary-500) !important;
}
.text-blue-600, .text-blue-500, .text-indigo-600, .text-indigo-500 {
  color: var(--primary-600) !important;
}
.border-blue-600, .border-blue-500, .border-indigo-600 {
  border-color: var(--primary-500) !important;
}
.ring-blue-500, .ring-indigo-500 {
  --tw-ring-color: var(--primary-400) !important;
}
.hover\:bg-blue-700:hover, .hover\:bg-indigo-700:hover {
  background-color: var(--primary-600) !important;
}
.focus\:ring-blue-500:focus, .focus\:ring-indigo-500:focus {
  --tw-ring-color: var(--primary-400) !important;
}