@import "_variables.css";

/*----------------*/
/*navbar*/
.navbar {
    z-index: 1000;
    position: relative;
}

/*----------------*/
/*not-found*/
/*
.not-found {
    background-image: url("/images/error-page.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
*/
/*----------------*/
/*devexpress custom classes*/
.dx-column-odd {
    background-color: #f9f9f9;
}

.dx-column-even {
    background-color: #fdfdfd;
}

.dx-header {
    background-color: var(--header-color) !important;
    text-transform: none;
}

.dx-popup-export {
    min-width: 30vw !important;
}

.dx-popup-automation {
    min-width: min(960px, 94vw) !important;
}

.dx-popup-automation .dxbl-group.automation-rule-group {
    margin-top: 0.75rem;
}

.dx-popup-automation .dxbl-group.automation-rule-group > .dxbl-group-body > .dxbl-group-body-content {
    padding: 0.75rem;
}

.automation-rule-rows {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
    padding: 4px;
}

.automation-rule-rows > .dxbl-btn {
    margin-top: 0.25rem;
}

.automation-rule-rows > .dxbl-btn:hover .icon-bs-primary-xsmall,
.automation-rule-rows > .dxbl-btn:active .icon-bs-primary-xsmall,
.automation-rule-rows > .dxbl-btn:focus-visible .icon-bs-primary-xsmall {
    filter: invert(100%) brightness(115%) contrast(100%);
}

.automation-rule-row {
    display: grid;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
    align-items: center;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background-color: var(--bs-tertiary-bg);
}

.automation-rule-row-condition {
    grid-template-columns: minmax(0, 1.4fr) 150px minmax(0, 1.2fr) auto;
}

.automation-rule-row-action {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.35fr) auto;
}

.automation-rule-value {
    min-width: 0;
}

.automation-rule-note {
    color: var(--bs-secondary-color);
    font-size: 0.875em;
}

.automation-rule-details {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--bs-border-color);
}

@media (max-width: 768px) {
    .automation-rule-row-condition,
    .automation-rule-row-action {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .automation-rule-row > * {
        grid-column: 1 / -1;
    }

    .automation-rule-row > :first-child {
        grid-column: 1;
        grid-row: 1;
    }

    .automation-rule-row > .automation-rule-remove {
        grid-column: 2;
        grid-row: 1;
    }
}

.dx-popup-template-emails {
    min-width: 60vw !important;
}

.dx-popup-template-offers {
    min-width: 60vw !important;
}

.dx-popup-announcement {
    min-width: 40vw !important;
}

    .dx-popup-announcement img {
        margin: 0 auto;
        border-radius: 5px;
        width: 100%;
    }

.global-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
}

.global-search-is-mobile {
    width: auto;
}

.global-search-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1001;
}

.global-search-toggle {
    padding: 0;
}

.global-search-surface {
    position: relative;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.global-search-field-wrap {
    position: relative;
    width: 100%;
    max-width: 38.75rem;
    min-width: 0;
}

.global-search-bar {
    display: flex;
    align-items: center;
    width: 100%;
    height: 2.375rem;
    background: transparent;
    border: 1px solid var(--surface-border-color);
    border-radius: 0.625rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .global-search-bar:hover {
        border-color: var(--text-color-muted);
    }

.global-search-is-open .global-search-bar {
    background: var(--surface-color);
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px rgba(196, 96, 36, .22);
}

.global-search .icon {
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
    margin-right: 0;
    top: 0;
    background-size: contain;
}

.global-search-scope,
.global-search-range {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    height: 100%;
    padding: 0 0.625rem;
    background: transparent;
    border: 0;
    color: var(--text-color);
    font-size: 0.8125rem;
    white-space: nowrap;
    cursor: pointer;
}

.global-search-scope {
    max-width: 12rem;
    padding-left: 0.75rem;
    border-radius: calc(0.625rem - 1px) 0 0 calc(0.625rem - 1px);
}

.global-search-scope-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-range {
    height: 1.625rem;
    margin-right: 0.25rem;
    padding: 0 0.5rem;
    border: 1px solid var(--surface-border-color);
    border-radius: 0.4375rem;
    font-size: 0.75rem;
}

    .global-search-scope:hover,
    .global-search-range:hover {
        background: var(--surface-color-2);
    }

.global-search .global-search-caret {
    flex-basis: 0.6875rem;
    width: 0.6875rem;
    height: 0.6875rem;
    opacity: 0.65;
}

.global-search .global-search-range-icon {
    flex-basis: 0.75rem;
    width: 0.75rem;
    height: 0.75rem;
}

.global-search-picker {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 0;
}

.global-search-dropdown {
    position: absolute;
    top: calc(100% + 0.375rem);
    z-index: 1003;
    min-width: 12rem;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.25rem;
    background: var(--surface-color);
    border: 1px solid var(--surface-border-color);
    border-radius: 0.625rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, .18);
}

.global-search-dropdown-start {
    left: 0;
}

.global-search-dropdown-end {
    right: 0;
}

.global-search-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    background: transparent;
    border: 0;
    border-radius: 0.4375rem;
    color: var(--text-color);
    font-size: 0.8125rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

    .global-search-dropdown-item:hover {
        background: var(--surface-color-2);
    }

.global-search-dropdown-item-active {
    background: var(--main-color-filled);
    color: #fff;
    font-weight: 600;
}

    .global-search-dropdown-item-active:hover {
        background: var(--main-color-hover);
    }

.global-search-dropdown-item:focus-visible {
    outline: none;
    background: var(--surface-color-2);
    box-shadow: inset 0 0 0 2px var(--main-color-filled);
}

.global-search-dropdown-item-active:focus-visible {
    background: var(--main-color-hover);
    box-shadow: inset 0 0 0 2px #fff;
}

.global-search-separator {
    flex: 0 0 1px;
    width: 1px;
    height: 1.25rem;
    background: var(--surface-border-color);
}

.global-search .global-search-glass {
    margin: 0 0.5rem 0 0.6875rem;
    opacity: 0.75;
}

.global-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--text-color);
    font-size: 0.8438rem;
}

    .global-search-input::-webkit-search-cancel-button,
    .global-search-input::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
    }

    .global-search-input::placeholder {
        color: var(--text-color-muted);
        opacity: 1;
    }

.global-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.25rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0.3125rem;
    opacity: 0.7;
    cursor: pointer;
    line-height: 0;
}

.global-search-clear-icon {
    display: block;
    width: 1rem;
    height: 1rem;
}

    .global-search-clear:hover {
        background: var(--surface-color-2);
        opacity: 1;
    }

.global-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: 0.3125rem;
    padding: 0;
    background: var(--main-color-filled);
    border: 0;
    border-radius: 0.4375rem;
    cursor: pointer;
}

    .global-search-submit:hover:not(:disabled) {
        background: var(--main-color-hover);
    }

    .global-search-submit:disabled {
        opacity: 0.45;
        cursor: default;
    }

.global-search-shortcut {
    margin-right: 0.4375rem;
    padding: 0.0625rem 0.375rem;
    border: 1px solid var(--surface-border-color);
    border-radius: 0.3125rem;
    color: var(--text-color-muted);
    font-size: 0.6875rem;
    white-space: nowrap;
}

.global-search-panel {
    position: absolute;
    top: calc(100% + 0.4375rem);
    right: 0;
    left: 0;
    z-index: 1002;
    padding: 0.75rem 0.875rem 0.625rem;
    background: var(--surface-color);
    border: 1px solid var(--surface-border-color);
    border-radius: 0.75rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, .18);
}

.global-search-panel-row {
    margin-bottom: 0.75rem;
}

.global-search-panel-row-history {
    padding-top: 0.75rem;
    border-top: 1px solid var(--surface-border-color);
}

/* Na desktopie wiersz pol otwiera panel, na mobile idzie po wierszach obszaru i dni -
   linia oddzielajaca ma sens tylko w tym drugim przypadku. */
.global-search-panel-row-fields:not(:first-child) {
    padding-top: 0.75rem;
    border-top: 1px solid var(--surface-border-color);
}

.global-search-label {
    display: block;
    margin-bottom: 0.4375rem;
    color: var(--text-color-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.global-search-fields-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4375rem;
}

    .global-search-fields-head .global-search-label {
        margin-bottom: 0;
    }

.global-search-items-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    margin: 0;
    color: var(--text-color);
    font-size: 0.8125rem;
    cursor: pointer;
    user-select: none;
}

.global-search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.global-search-chip {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.75rem;
    padding: 0 0.6875rem;
    background: var(--surface-color-2);
    border: 1px solid var(--surface-border-color);
    border-radius: 0.5rem;
    color: var(--text-color);
    font-size: 0.7812rem;
    white-space: nowrap;
    cursor: pointer;
}

    .global-search-chip:hover {
        border-color: var(--text-color-muted);
    }

.global-search-chip-active {
    background: var(--main-color-filled);
    border-color: var(--main-color-filled);
    color: #fff;
    font-weight: 600;
}

.global-search-chip:disabled {
    cursor: default;
}

/* Chipy pol przelaczaja sie w miejscu, wiec ich szerokosc nie moze zalezec od stanu.
   Pogrubienie aktywnego chipa poszerzalo go o kilka pikseli i kazde klikniecie przesuwalo
   sasiadow, az ostatni chip przeskakiwal do nastepnego wiersza. Stan niesie tlo i znacznik. */
.global-search-chip-field.global-search-chip-active {
    font-weight: 400;
}

/* Wskaznik zaznaczenia rysowany w CSS, a nie ikona SVG w tle: dziedziczy currentColor,
   wiec czyta sie tak samo na chipie aktywnym, nieaktywnym i w ciemnym motywie. */
.global-search-chip-check {
    position: relative;
    flex: 0 0 0.75rem;
    width: 0.75rem;
    height: 0.75rem;
    border: 1px solid currentColor;
    border-radius: 0.1875rem;
    opacity: 0.55;
}

.global-search-chip-active .global-search-chip-check {
    opacity: 1;
}

    .global-search-chip-active .global-search-chip-check::after {
        content: "";
        position: absolute;
        top: 0.0625rem;
        left: 0.25rem;
        width: 0.1875rem;
        height: 0.375rem;
        border: solid currentColor;
        border-width: 0 1.5px 1.5px 0;
        transform: rotate(45deg);
    }

.global-search-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 3.75rem;
    width: 3.75rem;
    height: 1.25rem;
}

.global-search-item-icon {
    flex: 0 0 1rem !important;
    width: 1rem !important;
    height: 1rem !important;
    opacity: 0.75;
}

.global-search-dropdown-item-active .global-search-item-icon {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.global-search-chip-logo {
    padding: 2px 3px;
    background: var(--logo-plate-bg);
    border-radius: var(--logo-plate-radius);
}

    .global-search-logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.global-search-history {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.global-search-history-entry {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
}

.global-search-history-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 0.4375rem 0.5rem;
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    color: var(--text-color);
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
}

    .global-search-history-item:hover {
        background: var(--surface-color-2);
    }

.global-search-history-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2rem;
    align-self: stretch;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    color: var(--text-color-muted);
    cursor: pointer;
    line-height: 0;
}

.global-search-history-remove-icon {
    display: block;
    width: 1rem;
    height: 1rem;
}

    .global-search-history-remove:hover,
    .global-search-history-remove:focus-visible {
        background: var(--surface-color-2);
        color: var(--text-color);
    }

.global-search-history-phrase {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-history-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding-left: 0.5rem;
    color: var(--text-color-muted);
    font-size: 0.7188rem;
    white-space: nowrap;
}

.global-search-history-tag {
    padding: 0.0625rem 0.375rem;
    border: 1px solid var(--surface-border-color);
    border-radius: 0.3125rem;
}

.global-search-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding-top: 0.5625rem;
    border-top: 1px solid var(--surface-border-color);
}

.global-search-keys {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-color-muted);
    font-size: 0.6875rem;
    white-space: nowrap;
}

    .global-search-keys kbd {
        padding: 0.0625rem 0.3125rem;
        background: var(--surface-color-2);
        border: 1px solid var(--surface-border-color);
        border-radius: 0.25rem;
        color: var(--text-color);
        font-family: inherit;
        font-size: 0.6875rem;
    }

.global-search-hint {
    font-size: 0.6875rem;
    line-height: 1.1rem;
    color: var(--text-color-muted);
}

.global-search-hint-warning {
    color: var(--main-color);
}

@media (max-width: 768px) {
    .global-search-is-mobile.global-search-is-open .global-search-backdrop {
        background: rgba(0, 0, 0, .35);
    }

    .global-search-is-mobile.global-search-is-open .global-search-surface {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        height: 3.5rem;
        padding: 0 0.625rem;
        background: var(--surface-color);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    }

    .global-search-is-mobile.global-search-is-open .global-search-field-wrap {
        max-width: none;
    }

    .global-search-is-mobile.global-search-is-open .global-search-panel {
        position: fixed;
        top: 3.5rem;
        right: 0;
        left: 0;
        max-height: calc(100vh - 3.5rem);
        overflow-y: auto;
        border-radius: 0 0 0.75rem 0.75rem;
    }

    .global-search-back {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 2rem;
        width: 2rem;
        height: 2rem;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0.5rem;
        color: var(--text-color-muted);
        cursor: pointer;
    }
}

.user-profile-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 14rem;
    gap: 0.125rem;
}

.user-profile-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2rem;
    box-sizing: border-box;
    gap: 0.625rem;
    margin: 0;
    padding: 0.375rem 0.625rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--text-color);
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.user-profile-menu-item:hover {
    background: var(--surface-color-2);
    color: var(--text-color);
}

.user-profile-menu-item:active {
    background: var(--surface-border-color);
}

.user-profile-menu-item:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: -2px;
}

.user-profile-menu-item-group-start {
    margin-top: 0.25rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--surface-border-color);
    border-radius: 0;
}

.user-profile-menu-icon {
    flex: 0 0 1.125rem;
    width: 1.125rem !important;
    height: 1.125rem !important;
    margin-right: 0 !important;
    top: 0 !important;
    background-size: contain;
}

.user-profile-menu-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-profile-menu-badge {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0.0625rem 0.3125rem;
    font-size: 0.5625rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* --- Okno Kontakt --- */
.contact-card {
    min-width: 20rem;
    padding: 1rem;
}

.contact-apps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-app {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--surface-border-color);
    border-radius: 0.5rem;
    background: var(--surface-color-2);
    color: var(--text-color);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

    .contact-app:hover,
    .contact-app:focus-visible {
        border-color: var(--main-color);
        background: var(--surface-color);
        color: var(--text-color);
        text-decoration: none;
    }

    .contact-app:focus-visible {
        outline: 2px solid var(--main-color);
        outline-offset: 2px;
    }

    .contact-app-icon {
        flex: 0 0 1.25rem;
        width: 1.25rem;
        height: 1.25rem;
        background-size: contain;
    }

    .contact-app-logo {
        flex: 0 0 1.75rem;
        width: 1.75rem;
        height: 1.75rem;
        object-fit: contain;
    }

    .contact-app-text {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
    }

    .contact-app-name {
        font-weight: 600;
    }

    .contact-app-sub {
        font-size: 0.75rem;
        opacity: .7;
    }

    .contact-app-badge {
        padding: 0.0625rem 0.3125rem;
        font-size: 0.5625rem;
        line-height: 1.4;
        letter-spacing: 0.02em;
    }

    .contact-app-go {
        flex: 0 0 0.875rem;
        width: 0.875rem;
        height: 0.875rem;
        margin-left: auto;
        background-size: contain;
        opacity: .55;
    }

    .contact-app:hover .contact-app-go {
        opacity: 1;
    }

/* --- Rysunek historii statusow --- */
.status-diagram-empty {
    padding: 0.5rem 0.25rem;
    color: var(--text-color-muted);
    font-size: 0.8125rem;
}

.status-diagram-host {
    position: relative;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: contain;
    user-select: none;
    border: 1px solid var(--surface-border-color);
    border-radius: 0.5rem;
    background: var(--surface-color-2);
}

.status-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    box-sizing: border-box;
    width: 190px;
    height: 54px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--surface-border-color);
    border-radius: 0.5rem;
    background: var(--surface-color);
    color: var(--text-color);
}

.status-node-label {
    width: 150px;
    align-items: flex-end;
    border: 0;
    background: none;
}

.status-node-kind {
    color: var(--text-color-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: right;
}

.status-node-when {
    color: var(--text-color-muted);
    font-size: 0.6875rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.status-node-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-node-chip {
    max-width: 100%;
    padding: 0.125rem 0.5rem;
    border: 1px dashed var(--surface-border-color);
    border-radius: 0.375rem;
    color: var(--text-color-muted);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-node .port {
    position: absolute;
    width: 6px;
    height: 6px;
    margin: -3px;
    border-radius: 50%;
    background-color: var(--text-color-muted);
    border: 0;
    opacity: 0;
}

    .status-node .port.left {
        left: 0;
        top: 50%;
    }

    .status-node .port.right {
        right: 0;
        top: 50%;
    }

.status-diagram-host .link path:not(.selection-helper) {
    stroke: var(--text-color-muted);
}

.dx-popup-70 {
    min-width: 70vw !important;
}

.dx-popup-60 {
    min-width: 60vw !important;
}

.dx-popup-50 {
    min-width: 50vw !important;
}

.dx-popup-40 {
    min-width: 40vw !important;
}

.dx-popup-35 {
    min-width: 35vw !important;
}

.dx-popup-30 {
    min-width: 30vw !important;
}

.dxtagbox {
    min-width: 100%;
    max-width: 150px;
    background: white;
    flex-wrap: nowrap;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    caret-color: transparent;
    position: relative;
    padding-left: 6px;
    text-align: left;
    color: black;
    font-size: 16px;
    font-weight: 600;
}

    .dxtagbox input {
        min-width: 0;
        max-width: 100%;
        margin-right: 1.5rem;
        padding-top: 0.5rem;
        height: calc(var(--filter-input-height) - var(--scroll-height)) !important;
    }

.dx-command-column {
    display: flex;
    height: 100%;
    justify-content: start;
    align-items: center;
    gap: 0.25rem;
}

.dx-worker-row {
    height: 2.5rem;
    text-align: center;
}

    .dx-worker-row span {
        font-weight: bold;
    }

.dx-viewer {
    width: 100%;
    height: 100%;
}

.dx-grid-settings-window {
    width: 25rem;
}

/* Okno ustawien tabeli. Kazda grupa opcji dostaje wlasna karte z naglowkiem,
   zeby od razu bylo widac, ktory przycisk Zapisz czego dotyczy - filtrow czy
   ukladu tabeli. */
.gsw {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
}

.gsw-section {
    border: 1px solid var(--surface-border-color);
    border-radius: 0.375rem;
    background-color: var(--surface-color);
    overflow: hidden;
}

.gsw-section-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    background-color: var(--surface-color-2);
    border-bottom: 1px solid var(--surface-border-color);
}

.gsw-section-title {
    font-weight: 600;
    color: var(--text-color);
}

.gsw-section-body {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    gap: 0.75rem;
}

.gsw-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

    /* Kolejne bloki w sekcji sa osobnymi czynnosciami (wczytaj / zapisz),
       wiec rozdziela je wlosowa linia zamiast samego odstepu. */
    .gsw-field + .gsw-field {
        border-top: 1px solid var(--surface-border-color);
        padding-top: 0.75rem;
    }

.gsw-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-color);
}

.gsw-hint {
    font-size: 0.78rem;
    color: var(--text-color-muted);
}

.gsw-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.gsw-grow {
    flex: 1 1 auto;
    min-width: 0;
}

/* Przyciski akcji przy polach maja stala szerokosc, zeby Zastosuj i Zapisz
   konczyly sie w tej samej linii pionowej. */
.gsw-action {
    flex: 0 0 auto;
    min-width: 5.5rem;
}

.gsw-options {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.gsw-check {
    width: 100%;
}

.gsw-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--surface-border-color);
}

.gsw-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.logo-plate {
    background-color: var(--logo-plate-bg);
    border-radius: var(--logo-plate-radius);
    padding: 2px 3px;
}

/* W gridach podkladka siedzi na kontenerze, a nie na obrazku, zeby wypelnic
   cala szerokosc kolumny niezaleznie od proporcji logotypu. Pionowy padding
   odsuwa logo od krawedzi - obrazek ma height:100%, wiec bez tego dotyka gory
   i dolu podkladki. */
.logo-plate-full {
    background-color: var(--logo-plate-bg);
    border-radius: var(--logo-plate-radius);
    width: 100%;
    padding: 3px 4px;
}

    .logo-plate-full img {
        object-fit: contain;
    }

/* Pasek filtrów integracji nie rezerwuje miejsca, gdy nie ma w nim pozycji */
.toolbar-integrations:not(:has(.dxbl-toolbar-item)) {
    display: none !important;
}

/* Pasek integracji ma sie przewijac w poziomie - komponent nadaje mu
   overflow-x: auto i wylacza chowanie pozycji (AdaptivityAutoHideRootItems).
   Zeby przewijanie w ogole ruszylo, element musi miec z czego sie zwezic:
   bez ograniczenia szerokosci rozpycha sie na szerokosc wszystkich logotypow
   i wychodzi poza ramke paska. */
.toolbar-integrations > .dxbl-toolbar {
    min-width: 0;
    max-width: 100%;
}

