/* Center the loader */
#loader {
    position: absolute;
    left: 40%;
    top: 20%;
    z-index: 1;
    width: 60px;
    height: 60px;
    /* margin: -76px 0 0 -76px; */
    border: 6px solid grey;
    border-radius: 50%;
    border-top: 6px solid lawngreen;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Keep standalone Telerik actions consistent without rounding joined controls. */
.k-button:not(.k-input-button):not(:where(.k-button-group, .k-split-button) .k-button) {
    border-radius: 5px !important;
}

.customer-detail-action-bar button:not(.k-button) {
    border-radius: 5px !important;
}

.custom-bt-save,
.k-button.custom-bt-save,
.k-button.k-button-solid.custom-bt-save,
.k-button.k-button-solid.k-button-primary.custom-bt-save,
.k-button.k-button-solid.k-button-base.custom-bt-save {
    background-color: #9ccc65;
    color: #fff;
    border: none;
    border-color: transparent;
}

    .custom-bt-save:hover,
    .k-button.custom-bt-save:hover,
    .k-button.custom-bt-save.k-hover,
    .k-button.k-button-solid.custom-bt-save:hover,
    .k-button.k-button-solid.custom-bt-save.k-hover,
    .k-button.k-button-solid.k-button-primary.custom-bt-save:hover,
    .k-button.k-button-solid.k-button-primary.custom-bt-save.k-hover,
    .k-button.k-button-solid.k-button-base.custom-bt-save:hover {
        background-color: #82c23c;
        color: #fff;
        border-color: transparent;
    }

/* Warehouse label designer */
.warehouse-label-page {
    --label-accent: #28578f;
    --label-accent-soft: #eef3f8;
    --label-ink: #1f2937;
    --label-muted: #6b7280;
    --label-line: #e5e7eb;
    width: 100%;
    max-width: 1280px;
    margin: 0;
    padding: 0 0 42px;
    color: var(--label-ink);
}

.warehouse-label-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 16px 18px;
    border: 1px solid var(--label-line);
    border-radius: 10px;
    background: linear-gradient(90deg, var(--label-accent-soft) 0%, #fff 42%);
    box-shadow: none;
}

.warehouse-label-header::before {
    content: none;
}

.warehouse-label-header-mark {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 10px;
    background: var(--label-accent);
    box-shadow: none;
}

.warehouse-label-header-mark span {
    position: relative;
    display: block;
    width: 24px;
    height: 15px;
    border: 2px solid #fff;
    border-radius: 2px;
}

.warehouse-label-header-mark span::after {
    position: absolute;
    right: 4px;
    bottom: 3px;
    left: 4px;
    height: 2px;
    background: rgba(255, 255, 255, .85);
    content: "";
}

.warehouse-label-header-copy {
    min-width: 0;
}

