/* ============================================================
   Eco Products NL – huisstijl bovenop AdminLTE 4 / Bootstrap 5.3
   Laden NA adminlte.min.css.
   Kleuren en lettertypes komen uit de bestaande factuur- en berekeningstool.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Archivo:wght@400;500;600&display=swap");

:root {
  /* merkkleuren */
  --ep-green:        #12924C;   /* primair (logo, knoppen, actieve menuregel)   */
  --ep-green-dark:   #106432;   /* koppen, links, hover                          */
  --ep-green-bright: #3ED47F;   /* accenten op donkere achtergrond               */
  --ep-green-soft:   #E6F5EC;   /* lichte vlakken, badges                        */
  --ep-rail:         #0B2419;   /* sidebar                                       */
  --ep-rail-line:    #1E4433;
  --ep-ink:          #0F1A15;   /* tekst                                         */
  --ep-muted:        #66756C;
  --ep-line:         #D2DAD3;
  --ep-ground:       #E7EBE6;   /* pagina-achtergrond                            */

  /* Bootstrap 5.3 tokens overschrijven: success = merkgroen, primary = merkgroen */
  --bs-success:       var(--ep-green);
  --bs-success-rgb:   18, 146, 76;
  --bs-primary:       var(--ep-green);
  --bs-primary-rgb:   18, 146, 76;
  --bs-link-color:    var(--ep-green-dark);
  --bs-link-color-rgb: 16, 100, 50;
  --bs-link-hover-color: #0b4a24;
  --bs-link-hover-color-rgb: 11, 74, 36;
  --bs-body-color:    var(--ep-ink);
  --bs-body-font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-border-color:  var(--ep-line);
}

body { font-variant-numeric: tabular-nums; }
.bg-body-tertiary { background-color: var(--ep-ground) !important; }

h1, h2, h3, h4, h5, .card-title, .brand-text, .fw-semibold {
  font-family: "Poppins", "Archivo", system-ui, sans-serif;
}
.app-content-header h3 { font-weight: 600; letter-spacing: -0.01em; }

/* ---------- knoppen ---------- */
.btn-success, .btn-primary {
  --bs-btn-bg: var(--ep-green);
  --bs-btn-border-color: var(--ep-green);
  --bs-btn-hover-bg: var(--ep-green-dark);
  --bs-btn-hover-border-color: var(--ep-green-dark);
  --bs-btn-active-bg: var(--ep-green-dark);
  --bs-btn-active-border-color: var(--ep-green-dark);
  --bs-btn-focus-shadow-rgb: 18, 146, 76;
}
.btn-outline-success, .btn-outline-primary {
  --bs-btn-color: var(--ep-green-dark);
  --bs-btn-border-color: var(--ep-green);
  --bs-btn-hover-bg: var(--ep-green);
  --bs-btn-hover-border-color: var(--ep-green);
}
.btn-outline-secondary { --bs-btn-border-color: var(--ep-line); --bs-btn-color: var(--ep-ink); }

/* ---------- header ---------- */
.app-header { border-bottom: 1px solid var(--ep-line); }

/* ---------- sidebar (donkergroen, zoals de rail in de factuurtool) ---------- */
.app-sidebar {
  background-color: var(--ep-rail) !important;
  --bs-body-bg: var(--ep-rail);
}
.app-sidebar .sidebar-brand { border-bottom: 1px solid var(--ep-rail-line); }
.app-sidebar .sidebar-brand { height: auto !important; min-height: 0; overflow: visible; padding: 0; }
.app-sidebar .brand-link { display: flex !important; justify-content: center !important; align-items: center; width: 100%; padding: 16px 20px 14px !important; line-height: 0; text-align: center; }
.app-sidebar .brand-link .brand-image,
.app-sidebar .brand-image { display: block; width: 62% !important; max-width: 100%; max-height: 92px !important; height: auto !important; object-fit: contain; margin: 0 auto !important; }
.app-sidebar .brand-icon { display: none; }
.sidebar-collapse .app-sidebar:not(:hover) .brand-link { padding: 14px 8px !important; }
.sidebar-collapse .app-sidebar:not(:hover) .brand-image { display: none !important; }
.sidebar-collapse .app-sidebar:not(:hover) .brand-icon { display: block; height: 34px; width: auto; margin: 0 auto; }
.app-sidebar .nav-link { color: #DFEBE3; border-radius: 6px; }
.app-sidebar .nav-link:hover { background: rgba(62, 212, 127, 0.10); color: #ffffff; }
.app-sidebar .nav-link.active {
  background: var(--ep-green) !important;
  color: #ffffff !important;
  font-weight: 600;
}
.app-sidebar .nav-icon { color: inherit; }
.app-sidebar .nav-header { color: #6E8A7C; font-size: 0.72rem; letter-spacing: 0.12em; font-weight: 600; }

/* ---------- cards ---------- */
.card { border: 1px solid var(--ep-line); border-radius: 8px; box-shadow: 0 1px 3px rgba(15, 26, 21, 0.05); }
.card-header { background: transparent; border-bottom: 2px solid var(--ep-green-dark); }
.card-title { font-size: 1rem; font-weight: 600; }
.table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ep-muted); font-weight: 600; }

/* ---------- badges ---------- */
.badge.text-bg-success { background-color: var(--ep-green-soft) !important; color: var(--ep-green-dark) !important; }
.badge.text-bg-primary { background-color: var(--ep-green) !important; color: #ffffff !important; }
.badge.text-bg-warning { background-color: #FBEED3 !important; color: #6B4400 !important; }
.badge.text-bg-danger  { background-color: #FDE8E6 !important; color: #8F2F1F !important; }
.badge.text-bg-info    { background-color: #E2EEF3 !important; color: #1F4F60 !important; }

/* ---------- login ---------- */
.login-page { background: var(--ep-ground) !important; }
.login-page .card-outline.card-success { border-top: 3px solid var(--ep-green); }
.login-logo img, .login-page .card-header img { max-height: 96px; width: auto; }

/* ---------- testomgeving ---------- */
.badge.text-bg-warning.env { font-family: "Poppins", sans-serif; letter-spacing: 0.06em; }