/* Toolbary: zawartość wyśrodkowana w pionie, bez pustego pasa pod przyciskami */
.toolbar,
.toolbar-integrations {
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

    .toolbar .dxbl-toolbar,
    .toolbar-integrations .dxbl-toolbar {
        align-items: center;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

/* Pola edycyjne w szablonach pozycji toolbara: wrapper szablonu jest blokowy, więc pole
   przyklejało się do górnej krawędzi i dotykało ramki paska (który nie ma pionowego paddingu) */
.toolbar div.dxbl-toolbar-item-tmpl:has(input:not([type=checkbox]), select, .dxbl-text-edit),
.toolbar-integrations div.dxbl-toolbar-item-tmpl:has(input:not([type=checkbox]), select, .dxbl-text-edit) {
    display: flex;
    align-items: center;
    padding-block: 3px;
}

/* Oznaczenie BETA przy przełączniku motywu — wewnątrz przycisku, pod ikoną,
   żeby nie zasłaniało ikony ani nie nachodziło na sąsiednie przyciski */
.avatar-menu .theme-beta-badge {
    position: absolute;
    top: auto;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 6px;
    padding: 0 3px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    border-radius: 3px;
    pointer-events: none;
}

    .avatar-menu:has(.theme-beta-badge) .icon {
        position: relative;
        top: -4px;
    }

.avatar-menu {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s ease;
    padding: 0 !important;
    margin-left: 0.5rem;
}

    /* ikony wewnątrz */
    .avatar-menu .icon {
        font-size: 18px !important;
    }

/* --- MOBILE --- */
@media (max-width: 768px) {
    .avatar-menu {
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
    }

        .avatar-menu .icon {
            font-size: 14px !important;
        }
}

.avatar-menu.avatar-menu-user {
    border-radius: 50% !important;
}

/* DxMenu rysuje czarny outline (:focus-visible) wokół pozycji z szablonem także po kliknięciu myszą —
   w nagłówku przyciski mają własne podświetlenie, więc outline tylko przeszkadza */
.header-navbar .dxbl-menu .dxbl-menu-item-tmpl:focus-visible {
    outline: none !important;
}

/* okrągły przycisk nagłówka bez ramki — ten sam wygląd co przycisk aplikacji (AppLauncher.razor.css) */
.header-round-btn {
    position: relative;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .header-round-btn:hover {
        background: rgba(15, 23, 42, 0.08);
    }

/* licznik na prawym górnym rogu ikony (ikona 20px wyśrodkowana w przycisku 40px) */
.header-round-btn-badge {
    position: absolute;
    top: -2px;
    left: calc(50% + 3px);
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--bs-danger, #dc3545);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
}

    /* część plików SVG ma wpisane fill="gray" (megaphone), a część currentColor (czarne) —
       brightness(0) sprowadza je do czerni, żeby krycie dało ten sam odcień co w launcherze */
    .header-round-btn > .icon-bs-black-medium {
        width: 20px;
        height: 20px;
        top: 0;
        filter: brightness(0);
        opacity: 0.5;
    }

    .header-round-btn:hover > .icon-bs-black-medium {
        opacity: 0.75;
    }

@media (max-width: 768px) {
    .header-round-btn {
        width: 34px;
        height: 34px;
    }
}

html[data-bs-theme="dark"] .header-round-btn {
    border-color: var(--surface-border-color);
}

html[data-bs-theme="dark"] .header-round-btn:hover {
    background: var(--surface-color-2);
}

html[data-bs-theme="dark"] .header-round-btn > .icon-bs-black-medium {
    filter: brightness(0) invert(88%) brightness(105%);
}

/*----------------*/
/*grids*/
.grid {
    height: 85vh !important;
    margin-bottom: 1rem;
    position: relative;
}

/*temporary*/
.grid-77 {
    height: 77vh !important;
    margin-bottom: 1rem;
}

.grid-80 {
    height: 80vh !important;
    margin-bottom: 1rem;
}

.grid-70 {
    height: 70vh !important;
    margin-bottom: 1rem;
}

.grid-60 {
    height: 60vh !important;
    margin-bottom: 1rem;
}

.grid-50 {
    height: 50vh !important;
    margin-bottom: 1rem;
}

grid-75 {
    height: 75vh !important;
    margin-bottom: 1rem;
}

.services-grid {
    height: 80vh !important;
    margin-bottom: 1rem;
}

.automations-grid {
    height: 80vh !important;
    margin-bottom: 1rem;
}

.configs-grid {
    height: 80vh !important;
    margin-bottom: 1rem;
}

.roles-grid {
    height: 80vh !important;
    margin-bottom: 1rem;
}

.printers-grid {
    height: 80vh !important;
    margin-bottom: 1rem;
}

.users-grid {
    height: 80vh !important;
    margin-bottom: 1rem;
}

.orders-index-grid {
    max-height: 620px !important;
}

.first-transport-orders-doc-grid {
    height: 25vh !important;
    margin-bottom: 1rem;
}

.second-transport-orders-doc-grid {
    height: 25vh !important;
    margin-bottom: 1rem;
}

.worker-service-grid {
    height: 80vh !important;
    margin-bottom: 1rem;
}

.sql-reports-grid {
    height: 75vh !important;
    margin-bottom: 1rem;
}

.owners-grid {
    height: 80vh !important;
    margin-bottom: 1rem;
}

.groups-grid {
    height: 80vh !important;
    margin-bottom: 1rem;
}

.sql-reports-grid {
    height: 80vh !important;
    margin-bottom: 1rem;
}

/*----------------*/
/*logo*/
.logo-index-container {
    width: 100%;
    height: 80vh;
    border-radius: 5px;
}

.logo-index {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 7rem;
    opacity: 0.1;
}

.logo {
    height: 2.2rem;
    width: 9rem;
}

/*----------------*/
/*service-info*/
.service-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding: 12px;
}

.service-info-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 120px;
    padding: 1rem;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease;
}

.service-info-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.service-status-dot {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.service-status-dot--online {
    background-color: #2fb344;
}

.service-status-dot--offline {
    background-color: #e03131;
}

.service-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f3f5;
    font-size: 24px;
}

.service-icon--api {
    background: #dbeafe;
}

.service-icon--sync {
    background: #dcfce7;
}

.service-icon--print {
    background: #fef3c7;
}

.service-icon--bridge {
    background: #ede9fe;
}

.service-icon--local {
    background: #ffe4e6;
}

.service-icon--default {
    background: #f1f3f5;
}

.service-name {
    font-weight: 600;
    text-align: center;
    word-break: break-word;
}

.service-test-badge {
    background: #f59f00;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

.service-info-empty {
    margin: 12px;
    padding: 16px;
    border-radius: 12px;
    background: #fff3bf;
    color: #664d03;
}

.logo-index2 {
    max-height: 220px;
    width: 100%;
}

/*----------------*/
/*index cards*/
.index-height-100 .dxbl-fl-ctrl {
    height: 100% !important;
}

/*----------------*/
/*dates*/
.dxdateinput {
    position: relative;
    min-width: 115px;
}

    .dxdateinput .dxbl-edit-btn-clear {
        position: absolute;
        right: 1.75rem;
        top: 50%;
        transform: translateY(-50%);
    }

/*----------------*/
/*operator type*/
.filter-type-container {
    display: flex;
}

    .filter-type-container > div {
        width: 100%;
    }

.filter-type-button {
    margin-right: 3px;
    color: white;
}

.filter-type-listbox > .dxbl-listbox {
    height: auto;
}

.ui-state-highlight {
    background-color: rgba(var(--bs-primary-rgb), .3);
}


/*----------------*/
/*culture selector fixed*/
/*https://www.codehim.com/bootstrap/bootstrap-5-floating-action-button/*/
.cs-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 20px;
    right: 20px;
    transition: transform 0.3s ease;
}

    .cs-container:hover {
        height: 100%;
    }

        .cs-container:hover .sub-button:nth-child(2) {
            transform: translateY(-70px);
        }

        .cs-container:hover .sub-button:nth-child(3) {
            transform: translateY(-130px);
        }

        .cs-container:hover .sub-button:nth-child(4) {
            transform: translateY(-190px);
        }

        .cs-container:hover .sub-button:nth-child(5) {
            transform: translateY(-250px);
        }

        .cs-container:hover .sub-button:nth-child(6) {
            transform: translateY(-310px);
        }

    .cs-container .cs {
        position: relative;
        height: 60px;
        width: 60px;
        background-color: var(--main-color);
        border-radius: 50%;
        z-index: 1002;
    }

        .cs-container .cs::before {
            content: " ";
            position: absolute;
            bottom: 0;
            right: 0;
            height: 35px;
            width: 35px;
            background-color: inherit;
            border-radius: 0 0 10px 0;
            z-index: -1;
        }

        .cs-container .cs .cs-content {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
            border-radius: 50%;
        }

            .cs-container .cs .cs-content .cs-icons {
                color: white;
                font-size: 24px;
            }

    .cs-container .sub-button {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 10px;
        right: 10px;
        height: 40px;
        width: 40px;
        border: 2px solid;
        border-color: var(--main-color);
        background-color: white;
        border-radius: 50%;
        transition: all 0.3s ease;
        z-index: 2;
    }

        .cs-container .sub-button:hover {
            cursor: pointer;
        }

        .cs-container .sub-button .cs-icons {
            color: white;
        }

/*----------------*/
/*OTHER*/
.page-header {
    font-size: 1.25rem;
    font-weight: bold;
}

.summary-thumbnail {
    width: 10%;
    margin-right: 1rem;
}

/* Sasiadujace pozycje toolbara stykaly sie bok w bok - zmierzone 0 px odstepu,
   przez co caly pasek czytal sie jak jeden zlepek ikon i napisow. Odstep rozdziela
   je wizualnie, nie ruszajac wysokosci paska. */
.toolbar .dxbl-toolbar-group > .dxbl-toolbar-item + .dxbl-toolbar-item {
    margin-left: 0.25rem;
}

.toolbar {
    border: 1px solid var(--bs-border-color);
    background-color: var(--group-panel-color);
    margin-bottom: 0.25rem;
    border-radius: 1rem;
    padding: 0.2rem;
    position: relative;
}

.toolbar-integrations {
    border: 1px solid var(--bs-border-color);
    background-color: var(--group-panel-color);
    margin-bottom: 0.25rem;
    border-radius: 1rem;
    position: relative;
}

details-input {
    font-size: 0.8rem;
    align-items: center;
}

.filters {
    white-space: nowrap;
    overflow: hidden;
    padding: 3px;
    position: relative;
}

@media (max-width: 576px) {
    .login-width {
        width: 80%;
    }

        .login-width h2 {
            text-align: center;
            font-size: 1.75rem;
        }
}

.loader-sidebar-expanded {
    left: calc(50% + 150px) !important;
}

/* Loader lokalny jest tylko pozycjonowany, wiec jego warstwa to auto. Kontenery,
   ktore go obejmuja, potrafia same podnosic swoja zawartosc - kanban ustawia
   .kanban-board na z-index 100 - i wtedy tresc zaslania loader, mimo ze to on
   ma o niej informowac. Wlasna warstwa trzyma go nad zawartoscia kazdego takiego
   kontenera, a wciaz ponizej okien i wyskakujacych paneli, ktore leza wyzej. */
.loader-local {
    z-index: 500;
}

/* Strona kanbana nie chowa poprzedniej tablicy na czas pobierania zamowien, wiec
   pod loaderem stoi pelnowartosciowy widok: nieaktualny, a wygladajacy na gotowy
   i przyjmujacy klikniecia, ktore i tak zaraz zniknely. Przygaszenie mowi, ze te
   karty czekaja na wymiane, a odciecie wskaznika chroni przed otwarciem zamowienia
   z listy, ktorej za chwile nie bedzie. */
.kanban-wrapper-body {
    transition: opacity .15s ease-out;
}

    .kanban-wrapper-body.kanban-loading {
        opacity: .35;
        pointer-events: none;
    }

.custom-listbox {
    height: 15vh !important;
}

    .custom-listbox .dxbl-listbox-item-selected {
        font-weight: bold;
    }

.form-control {
    height: 500px;
    border-radius: 1rem;
}

.form-control-offers {
    height: 350px !important;
    width: 100% !important;
}

.form-control-onlyimage > .dxbl-row {
    justify-content: center;
    height: 100%;
}

.form-control-image {
    justify-content: center;
    height: 100%;
}

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

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


.login-content {
    position: relative;
    z-index: 1;
}

.login-shell {
    position: relative;
    overflow: visible;
}

.login-width {
    position: relative;
    z-index: 10;
}

.okapi-static {
    position: absolute;
    left: -153px;
    bottom: 60px;
    width: 220px;
    pointer-events: none;
    z-index: 1;
}

    .okapi-static img {
        width: 100%;
        height: auto;
        display: block;
        animation: okapi-wave 2.8s ease-in-out infinite;
        transform-origin: 80% 70%;
    }

@keyframes okapi-wave {
    0% {
        transform: rotate(0deg) translateX(0);
    }

    30% {
        transform: rotate(1deg) translateX(2px);
    }

    60% {
        transform: rotate(-1deg) translateX(-1px);
    }

    100% {
        transform: rotate(0deg) translateX(0);
    }
}


.login-width {
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 1);
    padding: 2rem;
    padding-bottom: 1rem;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.login-failed-alert ul {
    padding: 0;
}

    .login-failed-alert ul li {
        list-style: none;
        width: 100%;
        text-align: center;
    }

.button-logout {
    background-color: var(--main-color);
    border: none;
    transition: filter 0.3s ease;
}

    .button-logout:hover {
        background-color: var(--main-color-hover) !important;
    }

.nav-transition .expand-btn {
    transition: none !important;
}

.chatbot-window {
    min-width: 300px !important;
}

    .chatbot-window .dxbl-fl-group {
        padding: 0.25rem;
    }

.announcement-hover {
    transition: ease-out 0.2s;
}

    .announcement-hover:hover {
        background-color: var(--main-color-subtle);
    }


.button-container {
    position: relative;
    min-height: 30px;
    border: 1px solid transparent;
}

.button-bottom-right {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.addon-text-w-15 {
    width: 15%;
    flex-shrink: 0;
}

    .addon-text-w-15 input {
        padding: 0 0.2rem;
    }

.integration-empty-height {
    height: 3px;
}

.offer-details-link-h100 > .dxbl-fl-ctrl {
    height: 100% !important;
}

.text-area-content-class {
    height: 100%;
}

.toolbar-item-selected {
    background-color: #fae1d2;
    /*    border: 1px solid #007bff;*/
    border-radius: 4px;
    /*    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);*/
}

/* Zaznaczona integracja zostaje zaznaczona także pod kursorem: hover paska
   nadpisywał tło i po kliknięciu nie było widać, że filtr się włączył. */
.toolbar-integrations .dxbl-btn.toolbar-item-selected,
.toolbar-integrations .dxbl-btn.toolbar-item-selected:hover,
.toolbar-integrations .toolbar-item-selected,
.toolbar-integrations .toolbar-item-selected:hover {
    background-color: #fae1d2 !important;
}

.toolbar-integrations .dxbl-btn.toolbar-item-selected:hover,
.toolbar-integrations .toolbar-item-selected:hover {
    background-color: #f5cfb6 !important;
}

/* Pozycja listy zapisanych filtrow. Stala minimalna wysokosc sprawia, ze wpis
   ze znacznikiem ukladu kolumn jest tak samo wysoki jak pozostale. */
.filter-item-row {
    min-height: 1.35rem;
    align-items: center;
}

/* Znacznik "ten filtr niesie uklad kolumn". Wlasna klasa, bo ogolne .icon-bs-*
   przesuwaja ikone o 1px w gore (position: relative; top: -1px), co podnosilo
   caly wiersz, a jako element bez tresci w kontenerze flex ikona sciskala sie
   do zerowej szerokosci i po prostu nie bylo jej widac. */
.filter-columns-mark {
    flex: 0 0 auto;
    top: 0;
    align-self: center;
}

/* Filtr zaawansowany stoi bezposrednio nad toolbarem i karta filtra niemal go
   dotykala. Odstep pochodzil wylacznie z marginesu, ktorym DxFormLayout otacza
   grupe - polowa --dxbl-fl-group-spacing-y, czyli 4 px przy SizeMode.Small.
   Zerujemy ten margines i podajemy wlasny, zeby przerwa nie zalezala od trybu
   rozmiaru. Selektor jest dwuklasowy, zeby wygrac z .dxbl-fl.dxbl-sm z motywu. */
.dxbl-fl.advanced-filter {
    --dxbl-fl-group-spacing-y: 0;
    margin-bottom: 0.75rem;
}

/* Plakietka z liczba wypelnionych warunkow. Ten sam jezyk co licznik zaznaczonych
   statusow (.statuses-filter-selected-count), zeby oba liczniki nad gridem czytalo
   sie jako jeden wzorzec. */
.advanced-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    /* Wymiary w calych pikselach: 18 px zamiast 18,4 px (1,15rem). Przy wysokosci
       ulamkowej srodek wypadal na 9,2 px i przegladarka zaokraglala pozycje glifu,
       przez co cyfra siadala o piksel wyzej niz srodek plakietki. Szerokosc 20 px
       i pismo 11 px sa juz calkowite, wiec ulamek wnosila wylacznie wysokosc. */
    height: 1.125rem;
    padding: 0 0.35rem;
    border-radius: 0.625rem;
    background: var(--main-color-filled);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    /* Wysrodkowanie niesie flex, a nie line-height: linia liczy sie od linii bazowej
       pisma, wiec podswietlenie i glif rozjezdzaly sie o roznice miedzy nimi. */
    line-height: 1;
    /* Cyfry o rownej szerokosci - inaczej waska jedynka czyta sie jak przesunieta
       w lewo, a plakietka zmienia szerokosc miedzy 1 a 7. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Spojnik miedzy znacznikami w DxTagBox. Bootstrapowe .text-muted bylo na ciemnym
   tle za slabe i motyw ciemny nadpisywal je przez !important; token dziala w obu
   motywach, a selektor z nazwa elementu wygrywa specyficznoscia bez !important. */
span.advanced-filter-conjunction {
    color: var(--text-color-muted);
}

/* Grupa warunkow. Wlasna karta zamiast pasma .bg-light: pasmo bez obrysu nie
   pokazywalo, gdzie grupa sie konczy, a przy grupie jednowarunkowej bylo nie do
   odroznienia od separatora. Listwa po lewej domyka zasieg pionowy grupy. */
.advanced-filter-group {
    background: var(--surface-color-2);
    border: 1px solid var(--surface-border-color);
    border-left: 3px solid var(--accent-active-bg);
    border-radius: 0.4375rem;
    padding: 0.625rem 0.625rem 0.5rem;
}

.advanced-filter-cond-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-left: 3.5rem;
    min-height: 2.25rem;
}

/* Spojnik "oraz" siedzi w rynience obok warunku, nie w osobnym wierszu - dzieki
   temu warunek kosztuje jeden wiersz zamiast dwoch. */
.advanced-filter-and {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3.1875rem;
    text-align: center;
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-color-muted);
}

.advanced-filter-group-foot {
    padding-left: 3.5rem;
}

/* Separator grup: linia z wysrodkowana pigulka. Wczesniej byl to sam pogrubiony
   tekst, ktory przy grupach jednowarunkowych gubil sie miedzy pasmami tla. */
