@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
@font-face {
    font-family: 'Ubuntu-Regular';
    src: url('../fonts/Ubuntu-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* szybkie ładowanie */
}

/* Globalna czcionka dla całego DevExpress Blazor */
html, body, 
body.dxbl-theme-font,
.dxbl, 
.dxbl-control,
.dxbl-tabs,
.dxbl-text {
    font-family: 'Ubuntu', 'Ubuntu-Regular', Helvetica, Arial, sans-serif !important;
}


/* Ensures the custom app component is displayed as a block-level element and occupies the full height */
app {
    display: block;
    height: 100%;
}

/* Styles the logo with a white SVG image, maintaining aspect ratio with no-repeat */
.header-logo {
    content: url(../images/Logo2IG.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 120px;
    height: 33px;
    mask-size: contain;
    margin-left: 20px;
    /* Usunięto margin-top: 10px; dla poprawnego wyśrodkowania przez flexbox */
    display: flex !important;
    align-items: center !important;
}

/* Styles the Blazor error UI overlay with full-screen fixed positioning and hides it by default */
#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

.dxbl-btn-group.dxbl-btn-group-right,
.dxbl-spin-btns.dxbl-btn-group-right {
    display: none !important;
}

.ViewMode .dxbl-btn-group.dxbl-btn-group-right,
.ViewMode .dxbl-spin-btns.dxbl-btn-group-right {
    display: none !important;
}
.ViewMode .dxbl-text-edit {
    background: rgba(76, 189, 237, 0.08) !important;
    border: 1px solid rgba(76, 189, 237, 0.25) !important;
    border-radius: 8px;
    box-shadow: none !important;
}

.ViewMode .dxbl-text-edit input {
    background: transparent !important;
    border: none !important;
    font-weight: 500;
    color: var(--InRadr-Grey-Light);
    cursor: default;
}
.EditMode .dxbl-text-edit {
    background: #ffffff !important;
    border: 1px solid rgba(76, 189, 237, 0.4) !important;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.EditMode .dxbl-text-edit:hover {
    border-color: var(--InRadr-Blue-Navy) !important;
}

.EditMode .dxbl-text-edit:focus-within {
    border-color: var(--InRadr-Grey-Light) !important;
    box-shadow: 0 0 0 3px rgba(19, 143, 196, 0.20);
}

.EditMode .dxbl-text-edit input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font-weight: 500;
    color: #1f2937;
}
/** INRADR CSS **/

:root {
  /* --- Main Colors (from 2ig Design System) --- */
  --InRadr-Blue-Navy: #01374E;         /* Navy - Deep contrast for headers/tabs */
  --InRadr-Blue-Light: #009DE2;        /* Light Blue (Primary) */
  --InRadr-Blue-Light25: #29BFFF;      /* Light Blue +25% */
  --InRadr-Blue-Light50: #70D4FF;      /* Light Blue +50% */

  --InRadr-Blue: #0072BB;               /* Blue */
  --InRadr-Blue25: #0EA3FF;            /* Blue +25% */
  --InRadr-Blue50: #5EC1FF;            /* Blue +50% */

  /* --- Grey Palette (UI Neutrals) --- */
  --InRadr-Grey-Lighter: #EFF1F1;      /* Grey Lighter (Backgrounds) */
  --InRadr-Grey-Light: #BEC5C8;        /* Grey Light (Borders) */
  --InRadr-Grey: #9EA8AC;              /* Grey (Placeholders) */
  --InRadr-Grey-Dark: #7E8C91;         /* Grey Dark (Secondary / Icons) */
  --InRadr-Grey-Darker: #3E4649;       /* Grey Darker (Sub-text) */
  --InRadr-Grey-Darkest: #1F2324;      /* Grey Darkest (Primary Text / Inputs) */

  /* --- 2IG MDM Logic Mapping --- */
  --InRadr-nav-bg: var(--InRadr-Blue-Navy);
  --InRadr-primary: var(--InRadr-Blue-Light);
  --InRadr-secondary: var(--InRadr-Grey-Dark);
  --InRadr-status-info: var(--InRadr-Blue-Light25);
  --InRadr-empty-state: var(--InRadr-Grey-Light);

  /* --- Status Colors --- */
  --InRadr-Green: #28a745;
  --InRadr-Green-Light: rgba(40, 167, 69, 0.1);
  --InRadr-Orange: #fd7e14;
  --InRadr-Orange-Light: rgba(253, 126, 20, 0.1);
  --InRadr-Red: #dc3545;
  --InRadr-Red-Light: rgba(220, 53, 69, 0.1);
  --InRadr-Status-Grey: #6c757d;
  --InRadr-Status-Grey-Light: rgba(108, 117, 125, 0.1);
}



button[data-action-name="Meine Details"] {
    visibility: hidden;
}

.white-space-pre-line[title]:not([title=""]) {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: small;
    color: #9ca3af !important;
    cursor: help;
}

label.white-space-pre-line[title]:not([title=""]) {
    color: var(--InRadr-Grey-Lighter) !important;
}

.white-space-pre-line[title]:not([title=""])::before {
    content: "\F431"; /* Bootstrap bi-info-circle unicode */
    font-family: "bootstrap-icons" !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    color: var(--InRadr-Blue-Light);
    font-size: 14px;
    font-weight: normal;
}

/* Tooltip dynamiczny na bazie atrybutu title */
.white-space-pre-line[title]:not([title=""]):hover::after {
    content: attr(title);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--InRadr-Blue-Navy);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    pointer-events: none;
}

/* Strzałka tooltipa */
.white-space-pre-line[title]:not([title=""]):hover::before {
    /* Zachowujemy ikonę info, ale dodajemy pseudo-element dla strzałki jeśli potrzebny, 
       uprośćmy to jednak do samej ikony + dymka */
}

/* Header background */
.header {
    background-color: var(--InRadr-Blue-Navy) !important;
    display: flex !important;
    align-items: center !important; /* Wymusza centrowanie pionowe wszystkich elementów w headerze */
    height: 60px; /* Stała wysokość headera dla precyzyjnego środkowania, dopasuj jeśli trzeba */
}

.header-nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center; /* Środkowanie pionowe kontenera nawigacji */
    z-index: 10;
    height: 100%; /* Zajmuje pełną wysokość headera */
}

.logon-template-header {
    background-color: var(--InRadr-Blue-Navy) !important;
}

/* Desktop Menu Layout */
@media (min-width: 992px) {
    /* Usunięcie bocznych kresek w samym kontenerze menu */
    .dxbl-menu {
        border: none !important;
        box-shadow: none !important;
    }

    .dxbl-menu > .dxbl-menu-bar {
        background-color: var(--InRadr-Blue-Navy) !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        /* Usunięto position: relative !important; aby wyeliminować cienką linię na starcie */
        border: none !important; 
        box-shadow: none !important;
        outline: none !important;
    }
    
    .dxbl-menu .dxbl-menu-btn.dxbl-menu-toggle {
        display: none !important;
    }

    /* Usunięcie bocznych separatorów między przyciskami, jeśli występują w motywie */
    .dxbl-menu .dxbl-btn {
        border-left: none !important;
        border-right: none !important;
    }
}

