/*
 * Overschrijft de standaard WHMCS-stijl om aan te sluiten bij
 * hjc-automatisering.nl (donker thema, teal accent). Wordt geladen via de
 * hook includes/hooks/hjc_custom_styling.php, NIET door het kern-theme aan
 * te passen -- overleeft dus WHMCS-updates.
 *
 * Klassenamen hieronder zijn gecontroleerd tegen de echte HTML van deze
 * installatie (Bootstrap 4 in het klantgebied, plus het losse
 * "orderforms/modern"-template voor het bestelproces -- dat heeft een eigen
 * stylesheet met eigen klassen zoals .domainoptions).
 */

:root{
  --hjc-bg:#0d1117;
  --hjc-bg-alt:#151b23;
  --hjc-text:#e6edf3;
  --hjc-text-muted:#8b98a5;
  --hjc-accent:#22c9a3;
  --hjc-accent-hover:#1cb391;
  --hjc-border:#242c37;
}

/* Themabug-fix: dit thema definieert ".hidden" alleen binnen
   ".md-editor>.btn-toolbar", waardoor overal elders een element met
   class="hidden" (bijv. de lege foutmeldingsbox bij betaalmethodes) gewoon
   zichtbaar blijft. Dit herstelt ".hidden" als algemene utility-klasse. */
.hidden{display:none !important;}

body,
body.primary-bg-color{
  background:var(--hjc-bg) !important;
  color:var(--hjc-text) !important;
  font-family:"Segoe UI",Roboto,Arial,sans-serif !important;
}

a{color:var(--hjc-accent);}
a:hover{color:var(--hjc-accent-hover);}

