/*  ------------------------------------------------------------------------------------
    BRAVX CUSTOMER PORTAL
    Production-proof CSS
    - Scoped selectors
    - Bootstrap 5 compatible
    - Old design behavior restored
------------------------------------------------------------------------------------ */


/* =========================
   DESIGN TOKENS
========================= */

@font-face {
    font-family: "PP Neue Machina";
    src: url("/PPNeueMachina-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

:root {
    --bravx-green: rgb(2, 121, 98);
    --bravx-bright-green: rgb(0, 170, 124);
    --bravx-lime: rgb(220, 229, 0);
    --bravx-black: #000000;
    --bravx-white: #ffffff;
    --bravx-light-grey: #f5f5f5;
    --bravx-footer-border: #000000;

    --bravx-header-gradient: linear-gradient(
        90deg,
        rgba(2, 121, 98, 1) 0%,
        rgb(220, 229, 0) 100%
    );

    --bravx-hero-gradient: linear-gradient(
        90deg,
        rgb(0, 0, 0) 0%,
        rgba(0, 170, 124, 1) 100%
    );

    --bravx-radius-sm: 5px;
    --bravx-radius-md: 8px;

    --bravx-shadow-dropdown: 0 10px 24px rgba(0, 0, 0, 0.16);
}


/* =========================
   GLOBAL TYPOGRAPHY
========================= */

html,
body,
body h1 {
    font-family: "PP Neue Machina", sans-serif !important;
}
body h2,
body h3,
body h4,
body h5,
body h6,
body p {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif !important;
}

body {
    margin: 0;
}


/* =========================
   GLOBAL LINK DEFAULTS
   Let op: bewust NIET alle links forceren.
========================= */

a {
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: none;
}


/* =========================
   HEADER / NAVBAR BASE
========================= */

.navbar,
.navbar-static-top,
.navbar-expand-xl {
    background: black;
    /*(--bravx-header-gradient);*/
}

.navbar {
    position: relative;
    z-index: 1000;
    min-height: 60px;
    padding: 0;
    border: none;
}

/* Zorgt dat absolute mobile dropdown correct onder header valt */
.navbar > .container {
    position: relative;
}

/* Header layout: logo links, hamburger rechts */
.navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Brand/logo */
.navbar-brand {
    display: flex;
    align-items: center;
    padding: 10px 0;
    margin: 0;
}

.navbar-brand img {
    max-height: 42px;
    width: auto;
}


/* =========================
   HAMBURGER BUTTON
   Bootstrap 5 + legacy fallback
========================= */

.navbar-toggler,
.navbar-inverse .navbar-toggle,
.navbar-inverse .navbar-toggle.collapsed {
    margin-left: auto;
    background-color: var(--bravx-green);
    border: 1px solid var(--bravx-green);
    border-radius: var(--bravx-radius-sm);
    padding: 8px 10px;
    box-shadow: none;
}

.navbar-toggler:hover,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:active,
.navbar-inverse .navbar-toggle.collapsed:hover,
.navbar-inverse .navbar-toggle.collapsed:focus,
.navbar-inverse .navbar-toggle.collapsed:active {
    background-color: var(--bravx-green);
    border-color: var(--bravx-green);
    box-shadow: none;
}

/* Bootstrap 5 hamburger icon kleur */
.navbar-dark .navbar-toggler-icon {
    filter: none;
}


/* =========================
   DESKTOP NAVIGATION
   Vanaf XL: horizontaal menu rechts, geen hamburger.
========================= */

@media (min-width: 1200px) {

    .navbar-header {
        width: auto;
    }

    .navbar-toggler {
        display: none !important;
    }

    #navbar.navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        justify-content: flex-end;
        align-items: center;
        position: static;
        width: auto;
        max-height: none !important;
        padding: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    #navbar nav.menu-bar {
        margin-left: auto;
    }

    #navbar ul.navbar-nav,
    #navbar ul.nav.navbar-nav.weblinks {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0;
        margin: 0;
        padding: 0;
    }

    #navbar ul.navbar-nav > li,
    #navbar ul.nav.navbar-nav.weblinks > li {
        display: flex;
        align-items: center;
        margin: 0;
        list-style: none;
    }

    /* Oude divider verticale lijn */
    #navbar li.divider-vertical {
        width: 1px;
        height: 20px;
        margin: 0 18px;
        background-color: rgba(255, 255, 255, 0.65);
        display: inline-flex;
    }

    /* Desktop links */
    #navbar ul.navbar-nav > li > a,
    #navbar ul.nav.navbar-nav.weblinks > li > a,
    #navbar .nav-link,
    #navbar .navbar-icon,
    #navbar .dropdown-toggle {
        color: var(--bravx-white) !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        padding: 0;
        background-color: transparent;
    }

    #navbar .username,
    #navbar .drop_language {
        color: var(--bravx-white) !important;
    }

    /* Desktop hover underline */
    #navbar ul.navbar-nav > li > a:hover,
    #navbar ul.navbar-nav > li > a:focus,
    #navbar ul.nav.navbar-nav.weblinks > li > a:hover,
    #navbar ul.nav.navbar-nav.weblinks > li > a:focus {
        color: var(--bravx-white) !important;
        background-image: linear-gradient(
            90deg,
            var(--bravx-lime) 0%,
            var(--bravx-lime) 100%
        );
        background-repeat: no-repeat;
        background-position: 0% 90%;
        background-size: 100% 3px;
        background-color: transparent;
    }
}