.advanced-filter-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.625rem 0.125rem;
}

    .advanced-filter-or::before,
    .advanced-filter-or::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--surface-border-color);
    }

    .advanced-filter-or > span {
        padding: 0.125rem 0.75rem;
        border-radius: 0.6875rem;
        background: var(--main-color-subtle);
        color: var(--text-color);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

/* Szerokosci proporcjonalne zamiast sztywnych - na szerokim ekranie rosnie pole
   wartosci, a nie pusty margines za nim.
   Komorka jest flexem, a edytor w srodku rozciaga sie na cala jej szerokosc.
   Rozciaganiem steruje komorka, nie nazwa klasy edytora, bo w jednym wierszu
   moze stac DxComboBox, DxTextBox, DxMaskedInput, DxDateEdit albo DxTagBox. */
.advanced-filter-cell-field,
.advanced-filter-cell-operator,
.advanced-filter-cell-value {
    display: flex;
}

    .advanced-filter-cell-field > *,
    .advanced-filter-cell-operator > *,
    .advanced-filter-cell-value > * {
        flex: 1 1 auto;
        min-width: 0;
    }

.advanced-filter-cell-field {
    flex: 0 1 13.125rem;
    min-width: 0;
}

/* Kolumna operatora niesie teraz znak porownania przed nazwa. Przy 10.9375rem najdluzsze
   nazwy ("Wieksze lub rowne", "Mniejsze lub rowne") konczyly sie wielokropkiem juz bez znaku -
   a wypadala z nich wlasnie koncowka, ktora te dwa operatory rozroznia. Roznice bierze na
   siebie kolumna wartosci, ktora rosnie i ma zapas. */
.advanced-filter-cell-operator {
    position: relative;
    flex: 0 1 12.8125rem;
    min-width: 0;
}

    .advanced-filter-cell-operator > .advanced-filter-op-glyph {
        position: absolute;
        top: 50%;
        left: 0.5rem;
        z-index: 2;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .advanced-filter-cell-operator.advanced-filter-cell-operator-glyph .dxbl-text-edit-input {
        padding-left: 2.125rem;
    }

/* Znak porownania obok nazwy operatora. Znak Unicode, nie obrazek: zestaw ikon Bootstrap
   nie ma glifow porownania, a znak dziedziczy kolor tekstu, wiec motyw ciemny nie wymaga
   inwersji filtrem, ktora obsluguje klasy icon-bs-*. */
.advanced-filter-op-glyph {
    /* Szerokosc podana wprost, a nie samym flex-basis: w polu edycji znak stoi w kontenerze
       flex, ale pozycja listy rozwijanej DevExpressa jest blokiem, gdzie flex-basis nie
       obowiazuje - znaki mialy wtedy rozna szerokosc i kolumna nazw sie strzepila. */
    flex: 0 0 1.25rem;
    width: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.25rem;
    margin-right: 0.375rem;
    border: 1px solid var(--surface-border-color);
    border-radius: 0.25rem;
    background: var(--surface-color-2);
    color: var(--text-color-muted);
    font-family: "Segoe UI Symbol", "Segoe UI", system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* Znaki zlozone z dwoch pozycji ("=∅", "≠∅") schodza o stopien, zeby zmiescic sie w tym samym
   kwadracie co znaki pojedyncze - inaczej kolumna znakow rozjechalaby sie w pionie. */
.advanced-filter-op-glyph.advanced-filter-op-glyph-pair {
    font-size: 0.625rem;
    letter-spacing: -0.04em;
}

/* Nazwa operatora skraca sie wielokropkiem, a znak zostaje - to on niesie sens, gdy zabraknie
   miejsca na koncowke nazwy. */
.advanced-filter-op-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.advanced-filter-cell-value {
    flex: 1 1 16.25rem;
    min-width: 0;
}

/* Usuwanie warunku: ikona bez wypelnienia, czerwona dopiero pod kursorem. Akcent
   aplikacji zostaje przy dodawaniu, a nie przy kasowaniu.
   Kolory podajemy przez zmienne DevExpressa, a nie przez background/border wprost -
   motyw liczy z nich takze stany hover i active, wiec nadpisanie samego tla
   rozjechaloby sie przy najechaniu kursorem. */
.dxbl-btn.advanced-filter-remove {
    --dxbl-btn-bg: transparent;
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-color: var(--text-color-muted);
    --dxbl-btn-hover-bg: var(--bs-danger-bg-subtle);
    --dxbl-btn-hover-border-color: var(--bs-danger-border-subtle);
    --dxbl-btn-hover-color: var(--bs-danger-text-emphasis);
    --dxbl-btn-box-shadow: none;
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
}

/* Jedyny warunek jedynej grupy usunac sie nie da - filtr musi zostac z czyms.
   Przycisk jest ukrywany, nie wygaszany: wygaszony wygladal na usterke, a
   visibility zostawia miejsce, wiec wiersze pozostaja wyrownane. */
.dxbl-btn.advanced-filter-remove-hidden {
    visibility: hidden;
}

/* Dodawanie: przyciski kreskowane, bez wypelnienia - maja byc dostepne, ale nie
   konkurowac o uwage z polami warunku. */
.dxbl-btn.advanced-filter-add {
    --dxbl-btn-bg: transparent;
    --dxbl-btn-border-color: var(--surface-border-color);
    --dxbl-btn-border-style: dashed;
    --dxbl-btn-color: var(--text-color-muted);
    --dxbl-btn-hover-bg: transparent;
    --dxbl-btn-hover-border-color: var(--main-color);
    --dxbl-btn-hover-color: var(--main-color);
    --dxbl-btn-box-shadow: none;
    font-weight: 600;
}

.dxbl-btn.advanced-filter-add-group {
    width: 100%;
    margin-top: 0.75rem;
    justify-content: center;
}

/* Ponizej breakpointu z komponentu wartosc schodzi do wlasnej linii - wczesniej
   pola wychodzily poza karte. */
@media (max-width: 576px) {
    .advanced-filter-cond-inner {
        flex-wrap: wrap;
        padding-left: 0;
        row-gap: 0.375rem;
    }

    .advanced-filter-and {
        position: static;
        transform: none;
        flex: 0 0 100%;
        width: auto;
        text-align: left;
        padding-bottom: 0.125rem;
    }

    .advanced-filter-cell-field {
        flex: 1 1 auto;
    }

    .advanced-filter-cell-operator {
        flex: 0 0 8rem;
    }

    .advanced-filter-cell-value {
        flex: 1 1 100%;
        order: 3;
    }

    .dxbl-btn.advanced-filter-remove {
        order: 2;
    }

    .advanced-filter-group-foot {
        padding-left: 0;
    }
}

.toolbar-item-active {
    background-color: #fae1d2;
    /*    border: 1px solid #007bff; */
    border-radius: 4px;
    padding: 5px;
    /*    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); */
}


.transparent-button {
    background-color: transparent !important;
    border-color: transparent !important;
}

    .transparent-button .oi {
        font-size: 16px;
        margin-left: 5px;
    }


.index-title-color {
    color: var(--main-color) !important;
}

.equal-height {
    height: 100%;
    padding: 0;
    margin: 0;
}

.text-end {
    visibility: visible;
}

.chart-min-height-100 {
    height: 500px;
}

    .chart-min-height-100 .dxbl-row {
        height: 100%;
    }

        .chart-min-height-100 .dxbl-row .dxbl-col {
            height: 100%;
        }

            .chart-min-height-100 .dxbl-row .dxbl-col .dxbl-fl-ctrl {
                height: 100%;
                margin-top: 0;
            }

.import-window {
    width: 30vw;
}

    .import-window .col-auto {
        margin: 0 auto;
    }

        .import-window .col-auto button {
            width: 100%;
        }

    .import-window .dxuc-button-container {
        height: max-content;
    }

.hugerte-wrapper textarea {
    height: 500px;
    width: 100%;
    border: 2px solid #eee;
    border-radius: 10px;
    visibility: hidden;
    position: relative;
    color: transparent;
}

.hugerte-wrapper {
    width: 100%;
}

.dx-optional-parameters-card dxbl-group-control {
    border-top-width: 1px;
    margin-top: 0.5rem;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    box-shadow: none;
}

.export-products-window {
    min-width: 30vw !important;
}

/*combobox dropdown height*/
.combobox_dropdown-300 dxbl-listbox {
    max-height: 300px !important;
}

.combobox_dropdown-500 dxbl-listbox {
    max-height: 500px !important;
}

.product-choice-inactive {
    opacity: .5;
    filter: grayscale(1);
}

.custom-w-50px {
    width: 50px !important;
}

.user-profile .logo-container {
    margin-top: 15px !important;
    margin-bottom: 10px !important;
}

/* Awatar prowadzi na strone konta. Kotwica nie moze podkreslac ani przebarwiac wariantu
   z inicjalami, a przyciemnienie na hover potwierdza to, co zapowiada kursor. */
.user-profile-avatar-link {
    display: flex;
    border-radius: 50%;
    color: inherit;
    text-decoration: none;
}

    .user-profile-avatar-link:hover {
        opacity: 0.85;
        color: inherit;
        text-decoration: none;
    }

.user-profile .log-off-btn {
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: 1px solid #e5e5e5;
}

/*dropdown profilu (awatar): zagniezdzone DxMenu w srodku przelicza swoj uklad juz
  po otwarciu (w Blazor Server to dodatkowa wymiana z serwerem), przez co dropdown
  na moment zmienia wymiar. Ukrywanie fazy przed data-dx-menu-loaded nie wystarczylo -
  skok nastepuje pozniej - wiec dropdown pojawia sie z krotkim opoznieniem: przez
  pierwsze ~150 ms jest przezroczysty i przeliczenie odbywa sie poza wzrokiem,
  a potem szybko sie wlania juz w ostatecznym ukladzie*/
.dxbl-menu-dropdown:has(.user-profile) {
    animation: profile-dropdown-reveal .25s ease-out;
}

@keyframes profile-dropdown-reveal {
    0%, 60% { opacity: 0; }
    100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .dxbl-menu-dropdown:has(.user-profile) {
        animation: none;
    }
}

.menu-icon-user-profile {
    opacity: 0.75;
}

.user-profile .menu-icon-user-profile {
    opacity: 0.25;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.user-name-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
    overflow: hidden;
    width: 150px;
}

    .user-name-container .tm-8 {
        opacity: 0.8;
    }

.nip-alert {
    margin-bottom: 0px;
    margin-top: 4px;
}

.custom-height-24px {
    height: 24px !important;
}

.integration-columns .dxbl-tabs-item {
    position: relative;
}

.integration-tabs .dxbl-tabs-item {
    position: relative;
    --dxbl-tabs-tab-selected-bg: white;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.settings-tile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.3rem 1.2rem !important;
    cursor: pointer;
    position: relative;
    background-color: white;
    border-radius: 12px;
}

    .settings-tile:hover {
        transform: scale(1.03);
        box-shadow: 0 18px 45px rgba(0,0,0,0.16);
    }

.settings-tile-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.settings-tile-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.settings-tile-text h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.settings-tile-text p {
    margin: 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.settings-tile-arrow span {
    font-size: 1rem;
    color: #9ca3af;
}

/* Kolory ikon */
.tile-blue {
    background: #3b82f6;
}

.tile-purple {
    background: #8b5cf6;
}

.tile-indigo {
    background: #6366f1;
}

.tile-amber {
    background: #f59e0b;
}

.tile-green {
    background: #22c55e;
}

.tile-orange {
    background: #f97316;
}

.tile-pink {
    background: #ec4899;
}

.tile-red {
    background: #ef4444;
}

.tile-teal {
    background: #14b8a6;
}

.tile-second {
    background: #f1c5a5;
}

.chart-bg-primary path {
    stroke: var(--bs-primary) !important;
}

.chart-bg-warning path {
    stroke: var(--bs-warning) !important;
}

.chart-bg-success path {
    stroke: var(--bs-success) !important;
}

.chart-bg-info path {
    stroke: var(--bs-info) !important;
}

.top-products {
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    color: black;
    background: white;
    padding: 0.25rem;
}

.top-products-header {
    position: relative;
    text-align: center;
    color: black;
    font-size: 1.05rem;
    font-weight: 600;
}

.analytics-panel-minh {
    min-height: 660px;
    max-height: 660px;
    margin-top: 4px;
    border-radius: 18px;
}

.analytics-row-nav .dxbl-grid-table tbody tr {
    cursor: pointer;
}

.avg-fulfillment-scroll {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 4px;
}

.settings-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: 12px;
}

.settings-toolbar-side {
    display: flex;
    align-items: center;
    min-width: 0;
}

.settings-toolbar-actions {
    justify-self: end;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.settings-search {
    position: relative;
    justify-self: center;
    width: 100%;
    min-width: 350px;
    max-width: 360px;
}

    .settings-search .settings-search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 1rem;
        height: 1rem;
        background-size: 1rem;
        opacity: 0.45;
        pointer-events: none;
        z-index: 2;
    }

    .settings-search .settings-search-input {
        width: 100%;
        height: 30px;
    }

        .settings-search .settings-search-input.dxbl-text-edit,
        .settings-search .dxbl-text-edit {
            border-radius: 8px;
            background-color: #f9fafb;
        }

        .settings-search .settings-search-input .dxbl-text-edit-input,
        .settings-search .dxbl-text-edit-input {
            padding-left: 36px;
        }

/* przełącznik widoku lista / kafelki */
.settings-view-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #f9fafb;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .settings-view-toggle:hover {
        background-color: #f3f4f6;
        border-color: #d1d5db;
    }


.settings-desc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.85rem;
    color: #6b7280;
    white-space: nowrap;
    cursor: pointer;
}

/* czarne SVG ikony przełącznika widoku na szaro (filtr, bo to obrazki tła) */
.settings-view-icon {
    filter: invert(48%) sepia(6%) saturate(360%) hue-rotate(179deg) brightness(94%);
}

/* widok listy — jeden kafelek w wierszu */
.settings-grid.settings-grid-list {
    grid-template-columns: 1fr;
}

/* widok zwarty (opisy wyłączone) — małe kwadratowe kafelki, ikona na górze, tytuł pod spodem */
.settings-grid.settings-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 0.75rem;
}

    .settings-grid.settings-grid-compact .settings-tile {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
        padding: 0.9rem 0.6rem !important;
        aspect-ratio: 1 / 1;
    }

        .settings-grid.settings-grid-compact .settings-tile .settings-tile-left {
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }

        .settings-grid.settings-grid-compact .settings-tile .settings-tile-text h3 {
            font-size: 0.82rem;
            line-height: 1.15;
        }

        /* ukryj strzałkę w widoku zwartym */
        .settings-grid.settings-grid-compact .settings-tile .settings-tile-arrow {
            display: none;
        }

/* wąski ekran: wyszukiwarka rozciągnięta, przełącznik widoku w tym samym wierszu po prawej */
@media (max-width: 720px) {
    .settings-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem;
    }

    .settings-toolbar-side {
        display: none;
    }

        .settings-toolbar-side.settings-toolbar-actions {
            display: flex;
            flex-wrap: nowrap;
        }

    .settings-search {
        min-width: 0;
        max-width: none;
    }
}


.settings-section {
    margin-bottom: 4px;
    position: relative;
    background-color: white;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06);
}

.settings-section-header {
    margin-bottom: 1rem;
    margin-left: 0.5rem;
    position: relative;
}

    .settings-section-header h2 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
    }

    .settings-section-header p {
        margin: 0.15rem 0 0;
        font-size: 0.8rem;
        color: #6b7280;
    }


/* Konto -> Parametry: przelaczniki ustawien uzytkownika. Geometria i kolor ida
   przez wlasne zmienne przelacznika DevExpress, a nie przez nadpisania z
   !important - przesuniecie galki jest liczone z tych trzech wartosci, wiec
   zmiana rozmiaru musi trafic w nie wszystkie naraz. Kolor stanu wlaczonego
   ustawiony jawnie, bo w motywie jasnym (BootstrapExternal) przelacznik
   dostawal fiolet spoza palety OK-API. */
.param-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    padding-top: 1.25rem;
}

.param-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.param-option {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--surface-border-color);
    border-radius: 12px;
    background-color: var(--surface-color);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .param-option:hover {
        border-color: var(--main-color-filled);
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    }

    .param-option:has(.dxbl-checkbox-checked) {
        border-color: var(--main-color-subtle);
        background-color: var(--surface-color-2);
    }

    .param-option .dxbl-checkbox.param-switch {
        width: 100%;
        align-items: center;
    }

    .param-option .dxbl-checkbox.dxbl-checkbox-switch.param-switch {
        --dxbl-checkbox-font-size: 0.875rem;
        --dxbl-checkbox-switch-width: 2.25rem;
        --dxbl-checkbox-switch-height: 1.25rem;
        --dxbl-checkbox-switch-element-size: 0.875rem;
        --dxbl-checkbox-switch-element-margin: 0.1875rem;
        --dxbl-checkbox-switch-checked-bg: var(--main-color-filled);
        --dxbl-checkbox-switch-checked-hover-bg: var(--main-color-hover);
    }

    .param-option .param-switch > label {
        flex: 1 1 auto;
        min-width: 0;
        color: var(--text-color);
    }

.param-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--surface-border-color);
}

.param-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.param-field-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-color-muted);
}

