/*
  Scope-afhankelijke kleuren (PBI 45449, task 46030).

  Maakt de belangrijkste accent-/interactiekleuren per scope (marktsegment)
  instelbaar via CSS-variabelen zonder inspinia/bootstrap/surebusiness.css aan
  te passen: de :root-defaults hieronder zijn exact de huidige kleuren en dit
  bestand laadt ná die stylesheets (header.asp), dus voor zakelijk (geen
  scope-klasse) verandert er niets aan het huidige beeld. Op de webversie laadt
  de webmodule-CSS er bewust nog ná, zodat white-labeling voorrang houdt.

  Naamgeving: --sb-c-[naam], waarbij [naam] exact de gelijknamige variabele in
  de Vue-app is (sb_frontend libs/assets/src/styles/_scope.css: --primary /
  --primary-dark / --primary-darker / --slider-connect-bg), zodat een latere
  restyling in alle applicaties dezelfde namen kan zetten. De prefix voorkomt
  botsingen met de échte SPA-vars, die op de widget-pagina's in ditzelfde
  document geladen worden. Rollen als in de SPA: zonder suffix = tekst/links/
  randen (leesbaar óp wit), -dark = vulling onder witte tekst, -darker =
  hover/focus. De tweede familie (--sb-c-accent*) is de eigen huisstijlkleur
  uit surebusiness.css zonder Vue-tegenhanger, met dezelfde suffix-conventie.

  De scope-klasse wordt gezet in content/includes/bovenkant.asp op basis van
  SessionData("marktsegment").
*/

:root {
  /* Interactiefamilie: vervangt het inspinia-groen #1ab394 — de framework-laag
     (knoppen, actieve rijen/tabs, paginering, focus-randen). */
  --sb-c-primary: #1ab394; /* tekst/links/randen op wit (Vue: --primary) */
  --sb-c-primary-dark: #1ab394; /* vulling onder witte tekst (Vue: --primary-dark) */
  --sb-c-primary-darker: #18a689; /* hover/focus/disabled (Vue: --primary-darker) */
  --sb-c-slider-connect-bg: #1ab394; /* noUi-slider (Vue: --slider-connect-bg) */
  /* Huisstijlfamilie: vervangt het surebusiness-groen #00a19a — de eigen
     merkaccenten uit surebusiness.css (koppen, sb-randen, .surebusiness*).
     Geen Vue-tegenhanger: de SPA kent één merkfamilie; legacy heeft er
     historisch twee, dus zolang die groenen verschillen een eigen var-paar. */
  --sb-c-accent: #00a19a; /* tekst/randen op wit */
  --sb-c-accent-dark: #00a19a; /* vulling onder witte tekst */
  --sb-c-accent-bg: #227d79; /* idem, derde historische groen (alleen .surebusiness-bg) */
  --sb-c-accent-light: #A1DCDA; /* lichte tint (rijselectie); geen consument hier — sb_net-fw
                                   leest 'm via de hotlink naar dit bestand */
  /* .btn-success is in het INSPINIA-palet BLAUW (geen semantisch groen) en wordt
     in de praktijk als gewone tweede knopkleur gebruikt. Hier alvast var-backed
     met de huidige waarden; bewust NIET in het particulier-blok — of dit onder
     particulier mee moet kleuren (en waarheen) is een openstaand teambesluit,
     dan is het een één-regel-wijziging. */
  --sb-c-success: #1c84c6; /* vulling + outline-tekst */
  --sb-c-success-darker: #1a7bb9; /* hover/focus/active/disabled */
}

body.scope-particulier {
  --sb-c-scope-hue: 218;
  --sb-c-scope-saturation: 53%;

  --sb-c-primary: hsl(var(--sb-c-scope-hue), var(--sb-c-scope-saturation), 36%); /* #2b4f8c */
  --sb-c-primary-dark: hsl(var(--sb-c-scope-hue), var(--sb-c-scope-saturation), 29%); /* #233f71 */
  --sb-c-primary-darker: hsl(var(--sb-c-scope-hue), var(--sb-c-scope-saturation), 21%); /* #192e52 */
  --sb-c-accent-light: hsl(var(--sb-c-scope-hue), var(--sb-c-scope-saturation), 83%); /* #bdceeb */
  --sb-c-slider-connect-bg: var(--sb-c-primary);
  --sb-c-accent: var(--sb-c-primary);
  --sb-c-accent-dark: var(--sb-c-primary-dark);
  --sb-c-accent-bg: var(--sb-c-primary-dark);
}