/* =========================
   MOBILE / TABLET NAVIGATION
   Onder XL: hamburger rechts, menu full-width.
========================= */

@media (max-width: 1199.98px) {

    .navbar {
        min-height: 74px;
    }

    .navbar > .container {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

    .navbar-header {
        width: 100%;
    }

    .navbar-brand {
        padding: 14px 0;
    }

    .navbar-brand img {
        max-height: 38px;
    }

    .navbar-toggler {
        display: block;
        margin-left: auto;
    }

    /*
       Full width dropdown onder de header.
       Bewust géén sidebar.
    */
    #navbar.navbar-collapse {
        position: absolute;
        top: 100%;
        left: 50%;
        width: 100vw;
        margin-left: -50vw;
        padding: 20px 24px;
        background-color: var(--bravx-white);
        box-shadow: var(--bravx-shadow-dropdown);
        z-index: 9999;
        overflow-y: auto;
    }

    #navbar.navbar-collapse:not(.show) {
        display: none;
    }

    #navbar.navbar-collapse.show {
        display: block;
    }

    #navbar nav.menu-bar {
        width: 100%;
        margin: 0;
    }

    #navbar ul.navbar-nav,
    #navbar ul.nav.navbar-nav.weblinks {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #navbar ul.navbar-nav > li,
    #navbar ul.nav.navbar-nav.weblinks > li {
        width: 100%;
        margin: 0;
        list-style: none;
    }

    #navbar li.divider-vertical {
        display: none;
    }

    /* Mobile menu links: donkere tekst op wit */
    #navbar ul.navbar-nav > li > a,
    #navbar ul.nav.navbar-nav.weblinks > li > a,
    #navbar .nav-link,
    #navbar .navbar-icon,
    #navbar .dropdown-toggle {
        display: block;
        width: 100%;
        color: var(--bravx-black) !important;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
        padding: 10px 0;
        background-color: transparent;
    }

    #navbar .username,
    #navbar .drop_language {
        color: var(--bravx-black) !important;
    }

    #navbar ul.navbar-nav > li > a:hover,
    #navbar ul.navbar-nav > li > a:focus,
    #navbar ul.nav.navbar-nav.weblinks > li > a:hover,
    #navbar ul.nav.navbar-nav.weblinks > li > a:focus {
        color: var(--bravx-black) !important;
        background-color: transparent;
        background-image: linear-gradient(
            90deg,
            var(--bravx-lime) 0%,
            var(--bravx-lime) 100%
        );
        background-repeat: no-repeat;
        background-position: 0% 90%;
        background-size: 100% 3px;
    }
}