@media (max-width: 1200px) {
    .param-options,
    .param-fields {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 1100px) {
    .settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

.invoices-summary {
    width: 100%;
    margin-top: 6px;
}

    .invoices-summary .settings-tile {
        cursor: default;
        min-width: 220px;
        padding: 0.75rem 1rem;
    }

        .invoices-summary .settings-tile .settings-tile-icon {
            width: 40px;
            height: 40px;
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.75rem;
        }

        .invoices-summary .settings-tile .settings-tile-text h3 {
            font-size: 0.95rem;
            margin-bottom: 0.2rem;
        }

        .invoices-summary .settings-tile .settings-tile-text p {
            font-size: 0.85rem;
            margin-bottom: 0;
            opacity: 0.8;
        }

    .invoices-summary .d-flex {
        flex-wrap: wrap;
    }

@media (max-width: 768px) {
    .invoices-summary .settings-tile {
        flex: 1 1 100%;
    }
}

.send-order-card {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 14px;
}

.icon-btn-disabled {
    background: transparent;
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.is-active .icon-bs-black-small,
.is-active .icon-bs-black-medium {
    filter: invert(44%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(92%) contrast(88%) !important;
}

.order-details-page-actions-left {
    display: flex;
    align-items: start;
    gap: 8px;
}

.order-details-page-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .order-details-page-actions-right .dxbl-btn {
        border-radius: 8px;
    }

.details-toolbar-pinned {
    position: sticky;
    top: 0;
    z-index: 300;
    background-color: var(--background-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .details-toolbar-pinned::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 1.1rem;
        background-color: inherit;
        pointer-events: none;
    }

/* Help.razor page */
.help-page-container {
    margin-top: -1.1rem;
    padding: 0 0 3rem;
}

.help-page-toolbar {
    position: sticky;
    top: -1.1rem;
    z-index: 900;
    margin: 0 0 0.75rem;
    padding: 1.1rem 0.85rem 0.75rem;
    background: var(--group-panel-color);
    border: 1px solid var(--bs-border-color);
    border-top: 0;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

    .help-page-toolbar::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 4rem;
        background: inherit;
    }

.help-content-wrapper {
    gap: 1.75rem;
    align-items: stretch;
}

.help-main-content {
    min-height: 500px;
    min-width: 0;
}

.help-content-display {
    padding: 1.75rem 2rem;
    background: white;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

    .help-content-display h1,
    .help-content-display h2,
    .help-content-display h3,
    .help-content-display h4,
    .help-content-display h5,
    .help-content-display h6 {
        scroll-margin-top: 90px;
    }

.help-editor {
    min-height: 500px;
}

.help-toc-sidebar {
    width: 270px;
    min-width: 270px;
    max-width: 270px;
}

.toc-container {
    position: sticky;
    top: -0.35rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    max-height: calc(100vh - 6rem);
    padding: 0.85rem 0.6rem 0.5rem 0.85rem;
}

.help-toc-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    padding: 3px 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

    .help-toc-scroll:hover {
        background: #f3f4f6;
    }

    .help-toc-scroll.is-disabled {
        opacity: 0.25;
        pointer-events: none;
    }

.toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #eef0f2;
}

    .toc-header h6 {
        font-weight: 700;
        font-size: 0.8rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #6b7280;
    }

.toc-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

    .toc-nav::-webkit-scrollbar {
        display: none;
    }

.help-toc-sidebar .toc-link {
    display: block;
    flex: 0 0 auto;
    text-decoration: none;
    color: #4b5563;
    font-size: 0.85rem;
    line-height: 1.35;
    padding: 0.3rem 0.5rem 0.3rem 0.6rem;
    border-left: 2px solid transparent;
    border-radius: 0 4px 4px 0;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .help-toc-sidebar .toc-link:hover {
        color: var(--main-color);
        background-color: #f8f9fa;
        border-left-color: var(--main-color-subtle);
    }

    .help-toc-sidebar .toc-link.is-active {
        color: var(--main-color);
        background-color: #fdf2ea;
        border-left-color: var(--main-color);
        font-weight: 600;
    }

    .help-toc-sidebar .toc-link.toc-level-1 {
        font-weight: 700;
        font-size: 0.9rem;
        color: #1f2937;
        margin-bottom: 0.2rem;
    }

    .help-toc-sidebar .toc-link.toc-level-2 {
        font-weight: 500;
        color: #374151;
    }

    .help-toc-sidebar .toc-link.toc-level-3 {
        padding-left: 1.5rem;
        font-size: 0.8rem;
        color: #6b7280;
    }

    .help-toc-sidebar .toc-link.toc-level-4,
    .help-toc-sidebar .toc-link.toc-level-5,
    .help-toc-sidebar .toc-link.toc-level-6 {
        padding-left: 2.25rem;
        font-size: 0.78rem;
        color: #9ca3af;
    }

.search-results-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.search-results-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.45rem;
    border-radius: 1rem;
    background: var(--main-color);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
}

.search-result-item {
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s, box-shadow 0.15s, border-color 0.15s;
}

    .search-result-item:hover {
        background-color: #fdfaf7;
        border-left-color: var(--main-color);
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

.search-result-title {
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--main-color);
}

.search-result-preview {
    margin-bottom: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #6b7280;
}

.search-result-item mark {
    background-color: #fff3cd;
    padding: 2px 4px;
    border-radius: 2px;
}

.toc-toggle-button,
.help-back-to-top {
    position: fixed;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: var(--main-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
    z-index: 1000;
}

.toc-toggle-button {
    top: 50%;
    transform: translateY(-50%);
}

    .toc-toggle-button:hover {
        background-color: var(--main-color-hover);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        transform: translateY(-50%) scale(1.1);
    }

.help-back-to-top {
    bottom: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

    .help-back-to-top.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .help-back-to-top:hover {
        background-color: var(--main-color-hover);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        transform: scale(1.1);
    }

@media (max-width: 992px) {
    .help-toc-sidebar {
        display: none;
    }

    .toc-toggle-button {
        display: none;
    }

    .help-content-display {
        padding: 1.1rem 1rem;
    }
}
/*---------------------------*/

/*---------------------------*/
/* Announcement Popup Styles */
/*---------------------------*/
.announcement-popup .dxbl-modal-body {
    padding: 0 !important;
    background-color: #fff !important;
}

.announcement-popup-details {
    display: flex;
    flex-direction: column;
    min-height: 300px;
    max-height: 90vh;
    background-color: #fff;
}

.announcement-popup-header {
    padding: 2rem 2.5rem 1rem 2.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    flex-shrink: 0;
}

.announcement-popup-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #212529;
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

.announcement-popup-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #6c757d;
}

.announcement-popup-meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.announcement-popup-meta-text {
    font-weight: 500;
}

.announcement-popup-meta-separator {
    color: #dee2e6;
    font-weight: bold;
}

.announcement-popup-divider {
    margin: 0;
    border-top: 2px solid #dee2e6;
    opacity: 0.5;
    flex-shrink: 0;
}

.announcement-popup-content {
    padding: 2rem 2.5rem;
    overflow-y: auto;
    flex: 1;
    font-size: 1rem;
    line-height: 1.7;
    color: #495057;
    background-color: #fff;
}

/* Reset styles for content that might have unwanted backgrounds */
.announcement-popup-content > div,
.announcement-popup-content > p,
.announcement-popup-content > section {
    background: none !important;
    background-color: transparent !important;
}

.announcement-popup-content h1,
.announcement-popup-content h2,
.announcement-popup-content h3,
.announcement-popup-content h4,
.announcement-popup-content h5,
.announcement-popup-content h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #212529;
    background: none !important;
    background-color: transparent !important;
}

.announcement-popup-content h1 {
    font-size: 1.75rem;
}

.announcement-popup-content h2 {
    font-size: 1.5rem;
}

.announcement-popup-content h3 {
    font-size: 1.25rem;
}

.announcement-popup-content p {
    margin-bottom: 1rem;
    background: none !important;
    background-color: transparent !important;
}

.announcement-popup-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.announcement-popup-content ul,
.announcement-popup-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.announcement-popup-content li {
    margin-bottom: 0.5rem;
}

.announcement-popup-content a {
    color: #0d6efd;
    text-decoration: none;
}

.announcement-popup-content a:hover {
    text-decoration: underline;
}

.announcement-popup-content blockquote {
    border-left: 4px solid #0d6efd;
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: #6c757d;
}

.announcement-popup-content code {
    background-color: #f8f9fa;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: #d63384;
}

.announcement-popup-content pre {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1rem 0;
}

.announcement-popup-content pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
}

.announcement-popup-footer {
    padding: 0.5rem 1.5rem;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    background-color: #f8f9fa;
}

.announcement-popup-btn-close {
    min-width: 100px;
}

@media (max-width: 576px) {
    .announcement-popup-header,
    .announcement-popup-content,
    .announcement-popup-footer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .announcement-popup-title {
        font-size: 1.5rem;
    }

    .announcement-popup-meta {
        font-size: 0.85rem;
    }

    .announcement-popup-content {
        font-size: 0.95rem;
    }
}
/*---------------------------*/

/* End of Wms24.Web.Server/wwwroot/css/custom.css */

/* End of Wms24.Web.Server/wwwroot/css/custom.css */


.kanban-flag-strip {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}


/* Ramka płótna diagramu automatyzacji. Wysokość musi być konkretna, bo
   .settings-section nie ma własnej wysokości, a .diagram-canvas z biblioteki
   ma height:100% — bez tego płótno miałoby zero pikseli.
   overflow:hidden robi z ramki kontener przewijania, dzięki czemu
   overscroll-behavior:contain zatrzymuje na niej kółko myszy i przewijanie
   .content nie ucieka podczas zoomowania. */
.automation-diagram-host {
    position: relative;
    width: 100%;
    height: min(68vh, 820px);
    min-height: 360px;
    overflow: hidden;
    overscroll-behavior: contain;
    border: 1px solid var(--surface-border-color);
    border-radius: 10px;
    background: var(--surface-color-2);
}

.automation-node {
    min-width: 260px;
    max-width: 420px;
    border-radius: 10px;
    border: 1px solid var(--surface-border-color);
    background: var(--surface-color);
    color: var(--text-color);
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    position: relative;
    padding: 10px 12px;
}

/* Selektory muszą pasować do znaczników z AutomationNodeWidget.razor. */
.automation-node-header,
.automation-node-body .line {
    white-space: pre-wrap; /* zachowuje \n i łamie */
    overflow-wrap: anywhere; /* łamie też długie ciągi */
    word-break: break-word; /* fallback */
}

    .automation-node.selected {
        outline: 2px solid var(--main-color-subtle);
    }

.automation-node-header {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--surface-border-color);
}

.automation-node-body .line {
    font-size: 12px;
    opacity: .9;
    line-height: 1.25rem;
}

/* Biblioteka blokuje zaznaczanie tylko na .node i .group — kanwa zostaje bez
   blokady, więc przeciągnięcie po tle diagramu zaznacza tekst na mijanych
   kafelkach. Blokada na całym hoście zamyka tę lukę razem z kafelkami. */
.automation-diagram-host {
    user-select: none;
}

/* Geometria portów. Biblioteka opisuje ją wyłącznie pod .default-node,
   a tutaj korzeniem węzła jest .automation-node — bez tych reguł wszystkie
   cztery porty leżą w zwykłym przepływie, mają zerowy rozmiar i zwracają ten
   sam punkt, przez co każde połączenie biegnie od spodu jednej karty do spodu
   drugiej. Nazwy klas wyrównania pochodzą z default.styles.css biblioteki. */
.automation-node .port {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px;
    border-radius: 50%;
    background-color: var(--surface-color-2);
    border: 1px solid var(--surface-border-color);
    cursor: pointer;
}

    .automation-node .port.top {
        top: 0;
        left: 50%;
    }

    .automation-node .port.bottom {
        bottom: 0;
        left: 50%;
    }

    .automation-node .port.left {
        left: 0;
        top: 50%;
    }

    .automation-node .port.right {
        right: 0;
        top: 50%;
    }

    /* Port bez połączenia jest niewidoczny, ale nadal zajmuje miejsce — musi je
       zajmować, bo z jego prostokąta biblioteka liczy początek i koniec linii. */
    .automation-node .port:not(.has-links) {
        opacity: 0;
    }

    /* Połączony port ma być końcówką linii, a nie osobną ozdobą — stąd kolor linii
       i mała średnica. W akcencie i przy 20px kropki przykrywały groty, przez co
       całość czytała się jak urwane połączenie. */
    .automation-node .port.has-links {
        background-color: var(--text-color-muted);
        border-color: var(--text-color-muted);
        opacity: 1;
    }

    .automation-node .port:hover {
        background-color: var(--main-color);
        border-color: var(--main-color);
        opacity: 1;
    }

/* Kolor połączeń. LinkWidget wypisuje stroke jako atrybut prezentacyjny SVG,
   więc zwykła reguła CSS wygrywa z nim bez !important — a token daje jeden
   punkt sterowania dla obu motywów. Pomocnik zaznaczenia zostaje nietknięty,
   bo to szeroka przezroczysta ścieżka do trafiania myszą. */
.automation-diagram-host .link path:not(.selection-helper) {
    stroke: var(--text-color-muted);
}

.automation-diagram-host .link.selected path:not(.selection-helper) {
    stroke: var(--main-color);
}

/* typy kroków */
.automation-node.kind-event {
    border-left: 6px solid #2f7dff;
}

.automation-node.kind-if {
    border-left: 6px solid #ff9800;
}

.automation-node.kind-sql {
    border-left: 6px solid #7b61ff;
}

.automation-node.kind-do {
    border-left: 6px solid #22a06b;
}

.automation-node.kind-step {
    border-left: 6px solid var(--surface-border-color);
}

.copy-to-clipboard-container {
    position: relative;
    display: inline-flex;
}

/* copy-to-clipboard */
.copy-to-clipboard-message {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    z-index: 1100;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #212529;
    color: #ffffff;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.2;
}

@media (max-height: 420px) {
    .copy-to-clipboard-message {
        bottom: auto;
        top: calc(100% + 6px);
    }
}

/*----------------*/
/* Produkt — pasek ze zdjęciem nad formularzem (zakładka Produkt) */
.product-hero {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fcfcfd;
}

.product-hero-gallery {
    flex: 0 0 auto;
}

.product-hero-photo {
    position: relative;
    width: 150px;
    height: 150px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fafafa;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .product-hero-photo:hover {
        border-color: var(--main-color);
        box-shadow: 0 2px 10px rgba(196, 96, 36, .18);
    }

    .product-hero-photo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

/* Produkt bez zdjęć nie pokazuje dziury, tylko zachętę prowadzącą do zakładki Zdjęcia. */
.product-hero-photo-empty {
    flex-direction: column;
    gap: 6px;
    border-style: dashed;
    border-color: #cbd5e1;
    background: #fbfbfc;
    color: #6b7280;
    font-size: 11.5px;
    text-align: center;
    padding: 10px;
}

.product-hero-empty-plus {
    font-size: 20px;
    line-height: 1;
    color: #9ca3af;
}

.product-hero-empty-add {
    color: var(--main-color);
    font-weight: 600;
}

.product-hero-count {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: rgba(17, 24, 39, .78);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
}

.product-hero-ai {
    position: absolute;
    left: 6px;
    top: 6px;
    background: var(--main-color);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 2px 6px;
    border-radius: 4px;
}

.product-hero-thumbs {
    display: flex;
    gap: 5px;
    margin-top: 6px;
}

.product-hero-thumb {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    background: #fafafa;
    overflow: hidden;
    cursor: pointer;
}

    .product-hero-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .product-hero-thumb.is-active {
        border-color: var(--main-color);
        box-shadow: inset 0 0 0 1px var(--main-color);
    }

.product-hero-thumb-more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
}

.product-hero-meta {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
}

.product-hero-name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

.product-hero-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.product-hero-fact {
    font-size: 12px;
    color: #6b7280;
}

    .product-hero-fact b {
        color: #111827;
    }

@media (max-width: 576px) {
    .product-hero {
        flex-direction: column;
    }

    .product-hero-name {
        font-size: 15px;
    }
}
/*----------------*/

/*przypinanie statusow na gorze listy wyboru*/
.status-pinned {
    font-weight: 600;
}

.status-pin-window {
    width: 46rem;
}

.status-pin-box {
    height: 300px;
}

/*obie kolumny okna maja rowna wysokosc, wiec listy i naglowki trzymaja jedna linie*/
.status-pin-window .dxbl-fl-item {
    align-self: start;
}

.status-pin-search {
    width: 12rem;
}

/*pinezka rownana do pierwszego wiersza etykiety, nie do srodka dwoch wierszy*/
.status-pin-marker {
    flex: 0 0 auto;
    margin-top: .15rem;
}

/*w aktywnej pozycji menu ikona ma byc w kolorze tekstu, a nie wyszarzona
  ogolna regula .is-active wyszarza ikony filtrem invert(44%), co w menu
  rozjezdzalo sie z ciemnym tekstem pozycji*/
.okapi-subnav-item.is-active .icon-bs-black-small,
.okapi-subnav-item.is-active .icon-bs-black-medium,
.okapi-nav-item.is-active .icon-bs-black-small,
.okapi-nav-item.is-active .icon-bs-black-medium {
    filter: none !important;
}

/*numer wiersza w kolumnie "#" - polprzezroczystosc zamiast stalego koloru: numer
  dziedziczy barwe tekstu wiersza i w obu motywach ma tak samo obnizony kontrast
  (staly szary byl w jasnym za ciemny, a w ciemnym za jasny). Cyfry o stalej
  szerokosci ustawiaja kolejne numery w jednej osi*/
.grid-row-number {
    display: block;
    text-align: center;
    color: inherit;
    opacity: .5;
    font-variant-numeric: tabular-nums;
}

/*plain row selection checkbox used instead of DxCheckBox - matches the DevExpress checkbox of the
  BootstrapExternal theme: 1rem, 2px border in the text colour at half strength, filled with the
  primary colour when checked*/
.grid-row-checkbox {
    width: 1rem;
    height: 1rem;
    border: 2px solid color-mix(in srgb, currentColor 50%, transparent);
    cursor: pointer;
}

.grid-row-checkbox:hover {
    border-color: color-mix(in srgb, currentColor 70%, transparent);
}

.grid-row-checkbox:checked {
    border-color: transparent;
}

.grid-group-row-count {
    margin-left: .35rem;
    color: var(--text-color-muted);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/*kafelki KPI analityki: flex zamiast sztywnych 5 kolumn - ostatni rzad rozciaga sie
  na cala szerokosc, wiec nie zostaja puste dziury przy 6/8/11 kafelkach*/
.analytics-kpi-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

    .analytics-kpi-grid > .stats-grid-item {
        flex: 1 1 240px;
        min-width: 240px;
        max-width: 100%;
    }

.stats-card .kpi-info-corner {
    position: absolute;
    right: 10px;
    bottom: 6px;
    line-height: 1;
}

.shortcuts-bar span.text-muted.small {
    white-space: nowrap;
}

.analytics-filter-bar .shortcuts-right {
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

    .analytics-filter-bar .shortcuts-right > .d-flex {
        flex: 1 1 auto;
        min-width: 0;
    }

    .analytics-filter-bar .selected-owners {
        flex: 1 1 auto;
        min-width: 300px;
    }

        /*pole wyboru wlascicieli zajmuje jeden wiersz - lista z checkboxami jest
          w rozwinieciu, wiec pasek filtrow nie rosnie wraz z liczba zaznaczen*/
        .analytics-filter-bar .selected-owners .owners-selector {
            width: 100%;
        }

.stats-card .kpi-card-title {
    min-height: 2.6em;
    line-height: 1.3;
}

.stats-card .stats-card-value {
    white-space: nowrap;
}

.stats-card .stats-card-value-md {
    font-size: 24px;
}

.stats-card .stats-card-value-sm {
    font-size: 19px;
}

.toolbar-integrations {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

:where(div):has(> .toolbar-integrations) {
    min-width: 0;
}

/*lista wlascicieli w rozwinieciu: bez limitu rozciaga sie na cala liste
  (u administratora to blisko stu pozycji) i wychodzi poza ekran*/
.owners-selector-list {
    max-height: 20rem;
}

.column-chooser-search {
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: stretch;
    padding: 0.375rem 0.5rem;
}

.column-chooser-search .form-control {
    height: 1.625rem;
    min-height: 0;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}

.dxbl-grid-column-chooser-item[hidden] {
    display: none !important;
}

.dxbl-grid-column-chooser-dialog:has(.column-chooser-search input:not(:placeholder-shown)) .dxbl-grid-column-chooser-item-drag-anchor {
    opacity: 0.35;
    cursor: not-allowed;
}

.owners-selector-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem;
}

/* ===== Wybor produktow w oknie dodawania paczki ===== */

/* Rzad opcji: oba checkboxy i przelacznik zrodla opisu w jednej linii.
   Podpis wiersza formularza ("Uzupelnij z zaznaczonych") niesie juz cala tresc. */
.package-products-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 1.25rem;
}

/* Przelacznik zrodla opisu trzyma sie swojego checkboxa nawet przy zawijaniu rzedu */
.package-products-actions-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Przelacznik klika sie wielokrotnie - bez tego dwuklik zaznacza podpis na niebiesko */
.package-products-source {
    user-select: none;
}

/* ===== Panel filtrow statusow =====
   Kolor statusu wchodzi z bazy jako --status-chip-color. Status niewybrany dostaje
   go tylko jako pasek i podklad wymieszany z tlem panelu (color-mix), wiec ta sama
   regula daje czytelny wynik w obu motywach; wybrany bierze pelne wypelnienie. */
.statuses-filter {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 14rem;
    margin-left: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--surface-border-color);
    border-radius: 0.5rem;
    background: var(--surface-color);
}

.statuses-filter-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.25rem 0.5rem;
}

.statuses-filter-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-color-muted);
}

.statuses-filter-selected-count {
    margin-left: auto;
    min-width: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 0.625rem;
    background: var(--main-color-filled);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

.statuses-filter-clear {
    padding: 0.125rem 0.25rem;
}

.statuses-filter-accordion {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    --dxbl-accordion-group-border-width: 0;
    --dxbl-accordion-group-header-padding-x: 0.25rem;
    --dxbl-accordion-group-header-padding-y: 0.25rem;
    --dxbl-accordion-group-item-content-indent: 0;
    --dxbl-accordion-group-item-content-padding-x: 0;
    --dxbl-accordion-group-item-spacing: 0;
}

.statuses-filter-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
}

.statuses-filter-group-name {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-color-muted);
}

.statuses-filter-group-badge {
    margin-left: auto;
    min-width: 1.125rem;
    padding: 0 0.3rem;
    border-radius: 0.5625rem;
    background: var(--main-color-filled);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
}

.statuses-filter-list {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding: 0.125rem 0 0.5rem;
}

.statuses-filter-code {
    padding: 0.25rem 0.25rem 0;
    font-size: 0.625rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-color-muted);
}

.statuses-filter-backdrop,
.statuses-filter-handle,
.statuses-filter-close {
    display: none;
}

@media (max-width: 575.98px) {
    .statuses-filter-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1039;
        background: rgba(0, 0, 0, 0.4);
    }

    .statuses-filter {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        width: auto;
        height: auto;
        max-height: 75dvh;
        margin-left: 0;
        padding: 0.5rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
        border-width: 1px 0 0;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    }

    .statuses-filter-handle {
        display: block;
        flex: 0 0 auto;
        width: 2.5rem;
        height: 0.25rem;
        margin: 0 auto 0.5rem;
        border-radius: 0.125rem;
        background: var(--surface-border-color);
    }

    .statuses-filter-header {
        padding: 0 0 0.5rem;
    }

    .statuses-filter-title {
        font-size: 0.875rem;
    }

    .statuses-filter-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        margin: -0.5rem -0.5rem -0.5rem auto;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        cursor: pointer;
    }

    .statuses-filter-selected-count ~ .statuses-filter-close {
        margin-left: 0.25rem;
    }

    .statuses-filter-close:focus-visible {
        outline: 2px solid var(--main-color);
        outline-offset: -2px;
    }

    .statuses-filter-accordion {
        overscroll-behavior: contain;
        --dxbl-accordion-group-header-padding-y: 0.625rem;
    }

    .statuses-filter .status-chip {
        min-height: 2.75rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
}

.status-chip {
    --status-chip-color: var(--bs-info, #0dcaf0);
    --status-chip-text: #ffffff;
    /* plakietka jest <button> (klawiatura, aria-pressed), wiec zdejmujemy
       natywny wyglad kontrolki i dziedziczymy krój po panelu */
    appearance: none;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--surface-border-color);
    /* kolor statusu niesie pasek, bo blady odcien na bialym panelu gubi sie w tle;
       5px to ta sama szerokosc, ktorej uzywaja minimalistyczne plakietki (BadgeStyles) */
    border-left: 5px solid var(--status-chip-color);
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--status-chip-color) var(--status-chip-tint), var(--surface-color));
    color: var(--text-color);
    font-size: 0.75rem;
    line-height: 1.2rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.status-chip:hover {
    background: color-mix(in srgb, var(--status-chip-color) calc(var(--status-chip-tint) * 2), var(--surface-color));
}

.status-chip:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 1px;
}

.status-chip-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-chip-count {
    flex: 0 0 auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-color-muted);
}

.status-chip-selected {
    border-color: var(--status-chip-color);
    background: var(--status-chip-color);
    color: var(--status-chip-text);
    font-weight: 700;
}

.status-chip-selected:hover {
    background: color-mix(in srgb, var(--status-chip-color) 88%, #000);
}

.status-chip-selected .status-chip-count {
    color: inherit;
    opacity: 0.85;
}

/* Corner marker on a chip whose status code is final; the chip is lower than a grid badge, hence 9px */
.status-chip.status-final {
    position: relative;
    overflow: hidden;
}

.status-chip.status-final::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 9px 9px 0;
    border-color: transparent var(--status-chip-color) transparent transparent;
    pointer-events: none;
}

.status-chip-selected.status-final::after {
    border-right-color: var(--status-chip-text);
    opacity: 0.85;
}

/* Toasty aplikacji. Klase nadaje ToastService, zeby arkusz mial punkt zaczepienia
   bez zgadywania wewnetrznych nazw DevExpressa. Zawijanie jest tu istotne, bo w tresc
   toasta trafia surowy tekst wyjatku i odpowiedzi API - dlugi ciag bez spacji
   (URL, numer sledzenia, fragment SQL) inaczej wychodzilby poza ramke. */
.app-toast {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Ikona ma stac na PIERWSZEJ linii tekstu. Motyw spycha ikone i tekst w dol
   wlasnymi paddingami od gory, wiec je zerujemy i wyrownujemy wiersz do gory:
   przy jednej linii wychodzi na to samo, przy dwoch ikona zostaje przy pierwszej,
   zamiast wisiec miedzy nimi. Przycisk zamkniecia wraca do ukladu i tylko przykleja
   sie do gory - wypiety przez position:absolute wchodzil na tekst, bo rezerwacja
   miejsca pod niego zawsze byla zgadywaniem. */
.dxbl-toast-portal .app-toast .dxbl-toast-body {
    align-items: flex-start;
}

.dxbl-toast-portal .app-toast .dxbl-toast-icon-column,
.dxbl-toast-portal .app-toast .dxbl-toast-content .dxbl-toast-text-content {
    padding-top: 0;
}

.dxbl-toast-portal .app-toast .dxbl-toast-close {
    align-self: flex-start;
}

.dxbl-toast-portal .dxbl-toast.app-toast.app-toast {
    --dxbl-toast-close-button-hover-bg: rgba(255, 255, 255, 0.25);
    --dxbl-toast-close-button-hover-color: #ffffff;
}

/* Pole pomocnicze awaryjnego kopiowania do schowka - nigdy nie ma byc widoczne. */
.okapi-copy-buffer {
    position: fixed;
    top: -1000px;
    left: -1000px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Bogatsze komorki wiersza filtrow (FilterRowDateRange / FilterRowNumber /
   FilterRowValueSelect). Kolumna moze byc wezsza niz domyslna, bo uzytkownicy zapisuja
   wlasne uklady kolumn, wiec w komorce stoi tylko przycisk skalujacy sie do kazdej
   szerokosci, a wlasciwy edytor mieszka w oknie o wlasnych rozmiarach. Kolory ida przez
   tokeny z _variables.css, ktore maja juz warianty dla motywu ciemnego. */
.okapi-filter-cell {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    min-width: 0;
}

.okapi-filter-cell-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    height: var(--filter-input-height);
    padding: 0 6px;
    background-color: var(--filter-cell-color);
    border: 1px solid var(--surface-border-color);
    border-radius: var(--bs-border-radius-sm);
    color: var(--text-color);
    font-size: 0.8125rem;
    line-height: 1;
    text-align: left;
    cursor: pointer;
}

/* Podswietlenie po najechaniu idzie przez --main-color-subtle, a nie przez
   bootstrapowe --bs-primary-bg-subtle: to drugie w motywie ciemnym jest niemal
   czarne (#1c0e05) i na tle komorki filtra (--grid-color #242422) nie widac zmiany. */
.okapi-filter-cell-trigger:hover {
    background-color: var(--main-color-subtle);
}

.okapi-filter-cell-trigger:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: -1px;
}

/* Kolumna z ustawionym filtrem ma sie rzucac w oczy takze wtedy, gdy podsumowanie
   nie miesci sie w komorce i zostaje przyciete do wielokropka. */
.okapi-filter-cell-trigger-active {
    border-color: var(--main-color);
    color: var(--main-color);
    font-weight: 600;
}

/* Wpisana wartosc czeka na Enter albo Odswiez w tabeli - obramowanie przerywane
   odroznia ja od filtra, ktory tabela juz stosuje. */
.okapi-filter-cell-trigger-pending {
    border-style: dashed;
    font-style: italic;
}

/* icons.css podnosi te ikone o 1px (top: -1px), co przy tekscie 0.8125rem w
   komorce filtra widac jako rozjechana linie. Znosimy to tylko tutaj. */
.okapi-filter-cell-icon {
    flex: 0 0 auto;
    top: 0;
}

