@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Quicksand:wght@500;600;700&display=swap');

/*
 * Klantenpaneel Webjongens: de gedeelde huisstijl.
 *
 * Staat in custom/assets/css/ en wordt daardoor door HostFact (load_custom_assets)
 * op élke pagina geladen, vóór de CSS van de plugins. Hier staan:
 *   1. de variabelen (kleuren, letters, groottes, rondingen, beweging)
 *   2. de basis voor het hele paneel (letters, koppen, links, knoppen, velden)
 *   3. gedeelde onderdelen (labels, panelen)
 *
 * Plugins gebruiken ALLEEN deze variabelen: geen losse hexcodes, geen eigen
 * lettergroottes. Nieuwe kleur of grootte nodig? Dan hier toevoegen.
 *
 * De basisregels zijn precies zo sterk als die van Bootstrap/HostFact (en winnen
 * omdat ze later laden), niet sterker: een plugin overschrijft ze met één klasse.
 *
 * Bron van de waarden: het huisstijlboek van Cockpit (cockpit.webjongens.work/huisstijl).
 */

/* ========== 1. Variabelen ========== */
:root {
	/* Merk */
	--wj-merk:       #8438df;
	--wj-merk-600:   #7327c6;
	--wj-merk-700:   #5f1fa4;
	--wj-merk-800:   #4d1c83;
	--wj-diep:       #2e1352;
	--wj-paars-50:   #f6f2fe;
	--wj-paars-100:  #eee4fd;
	--wj-paars-200:  #ddc9fb;
	--wj-paars-300:  #c5a3f6;
	--wj-roze:       #f7148b;

	/* Grijs (tekst, randen, vlakken) */
	--wj-grijs-50:   #f8fafc;
	--wj-grijs-100:  #eef2f7;
	--wj-grijs-300:  #d5dde7;
	--wj-grijs-400:  #9fabbb;
	--wj-grijs-500:  #647589;
	--wj-wit:        #ffffff;
	--wj-pagina:     #f4f2fa;

	/* Betekenis: de volle kleur, een licht vlak en de tekst op dat vlak */
	--wj-groen:      #10b981;  --wj-groen-100:  #d1fae5;  --wj-groen-200:  #a7f3d0;  --wj-groen-700:  #047857;
	--wj-amber:      #f59e0b;  --wj-amber-100:  #fef3c7;  --wj-amber-200:  #fde68a;  --wj-amber-700:  #b45309;
	--wj-rose:       #f43f5e;  --wj-rose-100:   #ffe4e6;  --wj-rose-200:   #fecdd3;  --wj-rose-800:   #9f1239;
	--wj-blauw:      #0e93da;  --wj-blauw-100:  #e0f2fe;                             --wj-blauw-800:  #075985;
	--wj-oranje-100: #ffedd5;  --wj-oranje-800: #9a3412;
	--wj-indigo-100: #dbeafe;  --wj-indigo-800: #1e40af;
	--wj-amber-50:   color-mix(in srgb, var(--wj-amber-100) 35%, var(--wj-wit));  /* heel zacht vlak: "wacht op jou" */

	/* Letters */
	--wj-font-kop:   'Montserrat', Arial, Helvetica, sans-serif;
	--wj-font-tekst: 'Quicksand', Arial, Helvetica, sans-serif;

	/* Groottes: alleen deze */
	--wj-tekst-2xs:  0.6875rem;  /* 11px  kapitaaltjes, mini-labels      */
	--wj-tekst-xs:   0.75rem;    /* 12px  labels, voetnoten              */
	--wj-tekst-s:    0.8125rem;  /* 13px  meta, uitleg                   */
	--wj-tekst-m:    0.875rem;   /* 14px  lijsten, tabellen, knoppen     */
	--wj-tekst:      0.9375rem;  /* 15px  lopende tekst                  */
	--wj-tekst-l:    1rem;       /* 16px  onderwerpen, nadruk            */
	--wj-kop-s:      1.125rem;   /* 18px  sectiekop                      */
	--wj-kop-m:      1.25rem;    /* 20px  kaarttitel                     */
	--wj-kop-l:      1.5rem;     /* 24px  getal in een ring              */
	--wj-kop-xl:     1.75rem;    /* 28px  paginatitel (h1)               */
	--wj-getal:      2rem;       /* 32px  statistiek                     */
	--wj-getal-xl:   2.75rem;    /* 44px  saldo                          */

	/* Rondingen */
	--wj-rond-s:     6px;
	--wj-rond-m:     10px;
	--wj-rond-l:     14px;
	--wj-rond-pil:   9999px;

	/* Schaduw en beweging */
	--wj-paneel-rand:   0 0 0 1px var(--wj-paars-100), 0 1px 2px rgb(15 23 42 / .05);
	--wj-schaduw-hover: 0 4px 14px color-mix(in srgb, var(--wj-diep) 8%, transparent);
	--wj-focus:         0 0 0 2px var(--wj-wit), 0 0 0 4px var(--wj-merk);
	--wj-curve:         cubic-bezier(.22, 1, .36, 1);
	--wj-snel:          120ms;
	--wj-rustig:        200ms;
}

/* ========== 2. Basis voor het hele paneel ========== */
body {
	font-family: var(--wj-font-tekst);
	font-weight: 500;
	color: var(--wj-diep);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wj-font-kop);
	color: var(--wj-diep);
}

:where(.main-content) h1 {
	font-size: var(--wj-kop-xl);
	font-weight: 700;
	line-height: 1.25;
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 1.25rem;
}
:where(.main-content) h2 { font-size: var(--wj-kop-m); font-weight: 600; line-height: 1.3; }
:where(.main-content) h3 { font-size: var(--wj-kop-s); font-weight: 600; line-height: 1.35; }
:where(.main-content) :is(h4, h5, h6) { font-size: var(--wj-tekst-l); font-weight: 600; }

