:root {
    /* Kolory */
    --calm-yellow: #DF8200;
    --light-orange: #fcc197;
    --calm-orange: #DE590B;
    --light-gray: #9e9d9d;
    --gray: #636363;
    --dark-gray: #161616;
    --white: #fff;
    --black: #000;
    --light-blue: #a2c5e0;
    --bright-ocean: #0dcaf0;
    --calm-ocean: #036a78;
    --light-green: #98edb7;
    --green: #039C23;
    --dark-green: #4B755B;
    --mint-green: #037847;
    --light-lavender: #8C4191;
    --light-red: #de7c8e;
    --calm-red: #dc3545;
    --bleach-fade: #f2f1f0;
    --mist-silver: #e6e5e4;
    --dim-silver: #d4d3d2;
    --dark-silver: #364254;
    /* Kolory dla FinEstimate */
    --color-fin-estimate-revenue-bk: var(--mist-silver);
    --color-fin-estimate-revenue-fk: var(--dark-gray);
    --color-fin-estimate-cost-bk: var(--mist-silver);
    --color-fin-estimate-cost-fk: var(--dark-gray);
    --color-fin-estimate-profit-bk: var(--calm-orange);
    --color-fin-estimate-profit-fk: var(--white);
    --color-fin-estimate-cumulative-revenue-bk: var(--mist-silver);
    --color-fin-estimate-cumulative-revenue-fk: var(--dark-gray);
    --color-fin-estimate-cumulative-cost-bk: var(--mist-silver);
    --color-fin-estimate-cumulative-cost-fk: var(--dark-gray);
    --color-fin-estimate-cumulative-profit-bk: var(--calm-orange);
    --color-fin-estimate-cumulative-profit-fk: var(--white);
    --color-fin-estimate-node-bk-1: var(--light-blue);
    --color-fin-estimate-node-fk-1: var(--light-blue);
    --color-fin-estimate-node-bk-2: var(--light-green);
    --color-fin-estimate-node-fk-2: var(--light-green);
    --color-fin-estimate-node-bk-3: var(--calm-orange);
    --color-fin-estimate-node-fk-3: var(--calm-orange);
    --color-fin-estimate-node-bk-4: var(--light-red);
    --color-fin-estimate-node-fk-4: var(--light-red);
    --color-fin-estimate-node-bk-5: var(--light-orange);
    --color-fin-estimate-node-fk-5: var(--light-orange);
    --color-fin-estimate-node-bk-6: var(--bleach-fade);
    --color-fin-estimate-node-fk-6: var(--bleach-fade);
    --color-fin-estimate-node-bk-7: var(--dim-silver);
    --color-fin-estimate-node-fk-7: var(--dim-silver);
    --color-fin-estimate-node-bk-8: var(--light-gray);
    --color-fin-estimate-node-fk-8: var(--light-gray);
    --color-fin-estimate-node-bk-9: var(--gray);
    --color-fin-estimate-node-fk-9: var(--gray);
    --color-fin-estimate-node-bk-10: var(--white);
    --color-fin-estimate-node-fk-10: var(--white);
    --color-fin-estimate-node-bk-11: var(--black);
    --color-fin-estimate-node-fk-11: var(--black);
    --color-fin-estimatfilter-visible: #212529;
    --color-fin-estimate-filter-partial: #7d7561;
    --color-fin-estimate-filter-hidden: #8f856d;
    /* Kolory dla with-dot */
    --color-with-dot-dot: #D27614; /* #6da2f7;   #344feb; #ff3b30;  Kolor kropki (tu: czerwony)  */
    /* Kolory dla client-label*/
    --color-client-label: rgba(0,0,0,0.78);
    /* Kolory przycisków */
    --color-yes-button-font: var(--white);
    --color-yes-button-bg: var(--green);
    --color-yes-button-border: var(--light-green);
    --color-yes-button-hover-font: var(--dark-green);
    --color-yes-button-hover-bg: var(--light-green);
    --color-yes-button-hover-border: var(--light-green);
    --color-no-button-font: var(--calm-red);
    --color-no-button-border: var(--calm-red);
    --color-no-button-hover-font: var(--white);
    --color-no-button-hover-bg: var(--calm-red);
    /* Kolory dla custom-badge */
    --color-badge-custom-1: var(--light-lavender);
    --color-badge-default: var(--bright-ocean);
    --color-badge-draft: var(--calm-ocean);
    --color-badge-active: var(--mint-green);
    --color-badge-pending: var(--calm-yellow);
    --color-badge-finished: var(--dark-silver);
    --color-badge-canceled: var(--calm-red);
    --color-with-inline-edit-column-highlight-readonly-bk: color-mix(in srgb, var(--black) 5%, transparent);
    --color-with-inline-edit-column-highlight-editable-bk: rgb(0, 120, 215, 0.02);
}


.single-line-ellipsis-auto-width {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
}

/* Tryb 2: ConstWidth (wymaga podania Width w Model Editorze, bezpieczny dla wielu kolumn) */
.single-line-ellipsis-const-width {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 0;
    width: 100%;
}