/* Mobile Menu Layout */
@media (max-width: 991px) {
    /* WYMUSZENIE WIDOCZNOŚCI HAMBURGERA */
    .dxbl-menu .dxbl-menu-btn.dxbl-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 6px !important;
        padding: 8px !important;
        margin: 5px !important;
    }

    /* UKRYCIE PASEKA DESKTOPOWEGO NA MOBILE */
    .dxbl-menu:not(.dxbl-menu-open) .dxbl-menu-bar {
        display: none !important;
    }

    /* POKAZANIE LISTY PO OTWARCIU */
    .dxbl-menu.dxbl-menu-open .dxbl-menu-bar {
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        width: 280px !important;
        height: auto !important;
        background-color: var(--InRadr-Blue-Navy) !important;
        z-index: 9999 !important;
        box-shadow: -5px 5px 15px rgba(0,0,0,0.3) !important;
        padding: 10px 0 !important;
    }

    /* WYMUSZENIE WIDOCZNOŚCI ELEMENTÓW LISTY */
    .dxbl-menu.dxbl-menu-open .dxbl-menu-item {
        display: block !important;
        width: 100% !important;
        visibility: visible !important;
    }

    .dxbl-menu.dxbl-menu-open .dxbl-menu-item-text {
        color: white !important;
        padding: 12px 20px !important;
        display: block !important;
    }

    /* STYLIZACJA IKONY HAMBURGERA (NAPRAWA) */
    .dxbl-menu-toggle span {
        background-color: white !important;
        display: block !important;
        height: 2px !important;
        width: 20px !important;
        margin: 4px auto !important;
    }
}

.btn-header {
    color: white !important;
}

/* Horizontal Menu - Item Text styling */
.dxbl-menu .dxbl-menu-item-text {
    color: white !important;
    font-weight: 400;
    position: relative;
    display: flex; /* Zmiana na flex dla lepszej kontroli środkowania */
    align-items: center;
    /* Usunięcie height 100% - pozwalamy tekstowi wycentrować się naturalnie w przycisku */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effect: biały tekst i białe podkreślenie dla nieaktywnych elementów - BEZ PRZESUNIĘĆ */
.dxbl-menu .dxbl-btn:not(.dxbl-active):hover .dxbl-menu-item-text {
    color: white !important;
    /* Symulacja pogrubienia bez zmiany szerokości kontenera (zapobiega skakaniu menu) */
    text-shadow: 0 0 0.65px white, 0 0 0.65px white !important; 
    transform: none !important;
}

.dxbl-menu .dxbl-btn:not(.dxbl-active):hover .dxbl-menu-item-text::after {
    background-color: white !important;
    opacity: 1;
    transform: scaleX(1);
}

/* Active state: niebieski tekst i niebieskie podkreślenie (Light Blue) */
.dxbl-menu .dxbl-btn.dxbl-active .dxbl-menu-item-text {
    color: var(--InRadr-Blue-Light) !important;
    font-weight: 400 !important;
    /* Symulacja pogrubienia dla stanu aktywnego */
    text-shadow: 0 0 0.65px var(--InRadr-Blue-Light), 0 0 0.65px var(--InRadr-Blue-Light) !important;
    transform: none !important;
}

.dxbl-menu .dxbl-btn.dxbl-active .dxbl-menu-item-text::after {
    background-color: var(--InRadr-Blue-Light) !important;
    opacity: 1;
    transform: scaleX(1);
}

/* Underline configuration */
.dxbl-menu .dxbl-menu-item-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -12px; /* Zwiększony odstęp: linia jest 'doczepiona' niżej, nie wpływa na pozycję tekstu */
    width: 100%;
    height: 3px;
    background-color: transparent;
    border-radius: 2px;
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Stylizacja pasków przewijania w menu (Navy Theme) --- */
.dxbl-menu .dxbl-scroll-viewer-vert-scroll-bar,
.dxbl-menu .dxbl-scroll-viewer-hor-scroll-bar {
    background-color: var(--InRadr-Blue-Navy) !important;
    border: none !important;
}

.dxbl-menu .dxbl-scroll-viewer-content {
    background-color: var(--InRadr-Blue-Navy) !important;
}

.dxbl-menu .dxbl-scroll-viewer-vert-scroll-bar .dxbl-scroll-viewer-button,
.dxbl-menu .dxbl-scroll-viewer-hor-scroll-bar .dxbl-scroll-viewer-button {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
}

.dxbl-menu .dxbl-scroll-viewer-vert-scroll-bar .dxbl-scroll-viewer-button:hover,
.dxbl-menu .dxbl-scroll-viewer-hor-scroll-bar .dxbl-scroll-viewer-button:hover {
    background-color: var(--InRadr-Blue-Light) !important;
}

/* Usunięcie strzałek rozwijanego menu */
.dxbl-menu .dxbl-menu-dropdown-toggle {
    display: none !important;
}

/* --- Tekst wewnątrz menu nawigacyjnego ma być biały --- */
.dxbl-menu-dropdown .dxbl-menu-item-text,
.dxbl-dropdown-dialog:has(.dxbl-menu-item-list) .dxbl-menu-item-text {
    color: #ffffff !important;
}

/* --- STYLIZACJA WIERSZY W LIST VIEW (HOVER) --- */
/* Domyślnie wyłączamy transition dla wszystkich wierszy i wyłączamy efekt hover na poziomie tabeli */
.dxbl-grid-table,
.dxbl-grid-table tr,
.dxbl-grid-table tr td {
    transition: none !important;
}

/* W XAF Blazor, jeśli wiersz otwiera DetailView, to komórki TD mają klasę .xaf-action. 
   Jeśli jej nie mają, to znaczy że wiersz jest "płaski" (nieklikalny). */

/* 1. Całkowicie wyłączamy kolor hover dla wierszy, które NIE są klikalne (brak .xaf-action w środku) */
.dxbl-grid-table tr:not(:has(.xaf-action)):hover,
.dxbl-grid-table tr:not(:has(.xaf-action)):hover td {
    background-color: transparent !important;
    background: none !important;
    cursor: default !important;
}

/* 2. Włączamy animację TYLKO dla wierszy, które faktycznie coś robią (.xaf-action) */
.dxbl-grid-table tr:has(.xaf-action):hover td {
    background-color: var(--InRadr-Blue-Light-Alpha, rgba(0, 157, 226, 0.05)) !important;
    transition: background-color 0.2s ease-in-out !important;
}

/* --- PRZYCISKI GŁÓWNE (LOGIN/ANMELDEN/ZAPISZ) --- */
/* Zastępujemy domyślny pomarańczowy efekt hover na korporacyjny błękit */
.dxbl-btn.dxbl-btn-primary:hover,
.xaf-primary-toolbar-btn.dxbl-btn:hover,
.dxbl-btn.dxbl-btn-primary:active,
.xaf-primary-toolbar-btn.dxbl-btn:active,
.dxbl-btn.dxbl-btn-primary:focus,
.xaf-primary-toolbar-btn.dxbl-btn:focus {
    background-color: #009DE2 !important;
    border-color: #009DE2 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 157, 226, 0.25) !important;
}

.dxbl-btn.dxbl-btn-primary,
.xaf-primary-toolbar-btn.dxbl-btn {
    background-color: #0072BB !important;
    border-color: #0072BB !important;
}

/* WYMUSZENIE BIAŁEGO TŁA DLA KONTENERÓW TREEVIEW (np. listy wyboru lat) */
dxbl-treeview,
.dxbl-treeview-container,
.dxbl-treeview-container .dxbl-scroll-viewer,
.dxbl-treeview-container .dxbl-scroll-viewer-content,
.dxbl-toolbar-dropdown-item-list,
.dxbl-toolbar-dropdown-item-list .dxbl-toolbar-dropdown-item,
.dxbl-toolbar-dropdown-item-list .dxbl-toolbar-menu-item {
    background-color: #ffffff !important;
    color: var(--InRadr-Blue-Navy) !important;
    overflow: hidden !important; /* Usunięcie pasków przewijania */
}

/* Tekst i przyciski wewnątrz list rozwijanych toolbarów */
.dxbl-toolbar-dropdown-item-list .dxbl-btn,
.dxbl-toolbar-dropdown-item-list .dxbl-dropdown-item {
    background-color: #ffffff !important;
    color: var(--InRadr-Blue-Navy) !important;
}

/* Hover dla elementów w tych listach */
.dxbl-toolbar-dropdown-item-list .dxbl-btn:hover,
.dxbl-toolbar-dropdown-item-list .dxbl-dropdown-item:hover {
    background-color: #f8f9fa !important;
    color: var(--InRadr-Blue-Light) !important;
}

/* Shadow dla TreeView, Filter Menu i List Toolbarowych */
.dxbl-treeview-container,
.dxbl-dropdown-dialog.dxbl-filter-menu-dropdown,
.dxbl-toolbar-dropdown-item-list {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    overflow: hidden !important; /* Ukrywamy paski przewijania kontenera */
}

/* Usunięcie skrolowania poziomego w menu filtrów (Filter Menu) */
.dxbl-filter-menu-dropdown,
.dxbl-filter-menu-dropdown .dxbl-dropdown-body,
.dxbl-filter-menu-dropdown .dxbl-scroll-viewer,
.dxbl-filter-menu-dropdown .dxbl-virtual-scroll-viewer,
.dxbl-filter-menu-dropdown .dxbl-scroll-viewer-content {
    overflow-x: hidden !important;
}

/* Ukrycie paska przewijania poziomego (scrollbar) wewnątrz Filter Menu */
.dxbl-filter-menu-dropdown .dxbl-scroll-viewer-hor-scroll-bar {
    display: none !important;
}

/* Tekst i etykiety wewnątrz TreeView */
.dxbl-treeview-container .dxbl-treeview-item-text,
.dxbl-treeview-container .dxbl-text,
.dxbl-treeview-container label.dxbl-text {
    color: var(--InRadr-Blue-Navy) !important;
}

/* Menu kontekstowe w List View (Prawy przycisk myszy) --- */
/* Z Twojego kodu wynika, że używa ono klasy .dxbl-context-menu-dropdown */
/* Wymuszamy tutaj oryginalny, jasny wygląd Blazor */
.dxbl-dropdown-dialog.dxbl-context-menu-dropdown,
.dxbl-dropdown-dialog.dxbl-context-menu-dropdown .dxbl-scroll-viewer,
.dxbl-dropdown-dialog.dxbl-context-menu-dropdown .dxbl-scroll-viewer-content,
.dxbl-dropdown-dialog.dxbl-context-menu-dropdown .dxbl-dropdown-body {
    background-color: #ffffff !important;
    color: #212529 !important; /* Standardowy ciemny tekst Bootstrap */
    border: 1px solid rgba(0,0,0,.15) !important;
    border-radius: 0.25rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175) !important;
}