.warehouse-label-header h1 {
    margin: 2px 0 4px;
    color: #181c36;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

.warehouse-label-header p,
.warehouse-label-card-header p {
    margin: 0;
    color: var(--label-muted);
}

.warehouse-label-eyebrow {
    color: var(--label-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.warehouse-label-workspace {
    display: grid;
    grid-template-columns: minmax(340px, .82fr) minmax(500px, 1.18fr);
    gap: 20px;
    align-items: start;
}

.warehouse-label-card {
    overflow: hidden;
    border: 1px solid var(--label-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 41, 55, .06);
}

.warehouse-label-editor,
.warehouse-label-preview-card {
    padding: 22px;
}

.warehouse-label-preview-card {
    position: sticky;
    top: 18px;
}

.warehouse-label-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: -22px -22px 22px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--label-line);
    background: linear-gradient(90deg, var(--label-accent-soft) 0%, #fff 42%);
}

.warehouse-label-card-header h2 {
    margin: 0 0 3px;
    color: #181c36;
    font-size: 16px;
    font-weight: 700;
}

.warehouse-label-card-header p {
    font-size: 12px;
}

.warehouse-label-step {
    display: grid;
    flex: 0 0 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: var(--label-accent-soft);
    color: #28578f;
    font-size: 13px;
    font-weight: 700;
}

.warehouse-label-form {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.warehouse-label-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.warehouse-label-field label {
    color: #374151;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
}

.warehouse-label-locked-article {
    padding: 8px 10px;
    border: 1px solid var(--label-line);
    border-radius: 8px;
    background: #f8fafc;
    color: #181c36;
    font-size: 13px;
    font-weight: 600;
}

.warehouse-label-sync-note {
    color: #6b7280;
    font-size: 11px;
    font-weight: 500;
}

.warehouse-label-field .k-input,
.warehouse-label-field .k-picker {
    width: 100%;
    height: 32px;
    min-height: 32px;
    align-self: start;
    box-sizing: border-box;
}

.warehouse-label-optional {
    margin-left: 5px;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
}

.warehouse-label-divider {
    height: 1px;
    margin: 2px 0 0;
    background: var(--label-line);
}

.warehouse-label-fields-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.warehouse-label-measure {
    display: flex;
    gap: 8px;
    min-width: 0;
}

.warehouse-label-measure > .k-input {
    flex: 1 1 auto;
    min-width: 0;
}

.warehouse-label-measure > .k-dropdownlist {
    flex: 0 0 82px;
    width: 82px;
}

.warehouse-label-selection-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 14px;
    border: 1px dashed #d5dde8;
    border-radius: 10px;
    background: #f6f8fb;
}

.warehouse-label-hint-icon {
    display: grid;
    flex: 0 0 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: var(--label-accent-soft);
    color: #28578f;
    font-size: 11px;
    font-weight: 800;
}

.warehouse-label-selection-hint strong,
.warehouse-label-selection-hint span:not(.warehouse-label-hint-icon) {
    display: block;
}

.warehouse-label-selection-hint strong {
    margin-bottom: 2px;
    font-size: 13px;
}

.warehouse-label-selection-hint span:not(.warehouse-label-hint-icon) {
    color: var(--label-muted);
    font-size: 12px;
}

.warehouse-label-preview-stage {
    display: grid;
    min-height: 254px;
    overflow: auto;
    place-items: center;
    padding: 28px;
    border: 1px solid #e1e5e9;
    border-radius: 12px;
    background-color: #f7f8f9;
    background-image: radial-gradient(circle, #c9cfd6 1px, transparent 1.25px);
    background-position: 0 0;
    background-repeat: repeat;
    background-size: 12px 12px;
}

.warehouse-label-preview-stage-large {
    min-height: 354px;
}

.warehouse-label-preview-stage #printpreview {
    flex: 0 0 auto;
    box-shadow: 0 12px 30px rgba(17, 24, 39, .13);
}

.warehouse-label-preview-empty {
    display: grid;
    justify-items: center;
    color: var(--label-muted);
    text-align: center;
}

.warehouse-label-preview-empty strong {
    margin: 14px 0 3px;
    color: #4b5563;
    font-size: 13px;
}

.warehouse-label-preview-empty span {
    font-size: 12px;
}

.warehouse-label-placeholder-sheet {
    width: 160px;
    height: 60px;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(17, 24, 39, .08);
}

.warehouse-label-placeholder-sheet-large {
    width: 190px;
    height: 90px;
}

.warehouse-label-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
}

.warehouse-label-actions > span {
    color: var(--label-muted);
    font-size: 12px;
}

.warehouse-label-page .warehouse-label-print-button.custom-bt-save {
    min-width: 150px;
    min-height: 34px;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: #9ccc65;
    color: #fff;
}

.warehouse-label-page .warehouse-label-print-button.custom-bt-save:hover {
    background: #82c23c;
    color: #fff;
}

.warehouse-label-page .warehouse-label-print-button.custom-bt-save.k-disabled,
.warehouse-label-page .warehouse-label-print-button.custom-bt-save:disabled {
    opacity: .55;
}

@media (max-width: 1050px) {
    .warehouse-label-workspace {
        grid-template-columns: 1fr;
    }

    .warehouse-label-preview-card {
        position: static;
    }
}

@media (max-width: 640px) {
    .warehouse-label-page {
        padding: 0 0 32px;
    }

    .warehouse-label-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .warehouse-label-editor,
    .warehouse-label-preview-card {
        padding: 17px;
    }

    .warehouse-label-card-header {
        margin: -17px -17px 18px;
        padding: 14px 16px;
    }

    .warehouse-label-fields-two {
        grid-template-columns: 1fr;
    }

    .warehouse-label-preview-stage {
        justify-items: start;
        padding: 20px;
    }

    .warehouse-label-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .warehouse-label-page .warehouse-label-print-button.custom-bt-save {
        width: 100%;
    }
}

/* Dropdown item list and detail */
.dropdown-list-page,
.dropdown-design-page {
    --dropdown-accent: #28578f;
    --dropdown-accent-soft: #eef3f8;
    --dropdown-ink: #1f2937;
    --dropdown-muted: #6b7280;
    --dropdown-line: #e5e7eb;
    width: 100%;
    max-width: 1280px;
    margin: 0;
    padding: 0 0 42px;
    color: var(--dropdown-ink);
}

.dropdown-list-header {
    position: relative;
    max-width: 760px;
    margin-bottom: 14px;
    overflow: hidden;
    padding: 12px 14px;
    border: 1px solid var(--dropdown-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}

.dropdown-list-header::before {
    content: none;
}

.dropdown-list-header-wide {
    max-width: 980px;
}

.dropdown-list-heading {
    display: grid;
    gap: 0;
}

.dropdown-list-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.dropdown-design-eyebrow {
    color: var(--dropdown-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.dropdown-design-page .dropdown-detail-eyebrow {
    color: var(--dropdown-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dropdown-list-header h1,
.dropdown-design-page .dropdown-detail-header h1 {
    margin: 2px 0 0;
    color: var(--dropdown-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
}

.dropdown-list-header p,
.dropdown-design-page .dropdown-detail-heading-text > p {
    margin: 0;
    color: var(--dropdown-muted);
    font-size: 14px;
}

.dropdown-list-count {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid #d5dde8;
    border-radius: 999px;
    background: var(--dropdown-accent-soft);
    color: #28578f;
    font-size: 11px;
    font-weight: 600;
}

.dropdown-list-card {
    max-width: 760px;
    overflow: hidden;
    border: 1px solid var(--dropdown-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 41, 55, .06);
}

.dropdown-list-card-wide {
    max-width: 980px;
}

.dropdown-list-page-wide {
    max-width: 1400px;
}

.article-booking-list-page {
    max-width: 1700px;
}

.article-booking-list-page .article-booking-list-card {
    max-width: none;
}

.article-booking-list-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 24px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--dropdown-line);
    background: linear-gradient(90deg, var(--dropdown-accent-soft) 0%, #fff 46%);
}

.article-booking-list-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.article-booking-list-field-article {
    width: 550px;
    max-width: 100%;
}

.article-booking-list-field label {
    margin: 0;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
}

.article-booking-list-article-row,
.article-booking-list-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.article-booking-list-article-row .k-combobox,
.article-booking-list-article-row .k-picker {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.article-booking-list-range-row .k-daterangepicker,
.article-booking-list-range-row .article-booking-daterange-picker {
    flex: 0 0 auto;
    width: 260px;
    max-width: 100%;
}

.article-booking-list-range-row .k-button {
    flex-shrink: 0;
}

.article-booking-daterange-popup-hidden {
    display: none !important;
}

.article-booking-list-page .daterangepicker-no-labels .k-floating-label {
    display: none;
}

.article-booking-list-page .daterangepicker-no-labels .k-floating-label-container {
    padding: 0;
}

.article-booking-list-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 32px 24px;
    color: var(--dropdown-muted);
    font-size: 13px;
    text-align: center;
}

.article-booking-list-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 10px;
}

.invoice-finalization-page {
    max-width: 1400px;
}

.invoice-finalization-page .invoice-finalization-card {
    max-width: 1360px;
}

.invoice-finalization-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.invoice-finalization-toolbar-actions .invoice-finalize-button {
    min-width: 150px;
}

.invoice-finalization-grid .k-table-td:first-child,
.invoice-finalization-grid .k-table-th:first-child {
    text-align: center;
}

.invoice-finalization-grid .k-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #28578f;
}

.invoice-finalization-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    min-height: 62px;
    padding: 12px 16px;
    border-top: 1px solid var(--dropdown-line);
    background: #f8f9fa;
}

.invoice-finalization-summary-item {
    display: grid;
    gap: 2px;
}

.invoice-finalization-summary-item span {
    color: #667085;
    font-size: 11px;
    font-weight: 600;
}

.invoice-finalization-summary-item strong {
    color: #181c36;
    font-size: 14px;
    font-weight: 700;
}

.invoice-finalization-status {
    margin-left: auto;
    padding: 7px 10px;
    border: 1px solid #bbf7d0;
    border-radius: 7px;
    background: #f0fdf4;
    color: #166534;
    font-size: 12px;
    font-weight: 600;
}

.invoice-finalization-status.is-error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.invoice-finalization-confirm {
    display: grid;
    gap: 8px;
}

.invoice-finalization-confirm strong {
    color: #181c36;
    font-size: 14px;
}

.invoice-finalization-confirm p {
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
}

.shipping-confirmation-page {
    max-width: 1240px;
}

.shipping-confirmation-page .shipping-confirmation-card {
    max-width: 1200px;
}

.shipping-confirmation-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shipping-confirmation-send-button {
    min-width: 132px;
}

.shipping-confirmation-grid .row-tracking-missing > td {
    background: #fff !important;
}

.shipping-confirmation-grid .row-tracking-found > td {
    background: #f3fbea !important;
}

.shipping-confirmation-grid .row-tracking-found:hover > td {
    background: #eaf7dc !important;
}

.shipping-confirmation-tracking {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    padding: 2px 7px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #f9fafb;
    color: #667085;
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shipping-confirmation-tracking.is-valid {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.shipping-confirmation-tracking.is-invalid {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.shipping-confirmation-send-confirm {
    display: grid;
    gap: 8px;
}

.shipping-confirmation-send-confirm strong {
    color: #181c36;
    font-size: 14px;
}

.shipping-confirmation-send-confirm p,
.shipping-confirmation-send-success {
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
}

.shipping-confirmation-send-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.shipping-confirmation-send-stat {
    display: grid;
    min-width: 130px;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8f9fa;
}

.shipping-confirmation-send-stat span {
    color: #667085;
    font-size: 11px;
    font-weight: 600;
}

.shipping-confirmation-send-stat strong {
    color: #181c36;
    font-size: 18px;
}

.shipping-confirmation-send-stat.is-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.shipping-confirmation-send-stat.is-success strong {
    color: #166534;
}

.shipping-confirmation-send-stat.is-error {
    border-color: #fecaca;
    background: #fef2f2;
}

.shipping-confirmation-send-stat.is-error strong {
    color: #b91c1c;
}

.bookingitem-list-page {
    max-width: 1340px;
}

.bookingitem-list-page .bookingitem-list-card {
    max-width: 1300px;
}

.bookingitem-list-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bookingitem-list-scope-button {
    min-width: 86px;
    border: 1px solid #d5dde8;
    background: #fff;
    color: #475467;
    box-shadow: none;
    font-size: 12px;
    font-weight: 600;
}

.bookingitem-list-scope-button:hover {
    border-color: #9fb2c8;
    background: #f4f7fb;
    color: #28578f;
}

.bookingitem-list-scope-button.is-active {
    border-color: #28578f;
    background: #28578f;
    color: #fff;
}

.bookingitem-list-scope-button.is-active:hover {
    border-color: #1f4778;
    background: #1f4778;
    color: #fff;
}

.bookingitem-list-grid .k-table-tbody > .k-table-row {
    cursor: pointer;
}

.bookingitem-list-grid .k-table-tbody > .k-table-row:hover > td {
    background: #f4f7fb;
}

.bookingitem-list-grid a {
    color: #28578f;
    font-weight: 600;
    text-decoration: none;
}

.bookingitem-list-grid a:hover {
    text-decoration: underline;
}

.bookingitem-preview-tooltip.k-tooltip,
.bookingitem-preview-tooltip .k-tooltip-content {
    padding: 0;
    border-color: #181818;
    background: #181818;
    color: #fff;
}

.bookingitem-preview-tooltip .k-callout {
    color: #181818;
}

.bookingpreview {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: #fff;
    font-size: 12px;
}

.bookingpreview td,
.bookingpreview td strong {
    color: #fff;
}

.bookingpreview th,
.bookingpreview td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
}

.bookingpreview tr:last-child td {
    border-bottom: 0;
}

.bookingpreview th {
    background: #fff;
    color: #181818;
    font-size: 10px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
}

.offer-list-page {
    max-width: 1240px;
}

.offer-list-page .offer-list-card {
    max-width: 1200px;
}

.offer-list-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.offer-list-grid .k-table-tbody > .k-table-row {
    cursor: pointer;
}

.offer-list-grid .k-table-tbody > .k-table-row:hover > td {
    background: #f4f7fb;
}

.offer-list-number {
    color: #28578f;
    font-weight: 700;
    text-decoration: none;
}

.offer-list-number:hover {
    text-decoration: underline;
}

.offer-list-status {
    display: inline-flex;
    min-width: 62px;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border: 1px solid #d5dde8;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
}

.offer-list-status.is-open {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.offer-list-status.is-denied {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.order-confirmation-list-page,
.invoice-list-page {
    max-width: 1340px;
}

.order-confirmation-list-page .order-confirmation-list-card,
.invoice-list-page .invoice-list-card {
    max-width: 1300px;
}

.booking-document-list-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-confirmation-list-grid .k-table-tbody > .k-table-row,
.invoice-list-grid .k-table-tbody > .k-table-row {
    cursor: pointer;
}

.order-confirmation-list-grid .k-table-tbody > .k-table-row:hover > td,
.invoice-list-grid .k-table-tbody > .k-table-row:hover > td {
    background: #f4f7fb;
}

.booking-document-list-number {
    color: #28578f;
    font-weight: 700;
    text-decoration: none;
}

.booking-document-list-number:hover {
    text-decoration: underline;
}

.order-confirmation-delivery-date.is-overdue {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 10px;
    font-weight: 700;
}

.invoice-list-status {
    display: inline-flex;
    min-width: 58px;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border: 1px solid #d5dde8;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
}

.invoice-list-status.is-booked {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.invoice-list-status.is-open {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.overview-invoices-page {
    max-width: 1240px;
}

.overview-invoices-page .overview-invoices-card {
    max-width: 1200px;
}

.overview-invoices-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 24px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--dropdown-line);
    background: linear-gradient(90deg, var(--dropdown-accent-soft) 0%, #fff 46%);
}

.overview-invoices-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.overview-invoices-field label {
    margin: 0;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
}

.overview-invoices-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.overview-invoices-picker-shell {
    width: 282px;
    min-width: 0 !important;
    max-width: 100%;
    flex: 0 0 282px;
}

.overview-invoices-picker-shell .overview-daterange-picker,
.overview-invoices-picker-shell .k-daterangepicker {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* The range picker keeps a 40px calendar-action slot although its popup is hidden. */
.overview-invoices-range-row > .k-button:first-of-type {
    margin-left: -36px;
}

.overview-invoices-apply-button.k-button {
    box-sizing: border-box !important;
    block-size: 28px !important;
    min-block-size: 28px !important;
    max-block-size: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 9px !important;
    border: 1px solid #28578f;
    border-radius: 7px;
    background: #28578f;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    box-shadow: none;
}

.overview-invoices-apply-button.k-button:hover {
    border-color: #1f456f;
    background: #1f456f;
    color: #fff;
}

.overview-invoices-apply-button.k-button .k-svg-icon {
    width: 14px;
    height: 14px;
    color: currentColor;
}

.overview-daterange-popup-hidden {
    display: none !important;
}

.overview-invoices-page .daterangepicker-no-labels .k-floating-label {
    display: none;
}

.overview-invoices-page .daterangepicker-no-labels .k-floating-label-container {
    padding: 0;
}

.overview-invoices-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.overview-invoices-total {
    padding: 4px 9px;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #f0fdf4;
    color: #166534;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.overview-invoices-export-button {
    box-sizing: border-box !important;
    block-size: 28px !important;
    min-block-size: 28px !important;
    max-block-size: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 10px !important;
    border: 0;
    background: #28578f;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.overview-invoices-export-button .k-svg-icon {
    width: 14px;
    height: 14px;
}

.overview-invoices-export-button:hover {
    background: #1f4778;
    color: #fff;
}

.overview-invoices-grid .k-table-td:nth-last-child(1) {
    font-weight: 600;
}

.workinstruction-list-page {
    max-width: 960px;
}

.workinstruction-list-page .workinstruction-list-card {
    max-width: 920px;
}

.workinstruction-list-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workinstruction-list-grid .k-table-tbody > .k-table-row {
    cursor: pointer;
}

.workinstruction-list-grid .k-table-tbody > .k-table-row:hover > td {
    background: #f4f7fb;
}

.workinstruction-list-number {
    color: #28578f;
    font-weight: 700;
}

.workinstruction-list-date.is-mismatch {
    color: #c2410c;
    font-weight: 700;
}

.workinstruction-list-date.is-overdue {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 10px;
    font-weight: 700;
}

.workinstruction-modal .k-window-content {
    padding: 16px;
}

.workinstruction-detail-page {
    width: 100%;
    max-width: 1275px;
    color: #344054;
}

.workinstruction-detail-header-wrap {
    width: 100%;
}

.workinstruction-detail-page .workinstruction-detail-header {
    width: 100% !important;
    min-height: 64px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #d5dde8;
    border-radius: 10px;
    background: linear-gradient(135deg, #f8fafc 0%, #f3f7fc 100%);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.workinstruction-detail-header-main,
.workinstruction-detail-header-copy,
.workinstruction-detail-header-actions {
    display: flex;
    align-items: center;
}

.workinstruction-detail-header-main {
    gap: 10px;
}

.workinstruction-detail-page .btn-nav-back {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    background: #fff;
    color: #28578f;
    box-shadow: none;
}

.workinstruction-detail-page .btn-nav-back:hover {
    border-color: #28578f;
    background: #28578f;
    color: #fff;
}

.workinstruction-detail-header-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
}

.workinstruction-detail-header-copy > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.workinstruction-detail-header-copy strong {
    color: #181c36;
    font-size: 15px;
    font-weight: 700;
}

.workinstruction-detail-header-copy > div > span {
    color: #667085;
    font-size: 11px;
}

.workinstruction-detail-eyebrow {
    display: inline-flex;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--dropdown-accent-soft);
    color: #28578f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.workinstruction-detail-header-actions {
    gap: 8px;
}

.workinstruction-detail-header-actions a {
    text-decoration: none;
}

.workinstruction-detail-summary {
    display: grid;
    grid-template-columns: minmax(280px, .7fr) minmax(360px, 1.3fr);
    gap: 14px;
    width: 100%;
    margin-top: 14px;
}

.workinstruction-detail-page .workinstruction-detail-card {
    width: 100% !important;
    min-height: 110px;
    margin: 0;
    padding: 16px !important;
    align-items: flex-start !important;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.workinstruction-detail-page .workinstruction-detail-card p {
    margin-top: 0;
}

.workinstruction-detail-page .workinstruction-date-mismatch {
    color: #b91c1c;
}

.workinstruction-detail-page .grid-article-workinstructions {
    width: 100%;
    max-width: none;
    margin-top: 14px;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.workinstruction-detail-page .grid-article-workinstructions .box-row-article {
    min-width: 1180px;
    border-color: #eef0f2;
}

.workinstruction-detail-page .grid-article-workinstructions.with-label-column .box-row-article {
    min-width: 1240px;
}

.workinstruction-detail-page .grid-article-workinstructions .box-row-article.is-label-source {
    background: #eef3f8;
}

.workinstruction-label-section {
    margin-top: 18px;
    padding-bottom: 8px;
}

.workinstruction-detail-page .grid-article-workinstructions .head {
    padding: 9px 8px;
    border-color: #e5e7eb;
    background: #f8f9fa;
    color: #667085;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.workinstruction-detail-page .grid-article-workinstructions .content {
    padding: 10px 8px;
    color: #344054;
}

.workinstruction-detail-page .user-selected {
    min-height: 44px;
    border: 1px solid #bbf7d0;
    border-radius: 7px;
    background: #f0fdf4;
    color: #166534;
}

.workinstruction-detail-page .user-selected:hover {
    background: #dcfce7;
}

.workinstruction-detail-page .box-row-article .prod-dropdown:last-child .user-selected {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.workinstruction-detail-page .box-row-article .prod-dropdown:last-child .user-selected:hover {
    background: #dbeafe;
}

.workinstruction-detail-page .box-row-article .prod-dropdown:last-child .user-selected.batchnumber-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
    padding: 0;
    border: 1px dashed #c7d7eb;
    border-radius: 8px;
    background: #f8fbff;
    color: #28578f;
}

.workinstruction-detail-page .box-row-article .prod-dropdown:last-child .user-selected.batchnumber-add:hover {
    border-color: #7aa2d4;
    background: #eef5fd;
}

.workinstruction-detail-page .user-name,
.workinstruction-detail-page .batchnumber {
    height: auto;
    min-height: 24px;
    margin-top: 3px;
    font-size: 10px;
}

@media (max-width: 900px) {
    .article-booking-list-field-article {
        width: 100%;
    }

    .invoice-finalization-toolbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .invoice-finalization-status {
        width: 100%;
        margin-left: 0;
    }

    .shipping-confirmation-toolbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .bookingitem-list-toolbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .offer-list-toolbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .booking-document-list-toolbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .overview-invoices-toolbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .workinstruction-list-toolbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .workinstruction-detail-summary {
        grid-template-columns: 1fr;
    }
}

.dropdown-list-card .k-grid {
    border: 0;
}

.dropdown-list-card .k-grid-header,
.dropdown-list-card .k-grid-header-wrap,
.dropdown-list-card .k-grid .k-table-th,
.dropdown-list-card .k-grid .k-pager,
.dropdown-list-card .k-grid .k-filter-row > .k-table-th,
.dropdown-list-card .k-grid .k-filter-row > td,
.dropdown-list-card .k-grid .k-filter-row > .k-table-td {
    border-color: #e5e7eb;
    background: #fafafa;
}

.dropdown-list-card .k-grid-header {
    border-bottom-width: 0;
    background: #fafafa;
}

.dropdown-list-card .k-grid .k-grid-header .k-table {
    margin-bottom: 0;
}

.dropdown-list-card .k-grid-header .k-table-th {
    border-bottom: 1px solid #e5e7eb;
}

.dropdown-list-card .k-grid .k-table-td,
.dropdown-list-card .k-grid td {
    border-color: #eef0f2;
}

.dropdown-list-card .k-grid-header .k-table-th,
.dropdown-list-card .k-grid-header .k-table-th > .k-link {
    color: #4b5563;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .25px;
}

.dropdown-list-card .k-grid .k-toolbar {
    padding-top: 16px;
    padding-bottom: 16px;
    border-color: var(--dropdown-line);
    background: linear-gradient(90deg, var(--dropdown-accent-soft) 0%, #fff 42%);
}

.dropdown-list-card .k-grid .k-pager {
    border-color: var(--dropdown-line);
}

.dropdown-list-card .k-grid tr:hover {
    background: #f4f7fb;
}

.dropdown-list-page .grid-toolbar-header,
.dropdown-design-page .grid-toolbar-header {
    color: #28578f;
    font-size: 16px;
    font-weight: 700;
}

.dropdown-list-toolbar-copy {
    display: grid;
    gap: 2px;
}

.dropdown-list-toolbar-copy strong {
    color: #28578f;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}

.dropdown-list-toolbar-copy span {
    color: var(--dropdown-muted);
    font-size: 11px;
}

.dropdown-list-card .grid-btn {
    border-radius: 7px;
}

.dropdown-translation-summary {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    white-space: nowrap;
}

.dropdown-translation-flag {
    position: relative;
    display: inline-flex;
    width: 28px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d5dde8;
    border-radius: 7px;
    background: #eef3f8;
}

.dropdown-translation-flag img {
    width: 16px;
    height: 11px;
    border-radius: 1px;
    object-fit: cover;
}

.dropdown-translation-flag.is-missing {
    border-color: #e5e7eb;
    background: #f9fafb;
}

.dropdown-translation-flag.is-missing img {
    filter: grayscale(1);
    opacity: .28;
}

.dropdown-translation-flag.is-stale {
    border-color: #e8c36a;
    background: #fff6e0;
}

.shop-language-page {
    max-width: 1100px;
}

.shop-language-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
    gap: 20px;
    align-items: start;
}

.shop-language-card {
    max-width: none;
}

.shop-language-card .grid-btn-settings-wrapper {
    align-items: center;
}

.shop-language-card .k-grid .k-table-td,
.shop-language-card .k-grid td {
    padding-block: 8px;
}

.shop-language-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.shop-language-flag {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 32px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d5dde8;
    border-radius: 7px;
    background: #eef3f8;
}

.shop-language-flag img {
    width: 18px;
    height: 12px;
    border-radius: 1px;
    object-fit: cover;
}

.shop-language-flag.is-inactive {
    border-color: #e5e7eb;
    background: #f9fafb;
}

.shop-language-flag.is-inactive img {
    filter: grayscale(1);
    opacity: .4;
}

.shop-language-name-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.shop-language-name-copy strong {
    overflow: hidden;
    color: #1f2937;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-language-code {
    flex: 0 0 auto;
    padding: 1px 7px;
    border: 1px solid #d5dde8;
    border-radius: 999px;
    background: #eef3f8;
    color: #28578f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.shop-language-badge {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.3;
    white-space: nowrap;
}

.shop-language-badge.is-default {
    background: #eef3f8;
    color: #28578f;
}

.shop-language-badge.is-inactive {
    background: #f3f4f6;
    color: #6b7280;
}

.shop-language-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-language-order {
    color: #4b5563;
    font-size: 12px;
    font-weight: 600;
}

.shop-language-row-inactive td {
    color: #9ca3af;
}

.shop-language-help-card {
    overflow: hidden;
    border: 1px solid var(--dropdown-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 41, 55, .06);
}

.shop-language-help-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--dropdown-line);
    background: linear-gradient(90deg, var(--dropdown-accent-soft) 0%, #fff 70%);
}

.shop-language-help-eyebrow {
    margin: 0 0 4px;
    color: #28578f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.shop-language-help-header h2 {
    margin: 0 0 4px;
    color: #181c36;
    font-size: 15px;
    font-weight: 700;
}

.shop-language-help-header p {
    margin: 0;
    color: var(--dropdown-muted);
    font-size: 11px;
    line-height: 1.4;
}

.shop-language-help-body {
    display: grid;
    gap: 8px;
    padding: 14px 16px 16px;
}

.shop-language-preview {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid #dce5ef;
    border-radius: 8px;
    background: #f6f8fb;
}

.shop-language-preview-empty {
    color: #9ca3af;
    font-size: 12px;
}

.shop-language-preview-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #fff;
    color: #1f2937;
    font-size: 12px;
    font-weight: 600;
}

.shop-language-preview-item img {
    width: 16px;
    height: 11px;
    border-radius: 1px;
    object-fit: cover;
}

.shop-language-preview-item.is-default {
    border-color: #d5dde8;
    background: #eef3f8;
    color: #28578f;
}

.shop-language-help-item {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid #e8eaee;
    border-radius: 8px;
    background: #fafafa;
}

.shop-language-help-label {
    color: #667085;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.shop-language-help-value {
    color: #181c36;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .shop-language-layout {
        grid-template-columns: 1fr;
    }
}

.shop-user-page {
    max-width: 1310px;
}

.shop-user-page .dropdown-list-card {
    max-width: none;
}

.shop-user-page .grid-btn-settings-wrapper {
    align-items: center;
}

.shop-user-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.shop-user-status.is-linked {
    background: #eef6ee;
    color: #2e7d32;
}

.shop-user-status.is-branch {
    background: #eef3f8;
    color: #28578f;
}

.shop-user-status.is-open {
    background: #f3f4f6;
    color: #6b7280;
}

.shop-user-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.shop-user-import-card {
    overflow: hidden;
    margin-top: 18px;
    border: 1px solid var(--dropdown-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 41, 55, .06);
}

.shop-user-import-panel {
    overflow: hidden;
    margin-top: 18px;
    border: 1px solid var(--dropdown-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 41, 55, .06);
}

.shop-user-import-panel__header,
.shop-user-import-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--dropdown-line);
    background: linear-gradient(90deg, var(--dropdown-accent-soft) 0%, #fff 42%);
}

.shop-user-import-panel__title,
.shop-user-import-header h2 {
    margin: 0 0 4px;
    color: #181c36;
    font-size: 16px;
    font-weight: 700;
}

.shop-user-import-panel__subtitle,
.shop-user-import-header p {
    margin: 0;
    color: var(--dropdown-muted);
    font-size: 12px;
    line-height: 1.4;
}

.shop-user-import-panel__header-actions,
.shop-user-import-header-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

.shop-user-import-panel__help,
.shop-user-import-help {
    padding: 14px 18px;
    border-bottom: 1px solid var(--dropdown-line);
    background: #f8fafc;
    color: #475467;
    font-size: 12px;
    line-height: 1.5;
}

.shop-user-import-panel__help-list,
.shop-user-import-help ol {
    margin: 8px 0 0;
    padding-left: 18px;
}

.shop-user-import-panel__body,
.shop-user-import-body {
    display: grid;
    gap: 18px;
    padding: 16px 18px 18px;
}

.shop-user-import-panel__section-title,
.shop-user-import-section-title {
    display: block;
    margin-bottom: 8px;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.shop-user-import-panel__meta,
.shop-user-import-meta {
    margin-bottom: 8px;
    color: #475467;
    font-size: 12px;
}

.shop-user-import-panel__actions,
.shop-user-import-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
}

.shop-user-import-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--dropdown-line);
    background: linear-gradient(90deg, var(--dropdown-accent-soft) 0%, #fff 42%);
}

.shop-user-import-eyebrow {
    margin: 0 0 4px;
    color: #28578f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.shop-user-import-header h2 {
    margin: 0 0 4px;
    color: #181c36;
    font-size: 16px;
    font-weight: 700;
}

.shop-user-import-header p {
    margin: 0;
    color: var(--dropdown-muted);
    font-size: 12px;
    line-height: 1.4;
}

.shop-user-import-header-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

.shop-user-import-help {
    padding: 14px 18px;
    border-bottom: 1px solid var(--dropdown-line);
    background: #f8fafc;
    color: #475467;
    font-size: 12px;
    line-height: 1.5;
}

.shop-user-import-help ol {
    margin: 8px 0 0;
    padding-left: 18px;
}

.shop-user-import-help li {
    margin-bottom: 6px;
}

.shop-user-import-body {
    display: grid;
    gap: 18px;
    padding: 16px 18px 18px;
}

.shop-user-import-section-title {
    display: block;
    margin-bottom: 8px;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.shop-user-import-meta {
    margin-bottom: 8px;
    color: #475467;
    font-size: 12px;
}

.shop-user-import-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
}

.shop-user-match-table {
    margin: 0;
    font-size: 12px;
}

.shop-user-match-table thead th {
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dropdown-create-form {
    display: grid;
    width: 100%;
    gap: 16px;
    padding: 0;
}

.dropdown-create-intro {
    display: grid;
    gap: 4px;
    padding-bottom: 2px;
}

.dropdown-create-eyebrow {
    color: #28578f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dropdown-create-intro p {
    margin: 0;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.4;
}

.dropdown-create-field {
    display: grid;
    gap: 6px;
}

.dropdown-create-field label {
    color: #667085;
    font-size: 11px;
    font-weight: 600;
}

.dropdown-create-published {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8f9fb;
    color: #475467;
    font-size: 12px;
    font-weight: 600;
}

.dropdown-create-field label.dropdown-create-published {
    color: #475467;
    font-size: 12px;
    font-weight: 600;
    align-self: end;
}

.dropdown-create-actions {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0;
}

.dropdown-create-modal.k-window,
.dropdown-modal.k-window {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(24, 28, 54, .16);
}

.dropdown-create-modal .k-window-titlebar,
.dropdown-modal .k-window-titlebar {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    color: #181c36;
    background: #fff;
}

.dropdown-create-modal .k-window-title,
.dropdown-modal .k-window-title {
    display: block;
    color: #181c36;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: normal;
    word-spacing: normal;
    white-space: normal;
}

.dropdown-create-modal .k-window-titlebar-action,
.dropdown-modal .k-window-titlebar-action {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #98a2b3;
}

.dropdown-create-modal .k-window-titlebar-action:hover,
.dropdown-modal .k-window-titlebar-action:hover {
    color: #667085;
    background: #f3f4f6;
}

.dropdown-create-modal .k-window-content,
.dropdown-modal .k-window-content {
    padding: 16px;
    background: #fff;
}

.customer-article-type-editor .k-window-content {
    overflow: visible;
    padding: 16px;
}

.customer-article-type-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.customer-subgrid-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.customer-own-article-grid-card {
    width: 100%;
    max-width: none;
}

.customer-modal-grid-page {
    max-width: none;
    padding: 0;
}

.customer-modal-grid-card {
    width: 100%;
    max-width: none;
}

.customer-subgrid-editor .k-window-content {
    overflow: visible;
    padding: 16px;
}

.customer-subgrid-editor-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.customer-subgrid-editor-field {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
}

.customer-subgrid-editor-field label {
    margin: 0;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
}

.customer-subgrid-editor-field .k-input,
.customer-subgrid-editor-field .k-picker,
.customer-subgrid-editor-field .k-dropdownlist,
.customer-subgrid-editor-field .k-combobox,
.customer-subgrid-editor-field .k-numerictextbox {
    width: 100%;
}

.customer-subgrid-editor .validation-message,
.customer-subgrid-editor-error {
    margin: 0;
    color: #dc2626;
    font-size: 11px;
    line-height: 1.35;
}

.customer-subgrid-editor-error {
    margin-top: 12px;
    padding: 8px 10px;
    border: 1px solid #fecaca;
    border-radius: 7px;
    background: #fef2f2;
}

.customer-own-article-editor-span {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .customer-subgrid-editor-fields {
        grid-template-columns: 1fr;
    }

    .customer-own-article-editor-span {
        grid-column: auto;
    }
}

.customer-article-type-editor-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.customer-article-type-editor-field {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
}

.customer-article-type-editor-field label {
    margin: 0;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
}

.customer-article-type-editor-field .k-input,
.customer-article-type-editor-field .k-picker,
.customer-article-type-editor-field .k-dropdownlist,
.customer-article-type-editor-field .k-numerictextbox {
    width: 100%;
}

.customer-article-type-editor .validation-message,
.customer-article-type-editor-error {
    margin: 0;
    color: #dc2626;
    font-size: 11px;
    line-height: 1.35;
}

.customer-article-type-editor-error {
    margin-top: 12px;
    padding: 8px 10px;
    border: 1px solid #fecaca;
    border-radius: 7px;
    background: #fef2f2;
}

@media (max-width: 560px) {
    .customer-article-type-editor-fields {
        grid-template-columns: 1fr;
    }
}

.dropdown-create-modal .k-edit-form-container,
.dropdown-create-modal .k-popup-edit-form {
    padding: 0;
}

.dropdown-create-modal .k-actions,
.dropdown-create-modal .k-edit-buttons,
.dropdown-create-modal .k-action-buttons,
.dropdown-create-modal .k-form-buttons,
.dropdown-modal .k-window-actions,
.dropdown-modal .k-actions {
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    background: #f8f9fa;
}

.dropdown-modal .k-window-footer,
.dropdown-modal .k-actions-horizontal {
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    background: #f8f9fa;
}

.dropdown-modal .delete-modal-content {
    display: block;
    margin: 0;
    color: #475467;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: normal;
    word-spacing: normal;
    white-space: normal;
}

.dropdown-modal-actions {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.dropdown-modal-actions-start {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-modal .dropdown-modal-actions .k-button + .k-button {
    margin-left: 0;
    margin-inline-start: 0;
}

.dropdown-modal .dropdown-modal-actions > :last-child {
    margin-left: auto;
    margin-inline-start: auto;
}

/* Two-button dialogs always keep cancel left and the action right. */
.dropdown-modal-actions:has(> .k-button:nth-child(2):last-child) {
    width: 100% !important;
    justify-content: space-between !important;
}

.dropdown-modal-actions:has(> .k-button:nth-child(2):last-child) > .k-button:last-child {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
}

/* DialogFactory Confirm/Alert has no dropdown-modal class and inherits shop preview type. */
.k-dialog-wrapper .k-dialog.k-window,
.k-dialog.k-window {
    width: min(480px, 94vw) !important;
    max-width: 480px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(24, 28, 54, .16);
    font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
    letter-spacing: normal;
    word-spacing: normal;
}

.k-dialog .k-window-titlebar,
.k-dialog .k-dialog-titlebar {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    color: #181c36;
    background: #fff;
}

.k-dialog .k-window-title,
.k-dialog .k-dialog-title {
    display: block;
    color: #181c36;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: normal;
    word-spacing: normal;
    white-space: normal;
}

.k-dialog .k-window-content,
.k-dialog .k-dialog-content {
    display: block;
    padding: 16px;
    background: #fff;
    color: #475467;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: normal;
    word-spacing: normal;
    white-space: normal;
}

.k-dialog .k-actions,
.k-dialog .k-dialog-actions,
.k-dialog .k-window-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    background: #f8f9fa;
}

.k-dialog .k-button-solid-primary {
    background-color: #9ccc65;
    color: #fff;
    border-color: transparent;
}

.k-dialog .k-button-solid-base {
    background-color: lightgrey;
    color: #fff;
    border-color: transparent;
}

.send-history-pdf-modal .send-history-pdf-meta {
    margin: 0 0 12px;
    color: #667085;
    font-size: 12px;
    line-height: 1.4;
}

.send-history-pdf-modal .send-history-pdf-frame {
    overflow: hidden;
    min-height: 420px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
}

.send-history-pdf-modal .send-history-pdf-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 420px;
    color: #667085;
    font-size: 13px;
}

.send-history-pdf-modal .send-history-pdf-spinner {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 2px solid #cbd5e1;
    border-top-color: #0369a1;
    border-radius: 50%;
    animation: send-history-pdf-spin 0.8s linear infinite;
}

@keyframes send-history-pdf-spin {
    to {
        transform: rotate(360deg);
    }
}

.send-history-pdf-modal .k-pdf-viewer,
.send-history-pdf-modal .pdfviewer {
    border: 0;
    background: #f8fafc;
}

.send-history-pdf-modal .k-toolbar {
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.dropdown-modal-errors {
    margin-top: 12px;
    padding: 10px 14px;
    overflow: hidden;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 12px;
    line-height: 1.45;
}

.dropdown-modal-errors strong {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
}

.dropdown-modal-errors ul {
    margin: 0;
    padding: 0 0 0 1.15em;
    list-style: disc inside;
}

.dropdown-modal-errors li {
    margin: 0;
    padding: 0;
}

.shipping-label-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.shipping-label-hint {
    margin: 0;
    min-width: 180px;
    flex: 1;
    color: #667085;
    font-size: 12px;
    line-height: 1.4;
}

.shipping-label-print-modal .k-window-content {
    padding: 10px 16px 16px;
}

.shipping-label-print-modal .shipping-label-pdf-frame {
    width: 100%;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
}

.shipping-label-print-modal .shipping-label-pdf-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: #667085;
    font-size: 13px;
}

.shipping-label-print-modal .k-pdf-viewer,
.shipping-label-print-modal .pdfviewer {
    width: 100%;
    border: 0;
    background: #f8fafc;
}

.shipping-label-print-modal .k-pdf-viewer .k-canvas {
    overflow-x: hidden;
}

.shipping-label-print-modal .k-toolbar {
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.booking-item-email-layout {
    display: grid;
    grid-template-columns: minmax(360px, 500px) minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
}

.booking-item-email-fields {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.booking-item-email-card {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.booking-item-email-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid #e5e7eb;
    color: #667085;
    font-size: 12px;
}

.booking-item-email-row:last-child {
    border-bottom: 0;
}

.booking-item-email-row .k-input,
.booking-item-email-row .k-combobox,
.booking-item-email-row .k-dropdownlist,
.booking-item-email-row .k-textbox {
    width: 100%;
}

.booking-item-email-attachment {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #181c36;
    font-weight: 600;
}

.booking-item-email-modal .custom-bt-delete.k-button:hover,
.booking-item-email-modal .custom-bt-delete.k-button:hover .k-button-text,
.booking-item-email-modal .custom-bt-delete.k-button:hover .k-svg-icon,
.booking-item-email-modal .custom-bt-delete.k-button:hover .k-icon {
    color: #fff;
}

.booking-item-email-attachment span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-item-email-editor,
.booking-item-email-preview {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.booking-item-email-upload {
    padding: 12px;
}

.booking-item-email-modal .dropzone-email {
    position: relative;
    padding: 12px;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.booking-item-email-modal .dropzone-email:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}

.booking-item-email-modal .dropzone-email .dropzone-content {
    pointer-events: none;
}

.booking-item-email-modal .dropzone-email .file-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    cursor: pointer;
}

.booking-item-email-modal .dropzone-email .icon {
    margin-bottom: 4px;
    font-size: 24px;
}

.booking-item-email-modal .dropzone-email .title {
    margin-bottom: 2px;
    color: #181c36;
    font-size: 13px;
    font-weight: 600;
}

.booking-item-email-modal .dropzone-email .subtitle {
    margin-bottom: 0;
    color: #667085;
    font-size: 12px;
}

.booking-item-email-modal .progress-wrap {
    margin-top: 10px;
    color: #475467;
    font-size: 12px;
}

.booking-item-email-modal .progress {
    width: 100%;
    height: 8px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 9999px;
    background: #e5e7eb;
}

.booking-item-email-modal .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #60a5fa, #2563eb);
    transition: width 0.15s ease;
}

.booking-item-email-modal .spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: text-bottom;
    border: 2px solid #93c5fd;
    border-top-color: #1d4ed8;
    border-radius: 50%;
    animation: booking-item-email-spin 0.6s linear infinite;
}

@keyframes booking-item-email-spin {
    to {
        transform: rotate(360deg);
    }
}

.booking-item-email-modal .status {
    margin: 8px 0 0;
    color: #667085;
    font-size: 12px;
    white-space: pre-wrap;
}

.booking-item-email-modal .k-pdf-viewer .k-toolbar {
    display: none;
}

.booking-item-email-modal .k-editor-content p {
    font-size: 12px;
}

.booking-item-email-modal .k-pdf-viewer,
.booking-item-email-modal .pdfviewer {
    border: 0;
    background: #f8fafc;
}

@media (max-width: 1000px) {
    .booking-item-email-layout {
        grid-template-columns: 1fr;
    }
}

.dropdown-create-modal .dropdown-create-save.custom-bt-save,
.dropdown-create-modal .custom-bt-save,
.dropdown-modal .custom-bt-save,
.dropdown-design-page .custom-bt-save,
.dropdown-design-page .dropdown-detail-save {
    min-height: 34px;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: #9ccc65;
    color: #fff;
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.dropdown-create-modal .dropdown-create-save.custom-bt-save:hover,
.dropdown-create-modal .custom-bt-save:hover,
.dropdown-modal .custom-bt-save:hover,
.dropdown-design-page .custom-bt-save:hover,
.dropdown-design-page .dropdown-detail-save:hover {
    background: #82c23c;
    color: #fff;
}

.dropdown-create-modal .custom-bt-cancel,
.dropdown-modal .custom-bt-cancel {
    min-height: 34px;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.dropdown-create-modal .customer-create-form,
.dropdown-create-modal .dropdown-create-form-2col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 16px;
}

.dropdown-create-modal .customer-create-form .dropdown-create-intro,
.dropdown-create-modal .dropdown-create-form-2col .dropdown-create-intro,
.dropdown-create-modal .customer-create-span-2 {
    grid-column: 1 / -1;
}

.dropdown-create-modal .customer-create-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.dropdown-create-modal .dropdown-create-field .validation-message,
.dropdown-create-modal .dropdown-create-field .text-danger,
.dropdown-create-modal .k-form-field .validation-message {
    margin: 2px 0 0;
    color: #dc2626;
    font-size: 11px;
    line-height: 1.3;
}

.dropdown-create-modal .customer-create-form .k-textbox,
.dropdown-create-modal .customer-create-form .k-dropdownlist,
.dropdown-create-modal .customer-create-form .k-picker,
.dropdown-create-modal .dropdown-create-form-2col .k-textbox,
.dropdown-create-modal .dropdown-create-form-2col .k-dropdownlist,
.dropdown-create-modal .dropdown-create-form-2col .k-picker {
    width: 100%;
}

.dropdown-create-modal .customer-create-native-input {
    display: flex;
    width: 100%;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    background: #fff;
    color: #181c36;
    font-size: 13px;
}

.dropdown-create-modal .customer-create-native-input:focus {
    outline: none;
    border-color: #28578f;
    box-shadow: 0 0 0 3px rgba(40, 87, 143, .12);
}

.dropdown-create-modal .customer-create-native-input.k-invalid {
    border-color: #dc2626;
}

.dropdown-create-modal .customer-create-native-input.k-invalid:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.dropdown-create-modal .customer-create-checks input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: #28578f;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .dropdown-create-modal .customer-create-form,
    .dropdown-create-modal .dropdown-create-form-2col {
        grid-template-columns: 1fr;
    }

    .dropdown-create-modal .customer-create-checks {
        grid-template-columns: 1fr;
    }
}

.dropdown-modal .custom-bt-delete-confirm {
    min-height: 34px;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: #e53935;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.dropdown-modal .custom-bt-delete-confirm:hover {
    background: #b71c1c;
    color: #fff;
}

.dropdown-modal .custom-bt-delete.k-icon-button {
    width: 26px;
    min-width: 26px;
    height: 26px;
    min-height: 26px;
    max-height: 26px;
    padding: 3px;
    box-sizing: border-box;
    align-self: center;
    border-radius: 6px;
    line-height: 0;
    gap: 0;
}

.dropdown-modal .custom-bt-delete.k-icon-button .k-button-text:empty {
    display: none;
}

.dropdown-modal .custom-bt-delete.k-icon-button .k-button-icon,
.dropdown-modal .custom-bt-delete.k-icon-button .k-svg-icon,
.dropdown-modal .custom-bt-delete.k-icon-button .k-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
}

.dropdown-modal .custom-bt-delete.k-button:hover,
.dropdown-modal .custom-bt-delete.k-button:hover .k-button-text,
.dropdown-modal .custom-bt-delete.k-button:hover .k-svg-icon,
.dropdown-modal .custom-bt-delete.k-button:hover .k-icon {
    color: #fff;
}

.dropdown-modal .address-actions-grid .k-command-cell,
.address-actions-grid .k-command-cell {
    white-space: nowrap;
}

.dropdown-modal .address-actions-grid .k-command-cell .k-button-group,
.address-actions-grid .k-command-cell .k-button-group,
.address-row-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.dropdown-modal .address-actions-grid .k-command-cell .k-button,
.address-actions-grid .k-command-cell .k-button {
    display: inline-flex;
    flex-shrink: 0;
}

/* Side-by-side translation cards (de / en) inside an edit modal */
.article-translation-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
}

/* Card-level actions stay compact — the modal footer sizing is only for the window buttons */
.dropdown-modal .article-description-item-footer .custom-bt-cancel,
.dropdown-modal .article-description-item-footer .custom-bt-save {
    min-height: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 720px) {
    .article-translation-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dropdown-design-page.dropdown-detail-page {
    --dropdown-accent: #28578f;
    --dropdown-accent-soft: #eef3f8;
    max-width: 1280px;
    padding: 0 0 42px;
}

.dropdown-design-page .dropdown-detail-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 680px;
    overflow: visible;
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid var(--dropdown-line);
    border-radius: 10px;
    background: linear-gradient(90deg, var(--dropdown-accent-soft) 0%, #fff 42%);
    box-shadow: none;
}

.dropdown-design-page .dropdown-detail-header::before {
    content: none;
}

.dropdown-design-page .dropdown-detail-header.has-aside {
    max-width: 1100px;
}

.dropdown-design-page .dropdown-detail-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.dropdown-design-page .dropdown-detail-heading-text {
    display: grid;
    min-width: 0;
}

.dropdown-design-page .dropdown-detail-title {
    overflow: hidden;
    margin: 0;
    color: #181c36;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-design-page .dropdown-detail-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dropdown-design-page .dropdown-detail-eyebrow {
    margin-bottom: 0;
}

.dropdown-design-page .dropdown-detail-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid #dce8d0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: #52782b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.dropdown-design-page .dropdown-detail-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dropdown-accent);
    box-shadow: 0 0 0 3px rgba(120, 169, 67, .14);
}

.dropdown-design-page .dropdown-detail-status.is-draft {
    border-color: #e5e7eb;
    color: #6b7280;
}

.dropdown-design-page .dropdown-detail-status.is-draft .dropdown-detail-status-dot {
    background: #9ca3af;
    box-shadow: 0 0 0 3px rgba(156, 163, 175, .14);
}

.dropdown-design-page .dropdown-detail-layout {
    display: grid;
    max-width: 680px;
    gap: 20px;
}

.dropdown-design-page .dropdown-detail-layout.has-aside {
    max-width: 1100px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.dropdown-design-page .dropdown-detail-column {
    display: grid;
    min-width: 0;
    gap: 20px;
}

.dropdown-design-page .dropdown-detail-aside {
    display: grid;
    min-width: 0;
    gap: 20px;
}

/* Article detail — 3-column shell + themed legacy cards/collapsibles */
.article-detail-page.dropdown-detail-page,
.customer-detail-page.dropdown-detail-page {
    --article-col: 360px;
    --article-gap: 25px;
    --article-cols: 3;
}

.article-detail-page.dropdown-detail-page {
    max-width: calc(var(--article-col) * var(--article-cols) + var(--article-gap) * (var(--article-cols) - 1));
}

.customer-detail-page.dropdown-detail-page {
    max-width: none;
}

.customer-detail-page .customer-detail-actions-card {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 1px dashed #d5dde8;
    border-radius: 10px;
    background: #f7f9fc;
}

.customer-detail-page .customer-detail-actions-card .k-button {
    min-height: 32px;
    border-radius: 8px;
}

.customer-detail-page .customer-detail-actions-card .k-button .k-svg-icon,
.customer-detail-page .customer-detail-actions-card .k-button .k-svg-icon svg {
    width: 14px;
    height: 14px;
}

.customer-detail-page .customer-detail-shop-btn {
    flex: 1 1 auto;
}

.customer-detail-page .customer-detail-delete-btn {
    min-width: 110px;
}

.customer-inactive-banner,
.customer-inactive-duplicates-hint {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
}

.customer-inactive-banner {
    background: #fff4e5;
    border: 1px solid #f0c36d;
    color: #6a3f00;
}

.customer-inactive-banner-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}

.customer-inactive-banner-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.customer-inactive-banner-reason,
.customer-inactive-banner-active {
    margin-top: 6px;
}

.customer-inactive-banner a,
.customer-inactive-duplicates-hint a {
    font-weight: 600;
}

.customer-inactive-duplicates-hint {
    background: #eef4fb;
    border: 1px solid #c5d6ea;
    color: #1f3b5a;
}

.customer-inactive-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: #fff4e5;
    border: 1px solid #f0c36d;
    color: #6a3f00;
    vertical-align: middle;
}

.customer-inactive-active-id {
    margin-left: 6px;
    font-size: 12px;
    color: #5d4037;
    font-weight: 500;
}

:is(.article-detail-page, .customer-detail-page) .article-detail-header {
    max-width: none;
}

:is(.article-detail-page, .customer-detail-page) .article-detail-layout {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, var(--article-col)));
    justify-content: start;
    gap: var(--article-gap);
    align-items: start;
}

:is(.article-detail-page, .customer-detail-page) .dropdown-detail-column {
    width: var(--article-col);
    max-width: 100%;
    gap: 10px;
}

:is(.article-detail-page, .customer-detail-page) .custom-card-1 {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(24, 28, 54, 0.04);
}

:is(.article-detail-page, .customer-detail-page) .custom-card-1 .box-row .head {
    background: #f2f2f2;
    color: #1f2937;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}

:is(.article-detail-page, .customer-detail-page) .custom-card-1.office-instruction-highlight {
    border: 1px solid #e8c47a;
    background: #fffdf8;
    box-shadow: 0 1px 0 rgba(24, 28, 54, 0.04);
}

:is(.article-detail-page, .customer-detail-page) .custom-card-1.office-instruction-highlight .box-row .head {
    background: #f7eed8;
    color: #1f2937;
    border-bottom-color: #ead9a8;
}

:is(.article-detail-page, .customer-detail-page) .custom-card-1 .box-row .left {
    background: #fafafa;
    border-bottom-color: #f0f0f0;
    color: inherit;
}

:is(.article-detail-page, .customer-detail-page) .custom-card-1 .box-row .right {
    border-bottom-color: #eef0f3;
}

/* Standalone add rows: dashed, full-width click target instead of an empty band */
:is(.article-detail-page, .customer-detail-page) .custom-card-1 > .box-row:first-child > .footer-col-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 28px;
    margin: 8px;
    padding: 2px;
    border: 1px dashed #d5dde8;
    border-radius: 8px;
    background: #f7f9fc;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

:is(.article-detail-page, .customer-detail-page) .custom-card-1 > .box-row:first-child > .footer-col-2:hover {
    border-color: #28578f;
    background: #eef3f8;
}

:is(.article-detail-page, .customer-detail-page) .custom-card-1 > .box-row:first-child > .footer-col-2 .custom-bt-plus {
    background: transparent;
    color: #28578f;
}

:is(.article-detail-page, .customer-detail-page) .custom-card-1 > .box-row:first-child > .footer-col-2:hover .custom-bt-plus {
    border-radius: 6px;
    background: #28578f;
    color: #fff;
}

    /* Card footer rows: give the open/edit icon a real button shape instead of a bare corner glyph */
    :is(.article-detail-page, .customer-detail-page) .custom-card-1 > .box-row:not(:first-child) > .footer-col-2 {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 6px 8px;
    }

        :is(.article-detail-page, .customer-detail-page) .custom-card-1 > .box-row:not(:first-child) > .footer-col-2 .custom-bt-plus {
            border: none;
            border-radius: 4px;
            background: transparent;
            color: #9bb4cc;
            transition: background-color 0.15s ease, color 0.15s ease;
        }

            :is(.article-detail-page, .customer-detail-page) .custom-card-1 > .box-row:not(:first-child) > .footer-col-2:hover .custom-bt-plus,
            :is(.article-detail-page, .customer-detail-page) .custom-card-1 > .box-row:not(:first-child) > .footer-col-2 .custom-bt-plus:hover {
                background: #eef3f8;
                color: #28578f;
            }

:is(.article-detail-page, .customer-detail-page) .wrap-collabsible {
    width: 360px;
    max-width: 100%;
    margin-bottom: 0;
}

    :is(.article-detail-page, .customer-detail-page) .wrap-collabsible .lbl-toggle {
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #f2f2f2;
        color: #1f2937;
        font-weight: 600;
        padding: 8px 12px;
    }

        :is(.article-detail-page, .customer-detail-page) .wrap-collabsible .lbl-toggle:hover {
            border-color: #9bb4cc;
        }

        :is(.article-detail-page, .customer-detail-page) .wrap-collabsible .lbl-toggle::before {
            color: #28578f;
        }

    :is(.article-detail-page, .customer-detail-page) .wrap-collabsible .toggle:checked + .lbl-toggle {
        border-radius: 10px 10px 0 0;
        border-bottom-color: #e5e7eb;
    }

    :is(.article-detail-page, .customer-detail-page) .wrap-collabsible .collapsible-content .content-inner {
        border: 1px solid #e5e7eb;
        border-top: none;
        border-radius: 0 0 10px 10px;
        background: #fff;
        padding: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    :is(.article-detail-page, .customer-detail-page) .wrap-collabsible .custom-card-1 {
        width: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    :is(.article-detail-page, .customer-detail-page) .wrap-collabsible .grouped-item-panel {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px;
        background: #f7f8fa;
    }

    :is(.article-detail-page, .customer-detail-page) .wrap-collabsible .grouped-item-add.custom-card-1 {
        background: transparent;
    }

        :is(.article-detail-page, .customer-detail-page) .wrap-collabsible .grouped-item-add.custom-card-1 > .box-row:first-child > .footer-col-2 {
            margin: 0;
        }

    :is(.article-detail-page, .customer-detail-page) .wrap-collabsible .grouped-item-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    :is(.article-detail-page, .customer-detail-page) .wrap-collabsible .grouped-item-card.custom-card-1 {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
        overflow: hidden;
        margin-top: 0;
    }

    :is(.article-detail-page, .customer-detail-page) .wrap-collabsible .shop-image-editor-panel,
    :is(.article-detail-page, .customer-detail-page) .wrap-collabsible .shop-image-editor-panel .shop-image-list {
        width: 100%;
        max-width: none;
    }

    :is(.article-detail-page, .customer-detail-page) .wrap-collabsible .shop-image-list {
        gap: 5px;
        padding: 8px;
        box-sizing: border-box;
        margin-top: 0;
    }

    :is(.article-detail-page, .customer-detail-page) .wrap-collabsible .shop-image-editor-panel .custom-card-1 {
        margin-top: 0 !important;
    }

:is(.article-detail-page, .customer-detail-page) .custom-multiselect.k-multiselect,
:is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-input-inner {
    min-height: 40px;
}

:is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-input-values,
:is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-chip-list {
    gap: 6px;
    padding-block: 4px;
}

:is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-chip,
:is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-chip-solid-base {
    max-width: 100%;
    min-width: 0;
    min-height: 26px;
    padding: 3px 6px 3px 10px;
    border: 1px solid #d5dde8;
    border-radius: 999px;
    background: #eef3f8;
    background-image: none;
    color: #28578f;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    box-shadow: none;
}

    :is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-chip:hover,
    :is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-chip-solid-base:hover,
    :is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-chip-solid-base.k-hover {
        border-color: #b8c9db;
        background: #e4ecf5;
        background-image: none;
        color: #1f446f;
    }

:is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-chip-content {
    min-width: 0;
    padding-block: 0;
}

:is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-chip-text,
:is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-chip-action,
:is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-chip-remove-action {
    width: 18px;
    height: 18px;
    margin-left: 2px;
    border-radius: 50%;
    color: #6b7c90;
}

    :is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-chip-action:hover,
    :is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-chip-remove-action:hover {
        background: rgba(40, 87, 143, .12);
        color: #28578f;
    }

:is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-chip .k-icon,
:is(.article-detail-page, .customer-detail-page) .custom-multiselect .k-chip .k-svg-icon {
    width: 10px;
    height: 10px;
}

@media (max-width: 1180px) {
    .article-detail-page.dropdown-detail-page,
    .customer-detail-page.dropdown-detail-page {
        --article-cols: 2;
    }

    :is(.article-detail-page, .customer-detail-page) .article-detail-layout {
        grid-template-columns: repeat(2, minmax(0, var(--article-col)));
    }
}

@media (max-width: 780px) {
    .article-detail-page.dropdown-detail-page,
    .customer-detail-page.dropdown-detail-page {
        --article-cols: 1;
    }

    :is(.article-detail-page, .customer-detail-page) .article-detail-layout {
        grid-template-columns: minmax(0, var(--article-col));
    }
}

.dropdown-design-page .dropdown-detail-translations {
    display: grid;
    gap: 12px;
}

.dropdown-design-page .dropdown-translation-header.is-default {
    cursor: default;
}

.dropdown-design-page .dropdown-translation-header.is-default:hover {
    background: #f6f8fb;
}

.dropdown-design-page .shop-category-subcategories-panel {
    overflow: hidden;
    width: 100%;
    border: 1px solid var(--dropdown-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 41, 55, .06);
}

.dropdown-design-page .shop-category-subcategories-panel .k-grid {
    border: 0;
}

.dropdown-design-page .shop-category-subcategories-panel .k-grid .k-toolbar {
    border-color: var(--dropdown-line);
}

.dropdown-design-page .shop-category-subcategories-panel .k-grid-header {
    border-bottom-width: 0;
    background: #fafafa;
}

.dropdown-design-page .shop-category-subcategories-panel .k-grid .k-grid-header .k-table {
    margin-bottom: 0;
}

.dropdown-design-page .shop-category-subcategories-panel .k-grid-header .k-table-th {
    border-bottom: 1px solid #e5e7eb;
}

.dropdown-design-page .shop-category-subcategories-panel .k-grid-header,
.dropdown-design-page .shop-category-subcategories-panel .k-grid-header-wrap,
.dropdown-design-page .shop-category-subcategories-panel .k-table-th,
.dropdown-design-page .shop-category-subcategories-panel .k-pager,
.dropdown-design-page .shop-category-subcategories-panel .k-filter-row > .k-table-th,
.dropdown-design-page .shop-category-subcategories-panel .k-filter-row > td {
    border-color: #e5e7eb;
}

.dropdown-design-page .shop-category-subcategories-panel .k-table-td,
.dropdown-design-page .shop-category-subcategories-panel td {
    border-color: #eef0f2;
}

.dropdown-design-page .shop-category-subcategories-panel .k-grid-header .k-table-th,
.dropdown-design-page .shop-category-subcategories-panel .k-grid-header .k-table-th > .k-link {
    color: #4b5563;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .25px;
}

.dropdown-design-page .shop-category-subcategories-panel .k-grid,
.dropdown-design-page .shop-category-subcategories-panel .k-grid-container,
.dropdown-design-page .shop-category-subcategories-panel .k-grid-aria-root,
.dropdown-design-page .shop-category-subcategories-panel .k-grid-content {
    height: auto !important;
    max-height: none !important;
}

.dropdown-design-page .shop-category-subcategories-panel .k-grid-content {
    overflow-y: hidden !important;
}

.dropdown-design-page .shop-category-subcategories-panel .k-grid-header,
.dropdown-design-page .shop-category-subcategories-panel .k-grid-footer {
    padding-right: 0;
}

.dropdown-design-page .shop-category-subcategories-panel .k-grid-content td,
.dropdown-design-page .shop-category-subcategories-panel .k-grid-content .k-table-td {
    padding-top: 8px;
    padding-bottom: 8px;
}

.dropdown-design-page .shop-category-subcategories-panel .k-command-cell {
    text-align: right;
    white-space: nowrap;
}

.dropdown-design-page .shop-category-subcategories-panel .k-command-cell .k-button-group,
.dropdown-design-page .shop-category-subcategories-panel .k-command-cell .k-actions,
.dropdown-design-page .shop-category-subcategories-panel .k-command-cell .address-row-actions {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.dropdown-design-page .shop-category-subcategories-panel .k-command-cell .k-button {
    display: inline-flex;
    flex-shrink: 0;
}

.dropdown-design-page .shop-subcategory-save-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dropdown-design-page .shop-subcategory-form-of-sale {
    display: grid;
    flex: 1 1 240px;
    min-width: 220px;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid #d5dde8;
    border-radius: 10px;
    background: #fff;
}

.dropdown-design-page .shop-subcategory-form-of-sale label {
    color: #28578f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dropdown-design-page .shop-subcategory-save-bar .dropdown-detail-actions {
    margin-left: auto;
    flex-wrap: nowrap;
    align-items: center;
}

.dropdown-design-page .dropdown-detail-card {
    overflow: hidden;
    border: 1px solid var(--dropdown-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 41, 55, .06);
}

.dropdown-design-page .dropdown-detail-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--dropdown-line);
    background: #fff;
}

.dropdown-detail-step {
    display: grid;
    flex: 0 0 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: var(--dropdown-accent-soft);
    color: #5f8b32;
    font-size: 13px;
    font-weight: 700;
}

.dropdown-design-page .dropdown-detail-card-header h2 {
    margin: 0;
    color: var(--dropdown-ink);
    font-size: 15px;
    font-weight: 700;
}

.dropdown-design-page .dropdown-detail-card-header p {
    margin: 4px 0 0;
    color: var(--dropdown-muted);
    font-size: 12px;
    line-height: 1.4;
}

.dropdown-design-page .dropdown-detail-card-body {
    padding: 18px;
    background: #fff;
}

.dropdown-design-page .dropdown-detail-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--dropdown-line);
    background: #f8f9fa;
}

.dropdown-design-page .dropdown-detail-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.dropdown-design-page .dropdown-detail-published {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 8px;
    color: #475467;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.dropdown-design-page .dropdown-detail-save.is-saving .k-svg-icon,
.dropdown-design-page .dropdown-detail-save.is-saving .k-icon {
    animation: spin 1s linear infinite;
}

.dropdown-design-page .dropdown-detail-field-label {
    color: #374151;
    font-size: 12px;
    font-weight: 700;
}

.dropdown-design-page .btn-nav-back {
    width: 32px;
    height: 32px;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    background: #fff;
    color: #28578f;
    box-shadow: none;
}

.dropdown-design-page .btn-nav-back:hover {
    border-color: #28578f;
    background: #28578f;
    color: #fff;
}

.dropdown-design-page .dropdown-detail-header-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.dropdown-design-page .dropdown-detail-sibling-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.dropdown-design-page .dropdown-detail-sibling-pos {
    min-width: 40px;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}

.dropdown-design-page .btn-nav-sibling {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #98a2b3;
    box-shadow: none;
}

.dropdown-design-page .btn-nav-sibling:hover {
    background: #f3f4f6;
    color: #667085;
}

.dropdown-design-page .btn-nav-sibling[disabled],
.dropdown-design-page .btn-nav-sibling:disabled {
    opacity: .35;
    background: transparent;
    color: #c4c9d1;
    box-shadow: none;
    cursor: default;
}

.dropdown-design-page .dropdown-detail-delete {
    width: 32px;
    height: 32px;
    border: 0;
    border-left: 1px solid var(--dropdown-line);
    border-radius: 0 7px 7px 0;
    background: transparent;
    color: #9ca3af;
}

.dropdown-design-page .dropdown-detail-delete:hover {
    border-left-color: #fecaca;
    background: #fef2f2;
    color: #dc2626;
}

.dropdown-design-page .dropdown-translation-item {
    border-color: var(--dropdown-line);
    border-radius: 10px;
    background: #fff;
}

.dropdown-design-page .dropdown-translation-header {
    padding: 10px 12px;
    border-color: var(--dropdown-line);
    background: #f6f8fb;
}

.dropdown-design-page .dropdown-translation-header:hover {
    background: var(--dropdown-accent-soft);
}

.dropdown-design-page .dropdown-translation-action {
    color: #28578f;
}

.dropdown-design-page .dropdown-translation-editor {
    padding: 12px;
}

.dropdown-design-page .article-type-panel,
.dropdown-design-page .price-group-panel,
.dropdown-design-page .stagger-price-panel {
    overflow: hidden;
    width: 100%;
    border: 1px solid var(--dropdown-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 41, 55, .06);
}

.dropdown-design-page .article-type-panel-header {
    padding: 18px 20px;
    border-color: var(--dropdown-line);
    background: #fff;
}

.dropdown-design-page .price-group-panel .k-grid .k-toolbar,
.dropdown-design-page .stagger-price-panel .k-grid .k-toolbar {
    padding: 18px 12px;
    border-color: var(--dropdown-line);
    background: #fff;
}

.dropdown-design-page .price-group-panel .grid-toolbar-wrapper,
.dropdown-design-page .stagger-price-panel .grid-toolbar-wrapper {
    padding: 0;
}

.dropdown-design-page .article-type-panel-header h2,
.dropdown-design-page .price-group-panel-heading,
.dropdown-design-page .stagger-price-panel-heading {
    color: #28578f;
    font-size: 16px;
    font-weight: 700;
}

.dropdown-design-page .article-type-panel-header p,
.dropdown-design-page .price-group-panel-subtitle,
.dropdown-design-page .stagger-price-panel-subtitle {
    color: var(--dropdown-muted);
    font-size: 12px;
}

.dropdown-design-page .article-type-panel-body {
    padding-right: 20px;
    padding-left: 20px;
}

.dropdown-design-page .article-type-setting {
    border-color: var(--dropdown-line);
}

.dropdown-design-page .article-type-edit {
    border-radius: 7px;
}

.dropdown-design-page .price-group-panel .k-grid,
.dropdown-design-page .stagger-price-panel .k-grid {
    border: 0;
}

.dropdown-design-page .price-group-panel .k-grid-header,
.dropdown-design-page .stagger-price-panel .k-grid-header {
    border-bottom-width: 0;
    background: #fafafa;
}

.dropdown-design-page .price-group-panel .k-grid .k-grid-header .k-table,
.dropdown-design-page .stagger-price-panel .k-grid .k-grid-header .k-table {
    margin-bottom: 0;
}

.dropdown-design-page .price-group-panel .k-grid-header .k-table-th,
.dropdown-design-page .stagger-price-panel .k-grid-header .k-table-th {
    border-bottom: 1px solid #e5e7eb;
}

.dropdown-design-page .price-group-panel .k-grid-header,
.dropdown-design-page .price-group-panel .k-grid-header-wrap,
.dropdown-design-page .price-group-panel .k-table-th,
.dropdown-design-page .stagger-price-panel .k-grid-header,
.dropdown-design-page .stagger-price-panel .k-grid-header-wrap,
.dropdown-design-page .stagger-price-panel .k-table-th {
    border-color: #e5e7eb;
}

.dropdown-design-page .price-group-panel .k-table-td,
.dropdown-design-page .price-group-panel td,
.dropdown-design-page .stagger-price-panel .k-table-td,
.dropdown-design-page .stagger-price-panel td {
    border-color: #eef0f2;
}

.dropdown-design-page .price-group-panel .k-grid-header .k-table-th,
.dropdown-design-page .price-group-panel .k-grid-header .k-table-th > .k-link {
    color: #4b5563;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .25px;
}

.dropdown-design-page .stagger-price-panel .k-grid-header .k-table-th,
.dropdown-design-page .stagger-price-panel .k-grid-header .k-table-th > .k-link,
.dropdown-design-page .stagger-price-panel .k-grid-header .k-table-th.header,
.dropdown-design-page .stagger-price-panel .k-grid-header .k-table-th.header .k-link {
    color: #4b5563;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .25px;
}

.dropdown-design-page .price-group-panel .k-grid,
.dropdown-design-page .price-group-panel .k-grid-container,
.dropdown-design-page .price-group-panel .k-grid-aria-root,
.dropdown-design-page .price-group-panel .k-grid-content,
.dropdown-design-page .stagger-price-panel .k-grid,
.dropdown-design-page .stagger-price-panel .k-grid-container,
.dropdown-design-page .stagger-price-panel .k-grid-aria-root,
.dropdown-design-page .stagger-price-panel .k-grid-content {
    height: auto !important;
    max-height: none !important;
}

.dropdown-design-page .price-group-panel .k-grid-content,
.dropdown-design-page .stagger-price-panel .k-grid-content {
    overflow-y: hidden !important;
}

.dropdown-design-page .price-group-panel .k-grid-header,
.dropdown-design-page .price-group-panel .k-grid-footer,
.dropdown-design-page .stagger-price-panel .k-grid-header,
.dropdown-design-page .stagger-price-panel .k-grid-footer {
    padding-right: 0;
}

.dropdown-design-page .price-group-panel .k-grid-content td,
.dropdown-design-page .price-group-panel .k-grid-content .k-table-td,
.dropdown-design-page .stagger-price-panel .k-grid-content td,
.dropdown-design-page .stagger-price-panel .k-grid-content .k-table-td {
    padding-top: 8px;
    padding-bottom: 8px;
}

.dropdown-design-page .price-group-panel .k-command-cell,
.dropdown-design-page .stagger-price-panel .k-command-cell {
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 950px) {
    .dropdown-design-page .dropdown-detail-layout.has-aside {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dropdown-list-page,
    .dropdown-design-page.dropdown-detail-page {
        padding: 0 0 32px;
    }

    .dropdown-list-header,
    .dropdown-design-page .dropdown-detail-header {
        gap: 12px;
    }

    .dropdown-list-header {
        padding: 17px 18px 18px;
    }

    .dropdown-list-card {
        overflow-x: auto;
    }

    .dropdown-list-toolbar-copy span {
        display: none;
    }

    .dropdown-design-page .dropdown-detail-actions {
        width: 100%;
        flex-direction: row;
    }

    .dropdown-design-page .dropdown-detail-header {
        padding: 10px 12px;
    }

    .dropdown-design-page .dropdown-detail-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .dropdown-design-page .dropdown-detail-save {
        flex: 1;
    }
}

/* Manager dashboard */
.dashboard-wrapper.dashboard-page {
    --dashboard-accent: #78a943;
    --dashboard-accent-soft: #edf5e5;
    --dashboard-ink: #1f2937;
    --dashboard-muted: #6b7280;
    --dashboard-line: #e5e7eb;
    width: 100%;
    max-width: 1280px;
    margin: 0;
    padding: 0;
    color: var(--dashboard-ink);
}

.dashboard-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.dashboard-page-eyebrow {
    color: var(--dashboard-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.dashboard-page-header h1 {
    margin: 5px 0 6px;
    color: var(--dashboard-ink);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.6px;
}

.dashboard-page-header p {
    margin: 0;
    color: var(--dashboard-muted);
    font-size: 14px;
}

.dashboard-page-badge {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid #dce8d0;
    border-radius: 999px;
    background: var(--dashboard-accent-soft);
    color: #52782b;
    font-size: 12px;
    font-weight: 600;
}

.dashboard-page .dashboard-kpi-strip {
    gap: 10px;
    margin-bottom: 14px;
}

.dashboard-page .dashboard-kpi {
    min-height: 78px;
    padding: 12px 12px 10px;
    border: 1px solid var(--dashboard-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 41, 55, .06);
}

.dashboard-page .dashboard-kpi::before {
    width: 3px;
    height: auto;
    top: 12px;
    right: auto;
    bottom: 12px;
    left: 0;
    border-radius: 0 3px 3px 0;
    background: var(--dashboard-accent);
}

.dashboard-page .dashboard-kpi:hover {
    border-color: #cbdcba;
    box-shadow: 0 12px 30px rgba(31, 41, 55, .1);
    transform: translateY(-2px);
}

.dashboard-page .dashboard-kpi:focus-visible,
.dashboard-page .dashboard-section-link:focus-visible {
    outline: 3px solid rgba(120, 169, 67, .24);
}

.dashboard-page .dashboard-kpi-label {
    margin-bottom: 5px;
    color: var(--dashboard-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .6px;
}

.dashboard-page .dashboard-kpi-value {
    color: var(--dashboard-ink);
    font-size: 1.45rem;
    font-weight: 750;
}

.dashboard-page .dashboard-kpi-value.is-alert {
    color: #b42318;
}

.dashboard-page .dashboard-kpi-hint {
    display: grid;
    width: 22px;
    height: 22px;
    right: 10px;
    bottom: 10px;
    place-items: center;
    border-radius: 50%;
    background: var(--dashboard-accent-soft);
    color: #668e3b;
    font-size: 12px;
}

.dashboard-page .dashboard-kpi:hover .dashboard-kpi-hint {
    background: #dfeecf;
    color: #52782b;
}

.dashboard-page .dashboard-columns {
    gap: 12px;
}

.dashboard-page .dashboard-stack {
    gap: 12px;
}

.dashboard-page .dashboard-section {
    border: 1px solid var(--dashboard-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 41, 55, .06);
}

.dashboard-page .dashboard-section-header {
    min-height: 38px;
    padding: 8px 12px;
    border-color: var(--dashboard-line);
    background: #fff;
}

.dashboard-page .dashboard-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--dashboard-ink);
    font-size: 13px;
    font-weight: 700;
}

.dashboard-page .dashboard-section-title::before {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    content: "";
    background: var(--dashboard-accent);
    box-shadow: 0 0 0 3px var(--dashboard-accent-soft);
}

.dashboard-page .dashboard-section-link {
    color: #668e3b;
    font-size: 10px;
    font-weight: 700;
}

.dashboard-page .dashboard-section-link:hover {
    color: #4f7629;
}

.dashboard-page .dashboard-table th {
    padding: 6px 10px;
    color: #737b88;
    border-color: var(--dashboard-line);
    background: #fafafa;
    font-size: 9px;
}

.dashboard-page .dashboard-table td {
    padding: 6px 10px;
    color: #374151;
    border-color: #eef0f2;
}

.dashboard-page .dashboard-table tr.dashboard-row-clickable:hover td {
    background: #f7faf4;
}

.dashboard-page .dashboard-muted {
    color: #8a919d;
}

.dashboard-page .dashboard-status {
    color: #52782b;
    border-color: #dce8d0;
    background: var(--dashboard-accent-soft);
}

.dashboard-page .dashboard-empty {
    padding: 18px 12px;
    color: var(--dashboard-muted);
}

.dashboard-page .dashboard-empty::before {
    width: 18px;
    height: 18px;
    color: #628d36;
    background: var(--dashboard-accent-soft);
}

.dashboard-page .dashboard-loading {
    min-height: 220px;
    color: #3f4654;
    font-size: 14px;
    font-weight: 600;
}

.dashboard-page .dashboard-loading::before {
    width: 48px;
    height: 48px;
    border-width: 4px;
    border-color: #fff;
    border-top-color: #3d6b1e;
}

.dashboard-page > .alert {
    max-width: 720px;
    border-radius: 12px;
}

@media (max-width: 640px) {
    .dashboard-wrapper.dashboard-page {
        padding: 0;
    }

    .dashboard-page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .dashboard-page .dashboard-kpi-strip {
        gap: 8px;
    }

    .dashboard-page .dashboard-kpi {
        min-height: 70px;
        padding: 10px 10px 9px;
    }

    .dashboard-page .dashboard-kpi::before {
        top: 10px;
        bottom: 10px;
    }

    .dashboard-page .dashboard-section-header {
        padding: 7px 10px;
    }
}

/* DPD shipping settings */
.dpd-design-page {
    --dpd-accent: #28578f;
    --dpd-accent-soft: #eef3f8;
    --dpd-ink: #1f2937;
    --dpd-muted: #6b7280;
    --dpd-line: #e5e7eb;
}

.dpd-design-page.shipping-cost-page,
.dpd-design-page.express-options-page {
    width: 100%;
    max-width: 1280px;
    margin: 0;
    padding: 0 0 60px;
    color: var(--dpd-ink);
}

.dpd-design-page.dpd-express-design-page {
    max-width: 980px;
}

.dpd-design-page .shipping-cost-hero,
.dpd-design-page .express-options-hero {
    align-items: flex-end;
    margin-bottom: 24px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.dpd-design-page .shipping-cost-hero::before,
.dpd-design-page .express-options-hero::before {
    display: none;
}

.dpd-design-page .shipping-cost-eyebrow,
.dpd-design-page .express-options-eyebrow {
    margin-bottom: 0;
    color: var(--dpd-accent);
    font-size: 12px;
    letter-spacing: 1.5px;
}

.dpd-design-page .shipping-cost-hero h1,
.dpd-design-page .express-options-hero h1 {
    margin: 5px 0 6px;
    color: var(--dpd-ink);
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.15;
    letter-spacing: -.6px;
}

.dpd-design-page .shipping-cost-hero p,
.dpd-design-page .express-options-hero p {
    margin-top: 0;
    color: var(--dpd-muted);
    font-size: 14px;
    line-height: 1.5;
}

.dpd-design-page .shipping-cost-stats {
    gap: 8px;
}

.dpd-design-page .shipping-cost-stat,
.dpd-design-page .express-options-count {
    min-width: auto;
    padding: 7px 11px;
    border-color: #d5dde8;
    border-radius: 999px;
    background: var(--dpd-accent-soft);
    color: #28578f;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
}

.dpd-design-page .shipping-cost-stat strong {
    display: inline;
    margin: 0 3px 0 0;
    color: #28578f;
    font-size: 12px;
}

.dpd-design-page .shipping-cost-panel,
.dpd-design-page .express-options-panel {
    border-color: var(--dpd-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 41, 55, .06);
}

.dpd-design-page .shipping-cost-panel-header {
    min-height: 70px;
    padding: 18px 20px;
    border-color: var(--dpd-line);
    background: linear-gradient(90deg, var(--dpd-accent-soft) 0%, #fff 42%);
}

.dpd-design-page .express-options-panel {
    padding: 20px;
}

.dpd-design-page .express-options-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.dpd-panel-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dpd-panel-step {
    display: grid;
    flex: 0 0 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: var(--dpd-accent-soft);
    color: #28578f;
    font-size: 13px;
    font-weight: 700;
}

.dpd-design-page .shipping-cost-panel-header h2,
.dpd-design-page .express-options-panel-header h2 {
    color: var(--dpd-ink);
    font-size: 17px;
}

.dpd-design-page .shipping-cost-panel-header p,
.dpd-design-page .express-options-panel-header p {
    color: var(--dpd-muted);
    font-size: 12px;
}

.dpd-design-page .shipping-cost-corner,
.dpd-design-page .shipping-cost-zone,
.dpd-design-page .shipping-cost-weight {
    background: #f8faf6;
}

.dpd-design-page .shipping-cost-zone-name,
.dpd-design-page .shipping-cost-weight strong {
    color: var(--dpd-ink);
}

.dpd-design-page .shipping-cost-price-control:focus-within,
.dpd-design-page .express-option-price:focus-within {
    border-color: var(--dpd-accent);
    box-shadow: 0 0 0 3px rgba(40, 87, 143, .12);
}

.dpd-design-page .shipping-cost-price-control .k-input,
.dpd-design-page .shipping-cost-price-control .k-numerictextbox,
.dpd-design-page .shipping-cost-price-control .k-textbox,
.dpd-design-page .express-option-price .k-input,
.dpd-design-page .express-option-price .k-numerictextbox {
    font-size: 12px;
}

.dpd-design-page .shipping-cost-price-control .k-input-inner,
.dpd-design-page .express-option-price .k-input-inner {
    font-size: 12px;
}

.dpd-design-page .shipping-cost-legend-dot.standard {
    background: #d5dde8;
}

.dpd-design-page .shipping-cost-savebar {
    border-color: #d5dde8;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(31, 41, 55, .16);
}

.dpd-design-page .shipping-cost-save.custom-bt-save {
    min-height: 38px;
    padding-right: 16px;
    padding-left: 16px;
    border-radius: 8px;
    background: #9ccc65;
    font-weight: 600;
}

.dpd-design-page .shipping-cost-save.custom-bt-save:hover {
    background: #82c23c;
}

.dpd-design-page .express-options-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 230px));
    justify-content: start;
    gap: 16px;
}

.dpd-design-page .express-option-card {
    max-width: 230px;
    min-height: 190px;
    padding: 18px;
    border-color: var(--dpd-line);
    border-radius: 12px;
    background: #fff;
}

.dpd-design-page .express-option-card:hover {
    border-color: #cbdcba;
    box-shadow: 0 10px 26px rgba(31, 41, 55, .09);
}

.dpd-design-page .express-option-code {
    border-radius: 7px;
    background: var(--dpd-accent-soft);
    color: #28578f;
}

.dpd-design-page .express-option-name {
    color: var(--dpd-ink);
    font-size: 16px;
    font-weight: 700;
}

.dpd-design-page .express-option-field label {
    color: #374151;
    font-size: 12px;
    font-weight: 700;
}

.dpd-design-page .shipping-cost-empty,
.dpd-design-page .express-options-empty {
    border-color: #d5dde8;
    border-radius: 10px;
    background: #f6f8fb;
    color: var(--dpd-muted);
}

@media (max-width: 760px) {
    .dpd-design-page.shipping-cost-page,
    .dpd-design-page.express-options-page {
        padding: 0 0 42px;
    }

    .dpd-design-page .shipping-cost-hero,
    .dpd-design-page .express-options-hero {
        align-items: flex-start;
        padding: 0;
    }

    .dpd-design-page .shipping-cost-stats {
        flex-wrap: wrap;
    }

    .dpd-design-page .shipping-cost-panel-header {
        align-items: flex-start;
    }
}

.custom-bt-delete {
    background-color: lightgrey;
    color: #fff;
    border: none;
}

    .custom-bt-delete:hover {
        background-color: red;
        color: #fff;
    }

.custom-bt-delete-confirm {
    background-color: #e53935;
    color: #fff;
    border: none;
}

    .custom-bt-delete-confirm:hover {
        background-color: #b71c1c;
    }


.custom-bt-normal {
    background-color: #808080;
    color: #fff;
    border: none;
}

    .custom-bt-normal:hover {
        color: #fff;
        background-color: #424242;
    }


.custom-bt-cancel,
.k-button.custom-bt-cancel,
.k-button.k-button-solid.custom-bt-cancel,
a.k-button.custom-bt-cancel {
    background-color: lightgrey;
    color: #fff;
    border: none;
    border-color: transparent;
}

    .custom-bt-cancel:hover,
    .k-button.custom-bt-cancel:hover,
    .k-button.k-button-solid.custom-bt-cancel:hover,
    a.k-button.custom-bt-cancel:hover {
        background-color: grey;
        color: #fff;
        border-color: transparent;
    }

.k-button.custom-bt-cancel .k-svg-icon,
.k-button.custom-bt-cancel svg,
a.k-button.custom-bt-cancel .k-svg-icon,
a.k-button.custom-bt-cancel svg,
.k-button.custom-bt-cancel:hover .k-svg-icon,
.k-button.custom-bt-cancel:hover svg,
.k-button.custom-bt-cancel.k-hover .k-svg-icon,
.k-button.custom-bt-cancel.k-hover svg {
    color: #fff;
    fill: currentColor;
}

.custom-bt-action {
    background-color: grey;
    color: #fff;
    border: none;
}

    .custom-bt-action:hover {
        background-color: darkorange;
        color: #fff;
    }


.grid-btn {
    background-color: lightgrey;
    color: #fff;
    border: none;
    outline:none;
}

.btn-label {
    background-color:green;
}

.btn-invoice {
    background-color: skyblue;
}

.btn-label {
    background-color:darkkhaki;
}

.btn-email {
    background-color:goldenrod;
}

.btn-deliverynote {
    background-color: darkcyan;
}

.btn-clear-cache {
    border-radius:5px;
    background-color: #181c36;
    font-size:14px;
}

.btn-workinstructions {
    background-color:darkgrey;
}


.grid-btn:hover {
    background-color: darkorange;
    color: #fff;
}

.grid-btn-delete {
    background-color: lightgrey;
}

    .grid-btn-delete:hover {
        background-color: orangered;
        color: #fff;
    }


.grid-btn-edit {
    background-color: lightgrey;
}

    .grid-btn-edit:hover {
        background-color: #00cc00;
        color: #fff;
    }

.grid-btn-add {
    background-color: #9fdf9f;
}

    .grid-btn-add:hover {
        background-color: #00cc00;
        color: #fff;
    }

.grid-btn-translate {
    background-color: #c5d4e8;
}

    .grid-btn-translate:hover {
        background-color: #7aa2d4;
        color: #fff;
    }

.grid-btn-save {
    background-color: #9fdf9f;
}

    .grid-btn-save:hover {
        background-color: #00cc00;
        color: #fff;
    }

    .btn-logout {
        background-color:transparent;     
        border-radius:3px;
    }



.btn-nav-back {
    background-color: #9fdf9f;
    color: #fff;
    border: none;
    outline: none;
}

.btn-nav-back:hover {
    background-color: darkorange;
    color: #fff;
}


.custom-bt-plus {
    background-color: #fff;
    color: lightgrey;
    border: none;
    margin:0;
    padding:0;
}

    .custom-bt-plus:hover {
        background-color: #28578f;
        color: #fff;
    }

.custom-bt-plus-position {
    background-color: lightgrey;
    color: #fff;
    border: none;
    margin: 0;
    padding: 0;
}

    .custom-bt-plus-position:hover {
        background-color: #1f456f;
        color: #fff;
    }



.custom-bt-edit {
    background-color: #fff;
    color: lightgrey;
    border: none;
    padding:0;
    margin:0;
}

    .custom-bt-edit:hover {
        background-color: #28578f;
        color:#fff;
    }


.grid-btn-reset:hover {
    background-color: grey;
    color: #fff;
}

/* v15 solid-base hover sets color to on-base (#424242). Keep white on filled app buttons. */
.k-button.grid-btn:hover,
.k-button.grid-btn.k-hover,
.k-button.k-button-solid.grid-btn:hover,
.k-button.k-button-solid.grid-btn.k-hover,
.k-button.k-button-solid.k-button-base.grid-btn:hover,
.k-button.k-button-solid.k-button-base.grid-btn.k-hover,
.k-button.custom-bt-save:hover,
.k-button.custom-bt-save.k-hover,
.k-button.k-button-solid.custom-bt-save:hover,
.k-button.k-button-solid.custom-bt-save.k-hover,
.k-button.k-button-solid.k-button-base.custom-bt-save:hover,
.k-button.k-button-solid.k-button-base.custom-bt-save.k-hover,
.k-button.custom-bt-cancel:hover,
.k-button.custom-bt-cancel.k-hover,
.k-button.k-button-solid.custom-bt-cancel:hover,
.k-button.k-button-solid.custom-bt-cancel.k-hover,
.k-button.k-button-solid.k-button-base.custom-bt-cancel:hover,
.k-button.k-button-solid.k-button-base.custom-bt-cancel.k-hover,
.k-button.custom-bt-action:hover,
.k-button.custom-bt-action.k-hover,
.k-button.custom-bt-normal:hover,
.k-button.custom-bt-normal.k-hover,
.k-button.btn-nav-back:hover,
.k-button.btn-nav-back.k-hover {
    color: #fff;
}

.k-button.grid-btn:hover .k-svg-icon,
.k-button.grid-btn:hover svg,
.k-button.grid-btn.k-hover .k-svg-icon,
.k-button.grid-btn.k-hover svg,
.k-button.custom-bt-save:hover .k-svg-icon,
.k-button.custom-bt-save:hover svg,
.k-button.custom-bt-save.k-hover .k-svg-icon,
.k-button.custom-bt-save.k-hover svg,
.k-button.custom-bt-cancel:hover .k-svg-icon,
.k-button.custom-bt-cancel:hover svg,
.k-button.custom-bt-cancel.k-hover .k-svg-icon,
.k-button.custom-bt-cancel.k-hover svg,
.k-button.custom-bt-action:hover .k-svg-icon,
.k-button.custom-bt-action:hover svg,
.k-button.btn-nav-back:hover .k-svg-icon,
.k-button.btn-nav-back:hover svg {
    color: #fff;
    fill: currentColor;
}

.highlighted-reset {
    background-color: red!important;
}

.grid-btn-settings-wrapper {
    display: flex;
    gap: 5px;
}

.grid-btn-settings-wrapper .grid-btn-add,
.grid-btn-settings-wrapper > *:has(.grid-btn-add) {
    order: -1;
}

.grid-toolbar-wrapper .grid-btn-reload {
    display: none;
}

.grid-toolbar-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: 0 4px;
}

.grid-toolbar-header {
    font-weight: 700;
    font-size: 16px;
    color: #996600;
}

.grid-toolbar-header span {
    margin-left: 14px;
    font-size: 14px;
    color: #424242;
}

.bookingitem-grid-wrapper {
    max-width:900px;

    .payment-summary {
                    margin-top: 0rem;
                    padding: 1rem;
                    background-color: #f8f9fa;
                    border-radius: 0px;
                    font-size:13px;
                }

                .summary-row {
                    display: flex;
                    justify-content: flex-end;
                    margin-bottom: 0.3rem;
                }

                .summary-label {
                    font-weight: 500;
                    margin-right: 0.5rem;
                }

                .summary-value {
                    min-width: 120px;
                    text-align: right;
                }

                .text-danger {
                    color: #dc3545;
                    font-weight: bold;
                }
}


.openitem-grid-wrapper {
    max-width:1000px;

    .payment-summary {
                    margin-top: 0rem;
                    padding: 1rem;
                    background-color: #f8f9fa;
                    border-radius: 0px;
                    font-size:13px;
                }

                .summary-row {
                    display: flex;
                    justify-content: flex-end;
                    margin-bottom: 0.3rem;
                }

                .summary-label {
                    font-weight: 500;
                    margin-right: 0.5rem;
                }

                .summary-value {
                    min-width: 120px;
                    text-align: right;
                }

                .text-danger {
                    color: #dc3545;
                    font-weight: bold;
                }
}



    a.file-prevlink {
        text-decoration: underline !important;
    }

a.file-prevlink:hover {
    text-decoration: underline;
    color:#28578f!important;
}

/* the ToolTip Class renders on the tooltip's container */
.custom-tooltip .k-tooltip {
    background: grey;
    color: #fff;
    font-size: 12px;
}

    .custom-tooltip .k-tooltip .k-callout {
        /* same as tooltip background */
        color: #fff;
    }

.target {
    position: absolute;
    top: 25vh;
    left: 25vw;
    width: 15vw;
    height: 10vh;
    border: 1px solid;
    padding: 1em;
}

.custom-textbox-small {
    font-size: 12px;
}



.k-picker-solid {
    border-color: none;
    color: #424242;
    background-color: #fff;
    background-image: none;
}

.k-input,
.k-textbox,
.k-numerictextbox,
.k-textarea,
.k-maskedtextbox,
.k-combobox,
.k-input-sm, .k-picker-sm,
.k-input-md, .k-picker-md {
    font-size: 12px;
    line-height: 1.4285714286;
}

.k-input .k-input-inner,
.k-textbox .k-input-inner,
.k-numerictextbox .k-input-inner,
.k-textarea .k-input-inner,
.k-textarea textarea.k-input-inner,
.k-maskedtextbox .k-input-inner,
.k-combobox .k-input-inner,
.k-picker .k-input-inner,
.k-picker .k-input-value-text,
.k-input-sm .k-input-inner,
.k-picker-sm .k-input-inner,
.k-input-sm .k-input-value-text,
.k-input-md .k-input-inner,
.k-picker-md .k-input-inner {
    font-size: 12px;
}


.k-picker-solid:hover {
    border-color: none;
    color: #424242;
    background-color: #fff;
    background-image: none;
}


/* To specify sftextbox placeholder font size and color */
.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text {
    font-size: 12px;
    font-weight: normal;
}

.e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before {
    color: #000;
}


/* up to version 3.5.0 */
.k-popup.k-reset,
/* from version 3.6.0 */
.k-child-animation-container {
    transition: none !important;
    /* to make dropdown animations faster use the following style INSTEAD */
    /* transition-duration: 100ms !important; */
}



.wrap-collabsible .checkbox-hide {
    display: none;
}

.wrap-collabsible {
    margin: 0;
    margin-bottom: 10px;
}

    .wrap-collabsible .lbl-toggle {
        display: block;
        font-weight: normal;
        text-align: left;
        font-size: 12px;
        padding: 5px 8px;
        color: #000;
        background-color: #f2f2f2;
        cursor: pointer;
        transition: all 0.25s ease-out;
        /*border: 1px solid #dfdfdf;*/
    }

        .wrap-collabsible .lbl-toggle:hover {
            /* color: #FFF; */
        }

        .wrap-collabsible .lbl-toggle::before {
            color: darkgrey;
            content: ' ';
            display: inline-block;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid currentColor;
            vertical-align: middle;
            margin-right: 5px;
            transform: translateY(-2px);
            transition: transform .2s ease-out;
        }

    .wrap-collabsible .toggle:checked + .lbl-toggle::before {
        transform: rotate(90deg) translateX(-3px);
    }

    .wrap-collabsible .collapsible-content {
        max-height: 0px;
        overflow: hidden;
        transition: max-height .25s ease-in-out;
    }

    .wrap-collabsible .toggle:checked + .lbl-toggle + .collapsible-content {
        max-height: 4000px;
    }

    .wrap-collabsible .toggle:checked + .lbl-toggle {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }


.grid-custom-header {
    width: 100%;
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
}

.grid-custom-header h2 {
    margin:0;
    padding:0;
    font-weight: 700;
    padding-left: 4px;
    padding:5px;
    /*color: darkgrey;*/
    font-size: 12px;
    /*border: 1px solid lightgrey;*/
}


.k-column-title {
    overflow:unset;
}


.k-list-item {
    font-size:12px;
}

.wrap-collabsible .lbl-toggle {
    font-weight:500;
    /*color:#a9a9a9;*/
}

.box-row .head {
    font-weight:500;
}

.box-row .big {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.box-row-article .head {
    font-weight:500;
}

.box-row .highlight {
    font-weight: 700;
    /*color:white;*/
    /* color: saddlebrown;*/
/*    background-color: saddlebrown*/
}



strong {
    font-weight:500;
}


.delete-modal-content {
    font-size:12px;
    line-height:20px;
    color:black;
}

.booking-header {
    display: flex;
    justify-content: space-between;
    height:47px;
    /*  gap: 8px;*/
    max-width: 1250px;
    align-items: center;
    margin-bottom: 1rem;
    padding-left:5px;
/*    padding: 6px 8px;*/
    /*line-height: 24px;*/
    font-size: 14px;
    color: #424242;
    background-color: #fff;
    font-weight: normal;
    /*border: 1px solid rgba(0, 0, 0, .08);*/

    .header {
            font-weight: 700;
            font-size: 16px;
            color: #996600;
             margin-left:8px;
         }
}



.bg-bright {
    background-color: #fff !important;
}


.custom-dropdown.k-picker-solid.k-focus {
    box-shadow: none !important;
}

.nav-link, .nav-link-disabled {
    display: block;
    padding: 8px 12px;
    min-width: 100px;
    font-size: 12px;
    color: darkgray;
    text-decoration: none;
    transition: color 0.05s ease-in-out, background-color 0.05s ease-in-out, border-color 0.05s ease-in-out;
    cursor: pointer;
    font-weight: 700;
    text-align: center;
/*    border: 1px solid grey !important;*/
    border-bottom: none !important;
    margin-right: 3px;
    /*background-color: #424242;*/    
}

    .nav-link.active {
        color:saddlebrown !important; /*#181c36*/
        background-color: #d6d6d6 !important;
        border-bottom: none !important;
    }


    .nav-link .tab-text {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        max-width: 175px;
        /* Fade-out effect starting at 150px and ending at 175px */
        -webkit-mask-image: linear-gradient(to right, black 150px, black 150px, transparent 175px);
        mask-image: linear-gradient(to right, black 150px, black 150px, transparent 175px);
    }

.nav-link:hover {
    color: #181c36;
    background-color: #d6d6d6;
    border-bottom: none !important;
}

a .nav-link-disabled:hover {
    color: darkgray;
}



.customer-nav {
    display: flex;
    /*height: 47px;*/
    align-items: center;
    margin-bottom: 1rem;
    padding: 5px 10px;
    background-color: darkgrey;
    font-weight: normal;
}

.nav-link-sub {
    display: block;
    padding: 4px 12px;
    font-size: 12px;
    color: #e6e6e6;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.nav-link-sub.active {
    color: #181c36 !important;
    background-color: #d6d6d6 !important;
    border-bottom: none !important;
}

a.nav-link-sub:hover {
    color: #181c36;
    background-color: #d6d6d6;
    border-bottom: none !important;
}

.customer-detail-action-bar {
    display: flex;
    overflow: hidden;
    background-color: #fff;
    justify-content: space-between;
    align-items:center;
    margin-bottom: 0.5rem;
    padding: 5px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(24, 28, 54, 0.04);
}

.customer-detail-page .customer-detail-action-bar .k-button-sm.k-icon-button {
    width: 24px;
    min-width: 24px;
    height: 24px;
    padding: 2px;
    box-sizing: border-box;
}

.customer-detail-page .customer-detail-action-bar .btn-nav-back {
    width: 24px;
    min-width: 24px;
    height: 24px;
    padding: 2px;
    border: none;
    background: #28578f;
    color: #fff;
    box-shadow: none;
}

.customer-detail-page .customer-detail-action-bar .btn-nav-back:hover {
    border: none;
    background: darkorange;
    color: #fff;
}

.article-position-card {
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(24, 28, 54, 0.04);
}

    .customer-detail-action-bar a.action-link {
        cursor: pointer;
        text-decoration: underline;
        font-size: 12px;
        font-weight: 500;
    }


.customer-detail-action-bar .converted-to-wrapper { 
    font-size: 12px;
    font-weight:500;
    color:cadetblue
}



.send-history-wrapper {
    /*display: flex;*/
    background-color: #fff; /*cadetblue*/
    margin-bottom: 0.5rem;
    padding: 10px 10px;
    font-size:12px;
}

    .send-history-wrapper .row div {
        flex: 1;
        padding-bottom:3px;
    }

    .send-history-wrapper .header {
        font-weight: 700;
        padding-bottom: 5px;
    }



  /*  .send-history-wrapper a.action-link {
        cursor: pointer;
        text-decoration: underline;
        font-size: 12px;
        font-weight: 500;
    }*/


.icon-clear:hover {
    color:orangered;
    font-weight:700;
    background-color:aliceblue;
}

.detail-action-bar {
    display: flex;
    background-color: #fff; /*cadetblue*/
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 5px 10px;
    width:100%;
    margin-bottom:25px;
}

    .detail-action-bar a.action-link {
        cursor: pointer;
        font-size: 12px;
        font-weight: 500;
    }

    .detail-action-bar .text  {
        margin:0;
        font-size: 13px;
        margin-left: 6px;
        font-weight: 500;
    }

/*.box-row .footer-col-2:hover {
    background-color: #9ccc65;
    color: #fff;
}*/

/*.box-row .footer-col-2:hover .custom-bt-edit {
    background-color: #9ccc65;
    color: #fff;
}

.box-row .footer-col-2:hover .custom-bt-plus {
    background-color: #9ccc65;
    color: #fff;
}

.box-row .footer:hover .custom-bt-edit {
    background-color: #9ccc65;
    color: #fff;
}*/

.translation-bar {
    margin-top:20px;
    display: flex;
    margin-left: 5px;
    cursor: pointer;
}
    .translation-bar img {
        width:15px;
    }

    .translation-bar p {
        padding: 3px;
        margin: 0px;
        font-size: 12px;
        color: grey
    }

.textitem-edit-wrapper {
    display:flex;
}

.dditem-content-card {
    background-color:#fff;
    padding: 20px;
    margin-bottom: 10px;
}


.pricechecker-form-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 100px;
    row-gap:25px;
    padding:10px;
}
.pricechecker-form-wrapper .k-input-inner {
    font-size:14px!important;
}

.pricechecker-modal-window.k-window {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f7f8fa;
    box-shadow: 0 24px 64px rgba(24, 28, 54, .22);
    display: flex;
    flex-direction: column;
}

.pricechecker-modal-window .k-window-titlebar {
    padding: 15px 20px;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
    background: linear-gradient(90deg, #eef3f8 0%, #fff 42%);
    flex-shrink: 0;
}

.pricechecker-modal-window .k-window-title {
    overflow: visible;
}

.pricechecker-modal-window .k-window-titlebar-action {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: #6b7280;
}

.pricechecker-modal-window .k-window-titlebar-action:hover {
    color: #1f2937;
    background: #eef3f8;
}

.pricechecker-modal-window .k-window-content {
    padding: 20px;
    background: #f7f8fa;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pricechecker-modal-heading {
    display: flex;
    align-items: center;
    gap: 11px;
}

.pricechecker-modal-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: #28578f;
}

.pricechecker-modal-icon i {
    font-size: 20px;
    line-height: 1;
}

.pricechecker-modal-heading-copy {
    display: grid;
    gap: 2px;
}

.pricechecker-modal-eyebrow {
    color: #28578f;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.pricechecker-modal-title {
    color: #181c36;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.chat-modal-window.k-window {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f7f8fa;
    box-shadow: 0 24px 64px rgba(24, 28, 54, .22);
    display: flex;
    flex-direction: column;
}

.chat-modal-window .k-window-titlebar {
    padding: 15px 20px;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
    background: linear-gradient(90deg, #eef3f8 0%, #fff 42%);
    flex-shrink: 0;
}

.chat-modal-window .k-window-title {
    overflow: visible;
}

.chat-modal-window .k-window-titlebar-action {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: #6b7280;
}

.chat-modal-window .k-window-titlebar-action:hover {
    color: #1f2937;
    background: #eef3f8;
}

.chat-modal-window .k-window-content {
    padding: 16px 20px 20px;
    background: #f7f8fa;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-modal-heading {
    display: flex;
    align-items: center;
    gap: 11px;
}

.chat-modal-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: #28578f;
}

.chat-modal-icon i {
    font-size: 18px;
    line-height: 1;
}

.chat-modal-heading-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.chat-modal-eyebrow {
    color: #28578f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chat-modal-title {
    color: #181c36;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.chat-modal-content {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pricechecker-modal-content {
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 41, 55, .05);
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
}

 .pricechecker-form-wrapper {
         

        .form-group {
            margin-bottom: 25px;
        }

        .input-label {
            display: block;
            font-size: 12px;
            color: grey;
            margin-bottom: 8px;
        }

        /* Styling for normal input fields */
        input {
            background-color: #fff;
            color: #000;
            border: 1px solid lightgreen;
        }

        /* Styling for disabled input fields */
        input:disabled {
            background-color: #f0f0f0;
            color: dimgrey;
            border: 1px solid #ccc;
            /*cursor: not-allowed;*/
        }

     
        .result input {        
            color:black;
            font-weight:500;
            background-color:bisque;
        }
    

        .highlight {
            font-weight: 700;
            /*background-color:burlywood;*/
        }

        .result {
            font-weight: 700;
            color: #000;
        }


      /*  .editable {
            color:blueviolet;
            font-weight:700;
        }*/

 /*       .form-input {
            width: 100%;
            padding: 10px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

            .form-input:focus {
                border-color: #0066ff;
                outline: none;
                box-shadow: 0 0 4px rgba(0, 102, 255, 0.2);
            }*/
}


.fixed-dimension-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 6px 10px;
    border: 1px solid #cfe2ff;
    border-radius: 16px;
    background-color: #f4f8ff;
    color: #28578f;
    font-size: 12px;
    font-weight: 500;
}

.fixed-dimension-hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #28578f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.custom-card-pricechecker {
    display: grid;
    grid-template-columns: 130px auto; /* Define your column sizes here */
    font-size: 12px;
    width: 100%;
    border: 1px solid #f6f6f6;
    border-bottom: none;
    margin-bottom:25px;
}

.custom-card-pricechecker .left {
    color:darkgray;
    background-color:#fff;
    align-content:center;
}

    .custom-card-pricechecker .right {
        color: darkgray;
        background-color: #fff;
        align-content: center;
    }

.grid-checkmark {
    font-size: 16px;
    color: green;
}

.grid-center-checkbox {
    display: flex;
    justify-content: center;
}

.ac-header h5 {
    font-size:14px;
    margin-top:15px;
}


.box-row.row-missing .left,
.box-row.row-missing .right {
    background-color: #fff3cd;
}


.vat-highlight {
    animation: vat-blink 0.45s ease-in-out 3;
}

@keyframes vat-blink {
    0%, 100% {
        background-color: transparent;
    }

    50% {
        background-color: #fff3cd;
    }
}

/* Manager application shell */
:root {
    --manager-navy: #151a30;
    --manager-navy-light: #202741;
    --manager-sidebar-accent: #9299ab;
    --manager-sidebar-accent-soft: rgba(146, 153, 171, 0.13);
    --manager-text: #222938;
    --manager-muted: #778096;
    --manager-border: #e7e9ef;
    --manager-surface: #ffffff;
    --manager-workspace: #f5f6f8;
    --manager-sidebar-width: 268px;
}

.page-wrapper .main-container {
    min-height: 100vh;
    padding-left: var(--manager-sidebar-width);
}

.page-wrapper .app-container {
    min-width: 0;
}

.page-wrapper .sidebar-wrapper {
    width: var(--manager-sidebar-width);
    background: var(--manager-navy);
    border-right: 0;
}

.page-wrapper .app-brand {
    height: 80px;
    min-height: 80px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--manager-navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-link {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.brand-link:hover {
    color: #fff;
}

.brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--manager-navy);
    background: var(--manager-sidebar-accent);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2);
}

.brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-copy strong {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.brand-copy small {
    margin-top: 4px;
    color: #929ab0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.page-wrapper .sidebarMenuScroll {
    height: calc(100vh - 80px);
}

.page-wrapper .sidebar-menu {
    padding: 12px 10px 24px;
}

.page-wrapper .sidebar-menu > li {
    margin: 3px 0;
}

.page-wrapper .sidebar-menu > li.menu-section {
    margin: 22px 12px 7px;
    color: #687087;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.page-wrapper .sidebar-menu > li.menu-section:first-child {
    margin-top: 8px;
}

.page-wrapper .sidebar-menu > li > a {
    min-height: 36px;
    padding: 5px 10px;
    gap: 10px;
    border-radius: 10px;
    color: #aeb5c7;
    font-size: 12px;
    /*font-weight: 500;*/
    transition: color 120ms ease, background-color 120ms ease;
}

.page-wrapper .sidebar-menu > li > a > [class^=icon-] {
    width: 25px;
    height: 25px;
    margin: 0;
    border: 0;
    border-radius: 0;
    color: #7f879d;
    font-size: 18px;
}

.page-wrapper .sidebar-menu > li:hover > a {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.page-wrapper .sidebar-menu > li:hover > a > [class^=icon-] {
    color: #b8becc;
}

.page-wrapper .sidebar-menu > li.active > a,
.page-wrapper .sidebar-menu > li.current-page > a,
.page-wrapper .sidebar-menu > li.current-page > a:hover {
    position: relative;
    color: #fff;
    background: var(--manager-sidebar-accent-soft);
}

.page-wrapper .sidebar-menu > li.active > a::before,
.page-wrapper .sidebar-menu > li.current-page > a::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--manager-sidebar-accent);
}