/* =========================
   DROPDOWN MENUS
   Taal / profiel / search
========================= */

#navbar .dropdown-menu {
    background-color: var(--bravx-white);
    border: none;
    border-radius: var(--bravx-radius-md);
    box-shadow: var(--bravx-shadow-dropdown);
    padding: 8px 0;
    margin-top: 8px;
}

/* Dropdown items altijd donker op wit */
#navbar .dropdown-menu a,
#navbar .dropdown-menu .dropdown-item {
    color: var(--bravx-black) !important;
    background-color: transparent;
    font-size: 15px;
    font-weight: 400;
    padding: 9px 16px;
    line-height: 1.4;
}

#navbar .dropdown-menu a:hover,
#navbar .dropdown-menu a:focus,
#navbar .dropdown-menu .dropdown-item:hover,
#navbar .dropdown-menu .dropdown-item:focus {
    color: var(--bravx-black) !important;
    background-color: var(--bravx-light-grey);
    background-image: none;
}

/* Mobile dropdowns moeten binnen full-width menu blijven */
@media (max-width: 1199.98px) {
    #navbar .dropdown-menu {
        position: static;
        width: 100%;
        box-shadow: none;
        border-radius: var(--bravx-radius-sm);
        margin: 4px 0 12px 0;
        padding: 6px 0;
        background-color: var(--bravx-white);
    }

    #navbar .dropdown-menu a,
    #navbar .dropdown-menu .dropdown-item {
        color: var(--bravx-black) !important;
        padding: 10px 16px;
    }
}


/* =========================
   SEARCH DROPDOWN
========================= */

#navbar .dropdown-search {
    min-width: 280px;
    padding: 12px;
}

@media (max-width: 1199.98px) {
    #navbar .dropdown-search {
        min-width: 0;
        width: 100%;
    }
}


/* =========================
   HERO / TOP SECTION
========================= */

.row.sectionBlockLayout.text-left {
    background: var(--bravx-hero-gradient);
    color: var(--bravx-white);
}

/* Meestal staat de tekst in nested columns; deze styling is bewust scoped */
.row.sectionBlockLayout.text-left h1,
.row.sectionBlockLayout.text-left h2 {
    color: var(--bravx-white);
    font-weight: 700;
}

.row.sectionBlockLayout.text-left p {
    color: var(--bravx-black);
}


/* =========================
   BUTTONS
========================= */

.button1,
.btn.btn-primary {
    border-radius: var(--bravx-radius-sm);
    border: none;
    color: var(--bravx-white);
    background: var(--bravx-green);
}

.button1:hover,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    color: var(--bravx-white);
    background: var(--bravx-green);
}

.button1:hover {
    transform: scale(1.02) perspective(1px);
}


/* =========================
   LOGIN / CONTENT LINKS
========================= */

/* Login page algemene content links */
div#content a {
    color: var(--bravx-black);
}

/* Ticket list selection menu */
a.selected-view.dropdown-toggle {
    color: var(--bravx-bright-green);
}

/* Ticket list links */
.table.table-striped.table-fluid a {
    color: var(--bravx-bright-green);
}


/* =========================
   FORMS / LOOKUPS / DEFAULT BUTTONS
========================= */

div#content a.btn.btn-default,
.btn.btn-default.launchentitylookup,
.btn.btn-default.btn-hg,
.modal-footer .cancel.btn.btn-default,
.btn.btn-default.pull-right.remove-value {
    color: var(--bravx-bright-green);
    border-radius: var(--bravx-radius-sm);
    border: 1px solid var(--bravx-bright-green);
    background-color: transparent;
}

/* Lookup buttons height */
.btn.btn-default.launchentitylookup {
    height: 35px;
}