/* Ikony w menu kontekstowym mają mieć kolor niebieski korporacyjny */
.dxbl-context-menu-dropdown img.xaf-context-menu-item-icon,
.dxbl-context-menu-dropdown .dxbl-image,
.dxbl-context-menu-dropdown .xaf-image,
.dxbl-itemlist-dropdown .dxbl-image,
.dxbl-itemlist-dropdown img {
    filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(175deg) brightness(96%) contrast(101%) !important;
}

/* Tekst i ikony w menu kontekstowym */
.dxbl-context-menu-dropdown .dxbl-context-menu-item-text,
.dxbl-context-menu-dropdown .dxbl-context-menu-item-text * {
    color: #212529 !important;
}

/* Hover w menu kontekstowym - powrót do standardu */
.dxbl-context-menu-dropdown .dxbl-context-menu-item:hover {
    background-color: #f8f9fa !important;
}

/* Wymuszenie braku obramowania na wszystkich poziomach kontenera */
.dxbl-dropdown-dialog *, 
.dxbl-dropdown-body * {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

.dxbl-dropdown-content:has(.dxbl-menu-item-list) {
    background-color: transparent !important;
    border: none !important;
}

.dxbl-menu-item-list {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.dxbl-menu-dropdown-item {
    border-radius: 8px !important;
    margin-bottom: 2px !important;
    transition: all 0.2s ease !important;
}

.dxbl-menu-dropdown-item:last-child {
    margin-bottom: 0 !important;
}

/* Stylizacja przycisku wewnątrz dropdowna */
button.dxbl-menu-dropdown-item {
    width: 100% !important;
    text-align: left !important;
    padding: 10px 16px !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    color: white !important;
}

/* Hover na element listy */
.dxbl-menu-dropdown-item:hover {
    background-color: rgba(0, 157, 226, 0.15) !important; /* InRadr-Blue-Light z przezroczystością */
}

/* Tekst w dropdownie */
.dxbl-menu-dropdown-item .dxbl-menu-item-text {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-shadow: none !important; /* Brak cienia w dropdownie dla czytelności */
    transition: color 0.2s ease !important;
}

.dxbl-menu-dropdown-item:hover .dxbl-menu-item-text {
    color: var(--InRadr-Blue-Light) !important;
    font-weight: 500 !important;
}

/* Usunięcie podkreślenia w dropdownie (dziedziczone z głównego menu) */
.dxbl-menu-dropdown-item .dxbl-menu-item-text::after {
    display: none !important;
}

/* Animacja dla dropdowna */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modernizacja ikony Security_Header na Bootstrap Icon (bi-person) */
.xaf-image[style*="Security_Header"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 24px !important;
    height: 24px !important;
    border: 1px solid white !important; /* Cienkie białe obramowanie */
    border-radius: 4px;
    background-color: transparent !important; /* Domyślnie przezroczyste tło */
    transition: all 0.2s ease;
}

.xaf-image[style*="Security_Header"]::before {
    content: "\F4DA"; /* bi-person unicode */
    font-family: "bootstrap-icons" !important;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    color: white !important;
    display: block;
}

/* Hover: ikona navy, tło białe */
.xaf-image[style*="Security_Header"]:hover {
    background-color: white !important;
}

.xaf-image[style*="Security_Header"]:hover::before {
    color: var(--InRadr-Blue-Navy) !important;
}

/* Ukrycie oryginalnej maski, jeśli system próbuje ją wymusić */
.xaf-image[style*="Security_Header"] {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
}

/* Styles for view captions with updated Figma specifications */
.xaf-view-caption-sm,
.xaf-view-caption-lg {
    color: var(--InRadr-Blue-Light);
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: normal;
    letter-spacing: 0%;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Aligning text and image in view-caption-area */
.view-caption-area {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 32px 0 24px 32px;
    position: relative;
}

.view-caption-caption-area,
.xaf-caption-container {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    gap: 8px;
}

/* =========================================================================
   NOWA STRUKTURA KAPCJONÓW (inradr-caption) 
   ========================================================================= */

.inradr-caption {
    position: relative; /* Zezwala na pozycjonowanie absolutne strzałki wewnątrz tej kolumny */
    display: flex; /* WAŻNE: wymusza układ pionowy dla spanów */
    flex-direction: column;
    align-items: flex-start; /* Wyrównuje wszystko do lewej */
    margin: 0;
    gap: 8px; /* Odstęp w pionie między spanami */
}

/* Usunięty globalny margines - kontener znów jest wyzerowany względem krawędzi formy */
.inradr-caption:has(.inradr-caption-navigate-back) {
    padding-left: 0; 
    margin-left: 0; 
}

/* Przycisk "Zurück" ładujemy całkowicie do lewej na twardo */
.inradr-caption-navigate-back {
    position: absolute;
    left: 0;
    top: 0; 
    display: inline-flex;
    z-index: 10;
}

/* --- UKRYWANIE IKONY W LIST VIEW I ZWYKŁYCH TOOLBARACH --- */
/* Najpierw upewniamy się, że w nagłówku jest docelowo widoczny (reguła o niższej wadze) */
.inradr-caption .navigate-back-icon-container {
    display: inline-flex !important;
}

/* Ukrywamy ze standardowych toolbarów DevExpress (by nie pojawiał się obok innych akcji nad listą) */
.dxbl-toolbar:not(.inradr-caption-navigate-back) .navigate-back-icon-container,
.nested-toolbar .navigate-back-icon-container {
    display: none !important;
}

/* PRZYCISK WSTECZ - OSTATECZNA WERSJA WYMUSZAJĄCA */
/* Pokazujemy go zawsze, gdy jest rodzeństwem tekstu w nagłówku */
.inradr-caption .navigate-back-icon-container,
.inradr-caption .inradr-caption-navigate-back {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Wypchnięcie tekstu w nagłówku */
.inradr-caption-object {
    margin-left: 60px !important;
}

/* Ukrywamy TYLKO I WYŁĄCZNIE gdy nagłówek nie posiada tekstu (to cecha List View) */
/* Albo gdy obiekt jest pusty */
.inradr-caption:has(.inradr-caption-object:empty) .navigate-back-icon-container,
.inradr-caption:has(.inradr-caption-object:empty) .inradr-caption-navigate-back {
    display: none !important;
}

.inradr-caption:has(.inradr-caption-object:empty) .inradr-caption-object {
    margin-left: 0px !important;
}

/* Nowe warstwy typografii wyabstrahowane z pseudo-elementów */
.inradr-caption-object {
    font-size: 37px !important;
    font-weight: 500 !important;
    color: var(--InRadr-Blue-Navy) !important;
    line-height: 1.2 !important;
    display: block;
    white-space: pre-wrap !important;
    word-break: break-word !important; 
}

.inradr-caption-object-subtitle {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--InRadr-Grey-Dark) !important;
    display: block;
    white-space: pre-wrap !important;
    word-break: break-word !important; 
}

.inradr-caption-view {
    color: var(--InRadr-Blue-Light);
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: normal;
    display: block;
}

/* ----------------------------------------------------
   Stylizacja i Pozycjonowanie Przycisku Powrotu (Zurück) 
   ---------------------------------------------------- */
button.navigate-back-icon-container {
    width: 44px !important;
    height: 44px !important;
    background-color: white !important;
    border: 1px solid var(--InRadr-Grey-Light) !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; /* Delikatny cien dla glebi tak jak na screenie */
}

button.navigate-back-icon-container:hover {
    border-color: var(--InRadr-Blue-Light) !important;
    background-color: rgba(0, 157, 226, 0.05) !important; 
}

/* Podmiana domyślnego XAF SVG na nową dedykowaną ikonę zgodną ze screenem */
button.navigate-back-icon-container .xaf-image {
    width: auto !important;
    height: auto !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    mask: none !important;
    background-color: transparent !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

button.navigate-back-icon-container .xaf-image::before {
    content: "\F111"; /* Poprawny kod Unicode dla bi-arrow-90deg-up */
    font-family: "bootstrap-icons" !important;
    font-size: 20px !important; 
    font-style: normal !important;
    font-weight: normal !important;
    color: var(--InRadr-Blue-Light) !important; /* Zmiana na jasno-niebieski kolor */
    -webkit-font-smoothing: antialiased;
    /* Usuwamy wszystkie sztuczne modyfikatory, by ikona wyglądała w 100% jak oryginalne i z klasy bi */
    -webkit-text-stroke: 0 !important; 
    line-height: 1;
}

/* ========================================================================= */

.img-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border: none;
    background: transparent;
}

.img-thumbnail img.xaf-component-image {
    height: 72px; /* Zgodnie z maską z HTML */
    width: 72px;
    object-fit: contain;
    border-radius: 8px; /* Opcjonalne zaokrąglenie */
}


/* Styles for object captions - OLD FALLBACK */
.xaf-object-caption {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--InRadr-Grey-Dark) !important;
    white-space: pre-wrap !important;
    display: block !important;
    position: relative;
}

.xaf-object-caption::first-line {
    font-size: 37px !important;
    font-weight: 500 !important;
    color: var(--InRadr-Blue-Navy) !important;
    line-height: 1.2 !important;
}

.xaf-object-caption.xaf-ellipsis,
.xaf-object-caption .xaf-ellipsis,
.xaf-ellipsis {
    white-space: pre-wrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: inline-block !important;
    word-break: break-word !important; 
}

.view-caption-area > div:has(.navigate-back-icon-container):not(.inradr-caption) {
    position: absolute;
    left: 32px;
    bottom: 28px;
    z-index: 10;
}

.view-caption-area:has(.navigate-back-icon-container) .xaf-caption-container {
    margin-left: 54px;
}




.dxbl-group {
    border: none;
}

/* usuwa tło nagłówka */
.dxbl-group > .dxbl-group-header::before {
    background-color: white;
    opacity: 0%;
}

/* tekst nagłówka */
.dxbl-group > .dxbl-group-header > .dxbl-text {
    color: var(--InRadr-Blue-Navy);
    font-weight: 500;
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 20px;
}

/* --- Tooltip dla nagłówków grup na bazie atrybutu title --- */
.dxbl-group-header .dxbl-text:has([title]:not([title=""])) {
    position: relative;
}

/* Ikona info po tekście nagłówka, jeśli jest title */
.dxbl-group-header .dxbl-text:has([title]:not([title=""]))::after {
    content: "\F431"; /* Bootstrap bi-info-circle unicode */
    font-family: "bootstrap-icons" !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
    color: var(--InRadr-Blue-Light);
    font-size: 16px;
    font-weight: normal;
    cursor: help;
}

/* Kontener z title - ukrywamy systemowy tooltip */
.dxbl-group-header .dxbl-text [title]:not([title=""]) {
    position: relative;
    cursor: help;
    pointer-events: auto;
}

/* Właściwy Tooltip (dymek) wyzwalany przez najechanie na TEKST LUB IKONĘ (::after nagłówka) */
.dxbl-group-header .dxbl-text:has([title]:not([title=""])):hover::before {
    content: attr(title); /* To zadziała tylko jeśli title jest na tym samym poziomie, musimy to obejść */
}

/* Poprawiona logika: Tooltip przypisany do kontenera z tekstem, wyzwalany przez hover na całym nagłówku */
.dxbl-group-header .dxbl-text [title]:not([title=""])::after {
    content: attr(title);
    position: absolute;
    bottom: 0;
    left: 100%; /* Przeniesienie na prawą stronę tekstu/ikony */
    margin-left: 15px; /* Odstęp od ikony */
    background-color: var(--InRadr-Blue-Navy);
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    width: 300px; /* Stała szerokość dla czytelności */
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    text-align: left;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    pointer-events: none; /* Zapobiega migotaniu przy najeżdżaniu na dymek */
}

/* Wyświetlanie dymka po najechaniu na dowolny element nagłówka (tekst lub ikona) */
.dxbl-group-header .dxbl-text:hover [title]:not([title=""])::after {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Strzałka boczna wskazuje na ikonę */
.dxbl-group-header .dxbl-text [title]:not([title=""])::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 3px;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent var(--InRadr-Blue-Navy) transparent transparent;
    visibility: hidden;
    opacity: 0;
    z-index: 10000;
}

.dxbl-group-header .dxbl-text:hover [title]:not([title=""])::before {
    visibility: visible;
    opacity: 1;
}

/* Blokada standardowego tooltipa przeglądarki poprzez usunięcie pointer-events z elementu z title 
   i przeniesienie interakcji na rodzica */
.dxbl-group-header .dxbl-text [title]:not([title=""]) {
    pointer-events: none; 
}
.dxbl-group-header .dxbl-text:has([title]:not([title=""])) {
    pointer-events: auto;
}
/* PODKREŚLENIE pod tekstem */
.dxbl-group > .dxbl-group-header > .dxbl-text::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;

    width: 80px;      /* szerokość z Figma */
    height: 4px;

    background-color: var(--InRadr-Blue-Light);
    border-radius: 2px;
}
.dxbl-fl .dxbl-fl-group>.dxbl-group>.dxbl-group-header:not(.dxbl-fl-group-header-tmpl) {
    border: none;
}
/* Active tab styling: Light Blue, Bold 700, and Underline like main horizontal nav */
.dxbl-tabs.dxbl-tabs-top > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active,
.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active {
    color: var(--InRadr-Blue-Light) !important;
    font-size: 14px;
    font-weight: 700;
    position: relative;
    display: flex;
    justify-content: center;
}

/* Fix for underline width: target the internal text container instead of the whole button */
.dxbl-tabs-item.dxbl-active .dxbl-tabs-text-container {
    position: relative;
    display: inline-flex;
}

.dxbl-tabs-item.dxbl-active .dxbl-tabs-text-container::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px; /* Pozycjonowanie pod tekstem */
    height: 3px;
    background-color: var(--InRadr-Blue-Light) !important;
    border-radius: 2px;
}