.page-wrapper .sidebar-menu > li.active > a [class^=icon-],
.page-wrapper .sidebar-menu > li.current-page > a [class^=icon-] {
    color: #c2c7d3;
    border: 0;
}

.page-wrapper .sidebar-menu > li.treeview::after {
    right: 14px;
    top: 18px;
    color: #687087;
    line-height: 1;
    transform: translateY(-50%);
}

.page-wrapper .sidebar-menu > li.treeview.active::after {
    transform: translateY(-50%) rotate(-90deg);
}

.page-wrapper .sidebar-menu .treeview-menu {
    padding: 6px 0 8px 36px;
}

.page-wrapper .sidebar-menu .treeview-menu > li > a {
    margin-left: 0;
    padding: 7px 14px;
    border-left: 1px solid #353c55;
    color: #8991a6;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
}

.page-wrapper .sidebar-menu .treeview-menu > li > a:hover,
.page-wrapper .sidebar-menu .treeview-menu > li > a.active-sub {
    color: #fff;
    border-left-color: var(--manager-sidebar-accent);
    background: transparent;
}

.page-wrapper .sidebar-menu .treeview-menu > li > a.active-sub {
    font-weight: 400;
}

.page-wrapper .sidebar-menu .treeview-menu > li.seperator {
    height: 5px;
    overflow: hidden;
}

