/* ================================
   Generic theme
   V1 – generic variables to allow reuse across projects
   ================================ */

/* Variable mapping (old -> new)
   --normec-navy            -> --brand-dark
   --normec-orange          -> --brand-primary
   --normec-orange-hover    -> --brand-primary-hover
   --lab-teal               -> --sidebar-bg
   --lab-teal-light         -> --sidebar-hover
   --lab-teal-dark          -> --sidebar-dark
   --lab-menu-group-bg      -> --menu-group-bg
   --lab-menu-item-bg       -> --menu-item-bg
   --lab-menu-item-font-weight -> --menu-item-font-weight
   --lp-splash-bg           -> --splash-bg
   --lp-splash-circle       -> --splash-circle
   --lp-splash-ring         -> --splash-ring
   --lp-splash-text         -> --splash-text
*/

:root {
    /* Brand colors */
    --brand-dark: #003a70; /* was --normec-navy */
    --brand-primary: #e87722; /* was --normec-orange */
    --brand-primary-hover: #cf6c28; /* was --normec-orange-hover */

    /* Sidebar / menu */
    --sidebar-bg: #115757;          /* was --lab-teal */
    --sidebar-hover: #1a6c6c;    /* was --lab-teal-light */
    --sidebar-dark: #0d4747;     /* was --lab-teal-dark */

    /* Header buttons */
    --header-btn-bg: var(--brand-primary);
    --header-btn-hover-bg: rgba(0, 0, 0, 0.25);
    --header-btn-border: var(--brand-primary);
    --header-btn-text: #ffffff;

    /* Header logo */
    --header-logo-height: 20px;

    /* Sidebar menu icons: 16px since the line icons of the pat-* family (icons and colour 23-10); a 1.5 line looked thin at 14px. */
    --sidebar-icon-size: 16px;

    /* Menu group/item variables */
    --menu-group-bg: var(--sidebar-bg);
    --menu-item-bg: var(--sidebar-bg);
    --menu-item-font-weight: 400; /* 200 was hard to read at 14 px (aanbevelingen 24-09, 4.7.1) */

    /* Layout & text */
    --layout-bg: #f4f5f7;
    --text-dark: #1f2933;

    /* Bootstrap / DX coupling */
    --bs-primary: var(--brand-primary);
    --dxbl-accent-color: var(--brand-primary);
    --bs-body-bg: var(--layout-bg);
    --bs-body-color: var(--text-dark);

    /* Splash screen */
    --splash-bg: #115757;      /* was --lp-splash-bg */
    --splash-circle: #f4f5f7;  /* was --lp-splash-circle */
    --splash-ring: #e87722;    /* was --lp-splash-ring */
    --splash-text: #f4f5f7;    /* was --lp-splash-text */
}

/* --------------------------------------------------------------
   2. Body
   -------------------------------------------------------------- */
body {
    margin: 0;
    background-color: var(--layout-bg);
    color: var(--text-dark);
    font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.9rem;
}

/* --------------------------------------------------------------
   3. Header (topbar) – brand primary
   -------------------------------------------------------------- */
body .header.navbar-dark {
    background-color: var(--brand-primary) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    min-height: 52px;
}

body .header .xaf-view-caption-lg {
    font-weight: 400 !important;
    font-size: 0.95rem !important;
    letter-spacing: .02em;
    color: #ffffff !important;
}

body .header .btn-header {
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
}

body .header .btn-header:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Header logo bigger */
.header .header-left-side .header-logo {
    height: var(--header-logo-height);
    width: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin-left: 8px;
}

/* Center logo/title better in header */
.header .header-left-side {
    display: flex;
    align-items: center;
}