/* Style dla HOVER - identyczny kształt i szerokość jak aktywny, ale kolor szary */
.dxbl-tabs-item:not(.dxbl-active):hover .dxbl-tabs-text-container {
    position: relative;
    display: inline-flex;
}

.dxbl-tabs-item:not(.dxbl-active):hover .dxbl-tabs-text-container::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 3px;
    background-color: #dee2e6 !important; /* Szary hover o szerokości tekstu */
    border-radius: 2px;
}

/* Usuwamy domyślny szary hover/border/underliner z całego bloku DevExpress */
.dxbl-tabs-item:hover,
.dxbl-tabs-item:not(.dxbl-active):hover,
.dxbl-tabs-item:hover::after,
.dxbl-tabs-item:not(.dxbl-active):hover::after {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important; /* Musi być widoczny, żeby nasz wewnętrzny span działał, ale bez tła/linii */
}

/* Ukrywamy specyficzny element ::after na poziomie samego itemu, który rysuje długą linię */
.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:hover::after,
.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:hover::after {
    background-color: transparent !important;
    height: 0 !important;
}

/* Disable the previous underline on the item itself */
.dxbl-tabs.dxbl-tabs-top > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item.dxbl-active::after,
.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item.dxbl-active::after {
    display: none !important;
}

/* Add spacing below tabs to separate from the content (info boxes) */
.dxbl-tabs-top {
    margin-bottom: 32px !important;
}