/* Herdeclaraties van de bestaande regels op de variabelen: zelfde selectors en
   zelfde (default)waarden als het origineel, wint puur op laadvolgorde. */

/* --- origineel: inspinia.2.9.2.css --- */

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
  background-color: var(--sb-c-primary-dark);
}
.btn-primary.btn-outline {
  color: var(--sb-c-primary);
}
.btn-primary {
  background-color: var(--sb-c-primary-dark);
  border-color: var(--sb-c-primary-dark);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--sb-c-primary-darker);
  border-color: var(--sb-c-primary-darker);
}
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--sb-c-primary-darker);
  border-color: var(--sb-c-primary-darker);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--sb-c-primary-darker);
  border-color: var(--sb-c-primary-darker);
}
.btn-success.btn-outline {
  color: var(--sb-c-success);
}
.btn-success {
  background-color: var(--sb-c-success);
  border-color: var(--sb-c-success);
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus {
  background-color: var(--sb-c-success-darker);
  border-color: var(--sb-c-success-darker);
}
.btn-success.disabled,
.btn-success:disabled {
  background-color: var(--sb-c-success-darker);
  border-color: var(--sb-c-success-darker);
}
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  background-color: var(--sb-c-success-darker);
  border-color: var(--sb-c-success-darker);
}
.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link.active,
.open .dropdown-toggle.btn-link {
  color: var(--sb-c-primary);
}
.label-primary,
.badge-primary {
  background-color: var(--sb-c-primary-dark);
}
.page-item.active .page-link {
  background-color: var(--sb-c-primary-dark);
  border-color: var(--sb-c-primary-dark);
}
.pagination .footable-page.active a {
  background-color: var(--sb-c-primary-dark);
  border-color: var(--sb-c-primary-dark);
}
.fc-state-active {
  background-color: var(--sb-c-primary-dark);
  border-color: var(--sb-c-primary-dark);
}
.fc-event a {
  background-color: var(--sb-c-primary-dark);
  border-color: var(--sb-c-primary-dark);
}
.fc-event,
.fc-agenda .fc-event-time {
  background-color: var(--sb-c-primary-dark);
  border-color: var(--sb-c-primary-dark);
}
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
  background-color: var(--sb-c-primary-dark);
  border-color: var(--sb-c-primary-dark);
}
.pace .pace-progress {
  background: var(--sb-c-primary);
}
/* spin-kit laadindicator (alleen de wave-variant wordt gebruikt, o.a. offerte/premieoverzicht
   en de net-fw-rapportages); ook in style.css, waarde-identiek */
.sk-spinner-wave div {
  background-color: var(--sb-c-primary-dark);
}
.form-control:focus,
.single-line:focus {
  border-color: var(--sb-c-primary);
}
.noUi-connect {
  background: none repeat scroll 0 0 var(--sb-c-slider-connect-bg);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--sb-c-primary);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--sb-c-primary-dark);
}
.dropzone {
  border: 1px dashed var(--sb-c-primary);
}
.navy-bg,
.bg-primary {
  background-color: var(--sb-c-primary-dark) !important;
}
.panel-primary {
  border-color: var(--sb-c-primary-dark);
}
.panel-primary > .panel-heading {
  background-color: var(--sb-c-primary-dark);
  border-color: var(--sb-c-primary-dark);
}
.progress-bar {
  background-color: var(--sb-c-primary-dark);
}
.text-navy {
  color: var(--sb-c-primary) !important;
}

/* --- origineel: surebusiness.css --- */