.okapi-filter-cell-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.okapi-filter-cell-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.25rem;
    height: var(--filter-input-height);
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.okapi-filter-cell-clear:hover {
    opacity: 0.7;
}

.okapi-filter-popup {
    width: min(20rem, calc(100vw - 2rem));
}

/* DevExpress nadaje cialu listy rozwijanej wlasne wypelnienie 12px o wyzszej
   specyficznosci - stad selektor z obiema klasami, a nie sama nasza. */
.dxbl-dropdown-body.okapi-filter-popup-body {
    padding: 0;
}

.okapi-filter-popup-content {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem;
    color: var(--text-color);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

.okapi-filter-popup-caption {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-color-muted);
}

.okapi-filter-popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.375rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--surface-border-color);
}

.okapi-filter-fields {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.okapi-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
}

.okapi-filter-field-caption {
    font-size: 0.75rem;
    color: var(--text-color-muted);
}

/* Lista operatorow: dwie kolumny na typowym oknie, jedna na waskim ekranie. */
.okapi-filter-operators {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
}

@media (max-width: 480px) {
    .okapi-filter-operators {
        grid-template-columns: minmax(0, 1fr);
    }
}

.okapi-filter-operator,
.okapi-filter-mode-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    padding: 0.25rem 0.5rem;
    background-color: var(--surface-color-2);
    border: 1px solid var(--surface-border-color);
    border-radius: var(--bs-border-radius-sm);
    color: var(--text-color);
    font-size: 0.8125rem;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.okapi-filter-operator:hover,
.okapi-filter-mode-button:hover {
    background-color: var(--main-color-subtle);
}

.okapi-filter-operator-active,
.okapi-filter-mode-active {
    background-color: var(--main-color-filled);
    border-color: var(--main-color-filled);
    color: #ffffff;
}

.okapi-filter-operator-active:hover,
.okapi-filter-mode-active:hover {
    background-color: var(--main-color-hover);
}

.okapi-filter-operator-glyph {
    flex: 0 0 auto;
    width: 1rem;
    text-align: center;
    font-weight: 700;
}

.okapi-filter-operator-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Dwie rowne kolumny lamaly dluzsza etykiete ("Poza wybranymi") na dwie linie,
   bo polowa szerokosci popupu jej nie miescila. Przyciski dziela wiersz po
   zawartosci i nie zawijaja tekstu. */
.okapi-filter-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.okapi-filter-search {
    width: 100%;
}

.okapi-filter-list {
    display: flex;
    flex-direction: column;
    max-height: min(15rem, 40vh);
    overflow-y: auto;
    border: 1px solid var(--surface-border-color);
    border-radius: var(--bs-border-radius-sm);
    background-color: var(--surface-color);
}

.okapi-filter-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

.okapi-filter-list-item:hover {
    background-color: var(--main-color-subtle);
}

.okapi-filter-list-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
}

.okapi-filter-list-empty {
    padding: 0.5rem;
    color: var(--text-color-muted);
    font-size: 0.8125rem;
    text-align: center;
}


/* --- Tablica kanban: uchwyt kolumny, przypiecie i stany przeciagania --- */

.kanban-column-grip {
    cursor: grab;
    user-select: none;
    font-size: 13px;
    line-height: 1;
    color: #9ca3af;
    padding: 2px 1px;
    touch-action: none;
}

.kanban-column-grip:active {
    cursor: grabbing;
}

.kanban-column-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 6px;
}

.kanban-column-pin {
    background: transparent;
    border: 0;
    border-radius: 4px;
    padding: 2px 4px;
    line-height: 1;
    cursor: pointer;
    opacity: .45;
}

.kanban-column-pin:hover,
.kanban-column-pin:focus-visible {
    opacity: 1;
    background: rgba(15, 23, 42, .07);
}

/* Sama pelna nieprzezroczystosc nie odrozniala przypiecia od zwyklej ikony -
   pinezka bierze kolor akcentu tym samym filtrem, ktorego uzywa icons.css. */
.kanban-column-pin.is-pinned {
    opacity: 1;
}

    .kanban-column-pin.is-pinned .icon-bs-black-xsmall {
        filter: var(--main-color-filter);
    }

.kanban-column-pinned {
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05), inset 3px 0 0 var(--main-color);
}

.kanban-column-placeholder {
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    user-select: none;
}

/* Kafelek nie moze przechwytywac gestu przewijania przegladarki, bo przeciaganie
   jest obslugiwane zdarzeniami wskaznika. */
.kanban-card {
    touch-action: pan-y;
}

/* Miejsce po podniesionym elemencie ma czytac sie jako puste, inaczej przy kafelku
   - duzo mniejszym od kolumny - nie widac bylo, ze cokolwiek zostalo zlapane. */
/* Miejsce po podniesionym elemencie wyglada tak samo dla kafelka i dla kolumny:
   samo przygaszenie. Karta miala wczesniej dodatkowo przerywana ramke i przezroczyste
   tlo, przez co te dwa przeciagniecia czytaly sie jak osobne mechanizmy. */
.kanban-card-dragging,
.kanban-column-dragging {
    opacity: .35;
}

/* Klon jadacy za wskaznikiem. Poza ukladem kolumn, wiec nie wplywa na pomiary. */
.kanban-drag-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 4000;
    pointer-events: none;
    opacity: 1;
    will-change: transform;
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .28);
}

/* Znaczniki celu rysujemy cieniem wewnetrznym i spod .kanban-board, a nie sama klasa
   stanu, z dwoch powodow.
   Po pierwsze kaskada: site.css laduje sie po custom.css i nadaje kolumnie wlasny
   box-shadow przy tej samej specyficznosci, wiec pojedyncza klasa stanu przegrywala
   i znacznik nie pojawial sie w ogole. Zejscie przez przodka daje o jedna klase wiecej.
   Po drugie przycinanie: .kanban-wrapper-body ma overflow-y: hidden, a kolumna siega
   jego gornej krawedzi. Obrys lezy poza ramka elementu, wiec jego gorna krawedz byla
   scinana, a boki wypadaly w odstepie miedzy kolumnami - zamiast ramki widac bylo
   pionowa kreske, mylnie czytana jako znacznik wstawienia. Cien wewnetrzny miesci sie
   w ramce elementu, wiec nic go nie utnie, i trzyma zaokraglenie kolumny.
   Grubosc odpowiada ramce klona (.kanban-drag-ghost), zeby upuszczenie zamowienia
   czytalo sie tak samo mocno jak przenoszenie statusu. */
.kanban-board .kanban-column-kanbanorders.kanban-column-dragover {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
    background: color-mix(in srgb, var(--main-color) 10%, var(--group-panel-color));
}

a.kanban-card {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

    a.kanban-card:hover,
    a.kanban-card:focus {
        color: inherit;
        text-decoration: none;
    }

.kanban-drop-slot {
    flex: 0 0 auto;
    border: 2px dashed var(--main-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--main-color) 6%, transparent);
    min-height: 2.5rem;
}

.kanban-board .kanban-column-insert-before {
    box-shadow: inset 3px 0 0 var(--main-color);
}

.kanban-board .kanban-column-insert-after {
    box-shadow: inset -3px 0 0 var(--main-color);
}


/* Zakres komorek zaznaczony Alt+przeciagnieciem (albo Shift+klikniecie) do kopiowania
   przez Ctrl+C. Podswietlenie idzie na tle akcentu, zeby nie mylilo sie z zaznaczeniem
   wiersza, ktore grid rysuje wlasnym kolorem. */
.okapi-cell-range {
    background-color: rgba(196, 96, 36, 0.18) !important;
    box-shadow: inset 0 0 0 1px rgba(196, 96, 36, 0.45);
}


/* Okno wyboru statusow tablicy kanban. */
/* Listy przenoszenia w produktach: wysokosc pochodzila ze stylu inline przy recznej
   liscie pol wyboru, a po przejsciu na DxListBox nalezy do samej listy. */
.product-transfer-list {
    max-height: 20rem;
}

.dx-kanban-status-window {
    width: 34rem;
    max-width: 92vw;
}

    /* Cialo okna nie ma wlasnego wypelnienia, a naglowek i stopka dostaja od
       motywu tylko 3px/8px - tresc dotykala wiec krawedzi okna. */
    .dx-kanban-status-window .kanban-status-body {
        padding: 0.75rem 1rem 1rem;
    }

    .dx-kanban-status-window .dxbl-window-header,
    .dx-kanban-status-window .dxbl-window-footer {
        padding: 0.5rem 1rem;
    }


/* Lista statusow tablicy: ograniczamy wysokosc, zeby slownik z kilkudziesiecioma
   pozycjami nie rozciagnal okna poza ekran - lista przewija sie sama. */
.kanban-status-listbox {
    max-height: min(22rem, 50vh);
}

.dx-kanban-settings-window {
    width: 25rem;
    max-width: 92vw;
}


/* --- Analityka --- */
.analytics-page {
    --ao-panel: #ffffff;
    --ao-panel-2: #f7f8fa;
    --ao-line: #e2e5ec;
    --ao-line-soft: #edeff3;
    --ao-text: #1b2027;
    --ao-muted: #5e6a7a;
    --ao-faint: #8a94a3;
    --ao-acc: #c46024;
    --ao-acc-ink: #a44c17;
    --ao-acc-soft: rgba(196, 96, 36, .10);
    --ao-acc-line: rgba(196, 96, 36, .35);
    --ao-pos: #1d7a45;
    --ao-neg: #b53a2d;
    --ao-warn: #9a6707;
    --ao-warn-soft: rgba(154, 103, 7, .12);
    --ao-track: #eceff4;
    --ao-s2: #2f7cb8;
    --ao-s3: #7a5ea8;
    --ao-s4: #93a0b0;
    --ao-shadow: 0 1px 2px rgba(16, 20, 26, .05), 0 8px 24px rgba(16, 20, 26, .05);
    --ao-radius: 14px;
}

    html[data-bs-theme="dark"] .analytics-page {
        --ao-panel: var(--surface-color-2);
        --ao-panel-2: #363633;
        --ao-line: var(--surface-border-color);
        --ao-line-soft: #373733;
        --ao-text: var(--text-color);
        --ao-muted: var(--text-color-muted);
        --ao-faint: var(--text-color-muted);
        --ao-acc: #c46024;
        --ao-acc-ink: #e3854b;
        --ao-acc-soft: rgba(196, 96, 36, .18);
        --ao-acc-line: rgba(196, 96, 36, .5);
        --ao-pos: #57b57c;
        --ao-neg: #e0736b;
        --ao-warn: #d8a445;
        --ao-warn-soft: rgba(216, 164, 69, .14);
        --ao-track: #3a3a36;
        --ao-s2: #5fa8dd;
        --ao-s3: #a08ad6;
        --ao-s4: #8f8c84;
        --ao-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .28);
    }

.analytics-page {
    color: var(--ao-text);
    padding-bottom: 40px;
}

/* --- Pasek objasniajacy, skad biora sie liczby --- */
.analytics-notice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 14px 0 16px;
    padding: 11px 14px;
    border-radius: 11px;
    background: var(--ao-acc-soft);
    border: 1px solid var(--ao-acc-line);
    font-size: 12.5px;
    color: var(--ao-text);
}

    .analytics-notice .analytics-notice-ico {
        color: var(--ao-acc-ink);
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        margin-top: 1px;
    }

        .analytics-notice .analytics-notice-ico svg {
            width: 15px;
            height: 15px;
            display: block;
        }

    .analytics-notice a {
        color: var(--ao-acc-ink);
        text-decoration: underline;
    }

/* --- Sekcja danych --- */
.analytics-section {
    margin-top: 38px;
}

    .analytics-section:first-of-type {
        margin-top: 24px;
    }

.analytics-section-head {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ao-line);
    margin-bottom: 16px;
}

.analytics-section-text {
    flex: 1;
    min-width: 260px;
}

.analytics-section-title {
    margin: 0;
    font-size: 21px;
    letter-spacing: -.015em;
    font-weight: 650;
}

.analytics-summary {
    margin: 5px 0 0;
    font-size: 13.5px;
    color: var(--ao-muted);
    max-width: 96ch;
    line-height: 1.5;
}

    .analytics-summary b {
        color: var(--ao-text);
        font-weight: 600;
    }

.analytics-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 340px;
}

.analytics-tag {
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--ao-line);
    color: var(--ao-muted);
    background: var(--ao-panel-2);
    white-space: nowrap;
}

    .analytics-tag-order {
        border-color: var(--ao-acc-line);
        color: var(--ao-acc-ink);
        background: var(--ao-acc-soft);
    }

    .analytics-tag-aviso {
        color: var(--ao-s2);
        border-color: color-mix(in srgb, var(--ao-s2) 45%, transparent);
        background: color-mix(in srgb, var(--ao-s2) 12%, transparent);
    }

    .analytics-tag-correction {
        color: var(--ao-s3);
        border-color: color-mix(in srgb, var(--ao-s3) 45%, transparent);
        background: color-mix(in srgb, var(--ao-s3) 12%, transparent);
    }

    .analytics-tag-live {
        border-color: var(--ao-warn);
        color: var(--ao-warn);
        background: var(--ao-warn-soft);
    }

/* --- Kafle --- */
.analytics-kpis {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
}

.analytics-kpis-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.analytics-kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.analytics-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.analytics-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.analytics-kpi {
    background: var(--ao-panel);
    border: 1px solid var(--ao-line);
    border-radius: var(--ao-radius);
    padding: 14px 15px 13px;
    box-shadow: var(--ao-shadow);
    display: flex;
    flex-direction: column;
    min-height: 118px;
}

    .analytics-kpi-clickable {
        cursor: pointer;
        position: relative;
    }

        .analytics-kpi-clickable:hover {
            border-color: var(--ao-acc-line);
        }

.analytics-kpi-label {
    font-size: 11.5px;
    color: var(--ao-muted);
    letter-spacing: .01em;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
    min-height: 32px;
}

.analytics-kpi-drill {
    font-size: 10.5px;
    color: var(--ao-faint);
    white-space: nowrap;
}

.analytics-kpi-clickable:hover .analytics-kpi-drill {
    color: var(--ao-acc-ink);
}

.analytics-kpi-value {
    font-size: 27px;
    font-weight: 660;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.analytics-kpi-unit {
    font-size: 13px;
    font-weight: 500;
    color: var(--ao-muted);
    margin-left: 5px;
    letter-spacing: 0;
}

.analytics-kpi-delta {
    margin-top: auto;
    padding-top: 8px;
    font-size: 11.5px;
    display: flex;
    gap: 5px;
    align-items: baseline;
}

    .analytics-kpi-delta .analytics-kpi-arrow {
        font-size: 9px;
        line-height: 1.6;
    }

    .analytics-kpi-delta-good { color: var(--ao-pos); }
    .analytics-kpi-delta-warn { color: var(--ao-warn); }
    .analytics-kpi-delta-bad { color: var(--ao-neg); }
    .analytics-kpi-delta-flat { color: var(--ao-muted); }

.analytics-kpi-note {
    font-size: 11px;
    color: var(--ao-faint);
    margin-top: 5px;
    border-top: 1px dashed var(--ao-line);
    padding-top: 6px;
}

/* --- Karty z wykresami i tabelami --- */
.analytics-row {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}

.analytics-row-1 { grid-template-columns: 1fr; }
.analytics-row-2 { grid-template-columns: 1fr 1fr; }
.analytics-row-ab { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.analytics-row-ba { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }

.analytics-card {
    background: var(--ao-panel);
    border: 1px solid var(--ao-line);
    border-radius: var(--ao-radius);
    padding: 16px 18px 14px;
    box-shadow: var(--ao-shadow);
    min-width: 0;
}

.analytics-card-title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 640;
    letter-spacing: -.005em;
}

.analytics-card-sub {
    margin: 4px 0 12px;
    font-size: 11.5px;
    color: var(--ao-muted);
}

.analytics-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ao-line-soft);
    font-size: 11.5px;
    color: var(--ao-muted);
}

    .analytics-legend i {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 3px;
        margin-right: 6px;
        vertical-align: -1px;
    }

.analytics-swatch-acc { background: var(--ao-acc); }
.analytics-swatch-s2 { background: var(--ao-s2); }
.analytics-swatch-s3 { background: var(--ao-s3); }
.analytics-swatch-s4 { background: var(--ao-s4); }
.analytics-swatch-ok { background: var(--ao-pos); }
.analytics-swatch-warn { background: var(--ao-warn); }
.analytics-swatch-bad { background: var(--ao-neg); }

.analytics-foot {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--ao-line-soft);
    font-size: 11px;
    color: var(--ao-faint);
}

/* --- Slowniczek pojec na dole sekcji --- */
.analytics-dict {
    margin-top: 38px;
    background: var(--ao-panel);
    border: 1px solid var(--ao-line);
    border-radius: var(--ao-radius);
    padding: 18px 20px;
    box-shadow: var(--ao-shadow);
}

.analytics-dict-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 24px;
    margin: 0;
}

    .analytics-dict-list > div {
        border-left: 2px solid var(--ao-acc-line);
        padding-left: 11px;
    }

    .analytics-dict-list dt {
        font-size: 12.5px;
        font-weight: 620;
    }

    .analytics-dict-list dd {
        margin: 2px 0 0;
        font-size: 11.5px;
        color: var(--ao-muted);
    }

@media (max-width: 1500px) {
    .analytics-kpis-6,
    .analytics-kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
    .analytics-kpis-6,
    .analytics-kpis-5,
    .analytics-kpis-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.analytics-kpi-clickable:focus-visible {
    outline: 2px solid var(--ao-acc);
    outline-offset: 2px;
    border-color: var(--ao-acc-line);
}

.analytics-header-hint {
    border-bottom: 1px dotted var(--ao-line);
    cursor: help;
}

.analytics-chart {
    width: 100%;
    min-height: 260px;
}

    .analytics-row-2,
    .analytics-row-ab,
    .analytics-row-ba { grid-template-columns: 1fr; }

    .analytics-dict-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .analytics-kpis-6,
    .analytics-kpis-5,
    .analytics-kpis-4,
    .analytics-kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .analytics-tags {
        justify-content: flex-start;
        max-width: none;
    }

    .analytics-dict-list { grid-template-columns: 1fr; }
}

/* --- Fakturowanie wlasciciela --- */
.owner-billing-tab {
    margin-top: 0.75rem;
}

.owner-billing-tab > .dxbl-fl-item {
    align-self: stretch;
}

.owner-billing-column {
    height: 100%;
}

.owner-billing-types .owner-billing-type {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.15rem 0;
}

.owner-billing-types .owner-billing-type-note {
    color: var(--text-color-muted);
    font-size: 0.8em;
    line-height: 1.35;
}

.owner-billing-address {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.6rem;
    border: 1px dashed var(--surface-border-color);
    border-radius: 2px;
    color: var(--text-color);
    width: 100%;
}

.owner-billing-address-name {
    font-weight: 600;
}

.owner-billing-address-empty {
    color: var(--text-color-muted);
}

.owner-billing-checklist {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--bs-danger-text-emphasis);
    font-size: 0.85em;
}

.owner-billing-hint {
    display: block;
    color: var(--text-color-muted);
    font-size: 0.85em;
    line-height: 1.4;
}

.owner-billing-bands {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .owner-billing-bands th,
    .owner-billing-bands td {
        padding: 0.2rem 0.5rem;
        border-bottom: 1px solid var(--surface-border-color);
        vertical-align: middle;
    }

    .owner-billing-bands th:first-child,
    .owner-billing-bands td:first-child {
        padding-left: 0;
    }

    .owner-billing-bands th:last-child,
    .owner-billing-bands td:last-child {
        padding-right: 0;
    }

    .owner-billing-bands th {
        text-align: left;
        color: var(--text-color-muted);
        font-size: 0.8em;
        font-weight: 600;
        white-space: nowrap;
    }

    .owner-billing-bands tbody td {
        height: 2.75rem;
    }

    .owner-billing-bands tr:last-child td {
        border-bottom: none;
    }

    .owner-billing-bands col.owner-billing-col-from {
        width: 8.5rem;
    }

.owner-billing-global-value {
    display: inline-block;
    padding: 0.2rem 0;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.owner-billing-band-from {
    color: var(--text-color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.owner-billing-band-off .owner-billing-band-from {
    font-style: italic;
}

/* Status badges: corner marker on a status whose code is final */
.status-final {
    position: relative;
}

.status-final:not(.status-look-minimal) {
    overflow: hidden;
}

.status-final::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent currentColor transparent transparent;
    opacity: 0.85;
    pointer-events: none;
}

.status-look-minimal.status-final::after {
    border-right-color: var(--status-color, var(--bs-info));
    opacity: 1;
}

/* Status codes dictionary: final marker switch, centred in its cell */
.status-code-final-switch {
    width: auto;
    margin: 0 auto;
    justify-content: center;
}

/* Status codes dictionary: usage counts */
.status-code-count {
    display: inline-block;
    min-width: 2rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    background-color: rgba(128, 128, 128, 0.18);
    color: inherit;
}

.status-code-count-link {
    background-color: rgba(var(--bs-primary-rgb), 0.18);
    color: var(--bs-primary);
    text-decoration: none;
}

.status-code-count-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.32);
    color: var(--bs-primary);
}

.status-code-count-empty {
    background-color: transparent;
    opacity: 0.45;
    font-weight: 400;
}

/* Zapisane ustawienia okna eksportu: lista wyboru z przyciskami zapisu i usuwania nad kolumnami */
.export-presets {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--surface-border-color);
}

.export-presets-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* ===== Dashboard i ustawienia na małych ekranach ===== */

/* bez min-width:0 długi tytuł karty ("transportowych") wchodził pod ikonę */
.stats-card-body {
    min-width: 0;
}

