/* Wypelnienie przycisku podstawowego bierze przyciemniony wariant akcentu:
   biel na samym --main-color to 4,16:1, ponizej progu AA. Dotyczy obu motywow -
   motyw ciemny ma wlasne nadpisanie w theme-dark.css. */
.dxbl-btn-primary {
    --dxbl-btn-bg: var(--main-color-filled);
    --dxbl-btn-border-color: var(--main-color-filled);
}

/* Pozycje menu przycisku rozwijanego (DxDropDownButton). RenderStyle nie schodzi
   na pozycje zagniezdzone, a jego wartosc domyslna to Primary - bez tej reguly
   kazda pozycja renderuje sie jako pelny przycisk akcentowy zamiast wiersza menu.
   Sterujemy zmiennymi --dxbl-btn-*, bo tak styluje pozycje sam motyw: stany
   hover/active/disabled skladaja sie wtedy poprawnie, a jasny i ciemny obsluguje
   jedna regula na tokenach. Selektor powtarza ksztalt selektora motywu, zeby
   wygrac z regulami przycisku podstawowego bez !important. */
.dxbl-btn-dropdown-popup .dxbl-btn-dropdown-list-item .dxbl-btn-dropdown-item > .dxbl-btn {
    --dxbl-btn-bg: transparent;
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-color: var(--text-color);
    --dxbl-btn-hover-bg: var(--surface-color-2);
    --dxbl-btn-hover-color: var(--text-color);
    --dxbl-btn-hover-border-color: transparent;
    --dxbl-btn-active-bg: var(--accent-active-bg);
    --dxbl-btn-active-color: var(--accent-active-color);
    --dxbl-btn-active-border-color: transparent;
    --dxbl-btn-border-radius: 0.375rem;
    background-color: transparent;
    border-color: transparent;
    color: var(--text-color);
    justify-content: flex-start;
    font-weight: 400;
}

/* Odstep od krawedzi okna, zeby zaokraglone podswietlenie pozycji nie dotykalo obramowania */
.dxbl-btn-dropdown-popup .dxbl-btn-dropdown-list-item {
    padding: 0.15rem 0.25rem;
}

@import "_variables.css";

/*hover row*/
/*.dx-hover-row:hover, .dx-hover-row:focus {
    background-color: var(--row-hover);
}*/

/*custom layout styles*/
.dx-layout-max-height > .dxbl-group.expanded {
    height: 100%;
}

.dx-layout-buttons-rows > .dxbl-row {
    height: 100%;
}

.transport-order-docs-grid > .dxbl-row .dxbl-grid {
    min-width: 0 !important;
}


/*color link in dxgrid (only command column)*/
.dxbl-grid-command-cell a {
    color: var(--main-color) !important;
}

    .dxbl-grid-command-cell a:hover {
        color: var(--main-color-hover) !important;
    }

/*focused row background color*/
.dxbl-grid-focused-row {
    background-color: var(--row-focus-color) !important;
}

    .dxbl-grid-focused-row .dxbl-grid-command-cell {
        background-color: var(--row-focus-color) !important;
    }

/*group panel*/
.dxbl-grid-top-panel {
    background-color: var(--group-panel-color);
    position: relative;
}

.dxbl-grid {
    border-radius: 1rem;
    border: 1px solid var(--bs-border-color);
    overflow: hidden;
}

.filters .dxbl-text-edit > input {
    height: var(--filter-input-height);
}

/*edit popup (Configs)*/
.courier-config-edit-popup__checkboxes .dxbl-row {
    height: 100% !important;
    display: flex;
    align-content: end;
    margin-top: 0;
}

/*edit popup (Services)*/
.services-edit-popup .dxbl-modal-content {
    min-width: 40vw !important;
    left: 50% !important;
    transform: translate(-50%) !important;
}

/*edit popup (Users)*/
.users-edit-popup .dxbl-modal-content {
    left: 50% !important;
    transform: translate(-50%) !important;
}

/*edit poput (Statuses)*/
.statuses-edit-popup .dxbl-modal-content {
    min-width: 40vw !important;
    left: 50% !important;
    transform: translate(-50%) !important;
}

/*edit popup (Printers)*/
.printers-edit-popup .dxbl-modal-content {
    left: 50% !important;
    transform: translate(-50%) !important;
}

/*edit popup (ApiIntegration)*/
.integration-edit-popup .dxbl-modal-content {
    min-width: 40vw !important;
    left: 50% !important;
    transform: translate(-50%) !important;
}

/*filter row*/
.dxbl-grid-filter-row .dxbl-text-edit:hover {
    background-color: var(--bs-primary-bg-subtle)
}

/* Naglowki kolumn danych sa wysrodkowane w calej aplikacji. Selektor celuje
   w element naglowka DevExpressa, a nie w klase dokladana przez CustomizeElement,
   wiec obejmuje takze siatki, ktore tego zdarzenia nie podpinaja. Kotwica na "th"
   wyklucza plakietki panelu grupowania - maja te same klasy, ale sa divami.
   Wykluczenie dxbl-align- zostawia furtke dla CaptionAlignment na pojedynczej kolumnie.
   Poprzednia regula (justify-content na .dxbl-grid-header-content) nic nie robila:
   motyw 26.1 daje napisowi flex-grow, wiec nie ma juz wolnego miejsca do rozdzielenia. */
