:root {
    /* ========== LOGO URL'S IN VARIABELE ZETTEN ========== */
    
    /* 
       Klant logo zoals je deze hebt geupload bij APR code 'KLANT_THEMA_MAIN_LOGO' en 'KLANT_THEMA_ALT_LOGO'
       De URL op Dev, bugfix en test is net wat anders dan op productie: 
       - DEV:    https://dev.compucase.nl/ords/appdevelop/10001/huisstijl/asset/main
                 https://dev.compucase.nl/ords/appdevelop/10001/huisstijl/asset/alt
       - BUGFIX: https://bugfix.compucase.nl/ords/appbugfix/10001/huisstijl/asset/main
                 https://bugfix.compucase.nl/ords/appbugfix/10001/huisstijl/asset/alt
       - TEST:   https://test.compucase.nl/ords/apptest/10001/huisstijl/asset/main
                 https://test.compucase.nl/ords/apptest/10001/huisstijl/asset/alt

       Op productie (incl. demo omgevingen) is dit:
       - MAIN: https://[DOMEIN]/ords/[APP_ID]/huisstijl/asset/main
       - ALT:  https://[DOMEIN]/ords/[APP_ID]/huisstijl/asset/alt
    */

    --cce-klant-logo: url('https://demo2.compucase.nl/ords/30011/huisstijl/asset/main');
    /* --cce-klant-logo-alt: url('https://dev.compucase.nl/ords/appdevelop/10001/huisstijl/asset/alt'); */

    /* ========== DEFAULT KLEUREN ========== */

    /* Tip om snel de kleuren om te zetten naar de huisstijl van de klant: 
       - Pas voor iedere set kleuren de EERSTE kleur aan naar de gewenste kleur.
       - Onderstaande sets kleuren kopiëren en in een AI tool gooien met de volgende prompt: 
         "Pas de light, dark, contrast en RGB kleuren aan op basis van de eerste kleur in de set. 
         Indien de contrast kleur niet voldoet aan lighthouse standaarden, geef een alternatief advies."
    */

    /* Zet primaire kleuren */
    --primary-color: #013B75;
    --primary-color-light: #0152A3; /* ~ 10% lichter */
    --primary-color-dark: #01284F;  /* ~ 10% donkerder */
    --primary-contrast: #ffffff;

    /* Zet primaire RGB kleuren voor RGBA gebruik */
    --primary-color-rgb: 1, 59, 117;
    --primary-contrast-rgb: 255, 255, 255;

    /* Zet accent kleuren */
    --accent-color: #9AC218;
    --accent-color-light: #B5E22A; /* ~ 10% lichter */
    --accent-color-dark: #749314;  /* ~ 10% donkerder */
    --accent-contrast: #ffffff;

    /* Zet accent RGB kleuren voor RGBA gebruik */
    --accent-color-rgb: 154, 194, 24;
    --accent-contrast-rgb: 255, 255, 255;

    /* Zet tertiaire kleuren */
    --tertiary-color: #137E3D;
    --tertiary-color-light: #18A34F; /* ~ 10% lichter */
    --tertiary-color-dark: #0D582B;  /* ~ 10% donkerder */
    --tertiary-contrast: #ffffff;

    /* Zet tertiaire RGB kleuren voor RGBA gebruik */
    --tertiary-color-rgb: 19, 126, 61;
    --tertiary-contrast-rgb: 255, 255, 255;


    /* ========== DEFAULT HEADER VARIABELEN ========== */

    /*  Navigatie bovenste balk kleuren */
    --cce-nav-top-bg-color: var(--primary-contrast);
    --cce-nav-top-text-color: var(--primary-color);

    /*  Navigatie onderste balk achtergrondkleur */
    --cce-nav-bottom-bg-color: var(--accent-color);
    --cce-nav-bottom-text-color: var(--accent-contrast);

    /* Navigatie actief item kleuren  */
    --cce-active-menu-bg-color: var(--tertiary-color);
    --cce-active-menu-text-color: var(--tertiary-contrast);

    /* Navigatie submenu hover kleuren */
    --cce-active-submenu-bg-color: var(--accent-color);
    --cce-active-submenu-text-color: var(--accent-contrast);

    /* Link caret (pijl naar beneden) icoon kleuren */
    /* Caret default */
    --cce-menu-icon-color: var(--accent-contrast);
    --cce-menu-icon-border-color: rgba(var(--accent-contrast-rgb), 0.6);
    --cce-menu-icon-bg-color: var(--accent-color);

    /* Caret actief (submenu open) */
    --cce-active-menu-icon-color: var(--accent-contrast);
    --cce-active-menu-icon-border-color: rgba(var(--accent-contrast-rgb), 0.6);
    --cce-active-menu-icon-bg-color: var(--accent-color);
    
    /* Caret open menu item, meestal hetzelfde als de actieve kleuren hierboven */
    --cce-open-menu-icon-color: var(--cce-active-menu-icon-color);
    --cce-open-menu-icon-border-color: var(--cce-active-menu-icon-border-color);
    --cce-open-menu-icon-bg-color: var(--cce-active-menu-icon-bg-color);

    /* Dropdown navigatie link seperator */
    --cce-menu-seperator-color: rgba(var(--primary-contrast-rgb), .75);

    /* Navigatiebalk bedrijfsnaam kleuren en display (om te verbergen) */
    --cce-logo-bedrijfsnaam-bg-color: var(--primary-color-light);
    --cce-logo-bedrijfsnaam-text-color: var(--primary-contrast);
    --cce-bedrijfsnaam-display: none;

    /* Logo hoogte en breedte 
       Om logo's goed uit te laten lijnen, de volgende combinaties gebruiken, niet op een andere manier:
       - Schaalbare hoogte = auto, schaalbare breedte = auto, maximale breedte = waarde (zoals 156px)
       - Schaalbare hoogte = waarde (zoals 40px), schaalbare breedte = auto, maximale breedte = 400px
    */
    --ut-header-logo-height: auto; /* Schaalbare hoogte */
    --image-width: auto;           /* Schaalbare breedte */
    --cce-max-logo-width: 80px;    /* Maximale breedte */
	--cce-logo-height: var(--ut-header-logo-height); /* Niet aanpassen, is nodig als core override in de applicatie */


    /* ========== DEFAULT OVERIGE (IN APP) VARIABELEN ========== */

    /* Hero icoon achtergrond en tekstkleur */
    --ut-hero-region-icon-background-color: var(--accent-color); /* LET OP: Deze kleur heeft ook effect de icoontjes bij "Laatst bekeken" */
    --ut-hero-region-icon-text-color: var(--accent-contrast);

    /* Anchortag (link) kleur voor vrijwel alle non-button links */
    --ut-link-text-color: var(--primary-color-dark);


    /* ========== DEFAULT LOGIN SCHERM VARIABELEN ========== */

    --cce-logo-height-login: 100%;
    --cce-login-header-bg-color: var(--primary-contrast);
    --cce-login-header-text-color: var(--primary-contrast);
    --cce-login-header-text-display: none;
    --ut-login-region-background-color: var(--primary-contrast);
    --cce-tabs-bg-color: rgba(var(--primary-color-rgb), 0.1);
    --cce-tabs-hover-bg-color: rgba(var(--primary-color), 0.2);
    --cce-tabs-text-color: black;
}