/* Celujemy w etykietę (label) wewnątrz naszego elementu układu */
label.caption-with-dot-style1::after {
    content: ''; /* Wymagane, by pseudoelement w ogóle się pojawił */
    display: inline-block;
    width: 6px; /* Szerokość kropki */
    height: 6px; /* Wysokość kropki */
    background-color: var(--color-with-dot-dot);
    border-radius: 50%; /* Zaokrąglenie do idealnego koła */
    margin-left: 6px; /* Odstęp od tekstu etykiety */
    vertical-align: middle; /* Wyrównanie w pionie do środka tekstu */
}




/* --- FIN ESTIMATE --- */

/* --- REVENUE (Przychody) --- */
.fin-estimate-revenue-cell-bk {
    background-color: var(--color-fin-estimate-revenue-bk) !important;
}

.fin-estimate-revenue-cell-content {
    color: var(--color-fin-estimate-revenue-fk);
}

/* --- COST (Koszty) --- */
.fin-estimate-cost-cell-bk {
    background-color: var(--color-fin-estimate-cost-bk) !important;
}

.fin-estimate-cost-cell-content {
    color: var(--color-fin-estimate-cost-fk);
}

/* --- PROFIT (Zysk okresowy) --- */
.fin-estimate-profit-cell-bk {
    background-color: var(--color-fin-estimate-profit-bk) !important;
}

.fin-estimate-profit-cell-content {
    color: var(--color-fin-estimate-profit-fk);
    font-weight: bold;
}




/* --- Cumulative Revenue  --- */
.fin-estimate-cumulative-revenue-cell-bk {
    background-color: var(--color-fin-estimate-cumulative-revenue-bk) !important;
}

.fin-estimate-cumulative-revenue-cell-content {
    color: var(--color-fin-estimate-cumulative-revenue-fk);
}

/* --- Cumulative Cost  --- */
.fin-estimate-cumulative-cost-cell-bk {
    background-color: var(--color-fin-estimate-cumulative-cost-bk) !important;
}

.fin-estimate-cumulative-cost-cell-content {
    color: var(--color-fin-estimate-cumulative-cost-fk);
}



/* --- CUMULATIVE PROFIT (Zysk skumulowany) --- */
.fin-estimate-cumulative-profit-cell-bk {
    background-color: var(--color-fin-estimate-cumulative-profit-bk) !important;
}

.fin-estimate-cumulative-profit-cell-content {
    color: var(--color-fin-estimate-cumulative-profit-fk);
    font-weight: bold;
}




/* Czarny dla w pełni widocznych */
.fin-estimate-filter-visible {
    color: var(--color-fin-estimate-filter-visible);
    font-weight: 400;
}

/* Szary dla częściowych */
.fin-estimate-filter-partial {
    color: var(--color-fin-estimate-filter-partial);
    font-weight: 400;
}

/* Szary przekreślony dla ukrytych */
.fin-estimate-filter-hidden {
    color: var(--color-fin-estimate-filter-hidden);
    font-weight: 400;
    text-decoration: line-through;
}



.fin-estimate-text-right {
    text-align: right !important;
    /* Zabezpieczenie: jeśli DevExpress wymusi gdzieś display: flex, to pociągnie zawartość do prawej */
    justify-content: flex-end !important;
}


