/* ======================== CSS VARS ========================= */
/* Naming from Figma file "Belfabriek - Webapp */
:root { 
    --white: #FFF; 
    --grey-1: #FCFCFD;
    --grey-2: #F9FAFB; 
    --grey-3: #F2F4F7;
    --grey-4: #EAECF0;
    --grey-5: #D0D5DD;
    --grey-6: #98A2B3;
    
    --grey-8: #475467; 
    --grey-10: #182230; 

    --black-0: #000000; 
    --black-1: #161616; 
    --black-2: #222222; 
    --black-3: #393939; 
    --black-4: #565656; 

    --bb-green: #8DC63F; 
    --bb-dark-green: #5E9732; 
    --bb-darker-green: #548A2B; 
    --bb-light-green: #DEF0DB; 
    --bb-lighter-green: #E5F3E2; 

    --bb-light-blue: #DBEFFF; 
    --bb-blue: #005397; 

    --bb-red: #E31B23; 
    --bb-dark-red: #BC1B22; 

    --bb-orange: #A14F04; 
    --bb-orange-light: #FCEEDA;
}

/* ======================== NAVIGATION / HEADER ========================= */
.navbar .navbar-start { padding-right: 0; margin-right: 0 ;}
.select:has(#serviceNumber)::after { border-color: #475467; }


/* DARK HEADER COLOR OVERRIDES */
.navbar.is-light.reversed .select.select select,
.navbar.is-light.reversed .navbar-item span { color: white !important; }
.navbar.is-light.reversed .navbar-start a.navbar-item.is-active .icon-text,
.navbar.is-light.reversed .select:has(#serviceNumber)::after { border-color: white; }
.navbar.is-light.reversed .navbar-start .navbar-item:not(.is-active, :hover) { opacity: .8;}

@media only screen and (max-width: 1408px) {
    .navbar > .container { flex-wrap: wrap;}
    .navbar > .container .navbar-brand { margin: 0; }
    .navbar .navbar-start { margin: 0 auto 0 0 !important; padding-left: 0; justify-self: flex-start;}    
}
@media screen and (max-width: 1023px) {
    .navbar .navbar-start {justify-self: stretch;}    
    body.login .navbar {display: none;}
}
@media screen and (max-height: 800px) {
  body.login > .container .section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  body.login > .container .section > div {
    margin-top: 0rem;
  }
}


/* ======================== FOOTER ========================= */
footer > .container > div > div:not(:last-child) { border: none;}

@media only screen and (max-width: 768px) {
    footer > .container > div { flex-wrap: wrap; gap: 1rem 2rem; }
    footer > .container > div p { width: 100%; order: -1; display: flex; flex-wrap: wrap;}
    footer > .container > div p span { font-weight: 600; width: 100%; }
    footer > .container > div a:first-of-type { margin: 0 !important; }
}

/* ======================== LOGIN PAGES ========================= */
body.login span.toggle-password.toggle-password { pointer-events: all; cursor: pointer;}
body.login input[type=password] ~ span.toggle-password + span { display: none; }
body.login div.flags .button { background: none; padding: 0.25rem; height: 2.5rem; width: 2.5rem; border: 2px solid transparent; opacity: .3; transition: opacity 250ms, border 250ms; }
body.login div.flags .button img { margin: 0; width: 100%; height: 100%; }
body.login div.flags .button:is(.is-active-lang,:hover) { border: 2px solid var(--bulma-primary); opacity: 1;}
body.login div.flags:has(.button:hover) .button.is-active-lang:not(:hover) { border: 2px solid transparent; opacity: .3; }

/* ======================== CUSTOM TABS ========================= */
.tabs.is-custom-colored { background: var(--grey-4); border-radius: .5rem; }
.tabs.is-custom-colored li { flex: 1;}
.tabs.is-custom-colored li a { background: var(--grey-4);  border: 3px solid var(--grey-4); border-radius: .5rem;}
.tabs.is-custom-colored li:is(:first-child, :last-child) a { border-radius: .5rem;}
.tabs.is-custom-colored li.is-active a { background: var(--white); border: 3px solid var(--grey-4)}
.tabs.is-custom-colored li:not(.is-active) a:hover { background: var(--grey-1); border: 3px solid var(--grey-4)}
.tabs.is-custom-colored li.is-active span { color: var(--black-1);}

/* ======================== EXTENSIES ========================= */
.has-dropdown.is-active button { background-color: var(--grey-3) !important; border: 1px solid transparent; color: var(--grey-10) !important;}
.has-dropdown.is-active button > * { color: inherit !important;}

/* ======================== CUSTOM BORDER RADIUS ========================= */
.has-custom-border-radius.has-custom-border-radius { border-radius: .5rem;}
.has-custom-border-radius-small.has-custom-border-radius-small { border-radius: .33rem;}
.has-custom-border { border: 1px solid var(--grey-4); }
.select.select select { border-radius: .5rem; box-shadow: none!important; height: 3.06rem;}

/* ======================== COLOR OVERRIDES ========================= */
.button { transition: background-color 250ms, color 250ms;}
.button.is-success { background: var(--bb-dark-green); }
.button.is-success:hover { background: var(--bb-darker-green);}
.button.has-text-danger:hover { color: var(--bb-dark-red) !important;}
.is-custom-blue-panel { background: var(--bb-light-blue); color: var(--bb-blue);}
.has-background-purple-light { background: #E9E4F1; }
.has-text-purple { color: #685788; }
a.panel-block.has-background-light:hover { background: var(--grey-3) !important;}
.custom-info { color: #6E7191 ; }

/* ======================== CUSTOM TABLES ========================= */
table.table.custom { --table-border: 1px solid var(--grey-4);     table-layout: fixed; border-collapse: separate; border-spacing: 0; border-radius: .5rem; background: transparent !important;}
table.table.custom tbody { background: transparent !important;}
table.table.custom tbody td { border-bottom: var(--table-border); border-top: none; border-left: none; border-right: none; border-radius: 0; padding-top: .75rem; padding-bottom: .75rem; } 
table.table.custom tbody td:first-child {  border-left: var(--table-border); }   
table.table.custom tbody td:last-child {  border-right: var(--table-border); border-top: none; border-radius: 0; }   

table.table.custom tbody tr:first-of-type td { border-top: var(--table-border); }
table.table.custom tbody tr:first-of-type td:first-of-type {  border-top: var(--table-border); border-radius: .5rem 0 0 0;}
table.table.custom tbody tr:first-of-type td:last-of-type { border-right: var(--table-border); border-top: var(--table-border); border-radius: 0 .5rem 0 0;}
table.table.custom tbody tr:first-of-type td:only-of-type { border-radius: .5rem .5rem 0 0;}

table.table.custom tbody tr:last-of-type td:first-of-type {  border-bottom: var(--table-border); border-radius: 0 0 0 .5rem;}
table.table.custom tbody tr:last-of-type td:last-of-type { border-right: var(--table-border); border-bottom: var(--table-border); border-radius: 0 0 .5rem 0;}
table.table.custom tbody tr:last-of-type td:only-of-type { border-radius: .5rem .5rem 0 0;}

table.table.custom tbody tr:only-of-type td:first-of-type { border-radius: .5rem 0 0 .5rem;}
table.table.custom tbody tr:only-of-type td:last-of-type { border-radius: 0 .5rem .5rem 0 ;}
table.table.custom tbody tr:only-of-type td:only-of-type { border-radius: .5rem;}
table.table.custom tbody td.is-italic[colspan] { color: var(--grey-8)}

table.table.custom tbody tr:last-of-type td { border-bottom: var(--table-border);}
table.table.custom thead tr th { border: none; color: var(--grey-8); padding-bottom: .25rem; font-size: .9rem;}

table.table.custom tbody tr .buttons a span { color: var(--grey-8);}
table.table.custom tbody tr .buttons a:hover { background: var(--grey-3);}

/* ALTERNATIVE STYLING */
table.table.custom.alt-table { table-layout: auto; border-spacing: 0 .5rem; }
table.table.custom.alt-table tbody tr td { border-top: var(--table-border); border-bottom: var(--table-border);}
table.table.custom.alt-table tbody tr td:first-of-type { border-radius: .5rem 0 0 .5rem; border: var(--table-border); border-right: 0; }
table.table.custom.alt-table tbody tr td:last-of-type { border-radius: 0 .5rem .5rem 0; border: var(--table-border); border-left: 0; }
table.table.custom.alt-table tbody tr td:only-of-type { border-radius: .5rem; border: var(--table-border);}

@media only screen and (max-width: 768px) {
    table.custom { display: block; }
    table.custom tbody  { display: block; width: 100%; position: relative;   border: var(--table-border); border-radius: .5rem;}
    table.custom thead { display: none; }
    table.custom tr { padding: .75rem 1rem;  display: block; }
    table.custom tr:not(:last-of-type) { border-bottom: var(--table-border);}
    table.custom tr > td:last-of-type { font-weight: 600; }
    table.custom td  { display: block; width: 100%; border: none !important; padding: 0 !important }
    
    table.custom:not(.is-overview) tbody { border: none; }
    table.custom:not(.is-overview) tr { display: grid; grid-template-columns: auto auto; gap: .5rem; margin: .5rem 0; border: var(--table-border); border-radius: .5rem;}
    table.custom:not(.is-overview) tr > :is(td:first-of-type,td:last-of-type) { grid-column: -1/1;}
    table.custom:not(.is-overview) td:first-of-type { font-weight: 600;}
    
    table.custom:not(.is-overview) tr > td:first-of-type { grid-column: unset;}
    table.custom:not(.is-overview) tr > td:nth-of-type(2) { display: flex; justify-content: flex-end;   }
}
/* ======================== HELPERS ========================= */
@media only screen and (max-width: 768px) {
    .is-fullwidth-mobile { width: 100%;  }
}

/* ======================== AVAILABILITY SWITCH ========================= */
.switch .custom-switch { position: relative; display: inline-flex; align-items: center;  font-size: .85rem; height: 2.5em; line-height: 1.5;  background: #b5b5b5; padding-inline: 2.75em; border-radius: 100vmin;  transition: 250ms;  width: var(--width); overflow: hidden;}
.switch .custom-switch::before { content: "";  position: absolute; width: 1.64em; height: 1.64em;  border-radius: 50%; background: white; left: 0.5em;    transition: left 250ms, transform 250ms;}
.switch .custom-switch > span { position: absolute; font-weight: 600; color: white; text-align: center; transform: translateY(-1px); flex-shrink: 0;  width: var(--width); left: 0; transition: transform 250ms, opacity 250ms; }
.switch .custom-switch > span:first-of-type { transform: translate(-50%, -1px); padding-right: 2.7em; padding-left: 1em;  opacity: 0;}
.switch .custom-switch > span:last-of-type {  padding-left: 2.7em; padding-right: 1em; }

.switch input:checked ~ .custom-switch { background: var(--bb-dark-green);}
.switch input:checked ~ .custom-switch::before { left: 100%; transform: translateX(calc(-100% - .5em));}
.switch input:checked ~ .custom-switch > span:first-of-type { transform: translate(0, -1px); opacity: 1;}
.switch input:checked ~ .custom-switch > span:last-of-type { transform: translate(50%, -1px); opacity: 0;}


/* ======================== CUSTOM ICONS ========================= */
.is-custom-icon-huge { width: 3rem; height: 3rem; }
.is-custom-icon-huge > i.fas { font-size: 1.25rem; } 


/* ======================== CUSTOM INPUTS ========================= */
input.input { border-radius: .5rem;}
input.color-custom { appearance: auto; -webkit-appearance: color-swatch; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  opacity: 0; }
input.color-custom + input { pointer-events: none; padding-left: 2.5em; text-transform: uppercase; }
input.color-custom ~ span { position: absolute; width: 1.5em; height: 1.5em; background: var(--color-input-color); border-radius: 50%; left: .5em; top: 50%; transform: translateY(-50%); border: 1px solid var(--grey-5);  pointer-events: none;}


/* ======================== INFORMATION TOOLTIP ========================= */
.has-custom-tooltip { max-width: 40rem;}
.has-custom-tooltip > div { display: inline-flex;  position: relative; }
.has-custom-tooltip p { display: inline; max-width: 50rem;}
.has-custom-tooltip button { color: var(--grey-6); background: none; width: 1.25em; height: 1.25em; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: translateY(.25em); font-weight: 500; cursor: pointer;  padding: 0; border: none;}
.has-custom-tooltip img { width: 100%; height: auto; }

.has-custom-tooltip .box { position: absolute; opacity: 0; pointer-events: none; top: 50%; right: -1rem; transform: translate(100%, -2em); z-index: 5; width: max-content; max-width: clamp(20rem, 37vw ,40rem);  box-shadow: none; border: none; filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.12)); background: var(--grey-2); transition: opacity 350ms;}
.has-custom-tooltip .box::after { content: ""; position: absolute; left: 0; top: 1.85em; width: .6em; height: .6em; background: var(--grey-2); transform: translateX(-50%) rotate(45deg); } 
.has-custom-tooltip .box ul { margin: 0; padding-left: 1em; }
.has-custom-tooltip.open .box { opacity: 1; pointer-events: all;}


@media only screen and (max-width: 1215px) {
    .has-custom-tooltip { position: relative; max-width: max-content;}
    .has-custom-tooltip > div { position: static;}
    .has-custom-tooltip .box { top: unset; bottom: 0;  transform: translate(0,100%); max-width: calc(40rem + 1.25em);   width: 100%; }
    .has-custom-tooltip .box::after { top: 0; left: unset; right: 1.35em;  transform: translateY(-50%) rotate(45deg); }
}

@media only screen and (max-width: 650px) {
    .has-custom-tooltip .box { width: calc(100% - 1rem); right: .5rem; bottom: .5rem}
    .has-custom-tooltip .box::after { right: unset; left: 1.35em;  transform: translateY(-50%) rotate(45deg); }

}


/* ======================== PERCENTAGE BARS ========================= */
.percentage-bar {
    text-align: center;
    position: relative;
    border-radius: .33rem;
    background: linear-gradient(
        90deg,
        var(--bb-dark-green) 0%,
        var(--bb-dark-green) var(--percentage),
        var(--bb-light-green) var(--percentage),
        var(--bb-light-green) 100%
    );
}

.percentage-text {
    display: inline-block;
    font-weight: 700;
    background: linear-gradient(
        90deg,
        white 0%,
        white var(--percentage),
        black var(--percentage),
        black 100%
    );
    font-size: .9rem;
    width: 100%; 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


h1.title, h1 {font-weight: 700!important;}
.button { font-size: 1rem; font-weight: 600; }
.label {font-size: 0.9rem; font-weight: 600!important;}

@media (max-width: 1000px) {
    .tabs.is-custom-colored {flex-direction: column;}
}

@media only screen and (min-width: 1024px) and (max-width: 1100px) {
    .navbar .navbar-start .icon-text.px-2 { padding-inline: .25rem !important;}
}

@media only screen and (max-width: 1024px) {
    .select.has-service-number { max-width: unset !important; width: auto !important;}
}

.navbar .navbar-start .select select:hover  { color: #000 !important; }

/* =========================================================== */
/* ===================== THEME OVERRIDES ===================== */
/* =========================================================== */
/* ========================== LIGHT =========================== */
html[data-theme=light] .button.is-white-themed { border-color: var(--bulma-button-border-color);}

/* ========================== ALL BUT LIGHT =========================== */
html:not([data-theme=light]) { --bulma-primary: #008CFF; }
html:not([data-theme=light]) a:hover { color: var(--grey-1);} 
html:not([data-theme=light]) .button.is-white-themed { background: white; color: var(--grey-10);  font-weight: 600;}
html:not([data-theme=light]) .button.is-white-themed:hover { background: var(--grey-2); color: var(--grey-10);}
html:not([data-theme=light]) .button.is-white.has-text-danger.has-text-weight-semibold { background: inherit;}

/* ELEMENTS */
html:not([data-theme=light]) .panel-block { border: 1px solid var(--bg-color-light-invert); background: var(--bg-color-light-invert); color: white;}
html:not([data-theme=light]) footer { background: none; border-top: 1px solid rgba(22, 22, 22, 0.6) !important; }
html:not([data-theme=light]) footer a.has-text-dark { color: var(--grey-10) !important;}
html:not([data-theme=light]) .content.has-background-light { background: var(--bg-color-light-invert) !important; }
html:not([data-theme=light]) .switch[type="checkbox"] + label::before, html:not([data-theme=light]) .switch[type="checkbox"] + label::before { background: var(--black-4); } 
html:not([data-theme=light]) a.panel-block.has-background-light:hover { background: rgba(255,255,255,0.2) !important;}
html:not([data-theme=light]) span.no-click { color: var(--grey-10);}
html:not([data-theme=light]) span.no-click:hover { color: var(--grey-8) !important;}

/* COLORS */
html:not([data-theme=light]) .has-text-grey-dark { color: var(--grey-5) !important;}
html:not([data-theme=light]) .has-text-dark { color: var(--grey-3) !important;}
html:not([data-theme=light]) .has-background-light { background: var(--bg-color-light-invert) !important;}

/* TABLE */
html:not([data-theme=light]) table.table.custom tbody td.is-italic[colspan] { color: var(--grey-5); }
html:not([data-theme=light]) table.table.custom thead tr th { color: var(--grey-5); }

/* CUSTOMS */
html:not([data-theme=light]) .custom-info { color: var(--grey-5) ; }
html:not([data-theme=light]) .switch .custom-switch { background: rgba(255,255,255,0.2) }
html:not([data-theme=light]) .has-custom-border { border: 1px solid var(--bg-color-light-invert); }

/* ========================== DARK =========================== */
[data-theme=dark] body { background: var(--black-2); }
[data-theme=dark] { 
    --bulma-primary: #008CFF;
    --bulma-table-background-color: var(--black-4); 
}
/* ELEMENTS */
[data-theme=dark] .panel-block { border: 1px solid var(--black-3); background: var(--black-2);}
[data-theme=dark] footer { background: none; border-top: 1px solid var(--black-1) !important; }
[data-theme=dark] footer a.has-text-dark { color: white !important;}
[data-theme=dark] .content.has-background-light { background: var(--bg-color-light-invert) !important; }
[data-theme=dark] .switch[type="checkbox"] + label::before, [data-theme=dark] .switch[type="checkbox"] + label::before { background: var(--black-4); } 
[data-theme=dark] a.panel-block.has-background-light:hover { background: var(--black-4) !important;}

/* COLORS */
[data-theme=dark] .has-text-grey-dark { color: var(--grey-5) !important;}
[data-theme=dark] .has-text-dark { color: var(--grey-3) !important;}
[data-theme=dark] .has-background-light { background: var(--black-3) !important;}

/* TABLE */
[data-theme=dark] table.table.custom tbody td.is-italic[colspan] { color: var(--grey-5); }
[data-theme=dark] table.table.custom thead tr th { color: var(--grey-5); }

/* CUSTOMS */
[data-theme=dark] .custom-info { color: var(--grey-5) ; }
[data-theme=dark] .switch .custom-switch { background: var(--black-3); }
[data-theme=dark] .has-custom-border { border: 1px solid var(--black-4); }