/**
 * Sylvie themalaag — additieve override op crm-white-label.
 * Forceert een licht, fors afgerond, blauw/groen thema over de hele shell
 * (dashboard, sidebar, topbar, gebruikers, rollen én login). Overschrijft
 * uitsluitend design-tokens + een paar hardcoded login-kleuren; wijzigt de
 * basis-plugin niet. Deactiveer de plugin en de basis staat weer default.
 *
 * !important op de tokenwaarden zodat ze winnen van het dark-thema-blok.
 */
:root,
:root[data-crm-theme="dark"],
:root[data-crm-theme="light"]{
  /* merk: blauw/groen i.p.v. indigo/periwinkle */
  --crm-primary:        #159A8A !important;
  --crm-primary-50:     #E2F5F0 !important;
  --crm-primary-100:    #CFEBE4 !important;
  --crm-primary-200:    #A9DDD3 !important;
  --crm-primary-400:    #3FB984 !important;
  --crm-primary-500:    #21A491 !important;
  --crm-primary-600:    #0E7C6F !important;
  --crm-primary-800:    #0A5F55 !important;
  --crm-primary-900:    #08463E !important;
  --crm-primary-light:  #7FD4C8 !important;
  --crm-primary-dark:   #0E7C6F !important;
  --crm-periwinkle:     #159A8A !important;
  --crm-accent:         #E6F6EE !important;

  /* licht oppervlak */
  --crm-bg:            #EEF5F3 !important;
  --crm-surface:       #FFFFFF !important;
  --crm-surface-alt:   #F5FAF9 !important;
  --crm-ink:           #14302B !important;
  --crm-slate:         #3A4F4B !important;
  --crm-text:          #14302B !important;
  --crm-text-muted:    #5C7A74 !important;
  --crm-text-subtle:   #90A8A3 !important;
  --crm-border:        #E4EEEC !important;
  --crm-border-strong: #CFDEDA !important;

  /* sidebar: van donker → licht */
  --crm-sidebar-bg:               #FFFFFF !important;
  --crm-sidebar-section:          #90A8A3 !important;
  --crm-sidebar-text:             #5C7A74 !important;
  --crm-sidebar-text-hover:       #0E7C6F !important;
  --crm-sidebar-item-hover-bg:    rgba(21,154,138,0.08) !important;
  --crm-sidebar-item-active-bg:   rgba(21,154,138,0.13) !important;
  --crm-sidebar-item-active-text: #0E7C6F !important;
  --crm-sidebar-item-active-bar:  #159A8A !important;
  --crm-sidebar-divider:          rgba(20,48,43,0.08) !important;
  --crm-sidebar-brand:            #14302B !important;

  /* status */
  --crm-success:    #1E7A54 !important; --crm-success-bg: #E3F4EC !important;
  --crm-warning:    #8A6410 !important; --crm-warning-bg: #FBF0D9 !important;
  --crm-error:      #C0453A !important; --crm-error-bg:   #FCE9E5 !important;
  --crm-info:       #2E7CE4 !important; --crm-info-bg:    #E7F1FD !important;

  /* rondere hoeken (o.a. het menu-item) + zachte schaduwen */
  --crm-radius-nav:   12px !important;
  --crm-radius-input: 12px !important;
  --crm-radius-btn:   12px !important;
  --crm-radius-card:  18px !important;
  --crm-radius-panel: 24px !important;
  --crm-radius:       12px !important;
  --crm-radius-lg:    18px !important;
  --crm-shadow-card:  0 1px 2px rgba(16,60,52,.04), 0 10px 26px rgba(16,60,52,.06) !important;
  --crm-shadow:       0 1px 2px rgba(16,60,52,.04), 0 10px 26px rgba(16,60,52,.06) !important;
  --crm-shadow-pop:   0 16px 38px rgba(16,60,52,.13) !important;
  --crm-shadow-lg:    0 16px 38px rgba(16,60,52,.13) !important;
}

/* sidebar-merk (logo-tekst) donker leesbaar op wit */
.crm-sidebar__brand, .crm-sidebar-brand { color: var(--crm-sidebar-brand) !important; }

