/* ============================================================================
   Meeples Distribution — Woodmart-componentstijl voor de Catalog tool
   Nagebouwd op de live winkel (woodmart 8.5.6, meeplesdistribution.com).
   Body: Work Sans 400 · Titels: Urbanist 700.
   Laadt als LAATSTE in elke template en thematiseert alles; layout
   (posities/breedtes) blijft in de template-eigen CSS.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&family=Urbanist:wght@600;700;800&display=swap');

:root{
  --wd-primary:       #DE1849;
  --wd-primary-hover: #B5122C;
  --wd-primary-soft:  rgba(222, 24, 73, .10);
  --wd-alt:           #DD7791;
  --wd-green:         #9DD675;
  --wd-green-hover:   #3F931D;

  --wd-text-color:    #383838;
  --wd-title-color:   #242424;
  --wd-muted:         #777777;
  --wd-text-font:     "Work Sans", Arial, Helvetica, sans-serif;
  --wd-title-font:    "Urbanist", Arial, Helvetica, sans-serif;

  --wd-container-w:   1400px;
  --wd-card-radius:   16px;
  --wd-pill-radius:   35px;
  --wd-btn-height:    42px;
  --wd-btn-padding:   6px 28px;
  --wd-form-height:   42px;
  --wd-border-color:  rgba(0, 0, 0, .10);
  --wd-border-strong: rgba(0, 0, 0, .16);
  --wd-hover-darken:  inset 0 0 0 1000px rgba(0, 0, 0, .10);

  --bs-primary:          #DE1849;
  --bs-primary-rgb:      222, 24, 73;
  --bs-link-color:       #DE1849;
  --bs-link-color-rgb:   222, 24, 73;
  --bs-link-hover-color: #B5122C;
  --bs-border-radius:    16px;
  --bs-border-radius-lg: 12px;
  --bs-body-font-family: "Work Sans", Arial, Helvetica, sans-serif;
  --bs-body-color:       #383838;
  --bs-body-bg:          #ffffff;
}

/* ---------- Basis-typografie ---------- */
body{
  font-family: var(--wd-text-font);
  font-weight: 400;
  color: var(--wd-text-color);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
.card-title,.modal-title,
.section-title,.page-title,.widget-title{
  font-family: var(--wd-title-font);
  font-weight: 700;
  color: var(--wd-title-color);
  letter-spacing: -.01em;
}
a{ color: var(--wd-primary); text-decoration: none; }
a:hover{ color: var(--wd-primary-hover); }

/* ============================================================================
   KNOPPEN — Woodmart: vaste hoogte, capitalize, pill, geen schaduw;
   hover verandert niet van kleur maar wordt donkerder (inset-shadow).
   ============================================================================ */
.btn, button.btn, .btn-t, .button{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--wd-btn-height); padding: var(--wd-btn-padding);
  font-family: var(--wd-text-font); font-weight: 600; font-size: 14px; line-height: 1.2;
  text-transform: capitalize; letter-spacing: 0;
  border: 1px solid transparent; border-radius: var(--wd-pill-radius) !important;
  box-shadow: none; transition: all .25s ease; cursor: pointer;
}
.btn:hover, .btn-t:hover, .button:hover{ box-shadow: var(--wd-hover-darken); }
.btn-sm, .btn-t.btn-sm{ min-height: 36px; padding: 5px 16px; font-size: 12px; }

/* Groen = primaire actie (Woodmart default-knop) */
.btn-primary,.btn-success,.wd-btn-green,.btn-pdf{
  background: var(--wd-green) !important; border-color: var(--wd-green) !important; color:#fff !important;
  --bs-btn-bg: var(--wd-green); --bs-btn-hover-bg: var(--wd-green);
  --bs-btn-border-color: var(--wd-green); --bs-btn-hover-border-color: var(--wd-green);
  --bs-btn-active-bg: var(--wd-green); --bs-btn-color:#fff; --bs-btn-hover-color:#fff;
  background-image: none !important;
}
.btn-primary:hover,.btn-success:hover,.wd-btn-green:hover,.btn-pdf:hover{
  color:#fff !important; box-shadow: var(--wd-hover-darken); border-color: var(--wd-green) !important;
}

/* Roze/accent = login, nadruk, sale */
.btn-accent,.btn-brand-pink,.btn-login{
  background: var(--wd-primary) !important; border-color: var(--wd-primary) !important; color:#fff !important;
  background-image: none !important;
}
.btn-accent:hover,.btn-brand-pink:hover,.btn-login:hover{
  color:#fff !important; box-shadow: var(--wd-hover-darken); border-color: var(--wd-primary) !important;
}

