/* Fachora — kleuren bovenop de standaard-ontwerptokens.
 * Wordt alleen geladen als APP_BRAND=fachora (zie config/brand.php);
 * html[data-brand] wint van :root, dus de volgorde van laden maakt niet uit.
 *
 * Nachtblauw #0B2545 (navigatie, koppen) · Oranje #F4781F (alleen de belangrijkste
 * actie en het keurmerk) · Lichtblauw #8FC4F2 (tinten) · Achtergrond #F6F8FB
 */
html[data-brand="fachora"] {
  --brand: #0B2545;
  --brand-dark: #08203C;
  --brand-darker: #061A33;
  --brand-tint: #EAF2FB;
  --brand-tint-2: #D6E6F6;
  --brand-border: #B9D3EC;

  --accent: #F4781F;
  --accent-dark: #D9640F;
  --accent-light: #FFA45C;
  --accent-tint: #FFF1E6;

  --bg: #F6F8FB;
  --surface: #FFFFFF;
  --surface-2: #EEF2F7;
  --surface-3: #E3E9F1;
  --border: #DCE3EC;
  --border-strong: #C5CFDC;

  --text: #0F172A;
  --text-2: #334155;
  --text-3: #64748B;
  --text-4: #94A3B8;

  --shadow-brand: 0 12px 40px rgba(11, 37, 69, 0.18);
}

/* Oranje voor de primaire actie; blauw blijft voor navigatie, koppen en links. */
html[data-brand="fachora"] .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(244, 120, 31, 0.25);
}
html[data-brand="fachora"] .btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  box-shadow: 0 6px 20px rgba(244, 120, 31, 0.35);
}
html[data-brand="fachora"] .btn-white { color: var(--brand); }

/* Marketing-layout. */
html[data-brand="fachora"] .eyebrow::before { box-shadow: 0 0 0 4px rgba(11, 37, 69, 0.14); }
html[data-brand="fachora"] .hero::before { background: radial-gradient(circle, rgba(143, 196, 242, 0.25) 0%, transparent 60%); }
html[data-brand="fachora"] .hero h1,
html[data-brand="fachora"] .section-header h2,
html[data-brand="fachora"] .page-hero h1 { color: var(--brand-darker); }
html[data-brand="fachora"] .hero h1 .accent { color: var(--accent); }
html[data-brand="fachora"] footer { background: #0B2545; }
html[data-brand="fachora"] .cta-final { background: linear-gradient(135deg, #0B2545 0%, #143A66 100%); }
html[data-brand="fachora"] .app-mockup { box-shadow: 0 30px 80px rgba(11, 37, 69, 0.22), 0 8px 24px rgba(11, 37, 69, 0.10); }

/* ===== App: nachtblauwe zijbalk met oranje accent ===== */
html[data-brand="fachora"] .sidebar {
  background: linear-gradient(180deg, #0F2F58 0%, #0B2545 100%);
  border-right-color: rgba(255, 255, 255, 0.06);
}
html[data-brand="fachora"] .sidebar-brand { border-bottom-color: rgba(255, 255, 255, 0.08); }
html[data-brand="fachora"] .sidebar-brand .logo-mark { border-radius: 0; object-fit: contain; width: 36px; height: 30px; }
html[data-brand="fachora"] .sidebar-brand .brand-name { color: #fff; font-size: 18px; font-weight: 800; letter-spacing: 0.03em; }
html[data-brand="fachora"] .nav-section-title { color: rgba(255, 255, 255, 0.42); }
html[data-brand="fachora"] .nav-item { color: rgba(255, 255, 255, 0.78); }
html[data-brand="fachora"] .nav-item svg { opacity: 0.85; }
html[data-brand="fachora"] .nav-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
html[data-brand="fachora"] .nav-item.active { background: rgba(255, 255, 255, 0.12); color: #fff; }
html[data-brand="fachora"] .nav-item.active::before { background: var(--accent-light); }
html[data-brand="fachora"] .nav-badge { background: var(--accent); color: #fff; }
html[data-brand="fachora"] .sidebar-user { border-top-color: rgba(255, 255, 255, 0.08); }
html[data-brand="fachora"] .sidebar-user:hover { background: rgba(255, 255, 255, 0.07); }
html[data-brand="fachora"] .sidebar .avatar { background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%); }
html[data-brand="fachora"] .sidebar .user-name { color: #fff; }
html[data-brand="fachora"] .sidebar .user-co { color: rgba(255, 255, 255, 0.55); }
html[data-brand="fachora"] .sidebar-version { color: rgba(255, 255, 255, 0.35); }
html[data-brand="fachora"] .sidebar .user-menu { color: var(--text); }
html[data-brand="fachora"] .sidebar-nav::-webkit-scrollbar { width: 6px; }
html[data-brand="fachora"] .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 3px; }

/* Inlog-/registratiepagina. */
html[data-brand="fachora"] .auth-shell .auth-hero { background: linear-gradient(160deg, #143A66 0%, #0F2F58 55%, #0B2545 100%); }
html[data-brand="fachora"] .auth-shell .auth-hero::before { background: radial-gradient(circle, rgba(244, 120, 31, 0.22) 0%, transparent 70%); width: 560px; height: 560px; top: -180px; right: -160px; }
html[data-brand="fachora"] .auth-shell .auth-logo .logo-wordmark { height: 34px; width: auto; display: block; }

/* Keurmerk Fachora Verified (gebruikt op openbare pagina's en in het panel). */
html[data-brand="fachora"] .fv-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 100px;
  background: #0B2545; color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
html[data-brand="fachora"] .fv-badge::before {
  content: '✓'; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}