/* login — submit-knop en hero waren hardcoded donker → blauw/groen */
.crm-login-submit{
  background: linear-gradient(135deg,#159A8A 0%,#34B27E 115%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 12px !important;
}
.crm-login-submit *{ color: #FFFFFF !important; }
.crm-login-submit:hover{ filter: brightness(1.05); color: #FFFFFF !important; background: linear-gradient(135deg,#0E7C6F 0%,#2FA173 115%) !important; }
/* eyebrow "Beheerderspaneel": van paars → teal */
.crm-login-mode-tag{ color:#0E7C6F !important; background:#E2F5F0 !important; }
/* admin-variant: knop teal zonder rand + teal focus i.p.v. paars */
.crm-login-shell--admin .crm-login-submit{
  background: linear-gradient(135deg,#159A8A 0%,#34B27E 115%) !important;
  color:#FFFFFF !important; border:0 !important;
}
.crm-login-shell--admin .crm-login-submit:hover{ background: linear-gradient(135deg,#0E7C6F 0%,#2FA173 115%) !important; }
.crm-login-shell--admin .crm-login-input:focus{ border-color:#159A8A !important; box-shadow:0 0 0 3px rgba(21,154,138,.16) !important; }
.crm-login-hero:not([style*="background-image"]){
  background: linear-gradient(150deg,#12A18F 0%,#1E7C9E 55%,#2FA173 115%) !important;
}
.crm-login-hero-overlay{ background: linear-gradient(180deg, rgba(8,60,54,.15), rgba(8,60,54,.45)) !important; }
.crm-login-shell{ border-radius: 24px !important; }
.crm-login-input:focus{ border-color:#159A8A !important; box-shadow:0 0 0 3px rgba(21,154,138,.16) !important; }
/* input-velden op de login: witte bg, donkere leesbare tekst, muted placeholder */
.crm-login-input, .crm-login-input-wrap input, .crm-login-page input[type="text"],
.crm-login-page input[type="email"], .crm-login-page input[type="password"]{
  background:#FFFFFF !important; color:#14302B !important; border-color:#CFDEDA !important;
}
.crm-login-input::placeholder, .crm-login-page input::placeholder{ color:#90A8A3 !important; opacity:1; }

/* ── Vangnet: forceer de grote shell/login-oppervlakken licht (via tokens),
   ook mocht de dark-media-query ergens direct een kleur zetten. ── */
html[data-crm-theme] body,
.crm-shell, .crm-shell__panel, .crm-shell__sidebar, .crm-dashboard,
.crm-nav, .crm-topbar, .crm-shell__topbar{
  background: var(--crm-bg) !important;
}
.crm-shell__sidebar, .crm-nav{ background: var(--crm-sidebar-bg) !important; }
.crm-card, .crm-dropdown,
.crm-input, .crm-select, .crm-textarea,
.crm-login-form-col, .crm-login-shell, .crm-login-input, .crm-stat-icon,
.crm-table th{ background: var(--crm-surface) !important; }
/* content-wrapper transparant houden → toont het lichtgroene paneel eronder */
.crm-panel__inner{ background: transparent !important; }
.crm-shell, .crm-dashboard, .crm-card, .crm-nav__item,
.crm-login-heading, .crm-login-subheading, .crm-login-label,
.crm-table td, .crm-table th{ color: var(--crm-text) !important; }
.crm-nav__item, .crm-nav__label{ color: var(--crm-sidebar-text) !important; }
.crm-input, .crm-select, .crm-textarea, .crm-login-input,
.crm-card{ border-color: var(--crm-border) !important; }
/* login-hero altijd blauw/groen (ook als er inline gradient stond) */
.crm-login-hero{ background: linear-gradient(150deg,#12A18F 0%,#1E7C9E 55%,#2FA173 115%) !important; }

/* ══ Merk-typografie + dashboard-componenten in portaal-stijl ══ */
:root, :root[data-crm-theme="dark"], :root[data-crm-theme="light"]{
  --crm-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.crm-shell, .crm-dashboard, .crm-login-page{ font-family: var(--crm-font-family) !important; }

/* koppen strakker/zwaarder, zoals het portaal */
.crm-dashboard h1, .crm-page-header__title, .crm-widget-header, .crm-card-header,
.crm-stat-value{ letter-spacing:-.02em !important; }
.crm-dashboard h1{ font-weight:800 !important; }
.crm-stat-value{ font-weight:800 !important; }

/* kaarten & widgets: forser afgerond + zachte schaduw */
.crm-card, .crm-widget, .crm-stat-card, .crm-empty-state{
  border-radius:20px !important;
  border:1px solid var(--crm-border) !important;
  box-shadow:0 1px 2px rgba(16,60,52,.04), 0 10px 26px rgba(16,60,52,.06) !important;
}
.crm-card--flat{ box-shadow:none !important; }

/* stat-kaarten: getinte, ronde icoon-badges in blauw/groen-familie */
.crm-stat-icon{ border-radius:14px !important; }
.crm-stat-icon--primary{ background:var(--crm-primary-50) !important; color:var(--crm-primary) !important; }
.crm-stat-icon--success{ background:#E6F6EE !important; color:#1E7A54 !important; }
.crm-stat-icon--info{    background:#E7F1FD !important; color:#2E7CE4 !important; }
.crm-stat-icon--warning{ background:#E2F5F0 !important; color:#0E7C6F !important; }

/* stat-kaarten blijven wit → springen eruit op de lichtgroene achtergrond */

/* activity-lijst: teal accent-stip */
.crm-activity-dot{ background:var(--crm-primary) !important; border-color:var(--crm-primary) !important; }
.crm-activity-list a, .crm-widget a, .crm-card a{ color:var(--crm-primary-dark) !important; }

/* ── Dashboard/beheer-pagina's: ruime rand-padding zoals de rapporten-views.
   De portaal-views brengen hun eigen padding mee, dus die slaan we over. ── */
.crm-panel__inner:not(:has(.portal)){
  padding: 48px clamp(40px, 4.5vw, 60px) !important;
}
/* stat-kaart: iets meer lucht tussen waarde en label */
.crm-stat-content{ display:flex !important; flex-direction:column; gap:3px; }
.crm-stat-value{ margin:0 !important; }