/* Rood blijft voor verwijderen */
.btn-danger{
  background:#dc2626 !important; border-color:#dc2626 !important; color:#fff !important;
  --bs-btn-bg:#dc2626; --bs-btn-hover-bg:#dc2626; --bs-btn-border-color:#dc2626;
}
.btn-danger:hover{ color:#fff !important; box-shadow: var(--wd-hover-darken); }

/* Bordered / outline */
.btn-outline-primary{
  background: transparent !important; color: var(--wd-primary) !important;
  border: 2px solid var(--wd-primary) !important;
}
.btn-outline-primary:hover{ background: var(--wd-primary) !important; color:#fff !important; box-shadow:none; }

/* Neutrale/secundaire knop (wit, dunne rand) */
.btn-secondary,.btn-light,.btn-outline-secondary,.btn-refresh,.btn-logout,.btn-ghost{
  background:#fff !important; border:1px solid var(--wd-border-strong) !important; color:#333 !important;
  background-image:none !important;
}
.btn-secondary:hover,.btn-light:hover,.btn-outline-secondary:hover,
.btn-refresh:hover,.btn-logout:hover,.btn-ghost:hover{ color:#111 !important; box-shadow: var(--wd-hover-darken); }

/* ============================================================================
   FORMULIEREN — Woodmart (pill, hoogte 42px, dunne rand)
   ============================================================================ */
.form-control,.form-select,.code-input{
  min-height: var(--wd-form-height);
  border-radius: var(--wd-pill-radius) !important;
  border: 1px solid var(--wd-border-color) !important;
  color:#333; background:#fff;
}
.form-control:focus,.form-select:focus,.code-input:focus{
  border-color: var(--wd-border-strong) !important;
  box-shadow: 0 0 0 .18rem var(--wd-primary-soft) !important; outline:none;
}
textarea.form-control{ border-radius: 12px !important; }
.form-label{ font-weight:600; color:#333; }

/* ============================================================================
   KAARTEN / PANELEN — vlak, licht, 10px
   ============================================================================ */
.card{ border:1px solid var(--wd-border-color); border-radius: var(--wd-card-radius); box-shadow:none; background:#fff; }
.card:hover{ box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.modal-content{ border-radius: 12px; border:1px solid var(--wd-border-color); }
.badge.bg-primary,.badge.text-bg-primary{ background-color: var(--wd-primary) !important; }
.badge.bg-success,.badge.text-bg-success{ background-color: var(--wd-green) !important; }
.text-primary{ color: var(--wd-primary) !important; }
.table{ --bs-table-hover-bg: var(--wd-primary-soft); }
.container,.container-xxl,.container-xl{ max-width: var(--wd-container-w); }
:focus-visible{ outline-color: var(--wd-primary); }

/* ============================================================================
   CATALOG-TOOL — eigen componenten naar Woodmart (licht i.p.v. donker)
   ============================================================================ */
.sidebar{ background:#fff !important; border-right:1px solid var(--wd-border-color); }
.sidebar-brand{ border-bottom:1px solid var(--wd-border-color) !important; }
.sidebar-logo{ background:transparent !important; padding:0 !important; }
.sidebar-brand p,.nav-label{ color:#9a9a9a !important; }
.nav-item{ color:#555 !important; }
.nav-item:hover{ color:#111 !important; background:#f5f5f5 !important; }
.nav-item.active{ color: var(--wd-primary) !important; background: var(--wd-primary-soft) !important; }
.nav-item .pg{ opacity:.5; }
.sidebar-nav::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12) !important; }
.sidebar-footer{ border-top:1px solid var(--wd-border-color) !important; }
.sidebar-footer .user{ color:#888 !important; }

.main-area,.pages-area{ background:#f4f4f4 !important; }
.toolbar{ background:#fff !important; border-bottom:1px solid var(--wd-border-color) !important; box-shadow:none !important; }

.product-card{ border:1px solid var(--wd-border-color) !important; border-radius: var(--wd-card-radius) !important; box-shadow:none !important; }
.product-card:hover{ transform:none !important; box-shadow: 0 8px 24px rgba(0,0,0,.08) !important; }
.filter-bar{ border:1px solid var(--wd-border-color) !important; box-shadow:none !important; border-radius: var(--wd-card-radius); }


/* ============================================================================
   LOGIN-SCHERM — vlakke accent-knop, pill-code-invoer
   ============================================================================ */
.login-card{ border-radius: 12px !important; box-shadow: 0 24px 60px rgba(0,0,0,.28) !important; }
.btn-login{ background: var(--wd-primary) !important; background-image:none !important; border:none !important; }
.code-input{ border-radius: var(--wd-pill-radius) !important; }

/* Productkaart: origineel gelaten, alleen de ronding overgenomen (16px). */
.prod-card{ border-radius: 16px !important; }