.fin-estimate-text-left {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* 1. Główny kontener drzewa */
.fin-estimate-treelist-container {
    height: calc(100vh - 250px);
    width: 100%;
}

/* 2. Okienko popup z filtrami (z możliwością rozciągania) */
.fin-estimate-filter-popup {
    height: 350px;
    min-height: 250px;
    min-width: 280px;
    max-height: 65vh;
    resize: both;
    overflow: hidden;
}

/* 3. Wnętrze komórki z danymi (kursor i blokada zaznaczania tekstu) */
.fin-estimate-cell-content {
    cursor: pointer;
    user-select: none;
}


/* style dla nodów, które można ustawiać w FinEstimateData */

.fin-estimate-node-underline {
    text-decoration: underline;
}

.fin-estimate-node-line-through {
    text-decoration: line-through;
}

.fin-estimate-node-underline-line-through {
    text-decoration: underline line-through;
}

.fin-estimate-node-italic {
    font-style: italic;
}

.fin-estimate-node-bk-1 {
    background-color: var(--color-fin-estimate-node-bk-1) !important;
}

.fin-estimate-node-fk-1 {
    color: var(--color-fin-estimate-node-fk-1);
}

.fin-estimate-node-bk-2 {
    background-color: var(--color-fin-estimate-node-bk-2) !important;
}

.fin-estimate-node-fk-2 {
    color: var(--color-fin-estimate-node-fk-2);
}

.fin-estimate-node-bk-3 {
    background-color: var(--color-fin-estimate-node-bk-3) !important;
}

.fin-estimate-node-fk-3 {
    color: var(--color-fin-estimate-node-fk-3);
}

.fin-estimate-node-bk-4 {
    background-color: var(--color-fin-estimate-node-bk-4) !important;
}

.fin-estimate-node-fk-4 {
    color: var(--color-fin-estimate-node-fk-4);
}

.fin-estimate-node-bk-5 {
    background-color: var(--color-fin-estimate-node-bk-5) !important;
}

.fin-estimate-node-fk-5 {
    color: var(--color-fin-estimate-node-fk-5);
}

.fin-estimate-node-bk-6 {
    background-color: var(--color-fin-estimate-node-bk-6) !important;
}

.fin-estimate-node-fk-6 {
    color: var(--color-fin-estimate-node-fk-6);
}

.fin-estimate-node-bk-7 {
    background-color: var(--color-fin-estimate-node-bk-7) !important;
}

.fin-estimate-node-fk-7 {
    color: var(--color-fin-estimate-node-fk-7);
}

.fin-estimate-node-bk-8 {
    background-color: var(--color-fin-estimate-node-bk-8) !important;
}

.fin-estimate-node-fk-8 {
    color: var(--color-fin-estimate-node-fk-8);
}

.fin-estimate-node-bk-9 {
    background-color: var(--color-fin-estimate-node-bk-9) !important;
}

.fin-estimate-node-fk-9 {
    color: var(--color-fin-estimate-node-fk-9);
}

.fin-estimate-node-bk-10 {
    background-color: var(--color-fin-estimate-node-bk-10) !important;
}

.fin-estimate-node-fk-10 {
    color: var(--color-fin-estimate-node-fk-10);
}

.fin-estimate-node-bk-11 {
    background-color: var(--color-fin-estimate-node-bk-11) !important;
}

.fin-estimate-node-fk-11 {
    color: var(--color-fin-estimate-node-fk-11);
}



/* BEGIN - Custom PopUp Template */

.custom-popup-side-panel-right {
    position: fixed !important;
    /*top: 0 !important;*/

    right: 0 !important;
    left: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    animation: custom-popup-side-panel-slideInRight 0.3s ease-out;
}

@keyframes custom-popup-side-panel-slideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

/* Zabija rogi na głównym kontenerze ORAZ na wszystkich jego kluczowych wnętrznościach */
.custom-popup-side-panel-right .dxbl-modal-content {
    border-radius: 0 !important;
}

.custom-popup-header {
    width: 100%;
}

    .custom-popup-header > .flex-grow-1 {
        min-width: 0;
    }

.custom-popup-header-actions {
    margin-left: auto;
    flex-shrink: 0;
}

.custom-popup-header-action-btn {
    border-radius: 6px;
    transition: background-color 0.15s ease, transform 0.05s ease;
}

    .custom-popup-header-action-btn:hover {
        background-color: rgba(0, 0, 0, 0.06);
    }

    .custom-popup-header-action-btn:active {
        transform: scale(0.98);
    }

    .custom-popup-header-action-btn:focus-visible {
        outline: 2px solid rgba(0, 0, 0, 0.25);
        outline-offset: 2px;
    }

/* END - Custom PopUp Template */


/* Ikony */
.fluent-window-arrow-up-16-regular {
    width: 16px;
    height: 16px;
    background-image: url("/images/fluent/ic_fluent_window_arrow_up_16_regular.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.fluent-window-arrow-up-16-filled {
    width: 16px;
    height: 16px;
    background-image: url("/images/fluent/ic_fluent_window_arrow_up_16_filled.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}


.fluent-window-16-regular {
    width: 16px;
    height: 16px;
    background-image: url("/images/fluent/ic_fluent_window_16_regular.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.fluent-window-16-filled {
    width: 16px;
    height: 16px;
    background-image: url("/images/fluent/ic_fluent_window_16_filled.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.fluent-edit-16-regular {
    width: 16px;
    height: 16px;
    background-image: url("/images/fluent/ic_fluent_edit_16_regular.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.fluent-edit-16-filled {
    width: 16px;
    height: 16px;
    background-image: url("/images/fluent/ic_fluent_edit_16_filled.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}


/* Confirmation dialog i Dlg Box */
/* Zwiększenie szerokości dla obu przycisków */
.dxbl-popup button.xaf-action[data-action-name="No"],
.dxbl-popup button.xaf-action[data-action-name="Yes"],
.dxbl-popup button.xaf-action[data-action-name="Tak"],
.dxbl-popup button.xaf-action[data-action-name="Nie"],
.dxbl-popup button.xaf-action[data-action-name="Odrzuć zmiany"],
.dxbl-popup button.xaf-action[data-action-name="Zapisz zmiany"],
.dxbl-popup button.xaf-action[data-action-name="Zapisz"],
.dxbl-popup button.xaf-action[data-action-name="Anuluj"],
.dxbl-popup button.xaf-action[data-action-name="Zamknij"] {
    min-width: 120px !important; /* Tutaj dostosuj wartość do swoich potrzeb */
}


/* Twoje style z Opcji 2 (kolory) zostają bez zmian poniżej */
.dxbl-popup button.xaf-action[data-action-name="No"],
.dxbl-popup button.xaf-action[data-action-name="Nie"],
.dxbl-popup button.xaf-action[data-action-name="Odrzuć zmiany"],
.dxbl-popup button.xaf-action[data-action-name="Anuluj"],
.dxbl-popup button.xaf-action[data-action-name="Zamknij"] {
    background-color: transparent !important;
    color: var(--color-no-button-font) !important;
    border: 1px solid var(--color-no-button-border) !important;
    box-shadow: none !important;
}

.dxbl-popup button.xaf-action[data-action-name="Yes"],
.dxbl-popup button.xaf-action[data-action-name="Zapisz"],
.dxbl-popup button.xaf-action[data-action-name="Zapisz zmiany"],
.dxbl-popup button.xaf-action[data-action-name="Tak"] {
    background-color: var(--color-yes-button-bg) !important;
    color: var(--color-yes-button-font) !important;
    border-color: var(--color-yes-button-border) !important;
}

    .dxbl-popup button.xaf-action[data-action-name="Yes"]:hover,
    .dxbl-popup button.xaf-action[data-action-name="Zapisz zmiany"]:hover,
    .dxbl-popup button.xaf-action[data-action-name="Zapisz"]:hover,
    .dxbl-popup button.xaf-action[data-action-name="Tak"]:hover {
        background-color: var(--color-yes-button-hover-bg) !important;
        color: var(--color-yes-button-hover-font) !important;
        border-color: var(--color-yes-button-hover-border) !important;
    }

/* Efekt najechania myszką (Hover) dla przycisku No */
.dxbl-popup button.xaf-action[data-action-name="No"]:hover,
.dxbl-popup button.xaf-action[data-action-name="Nie"]:hover,
.dxbl-popup button.xaf-action[data-action-name="Odrzuć zmiany"]:hover,
.dxbl-popup button.xaf-action[data-action-name="Zamknij"]:hover {
    background-color: var(--color-no-button-hover-bg) !important;
    color: var(--color-no-button-hover-font) !important;
}




/* custom styles for actions */


.contract-plan-calc-action { /* ContractPlanCalcAction */
    width: 150px;
}


/* Testowe style */

.moj-testowy-styl-dla-przycisku-1 {
    background-color: #D27614;
}

.moj-testowy-styl-dla-przycisku-2 {
    background-color: #32a852;
}

.moj-testowy-styl-dla-przycisku-3 {
    background-color: #a832a0;
}

.moj-testowy-styl-dla-przycisku-4 {
    background-color: #a88132;
}


/* ClientInfo - nazwa obsługiwanej firmy (#12). Stoi w nagłówku głównego okna
   (CustomMainFormTemplateComponent), między paskiem nagłówka a awatarem. Przed dzwonkiem się nie da:
   pasek nagłówka jest adaptacyjny i zajmuje całą wolną szerokość - zwężony chowa przyciski pod "...". */

.app-client-name {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 28vw;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-client-label);
}

@media (max-width: 575.98px) {
    .app-client-name {
        display: none;
    }
}

/* Na stronie logowania nagłówka głównego okna nie ma - tam nazwę pokazuje etykieta z _Host.cshtml,
   renderowana poza drzewem aplikacji, na poziomie body. Po zalogowaniu jest ukryta, bo nazwa
   stoi już w nagłówku. Stronę logowania rozpoznajemy po nagłówku karty (.logon-template-header). */
.client-label {
    display: none;
}

body:has(.logon-template-header) .client-label {
    display: block;
    position: fixed;
    top: 0;
    right: 24px;
    height: 3.1rem;
    line-height: 3.1rem;
    max-width: 28vw;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-client-label);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
}

/* Badges */

.custom-badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.375rem 0;
}

/* Główny styl kształtu i tekstu etykiety */
.custom-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35em 0.75em;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    border-radius: 1rem;
    white-space: nowrap;
    transition: all 0.15s ease-in-out;
}

    .custom-badge::before {
        content: '';
        display: none;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        margin-right: 0.5rem;
    }

.custom-badge-dot::before {
    display: inline-block;
}

.custom-badge-custom-1 {
    color: var(--color-badge-custom-1);
    background-color: color-mix(in srgb, var(--color-badge-custom-1) 10%, transparent);
}

    .custom-badge-custom-1::before {
        background-color: var(--color-badge-custom-1);
    }

.custom-badge-default {
    color: var(--color-badge-default);
    background-color: color-mix(in srgb, var(--color-badge-default) 20%, transparent);
}

    .custom-badge-default::before {
        background-color: color-mix(in srgb, var(--color-badge-default) 10%, transparent);
    }

.custom-badge-draft-none {
    color: var(--color-badge-draft);
    background-color: color-mix(in srgb, var(--color-badge-draft) 10%, transparent);
}

.custom-badge-simulation::before {
    background-color: color-mix(in srgb, var(--color-badge-draft) 5%, transparent);
}

.custom-badge-draft-low {
    color: var(--color-badge-draft);
    background-color: color-mix(in srgb, var(--color-badge-draft) 10%, transparent);
}

    .custom-badge-draft-low::before {
        background-color: color-mix(in srgb, var(--color-badge-draft) 20%, transparent);
    }

.custom-badge-draft-medium {
    color: var(--color-badge-draft);
    background-color: color-mix(in srgb, var(--color-badge-draft) 10%, transparent);
}

    .custom-badge-draft-medium::before {
        background-color: color-mix(in srgb, var(--color-badge-draft) 50%, transparent);
    }

.custom-badge-draft-high {
    color: var(--color-badge-draft);
    background-color: color-mix(in srgb, var(--color-badge-draft) 10%, transparent);
}

    .custom-badge-draft-high::before {
        background-color: color-mix(in srgb, var(--color-badge-draft) 100%, transparent);
    }

.custom-badge-active {
    color: var(--color-badge-active);
    background-color: color-mix(in srgb, var(--color-badge-active) 10%, transparent);
}

    .custom-badge-active::before {
        background-color: var(--color-badge-active);
    }

.custom-badge-pending {
    color: var(--color-badge-pending);
    background-color: color-mix(in srgb, var(--color-badge-pending) 10%, transparent);
}

    .custom-badge-pending::before {
        background-color: var(--color-badge-pending);
    }

.custom-badge-finished {
    color: var(--color-badge-finished);
    background-color: color-mix(in srgb, var(--color-badge-finished) 10%, transparent);
}

    .custom-badge-finished::before {
        background-color: var(--color-badge-finished);
    }

.custom-badge-canceled {
    color: var(--color-badge-canceled);
    background-color: color-mix(in srgb, var(--color-badge-canceled) 10%, transparent);
}

    .custom-badge-canceled::before {
        background-color: var(--color-badge-canceled);
    }


/* new contract window (przyciski) */

/* Główny wygląd przycisku - stały rozmiar i wyśrodkowanie */
.new-contract-btn {
    width: 200px !important; /* Stała szerokość dopasowana do najdłuższego tekstu */
    height: 60px !important; /* Zwiększona, stała wysokość */
    /* Flexbox do idealnego wyśrodkowania zawartości */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important; /* Zabezpieczenie: pozwala zawinąć tekst w razie braku miejsca */
    padding: 0 10px !important; /* Nadpisujemy padding ze względu na stały rozmiar */
    /* Wygląd wizualny */
    border-radius: 8px !important;
    border: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
    color: #4b5563 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

    /* Ukrycie domyślnych efektów najechania DevExpress */
    .new-contract-btn::before,
    .new-contract-btn::after {
        display: none !important;
    }

    /* Efekt najechania myszką (Hover) */
    .new-contract-btn:hover {
        background-color: #fcf6f0 !important;
        border-color: #f59e42 !important;
        color: #c46500 !important;
        box-shadow: 0 4px 10px rgba(59, 130, 246, 0.15) !important;
        cursor: pointer !important;
    }

    /* Efekt wciśnięcia (Active) */
    .new-contract-btn:active {
        transform: translateY(0) !important;
        box-shadow: 0 1px 2px rgba(59, 130, 246, 0.1) !important;
    }


/* NAWIGACJA, 
    * usunięcie podkreśleń dotyczy wszystkich elementów accordion-link w nawigacji 
    * %40EmptyView - to nazwa widoku, dla które link jest wyszarzany i wyłączony jest click 
    (usunąłem obraze transparent)

*/


/* 1. CAŁKOWITA BLOKADA KLIKANIA na poziomie całego wiersza (nagłówka akordeonu) */
.dxbl-group-header:has(a[href="%40EmptyView"]) {
    pointer-events: none !important;
    cursor: default !important;
}

/* "Zabicie" ukrytej strefy klikalnej XAF - to ona powodowała, że element reagował na mysz */
a[href="%40EmptyView"] .xaf-navigation-link-click-area {
    display: none !important;
}

/* 2. Ukrycie przycisku strzałki (robi miejsce po lewej) */
.dxbl-group-header:has(a[href="%40EmptyView"]) button.dxbl-group-expand-btn {
    display: none !important;
}

/* 3. Stylowanie całego wiersza: przesunięcie w lewo, wyszarzenie i brak podkreślenia */
a[href="%40EmptyView"].dxbl-accordion-item-content {
    opacity: 0.6 !important; /* Wyszarzenie */
    padding-left: 0.5rem !important;
    text-decoration: none !important; /* Brak podkreślenia z linku */
}

/* 4. Wygląd samego tekstu DOKUMENTY (mniejsza czcionka) */
a[href="%40EmptyView"] .xaf-nav-link span {
    font-size: 0.85rem !important; /* Zmniejszona czcionka (domyślnie to ok. 1rem) */
    font-weight: 600 !important; /* Pogrubienie, by wciąż wyglądało jak tytuł grupy */
    color: #6c757d !important;
    text-decoration: none !important; /* Brak podkreślenia (na wypadek dziedziczenia) */
    text-transform: uppercase;
}

/* Globalne usunięcie podkreślenia dla WSZYSTKICH elementów nawigacji (akordeonu) w XAF */
.dxbl-accordion .dxbl-accordion-item-content,
.dxbl-accordion .dxbl-accordion-item-content:hover,
.dxbl-accordion .dxbl-accordion-item-content:focus,
.dxbl-accordion .xaf-nav-link,
.dxbl-accordion .xaf-nav-link:hover,
.dxbl-accordion .xaf-nav-link span {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}


/* ========================================================== */
/* tax-number editor   */

/* Główny kontener - Flexbox + Container Query */
.tax-number-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    /* DEFINIUJEMY KONTENER: 
       To mówi przeglądarce, aby śledziła szerokość tego konkretnego div'a */
    container-type: inline-size;
    container-name: tax-widget; /* Opcjonalna nazwa dla porządku */
}

.tax-number-prefix {
    width: 80px;
    flex-shrink: 0;
}

.tax-number-content {
    flex-grow: 1;
}

.tax-number-gus-import-icon {
    width: 16px;
    height: 24px; /* Zwiększamy wysokość do 24px, zapobiegając kurczeniu się przycisku */
    /* Lucide "arrow-right-to-line" — ten sam rysunek, co ikona akcji „Import z GUS"
       na liście kontrahentów (Module/Images/import.svg). Oba wejścia do rejestru
       wyglądają tak samo, a rysunek trzyma się zestawu z pasków narzędzi. */
    background-image: url("/images/lucide/arrow-right-to-line.svg");
    /* Zmieniamy z 'contain' na sztywny rozmiar, aby sama ikona pozostała ostra i mała (16x16) wewnątrz wyższego (24px) kontenera */
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    vertical-align: middle; /* Wyrównuje ikonę idealnie do środka względem tekstu */
}

/* Kręciołek na czas zapytania do rejestru REGON — zajmuje miejsce ikony importu,
   więc przycisk nie zmienia szerokości. Lucide "loader-circle", czyli ta sama kreska
   co w ikonie obok; kółko rysowane borderem odstawało od niej grubością i ostrymi
   końcami. Reszta właściwości jak w .tax-number-gus-import-icon. */
.tax-number-gus-import-spinner {
    width: 16px;
    height: 24px;
    background-image: url("/images/lucide/loader-circle.svg");
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
    animation: tax-number-gus-import-spin 1s linear infinite;
}

@keyframes tax-number-gus-import-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tax-number-gus-import-spinner {
        animation-duration: 3s;
    }
}

/* Responsywny tekst przycisku */
.tax-number-gus-import-text {
    margin-left: 6px;
    display: none; /* Domyślnie ukrywamy tekst (zostaje sama ikona) */
    white-space: nowrap; /* KLUCZOWE: Zapobiega łamaniu tekstu na dwie linijki */
}

/* 
   ZAMIAST @media UŻYWAMY @container.
   Tekst pokaże się tylko wtedy, gdy NASZ KONTENER osiągnie np. 400px.
   (Wartość 400px możesz łatwo dobrać eksperymentalnie).
*/
@container tax-widget (min-width: 350px) {
    .tax-number-gus-import-text {
        display: inline;
    }
}

/*  InlineEditColumnHighlight z  NestedListProcessModelExtender */
.inline-edit-column-highlight-readonly-bk {
    box-shadow: inset 0 0 0 9999px var(--color-with-inline-edit-column-highlight-readonly-bk);
    color: var(--gray);
    /*background-color: var(--color-with-inline-edit-column-highlight-readonly-bk);*/
}

.inline-edit-column-highlight-editable-bk {
    background-color: var(--color-with-inline-edit-column-highlight-editable-bk);
}



/* NestedListProcessEditSettingsMinHeight */
[class*="custom-nested-list-fill-grid-"] {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}
/*
    [class*="custom-nested-fill-grid-"] .dxbl-grid {
        height: 100% !important;
        min-height: 0 !important;
    }
*/
/* Warianty wysokości (oparte na Viewport Height) */
.custom-nested-list-fill-grid-50 {
    min-height: calc(50vh - 200px) !important;
}

.custom-nested-list-fill-grid-60 {
    min-height: calc(60vh - 200px) !important;
}

.custom-nested-list-fill-grid-65 {
    min-height: calc(65vh - 200px) !important;
}

.custom-nested-list-fill-grid-70 {
    min-height: calc(70vh - 200px) !important;
}

.custom-nested-list-fill-grid-75 {
    min-height: calc(75vh - 200px) !important;
}

.custom-nested-list-fill-grid-80 {
    min-height: calc(80vh - 200px) !important;
}


/* Style dla komunikatu autonumeratora umów */

dxbl-form-layout-item.contract-numbering-help label.xaf-static-text.white-space-pre-line {
    display: block;
    padding: 16px 18px;
    margin: 0;
    border: 1px solid #d7dde5;
    border-left: 4px solid #dd580b;
    border-radius: 8px;
    background: #fcf6f0;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-line;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

    dxbl-form-layout-item.contract-numbering-help label.xaf-static-text.white-space-pre-line::first-line {
        font-weight: 700;
        font-size: 16px;
        color: #111827;
    }

/* Wymuszenie respektowania znaków nowej linii (\n) w nagłówkach kolumn Grida w XAF Blazor */
th.dxbl-grid-header .dxbl-grid-header-content span[role="presentation"] {
    white-space: pre-wrap !important;
}

/* Klasa dla linków w powiadomieniach */
.contract-link,
.contract-link:visited {
    color: black;
    transition: color 0.15s ease;
}

    .contract-link:hover {
        color: #dd580b;
    }

/* --- Import kontrahentów z GUS (poprawka #31) --- */

.gus-import {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 900px;
}

.gus-import-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gus-import-memo {
    /* Numery to ciągi cyfr - stała szerokość znaku ułatwia wyłapanie literówki. */
    font-family: Consolas, "Courier New", monospace;
}

.gus-import-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gus-import-summary {
    color: #6c757d;
}

.gus-import-bulk-roles {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.gus-import-role-picker {
    min-width: 200px;
}

.gus-import-grid {
    max-height: 420px;
}

.gus-import-status {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.85em;
    white-space: nowrap;
}

.gus-import-status-ok {
    background-color: #e3f5e3;
    color: #1d6b1d;
}

.gus-import-status-skipped {
    background-color: #ececec;
    color: #5a5a5a;
}

.gus-import-status-warning {
    background-color: #fdf0e0;
    color: #a35a09;
}

.gus-import-message {
    padding: 10px 12px;
    border-radius: 4px;
    background-color: #e3f5e3;
    color: #1d6b1d;
}

.gus-import-message-error {
    background-color: #fdebeb;
    color: #a12020;
}

.gus-import-details {
    font-size: 12px;
    color: #555;
}

.gus-import-details summary {
    cursor: pointer;
}

.gus-import-details pre {
    margin: 6px 0 0;
    padding: 8px;
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
    background-color: #f4f4f4;
    border-radius: 4px;
}

/* ==========================================================================
   Pasek akcji i obszar treści głównego okna (CustomMainFormTemplate).
   Klasy app-content-toolbar i app-main-content nadaje szablon głównego okna - popup
   (CustomPopupWindowTemplate) ma te same main-toolbar/main-content, więc reguły idą po
   naszych klasach i do popupu nie wyciekają. Wyjątek: kreska i biała ikona primary niżej -
   obowiązują na każdym pasku, także w popupie, tak jak przed tą zmianą.
   Reguły na klasy .dxbl-* są kruche: po aktualizacji DevExpressa sprawdzić, czy działają.
   ========================================================================== */

/* Wcięcie listwy i treści w jednej zmiennej - listwa (margin) i treść (padding) muszą stać
   w tej samej linii, także po zwężeniu w media query. */
#main-view-content {
    --app-content-inset: 16px;
    background-color: var(--bleach-fade);
}

@media (max-width: 575.98px) {
    #main-view-content {
        --app-content-inset: 8px;
    }
}

/* Listwa jako biała karta nad treścią. */
.app-content-toolbar {
    flex: 0 0 auto;
    min-height: 58px;
    margin: 12px var(--app-content-inset) 0;
    padding: 7px 16px;
    display: flex;
    align-items: center;
    background-color: var(--white);
    border-bottom: 1px solid var(--dim-silver);
    border-radius: 8px;
}

.app-content-toolbar > .dxbl-toolbar {
    flex: 1 1 auto;
    min-width: 0;
}

.app-main-content {
    padding: 12px var(--app-content-inset) var(--app-content-inset);
}

/* Siatka listy i treść formularza jako białe karty na szarym tle. Grupy z nagłówkiem
   (dxbl-group) mają własną ramkę DevExpressa i zostają bez zmian. */
.app-main-content > .grid-content,
.app-main-content .detail-view-content {
    background-color: var(--white);
    border-radius: 8px;
}

.app-main-content .detail-view-content {
    padding: 12px;
}

/* Pole wyłączone (np. na zatwierdzonej umowie). DevExpress daje mu przezroczyste tło - na białej karcie
   różni się od aktywnego tylko odcieniem tekstu. Szare tło odróżnia je od razu; reguła obejmuje też
   formularze w popupach, stąd .detail-view-content bez zawężenia do głównego okna. */
.detail-view-content .dxbl-text-edit.dxbl-disabled {
    background-color: var(--bleach-fade);
}

/* Odstępy MIĘDZY przyciskami. DevExpress skleja sąsiednie przyciski w grupę
   (dxbl-btn-first / dxbl-btn-last), bo rozdziela je ramkami - ramki zdejmujemy niżej. */
.app-content-toolbar .dxbl-btn.dxbl-toolbar-item {
    margin-left: 3px !important;
    margin-right: 3px !important;
}

/* Płaski przycisk. :not(.dxbl-edit-btn) chroni lupę w polu wyszukiwania. */
.app-content-toolbar .dxbl-btn:not(.dxbl-edit-btn) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: var(--gray);
    font-weight: 500;
    transition: background-color .12s ease, color .12s ease;
}

.app-content-toolbar .dxbl-btn:not(.dxbl-edit-btn):hover {
    background: var(--bleach-fade);
    color: var(--dark-gray);
}

/* Ramek nie ma, więc fokus klawiatury pokazuje obwódka. */
.app-content-toolbar .dxbl-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--calm-orange) 35%, transparent);
}