.page-wrapper .app-header {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 72px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--manager-text);
    background: var(--manager-surface);
    border-bottom: 1px solid var(--manager-border);
    box-shadow: 0 1px 3px rgba(20, 26, 48, 0.03);
}

.header-context {
    min-width: 150px;
    display: flex;
    flex-direction: column;
}

.header-breadcrumb {
    margin-bottom: 3px;
    color: var(--manager-muted);
    font-size: 10px;
}

.header-title {
    color: var(--manager-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.page-wrapper .header-actions {
    min-width: 0;
    gap: 16px;
}

.header-search {
    width: clamp(220px, 30vw, 420px);
}

.header-search .aa-Autocomplete {
    width: 100%;
}

.header-search .aa-Form {
    height: 40px;
    border: 1px solid var(--manager-border);
    border-radius: 10px;
    background: #f7f8fa;
    box-shadow: none;
}

.header-search .aa-Form:focus-within {
    border-color: rgba(198, 154, 58, 0.75);
    box-shadow: 0 0 0 3px rgba(198, 154, 58, 0.12);
}

.header-search .aa-Input {
    font-size: 12px;
}

.user-menu {
    position: relative;
}

.user-menu > summary {
    min-width: 170px;
    padding: 5px 8px 5px 5px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 12px;
    cursor: pointer;
    list-style: none;
}

.user-menu > summary::-webkit-details-marker {
    display: none;
}

.user-menu > summary:hover {
    background: #f5f6f8;
}

.user-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: var(--manager-navy);
    font-size: 11px;
    font-weight: 700;
}

.user-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.user-copy strong {
    overflow: hidden;
    color: var(--manager-text);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: capitalize;
}

.user-copy small {
    margin-top: 2px;
    color: var(--manager-muted);
    font-size: 9px;
}

.user-menu > summary > [class^=icon-] {
    color: #8b93a5;
    font-size: 12px;
    transition: transform 120ms ease;
}

.user-menu[open] > summary > [class^=icon-] {
    transform: rotate(180deg);
}

.user-menu-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 20;
    width: 190px;
    padding: 7px;
    border: 1px solid var(--manager-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(21, 26, 48, 0.15);
}

.user-menu-popover a,
.user-menu-popover button {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 8px;
    color: #4c5569;
    background: transparent;
    font: inherit;
    font-size: 11px;
    text-align: left;
    cursor: pointer;
}

.user-menu-popover a:hover,
.user-menu-popover button:hover {
    color: var(--manager-text);
    background: #f4f5f7;
}

.user-menu-popover [class^=icon-] {
    color: #7e879a;
    font-size: 14px;
}

.page-wrapper .app-body {
    min-height: calc(100vh - 72px);
    padding: 24px;
    background: var(--manager-workspace);
}

@media (max-width: 640px) {
    .page-wrapper .app-header {
        gap: 10px;
        height: 64px;
    }

    .header-context {
        flex: 1;
    }

    .header-title {
        font-size: 14px;
    }

    .header-search {
        width: 40px;
    }

    .header-search .aa-Form {
        width: 40px;
        overflow: hidden;
    }

    .header-search .aa-InputWrapper {
        display: none;
    }

    .page-wrapper .header-actions {
        gap: 8px;
    }

    .page-wrapper .app-body {
        min-height: calc(100vh - 64px);
        padding: 16px;
    }
}

/* Keep the original compact manager header. */
.page-wrapper .app-header {
    position: static;
    height: 80px;
    padding: 0 1.5rem;
    gap: 0;
    color: inherit;
    background: var(--manager-navy);
    border-bottom: 1px solid #e3e5eb;
    box-shadow: none;
}

.page-wrapper .app-body {
    background: #d6d6d6;
}

.page-wrapper .header-actions {
    gap: 0;
    margin-left: auto;
}

.header-pricechecker-button,
.header-chat-button {
    height: 24px;
    margin-right: 12px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid rgba(198, 154, 58, 0.65);
    border-radius: 6px;
    color: #f2d48e;
    background: rgba(198, 154, 58, 0.1);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.header-pricechecker-button:hover,
.header-chat-button:hover {
    color: #181c36;
    background: #c69a3a;
    border-color: #c69a3a;
}

.header-pricechecker-button [class^=icon-],
.header-chat-button [class^=icon-] {
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
}

.header-pricechecker-button [class^=icon-]::before,
.header-chat-button [class^=icon-]::before {
    line-height: 1;
}

.header-chat-badge {
    margin-left: 2px;
    min-width: 1.1rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: #b28a30;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.header-chat-button:hover .header-chat-badge {
    background: #181c36;
    color: #f2d48e;
}

/* Align submenu labels with the parent navigation text. */
.page-wrapper .sidebar-menu .treeview-menu {
    padding: 6px 12px 8px 0;
}

.page-wrapper .sidebar-menu .treeview-menu > li > a {
    position: relative;
    margin: 0;
    padding: 8px 30px 8px 54px;
    border-left: 0;
    transition: color 100ms ease;
}

.page-wrapper .sidebar-menu .treeview-menu > li > a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 24px;
    width: 1px;
    background: #353c55;
    transition: background-color 100ms ease;
}

.page-wrapper .sidebar-menu .treeview-menu > li > a:hover::before,
.page-wrapper .sidebar-menu .treeview-menu > li > a.active-sub::before {
    background: var(--manager-sidebar-accent);
}

.page-wrapper .sidebar-menu .treeview-menu > li > a.active-sub:hover {
    color: #fff;
    border-left: 0;
    background: transparent;
}

@media (max-width: 640px) {
    .page-wrapper .app-header {
        height: 80px;
        padding: 0 1.5rem;
    }

    .page-wrapper .app-body {
        min-height: calc(100vh - 80px);
    }

}

/* Shop-order review */
.shop-order-list-page,
.shop-order-detail-page {
    --shop-order-accent: #28578f;
    --shop-order-accent-dark: #1f456f;
    --shop-order-accent-soft: #eef3f8;
    --shop-order-ink: #181c36;
    --shop-order-muted: #737b8c;
    --shop-order-line: #e2e5e9;
    width: 100%;
    max-width: 1280px;
    padding: 0 0 40px;
    color: var(--shop-order-ink);
}

.shop-order-list-header,
.shop-order-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid var(--shop-order-line);
    border-radius: 10px;
    background: linear-gradient(90deg, var(--shop-order-accent-soft) 0%, #fff 42%);
    box-shadow: none;
}

.shop-order-list-header {
    align-items: flex-end;
}

.shop-order-list-header h1,
.shop-order-detail-header h1 {
    margin: 2px 0 3px;
    color: #181c36;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
}

.shop-order-list-header p,
.shop-order-detail-header p {
    margin: 0;
    color: var(--shop-order-muted);
    font-size: 12px;
}

.shop-order-eyebrow {
    color: var(--shop-order-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.shop-order-detail-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
}

.shop-order-detail-page .btn-nav-back {
    width: 32px;
    height: 32px;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    background: #fff;
    color: #28578f;
    box-shadow: none;
}

.shop-order-detail-page .btn-nav-back:hover {
    border-color: #28578f;
    background: #28578f;
    color: #fff;
}

.shop-order-detail-header-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
}

.shop-order-detail-sibling-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.shop-order-detail-sibling-pos {
    min-width: 40px;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}

.shop-order-detail-page .btn-nav-sibling {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #98a2b3;
    box-shadow: none;
}

.shop-order-detail-page .btn-nav-sibling:hover {
    background: #f3f4f6;
    color: #667085;
}

.shop-order-detail-page .btn-nav-sibling[disabled],
.shop-order-detail-page .btn-nav-sibling:disabled {
    opacity: .35;
    background: transparent;
    color: #c4c9d1;
    box-shadow: none;
    cursor: default;
}

.shop-order-grid-card,
.shop-order-card {
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid var(--shop-order-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(24, 28, 54, .05);
}

.shop-order-grid-card .k-grid {
    border: 0;
}

.shop-order-grid-card .k-grid .k-toolbar {
    border-color: var(--shop-order-line);
    background: linear-gradient(90deg, var(--shop-order-accent-soft) 0%, #fff 42%);
}

.shop-order-grid-card .k-grid .k-grid-header,
.shop-order-grid-card .k-grid .k-table-th,
.shop-order-grid-card .k-grid .k-pager {
    border-color: #e5e7eb;
}

.shop-order-grid-card .k-grid .k-table-td {
    border-color: #eef0f2;
}

.shop-order-list-page .grid-toolbar-header {
    color: #28578f;
    font-size: 16px;
    font-weight: 700;
}

.shop-order-grid-toolbar {
    min-height: 54px;
    padding: 8px 5px;
}

.inbound-email-toolbar {
    flex-wrap: wrap;
    gap: 12px;
}

.inbound-email-toolbar-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

.inbound-email-sync-btn,
.inbound-email-sync-btn.k-button {
    min-width: 0;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    white-space: nowrap;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1;
}

.inbound-email-edit-list {
    margin-top: 4px;
    border-top: 1px solid #f0f1f4;
}

.inbound-email-edit-control {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.inbound-email-note-control {
    width: 100%;
    align-items: stretch;
}

.inbound-email-customer-name {
    color: #343949;
    font-size: 12px;
    font-weight: 600;
}

.inbound-email-edit-list .inbound-email-input.k-input,
.inbound-email-edit-list .k-numerictextbox,
.inbound-email-edit-list .k-input {
    font-size: 12px;
    min-height: 30px;
}

.inbound-email-edit-list .k-numerictextbox .k-input-inner,
.inbound-email-edit-list .k-input-inner {
    font-size: 12px;
    padding: 4px 8px;
}

.inbound-email-load-btn.k-button,
.inbound-email-load-btn {
    font-size: 12px !important;
    min-height: 30px;
    padding: 4px 10px !important;
}

.inbound-email-edit-list .inbound-email-textarea.k-textarea,
.inbound-email-edit-list .k-textarea,
.inbound-email-edit-list textarea {
    width: 100%;
    font-size: 12px !important;
    line-height: 1.4;
    min-height: 56px;
    border-radius: 6px;
    border-color: #d8dde6;
}

.inbound-email-edit-list .k-textarea .k-input-inner,
.inbound-email-edit-list textarea.k-input-inner {
    font-size: 12px !important;
    padding: 8px 10px;
}

.inbound-email-note-row {
    align-items: start;
}

.inbound-email-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 1.35rem 0 2rem;
    padding: 14px 16px;
    border: 1px solid #e8eaef;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfbfc 0%, #f5f6f8 100%);
}

.inbound-email-action-btn.k-button,
.inbound-email-action-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    border: 1px solid #d7dbe3 !important;
    background: #fff !important;
    color: #343949 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.inbound-email-action-btn.k-button:hover:not(.k-disabled),
.inbound-email-action-btn:hover:not(:disabled):not(.k-disabled) {
    background: #f3f5f8 !important;
    border-color: #c5cad4 !important;
    color: #1f2430 !important;
}

.inbound-email-action-primary.custom-bt-save.k-button,
.inbound-email-action-primary.custom-bt-save,
.inbound-email-action-primary.k-button {
    border-color: transparent !important;
    background: #9ccc65 !important;
    color: #fff !important;
}

.inbound-email-action-primary.custom-bt-save.k-button:hover:not(.k-disabled),
.inbound-email-action-primary.custom-bt-save:hover:not(:disabled):not(.k-disabled),
.inbound-email-action-primary.k-button:hover:not(.k-disabled) {
    background: #82c23c !important;
    border-color: transparent !important;
    color: #fff !important;
}

.inbound-email-action-ai.k-button,
.inbound-email-action-ai {
    border-color: #c5d4f0 !important;
    background: #eef3fb !important;
    color: #2f4f8a !important;
}

.inbound-email-action-ai.k-button:hover:not(.k-disabled),
.inbound-email-action-ai:hover:not(:disabled):not(.k-disabled) {
    background: #e3ebf8 !important;
    border-color: #aebfe3 !important;
    color: #243d6e !important;
}

.inbound-email-action-ai.is-busy.k-button,
.inbound-email-action-ai.is-busy {
    opacity: 1 !important;
    cursor: wait;
}

.inbound-email-action-ai.is-busy .k-svg-icon,
.inbound-email-action-ai.is-busy .k-icon {
    animation: spin 1s linear infinite;
}

.inbound-email-action-muted.k-button,
.inbound-email-action-muted {
    color: #6b7280 !important;
}

.inbound-email-actions .custom-bt-cancel.inbound-email-action-btn.k-button,
.inbound-email-actions .custom-bt-cancel.inbound-email-action-btn {
    border-color: #f0c9c9 !important;
    background: #fff5f5 !important;
    color: #b42318 !important;
}

.inbound-email-actions .custom-bt-cancel.inbound-email-action-btn.k-button:hover:not(.k-disabled),
.inbound-email-actions .custom-bt-cancel.inbound-email-action-btn:hover:not(:disabled):not(.k-disabled) {
    background: #feeceb !important;
    border-color: #e8b4b4 !important;
    color: #912018 !important;
}

.inbound-email-action-btn.k-disabled,
.inbound-email-action-btn:disabled {
    opacity: .55 !important;
}

.shop-order-grid-caption {
    margin-top: 2px;
    color: var(--shop-order-muted);
    font-size: 11px;
    font-weight: 400;
}

.shop-order-filter {
    width: 100%;
}

.shop-order-grid-action {
    width: 100%;
    text-align: right;
}

.shop-order-grid .k-table-row {
    cursor: pointer;
}

.shop-order-grid .k-table-row:hover td {
    background: #f4f7fb;
}

.shop-order-open-button:hover {
    color: var(--shop-order-accent-dark);
    border-color: #c5d3e4;
    background: var(--shop-order-accent-soft);
}

.shop-order-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.1;
    white-space: nowrap;
}

.shop-order-status-pending {
    color: #765614;
    border-color: #eee0ba;
    background: #f8f1df;
}

.shop-order-status-approved {
    color: #426c25;
    border-color: #d3e6c1;
    background: #eef6e7;
}

.shop-order-status-rejected {
    color: #9a2828;
    border-color: #f0c8c8;
    background: #fff0f0;
}

.shop-order-status-needsinfo {
    color: #236578;
    border-color: #c5e2e9;
    background: #edf8fa;
}

.shop-order-message {
    margin-bottom: 18px;
    font-size: 12px;
}

.shop-order-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.shop-order-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--shop-order-line);
    background: linear-gradient(90deg, var(--shop-order-accent-soft) 0%, #fff 42%);
}

.shop-order-card-header h2,
.shop-order-selection-header h3,
.shop-order-subsection-heading h3 {
    margin: 0;
    color: #181c36;
    font-size: 14px;
    font-weight: 700;
}

.shop-order-card-header p,
.shop-order-selection-header p,
.shop-order-subsection-heading p {
    margin: 3px 0 0;
    color: var(--shop-order-muted);
    font-size: 11px;
}

.shop-order-card-body {
    padding: 18px;
}

.shop-order-data-list {
    padding: 5px 0;
}

.shop-order-data-list > div {
    display: grid;
    grid-template-columns: minmax(125px, .42fr) minmax(0, 1fr);
    gap: 14px;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f1f4;
    font-size: 12px;
}

.shop-order-data-list > div:last-child {
    border-bottom: 0;
}

.shop-order-data-list span {
    color: var(--shop-order-muted);
}

.shop-order-data-list strong {
    min-width: 0;
    color: #343949;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.shop-order-data-list .shop-order-data-total {
    background: var(--shop-order-accent-soft);
}

.shop-order-data-list .shop-order-data-total strong {
    color: var(--shop-order-accent-dark);
    font-size: 14px;
}

.shop-order-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
}