/* Toolbar buttons in header */
body .header .dxbl-toolbar-btn,
body .header .dxbl-btn {
    background-color: var(--header-btn-bg) !important;
    border: 1px solid var(--header-btn-border) !important;
    color: var(--header-btn-text) !important;
    height: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body .header .dxbl-toolbar-btn:hover,
body .header .dxbl-btn:hover {
    background-color: var(--header-btn-hover-bg) !important;
}

body .header .dxbl-toolbar-btn.dxbl-disabled,
body .header .dxbl-btn.dxbl-disabled {
    opacity: 0.6;
}

/* Icons in header toolbar white */
body .header .dxbl-toolbar-btn .dxbl-image,
body .header .dxbl-toolbar-btn img {
    /* Do not force header icons to white here; keep their default appearance */
    -webkit-filter: none !important;
    filter: none !important;
    color: inherit !important;
    fill: currentColor !important;
}

/* Account and settings buttons in header */
body .header .btn-header,
body .header .account-button,
body .header .theme-button {
    height: 36px !important;
    min-height: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
}

/* Wider bell button (notifications) */
body .header .dxbl-toolbar-btn[data-action-name="0"],
body .header .dxbl-toolbar-btn[title*="No Items"] {
    min-width: 60px !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Ensure the header caption occupies remaining space and truncates */
.header .header-right-side > [role="heading"] {
    min-width: 0; /* allow flex children to shrink properly */
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}
.header .header-right-side > [role="heading"] .view-caption-root {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}
.header .header-right-side .xaf-caption-container,
.view-caption-root .xaf-caption-container {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100%;
}

/* --------------------------------------------------------------
   4. Sidebar – flat, no rounded corners
   -------------------------------------------------------------- */

/* Base color entire column */
body .xaf-sidebar {
    background-color: var(--sidebar-bg) !important;
    color: #ffffff !important;
}

/* Remove margins/gaps around groups */
body .xaf-sidebar .dxbl-accordion-group {
    margin: 0;
    border: none;
}

/* Ensure all containers show the same sidebar color */
body .xaf-sidebar .dxbl-group-header,
body .xaf-sidebar .dxbl-group-body,
body .xaf-sidebar .dxbl-accordion-items-container,
body .xaf-sidebar .xaf-nav-item {
    background-color: var(--menu-item-bg) !important;
    border: none !important;
}

/* ------- Group headers ------- */
body .xaf-sidebar .dxbl-accordion-group-header {
    padding: 0;
    margin: 0;
    background-color: var(--menu-group-bg) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

body .xaf-sidebar .dxbl-accordion-group-header .dxbl-accordion-item-content {
    background-color: var(--menu-group-bg) !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0.5rem 0.9rem 0.5rem 0.7rem;
}

body .xaf-sidebar .dxbl-accordion-group-header .dxbl-text,
body .xaf-sidebar .dxbl-accordion-group-header .xaf-nav-link span {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* ------- Items ------- */
body .xaf-sidebar .dxbl-accordion-item > .dxbl-accordion-item-content,
body .xaf-sidebar .dxbl-accordion-item a.dxbl-accordion-item-content {
    background-color: var(--menu-item-bg) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0.65rem 0.9rem 0.65rem 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Remove indent of menu-items */
body .xaf-sidebar .dxbl-accordion-item-indent {
    display: none !important;
}

/* Hide expand button container */
body .xaf-sidebar .dxbl-accordion-group-expand-btn-container {
    display: none !important;
}

/* Item text */
body .xaf-sidebar .dxbl-accordion-item-content .dxbl-text,
body .xaf-sidebar .dxbl-accordion-item-content .xaf-nav-link span {
    color: #ffffff !important;
    font-weight: var(--menu-item-font-weight);
    font-size: 0.9rem;
}

/* No underlines on titles/items in navigation */
body .xaf-sidebar .dxbl-accordion-item-content,
body .xaf-sidebar .dxbl-accordion-item-content:focus,
body .xaf-sidebar .dxbl-accordion-item-content:hover,
body .xaf-sidebar .dxbl-accordion-item-content .xaf-nav-link,
body .xaf-sidebar .dxbl-accordion-item-content .dxbl-text,
body .xaf-sidebar .xaf-nav-link span {
    text-decoration: none !important;
}

/* Hover → slightly lighter */
body .xaf-sidebar .dxbl-accordion-item > .dxbl-accordion-item-content:hover,
body .xaf-sidebar .dxbl-accordion-item a.dxbl-accordion-item-content:hover {
    background-color: var(--sidebar-hover) !important;
}

/* Active item → darker, with an orange stripe of 3px on the left (icons and colour 23-10) */
body .xaf-sidebar .dxbl-accordion-item.dxbl-active > .dxbl-accordion-item-content,
body .xaf-sidebar .dxbl-accordion-item-content[aria-selected="true"] {
    background-color: var(--sidebar-dark) !important;
    box-shadow: inset 3px 0 0 var(--brand-primary);
}

/* --------------------------------------------------------------
   5. Search at top of sidebar – flat, same dark color
   -------------------------------------------------------------- */

/* Whole filter group darker */
body .xaf-sidebar .dxbl-accordion-group.dxbl-accordion-filter,
body .xaf-sidebar .dxbl-accordion-group.dxbl-accordion-filter .dxbl-group-header {
    background-color: var(--sidebar-dark) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Inner container */
body .xaf-sidebar .dxbl-accordion-group.dxbl-accordion-filter .dxbl-navigation-filter {
    padding: 0.35rem 0.4rem;
    background-color: transparent !important;
}

/* Input */
body .xaf-sidebar .dxbl-navigation-filter .dxbl-text-edit-input {
    background-color: var(--sidebar-dark) !important;
    border-radius: 0 !important;
    border: none !important;
    color: #ffffff !important;
}

/* Placeholder */
body .xaf-sidebar .dxbl-navigation-filter .dxbl-text-edit-input::placeholder {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Search button */
body .xaf-sidebar .dxbl-navigation-filter .dxbl-btn-icon {
    border-radius: 0 !important;
    background-color: var(--sidebar-dark) !important;
    border: none !important;
    color: #ffffff !important;
}

body .xaf-sidebar .dxbl-navigation-filter .dxbl-btn-icon:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* --------------------------------------------------------------
   6. Icons in sidebar – single color (white)
   -------------------------------------------------------------- */
/* Target both raster images and inline/external SVGs used by DevExpress components (only inside sidebar) */
body .xaf-sidebar img.dxbl-image.image.xaf-nav-menu-item-icon,
body .xaf-sidebar img.xaf-nav-menu-item-icon,
body .xaf-sidebar .xaf-nav-menu-item-icon,
body .xaf-sidebar svg.dxbl-image,
body .xaf-sidebar svg.xaf-nav-menu-item-icon,
body .xaf-sidebar .dxbl-image {
    /* Apply only in sidebar. Use grayscale + brightness to better convert colored raster icons to white. */
    -webkit-filter: grayscale(1) brightness(0) invert(1) !important;
    filter: grayscale(1) brightness(0) invert(1) !important;
    /* increase contrast if needed */
    -webkit-filter: grayscale(1) brightness(0) invert(1) contrast(200%) !important;
    filter: grayscale(1) brightness(0) invert(1) contrast(200%) !important;
    opacity: 0.95 !important;
    width: var(--sidebar-icon-size) !important;
    height: var(--sidebar-icon-size) !important;
    flex-shrink: 0 !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Some SVG sprite symbols use their own fills. Force <use> elements to render white, but only inside the sidebar. */
body .xaf-sidebar svg.dxbl-image use,
body .xaf-sidebar svg.xaf-nav-menu-item-icon use,
body .xaf-sidebar .xaf-nav-menu-item-icon svg use,
body .xaf-sidebar .dxbl-image use {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Ensure raster nav images are forced white (very specific selector, !important) */
body .xaf-sidebar .dxbl-accordion-item-content img.dxbl-image.image.xaf-nav-menu-item-icon {
    -webkit-filter: grayscale(1) brightness(0) invert(1) contrast(200%) !important;
    filter: grayscale(1) brightness(0) invert(1) contrast(200%) !important;
    opacity: 0.95 !important;
    width: var(--sidebar-icon-size) !important;
    height: var(--sidebar-icon-size) !important;
    background-color: transparent !important;
    mix-blend-mode: normal !important; /* fallback */
}

/* Extra fallback: if filter is blocked, use blend mode with a pseudo-element to overlay white */
body .xaf-sidebar .dxbl-accordion-item-content img.dxbl-image.image.xaf-nav-menu-item-icon::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(255,255,255,0) !important; /* noop, placeholder for devtools testing */
}

/* The icons of the items inside a group at 85 percent white, the group icons and the active item at 100 percent. */
body .xaf-sidebar .dxbl-accordion-item .dxbl-accordion-item .dxbl-accordion-item-content .xaf-nav-menu-item-icon,
body .xaf-sidebar .dxbl-accordion-item .dxbl-accordion-item .dxbl-accordion-item-content img.dxbl-image.image.xaf-nav-menu-item-icon {
    opacity: 0.85 !important;
}
body .xaf-sidebar .dxbl-accordion-item.dxbl-active > .dxbl-accordion-item-content .xaf-nav-menu-item-icon,
body .xaf-sidebar .dxbl-accordion-item.dxbl-active > .dxbl-accordion-item-content img.dxbl-image.image.xaf-nav-menu-item-icon,
body .xaf-sidebar .dxbl-accordion-item-content[aria-selected="true"] .xaf-nav-menu-item-icon,
body .xaf-sidebar .dxbl-accordion-item-content[aria-selected="true"] img.dxbl-image.image.xaf-nav-menu-item-icon {
    opacity: 1 !important;
}

/* Hover state: keep icons fully visible */
body .xaf-sidebar .dxbl-accordion-item-content:hover .xaf-nav-menu-item-icon,
body .xaf-sidebar img.dxbl-image.image.xaf-nav-menu-item-icon:hover,
body .xaf-sidebar svg.dxbl-image:hover {
    opacity: 1 !important;
}

/* --------------------------------------------------------------
   7. Content-area & buttons
   -------------------------------------------------------------- */
.app,
.xaf-flex-auto.overflow-hidden.d-flex {
    background-color: var(--layout-bg);
}

/* Primary buttons use brand primary */
.dxbl-btn-primary,
.dxbl-btn.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    border-radius: 999px;
    font-weight: 600;
    padding-inline: 1.1rem;
}

.dxbl-btn-primary:hover,
.dxbl-btn.btn-primary:hover {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

/* Links: teal instead of orange, which reached only 2.7:1 on the light background
   (aanbevelingen 24-09, 4.7.1); teal #1d5c52 reaches 7.8:1. */
a,
.dxbl-link {
    color: #1d5c52;
}

a:hover,
.dxbl-link:hover {
    color: #134039;
}

/* Table headers slightly darker */
table thead th,
.dxbl-grid .dxbl-grid-header {
    color: #2f3b47;
}

/* Reduce font size for grid header captions */
.dxbl-grid .dxbl-grid-header-content span {
    font-size: 0.8rem !important;
}

/* --------------------------------------------------------------
   8. View captions – hide icon and smaller font
   -------------------------------------------------------------- */
/* Hide icon in view caption */
.view-caption-root .xaf-caption-icon-container {
    display: none !important;
}

/* Smaller font for view captions */
.xaf-view-caption-sm,
.xaf-view-caption-lg {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

.xaf-object-caption {
    font-size: 0.85rem !important;
    font-weight: 400 !important;
}

/* View caption container tweaks for better display */
.view-caption-root {
    padding: 0.5rem 1rem !important;
    min-height: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.xaf-caption-container {
    line-height: 1.4 !important;
    width: 100% !important;
    overflow: visible !important;
}

/* Make ellipsis text visible */
.xaf-ellipsis {
    /* restore single-line ellipsis to avoid layout breaks */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* === SPLASH SCREEN STYLING === */

/* Splash background */
.xaf-splash-screen {
    background-color: var(--splash-bg) !important;
}

/* Panel / container */
.dxbl-loading-panel {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Text under loading animation */
.dxbl-loading-panel-caption,
.dxbl-loading-panel-text {
    color: var(--splash-text) !important;
}

/* Icon / circle in center */
.dxbl-loading-panel-icon {
    background-color: var(--splash-circle) !important;
    border: 4px solid var(--splash-ring) !important;
    border-radius: 50% !important;
    position: relative;
}

/* Arc-accent ring animation */
.dxbl-loading-panel-icon::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: var(--splash-circle);
    border-right-color: var(--splash-circle);
    transform: rotate(35deg);
    animation: spin 1.5s linear infinite;
}

/* Spin animation for the arc */
@keyframes spin {
    to {
        transform: rotate(395deg);
    }
}

/* === Preloader Splash overrides (XAF default markup) === */
#applicationLoadingPanel {
    background-color: var(--splash-bg) !important;
}

#applicationLoadingPanel .loading-image-wrapper {
    background-color: var(--splash-circle) !important;
    color: var(--splash-text) !important;
}

#applicationLoadingPanel .loading-border {
    border-color: var(--splash-ring) !important;
}

#applicationLoadingPanel .loading-floated-circle {
    border-color: var(--splash-circle) !important;
}

#applicationLoadingPanel .loading-caption {
    color: var(--splash-text) !important;
}

/* Strengthen grid header caption font-size override */
.dxbl-grid .dxbl-grid-header,
.dxbl-grid .dxbl-grid-header-content,
.dxbl-grid .dxbl-grid-header-content span {
    font-size: 0.8rem !important;
}

/* Theme settings panel fixes: make settings-bar use sidebar color and ensure readable text */
.theme-settings .settings-bar {
    background-color: var(--sidebar-bg) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.theme-settings .settings-bar .nav-link,
.theme-settings .settings-bar .theme-name,
.theme-settings .settings-bar .theme-group,
.theme-settings .settings-bar .themes-menu {
    color: #ffffff !important;
}

.theme-settings .settings-bar .nav-link .theme-name.text-body,
.theme-settings .settings-bar .nav-link .image {
    /* keep color swatches visible (image swatches are inline-styled) */
    color: inherit !important;
}

.theme-settings .settings-bar .dxbl-text-edit-input,
.theme-settings .settings-bar input[type="text"],
.theme-settings .settings-bar input[type="color"] {
    background-color: var(--sidebar-dark) !important;
    color: #ffffff !important;
    border: none !important;
}

.theme-settings .settings-bar .dxbl-btn,
.theme-settings .settings-bar .dxbl-btn .dxbl-btn-caption {
    color: #ffffff !important;
}

/* Ensure Fluent/Classic section headers remain readable */
.theme-settings .settings-bar .theme-group.card {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Account dropdown: use sidebar color and ensure readable text */
.account-main.dropdown-menu,
.account-main.dropdown-menu .account-main-inner {
    background-color: var(--sidebar-bg) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.account-main .logo-container {
    background-color: var(--sidebar-dark) !important;
    color: #ffffff !important;
}

.account-main .user-name,
.account-main .user-info-inner-container,
.account-main .dxbl-btn .dxbl-btn-caption,
.account-main .dxbl-btn {
    color: #ffffff !important;
}

.account-main .account-separator {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.account-main .dxbl-btn-outline-link {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Account dropdown layout: wide enough for a full e-mail address, the name wraps instead of being cut off,
   and "My Details" and "Log Off" share one quiet menu style (no orange block, no dark bar). */
.account-main.dropdown-menu {
    min-width: min(380px, calc(100vw - 32px)) !important;
    max-width: min(440px, calc(100vw - 32px)) !important;
    padding: 0 !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.account-main .user-info-container {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px !important;
}

.account-main .logo-container {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
}

.account-main .user-info-inner-container {
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.account-main .user-name-container,
.account-main .user-name {
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    font-weight: 600;
    line-height: 1.3;
}

.account-main .dxbl-btn.my-details,
.account-main .dxbl-btn.log-off {
    background-color: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.account-main .dxbl-btn.my-details {
    margin-left: -8px;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.account-main .dxbl-btn.log-off {
    width: calc(100% - 16px) !important;
    margin: 6px 8px 8px !important;
    justify-content: flex-start !important;
    padding: 8px !important;
}

.account-main .dxbl-btn.my-details:hover,
.account-main .dxbl-btn.my-details:focus-visible,
.account-main .dxbl-btn.log-off:hover,
.account-main .dxbl-btn.log-off:focus-visible {
    background-color: var(--sidebar-dark) !important;
    color: #ffffff !important;
}

.account-main .account-separator {
    margin: 0 16px !important;
}

/* Ensure the masked image (user logo) remains visible on dark bg, but do not invert globally. */
.account-main .logo-container .xaf-image {
    background-color: currentColor !important;
    -webkit-filter: none !important;
    filter: none !important;
    color: inherit !important;
    fill: currentColor !important;
}