div#content a.btn.btn-default:hover,
div#content a.btn.btn-default:focus,
.btn.btn-default.launchentitylookup:hover,
.btn.btn-default.launchentitylookup:focus,
.btn.btn-default.launchentitylookup:active,
.btn.btn-default.btn-hg:hover,
.btn.btn-default.btn-hg:focus,
.btn.btn-default.btn-hg:active,
.modal-footer .cancel.btn.btn-default:hover,
.modal-footer .cancel.btn.btn-default:focus,
.btn.btn-default.pull-right.remove-value:hover,
.btn.btn-default.pull-right.remove-value:focus {
    color: var(--bravx-bright-green);
    border-color: var(--bravx-bright-green);
    background-color: transparent;
}

.notes .modifiedon,
.notes .createdby {
    display: none !important;
    border: none !important;
}

.notes .description,
.notes .description p,
.notes .metadata,
.notes .modifiedon,
.notes .postedon,
.notes .from h5 {
    color: #212529 !important;
}

.notes .attachement-outer-border {
    border: 1px solid #dee2e6;
    padding: 12px;
    margin-top: 10px;
    border-radius: 6px;
}

.notes .from h5 {
    margin-bottom: 8px;
}

.notes .attachment-outer-border {
    border: none !important;
    box-shadow: none !important;
}


/* =========================
   MODALS / LOOKUP POPUPS
   Belangrijk: selectors zijn scoped, dus geen site-wide link leaks.
========================= */

.modal-body a,
.modal-body a:hover,
.modal-body a:active,
.modal-body a:focus,
.modal-body a:visited {
    color: var(--bravx-bright-green);
}

.modal-body table.table-fluid.table-hover a {
    color: var(--bravx-bright-green);
}

.modal-body .view-toolbar.grid-actions.clearfix ul li a {
    color: var(--bravx-bright-green);
}

/* Close form with X */
.form-close span {
    background-color: transparent;
}


/* =========================
   FOOTER
   Fix tegen blauwe Bootstrap links.
========================= */

.footer {
    height: 50px;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    /* border-top: 1px solid var(--bravx-footer-border); */
}

/* Footer tekst */
footer.footer p,
footer.footer p span {
    font-size: 11px;
}

/* Footer links expliciet scopen */
footer.footer a,
footer.footer a:hover,
footer.footer a:active,
footer.footer a:focus,
footer.footer a:visited {
    color: var(--bravx-black) !important;
    text-decoration: none;
}


/* =========================
   DATEPICKER
========================= */

.bootstrap-datetimepicker-widget button {
    color: var(--bravx-black);
}


/* =========================
   DATAVERSE / POWER PAGES FORMS
========================= */

.crmEntityFormView td.cell {
    vertical-align: bottom;
}


/* =========================
   ACCESSIBILITY / FOCUS
========================= */

/* Alleen zichtbare focus, zonder layout te breken */
#navbar a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 2px dashed var(--bravx-lime);
    outline-offset: 3px;
}


/* =========================
   SAFETY OVERRIDES
   Voorkomt oude Bootstrap/Power Pages overrides.
========================= */

/* Header links nooit blauw */
.navbar a,
.navbar a:hover,
.navbar a:focus,
.navbar a:active,
.navbar a:visited {
    text-decoration: none;
}

/* Dropdown links mogen niet wit worden door globale navbar styling */
.navbar .dropdown-menu a,
.navbar .dropdown-menu a:hover,
.navbar .dropdown-menu a:focus,
.navbar .dropdown-menu a:active,
.navbar .dropdown-menu a:visited {
    color: var(--bravx-black) !important;
}

/* Search icon kleur per viewport */
@media (min-width: 1200px) {
    #navbar #search,
    #navbar #search span {
        color: var(--bravx-white) !important;
    }
}

@media (max-width: 1199.98px) {
    #navbar #search,
    #navbar #search span {
        color: var(--bravx-black) !important;
    }
}

/* =========================
   FOOTER FIX (OVERRIDE THEME)
========================= */

footer.footer {
    background-color: white !important; /* of #f5f5f5 */
    color: black !important;
}

/* Tekst */
footer.footer p,
footer.footer span {
    color: black !important;
}

/* Links */
footer.footer a,
footer.footer a:hover,
footer.footer a:focus,
footer.footer a:visited {
    color: black !important;
}