/* Wyłączony: jaśniejszy napis i przygaszona ikona. Kolor ikony siedzi w jej pliku, więc `color` jej
   nie ruszy - grayscale zdejmuje kolor, opacity rozjaśnia. Samo grayscale zostawiało ikonę ciemną
   i wyłączony przycisk za mało różnił się od aktywnego. */
.app-content-toolbar .dxbl-btn:disabled,
.app-content-toolbar .dxbl-btn.dxbl-disabled {
    background: transparent;
    color: var(--dim-silver);
    opacity: 1;
    cursor: default;
}

.app-content-toolbar .dxbl-btn:is(:disabled, .dxbl-disabled) .dxbl-image {
    filter: grayscale(1) opacity(0.35);
}

/* Jedyny pełny przycisk. dxbl-btn-primary dokłada DevExpress po RenderStyle.Primary
   (ActionBarButtonStyleController). */
.app-content-toolbar .dxbl-btn.dxbl-btn-primary {
    padding: 7px 16px;
    background: var(--calm-orange);
    color: var(--white);
    font-weight: 600;
}

.app-content-toolbar .dxbl-btn.dxbl-btn-primary:hover {
    background: color-mix(in srgb, var(--calm-orange) 85%, var(--black));
    color: var(--white);
}

/* Kreska grupująca - klasę nadaje ActionBarButtonStyleController (przed "Usuń").
   Selektor po klasie, nie po data-action-name: ten atrybut niesie napis, nie identyfikator.
   Kreska to pseudo-element w odstępie przed przyciskiem, nie jego ramka - inaczej tło "Usuń"
   po najechaniu zaczyna się na samej kresce. */