.loader-blockui {
  border-top: 8px solid var(--sb-c-primary-darker);
}
.btn.btn-white {
  color: var(--sb-c-accent);
}
.skin-1 .spin-icon {
  background: var(--sb-c-accent-dark) !important;
}
#ontwikkelinternbtn:hover {
  color: var(--sb-c-accent);
}
.acceptatiedetails .ibox-neutraal .inhoud,
#winkelmandwrap .ibox-neutraal .inhoud,
.winkelmandlogwrapper .ibox-neutraal .inhoud {
  border-bottom: 1px solid var(--sb-c-accent);
}
.filedownload-wrapper .fader {
  background-color: var(--sb-c-accent-dark);
}
.surebusiness {
  color: var(--sb-c-accent) !important;
}
.surebusiness-onder {
  border-bottom: 1px solid var(--sb-c-accent) !important;
}
.surebusiness-bg {
  background-color: var(--sb-c-accent-bg);
}
.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
  border-color: var(--sb-c-primary) !important;
}
.select2-drop-active {
  border-color: var(--sb-c-primary);
}
.select2-container--default.select2-container--open.select2-container--below
  .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below
  .select2-selection--multiple {
  border-top-color: var(--sb-c-primary);
  border-left-color: var(--sb-c-primary);
  border-right-color: var(--sb-c-primary);
}
.select2-container--default.select2-container--open.select2-container--above
  .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above
  .select2-selection--multiple {
  border-bottom-color: var(--sb-c-primary);
  border-left-color: var(--sb-c-primary);
  border-right-color: var(--sb-c-primary);
}
.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
  border-color: var(--sb-c-primary);
}
.select2-dropdown.relatiezoeken .ajaxresultaten-relnr {
  color: var(--sb-c-accent);
}
table.sbtabel > tbody > tr.trheader > td {
  border-bottom: 1px solid var(--sb-c-accent);
}
.acceptatiedetails .interneopties,
.interneopties {
  border-bottom: 1px solid var(--sb-c-accent);
}
#rechts-widget .interneopties {
  border-bottom: 1px solid var(--sb-c-accent);
}
.form-control:focus {
  -webkit-box-shadow: 0 0 0 1px var(--sb-c-primary);
  box-shadow: 0 0 0 1px var(--sb-c-primary);
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover {
  color: var(--sb-c-accent);
}
.berekeningmelding {
  background-color: var(--sb-c-accent-dark);
}
.alert-neutraalsb {
  border-color: var(--sb-c-accent);
}
.carousel-indicators li {
  border: 1px solid var(--sb-c-accent);
}
.carousel-indicators .active {
  background-color: var(--sb-c-accent);
}
.beheerboxitemseperator {
  border-bottom: 2px solid var(--sb-c-accent);
  border-top: 2px solid var(--sb-c-accent);
}
.borderbottomsurebusiness {
  border-bottom: 1px solid var(--sb-c-accent);
}
.sb-kopje {
  background-color: var(--sb-c-accent-dark);
}
.tabs-verticaal .tabs-verticaal-nav ul li.active a {
  color: var(--sb-c-accent);
}

/* --- origineel: style.css (oude INSPINIA-build) ---
   Door sb_asp-c alleen gebruikt voor PDF's, maar door sb_net-fw als site-CSS
   gehotlinkt ná inspinia (beide _Layout.cshtml's) — daar wint style.css dus de
   knopkleuren. Deze Bootstrap-3-era state-selectors bestaan niet in
   inspinia.2.9.2.css; op asp-c-pagina's zijn ze waarde-identiek aan de al
   gedekte BS4-varianten (geen visueel effect). De lichtere disabled-tint van
   style.css (#1dc5a3) normaliseert hiermee bewust naar de asp-c-tint, zodat
   sb_net-fw (task 46033) alleen nog scope.css hoeft te linken + de bodyclass
   hoeft te zetten, zonder latere wijzigingen in dit repo. */

.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary,
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary.active:focus {
  background-color: var(--sb-c-primary-darker);
  border-color: var(--sb-c-primary-darker);
}
.btn-primary.disabled:hover,
.btn-primary.disabled:focus,
.btn-primary.disabled:active,
.btn-primary.disabled.active,
.btn-primary[disabled],
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:active,
.btn-primary.active[disabled],
fieldset[disabled] .btn-primary,
fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary:active,
fieldset[disabled] .btn-primary.active {
  background-color: var(--sb-c-primary-darker);
  border-color: var(--sb-c-primary-darker);
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success,
.btn-success:active:focus,
.btn-success:active:hover,
.btn-success.active:hover,
.btn-success.active:focus {
  background-color: var(--sb-c-success-darker);
  border-color: var(--sb-c-success-darker);
}
.btn-success.disabled,
.btn-success.disabled:hover,
.btn-success.disabled:focus,
.btn-success.disabled:active,
.btn-success.disabled.active,
.btn-success[disabled],
.btn-success[disabled]:hover,
.btn-success[disabled]:focus,
.btn-success[disabled]:active,
.btn-success.active[disabled],
fieldset[disabled] .btn-success,
fieldset[disabled] .btn-success:hover,
fieldset[disabled] .btn-success:focus,
fieldset[disabled] .btn-success:active,
fieldset[disabled] .btn-success.active {
  background-color: var(--sb-c-success-darker);
  border-color: var(--sb-c-success-darker);
}