/* ============================================================
   Je-Ma ICT Beheer — Forgejo huisstijl
   Geladen op ELKE pagina via custom/templates/custom/header.tmpl
   Past header (navbar), knoppen, links, footer en accenten aan
   naar de cyaan/groene Je-Ma huisstijl. Gebouwd op het lichte
   thema (gitea-light).
   ============================================================ */

:root,
[data-theme="gitea-light"],
[data-theme="forgejo-light"],
[data-theme="gitea-auto"] {
	/* --- Je-Ma huisstijl-accenten --- */
	--jema-accent:      #1ca9c9;   /* cyaan  */
	--jema-accent-2:    #14e0b1;   /* groen  */
	--jema-deep:        #0d3b54;   /* diep petrol (navbar) */
	--jema-deep-2:      #0a2d42;
	--jema-glow:        rgba(20,224,177,.45);

	/* Forgejo's primaire kleur overschrijven met Je-Ma cyaan.
	   Dit kleurt knoppen, links, focus-randen, badges, enz. */
	--color-primary:                 #1496b3;
	--color-primary-dark-1:          #127f99;
	--color-primary-dark-2:          #0f6b81;
	--color-primary-dark-3:          #0d5a6c;
	--color-primary-dark-4:          #0a4757;
	--color-primary-dark-5:          #073440;
	--color-primary-dark-6:          #052730;
	--color-primary-dark-7:          #032029;
	--color-primary-light-1:         #2bb0cd;
	--color-primary-light-2:         #46bdd6;
	--color-primary-light-3:         #69cadf;
	--color-primary-light-4:         #94d9e9;
	--color-primary-light-5:         #c2e9f2;
	--color-primary-light-6:         #e0f4f8;
	--color-primary-light-7:         #eef9fb;
	--color-primary-alpha-30:        rgba(20,150,179,.30);
	--color-primary-alpha-40:        rgba(20,150,179,.40);
	--color-primary-alpha-50:        rgba(20,150,179,.50);
	--color-primary-alpha-60:        rgba(20,150,179,.60);
	--color-primary-alpha-70:        rgba(20,150,179,.70);
	--color-primary-alpha-80:        rgba(20,150,179,.80);
	--color-primary-alpha-90:        rgba(20,150,179,.90);
	--color-primary-contrast:        #ffffff;

	/* Linkkleuren in lijn met huisstijl */
	--color-link:                    #127f99;
	--color-link-hover:              #0d5a6c;
}

/* ============================================================
   HEADER / NAVBAR
   Donkere petrol-balk met huisstijlgradient i.p.v. standaard wit.
   ============================================================ */
#navbar,
.full.height > .ui.secondary.menu:first-child,
nav#navbar {
	background: linear-gradient(100deg, var(--jema-deep) 0%, var(--jema-deep-2) 100%) !important;
	border-bottom: 2px solid transparent !important;
	border-image: linear-gradient(90deg, var(--jema-accent-2), var(--jema-accent)) 1 !important;
	box-shadow: 0 2px 16px -6px rgba(13,59,84,.6);
}

/* navbar links/tekst lichtgekleurd */
#navbar .item,
#navbar a.item,
#navbar .item span,
nav#navbar .item {
	color: #d7eef4 !important;
}
#navbar .item:hover,
#navbar a.item:hover {
	color: #ffffff !important;
	background: rgba(255,255,255,.08) !important;
}
#navbar .item.active {
	color: #ffffff !important;
	box-shadow: inset 0 -3px 0 var(--jema-accent-2);
}

/* het "Forgejo" tekstlogo / app-naam in de navbar */
#navbar .navbar-brand,
#navbar .item .text,
.brand strong {
	color: #ffffff !important;
}

/* zoekbalk in de navbar */
#navbar input,
#navbar .ui.input input {
	background: rgba(255,255,255,.10) !important;
	border-color: rgba(255,255,255,.18) !important;
	color: #ffffff !important;
}
#navbar input::placeholder { color: #9fc4d1 !important; }

/* ============================================================
   KNOPPEN — primaire knop met Je-Ma gradient
   ============================================================ */
.ui.primary.button,
.ui.primary.buttons .button,
.ui.green.button {
	background: linear-gradient(100deg, var(--jema-accent-2), var(--jema-accent)) !important;
	color: #06222b !important;
	border: none !important;
	font-weight: 600 !important;
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover,
.ui.green.button:hover {
	filter: brightness(1.05);
	box-shadow: 0 8px 22px -8px var(--jema-glow);
	color: #06222b !important;
}

/* secundaire/basic knoppen krijgen cyaan accent op hover */
.ui.basic.button:hover,
.ui.button:hover { border-color: var(--jema-accent) !important; }

/* ============================================================
   ACCENTEN — links, labels, actieve tabs
   ============================================================ */
a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

.ui.menu .active.item,
.ui.tabular.menu .active.item {
	border-color: var(--jema-accent) !important;
	color: var(--jema-deep) !important;
}

/* repo-taal-kleurbalk & progress in huisstijl waar generiek */
.ui.progress .bar { background: linear-gradient(90deg, var(--jema-accent), var(--jema-accent-2)); }

/* ============================================================
   FOOTER — strak, met huisstijl-accentlijn bovenaan
   ============================================================ */
footer,
.page-footer,
footer.page-footer {
	border-top: 2px solid transparent !important;
	border-image: linear-gradient(90deg, var(--jema-accent), var(--jema-accent-2)) 1 !important;
	background: #f4f8fb !important;
}
footer .container,
footer .left-links,
footer .right-links,
footer a { color: #5a7383 !important; }
footer a:hover { color: var(--jema-accent) !important; }

/* kleine "Je-Ma" merkaccent voor de footer-tekst */
footer .left-links::before {
	content: "Je-Ma ICT Beheer · ";
	font-weight: 700;
	color: var(--jema-deep);
}

/* ============================================================
   FOCUS-STATES in huisstijl
   ============================================================ */
:focus-visible { outline-color: var(--jema-accent) !important; }
.ui.input input:focus,
.ui.selection.dropdown:focus,
input:focus, textarea:focus {
	border-color: var(--jema-accent) !important;
}