.dxbl-toolbar .dxbl-btn.app-toolbar-group-start {
    position: relative;
    overflow: visible;
    margin-left: 25px !important;
}

/* Na głównym pasku odstępy między przyciskami ustawia reguła .dxbl-btn.dxbl-toolbar-item
   (margin 3px !important) - bez mocniejszego selektora zjadłaby odstęp pod kreskę. */
.app-content-toolbar .dxbl-btn.dxbl-toolbar-item.app-toolbar-group-start {
    margin-left: 25px !important;
}

.dxbl-toolbar .dxbl-btn.app-toolbar-group-start::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--dim-silver);
    pointer-events: none;
}

/* Biała ikona na zwykłym przycisku ("Zapisz" - w motywie Fluent DevExpress rysuje ją na biało)
   ściemniona do koloru napisu; klasę nadaje ActionBarButtonStyleController. */
.dxbl-toolbar .dxbl-btn.app-toolbar-dark-icon:not(.dxbl-btn-primary) .dxbl-image {
    filter: brightness(0) opacity(0.6);
}

.dxbl-toolbar .dxbl-btn.app-toolbar-dark-icon:not(.dxbl-btn-primary):is(:disabled, .dxbl-disabled) .dxbl-image {
    filter: brightness(0) opacity(0.3);
}