.dxbl-grid th.dxbl-grid-header:not(.dxbl-grid-command-cell):not(.dxbl-grid-selection-cell) > .dxbl-grid-header-content:not([class*="dxbl-align-"]) {
    text-align: center;
}

.dxbl-grid-empty-data-area {
    background-color: var(--grid-color) !important;
}

.dxbl-grid-filter-row .dxbl-text-edit-input {
    background-color: var(--filter-cell-color) !important;
}

/* Komórke filtra znaczy obrys, a nie wypełnienie: wypełnienie trzeba by dobierać
   osobno pod każdy motyw, a na białym tle robilo szary pas. Pusty prostokat czyta sie
   tak samo na ciemnym i jasnym, i jest tym samym, co nosza juz przyciski filtrow. */
.dxbl-grid-filter-row .dxbl-text-edit {
    border: 1px solid var(--surface-border-color);
    border-radius: var(--bs-border-radius-sm);
}

/* Filtr ustawiony - ten sam akcent, ktory dostaje .okapi-filter-cell-trigger-active.
   Puste pole trzyma placeholder, wiec :not(:placeholder-shown) rozpoznaje wpisana tresc
   bez pomocy ze strony kodu. */
.dxbl-grid-filter-row .dxbl-text-edit:has(.dxbl-text-edit-input:not(:placeholder-shown)) {
    border-color: var(--main-color);
}

.dxbl-grid-filter-row .dxbl-text-edit-input:not(:placeholder-shown) {
    color: var(--main-color);
    font-weight: 600;
}

.dxbl-grid-command-cell {
    background-color: var(--grid-color) !important;
}

.dxbl-grid-toolbar-container {
    background-color: var(--grid-color) !important;
}

.dxbl-grid-bottom-panel {
    background-color: var(--grid-color) !important;
}

/*empty grid info TEMPORARY (change when upgrade to DevExpress 23.2)*/
.dxbl-grid-empty-data-area {
    width: 100%;
    height: 100%;
}

    .dxbl-grid-empty-data-area span {
        display: none;
    }


/*row content overflow*/
.dxbl-grid-table > tbody > tr > td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dxbl-chart-legend {
    height: 3rem;
}

/*color picker*/
.color-picker .dxbl-text-edit {
    margin: 2px 0 !important;
}

.color-picker .dx-blazor-colorpicker-btn-container .dxbl-btn-secondary {
    margin: 0 0.25rem !important;
    background-color: transparent !important;
}

..color-picker .dx-blazor-colorpicker-custom-color-area {
    display: flex;
}

.color-picker .dx-blazor-colorpicker-custom-color-area .dxbl-btn {
    width: 100%;
}

/*dx tagbox max width*/
.dxbl-tag {
    max-width: max-content !important;
}

/*nav*/
@media (max-width: 768px) {
    .dxbl-menu-item-text {
        font-size: 1.15rem;
    }
}

@media (max-width: 767px) {
    .dxbl-popup {
        width: auto !important;
        max-width: initial !important;
        margin: 0 !important;
    }
}

@media (min-width: 576px) {
    .dxbl-popup {
        min-width: 360px !important;
    }
}

/*dxgrid pager center on small devices*/
@media (max-width: 576px) {
    .dxbl-pager-container {
        align-content: center !important;
        flex-direction: column !important;
    }

    .dxbl-btn-group {
        justify-content: center !important;
    }

    .dxbl-pager-page-size-selector {
        justify-content: center !important;
    }
}

/*custom layout-group style*/
.dxbl-group dxbl-group-control {
    padding: .25rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
}

/*dxtab width*/
.dxbl-tabs-content-panel {
    width: 100%;

}

/*height 100% for children (dxbl-fl-ctrl)*/
.dxbl-fl-ctrl-h-100 .dxbl-fl-ctrl {
    height: 100%;
}

.dxbl-row-space-between > .dxbl-row {
    justify-content: space-between;
}

/*selected item*/
/*.dxbl-listbox-item-selected span {
    background-color: white !important;
}
*/

/*dxbl-grid-detail-cell*/
td.dxbl-grid-detail-cell {
    padding: 0.5rem !important;
}

html:not([data-bs-theme="dark"]) .dxbl-chart-legend-text {
    color: black;
}