/* Bovenste navigatiebalk (Bootstrap 4-structuur) */
.navbar{
  background:var(--hjc-bg) !important;
  border-color:var(--hjc-border) !important;
}
.navbar-brand{color:var(--hjc-text) !important;}
/* Deze installatie gebruikt geen .nav-link-klasse, gewoon kale <a> in <li> */
.navbar-nav > li > a{color:var(--hjc-text-muted) !important;}
.navbar-nav > li > a:hover{color:var(--hjc-text) !important;}
.dropdown-menu{background:var(--hjc-bg-alt) !important;border-color:var(--hjc-border) !important;}
.dropdown-item{color:var(--hjc-text-muted) !important;}
.dropdown-item:hover{background:var(--hjc-bg) !important;color:var(--hjc-text) !important;}
.dropdown-divider{border-color:var(--hjc-border) !important;}
/* Zoekveld in de navbar */
.navbar .form-control{background:#0a0e13 !important;border-color:var(--hjc-border) !important;color:var(--hjc-text) !important;}

/* Bestelproces: domeinselectie (orderforms/modern-template) */
.domainoptions{
  background:var(--hjc-bg-alt) !important;
  border-color:var(--hjc-border) !important;
}
.domainoptions .option{
  background:transparent !important;
  border-color:var(--hjc-border) !important;
  color:var(--hjc-text) !important;
}
.domainoptions label{color:var(--hjc-text) !important;}
.domainoptions .optionselected{background:rgba(34,201,163,.08) !important;}
.input-group-addon{
  background:#0a0e13 !important;
  border-color:var(--hjc-border) !important;
  color:var(--hjc-text-muted) !important;
}

/* Winkeloverzicht: productkaarten (orderforms/modern-template) */
.product{
  background:var(--hjc-bg-alt) !important;
  border:1px solid var(--hjc-border) !important;
  color:var(--hjc-text) !important;
}
.product .name{color:var(--hjc-text) !important;font-weight:700;}
.product .description{color:var(--hjc-text-muted) !important;}
.product .pricing{color:var(--hjc-accent) !important;}
.product:hover{border-color:var(--hjc-accent) !important;}
/* VPS/server-producten: losse eigenschap-kadertjes (Schijfruimte, Geheugen, etc.) */
.prodfeature{
  background:transparent !important;
  border:1px solid var(--hjc-border) !important;
  color:var(--hjc-text) !important;
}
.prodfeature .feature{color:var(--hjc-text-muted) !important;}
.product .btn-success{
  background:var(--hjc-accent) !important;
  border-color:var(--hjc-accent) !important;
  color:#04211b !important;
}
.product .btn-success:hover{background:var(--hjc-accent-hover) !important;border-color:var(--hjc-accent-hover) !important;}

/* Kaarten/panelen (facturen, tickets, klantgebied-widgets) */
.panel,
.panel-default,
.list-group-item,
.well,
.card{
  background:var(--hjc-bg-alt) !important;
  border-color:var(--hjc-border) !important;
  color:var(--hjc-text) !important;
}
.panel-heading,
.card-header{
  background:var(--hjc-bg-alt) !important;
  border-color:var(--hjc-border) !important;
  color:var(--hjc-text) !important;
}
.panel-footer,
.card-footer{background:var(--hjc-bg-alt) !important;border-color:var(--hjc-border) !important;}

/* Tabellen (facturen, productoverzichten) */
table,
.table{color:var(--hjc-text) !important;}
.table > thead > tr > th,
.table > tbody > tr > td{border-color:var(--hjc-border) !important;}
.table-striped > tbody > tr:nth-of-type(odd){background:var(--hjc-bg-alt) !important;}

/* Winkelwagen-overzicht ("Bekijk en bestel") */
table.cart{border-color:var(--hjc-border) !important;}
table.cart th{
  background:var(--hjc-bg-alt) !important;
  color:var(--hjc-text) !important;
  border-color:var(--hjc-border) !important;
}
table.cart tr.clientareatableactive,
table.cart tr.clientareatableactive td{
  background:var(--hjc-bg-alt) !important;
  color:var(--hjc-text) !important;
  border-color:var(--hjc-border) !important;
}
/* De echte productregel in een gevulde winkelwagen (niet hetzelfde als
   .clientareatableactive, dat is alleen de "winkelwagen is leeg"-melding) */
table.cart tr.carttableproduct td{
  background:var(--hjc-bg-alt) !important;
  color:var(--hjc-text) !important;
  border-color:var(--hjc-border) !important;
}
table.cart tr.carttableproduct .cartedit,
table.cart tr.carttableproduct .cartremove{color:var(--hjc-accent) !important;}
table.cart tr.subtotal td{
  background:transparent !important;
  color:var(--hjc-text-muted) !important;
  border-color:var(--hjc-border) !important;
}
/* "Totaal herhalend" -- de beige rij bij abonnementsproducten */
table.cart tr.recurring td{
  background:var(--hjc-bg-alt) !important;
  color:var(--hjc-text-muted) !important;
  border-color:var(--hjc-border) !important;
}
/* tr.total (het groene eindtotaal) bewust ongemoeid gelaten -- die is al goed leesbaar */

/* Browser-autofill (e-mail/wachtwoord) dwingt een eigen achtergrondkleur af
   die een normale background-regel niet overschrijft -- dit is de vereiste
   aanpak daarvoor (Chrome/Edge/Safari). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0 1000px #0a0e13 inset !important;
  -webkit-text-fill-color: var(--hjc-text) !important;
  caret-color: var(--hjc-text);
}

/* Klantgebied-homepage (index.php) */
.master-breadcrumb{background:var(--hjc-bg-alt) !important;border-color:var(--hjc-border) !important;}
.breadcrumb{background:transparent !important;}
.breadcrumb-item,
.breadcrumb-item.active{color:var(--hjc-text-muted) !important;}

/* Domeinzoekbalk-sectie -- expliciet bg-white in de markup, dus !important nodig */
.home-domain-search,
.home-domain-search.bg-white{background:var(--hjc-bg-alt) !important;}
.home-domain-search h2{color:var(--hjc-text) !important;}

.btn-outline-primary{
  background:transparent !important;
  border-color:var(--hjc-accent) !important;
  color:var(--hjc-accent) !important;
}
.btn-outline-primary:hover{
  background:var(--hjc-accent) !important;
  color:#04211b !important;
}
.btn-link{color:var(--hjc-accent) !important;}
.btn-link:hover{color:var(--hjc-accent-hover) !important;}

.pricing-card-title{color:var(--hjc-text) !important;}

/* "Hoe kunnen we u vandaag helpen"-iconenblokjes (.card-accent-teal/-pomegranate/
   -sun-flower/-asbestos/-green zijn allemaal <a> direct in .action-icon-btns) */
.action-icon-btns a{
  background:var(--hjc-bg-alt) !important;
  color:var(--hjc-text-muted) !important;
}
.action-icon-btns a:hover{color:var(--hjc-text) !important;}
.action-icon-btns .ico-container i{color:inherit;}

/* Knoppen: primaire actie in de merkkleur */
.btn-primary{
  background:var(--hjc-accent) !important;
  border-color:var(--hjc-accent) !important;
  color:#04211b !important;
  font-weight:700;
}
.btn-primary:hover,
.btn-primary:focus{
  background:var(--hjc-accent-hover) !important;
  border-color:var(--hjc-accent-hover) !important;
}
.btn-default,
.btn-secondary{
  background:transparent !important;
  border-color:var(--hjc-border) !important;
  color:var(--hjc-text) !important;
}

/* Formuliervelden */
.form-control{
  background:#0a0e13 !important;
  border-color:var(--hjc-border) !important;
  color:var(--hjc-text) !important;
}
.form-control:focus{border-color:var(--hjc-accent) !important;box-shadow:none !important;}
.form-control::placeholder{color:var(--hjc-text-muted) !important;}

/* Footer */
#footer,
.footer{
  background:var(--hjc-bg-alt) !important;
  color:var(--hjc-text-muted) !important;
  border-color:var(--hjc-border) !important;
}
#footer a,
.footer a{color:var(--hjc-text-muted) !important;}
#footer a:hover,
.footer a:hover{color:var(--hjc-accent) !important;}