/* Inactive tab styling: Navy, Semi-bold 500 */
.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-active):not(.dxbl-disabled):not(:disabled),
.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:not(.dxbl-active):not(.dxbl-disabled):not(:disabled) {
    color: var(--InRadr-Blue-Navy) !important;
    font-weight: 500;
    background-color: white !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
    padding-bottom: 6px !important;
}
/* Hover dla nieaktywnych tabów z białym tłem i cienką szarą linią */
/* Bazowy stan nieaktywnych tabów */
.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > 
.dxbl-tabs-item:not(.dxbl-active):not(.dxbl-disabled):not(:disabled),
.dxbl-tabs > .dxbl-tabs-tablist > ul > li > 
.dxbl-tabs-item:not(.dxbl-active):not(.dxbl-disabled):not(:disabled) {
    background-color: white !important;   /* stałe białe tło */
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
    padding-bottom: 6px !important;       /* miejsce na linię */
}

/* Pseudo-element liniowy, widoczny tylko na hover */
.dxbl-tabs-item:not(.dxbl-active):not(.dxbl-disabled):not(:disabled)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;                        /* grubość linii */
    background-color: transparent;       /* niewidoczna w normalnym stanie */
    pointer-events: none;
}

/* Widoczna linia tylko na hover */
.dxbl-tabs-item:not(.dxbl-active):not(.dxbl-disabled):not(:disabled):hover::after {
    background-color: #d0d0d0;
}

/* Usunięcie pseudo-elementów DevExpress, które mogły zmieniać tło */
.dxbl-tabs-item:not(.dxbl-active):not(.dxbl-disabled):not(:disabled)::before {
    content: none !important;
    background: none !important;
}



.dxbl-tabs>.dxbl-tabs-tablist.dxbl-tabs-tablist-scrollable{
border:none;
}
/* Styles for active tab icon with bright white filter */
.dxbl-active img.dxbl-image.xaf-layout-tab-icon {
    min-width: 25px;
    min-height: 20px;
    max-width: 25px;
    max-height: 20px;
    margin-right: 10px;
    color: white;
    filter: brightness(10000%);
}
.img-thumbnail {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    padding: 0;
}