.dx-blazor-widget {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.dx-chart-legend-orders-count-by-integration .dxbl-chart-legend-items {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 6px 14px; /* odstępy: pion / poziom */
    max-width: 100%;
    overflow: hidden; /* nic nie wystaje */
}



.dx-chart-legend-orders-count-by-integration .dxbl-chart-legend-items {
    max-height:260px;
    overflow-y: auto;
}


.dxbl-btn.dxbl-disabled {
    pointer-events: none;
}

/* OrderItems - ukrycie przycisku rozwijania linii dla pozycji bez linii */
tr.order-item-no-lines .dxbl-grid-expand-button-cell button,
tr.order-item-no-lines button.dxbl-grid-expand-button {
    visibility: hidden;
    pointer-events: none;
}

/*edit popup (Hub message configuration)*/
.hub-config-edit-popup .dxbl-modal-content {
    /* min() zamiast samego vw: przy wąskim oknie okno dialogowe nie schodzi ponizej
       uzytecznej szerokosci, przy szerokim nie rozlazi sie na caly ekran. */
    width: min(1080px, 96vw) !important;
    min-width: min(720px, 96vw) !important;
    max-width: 96vw !important;
    left: 50% !important;
    transform: translate(-50%) !important;
}

/* Przewija sie cialo okna dialogowego.

   Poprzednia wersja wieszala scroll na .dxbl-grid-edit-form i robila z ciala flexa
   z overflow: hidden. Tej klasy DevExpress w tej wersji nie renderuje, wiec nic nie
   przewijalo, a cialo po prostu obcinalo formularz - bez suwaka i bez dostepu do
   ostatnich pol. Teraz scroll wisi na elemencie, ktory istnieje na pewno. */
.hub-config-edit-popup .dxbl-modal-body {
    max-height: 80vh;
    overflow-y: auto;
    /* Kolko myszy nad dialogiem nie przewija strony pod nim. */
    overscroll-behavior: contain;
    /* Dolny padding przechodzi na stopke, inaczej pod przyklejonymi przyciskami
       przesuwalby sie pasek tresci szerokosci tego paddingu. */
    padding-bottom: 0 !important;
}

/* Zapisz/Anuluj sa czescia szablonu formularza, czyli siedza w przewijanej tresci.
   Sticky trzyma je przy dolnej krawedzi okna niezaleznie od dlugosci formularza. */
.hub-config-edit-popup .hub-config-form-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 0;
    margin-top: .5rem;
    border-top: 1px solid rgba(0, 0, 0, .125);
    background-color: var(--dxbl-popup-bg, #fff);
}

/* Podpowiedzi pod polami: wlasny wiersz pelnej szerokosci, zeby nie lamaly sie po znaku. */
.hub-config-form .hub-config-hint {
    font-size: .8125rem;
    line-height: 1.35;
    color: #6c757d;
    margin-top: -.35rem;
}

.hub-config-form .hub-config-hint > div + div {
    margin-top: .15rem;
}

/* Ikona pomocy przy etykiecie pola. */
.field-help {
    display: inline-flex;
    align-items: center;
    margin-left: .35rem;
    cursor: help;
    vertical-align: middle;
}

.field-help-icon {
    display: inline-block;
    opacity: .65;
}

.field-help:hover .field-help-icon {
    opacity: 1;
}

.field-help-click {
    cursor: pointer;
}

/* Podsumowanie komunikatu wybranego z katalogu. */
.hub-config-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

/* Etykieta pola z ikona pomocy — zastepuje Caption tam, gdzie potrzebny jest dymek. */
.hub-config-form .hub-config-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: 100%;
}

.hub-config-form .hub-config-label {
    display: flex;
    align-items: center;
    font-size: .8125rem;
    font-weight: 500;
    color: #495057;
}

/* Opis kluczy parametrow — zastepuje dymek, ktory nie miescil tresci. */
.hub-config-form .hub-config-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: .375rem;
    padding: .6rem .75rem;
    font-size: .8125rem;
}

.hub-config-form .hub-config-keys-table {
    flex: 1 1 22rem;
    border-collapse: collapse;
}

.hub-config-form .hub-config-keys-table td {
    padding: .15rem .5rem .15rem 0;
    vertical-align: top;
    color: #495057;
}

.hub-config-form .hub-config-keys-table td:first-child {
    white-space: nowrap;
}

.hub-config-form .hub-config-keys-table code {
    color: #0d6efd;
    background: none;
    padding: 0;
}

.hub-config-form .hub-config-keys-example {
    flex: 0 1 20rem;
    color: #6c757d;
}

.hub-config-form .hub-config-keys-example pre {
    margin: .25rem 0 0;
    padding: .5rem .6rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .25rem;
    font-size: .75rem;
    line-height: 1.35;
    overflow-x: auto;
}

/* Podsumowanie komunikatu: plakietki w jednym rzedzie, opis pod nimi. */
.hub-config-form .hub-config-summary {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.hub-config-form .hub-config-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.hub-config-form .hub-config-hint {
    margin-top: 0;
}

/* Gwiazdka przy parametrze wymaganym. */
.hub-config-form .hub-config-required {
    color: #dc3545;
    margin-left: .15rem;
    font-weight: 600;
}

/* Podglad tresci wiadomosci w wierszu szczegolow: monospace i wlasny scroll, zeby
   kilkusetkilobajtowy payload nie rozpychal siatki. */
.hub-message-payload {
    margin: 0;
    padding: .75rem;
    max-height: 320px;
    overflow: auto;
    background-color: var(--surface-color-2);
    color: var(--text-color);
    border: 1px solid var(--surface-border-color);
    border-radius: .25rem;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: .8125rem;
    white-space: pre-wrap;
    word-break: break-word;
}