/* ========== CUSTOM OVERRIDES T.B.V. HUISSTIJL CONSISTENTIE ========== */

/* Button hot, is standaard de accent kleur */
.t-Button--hot {
    --a-button-background-color: var(--accent-color);
    --a-button-text-color: var(--primary-contrast);
    --a-button-hover-background-color: var(--accent-color);
    --a-button-hover-text-color: var(--accent-contrast);
    --a-button-active-background-color: var(--accent-color);
	--ut-focus-outline-color: var(--accent-color-light);
}

/* Logo applicatie */
.t-Header-logo img {
    width: var(--image-width);
    height: var(--cce-logo-height);
    content: var(--cce-klant-logo);
    position: relative;
    
    /* Bij sommige klantlogo's is handmatige positie manipulatie vereist, kan je hieronder mee sturen */
    left: 0;
    top: 0;
}

/* Logo inlogscherm */
#cce_login_logo {
    width: var(--image-width);
    height: var(--cce-logo-height-login);
    content: var(--cce-klant-logo);

    /* custom: */
    padding-bottom: 0 !important;
    max-height: 160px !important;
}

/* Login region border kleur override */
.t-Login-region {
    border-color: rgba(var(--primary-color-rgb), 0.3);
}

/* Hover animatie op de login button override */
.t-Login-region #LOGIN_BUTTON:hover {
    background-color: var(--accent-color-dark);
}

/* Zichtbaarheid van de titel op het login scherm */
.t-Login-title .portal-title {
    display: var(--cce-login-header-text-display) !important;
}

/* Hard override voor de meest inner menu bij hover en focus */
.t-Header .t-Header-nav .t-Header-nav-list .a-Menu-content li:hover, .t-Header .t-Header-nav .t-Header-nav-list .a-Menu-content li:focus-within {
    color: var(--cce-active-submenu-text-color) !important;
}

/* Custom achtergrond voor icon op de add-widget op de homepage (alleen zichtbaar als er nog geen widgets zijn) */
#cce_add_widget_card .t-Card-icon span {
    background-color: var(--accent-color);
}

/* Divider tussen de menu items (zie workflows submenu) kleur override */
.a-Menu-content .a-Menu-itemSep .a-Menu-hSeparator {
    border-color: var(--cce-menu-seperator-color) !important;
}

/* Achtergrond kleur voor grouped radiobuttons (bijv. zoals bij instellingen) override */
.t-Form-fieldContainer--radioButtonGroup .apex-item-radio input:checked + label {
    background-color: var(--accent-color) !important;
    color: var(--accent-contrast) !important;
}


/* ========== KLANT SPECIFIEKE OVERRIDES ========== */

/* Zet hier alle overige CSS overrides die klant specifiek zijn en niet passen binnen de bestaande override classes */

.t-Login-region .t-Login-header {
    padding-bottom: 0 !important;
}