/* Ikona wyróżnionego przycisku na biało - kolor siedzi w pliku ikony, więc `color` jej nie ruszy. */
.dxbl-toolbar .dxbl-btn.dxbl-btn-primary .dxbl-image,
.dxbl-toolbar .dxbl-btn.dxbl-btn-primary img,
.dxbl-toolbar .dxbl-btn.dxbl-btn-primary svg {
    filter: brightness(0) invert(1);
}

/* ==========================================================================
   Powłoka głównego okna (CustomMainFormTemplate): nagłówek i nawigacja jako jedna biała
   płaszczyzna, logo nad kolumną nawigacji, treść na szarym tle.
   Reguły zawężone do #main-window-template-component - strona logowania i popupy bez zmian.
   ========================================================================== */

/* Bez kreski pod nagłówkiem - granicę z treścią wyznacza szare tło #main-view-content. */
.dxbl-theme-fluent #main-window-template-component .header {
    border-bottom: none;
}

/* Nawigacja doklejona do nagłówka: DevExpress (Fluent) odsuwa ją o .5rem i zaokrągla róg. */
.dxbl-theme-fluent #main-window-template-component .sidebar {
    margin-top: 0;
    border-top: none;
    border-top-right-radius: 0;
}

/* Logo w linii z pozycjami nawigacji. */
#main-window-template-component .header-left-side .header-logo {
    margin-left: 12px !important;
}

@media (min-width: 576px) {
    /* Na szerokim ekranie nawigacja jest zawsze widoczna, więc hamburger znika. */
    #main-window-template-component .btn-hamburger {
        display: none;
    }

    /* collapse-toggle na wąskim ekranie oznacza "nawigacja otwarta". Zostaje po obróceniu
       telefonu albo poszerzeniu okna - i bez hamburgera nie dałoby się jej przywrócić. */
    #main-window-template-component.collapse-toggle .sidebar {
        display: flex !important;
    }

    #main-window-template-component.collapse-toggle .header-left-side {
        width: 270px;
        min-width: 270px;
    }

    #main-window-template-component.collapse-toggle .header-logo {
        display: block !important;
    }

    #main-window-template-component.collapse-toggle .sidebar-sm-shadow {
        display: none !important;
    }
}