@media (max-width: 1200px) {
    /* nieparzysta liczba kart w dwóch kolumnach — ostatnia nie zostawia pustego miejsca */
    .index-grid > .stats-grid-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 576px) {
    .index-grid {
        gap: 0.625rem;
    }

        .index-grid .stats-card {
            padding: 0.875rem;
        }

        /* ikona nad tytułem, żeby tekst dostał całą szerokość wąskiej karty */
        .index-grid .stats-card-head {
            flex-direction: column-reverse;
            align-items: flex-start !important;
            gap: 0.5rem;
        }

        .index-grid .stats-card-icon-wrapper {
            padding: 0.45rem;
            border-radius: 0.625rem;
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
        }

            .index-grid .stats-card-icon-wrapper .icon-bs-white-medium {
                width: 1.1rem;
                height: 1.1rem;
            }

        .index-grid .stats-card-title {
            font-size: 0.8rem;
            line-height: 1.25;
        }

        .index-grid .stats-card-trend {
            flex-wrap: wrap;
            column-gap: 0.25rem;
            row-gap: 0;
        }

            .index-grid .stats-card-trend > span {
                white-space: nowrap;
            }

    .settings-section {
        padding: 1rem 0.75rem;
        border-radius: 0.875rem;
    }

    .settings-section-header {
        margin: 0 0.25rem 0.75rem;
    }

    .settings-grid {
        gap: 0.625rem;
    }

    .settings-tile {
        padding: 0.875rem !important;
    }

    .settings-grid.settings-grid-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

        .settings-grid.settings-grid-compact .settings-tile {
            padding: 0.5rem 0.25rem !important;
            gap: 0.35rem;
        }

            .settings-grid.settings-grid-compact .settings-tile .settings-tile-icon {
                width: 36px;
                height: 36px;
                border-radius: 10px;
            }

            .settings-grid.settings-grid-compact .settings-tile .settings-tile-text h3 {
                font-size: 0.72rem;
                overflow-wrap: break-word;
                hyphens: auto;
            }
}

/* menu ogłoszeń i awatara w nagłówku nie może się ściskać ani łamać — przy braku miejsca DxMenu
   zwijało pozycje do własnego hamburgera albo układało je w kolumnie */
.header-user-menu {
    flex: 0 0 auto;
}

    .header-user-menu .dxbl-menu-item-list {
        flex-wrap: nowrap;
    }

/* Pasek aktywnych filtrów nad listami */
.active-filters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 6px;
    padding: 6px 10px;
    background-color: var(--surface-color);
    border: 1px solid var(--surface-border-color);
    border-radius: 10px;
    color: var(--text-color);
    font-size: 12px;
}

.active-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.active-filters-title {
    color: var(--text-color-muted);
    margin-right: 2px;
}

.active-filters-spacer {
    flex: 1 1 auto;
}

.active-filters-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    background-color: var(--surface-color-2);
    border: 1px solid var(--surface-border-color);
    border-radius: 999px;
}

    .active-filters-chip-scope {
        background-color: transparent;
        border-style: dashed;
    }

    .active-filters-chip-open {
        border-color: var(--main-color);
    }

.active-filters-chip-body {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 3px 4px 3px 9px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.active-filters-chip-label {
    color: var(--text-color-muted);
    white-space: nowrap;
}

.active-filters-chip-value {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-filters-chip-scope .active-filters-chip-body {
    padding-right: 9px;
}

.active-filters-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 2px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

    .active-filters-remove:hover {
        background-color: var(--surface-border-color);
    }

.active-filters-clear {
    padding: 2px 4px;
    background: transparent;
    border: 0;
    color: var(--link-color, var(--main-color));
    font: inherit;
    cursor: pointer;
}

    .active-filters-clear:hover {
        text-decoration: underline;
    }

.active-filters-pending {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    background-color: color-mix(in srgb, var(--warning-color) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning-color) 55%, transparent);
    border-radius: 999px;
    color: var(--text-color);
}

.active-filters-apply {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background-color: var(--main-color-filled);
    border: 0;
    border-radius: 8px;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.active-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background-color: var(--accent-active-bg);
    border: 0;
    border-radius: 8px;
    color: var(--accent-active-color);
    font: inherit;
    cursor: pointer;
}

.active-filters-details {
    padding: 8px 10px;
    background-color: var(--surface-color-2);
    border: 1px solid var(--surface-border-color);
    border-radius: 10px;
}

.active-filters-details-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--text-color-muted);
}

.active-filters-details ul,
.active-filters-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.active-filters-details li {
    padding: 2px 0;
}

.active-filters-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.active-filters-list-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 2px;
    border-top: 1px solid var(--surface-border-color);
}

    .active-filters-list-item:first-child {
        border-top: 0;
    }

.active-filters-list-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-filters-list-footer {
    justify-content: flex-end;
}

.active-filters button:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 1px;
}

/* Okno aktywnych filtrów pod przyciskiem „Filtry" */
.active-filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background-color: var(--main-color-filled);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

.active-filters-flyout-empty {
    color: var(--text-color-muted);
    font-size: 13px;
}

.active-filters-flyout-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.active-filters-flyout-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.active-filters-flyout-source {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px 2px;
    color: var(--text-color-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.active-filters-flyout-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 2px 2px 2px 8px;
    border-radius: 6px;
    font-size: 13px;
}

    .active-filters-flyout-row:hover {
        background-color: var(--surface-color-2);
    }

.active-filters-flyout-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.active-filters-flyout-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: none;
    margin-left: auto;
}

.active-filters-flyout-details {
    margin: 0 0 4px;
    padding-left: 24px;
    color: var(--text-color-muted);
    font-size: 12px;
}

.active-filters-flyout-emphasis {
    color: var(--text-color);
    font-weight: 600;
}

.dxbl-flyout > .dxbl-flyout-dialog.active-filters-flyout > .active-filters-flyout-footer {
    justify-content: center;
    color: var(--text-color-muted);
    font-size: 12px;
    text-align: center;
}

/* Podstawowe przyciski listy: Filtry, zakres dni, Wyczyść filtry, Odśwież */
.toolbar-core-filters-active,
.toolbar-core-filters-active .dxbl-btn,
.toolbar-core-days,
.toolbar-core-days .dxbl-btn {
    font-weight: 600;
}

    .toolbar-core-refresh-pending .dxbl-btn {
        position: relative;
    }

        .toolbar-core-refresh-pending .dxbl-btn::after {
            content: "";
            position: absolute;
            top: 5px;
            right: 3px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: currentColor;
        }

/* Admin tools window (admin group only). DxWindow renders outside the component scope, so the styles are global. */
.admin-tools-window {
    border: 1px solid var(--admin-window-border) !important;
    border-top: 4px solid var(--admin-window-env-production) !important;
    background: var(--admin-window-bg) !important;
    box-shadow: var(--admin-window-shadow) !important;
}

.admin-tools-window.is-test {
    border-top-color: var(--admin-window-env-test) !important;
}

.admin-tools-window .dxbl-modal-header {
    padding-block: 6px;
    background: var(--admin-window-head-bg);
}

.admin-tools-window .dxbl-modal-body {
    background: var(--admin-window-bg);
}

.admin-tools-window-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

.atw-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 0.875rem;
}

.atw-title {
    font-weight: 600;
    white-space: nowrap;
}

.atw-context {
    overflow: hidden;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--main-color);
    color: #ffffff;
    font-size: 0.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.atw-env {
    padding: 1px 8px;
    border: 1px solid var(--admin-env-border);
    border-radius: 5px;
    background: var(--admin-env-bg);
    color: var(--admin-env-text);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.atw-tabs {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.atw-tabs > .dxbl-tabs-content-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 10px 12px 12px;
    overflow: auto;
}

.atw-tabs > .dxbl-tabs-content-panel > .dxbl-tabs-content.dxbl-active {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
}

.atw-muted {
    color: var(--text-color-muted);
    font-size: 0.8125rem;
}

.atw-hint {
    margin-top: 4px;
}

.atw-alert {
    margin: 8px 0;
    padding: 8px 10px;
    border: 1px solid var(--surface-border-color);
    border-radius: 6px;
    font-size: 0.8125rem;
}

.atw-alert-warning {
    border-color: #d9a441;
    color: var(--text-color);
}

.atw-alert-danger {
    border-color: var(--admin-env-border);
    background: var(--admin-env-bg);
    color: var(--admin-env-text);
    white-space: pre-wrap;
}

.atw-record {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.atw-record-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.atw-record-search {
    width: 280px;
}

.atw-rec-grid {
    display: flex;
    flex-direction: column;
    overflow: auto;
    border: 1px solid var(--surface-border-color);
    border-radius: 6px;
    font-size: 0.8125rem;
}

.atw-rec-row {
    display: grid;
    grid-template-columns: 28px minmax(120px, 0.9fr) minmax(76px, 0.55fr) minmax(120px, 1.4fr) minmax(90px, 1fr);
    align-items: center;
    min-width: 440px;
    min-height: 30px;
    border-bottom: 1px solid var(--surface-border-color);
}

.atw-rec-row > span {
    min-width: 0;
    padding: 2px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atw-rec-row.is-head {
    background: var(--surface-color-2);
    font-weight: 600;
}

.atw-rec-row.is-key > span:nth-child(2) {
    font-weight: 600;
}

.atw-rec-value {
    font: 0.8125rem Consolas, "Cascadia Code", monospace;
    cursor: default;
}

.atw-rec-value.is-edited {
    background: var(--admin-cell-edited-bg);
    color: var(--admin-cell-edited-text);
    font-weight: 600;
}

.atw-rec-value.is-invalid {
    outline: 2px solid var(--admin-window-env-production);
    outline-offset: -2px;
}

.atw-rec-old {
    margin-left: 8px;
    color: var(--text-color-muted);
    font-weight: 400;
    text-decoration: line-through;
}

.atw-rec-editor {
    display: inline-flex;
    width: calc(100% - 44px);
}

.atw-record-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.atw-record-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.atw-record-grid {
    flex: 1 1 auto;
    min-height: 0;
}

.atw-record-grid .atw-record-key > td {
    font-weight: 600;
}

.atw-settings {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.atw-settings-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    align-items: start;
}

.atw-settings-cards-next {
    margin-top: 12px;
}

.atw-ai-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.atw-ai-fields .atw-settings-field {
    min-width: 0;
}

.atw-ai-fields .atw-settings-field > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.atw-ai-wide {
    grid-column: span 2;
}

.atw-ai-span3 {
    grid-column: span 3;
}

.atw-ai-full {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .atw-ai-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .atw-ai-span3 {
        grid-column: 1 / -1;
    }
}


.atw-settings-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--surface-border-color);
    border-radius: 8px;
    background: var(--surface-color-2);
}

.atw-settings-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.atw-settings-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    margin: 0;
    font-size: 0.8125rem;
}

.atw-settings-kv dt {
    color: var(--text-color-muted);
    font-weight: 400;
}

.atw-settings-kv dd {
    margin: 0;
    font: 0.8125rem Consolas, "Cascadia Code", monospace;
    overflow-wrap: anywhere;
}

.atw-settings-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.atw-settings-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8125rem;
}

.atw-settings-field > span {
    color: var(--text-color-muted);
}

.atw-settings-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--admin-env-border);
    border-radius: 6px;
    background: var(--admin-env-bg);
    color: var(--admin-env-text);
    font-size: 0.8125rem;
}

.atw-settings-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.atw-settings-row-nowrap {
    flex-wrap: nowrap;
}

.atw-settings-row-nowrap > .dxbl-btn {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}

.atw-monaco,
.atw-monaco > div {
    width: 100%;
    height: 100%;
}

.atw-monaco-overflow.monaco-editor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: 0;
    height: 0;
    background: transparent;
}

.atw-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.8125rem;
}

.atw-banner-dry {
    border: 1px solid #d9a441;
    background: color-mix(in srgb, #d9a441 14%, var(--surface-color));
}

.atw-banner-confirm {
    border: 1px solid var(--admin-env-border);
    background: var(--admin-env-bg);
    color: var(--admin-env-text);
}

.atw-banner-text {
    display: flex;
    flex: 1 1 260px;
    gap: 8px;
}

.atw-confirm-box {
    width: 200px;
}

.atw-confirm-card {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--surface-border-color);
    border-radius: 8px;
    background: var(--surface-color);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.atw-confirm-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-danger, #dc3545) 16%, transparent);
    color: var(--bs-danger, #dc3545);
}

.atw-confirm-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.atw-confirm-title {
    font-weight: 600;
}

.atw-confirm-text {
    color: var(--text-color-muted);
    font-size: 0.8125rem;
}

.atw-confirm-db {
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
    color: var(--text-color);
}

.atw-confirm-statements {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.atw-confirm-statements li {
    padding: 1px 8px;
    border: 1px solid var(--surface-border-color);
    border-radius: 4px;
    font-size: 0.75rem;
}

.atw-confirm-label {
    color: var(--text-color-muted);
    font-size: 12px;
}

.atw-confirm-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

.atw-confirm-actions .atw-confirm-box {
    flex: 0 1 220px;
    min-width: 0;
}

.atw-confirm-actions > .dxbl-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.atw-results {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}

.atw-result-status {
    color: var(--text-color-muted);
    font-size: 0.75rem;
}

.atw-result-status.is-error {
    color: var(--admin-env-text);
    white-space: pre-wrap;
}

.atw-result-tabs {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.atw-result-tabs > .dxbl-tabs-content-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.atw-result-tabs > .dxbl-tabs-content-panel > .dxbl-tabs-content.dxbl-active {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.atw-result-pane {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.atw-result-pane > .atw-pending,
.atw-result-pane > .atw-alert,
.atw-result-pane > .atw-delete-plan,
.atw-result-pane > .atw-muted,
.atw-result-pane > .atw-result-preview,
.atw-result-pane > .atw-result-toolbar {
    flex: 0 0 auto;
}

.atw-result-grid {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    font-variant-numeric: tabular-nums;
}

.atw-result-grid > .dxbl-grid {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.atw-result-grid > .dxbl-grid > .dxbl-scroll-viewer {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: auto;
}

.atw-result-grid > .dxbl-grid > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.atw-result-readonly,
.atw-result-toolbar,
.atw-result-export {
    flex: 0 0 auto;
}

.atw-result-grid .dxbl-grid-header,
.atw-result-grid .dxbl-grid-header-content,
.atw-result-grid .dxbl-grid-header-row,
.atw-result-grid .dxbl-grid-filter-row,
.atw-result-grid .dxbl-grid-selection-cell {
    user-select: none;
}

.atw-result-grid .dxbl-grid-table > thead > tr > th {
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 3;
}

.atw-result-grid .dxbl-grid-column-resize-anchor,
.atw-result-grid .dxbl-grid-columns-separator {
    user-select: none;
}

.atw-null {
    color: var(--text-color-muted);
    font-style: italic;
}

.atw-alert-info {
    border-color: color-mix(in srgb, #2f7ad6 45%, var(--surface-border-color));
    background: color-mix(in srgb, #2f7ad6 10%, var(--surface-color));
    color: var(--text-color);
}

.atw-result-readonly {
    display: flex;
    align-items: center;
    gap: 8px;
}

.atw-pending {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--main-color) 45%, var(--surface-border-color));
    border-radius: 6px;
    background: color-mix(in srgb, var(--main-color) 12%, var(--surface-color));
    font-size: 0.8125rem;
}

.atw-pending-text {
    flex: 1 1 auto;
}

.atw-pending-actions {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
}

.atw-pending-actions .dxbl-btn,
.atw-pending-actions .atw-seg {
    flex: 0 0 auto;
    white-space: nowrap;
}

.atw-pending-actions.is-inline {
    flex: 0 0 auto;
    margin-left: auto;
    overflow-x: visible;
}

.atw-pending.is-inline {
    flex-wrap: nowrap;
}

.atw-pending.is-inline .atw-pending-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atw-result-toolbar > .dxbl-btn,
.atw-result-export .dxbl-btn,
.atw-pending .dxbl-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.atw-result-export {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    margin-left: auto;
}

.atw-result-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
}

.atw-result-preview {
    max-height: 200px;
    overflow: auto;
}

.atw-result-head {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.atw-key-icon {
    filter: invert(62%) sepia(83%) saturate(518%) hue-rotate(5deg) brightness(95%);
}

.atw-fk-icon {
    filter: invert(42%) sepia(83%) saturate(1500%) hue-rotate(196deg) brightness(95%);
}

.atw-cell {
    display: block;
    min-height: 1em;
    cursor: default;
}

.atw-result-grid td.atw-cell-range,
.atw-result-grid td.atw-cell-dragging {
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--main-color) 20%, transparent);
    outline: 1px solid color-mix(in srgb, var(--main-color) 55%, transparent);
    outline-offset: -1px;
}

.atw-result-grid .dxbl-grid-table > tbody {
    user-select: none;
}

.atw-result-grid .atw-cell {
    user-select: none;
}

.atw-result-grid td.atw-cell-edited {
    background: var(--admin-cell-edited-bg) !important;
    color: var(--admin-cell-edited-text);
    font-weight: 600;
}

.atw-result-grid td.atw-cell-invalid {
    outline: 2px solid var(--admin-window-env-production);
    outline-offset: -2px;
}

.atw-result-grid tr.atw-row-new > td {
    background: var(--admin-row-new-bg) !important;
}

.atw-result-grid tr.atw-row-deleted > td {
    background: var(--admin-blocked-row) !important;
    color: var(--admin-env-text);
    text-decoration: line-through;
}

.atw-cell-editor {
    display: flex;
    align-items: center;
    gap: 4px;
}

.atw-cell-input {
    flex: 1 1 auto;
    min-width: 80px;
    padding: 1px 6px;
    border: 2px solid var(--main-color);
    border-radius: 3px;
    background: var(--surface-color);
    color: var(--text-color);
    font: inherit;
    user-select: text;
}

.atw-cell-null {
    padding: 0 5px;
    border: 1px solid var(--surface-border-color);
    border-radius: 3px;
    background: var(--surface-color-2);
    color: var(--text-color-muted);
    font-size: 0.6875rem;
    cursor: pointer;
}

.atw-delete-plan {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--surface-border-color);
    border-radius: 6px;
}

.atw-dep-tree,
.atw-dep-tree ul {
    margin: 0;
    padding-left: 18px;
    font-size: 0.8125rem;
}

.atw-dep-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.atw-messages {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--surface-border-color);
    border-radius: 6px;
    background: var(--surface-color-2);
    font: 12px/1.5 Consolas, "Cascadia Code", monospace;
    white-space: pre-wrap;
    overflow: auto;
}

.atw-history-grid {
    flex: 1 1 auto;
    min-height: 160px;
}

.atw-save-template {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px dashed var(--surface-border-color);
    border-radius: 8px;
}

.atw-save-template-title {
    width: 280px;
}

.atw-diagnostics {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.atw-diag-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.atw-diag-section h3 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.atw-diag-section p {
    margin: 0;
}

.atw-diag-head,
.atw-history-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.atw-history-period {
    width: 150px;
}


.atw-audit-range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
}

.atw-audit-date {
    width: 130px;
}

.atw-source-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border: 1px solid var(--surface-border-color);
    border-radius: 999px;
    color: var(--text-color-muted);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.atw-source-pill input {
    accent-color: var(--main-color);
    margin: 0;
}

.atw-source-pill.is-on {
    border-color: var(--main-color);
    color: var(--text-color);
    background: color-mix(in srgb, var(--main-color) 12%, transparent);
}

.atw-steps {
    display: inline-flex;
    align-self: flex-start;
    margin: 4px 0;
    font-size: 0.75rem;
}

.atw-step {
    padding: 3px 12px;
    border: 1px solid var(--surface-border-color);
    color: var(--text-color-muted);
}

.atw-step + .atw-step {
    border-left: 0;
}

.atw-step:first-child {
    border-radius: 999px 0 0 999px;
}

.atw-step:last-child {
    border-radius: 0 999px 999px 0;
}

.atw-step.is-done {
    border-color: var(--admin-env-test-border);
    background: var(--admin-env-test-bg);
    color: var(--admin-env-test-text);
}

.atw-step.is-current {
    border-color: var(--main-color-filled);
    background: var(--main-color-filled);
    color: #fff;
}

.atw-qa-search {
    margin-bottom: 6px;
}

.atw-selection-chips {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.atw-sel-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 4px 1px 10px;
    border: 1px solid var(--surface-border-color);
    border-radius: 999px;
    background: var(--surface-color);
    font-size: 0.75rem;
}

.atw-sel-chip-remove {
    padding: 0 5px;
    border: 0;
    background: transparent;
    color: var(--text-color-muted);
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
}

.atw-sel-chip-remove:hover {
    color: var(--admin-env-text);
}

.atw-diag-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.atw-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 9px;
    border: 1px solid var(--surface-border-color);
    border-radius: 999px;
    color: var(--text-color-muted);
    font-size: 0.75rem;
}

.atw-chip.is-danger {
    border-color: var(--admin-env-border);
    background: var(--admin-env-bg);
    color: var(--admin-env-text);
}

.atw-chip.is-warn {
    border-color: var(--admin-blocker-border);
    background: var(--admin-blocker-bg);
    color: var(--admin-blocker-text);
}

.atw-diag-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--text-color-muted);
    font-size: 0.75rem;
}

.atw-diag-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.atw-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.atw-legend-swatch.is-blocked {
    background: var(--admin-blocked-row);
    box-shadow: inset 3px 0 0 var(--admin-window-env-production);
}

.atw-legend-swatch.is-blocker {
    background: var(--admin-blocker-row);
    box-shadow: inset 3px 0 0 #e0a800;
}

.atw-legend-swatch.is-deadlock {
    background: var(--admin-deadlock-row);
    box-shadow: inset 3px 0 0 var(--admin-window-env-production);
}

.atw-diag-grid {
    max-height: 320px;
}

.atw-diag-grid tr.atw-row-blocked > td {
    background: var(--admin-blocked-row) !important;
}

.atw-diag-grid tr.atw-row-blocked > td:first-child,
.atw-diag-grid tr.atw-row-deadlock > td:first-child {
    box-shadow: inset 4px 0 0 var(--admin-window-env-production);
}

.atw-diag-grid tr.atw-row-blocker > td {
    background: var(--admin-blocker-row) !important;
}

.atw-diag-grid tr.atw-row-blocker > td:first-child {
    box-shadow: inset 4px 0 0 #e0a800;
}