.shop-order-link {
    color: var(--shop-order-accent);
    font-weight: 700;
    text-decoration: none;
}

.shop-order-link:hover {
    color: var(--shop-order-accent-dark);
    text-decoration: underline;
}

.shop-order-note {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    padding: 13px 16px;
    border: 1px solid #d5dde8;
    border-radius: 10px;
    background: #f6f8fb;
    font-size: 12px;
}

.shop-order-note strong {
    flex: 0 0 auto;
    color: var(--shop-order-accent-dark);
}

.shop-order-table {
    width: 100%;
    margin: 0;
    font-size: 12px;
}

.shop-order-table th {
    padding: 9px 14px;
    color: #858b99;
    border-bottom: 1px solid #eceef2;
    background: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.shop-order-table td {
    padding: 10px 14px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f1f4;
}

.shop-order-table tr:last-child td {
    border-bottom: 0;
}

.shop-order-lines-table {
    table-layout: fixed;
}

.shop-order-lines-table .col-pos { width: 6%; }
.shop-order-lines-table .col-article { width: 48%; }
.shop-order-lines-table .col-qty { width: 9%; }
.shop-order-lines-table .col-price { width: 18.5%; }

.shop-order-line-name {
    overflow-wrap: anywhere;
}

.shop-order-line-description {
    margin-top: 2px;
    color: var(--shop-order-muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.shop-order-step {
    margin-bottom: 3px;
    color: var(--shop-order-accent);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.shop-order-compact-alert {
    margin-bottom: 14px;
    padding: 10px 12px;
    font-size: 12px;
}

.shop-order-mapped-customer,
.shop-order-approved-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid #d5dde8;
    border-radius: 10px;
    background: var(--shop-order-accent-soft);
}

.shop-order-mapped-icon {
    display: grid;
    flex: 0 0 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: var(--shop-order-accent);
    font-weight: 800;
}

.shop-order-mapped-customer > div:nth-child(2),
.shop-order-approved-panel > div:first-child {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 2px;
}

.shop-order-approved-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shop-order-mapped-customer span,
.shop-order-approved-panel span {
    color: var(--shop-order-muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.shop-order-mapped-customer strong,
.shop-order-approved-panel strong {
    font-size: 13px;
}

.shop-order-mapped-customer small {
    color: var(--shop-order-muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.shop-order-selection-panel {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--shop-order-line);
    border-radius: 10px;
    background: #fafafb;
}

.shop-order-selection-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.shop-order-selection-close {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 7px;
    color: #737b8c;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
}

.shop-order-selection-close:hover {
    color: #343949;
    background: #eef0f2;
}

.shop-order-match-list {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.shop-order-match {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 12px;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    color: inherit;
    background: #fff;
    text-align: left;
    transition: border-color .13s ease, background-color .13s ease;
}

.shop-order-match:hover:not(:disabled) {
    border-color: #c5d3e4;
    background: #f4f7fb;
}

.shop-order-match span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.shop-order-match strong {
    font-size: 12px;
}

.shop-order-match small {
    color: var(--shop-order-muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.shop-order-match em {
    flex: 0 0 auto;
    color: var(--shop-order-accent);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.shop-order-no-matches {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px dashed #d8dce2;
    border-radius: 8px;
    color: var(--shop-order-muted);
    font-size: 11px;
    text-align: center;
}

.shop-order-manual-customer {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 9px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}

.shop-order-manual-customer > div {
    width: 150px;
}

.shop-order-manual-customer label {
    margin-bottom: 5px;
    color: #667085;
    font-size: 11px;
    font-weight: 650;
}

.shop-order-manual-customer > span {
    display: flex;
    min-height: 31px;
    align-items: center;
    align-self: flex-end;
    color: #9ca3af;
    font-size: 11px;
}

.shop-order-address-review {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e8eaee;
}

.shop-order-subsection-heading {
    margin-bottom: 14px;
}

.shop-order-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.shop-order-primary-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.shop-order-approve-button.custom-bt-save,
.shop-order-detail-page .shop-order-approve-button,
.shop-order-detail-page .shop-order-approve-button.k-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: #9ccc65;
    color: #fff;
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: background-color .15s ease;
}

.shop-order-approve-button.custom-bt-save:hover,
.shop-order-detail-page .shop-order-approve-button:hover:not(:disabled):not(.k-disabled),
.shop-order-detail-page .shop-order-approve-button.k-button:hover:not(.k-disabled) {
    background: #82c23c;
    color: #fff;
    border-color: transparent;
}

.shop-order-detail-page .shop-order-approve-button:disabled,
.shop-order-detail-page .shop-order-approve-button.k-disabled {
    opacity: .55;
}

.shop-order-reject-panel {
    max-width: 580px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e8eaee;
}

.shop-order-reject-panel label {
    margin-bottom: 3px;
    color: #4b5261;
    font-size: 12px;
    font-weight: 700;
}

.shop-order-reject-panel p {
    margin: 0 0 8px;
    color: var(--shop-order-muted);
    font-size: 11px;
}

.shop-order-reject-panel button {
    margin-top: 9px;
}

.shop-order-empty {
    padding: 32px 20px;
    border: 1px solid var(--shop-order-line);
    border-radius: 12px;
    color: var(--shop-order-muted);
    background: #fff;
    text-align: center;
}

.shop-order-confirm-actions {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 10px;
}

@media (max-width: 900px) {
    .shop-order-summary-grid,
    .shop-order-address-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .shop-order-list-header,
    .shop-order-detail-header {
        align-items: flex-start;
        padding: 16px;
    }

    .shop-order-detail-header {
        flex-direction: column;
    }

    .shop-order-data-list > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .shop-order-mapped-customer,
    .shop-order-approved-panel,
    .shop-order-match {
        align-items: stretch;
        flex-direction: column;
    }

    .shop-order-mapped-icon {
        display: none;
    }

    .shop-order-lines-table {
        min-width: 680px;
    }
}

/* Shop shipping-enquiry review */
.shop-enquiry-list-page,
.shop-enquiry-detail-page {
    --shop-enquiry-accent: #28578f;
    --shop-enquiry-accent-dark: #1f456f;
    --shop-enquiry-accent-soft: #eef3f8;
    --shop-enquiry-ink: #181c36;
    --shop-enquiry-muted: #737b8c;
    --shop-enquiry-line: #e2e5e9;
    width: 100%;
    max-width: 1280px;
    padding: 0 0 40px;
    color: var(--shop-enquiry-ink);
}

.shop-enquiry-list-header,
.shop-enquiry-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid var(--shop-enquiry-line);
    border-radius: 10px;
    background: linear-gradient(90deg, var(--shop-enquiry-accent-soft) 0%, #fff 42%);
    box-shadow: none;
}

.shop-enquiry-list-header {
    align-items: flex-end;
}

.shop-enquiry-list-header h1,
.shop-enquiry-detail-header h1 {
    margin: 2px 0 3px;
    color: #181c36;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
}

.shop-enquiry-list-header p,
.shop-enquiry-detail-header p {
    margin: 0;
    color: var(--shop-enquiry-muted);
    font-size: 12px;
}

.shop-enquiry-eyebrow {
    color: var(--shop-enquiry-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.shop-enquiry-detail-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
}

.shop-enquiry-detail-page .btn-nav-back {
    width: 32px;
    height: 32px;
    border: 1px solid #d5dde8;
    border-radius: 8px;
    background: #fff;
    color: #28578f;
    box-shadow: none;
}

.shop-enquiry-detail-page .btn-nav-back:hover {
    border-color: #28578f;
    background: #28578f;
    color: #fff;
}

.shop-enquiry-detail-header-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
}

.shop-enquiry-detail-sibling-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.shop-enquiry-detail-sibling-pos {
    min-width: 40px;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}

.shop-enquiry-detail-page .btn-nav-sibling {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #98a2b3;
    box-shadow: none;
}

.shop-enquiry-detail-page .btn-nav-sibling:hover {
    background: #f3f4f6;
    color: #667085;
}

.shop-enquiry-detail-page .btn-nav-sibling[disabled],
.shop-enquiry-detail-page .btn-nav-sibling:disabled {
    opacity: .35;
    background: transparent;
    color: #c4c9d1;
    box-shadow: none;
    cursor: default;
}

.shop-enquiry-grid-card,
.shop-enquiry-card {
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid var(--shop-enquiry-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(24, 28, 54, .05);
}

.shop-enquiry-grid-card .k-grid {
    border: 0;
}

.shop-enquiry-grid-card .k-grid .k-toolbar {
    border-color: var(--shop-enquiry-line);
    background: linear-gradient(90deg, var(--shop-enquiry-accent-soft) 0%, #fff 42%);
}

.shop-enquiry-grid-card .k-grid .k-grid-header,
.shop-enquiry-grid-card .k-grid .k-table-th,
.shop-enquiry-grid-card .k-grid .k-pager {
    border-color: #e5e7eb;
}

.shop-enquiry-grid-card .k-grid .k-table-td {
    border-color: #eef0f2;
}

.shop-enquiry-list-page .grid-toolbar-header {
    color: #28578f;
    font-size: 16px;
    font-weight: 700;
}

.shop-enquiry-grid-toolbar {
    min-height: 54px;
    padding: 8px 5px;
}

.shop-enquiry-grid-caption {
    margin-top: 2px;
    color: var(--shop-enquiry-muted);
    font-size: 11px;
    font-weight: 400;
}

.shop-enquiry-grid-action {
    width: 100%;
    text-align: right;
}

.shop-enquiry-grid .k-table-row {
    cursor: pointer;
}

.shop-enquiry-grid .k-table-row:hover td {
    background: #f4f7fb;
}

.shop-enquiry-open-button:hover {
    color: var(--shop-enquiry-accent-dark);
    border-color: #c5d3e4;
    background: var(--shop-enquiry-accent-soft);
}

.shop-enquiry-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.1;
    white-space: nowrap;
}

.shop-enquiry-status-pending {
    color: #765614;
    border-color: #eee0ba;
    background: #f8f1df;
}

.shop-enquiry-status-offer {
    color: #426c25;
    border-color: #d3e6c1;
    background: #eef6e7;
}

.shop-enquiry-status-denied {
    color: #9a2828;
    border-color: #f0c8c8;
    background: #fff0f0;
}

.shop-enquiry-message {
    margin-bottom: 18px;
    font-size: 12px;
}

.shop-enquiry-compact-alert {
    margin-bottom: 14px;
    padding: 10px 12px;
    font-size: 12px;
}

.shop-enquiry-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.shop-enquiry-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--shop-enquiry-line);
    background: linear-gradient(90deg, var(--shop-enquiry-accent-soft) 0%, #fff 42%);
}

.shop-enquiry-card-header h2,
.shop-enquiry-selection-header h3,
.shop-enquiry-subsection-heading h3 {
    margin: 0;
    color: #181c36;
    font-size: 14px;
    font-weight: 700;
}

.shop-enquiry-card-header p,
.shop-enquiry-selection-header p,
.shop-enquiry-subsection-heading p {
    margin: 3px 0 0;
    color: var(--shop-enquiry-muted);
    font-size: 11px;
}

.shop-enquiry-card-body {
    padding: 18px;
}

.shop-enquiry-data-list {
    padding: 5px 0;
}

.shop-enquiry-data-list > div {
    display: grid;
    grid-template-columns: minmax(125px, .42fr) minmax(0, 1fr);
    gap: 14px;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f1f4;
    font-size: 12px;
}

.shop-enquiry-data-list > div:last-child {
    border-bottom: 0;
}

.shop-enquiry-data-list span {
    color: var(--shop-enquiry-muted);
}

.shop-enquiry-data-list strong {
    min-width: 0;
    color: #343949;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.shop-enquiry-data-list .shop-enquiry-data-total {
    background: var(--shop-enquiry-accent-soft);
}

.shop-enquiry-data-list .shop-enquiry-data-total strong {
    color: var(--shop-enquiry-accent-dark);
    font-size: 14px;
}

.shop-enquiry-link {
    color: var(--shop-enquiry-accent);
    font-weight: 700;
    text-decoration: none;
}

.shop-enquiry-link:hover {
    color: var(--shop-enquiry-accent-dark);
    text-decoration: underline;
}

.shop-enquiry-note {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    padding: 13px 16px;
    border: 1px solid #d5dde8;
    border-radius: 10px;
    background: #f6f8fb;
    font-size: 12px;
}

.shop-enquiry-note strong {
    flex: 0 0 auto;
    color: var(--shop-enquiry-accent-dark);
}

.shop-enquiry-table {
    width: 100%;
    margin: 0;
    font-size: 12px;
}

.shop-enquiry-table th {
    padding: 9px 14px;
    color: #858b99;
    border-bottom: 1px solid #eceef2;
    background: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.shop-enquiry-table td {
    padding: 10px 14px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f1f4;
}

.shop-enquiry-table tr:last-child td {
    border-bottom: 0;
}

.shop-enquiry-lines-table {
    table-layout: fixed;
}

.shop-enquiry-lines-table .col-pos { width: 6%; }
.shop-enquiry-lines-table .col-article { width: 48%; }
.shop-enquiry-lines-table .col-qty { width: 9%; }
.shop-enquiry-lines-table .col-price { width: 18.5%; }

.shop-enquiry-line-name,
.shop-enquiry-line-description {
    overflow-wrap: anywhere;
}

.shop-enquiry-line-description {
    margin-top: 2px;
    color: var(--shop-enquiry-muted);
    font-size: 11px;
}

.shop-enquiry-step {
    margin-bottom: 3px;
    color: var(--shop-enquiry-accent);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.shop-enquiry-help {
    padding: 12px 18px;
    border-bottom: 1px solid #e8eaee;
    color: #606879;
    background: #fafbfc;
    font-size: 11px;
    line-height: 1.5;
}

.shop-enquiry-mapped-customer,
.shop-enquiry-approved-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid #d5dde8;
    border-radius: 10px;
    background: var(--shop-enquiry-accent-soft);
}

.shop-enquiry-mapped-icon {
    display: grid;
    flex: 0 0 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: var(--shop-enquiry-accent);
    font-weight: 800;
}

.shop-enquiry-mapped-customer > div:nth-child(2),
.shop-enquiry-approved-panel > div:first-child {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 2px;
}

.shop-enquiry-mapped-customer span,
.shop-enquiry-approved-panel span {
    color: var(--shop-enquiry-muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.shop-enquiry-mapped-customer strong,
.shop-enquiry-approved-panel strong {
    font-size: 13px;
}

.shop-enquiry-mapped-customer small {
    color: var(--shop-enquiry-muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.shop-enquiry-approved-actions {
    display: flex;
    gap: 8px;
}

.shop-enquiry-selection-panel {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--shop-enquiry-line);
    border-radius: 10px;
    background: #fafafb;
}

.shop-enquiry-selection-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.shop-enquiry-selection-close {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 7px;
    color: #737b8c;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
}

.shop-enquiry-selection-close:hover {
    color: #343949;
    background: #eef0f2;
}

.shop-enquiry-match-list {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.shop-enquiry-match {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 12px;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    color: inherit;
    background: #fff;
    text-align: left;
}

.shop-enquiry-match:hover:not(:disabled) {
    border-color: #c5d3e4;
    background: #f4f7fb;
}

.shop-enquiry-match span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.shop-enquiry-match strong {
    font-size: 12px;
}

.shop-enquiry-match small {
    color: var(--shop-enquiry-muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.shop-enquiry-match em {
    flex: 0 0 auto;
    color: var(--shop-enquiry-accent);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.shop-enquiry-no-matches {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px dashed #d8dce2;
    border-radius: 8px;
    color: var(--shop-enquiry-muted);
    font-size: 11px;
    text-align: center;
}

.shop-enquiry-manual-customer {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 9px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}

.shop-enquiry-manual-customer > div {
    width: 150px;
}

.shop-enquiry-manual-customer label {
    margin-bottom: 5px;
    color: #667085;
    font-size: 11px;
    font-weight: 650;
}

.shop-enquiry-manual-customer > span {
    display: flex;
    min-height: 31px;
    align-items: center;
    align-self: flex-end;
    color: #9ca3af;
    font-size: 11px;
}

.shop-enquiry-address-review {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e8eaee;
}

.shop-enquiry-subsection-heading {
    margin-bottom: 14px;
}

.shop-enquiry-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.shop-enquiry-primary-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.shop-enquiry-approve-button.custom-bt-save,
.shop-enquiry-detail-page .shop-enquiry-approve-button,
.shop-enquiry-detail-page .shop-enquiry-approve-button.k-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: #9ccc65;
    color: #fff;
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: background-color .15s ease;
}

.shop-enquiry-approve-button.custom-bt-save:hover,
.shop-enquiry-detail-page .shop-enquiry-approve-button:hover:not(:disabled):not(.k-disabled),
.shop-enquiry-detail-page .shop-enquiry-approve-button.k-button:hover:not(.k-disabled) {
    background: #82c23c;
    color: #fff;
    border-color: transparent;
}

.shop-enquiry-detail-page .shop-enquiry-approve-button:disabled,
.shop-enquiry-detail-page .shop-enquiry-approve-button.k-disabled {
    opacity: .55;
}

.shop-enquiry-reject-panel {
    max-width: 580px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e8eaee;
}

.shop-enquiry-reject-panel label {
    margin-bottom: 3px;
    color: #4b5261;
    font-size: 12px;
    font-weight: 700;
}

.shop-enquiry-reject-panel p {
    margin: 0 0 8px;
    color: var(--shop-enquiry-muted);
    font-size: 11px;
}

.shop-enquiry-reject-panel button {
    margin-top: 9px;
}

.shop-enquiry-empty {
    padding: 32px 20px;
    border: 1px solid var(--shop-enquiry-line);
    border-radius: 12px;
    color: var(--shop-enquiry-muted);
    background: #fff;
    text-align: center;
}

.shop-enquiry-confirm-actions {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 10px;
}

@media (max-width: 900px) {
    .shop-enquiry-summary-grid,
    .shop-enquiry-address-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .shop-enquiry-list-header,
    .shop-enquiry-detail-header {
        align-items: flex-start;
        padding: 16px;
    }

    .shop-enquiry-detail-header {
        flex-direction: column;
    }

    .shop-enquiry-data-list > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .shop-enquiry-mapped-customer,
    .shop-enquiry-approved-panel,
    .shop-enquiry-match {
        align-items: stretch;
        flex-direction: column;
    }

    .shop-enquiry-mapped-icon {
        display: none;
    }

    .shop-enquiry-lines-table {
        min-width: 680px;
    }

    .shop-enquiry-approved-actions {
        flex-wrap: wrap;
    }
}

/* Soft MultiSelect / dropdown popup list styling
   Popups render under .k-child-animation-container, so use descendant selectors. */
.k-animation-container .k-popup.k-list-container,
.k-animation-container .k-popup {
    border: 1px solid #e2e5e9 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(24, 28, 54, .14) !important;
    overflow: hidden;
    background: #fff !important;
}

.k-animation-container .k-popup .k-list,
.k-animation-container .k-popup .k-list-content {
    background: #fff !important;
}

.k-animation-container .k-popup .k-list-content:not(.k-virtual-content),
.k-animation-container .k-popup .k-list:not(.k-virtual-list) .k-list-ul {
    padding: 6px !important;
}

.k-animation-container .k-popup .k-virtual-content,
.k-animation-container .k-popup .k-virtual-list .k-list-ul {
    padding: 0 !important;
}

.k-animation-container .k-popup .k-list-item,
.k-animation-container .k-popup .k-list-optionlabel {
    margin: 0 0 2px;
    padding: 9px 12px !important;
    border-radius: 8px;
    border: none !important;
    color: #344054 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.35;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.k-animation-container .k-popup .k-virtual-content .k-list-item,
.k-animation-container .k-popup .k-virtual-list .k-list-item {
    margin: 0;
    padding: 6px 12px !important;
    border-radius: 0;
}

.k-animation-container .k-popup .k-list-item:hover,
.k-animation-container .k-popup .k-list-item.k-hover,
.k-animation-container .k-popup .k-list-optionlabel:hover,
.k-animation-container .k-popup .k-list-optionlabel.k-hover {
    background: #f3f6fa !important;
    background-image: none !important;
    color: #181c36 !important;
}

.k-animation-container .k-popup .k-list-item.k-selected,
.k-animation-container .k-popup .k-selected.k-list-optionlabel,
.k-list-item.k-selected,
.k-selected.k-list-optionlabel {
    background: #f3f6fa !important;
    background-image: none !important;
    color: #28578f !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

.k-animation-container .k-popup .k-list-item.k-selected:hover,
.k-animation-container .k-popup .k-list-item.k-selected.k-hover,
.k-animation-container .k-popup .k-selected.k-list-optionlabel:hover,
.k-animation-container .k-popup .k-selected.k-hover.k-list-optionlabel,
.k-list-item.k-selected:hover,
.k-list-item.k-selected.k-hover,
.k-selected.k-list-optionlabel:hover,
.k-selected.k-hover.k-list-optionlabel {
    background: #f3f6fa !important;
    background-image: none !important;
    color: #28578f !important;
    box-shadow: none !important;
}

.k-animation-container .k-popup .k-list-item.k-focus,
.k-animation-container .k-popup .k-list-item:focus,
.k-animation-container .k-popup .k-focus.k-list-optionlabel,
.k-animation-container .k-popup .k-list-item.k-selected.k-focus,
.k-animation-container .k-popup .k-list-item.k-selected:focus {
    box-shadow: none !important;
}

/* Telerik sizes a list popup to its anchor. The pager page-size dropdown is pinned to 75px
   (telerik-overwrites-2.css), which together with the item padding above leaves too little room
   for the label, so 15/30/50/100 get ellipsized to "1...". min-width only grows popups that are
   narrower than this, so dropdowns with a wider anchor keep their current width. */
.k-animation-container .k-popup.k-list-container {
    min-width: 120px;
}

/* Kept separate: an unsupported :has() would invalidate the whole selector list. Widening the
   container too avoids the popup being clipped while the open animation still has overflow hidden. */
.k-animation-container:has(> .k-child-animation-container > .k-popup.k-list-container) {
    min-width: 120px;
}

/* Inline operation feedback replaces transient Telerik notifications. */
.action-feedback {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: min(100%, 48rem);
    margin: 0.5rem 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid;
    border-radius: 0.4rem;
    animation: action-feedback-enter 180ms ease-out;
}

.action-feedback-floating {
    position: fixed;
    top: 1rem;
    left: 50%;
    z-index: 10004;
    width: min(calc(100vw - 2rem), 48rem);
    margin: 0;
    box-shadow: 0 12px 28px rgb(15 23 42 / 18%);
    transform: translateX(-50%);
    animation: action-feedback-floating-enter 180ms ease-out;
}

.action-feedback-success {
    color: #166534;
    background: #f0fdf4;
    border-color: #86efac;
}

.action-feedback-info {
    color: #1e40af;
    background: #eff6ff;
    border-color: #93c5fd;
}

.action-feedback-warning {
    color: #854d0e;
    background: #fefce8;
    border-color: #fde047;
}

.action-feedback-error {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fca5a5;
}

.action-feedback-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.action-feedback-body {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: baseline;
    min-width: 0;
}

.action-feedback-link {
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: inherit;
}

.action-feedback-link:hover {
    opacity: 0.85;
}

.action-feedback-success .action-feedback-icon {
    animation: action-feedback-success 220ms ease-out;
}

.action-feedback-close {
    margin-left: auto;
    padding: 0 0.2rem;
    border: 0;
    color: inherit;
    background: transparent;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.feedback-action.is-busy .k-svg-icon {
    animation: spin 1s linear infinite;
}

.feedback-action.is-success {
    animation: action-feedback-success 220ms ease-out;
}

/* Permission-denied dialog must sit above nested Telerik windows, chat (10150), and email panels (100001). */
.permission-denied-root {
    --kendo-zindex-overlay: 200000;
    --kendo-zindex-window: 200001;
}

.permission-denied-root .k-overlay,
.permission-denied-root .k-window-wrapper {
    z-index: 200000 !important;
}

.permission-denied-root .k-window,
.permission-denied-window.k-window {
    z-index: 200001 !important;
}

@keyframes action-feedback-enter {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes action-feedback-floating-enter {
    from {
        opacity: 0;
        transform: translate(-50%, -0.35rem);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes action-feedback-success {
    0% {
        transform: scale(0.8);
    }

    70% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1);
    }
}