:where(.main-content) a:where(:not(.btn)) {
	color: var(--wj-merk-600);
	transition: color var(--wj-snel) var(--wj-curve);
}
:where(.main-content) a:where(:not(.btn)):hover { color: var(--wj-merk-700); }

/* Knoppen: pil, zoals overal in de huisstijl */
:where(.main-content) .btn {
	border-radius: var(--wj-rond-pil);
	font-weight: 600;
	font-size: var(--wj-tekst-m);
	transition: background-color var(--wj-snel) var(--wj-curve), box-shadow var(--wj-snel) var(--wj-curve), color var(--wj-snel) var(--wj-curve);
}
:where(.main-content) .btn:active { transform: scale(.97); }
:where(.main-content) .btn:focus-visible { outline: none; box-shadow: var(--wj-focus); }
:where(.main-content) .btn-primary { background: var(--wj-merk); border-color: var(--wj-merk); color: var(--wj-wit); }
:where(.main-content) .btn-primary:hover,
:where(.main-content) .btn-primary:focus { background: var(--wj-merk-600); border-color: var(--wj-merk-600); color: var(--wj-wit); }
:where(.main-content) .btn-secondary { background: var(--wj-wit); border-color: transparent; color: var(--wj-merk-700); box-shadow: 0 0 0 1px var(--wj-paars-200); }
:where(.main-content) .btn-secondary:hover { background: var(--wj-paars-50); color: var(--wj-merk-700); }

/* Velden */
:where(.main-content) .form-control { border-radius: var(--wj-rond-m); border-color: var(--wj-grijs-300); color: var(--wj-diep); }
:where(.main-content) .form-control:focus { border-color: var(--wj-paars-300); box-shadow: 0 0 0 3px var(--wj-paars-100); outline: none; }

/* ========== 3. Gedeelde onderdelen ========== */

/* Labels (status, soort): één vorm overal. De plugin kiest alleen de kleur. */
.wj-badge,
.wj-tick-soort,
.wj-tick-status,
.wj-strip-badge,
.wj-proj-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border-radius: var(--wj-rond-pil);
	padding: 2px 10px;
	font-family: var(--wj-font-tekst);
	font-size: var(--wj-tekst-xs);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.01em;
	text-transform: none;
	white-space: nowrap;
	background: var(--wj-grijs-100);
	color: var(--wj-grijs-500);
}

/* De tonen. Gebruik deze betekenis, niet de kleur:
   paars = loopt / werkvoorraad · groen = klaar · amber = bezig / let op
   rose = probleem · blauw = nieuw / informatie · grijs = gesloten / neutraal */
.wj-toon-paars  { background: var(--wj-paars-100);  color: var(--wj-merk-700); }
.wj-toon-groen  { background: var(--wj-groen-100);  color: var(--wj-groen-700); }
.wj-toon-amber  { background: var(--wj-amber-100);  color: var(--wj-amber-700); }
.wj-toon-rose   { background: var(--wj-rose-100);   color: var(--wj-rose-800); }
.wj-toon-blauw  { background: var(--wj-blauw-100);  color: var(--wj-blauw-800); }
.wj-toon-oranje { background: var(--wj-oranje-100); color: var(--wj-oranje-800); }
.wj-toon-indigo { background: var(--wj-indigo-100); color: var(--wj-indigo-800); }
.wj-toon-grijs  { background: var(--wj-grijs-100);  color: var(--wj-grijs-500); }

.wj-badge--loopt { background: var(--wj-paars-100); color: var(--wj-merk-700); }
.wj-badge--klaar { background: var(--wj-groen-100); color: var(--wj-groen-700); }

/* Paneel: wit vlak met de zachte paarse rand */
.wj-paneel {
	border-radius: var(--wj-rond-l);
	padding: 20px;
	background: var(--wj-wit);
	box-shadow: var(--wj-paneel-rand);
}

/* Secundaire knop in huisstijl, ook buiten .main-content bruikbaar */
.btn-info-wj {
	border-radius: var(--wj-rond-pil);
	background: var(--wj-wit);
	color: var(--wj-merk-700);
	box-shadow: 0 0 0 1px var(--wj-paars-200);
}
.btn-info-wj:hover { background: var(--wj-paars-50); color: var(--wj-merk-600); text-decoration: none; }

/* HostFact-tegelknoppen (.action-btn: domein "Nameservers wijzigen", "Contactgegevens
 * wijzigen", DNS, …). Core geeft ze een vaste maat met overflow:hidden; met de pilvorm en
 * ons lettertype werd dat een ovaal met afgesneden tekst. Hier: tegel met afgeronde
 * hoeken die meegroeit met de tekst. (26-09-2026) */
:where(.main-content) .btn.action-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	width: 9rem;
	height: auto;
	min-height: 6.25rem;
	padding: 0.9rem 0.6rem;
	border-radius: var(--wj-rond-l);
	vertical-align: top;
	white-space: normal;
	overflow: visible;
}
:where(.main-content) .btn.action-btn br,
:where(.main-content) .btn.action-btn::after { display: none; }
:where(.main-content) .btn.action-btn div {
	width: auto;
	margin: 0;
	font-size: var(--wj-tekst-m);
	line-height: 1.25;
}
:where(.main-content) .btn.action-btn .fas { color: var(--wj-merk); }
:where(.main-content) .btn.action-btn:hover {
	background: var(--wj-paars-50);
	border-color: transparent;
	color: var(--wj-merk-700) !important;
}