.atw-diag-grid tr.atw-row-deadlock > td {
    background: var(--admin-deadlock-row) !important;
}

.atw-mono {
    font: 12px Consolas, "Cascadia Code", monospace;
}

.atw-diag-graph {
    max-height: 260px;
    margin: 0;
    padding: 10px 12px;
    overflow: auto;
    border: 1px solid var(--surface-border-color);
    border-radius: 6px;
    background: var(--surface-color-2);
    font: 12px/1.45 Consolas, "Cascadia Code", monospace;
    white-space: pre-wrap;
}

.atw-history-search {
    display: flex;
    flex: 1 1 360px;
    gap: 6px;
    min-width: 0;
}

.atw-history-search-text {
    flex: 1 1 200px;
}

.atw-history-search-in {
    flex: 1 1 220px;
}

.atw-history {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.atw-audit-toolbar {
    flex: 0 0 auto;
    margin-bottom: 8px;
}

.atw-history-sql {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.atw-history-sql span {
    overflow: hidden;
    font: 12px Consolas, "Cascadia Code", monospace;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.atw-history-error {
    color: var(--admin-env-text);
}

.atw-change-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.atw-relations {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.atw-rel-node {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.atw-rel-title {
    font-weight: 500;
}

.atw-rel-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--main-color);
    font-size: 0.75rem;
    text-decoration: underline;
    cursor: pointer;
}

.atw-env.is-test {
    border-color: var(--admin-env-test-border);
    background: var(--admin-env-test-bg);
    color: var(--admin-env-test-text);
}

.atw-window-loading {
    padding: 16px;
}

.atw-section-title {
    display: flex;
    white-space: nowrap;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    color: var(--text-color-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.atw-section-title code {
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
}

.atw-pill {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border: 1px solid var(--surface-border-color);
    border-radius: 999px;
    color: var(--text-color-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.atw-pill.is-ok {
    border-color: color-mix(in srgb, #3fb950 55%, var(--surface-border-color));
    color: color-mix(in srgb, #3fb950 70%, var(--text-color));
}

.atw-pill.is-warn {
    border-color: color-mix(in srgb, #d9a441 60%, var(--surface-border-color));
    color: color-mix(in srgb, #d9a441 70%, var(--text-color));
}

.atw-pill.is-error {
    border-color: var(--admin-env-border);
    background: var(--admin-env-bg);
    color: var(--admin-env-text);
}

.atw-pill.is-info {
    border-color: color-mix(in srgb, #4c8dff 55%, var(--surface-border-color));
    color: color-mix(in srgb, #4c8dff 70%, var(--text-color));
}

.atw-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    color: var(--text-color-muted);
    font-size: 0.75rem;
}

.atw-field code {
    margin-left: 4px;
    font-size: 0.6875rem;
}

.atw-state {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 11px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 0.8125rem;
}

.atw-state-error {
    border-color: var(--admin-env-border);
    background: var(--admin-env-bg);
    color: var(--admin-env-text);
}

.atw-state-ok {
    border-color: var(--admin-env-test-border);
    background: var(--admin-env-test-bg);
    color: var(--admin-env-test-text);
}

.atw-perms {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.atw-gate {
    display: grid;
    flex: 1 1 auto;
    place-items: center;
    min-height: 0;
    padding: 24px 16px;
    overflow: auto;
}

.atw-gate-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(440px, 100%);
}

.atw-login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 460px;
}

.atw-login-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.atw-login-target {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--surface-border-color);
    border-radius: 8px;
    background: var(--surface-color-2);
    font-size: 0.8125rem;
}

.atw-login-target code {
    margin-left: auto;
    color: var(--text-color);
}

.atw-password {
    position: relative;
    display: block;
}

.atw-password-input input {
    padding-right: 64px;
}

.atw-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--text-color-muted);
    font-size: 0.75rem;
    transform: translateY(-50%);
    cursor: pointer;
}

.atw-password-toggle:focus-visible {
    outline: 2px solid var(--main-color);
    border-radius: 4px;
}

.atw-login-submit {
    align-self: stretch;
}

.atw-cell-changed {
    color: color-mix(in srgb, #d9a441 75%, var(--text-color));
    font-weight: 600;
}

.atw-record-layout {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
}

.atw-record-layout.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.atw-record-main,
.atw-record-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    padding: 10px 12px;
    border: 1px solid var(--surface-border-color);
    border-radius: 10px;
    background: var(--surface-color);
    overflow: auto;
}

.atw-kv {
    display: grid;
    grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
    gap: 4px 12px;
    margin: 0;
    font-size: 0.8125rem;
}

.atw-kv dt {
    color: var(--text-color-muted);
    font-weight: 400;
}

.atw-kv dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.atw-status {
    display: inline-block;
    padding: 0 8px;
    border-left: 4px solid var(--status-chip-color);
    border-radius: 4px;
    background: color-mix(in srgb, var(--status-chip-color) var(--status-chip-tint), var(--surface-color));
    font-size: 0.75rem;
}

.atw-shortcuts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    padding-top: 8px;
    border-top: 1px solid var(--surface-border-color);
}

.atw-selection {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.atw-selection-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.atw-selection-ids {
    overflow: hidden;
    max-width: 50ch;
    font-size: 0.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.atw-selection-buttons {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.atw-qa {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
}

.atw-qa.is-compact {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
}

.atw-qa-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: auto;
}

.atw-qa.is-compact .atw-qa-list {
    max-height: 260px;
}

.atw-qa-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 6px 2px 0;
    color: var(--text-color-muted);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.atw-qa-group .dxbl-btn {
    letter-spacing: 0;
    text-transform: none;
}

.atw-qa-group.is-new {
    justify-content: flex-end;
}

.atw-qa-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 10px;
    border: 1px solid var(--surface-border-color);
    border-radius: 8px;
    background: var(--surface-color-2);
    color: var(--text-color);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.atw-qa-item:hover,
.atw-qa-item:focus-visible {
    border-color: var(--main-color);
    outline: none;
}

.atw-qa-item.is-selected {
    border-color: var(--main-color);
    background: color-mix(in srgb, var(--main-color) 12%, var(--surface-color-2));
}

.atw-qa-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.atw-qa-desc {
    color: var(--text-color-muted);
    font-size: 0.75rem;
}

.atw-qa-tag {
    padding: 0 5px;
    border: 1px solid var(--surface-border-color);
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.atw-qa-tag.is-danger {
    border-color: var(--admin-env-border);
    color: var(--admin-env-text);
}

.atw-qa-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
}

.atw-qa-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.atw-qa-head-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.atw-qa-description {
    margin: 0;
}

.atw-qa-params {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.atw-qa-sql {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--surface-border-color);
    border-radius: 8px;
    background: var(--surface-color-2);
    font: 0.75rem/1.5 Consolas, "Cascadia Code", monospace;
    white-space: pre-wrap;
    overflow-x: auto;
}

.atw-qa-sql-box summary {
    color: var(--text-color-muted);
    font-size: 0.75rem;
    cursor: pointer;
}

.atw-qa-sql-box[open] summary {
    margin-bottom: 6px;
}

.atw-qa-sql-input textarea {
    font: 0.8125rem/1.5 Consolas, "Cascadia Code", monospace;
}

.atw-qa-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.atw-qa-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.atw-qa-editor h3 {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.atw-qa-editor > p {
    grid-column: 1 / -1;
    margin: 0;
}

.atw-qa-wide {
    grid-column: 1 / -1;
}

.atw-qa-placeholders {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.atw-qa-placeholders code {
    padding: 1px 6px;
    border: 1px solid var(--surface-border-color);
    border-radius: 5px;
    background: var(--surface-color-2);
    font-size: 0.6875rem;
}

.atw-qa-manage {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.atw-qa.is-manage {
    grid-template-columns: 320px minmax(0, 1fr);
}

.atw-qa.is-manage .atw-qa-main {
    overflow: auto;
}

.atw-qa-kinds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.atw-sql-preview {
    max-height: 420px;
    overflow: auto;
}

.atw-health-findings {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.atw-health-finding {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--surface-border-color);
    border-left-width: 4px;
    border-radius: 6px;
    background: var(--surface-color-2);
    font-size: 0.8125rem;
}

.atw-health-finding.is-danger {
    border-left-color: var(--admin-window-env-production);
}

.atw-health-finding.is-warn {
    border-left-color: #d9a441;
}

.atw-health-finding.is-info {
    border-left-color: var(--main-color);
}

.atw-health-finding.is-ok {
    border-left-color: #3fa66b;
}

.atw-health-failures summary {
    color: var(--text-color-muted);
    font-size: 0.75rem;
    cursor: pointer;
}

.atw-health-failures ul {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 0.75rem;
}

.atw-timeline-search {
    max-width: 320px;
}

.atw-timeline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    overflow: auto;
    list-style: none;
}

.atw-timeline-row {
    display: grid;
    grid-template-columns: 112px 128px minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    padding: 5px 4px;
    border-bottom: 1px solid var(--surface-border-color);
    font-size: 0.8125rem;
}

.atw-timeline-row.is-problem .atw-timeline-text {
    color: var(--admin-env-text);
}

.atw-timeline-when {
    color: var(--text-color-muted);
    font-variant-numeric: tabular-nums;
}

.atw-timeline-row .atw-pill {
    justify-self: start;
}

.atw-timeline-text {
    overflow-wrap: anywhere;
}

.atw-timeline-text .atw-muted {
    display: block;
    font-size: 0.75rem;
}

.atw-diag-subtitle {
    margin: 10px 0 6px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.atw-table-wrap {
    overflow-x: auto;
}

.atw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.atw-table th,
.atw-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--surface-border-color);
    text-align: left;
    white-space: nowrap;
}

.atw-table th {
    background: var(--surface-color-2);
    color: var(--text-color-muted);
    font-weight: 600;
}

.atw-table-text {
    min-width: 240px;
    white-space: normal !important;
}

@media (max-width: 900px) {
    .atw-record-layout,
    .atw-qa,
    .atw-qa-editor {
        grid-template-columns: minmax(0, 1fr);
    }
}

.atw-sql2 {
    --atw-explorer-w: 270px;
    --atw-results-h: 260px;
    display: grid;
    flex: 1 1 0;
    grid-template-columns: var(--atw-explorer-w) 6px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-height: 460px;
    border: 1px solid var(--surface-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.atw-split-v,
.atw-split-h {
    position: relative;
    background: var(--surface-border-color);
    touch-action: none;
}

.atw-split-v {
    cursor: col-resize;
}

.atw-split-h {
    flex: 0 0 6px;
    cursor: row-resize;
}

.atw-split-v::after,
.atw-split-h::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 2px;
    background: var(--text-color-muted);
    opacity: 0.45;
}

.atw-split-v::after {
    width: 2px;
    height: 28px;
}

.atw-split-h::after {
    width: 28px;
    height: 2px;
}

.atw-split-v:hover,
.atw-split-h:hover,
.atw-split-v.is-dragging,
.atw-split-h.is-dragging,
.atw-split-v:focus-visible,
.atw-split-h:focus-visible {
    background: color-mix(in srgb, var(--main-color) 45%, var(--surface-border-color));
    outline: none;
}

.atw-explorer {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--surface-color-2);
}

.atw-explorer-head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-bottom: 1px solid var(--surface-border-color);
}

.atw-explorer-search {
    flex: 1 1 auto;
    min-width: 0;
}

.atw-explorer-tree {
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 0;
    overflow: auto;
    font-size: 12.5px;
}

.atw-tn {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding-right: 6px;
    white-space: nowrap;
    cursor: pointer;
}

.atw-tn:hover {
    background: color-mix(in srgb, var(--main-color) 10%, transparent);
}

.atw-tn-caret {
    flex: 0 0 14px;
    color: var(--text-color-muted);
    font-size: 10px;
    text-align: center;
}

.atw-tn-icon {
    flex: 0 0 auto;
    opacity: 0.8;
}

.atw-tn-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.atw-tn.is-leaf .atw-tn-text {
    font-family: Consolas, "Cascadia Code", monospace;
    font-size: 12px;
}

.atw-tn-hint {
    overflow: hidden;
    margin-left: auto;
    padding-left: 6px;
    color: var(--text-color-muted);
    font-size: 11px;
    text-overflow: ellipsis;
}

.atw-tn-action {
    display: none;
    flex: 0 0 auto;
    padding: 0 2px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    line-height: 1;
    cursor: pointer;
}

.atw-tn:hover .atw-tn-action,
.atw-tn-action:focus-visible {
    display: inline-flex;
}

.atw-tn-action:hover {
    background: color-mix(in srgb, var(--main-color) 18%, transparent);
}

.atw-tn-add-wrap,
.atw-tn-del {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: 2px;
}

.atw-tn-del {
    visibility: hidden;
}

.atw-tn:hover .atw-tn-del,
.atw-tn-del:focus-within {
    visibility: visible;
}

.atw-tn .atw-tn-add.dxbl-btn {
    min-height: 0;
    height: 20px;
    padding: 0 3px;
}

.atw-tn.is-automation .atw-tn-text {
    flex: 1 1 auto;
    min-width: 0;
}

.atw-tn-date {
    flex: 0 0 auto;
    min-width: 72px;
    margin-left: auto;
    padding-left: 8px;
    color: var(--text-color-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.atw-automation-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.atw-automation-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.atw-automation-field label {
    color: var(--text-color-muted);
    font-size: 12px;
}

.atw-automation-name .atw-automation-prefix.dxbl-btn {
    border-right: 1px solid var(--surface-border-color);
    border-radius: 0;
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    color: var(--text-color-muted);
    font-family: Consolas, "Cascadia Mono", monospace;
    pointer-events: none;
}

.atw-automation-name input {
    font-family: Consolas, "Cascadia Mono", monospace;
}

.atw-automation-hint,
.atw-automation-error {
    font-size: 12px;
}

.atw-automation-hint {
    color: var(--text-color-muted);
}

.atw-automation-error {
    color: var(--bs-danger, #dc3545);
}

.atw-automation-meta {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
    padding: 8px 8px 6px;
    border-bottom: 1px solid var(--surface-border-color);
}

.atw-automation-meta label {
    color: var(--text-color-muted);
    font-size: 12px;
}

.atw-automation-meta-box {
    width: 100%;
}

.atw-automation-guard {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--surface-border-color);
    font-size: 0.8125rem;
}

.atw-automation-guard.is-ok {
    background: color-mix(in srgb, #3f9a5a 12%, var(--surface-color));
}

.atw-automation-guard.is-ok .icon-bs-check-circle-fill {
    color: #3f9a5a;
}

.atw-automation-guard.is-error {
    background: color-mix(in srgb, var(--bs-danger, #dc3545) 12%, var(--surface-color));
}

.atw-automation-guard.is-error .icon-bs-x-circle-fill {
    color: var(--bs-danger, #dc3545);
}

.atw-popup-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.atw-popup-actions > .dxbl-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.atw-delete {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.atw-delete-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-danger, #dc3545) 16%, transparent);
    color: var(--bs-danger, #dc3545);
}

.atw-delete-title {
    margin-bottom: 4px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.atw-explorer-foot {
    padding: 3px 8px;
    border-top: 1px solid var(--surface-border-color);
    color: var(--text-color-muted);
    font-size: 11px;
}

.atw-ed-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--surface-color);
}

.atw-edtabs {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    border-bottom: 1px solid var(--surface-border-color);
    background: var(--surface-color-2);
    font-size: 12.5px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.atw-edtab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid var(--surface-border-color);
    background: transparent;
    color: var(--text-color);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.atw-edtab.is-active {
    background: var(--surface-color);
    box-shadow: inset 0 2px 0 var(--main-color);
}

.atw-edtab:focus-visible,
.atw-edtab-new:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: -2px;
}

.atw-edtab.is-dragged {
    opacity: 0.5;
}

.atw-edtab.is-renaming {
    cursor: default;
}

.atw-edtab-rename {
    width: 160px;
    padding: 1px 6px;
    border: 2px solid var(--main-color);
    border-radius: 3px;
    background: var(--surface-color);
    color: var(--text-color);
    font: inherit;
}

.atw-edtab-pin {
    flex: 0 0 auto;
    opacity: 0.7;
}

.atw-edtab-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.atw-edtab-dot {
    flex: 0 0 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--main-color);
}

.atw-edtab-alert {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--admin-env-border);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.atw-edtab-close {
    padding: 0 3px;
    border-radius: 3px;
    color: var(--text-color-muted);
}

.atw-edtab-close:hover {
    background: color-mix(in srgb, var(--text-color) 12%, transparent);
    color: var(--text-color);
}

.atw-edtab-new {
    flex: 0 0 32px;
    border: 0;
    background: transparent;
    color: var(--text-color-muted);
    font-size: 16px;
    cursor: pointer;
}

.atw-edtab-new:hover {
    color: var(--text-color);
}

.atw-server-changed {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--admin-env-border);
    background: var(--admin-env-bg);
    color: var(--admin-env-text);
    font-size: 12.5px;
}

.atw-server-changed-text {
    flex: 1 1 260px;
}

.atw-sqlbar {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--surface-border-color);
}

.atw-bar-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
    border-right: 1px solid var(--surface-border-color);
}

.atw-run-group > .dxbl-btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.atw-run-more,
.atw-run-more > .dxbl-btn {
    margin-left: -4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.atw-seg {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.atw-seg-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--surface-border-color);
    background: var(--surface-color);
    color: var(--text-color-muted);
    font-size: 12.5px;
    cursor: pointer;
}

.atw-seg-item:first-child {
    border-radius: 5px 0 0 5px;
}

.atw-seg-item:last-child {
    margin-left: -1px;
    border-radius: 0 5px 5px 0;
}

.atw-seg-item.is-on {
    position: relative;
    border-color: var(--main-color);
    background: color-mix(in srgb, var(--main-color) 14%, var(--surface-color));
    color: var(--text-color);
    font-weight: 600;
}

.atw-seg-item:focus-visible {
    position: relative;
    outline: 2px solid var(--main-color);
    outline-offset: 1px;
}

.atw-bar-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.atw-bar-limit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.atw-bar-limit > label {
    cursor: pointer;
}

.atw-limit-combo {
    width: 96px;
}

.atw-sqlbar + .atw-save-template {
    margin: 6px 8px 0;
}

.atw-editor2 {
    display: flex;
    flex: 1 1 auto;
    min-height: 120px;
    overflow: hidden;
}

.atw-editor-host {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
}

.atw-editor-host > .atw-monaco {
    position: absolute;
    inset: 0;
}

.atw-ai-fab {
    position: absolute;
    right: 24px;
    bottom: 14px;
    z-index: 6;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.atw-ai-panel {
    display: flex;
    flex: 0 0 clamp(300px, 36%, 480px);
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-left: 1px solid var(--surface-border-color);
    background: var(--surface-color);
    animation: atw-ai-slide-in 0.18s ease-out;
}

@keyframes atw-ai-slide-in {
    from {
        opacity: 0;
        transform: translateX(28px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.atw-ai-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--surface-border-color);
    background: var(--surface-color-2);
    font-size: 12.5px;
}

.atw-ai-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.atw-ai-head-actions {
    display: inline-flex;
    gap: 6px;
}

.atw-ai-messages {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 8px;
    overflow-y: auto;
}

.atw-ai-message {
    max-width: 94%;
    padding: 6px 10px;
    border: 1px solid var(--surface-border-color);
    border-radius: 10px;
    background: var(--surface-color-2);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.atw-ai-message.is-user {
    align-self: flex-end;
    border-color: transparent;
    background: var(--bs-primary-bg-subtle, #dbe7fb);
}

.atw-ai-message.is-assistant {
    align-self: flex-start;
}

.atw-ai-message.is-error {
    border-color: var(--bs-danger, #dc3545);
    color: var(--bs-danger, #dc3545);
}

.atw-ai-text {
    margin: 2px 0;
    white-space: pre-wrap;
}

.atw-ai-code {
    margin: 4px 0;
    padding: 6px 8px;
    border: 1px solid var(--surface-border-color);
    border-radius: 6px;
    background: var(--surface-color);
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 12px;
    white-space: pre-wrap;
    overflow-x: auto;
}

.atw-ai-proposal {
    margin: 6px 0 2px;
    padding: 6px;
    border: 1px dashed var(--surface-border-color);
    border-radius: 8px;
}

.atw-ai-proposal.is-applied {
    border-style: solid;
    opacity: 0.8;
}

.atw-ai-proposal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.atw-ai-applied {
    color: var(--bs-success, #198754);
    font-size: 11.5px;
}

.atw-ai-usage {
    margin-top: 4px;
    color: var(--text-color-muted);
    font-size: 11px;
}

.atw-ai-busy {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color-muted);
    font-size: 12px;
}

.atw-ai-prompt {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    padding: 8px;
    border-top: 1px solid var(--surface-border-color);
}

.atw-ai-prompt-box {
    width: 100%;
}

.atw-ed-col > .atw-banner {
    flex: 0 0 auto;
    margin: 6px 8px;
}

.atw-results2 {
    display: flex;
    flex: 0 0 var(--atw-results-h);
    flex-direction: column;
    min-height: 80px;
    padding: 4px 8px 0;
    overflow: hidden;
}

.atw-results-empty {
    padding: 10px 2px;
    font-size: 12.5px;
}

.atw-statusbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 14px;
    padding: 3px 10px;
    border-top: 1px solid var(--surface-border-color);
    background: var(--surface-color-2);
    color: var(--text-color-muted);
    font-size: 11.5px;
}

.atw-statusbar > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atw-statusbar .is-ok {
    color: var(--admin-env-test-text);
}

.atw-statusbar .is-error {
    color: var(--admin-env-text);
}

.atw-statusbar-right {
    flex: 0 0 auto;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.atw-diff-summary {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid var(--surface-border-color);
    border-radius: 6px;
    background: var(--surface-color-2);
    font-size: 13px;
}

.atw-diff-summary p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.atw-diff-summary-icon {
    flex: 0 0 auto;
    margin-top: 2px;
}

.atw-diff-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--text-color-muted);
    font-size: 12px;
    font-weight: 600;
}

.atw-diff-editor,
.atw-diff-editor > div {
    width: 100%;
    height: min(62vh, 560px);
}

.atw-objhist-grid {
    height: 214px;
    margin-bottom: 10px;
}

.atw-objhist-diff,
.atw-objhist-diff > div {
    width: 100%;
    height: min(46vh, 420px);
}

.atw-chg-added,
.atw-chg-modified {
    width: 4px !important;
    margin-left: 3px;
}

.atw-chg-added {
    background: #3fa34d;
}

.atw-chg-modified {
    background: #3b82d6;
}

.atw-chg-deleted-above,
.atw-chg-deleted-below {
    width: 7px !important;
    margin-left: 3px;
    background-repeat: no-repeat;
    background-size: 7px 7px;
}

.atw-chg-deleted-above {
    background-image: linear-gradient(135deg, #e5484d 50%, transparent 50%);
    background-position: left top;
}

.atw-chg-deleted-below {
    background-image: linear-gradient(45deg, #e5484d 50%, transparent 50%);
    background-position: left bottom;
}

.atw-tn-history {
    margin-left: auto;
}

@media (max-width: 900px) {
    .atw-sql2 {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .atw-explorer {
        max-height: 220px;
    }

    .atw-split-v {
        display: none;
    }
}

.atw-sql-field {
    min-height: 140px;
    border: 1px solid var(--surface-border-color);
    border-radius: 6px;
    overflow: hidden;
    resize: vertical;
}

.atw-unsafe {
    display: flex;
    gap: 14px;
    font-size: 13px;
}

.atw-unsafe-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.atw-unsafe p {
    margin: 0;
}

.atw-unsafe-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.atw-unsafe-list li {
    padding: 6px 10px;
    border: 1px solid var(--surface-border-color);
    border-radius: 6px;
    background: var(--surface-color-2);
    overflow-wrap: anywhere;
}

.atw-unsafe-list code {
    color: var(--admin-env-text);
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 12.5px;
    font-weight: 600;
    white-space: pre-wrap;
}

.atw-rec-row > span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: visible;
}

.atw-rec-row > span:first-child > span {
    top: 0;
}

.atw-qa-delete-confirm {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid var(--admin-env-border);
    border-radius: 6px;
    background: var(--admin-env-bg);
    color: var(--admin-env-text);
    font-size: 12.5px;
}

.send-parameters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1.5rem;
    align-items: stretch;
}

    .send-parameters::after {
        content: "";
        grid-column: 1 / -1;
        order: 1;
        height: 0;
    }

.send-parameter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 0.35rem;
    align-items: start;
    min-width: 0;
    order: 2;
}

.send-parameter.is-flag {
    grid-template-rows: auto;
    align-items: center;
    order: 0;
}

@media (max-width: 767.98px) {
    .send-parameters {
        grid-template-columns: minmax(0, 1fr);
    }
}

.inpost-map-marker {
    background: transparent;
    border: none;
}

.inpost-pin {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    border: 2px solid #ffffff;
    background-color: var(--main-color, #c46024);
}

.inpost-center-pin {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    background-color: #1f6feb;
    box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.3), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.inpost-pin-selected {
    border-color: var(--main-color, #c46024);
    background-color: #ffce09;
}

html[data-bs-theme="dark"] .inpost-pin {
    background-color: var(--row-focus-color, #d9772f);
    border-color: rgba(0, 0, 0, 0.55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

html[data-bs-theme="dark"] .inpost-pin-selected {
    border-color: var(--row-focus-color, #d9772f);
    background-color: #ffce09;
}

.send-shell {
    display: grid;
    gap: 1rem;
    align-items: start;
    width: 100%;
    margin-top: 1rem;
}

    .send-shell.send-shell-wide {
        grid-template-columns: minmax(0, 1fr) 22rem;
    }

    .send-shell.send-shell-compact {
        grid-template-columns: minmax(0, 1fr);
    }

.send-main {
    min-width: 0;
    padding-bottom: 1rem;
}

.send-stack {
    display: grid;
    gap: 1rem;
}

.send-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.send-col {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.send-trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.send-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--surface-color);
    border: 1px solid var(--surface-border-color);
    border-radius: 0.5rem;
    color: var(--text-color);
}

.send-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-height: 2.75rem;
    padding: 0.4rem 0.9rem;
    border-bottom: 1px solid var(--surface-border-color);
}

.send-card.is-collapsed > .send-card-header {
    border-bottom-color: transparent;
}

.send-card-title,
.send-card-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    font-size: 0.95rem;
    color: inherit;
}

    .send-card-title b,
    .send-card-toggle b {
        font-weight: 700;
        white-space: nowrap;
    }

.send-card-toggle {
    flex: 1 1 auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.send-ic {
    flex: none;
    color: var(--main-color);
}

.send-chevron {
    display: inline-flex;
    margin-left: auto;
    color: var(--text-color-muted);
    transition: transform 0.15s;
}

.send-card.is-collapsed .send-chevron {
    transform: rotate(-90deg);
}

.send-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.send-card-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.9rem;
}

.send-card.is-collapsed > .send-card-body {
    display: none;
}

.send-card-text {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.send-card .dxbl-grid {
    width: 100%;
}

.send-subh {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-color-muted);
}

.send-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--surface-border-color);
    border-radius: 0.4rem;
    background: var(--surface-color-2);
    color: var(--text-color-muted);
    font-size: 0.82rem;
}

    .send-hint b {
        color: var(--text-color);
    }

.send-amount {
    display: flex;
    gap: 0.25rem;
    width: 100%;
}

    .send-amount > :first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .send-amount > :last-child {
        flex: 0 0 6.5rem;
        width: 6.5rem;
    }

.send-split-card {
    border-radius: 0.5rem;
    border-color: var(--surface-border-color);
    background: var(--surface-color);
    color: var(--text-color);
}

.send-split-card .bg-light {
    background: var(--surface-color-2) !important;
    border-radius: 0.5rem;
}

.send-panel {
    position: sticky;
    top: 0.75rem;
    min-width: 0;
    max-height: calc(100vh - 1.5rem);
    overflow-y: auto;
}

.send-panel-card {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    background: var(--surface-color);
    border: 1px solid var(--main-color);
    border-radius: 0.5rem;
    color: var(--text-color);
}

.send-panel-title {
    font-weight: 700;
    font-size: 1rem;
}

.send-kv {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.4rem 0.75rem;
    margin: 0;
    font-size: 0.85rem;
}

    .send-kv dt {
        color: var(--text-color-muted);
        font-weight: 400;
        overflow-wrap: break-word;
    }

    .send-kv dd {
        margin: 0;
        min-width: 0;
        font-weight: 600;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .send-kv.stacked {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }

        .send-kv.stacked dd {
            margin-bottom: 0.35rem;
        }

    .send-kv .is-missing,
    .send-bar .is-missing,
    .send-panel .is-missing {
        color: var(--send-danger, #c0392b);
    }

.send-hub {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
    border: 1px dashed var(--surface-border-color);
    border-radius: 0.5rem;
    background: var(--surface-color-2);
}

.send-hub-title {
    font-weight: 700;
    font-size: 0.85rem;
}

.send-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.send-generate {
    width: 100%;
    min-height: 2.9rem;
    font-size: 1rem;
    font-weight: 600;
}

.send-reasons {
    --send-danger: #c0392b;
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--send-danger);
    font-size: 0.82rem;
}

    .send-reasons li {
        display: flex;
        align-items: flex-start;
        gap: 0.4rem;
        min-width: 0;
    }

    .send-reasons .send-ic {
        margin-top: 0.15rem;
        color: inherit;
    }

    .send-reasons span {
        min-width: 0;
        overflow-wrap: break-word;
    }

html[data-bs-theme="dark"] .send-reasons,
html[data-bs-theme="dark"] .send-panel,
html[data-bs-theme="dark"] .send-bar {
    --send-danger: #f0877e;
}

.send-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    background: var(--surface-color);
    border-top: 2px solid var(--main-color);
    border-radius: 0.5rem 0.5rem 0 0;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18);
    color: var(--text-color);
}

.send-bar-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    font-size: 0.85rem;
}

.send-chip {
    display: inline-flex;
    gap: 0.4rem;
    align-items: baseline;
    min-width: 0;
}

    .send-chip i {
        font-style: normal;
        color: var(--text-color-muted);
    }

    .send-chip b {
        font-weight: 600;
    }

.send-bar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: center;
}

    .send-bar-actions .send-hub {
        grid-template-columns: auto auto;
        align-items: center;
        gap: 0.2rem 0.75rem;
        padding: 0.35rem 0.7rem;
    }

    .send-bar-actions .send-hub .send-kv {
        display: none;
    }

.send-bar-go {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-left: auto;
}

    .send-bar-go .send-generate {
        width: auto;
        min-width: 10rem;
    }

@media (max-width: 991.98px) {
    .send-cols,
    .send-trio {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .send-bar-summary {
        display: none;
    }

    .send-bar-go {
        width: 100%;
        margin-left: 0;
    }

        .send-bar-go .send-generate {
            flex: 1 1 auto;
        }
}

.send-pghead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 0.25rem;
}

.send-pgtitle {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.send-pgsearch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.send-pgsearch-input {
    width: 15rem;
}

.send-strip-card {
    width: 100%;
    margin-top: 1rem;
}

.send-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.1rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.85rem;
}

.send-strip-id {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.send-strip-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--main-color);
    font-size: 0.85rem;
    cursor: pointer;
}

.send-strip-card.is-open .send-chevron {
    transform: rotate(180deg);
}

.send-strip-details {
    display: none;
    padding: 0.9rem;
    border-top: 1px solid var(--surface-border-color);
}

.send-strip-card.is-open .send-strip-details {
    display: block;
}

.send-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--surface-border-color);
    background: var(--surface-color-2);
    color: var(--text-color-muted);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.send-badge-warn {
    border-color: var(--warning-color);
    color: var(--text-color);
    background: color-mix(in srgb, var(--warning-color) 22%, transparent);
}

.send-quote {
    padding: 0.55rem 0.8rem;
    border-left: 3px solid var(--warning-color);
    border-radius: 0 0.4rem 0.4rem 0;
    background: color-mix(in srgb, var(--warning-color) 18%, transparent);
    font-size: 0.88rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.send-empty {
    color: var(--text-color-muted);
    font-size: 0.85rem;
}

.send-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    max-width: 34rem;
    margin: 3rem auto;
    padding: 2.5rem 2rem;
    text-align: center;
}

.send-start-icon {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 0.4rem;
    border-radius: 50%;
    color: var(--main-color);
    background: color-mix(in srgb, var(--main-color) 12%, transparent);
}

.send-start-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.send-start-text {
    margin: 0;
    color: var(--text-color-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    text-wrap: balance;
}

.send-start .dxbl-btn {
    margin-top: 0.6rem;
}

.send-grid-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    color: var(--text-color-muted);
    font-size: 0.82rem;
}

.send-card .dxbl-grid .dxbl-grid-table {
    width: 100% !important;
}

.send-split {
    margin-top: 1rem;
}

.send-kv {
    grid-template-columns: max-content minmax(0, 1fr);
}

    .send-kv dt {
        white-space: nowrap;
    }

    .send-kv.stacked {
        grid-template-columns: minmax(0, 1fr);
    }

.send-chip i {
    white-space: nowrap;
}

.send-printer-body {
    min-height: 9rem;
}

.send-strip {
    flex-wrap: nowrap;
}

.send-strip-id {
    flex: 0 0 auto;
    white-space: nowrap;
}

.send-strip-facts {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.4rem 1.1rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

    .send-strip-facts .send-chip {
        flex: 0 0 auto;
    }

.send-strip-toggle {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 1599.98px) {
    .send-strip-facts .send-chip:nth-last-child(-n+1) {
        display: none;
    }
}

@media (max-width: 1299.98px) {
    .send-strip-facts .send-chip:nth-last-child(-n+3) {
        display: none;
    }
}

.dxbl-modal:has(.send-package-popup) .dxbl-popup,
.dxbl-modal .dxbl-popup.send-package-popup,
.dxbl-modal.send-package-popup .dxbl-popup {
    --dxbl-popup-max-width: min(1100px, 96vw);
    --dxbl-popup-width: min(1100px, 96vw);
    width: min(1100px, 96vw);
    max-width: min(1100px, 96vw) !important;
}

.send-package-popup .dxbl-modal-content {
    min-width: 0;
}

.send-package-panes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 1rem;
    align-items: start;
}

.send-package-form,
.send-package-items {
    min-width: 0;
}

.send-package-items {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.send-package-items-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.send-package-items-list {
    display: flex;
    flex-direction: column;
    max-height: 16.5rem;
    overflow-y: auto;
    border: 1px solid var(--surface-border-color);
    border-radius: 0.5rem;
    background: var(--surface-color);
}

.send-package-item {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--surface-border-color);
    cursor: pointer;
}

    .send-package-item:hover {
        background: color-mix(in srgb, var(--main-color) 6%, transparent);
    }

    .send-package-item:focus-visible {
        outline: 2px solid var(--main-color);
        outline-offset: -2px;
    }

    .send-package-item:last-child {
        border-bottom: 0;
    }

    .send-package-item.is-picked,
    .send-package-item.is-picked:hover {
        background: color-mix(in srgb, var(--main-color) 10%, transparent);
    }

.send-package-item-image {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border: 1px solid var(--surface-border-color);
    border-radius: 0.4rem;
    background: var(--surface-color-2);
    color: var(--text-color-muted);
}

    .send-package-item-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.send-package-item-info {
    min-width: 0;
}

.send-package-item-title,
.send-package-item-meta {
    min-width: 0;
    overflow-wrap: anywhere;
}

.send-package-item-title {
    line-height: 1.3;
}

.send-package-item-code {
    margin-right: 0.4rem;
    font-weight: 600;
}

.send-package-item-meta {
    color: var(--text-color-muted);
    font-size: 0.78rem;
}

    .send-package-item-meta > span:not(:last-child)::after {
        content: " · ";
        white-space: pre;
    }

.send-package-item-pick {
    cursor: default;
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    gap: 0.6rem;
}

.send-package-item-qty {
    display: grid;
    flex: 0 0 6.5rem;
    gap: 0.15rem;
    width: 6.5rem;
    color: var(--text-color-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

.send-package-item-spin {
    width: 6.5rem;
    min-width: 6.5rem;
}

.send-package-items-total {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    color: var(--text-color-muted);
    font-size: 0.85rem;
}

@media (max-width: 879.98px) {
    .send-package-panes {
        grid-template-columns: minmax(0, 1fr);
    }
}

:root {
    --send-bulk-ok: #2c8a54;
    --send-bulk-ok-bg: rgba(44, 138, 84, 0.12);
    --send-bulk-err: #c0392b;
    --send-bulk-err-bg: rgba(192, 57, 43, 0.1);
    --send-bulk-warn: #a8741a;
    --send-bulk-warn-bg: rgba(224, 166, 58, 0.2);
}

html[data-bs-theme="dark"] {
    --send-bulk-ok: #53b87a;
    --send-bulk-ok-bg: rgba(83, 184, 122, 0.15);
    --send-bulk-err: #e5645a;
    --send-bulk-err-bg: rgba(229, 100, 90, 0.15);
    --send-bulk-warn: #e0a63a;
    --send-bulk-warn-bg: rgba(224, 166, 58, 0.16);
}

.send-bulk-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--main-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--main-color) 14%, transparent);
    color: var(--text-color);
    font-size: 0.82rem;
}

.send-bulk-strip {
    position: sticky;
    top: 0;
    z-index: 25;
    display: grid;
    gap: 0.65rem;
    width: 100%;
    margin: 0.5rem 0 0.9rem;
    padding: 0.75rem 0.9rem;
    background: var(--surface-color);
    border: 1px solid var(--surface-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    color: var(--text-color);
}

.send-bulk-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1.1rem;
}

.send-bulk-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
}

    .send-bulk-headline small {
        color: var(--text-color-muted);
        font-size: 0.8rem;
        font-weight: 500;
    }

.send-bulk-counters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    color: var(--text-color-muted);
    font-size: 0.82rem;
}

    .send-bulk-counters b {
        color: var(--text-color);
    }

.send-bulk-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

    .send-bulk-dot::before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: var(--surface-border-color);
    }

    .send-bulk-dot.is-done::before {
        background: var(--send-bulk-ok);
    }

    .send-bulk-dot.is-error::before {
        background: var(--send-bulk-err);
    }

    .send-bulk-dot.is-skipped::before {
        background: var(--send-bulk-warn);
    }

.send-bulk-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

    .send-bulk-nav .dxbl-btn,
    .send-bulk-extras .dxbl-btn,
    .send-bulk-sechead .dxbl-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
    }

.send-bulk-progress {
    display: flex;
    height: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-color-2);
}

    .send-bulk-progress i {
        display: block;
        height: 100%;
    }

    .send-bulk-progress .is-done {
        background: var(--send-bulk-ok);
    }

    .send-bulk-progress .is-error {
        background: var(--send-bulk-err);
    }

    .send-bulk-progress .is-skipped {
        background: var(--send-bulk-warn);
    }

.send-bulk-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 7rem;
    padding: 2px;
    overflow-y: auto;
}

.send-bulk-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 2.1rem;
    height: 1.6rem;
    padding: 0 0.3rem;
    border: 1px solid var(--surface-border-color);
    border-radius: 4px;
    background: var(--surface-color-2);
    color: var(--text-color-muted);
    font-family: inherit;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

    .send-bulk-cell:disabled {
        cursor: not-allowed;
        opacity: 0.6;
    }

    .send-bulk-cell:focus-visible {
        outline: 2px solid var(--main-color);
        outline-offset: 2px;
    }

    .send-bulk-cell.is-done {
        border-color: var(--send-bulk-ok);
        background: var(--send-bulk-ok-bg);
        color: var(--send-bulk-ok);
    }

    .send-bulk-cell.is-error {
        border-color: var(--send-bulk-err);
        background: var(--send-bulk-err-bg);
        color: var(--send-bulk-err);
    }

    .send-bulk-cell.is-skipped {
        border-color: var(--send-bulk-warn);
        background: var(--send-bulk-warn-bg);
        color: var(--send-bulk-warn);
    }

    .send-bulk-cell.is-current {
        border-color: var(--main-color);
        background: var(--main-color);
        color: #fff;
    }

    .send-bulk-cell.is-selected {
        outline: 2px solid var(--main-color);
        outline-offset: 1px;
    }

.send-bulk-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    margin-bottom: 0.25rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--surface-border-color);
    border-left: 3px solid var(--main-color);
    border-radius: 0.4rem;
    background: var(--surface-color);
    color: var(--text-color-muted);
    font-size: 0.85rem;
}

    .send-bulk-note .send-ic {
        margin-top: 0.15rem;
    }

    .send-bulk-note b {
        color: var(--text-color);
    }

    .send-bulk-note a {
        color: var(--main-color);
        text-decoration: underline;
    }

    .send-bulk-note.is-error {
        border-left-color: var(--send-bulk-err);
        background: var(--send-bulk-err-bg);
        color: var(--text-color);
    }

        .send-bulk-note.is-error .send-ic {
            color: var(--send-bulk-err);
        }

    .send-bulk-note.is-done {
        border-left-color: var(--send-bulk-ok);
        background: var(--send-bulk-ok-bg);
        color: var(--text-color);
    }

        .send-bulk-note.is-done .send-ic {
            color: var(--send-bulk-ok);
        }

.send-bulk-extras {
    display: grid;
    gap: 0.5rem;
}

.send-bulk-after {
    color: var(--text-color-muted);
    font-size: 0.78rem;
    text-align: center;
}

.send-bar-go .send-bulk-extras {
    min-width: 12rem;
}

.send-bulk-done-card {
    width: 100%;
}

.send-bulk-table,
.send-bulk-summary {
    width: 100%;
}

.send-bulk-summary {
    padding-bottom: 2.5rem;
}

.send-bulk-table {
    margin-top: 1.25rem;
}

.send-bulk-sechead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 1rem 0 0.5rem;
}

    .send-bulk-sechead h4 {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
    }

.send-bulk-table .send-bulk-sechead {
    margin-top: 0;
}

.send-bulk-grid:not(.is-static) .dxbl-grid-table tbody tr {
    cursor: pointer;
}

.send-bulk-grid .send-bulk-row-selected > td {
    background: color-mix(in srgb, var(--main-color) 14%, transparent) !important;
}

.send-bulk-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

    .send-bulk-badge.is-pending {
        border-color: var(--surface-border-color);
        background: var(--surface-color-2);
        color: var(--text-color-muted);
    }

    .send-bulk-badge.is-current {
        background: var(--main-color);
        color: #fff;
    }

    .send-bulk-badge.is-done {
        background: var(--send-bulk-ok-bg);
        color: var(--send-bulk-ok);
    }

    .send-bulk-badge.is-error {
        background: var(--send-bulk-err-bg);
        color: var(--send-bulk-err);
    }

    .send-bulk-badge.is-skipped {
        background: var(--send-bulk-warn-bg);
        color: var(--send-bulk-warn);
    }

.send-bulk-error-text {
    color: var(--send-bulk-err);
    white-space: normal;
}

.send-bulk-result {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
}

.send-bulk-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--main-color);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

    .send-bulk-link:hover {
        text-decoration: underline;
    }

.send-bulk-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.9rem 0;
}

.send-bulk-stat {
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--surface-border-color);
    border-radius: 0.5rem;
    background: var(--surface-color);
    color: var(--text-color);
}

    .send-bulk-stat b {
        display: block;
        font-size: 1.8rem;
        line-height: 1.1;
    }

    .send-bulk-stat span {
        color: var(--text-color-muted);
        font-size: 0.82rem;
    }

    .send-bulk-stat.is-done b {
        color: var(--send-bulk-ok);
    }

    .send-bulk-stat.is-error b {
        color: var(--send-bulk-err);
    }

    .send-bulk-stat.is-skipped b {
        color: var(--send-bulk-warn);
    }

.send-bulk-skipped {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
}

@media (max-width: 991.98px) {
    .send-bulk-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}