.img-thumbnail .xaf-image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.img-thumbnail img.xaf-component-image {
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ukryj kontener gdy brak zdjęcia */
.img-thumbnail:has(img.xaf-component-image[src=""]),
.img-thumbnail:has(img.xaf-component-image:not([src])) {
    display: none;
}


/* Styles for inactive tab icon with blue tint and opacity */
img.dxbl-image.xaf-layout-tab-icon {
    filter: brightness(0) saturate(100%);
/*
    min-width: 25px;
    min-height: 20px;
    max-width: 25px;
    max-height: 20px;
    margin-right: 10px;*/
}

/* Styles for toolbar item icon with grayscale filter */
img.dxbl-image.xaf-toolbar-item-icon {
      filter: brightness(0) saturate(100%);
}

/* Styles for floating layout group with inline grid display 
.dxbl-fl .dxbl-fl-group {
    display: inline-grid;
}*/
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.dxbl-grid .dxbl-grid-table > tbody > tr {
    border: none;
}

.dxbl-grid .dxbl-grid-table > tbody:nth-child(2) > tr:first-child > td, .dxbl-grid .dxbl-grid-table > tbody:nth-child(2) > tr:first-child > th, .dxbl-grid .dxbl-grid-table > tfoot:nth-child(2) > tr:first-child > td, .dxbl-grid .dxbl-grid-table > tfoot:nth-child(2) > tr:first-child > th, .dxbl-grid .dxbl-grid-table > thead:nth-child(2) > tr:first-child > td, .dxbl-grid .dxbl-grid-table > thead:nth-child(2) > tr:first-child > th {
    background: white;
}


tr:nth-child(even).cursor-pointer {
    background-color: hsl(0, 0%, 95%);
    transition: background-color 0.3s ease;
    cursor: pointer;
}

tr:nth-child(even).cursor-pointer:hover {
    background-color: hsl(0, 0%, 90%);
}

/*///////////////// Fixed height and width for LV Start ////////////////////////////////////// */
/* Container with the table */
/* Maksymalna wysokość tabeli wewnątrz lvw-hidden-footer */
.lvw-hidden-footer .dxbl-scroll-viewer {
    max-height: 400px;       /* zmień np. na 300, 500, 600 */
    min-height: 120px;       /* minimalna wysokość aby nie była za mała */
    overflow-y: auto !important; 
    overflow-x: hidden;
}

/* Container with the table */
/* --- Styl tylko dla layoutów z klasą lvw-hidden-footer --- */

/* Cała tabela biała bez cieni */
.lvw-hidden-footer .dxbl-grid,
.lvw-hidden-footer .dxbl-grid-table,
.lvw-hidden-footer .dxbl-scroll-viewer {
    background: white !important;
    border: none !important;
    box-shadow: none !important;
}

/* Komórki: białe, brak borderów pionowych */
.lvw-hidden-footer .dxbl-grid-table td,
.lvw-hidden-footer .dxbl-grid-table th {
    background: white !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* Poziome linie między wierszami */
.lvw-hidden-footer .dxbl-grid-table td {
    border-bottom: 1px solid #dcdcdc !important; /* delikatna linia */
}

/* Brak linii pod ostatnim wierszem */
.lvw-hidden-footer .dxbl-grid-table tr:last-child td {
    border-bottom: none !important;
}

/* Brak hover */
.lvw-hidden-footer .dxbl-grid-row-hover-enabled tr:hover td {
    background: white !important;
}

/* Usunięcie tła nagłówków jeśli zostają widoczne */
.lvw-hidden-footer thead th {
    background: white !important;
    border-bottom: 1px solid #dcdcdc !important;
}

/* Ukrycie empty-cell (ta prawa kolumna DevExpressa) */
.lvw-hidden-footer .dxbl-grid-empty-cell {
    background: white !important;
    border: none !important;
}
/* Ukrycie full-text search w toolbarze */
.lvw-hidden-footer .nested-toolbar,
.lvw-hidden-footer .dxbl-toolbar {
    display: none !important;
}


/* NAVCHART */
.dxc-markers {
  fill: var(--InRadr-Blue-Navy)!important;
  stroke: var(--InRadr-Blue-Navy)!important;
}
/*///////////////// Fixed height and width for LV Start ////////////////////////////////////// */
/* Container with the table */
.dxbl-grid > .dxbl-scroll-viewer {
    display: block;
    position: relative;
    width: 100%;
    min-height: 80vh;
    height: 80vh; /* Set height to enable scrolling */
}
/* Container with the table */
.lvw-hidden-footer .dxbl-grid > .dxbl-scroll-viewer {
    min-height: auto;
    height: auto; /* Set height to enable scrolling */
}
/* LV without Footer */
.lvw-hidden-footer .dxbl-grid > .dxbl-grid-bottom-panel:last-of-type,
.lvw-hidden-footer .dxbl-group > .dxbl-group-body {
    display: none;
}

.lvw-hidden-footer .nested-toolbar{
display:none;
}
.lvw-hidden-footer .dxbl-scroll-viewer-content{
display:grid;

}
.lvw-hidden-footer .dxbl-scroll-viewer-content td{
word-break: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
}

/* NAVCHART */
.dxc-markers {
  fill: var(--InRadr-Blue-Light50)!important;
  stroke: var(--InRadr-Blue-Light50)!important;
}


/*//////////////////// TennatOverview //////////////////*/

.TennatOverviewBoldContent .dxbl-expandable-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.TennatOverviewBoldContent .dxbl-group-body-content {
  /* Optional size limits or other styles */
  max-width: 100%;
}


.TennatOverviewBold .dxbl-text-edit.dxbl-disabled{
border:none;
color: var(--InRadr-Grey-Darkest);
    font-size: clamp(1.2rem, 1.3vw, 1.8rem);
    font-weight: normal;
    font-style: normal;
    display: block;
    margin: 0 auto;
}
.TennatOverviewBold .dxbl-text-edit.dxbl-disabled input {
    text-align: center !important;
}
.TennatOverviewBoldContent.dxbl-fl.dxbl-fl-group {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    height: 100%;
    position: relative;
}
.TennatOverviewBold .dxbl-text-edit.dxbl-disabled::before, .dxbl-text-edit:disabled::before{
background-color:#fff;
}

/* Table occupying the full width */
.dxbl-grid > .dxbl-scroll-viewer table {
    display: table;
    width: 100%;
    min-width: 100%;
    table-layout: auto; /* Flexible column width adjustment */
}

/* Ensuring full accessibility of table content */
.dxbl-grid > .dxbl-scroll-viewer tbody {
    width: 100%;
}

.dxbl-grid > .dxbl-scroll-viewer tr {
    display: table-row;

}

.CORE p {
    background-color: var(--InRadr-Green-Light);
    color: var(--InRadr-Green);
    padding: 1px 5px;
    border-radius: 4px;
    margin: 1px !important;
    font-weight: 600;
    float: left;
    width: fit-content;
    display: inline-block;
    text-transform: uppercase;
}

.BÜRO p {
    background-color: var(--InRadr-Orange-Light);
    color: var(--InRadr-Orange);
    padding: 1px 5px;
    border-radius: 4px;
    margin: 1px !important;
    font-weight: 600;
    float: left;
    width: fit-content;
    display: inline-block;
    text-transform: uppercase;
}

.BESTANDSOBJEKT p,
.FIX p {
    padding: 1px 5px;
    margin: 1px !important;
    font-weight: 400;
    float: left;
    width: fit-content;
    display: inline-block;
    text-transform: uppercase;
}

.dxbl-grid > .dxbl-scroll-viewer th,
.dxbl-grid > .dxbl-scroll-viewer th span,
.dxbl-grid > .dxbl-scroll-viewer th .dxbl-grid-header-content,
.dxbl-grid > .dxbl-scroll-viewer th .dxbl-image,
.dxbl-grid > .dxbl-scroll-viewer th .dxbl-image use {
    text-align: left;
    text-transform: uppercase;
    font-weight: 400 !important;
    font-size: 0.85rem;
    color: var(--InRadr-Grey) !important;
    fill: var(--InRadr-Grey) !important;
}

/* Settings for table cells */
.dxbl-grid > .dxbl-scroll-viewer td {
    padding: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: auto;
}



/*///////////////// Scrollbars and Sticky Header Start /////////////////////*/
.dxbl-scroll-viewer {
    position: relative;
    height: calc(100% - 40px); /* Ensures appropriate height for content and pagination */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .dxbl-scroll-viewer > .dxbl-scroll-viewer-content {
        flex-grow: 1;
        position: relative; /* 🔥 KEY: Enables sticky header */
        height: 100%;
    }

    /* Horizontal scrollbar */
    .dxbl-scroll-viewer > .dxbl-scroll-viewer-hor-scroll-bar {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        height: 15px;
        z-index: 10;
    }

    /* Vertical scrollbar */
    .dxbl-scroll-viewer > .dxbl-scroll-viewer-vert-scroll-bar {
        position: absolute;
        top: 0;
        right: 0;
        width: 15px;
        height: 100%;
        z-index: 10;
    }
/*//////////////////// Scrollbars and Sticky Header End //////////////////*/

.xaf-caption-icon {
    filter: brightness(0) saturate(100%) invert(100%);

}

.nested-toolbar:empty, .main-toolbar:empty {
    padding: 0 !important;
    margin-top: 10px;
}
.img-thumbnail{
border-radius:unset;
}

.dxbl-fl .dxbl-fl-cpt {
    font-size: 14px;
    color: var(--InRadr-Grey-Lighter);
    white-space: normal!important;       /* pozwala na zawijanie */
    word-break: break-word;     /* wymusza złamanie długich słów */
    overflow-wrap: anywhere;    /* opcjonalnie, dla bardzo długich wyrazów lub linków */
}

.dxbl-group-body-content{
    margin: 8px 0; /* odstęp między wierszami */
}

.InradrContentView .dxbl-group {
    border: none!important;
}

/* --- Side-by-Side Items (50% Label, 50% Editor) TYLKO DLA dxbl-group-body-content --- */
.dxbl-group-body-content .dxbl-fl-item-horizontal {
    display: flex !important;
    flex-wrap: nowrap !important; /* Blokada zawijania na desktopie */
    align-items: baseline !important; /* Zmiana na baseline - wyrównuje teksty w jednej linii */
    width: 100% !important;
}

.dxbl-group-body-content .dxbl-fl-item-horizontal .dxbl-fl-cpt {
    width: 50% !important;
    max-width: 50% !important;
    min-width: 150px;
    flex-shrink: 0; /* Etykieta nie może się kurczyć */
    font-size: 14px !important;
    color: #56676B !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
    /* Usunięto sztuczne przesuwanie do dołu */
}

.dxbl-group-body-content .dxbl-fl-item-horizontal .dxbl-fl-ctrl {
    width: 50% !important; /* Przywrócenie 50% szerokości dla inputa na desktopie */
    flex-grow: 1;
    padding-left: 14px !important;
    /* Usunięto sztuczne przesuwanie do dołu */
}

/* Naprawa szerokości kontenerów zawierających wykresy i zagnieżdżone ramki */
.dxbl-group-body-content .dxbl-fl-item-horizontal .dxbl-fl-ctrl.dxbl-fl-ctrl-nc {
    width: 100% !important; /* Zezwolenie na zajęcie pełnej szerokości */
    max-width: 100% !important;
    flex-basis: 100%;
}

.dxbl-group-body-content .dxbl-fl-item-horizontal:has(.dxbl-fl-ctrl-nc) {
    flex-wrap: wrap !important; /* Pozwolenie na zawijanie, gbyby etykieta i wykres miały się nie zmieścić */
    align-items: stretch !important;
}

.dxbl-group-body-content .dxbl-fl-item-horizontal:has(.dxbl-fl-ctrl-nc) .dxbl-fl-cpt {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
}

/* Responsywność dla układu kolumn (dxbl-form-layout-group) */
/* Desktop: domyślnie 4 kolumny (dxbl-col-md-3) */

@media (min-width: 769px) and (max-width: 1215px) {
    /* Tablet: wymuszenie 2 kolumn (50%) dla elementów, które mają być ćwiartkami na desktopie */
    .dxbl-fl .dxbl-row > .dxbl-col-md-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 768px) {
    /* Mobile: wymuszenie 1 kolumny (100%) dla wszystkich elementów siatki */
    .dxbl-fl .dxbl-row > [class*="dxbl-col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .dxbl-group-body-content .dxbl-fl-item-horizontal {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .dxbl-group-body-content .dxbl-fl-item-horizontal .dxbl-fl-cpt {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 4px !important;
    }

    .dxbl-group-body-content .dxbl-fl-item-horizontal .dxbl-fl-ctrl {
        width: 100% !important;
        padding-left: 0 !important;
    }

    .inradr-info-box {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Input styling for these items */
.dxbl-group-body-content .dxbl-fl-item-horizontal .dxbl-text-edit {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.dxbl-group-body-content .dxbl-fl-item-horizontal .dxbl-text-edit input,
.dxbl-group-body-content .dxbl-fl-item-horizontal .dxbl-text-edit-input {
    background-color: transparent !important;
    border: none !important;
    color: #1F2324 !important;
}

.dxbl-group-body-content .dxbl-fl-item-horizontal .dxbl-text-edit.dxbl-disabled::before {
    background-color: transparent !important;
}

/* --- Global Form Item Layout (Consolidated) --- */
.dxbl-fl .dxbl-fl-item:not(.dxbl-fl-item-horizontal) {
    margin-top: 4px;
    margin-bottom: 24px; /* Globalny odstęp między elementami */
    font-size: 16px; 
    font-weight: 500;
    color: var(--InRadr-Blue-Navy) !important; /* Wymuszenie ciemniejszego koloru Navy */
}

/* Wymuszenie koloru dla etykiet dxbl-fl-cpt */
label.dxbl-fl-cpt {
    color: var(--InRadr-Blue-Navy) !important;
    font-weight: 500 !important;
}

/*styling string values rendered with HighlghtStringPropertyEditor End */

/* Mobile Navigation - Hamburger Modernization */
@media (max-width: 991px) {
    /* Target the toggle button (hamburger) */
    .dxbl-menu .dxbl-menu-btn.dxbl-menu-toggle {
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        padding: 6px 10px !important;
        transition: all 0.2s ease !important;
    }

    .dxbl-menu .dxbl-menu-btn.dxbl-menu-toggle:hover {
        background: rgba(255, 255, 255, 0.15) !important;
    }

    /* Replace the standard 3 lines with a modern Bootstrap Icon-like look */
    .dxbl-menu .dxbl-menu-toggle .dxbl-menu-bar {
        background-color: white !important;
        height: 2px !important;
        width: 22px !important;
        margin: 4px 0 !important;
        border-radius: 2px !important;
        display: block !important;
    }
}

/* Responsive styling for tab lists on screens smaller than 767px */
@media (max-width: 767px) {
    .dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul,
    .dxbl-tabs > .dxbl-tabs-tablist > ul {
        display: flex;
        padding-left: 0;
        white-space: nowrap;
        flex-wrap: wrap;
        align-items: stretch;
        flex-direction: column;
    }

    .dxbl-group-header.dxbl-accordion-group-header {
        font-size: 3.5vw;
    }
}

/* Splash Screen Progress */
.inradr-splash-screen-progress-container {
    width: 10%;
    height: 10px;
    background: linear-gradient(90deg, #e0e0e0, #f5f5f5);
    overflow: hidden;
    border-radius: 999px;
    position: relative;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}

.inradr-splash-screen-progress-bar {
    height: 100%;
    width: 30%;
    background: linear-gradient(
        135deg,
        var(--InRadr-Grey-Light) 0%,
        #00bfff 50%,
        var(--InRadr-Grey-Light) 100%
    );
    position: absolute;
    border-radius: 999px;
    animation: slide 1.2s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(0, 191, 255, 0.6);
    opacity: 0.9;
}

@keyframes slide {
    0% {
        left: -40%;
    }

    100% {
        left: 100%;
    }
}

/* --- ListView Grid Fixes --- */
.dxbl-grid-header:hover,
.dxbl-grid-header:focus,
.dxbl-grid-header.dxbl-grid-header-sortable:hover,
.dxbl-grid-header-content:hover,
.dxbl-grid-header:first-child,
.dxbl-grid-header:first-of-type,
.dxbl-grid-header:first-child:hover,
.dxbl-grid-header:first-of-type:hover {
    border-radius: 0 !important;
}

/* Zapobieganie zaokrągleniom kontenerów wewnątrz th */
.dxbl-grid-header * {
    border-radius: 0 !important;
}

/* Modern Status Bar Design (Footer Toolbar) */
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1001;
    background-color: var(--InRadr-Blue-Navy) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* --- GLOBAL DROPDOWN MANAGEMENT --- */
/* Te reguły dotyczą wszystkich dropdownów DevExpress (Nav, Filtry, Daty) */
.dxbl-dropdown-dialog,
.dxbl-dropdown-body {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* 1. NAV DROPDOWNS (Granatowe) */
.dxbl-menu-dropdown.dxbl-dropdown-dialog,
.dxbl-dropdown-dialog:has(.dxbl-menu-item-list) {
    background-color: var(--InRadr-Blue-Navy) !important;
    margin-top: 8px !important;
    border: none !important;
}

/* 2. STANDARD DROPDOWNS (Białe - Filtry, Kalendarze, Context Menu) */
.dxbl-filter-menu-dropdown,
.dxbl-context-menu-dropdown,
.dxbl-date-edit-dropdown,
.dxbl-combobox-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
}

.dxbl-scroll-viewer,
.dxbl-scroll-viewer-content {
    background: transparent !important;
    border: none !important;
}
/* --- END GLOBAL DROPDOWN MANAGEMENT --- */

.dxbl-menu-dropdown-item {
    border: none !important;
    background: transparent !important;
}

.dxbl-menu-item-list {
    padding: 8px 0 !important;
    margin: 0 !important;
}
/* --- End Dropdown Cleanup --- */

.footer .dxbl-btn-toolbar {
    height: 36px;
    padding: 0 16px;
}

/* Brak efektu hover na pseudo-przyciskach footera */
.footer .dxbl-btn,
.footer .dxbl-btn:hover,
.footer .dxbl-btn:focus,
.footer .dxbl-btn:active,
.footer .dxbl-btn.dxbl-active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 0 10px !important;
    cursor: default !important;
    opacity: 1 !important;
}

/* DevExpress często używa pseudoelementów do robienia tła na hover - ukrywamy je całe w footrze */
.footer .dxbl-btn::before,
.footer .dxbl-btn::after {
    display: none !important;
}

.footer .dxbl-btn .dxbl-image {
    color: var(--InRadr-Blue-Light) !important;
    font-size: 14px;
    margin-right: 6px;
}

/* State Backgrounds (Modern Subtle Overlays) */
.footer.kind-success { background-color: #1b4332 !important; color: #d8f3dc; }
.footer.kind-warning { background-color: #432818 !important; color: #ffe6a7; }
.footer.kind-error   { background-color: #4a0404 !important; color: #ffccd5; }

/* Pulse Animation for Spinner */
.footer .spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--InRadr-Blue-Light);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Responsywność dla status bara */
@media (max-width: 1200px) {
    .footer .ctx-version,
    .footer .ctx-build,
    .footer .ctx-instance {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .footer .dxbl-btn-toolbar {
        padding: 0 4px;
    }
    .footer .dxbl-btn {
        padding: 0 6px !important;
        font-size: 11px !important;
    }
    .footer .ctx-user span:not(.dxbl-image), 
    .footer .ctx-tenant span:not(.dxbl-image) { 
        max-width: 80px; 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
        display: inline-block;
        vertical-align: middle;
    }
    
    .xaf-view-caption-lg {
        font-size: 18px !important;
    }
    
    .view-caption-area {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Zapewnienie, że treść strony nie jest przykryta przez stopkę */
body {
    padding-bottom: 36px; /* Dopasuj do wysokości Twojej stopki */
}

/* Custom Info Box based on Figma specs */
.dxbl-row:has(> .inradr-info-box) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px;   /* Odstępy między boksami wewnątrz wiersza */
    margin-top: 5px !important;
    padding-left: 10px !important;
}

.inradr-info-box {
    width: auto !important; /* Pozwól XAF (bootstrap) kontrolować szerokość kolumny */
    min-width: 320px;
    max-width: 438px;
    height: 86px;
    padding: 16px;
    border-radius: 25px;
    border: 1px solid var(--InRadr-Grey-Light);
    background-color: white;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px !important;
}

/* Usuwamy nadmiarowe paddingi/marginy z kolumn bootstrapa dla info-boxów */
.dxbl-row:has(> .inradr-info-box) > .inradr-info-box {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.inradr-info-box .dxbl-fl-cpt {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--InRadr-Grey-Dark) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.inradr-info-box .dxbl-text-edit {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: unset !important;
}

.inradr-info-box input,
.inradr-info-box .dxbl-text-edit-input {
    font-size: 24px !important;
    font-weight: 500 !important;
    color: var(--InRadr-Blue-Navy) !important;
    padding: 0 !important;
    background-color: transparent !important; /* Fully transparent background */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.inradr-info-box .dxbl-text-edit.dxbl-disabled::before, 
.inradr-info-box .dxbl-text-edit:disabled::before {
    background-color: transparent !important; /* DevExpress Hintergrund für gesperrte Felder entfernen */
}

/* --- Wymuszenie 4 kolumn (25%) dla określonych wierszy XAF layout (tylko główny poziom) --- */
.force-four-columns > .dxbl-row,
.force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.force-four-columns > .dxbl-row > .dxbl-fl-item,
.force-four-columns > .dxbl-row > .dxbl-col,
.force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-fl-item,
.force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-col {
    flex: 0 0 25% !important;
    max-width: 25% !important;
}

/* Responsywność dla mniejszych ekranów (żeby wykresy nie znikały przy zmniejszaniu okna) */
@media (max-width: 1215px) {
    .force-four-columns > .dxbl-row > .dxbl-fl-item,
    .force-four-columns > .dxbl-row > .dxbl-col,
    .force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-fl-item,
    .force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 768px) {
    .force-four-columns > .dxbl-row > .dxbl-fl-item,
    .force-four-columns > .dxbl-row > .dxbl-col,
    .force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-fl-item,
    .force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}