/* Додатково підхоплюємо SVG-іконки Lucide всередині uk-inline,
   щоб вони були в полі, а не над ним, і мали розмір як у створенні накладної */
:root {
    --erp-z-dropdown: 99999;
}

.uk-inline > svg,
.uk-inline > i[data-lucide],
.uk-inline > span[data-lucide] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 1 !important;
    color: #6b7280;
    stroke: currentColor;
    z-index: 2;
}

.uk-inline > .uk-form-icon {
    z-index: 2;
}

.uk-inline > svg + .uk-input,
.uk-inline > i[data-lucide] + .uk-input,
.uk-inline > span[data-lucide] + .uk-input,
.uk-inline > svg + .uk-select,
.uk-inline > i[data-lucide] + .uk-select,
.uk-inline > span[data-lucide] + .uk-select,
.uk-inline > svg + .uk-textarea,
.uk-inline > i[data-lucide] + .uk-textarea,
.uk-inline > span[data-lucide] + .uk-textarea,
.uk-inline > svg + .uk-search-input,
.uk-inline > i[data-lucide] + .uk-search-input,
.uk-inline > span[data-lucide] + .uk-search-input {
    padding-left: 44px;
}

/* На фокусі просто міняємо колір, але не ховаємо іконку */
.uk-inline:focus-within > svg,
.uk-inline:focus-within > i[data-lucide],
.uk-inline:focus-within > span[data-lucide] {
    color: #1e87f0;
    stroke: currentColor;
}

/* Textarea з іконкою: іконка має бути навпроти першого рядка (як у CRM), а не по центру блоку */
.erp-inline-textarea > .uk-form-icon:not(.uk-form-icon-flip),
.erp-inline-textarea > svg,
.erp-inline-textarea > i[data-lucide],
.erp-inline-textarea > span[data-lucide] {
    top: 10px;
    bottom: auto;
    transform: none;
    height: auto;
    align-items: flex-start;
}
.erp-inline-textarea > .uk-textarea {
    padding-left: 44px;
}

/* Прибираємо будь-які іконки всередині label, якщо такі є */
.uk-form-label i[data-lucide],
.uk-form-label svg {
    display: none !important;
}

/* ERP Phone Input */
.erp-field {
    margin-bottom: 16px;
}
.erp-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.erp-phone {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 12px;
    overflow: visible;
    height: 40px;
}
.erp-phone:focus-within {
    border-color: #4f7cff;
    box-shadow: 0 0 0 3px rgba(79,124,255,.15);
}
.erp-phone__country {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    cursor: pointer;
    border-right: 1px solid #e6e9f2;
    background: #f9fafb;
    user-select: none;
    height: 40px;
}
.erp-phone__country img {
    width: 20px;
    height: 14px;
    border-radius: 2px;
}
.erp-phone__country span {
    font-size: 13px;
    color: #0f172a;
}
.erp-phone__input {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
    min-width: 0;
}
.erp-phone__input::placeholder {
    color: #94a3b8;
}
.erp-phone__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 260px;
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(15,23,42,.06);
    display: none;
    z-index: var(--erp-z-dropdown, 49000);
    max-height: 240px;
    overflow: auto;
}
.erp-phone__dropdown.open {
    display: block;
}
.erp-phone__dropdown div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #0f172a;
}
.erp-phone__dropdown img {
    width: 20px;
    height: 14px;
    border-radius: 2px;
}
.erp-phone__dropdown div:hover {
    background: #f1f5ff;
}

/* ERP Select (dropdown як у виборі країни) */
.erp-select {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 12px;
    overflow: visible;
    width: 100%;
    height: 40px;
    z-index: auto;
}
.erp-select.is-open {
    z-index: var(--erp-z-dropdown, 49000);
}
.erp-select:focus-within {
    border-color: #4f7cff;
    box-shadow: 0 0 0 3px rgba(79,124,255,.15);
}
.erp-select.is-disabled {
    background: #f9fafb;
    cursor: not-allowed;
}
.erp-select__toggle {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    padding: 0 12px;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #0f172a;
    outline: none;
}
.erp-select__toggle:disabled {
    cursor: not-allowed;
    color: #64748b;
}
.erp-select__text {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.erp-select__text.is-placeholder {
    color: #94a3b8;
}
.erp-select__chevron,
.erp-select__chevron svg {
    width: 16px;
    height: 16px;
    color: #64748b;
    flex: 0 0 auto;
}
.erp-select--with-icon .erp-select__toggle {
    padding-left: 44px; /* як у полях з іконкою */
}
.erp-select__native {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.erp-select__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(15,23,42,.06);
    display: none;
    z-index: var(--erp-z-dropdown, 49000);
    max-height: 240px;
    overflow: auto;
}
.erp-select__dropdown.open {
    display: block;
}

.erp-select.drop-up .erp-select__dropdown {
    top: auto;
    bottom: calc(100% + 6px);
}
.erp-select__dropdown .item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #0f172a;
}
.erp-select__dropdown .item:hover {
    background: #f1f5ff;
}
.erp-select__dropdown .item.is-active {
    background: #eff6ff;
}
.erp-select__dropdown .item.disabled,
.erp-select__dropdown .item.is-disabled {
    color: #b91c1c;
    opacity: 0.7;
    cursor: not-allowed;
}
.erp-select__dropdown .item.disabled:hover,
.erp-select__dropdown .item.is-disabled:hover {
    background: transparent;
}

/* Уніфікація автодоповнення (міста/відділення/пошук товарів) під dropdown як у виборі країни */
.erp-autocomplete {
    display: none;
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(15,23,42,.06);
    padding: 6px 12px;
    max-height: 240px;
    overflow: auto;
    z-index: var(--erp-z-dropdown, 49000);
}
.erp-autocomplete > .uk-text-meta,
.erp-autocomplete > .uk-text-small,
.erp-autocomplete > .uk-text-muted {
    padding: 8px 12px 6px;
    margin: 0 -12px;
}
.erp-autocomplete .item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -12px;
    padding: 10px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #0f172a;
}
.erp-autocomplete .item:hover {
    background: #f1f5ff;
}
.erp-autocomplete .item.disabled {
    color: #b91c1c;
    opacity: 0.7;
    cursor: not-allowed;
}
.erp-autocomplete .item.disabled:hover {
    background: transparent;
}

/* Ціни: стара (перекреслена) + нова (для акцій/розпродажів) */
.erp-price-pair {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.erp-price-old {
    text-decoration: line-through;
    opacity: 0.55;
    font-weight: 700;
    font-size: 0.85em;
}
.erp-price-new {
    font-weight: 800;
}

/* ERP Bank Select (реальні логотипи банків + пошук) */
.erp-bank-select {
    position: relative;
    width: 100%;
}
.erp-bank-select__control {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 12px;
    overflow: visible;
    width: 100%;
    height: 40px; /* як .uk-input */
    cursor: pointer;
    user-select: none;
}
.erp-bank-select__control:focus-within {
    border-color: #4f7cff;
    box-shadow: 0 0 0 3px rgba(79,124,255,.15);
}
.erp-bank-select__icon {
    width: 18px;
    height: 18px;
    margin-left: 12px;
    color: #475569;
    flex: 0 0 auto;
}
.erp-bank-select__value {
    flex: 1;
    min-width: 0;
    padding: 0 12px;
    font-size: 14px;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.erp-bank-select__value.is-placeholder {
    color: #94a3b8;
}
.erp-bank-select__input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    border: none;
    outline: none;
    background: transparent;
    color: #0f172a;
}
.erp-bank-select__input::placeholder {
    color: #94a3b8;
}
.erp-bank-select__caret {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-left: 1px solid #e6e9f2;
    height: 40px;
    color: #64748b;
    flex: 0 0 auto;
}
.erp-bank-select__caret svg {
    width: 16px;
    height: 16px;
}
.erp-bank-select__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(26px);
    border: 1px solid #e6e9f2;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(15,23,42,.06);
    display: none;
    z-index: var(--erp-z-dropdown, 49000);
    overflow: hidden;
}
.erp-bank-select__panel.open {
    display: block;
}
.erp-bank-select__search {
    padding: 8px;
    border-bottom: 1px solid rgba(15,23,42,0.08);
    background: rgba(255,255,255,0.96);
}
.erp-bank-select__search-input {
    width: 100%;
    height: 36px;
    border: 1px solid rgba(15,23,42,0.12);
    border-radius: 12px;
    padding: 0 12px;
    font-size: 14px;
    outline: none;
    background: rgba(255,255,255,0.92);
}
.erp-bank-select__search-input:focus {
    border-color: rgba(79,124,255,0.55);
    box-shadow: 0 0 0 3px rgba(79,124,255,0.12);
}
.erp-bank-select__list {
    max-height: 320px;
    overflow: auto;
    padding: 6px;
}
.erp-bank-select__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
}
.erp-bank-select__item:hover {
    background: rgba(79,124,255,0.08);
}
.erp-bank-select__item[hidden] {
    display: none !important;
}
.erp-bank-select__logo {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(15,23,42,0.04);
    border: 1px solid rgba(15,23,42,0.10);
    flex: 0 0 auto;
    overflow: hidden;
}
.erp-bank-select__logo img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}
.erp-bank-select__logo-fallback {
    font-weight: 800;
    font-size: 12px;
    color: #0b1220;
    line-height: 1;
}
.erp-bank-select__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.erp-bank-select__name {
    font-size: 13px;
    color: #0f172a;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.erp-bank-select__sub {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Підказки в модалці доставки клієнта — overlay під полем (не зсовують контент) */
#customer-delivery-modal .erp-autocomplete-anchor {
    position: relative;
    overflow: visible;
}
#customer-delivery-modal #customer-delivery-city-suggestions,
#customer-delivery-modal #customer-delivery-warehouse-suggestions {
    position: absolute !important;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    margin: 0 !important;
    width: auto;
    box-sizing: border-box;
    z-index: var(--erp-z-dropdown, 49000);
}

/* Замовлення: редагування перед відправкою — підказки міст/відділень як overlay (не зсовують контент) */
#order-edit-np-modal .erp-autocomplete-anchor {
    position: relative;
    overflow: visible;
}
#order-edit-np-modal #order-edit-city-suggestions,
#order-edit-np-modal #order-edit-warehouse-suggestions,
#order-edit-np-modal #order-edit-customer-suggestions {
    position: absolute !important;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    margin: 0 !important;
    width: auto;
    box-sizing: border-box;
    z-index: var(--erp-z-dropdown, 49000);
}

/* Замовлення: додавання позиції — підказки товарів як overlay (не зсовують контент) */
#order-edit-add-item-modal .erp-autocomplete-anchor {
    position: relative;
    overflow: visible;
}
#order-edit-add-item-modal #order-edit-product-suggestions {
    position: absolute !important;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    margin: 0 !important;
    width: auto;
    box-sizing: border-box;
    z-index: var(--erp-z-dropdown, 49000);
}

/* Партнер (бронювання/дроп): підказки як у ERP-полях */
.erp-partner-suggest {
    position: relative;
}
.erp-partner-suggest-list {
    position: fixed;
    z-index: var(--erp-z-dropdown, 49000);
    left: 0;
    top: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    margin-top: 4px;
    display: none;
    max-height: 260px;
    overflow-y: auto;
}
.erp-partner-suggest-item {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.erp-partner-suggest-item:hover {
    background: #f1f5f9;
}
.erp-partner-suggest-item[data-action="empty"] {
    cursor: default;
}
.erp-partner-suggest-item strong {
    display: block;
    line-height: 1.2;
    font-size: 13px;
}
.erp-partner-suggest-item small {
    color: #6b7280;
    font-size: 12px;
    display: block;
    margin-top: 1px;
}
.erp-partner-suggest-item i[data-lucide],
.erp-partner-suggest-item svg {
    width: 14px;
    height: 14px;
    color: #1d4ed8;
    flex: 0 0 auto;
}

/* Броні: список активних бронювань у модалці товарів */
.erp-reservations-list {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.erp-reservation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
}
.erp-reservation-row + .erp-reservation-row {
    border-top: 1px solid rgba(15, 23, 42, 0.10);
}
.erp-reservation-left {
    min-width: 0;
}
.erp-reservation-name {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}
.erp-reservation-meta {
    margin-top: 2px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.2;
}
.erp-reservation-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.erp-reservation-time {
    font-size: 12px;
    font-weight: 800;
    color: #0f172a;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    padding: 4px 8px;
    white-space: nowrap;
}
.erp-reservation-create {
    border: 0;
    background: transparent;
    color: #1e40af;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: -0.01em;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 12px;
    transition: background 0.12s ease;
}
.erp-reservation-create:hover {
    background: rgba(15, 23, 42, 0.06);
}
.erp-reservation-create:active {
    background: rgba(15, 23, 42, 0.08);
}
.erp-reservation-create:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.22);
}
.erp-reservation-empty {
    padding: 10px 12px;
    color: #64748b;
    font-size: 12px;
}

/* ERP Date Input (календар як у зразку erp_unified_phone_date_ideal.html) */
.erp-date {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 12px;
    overflow: visible;
    width: 100%;
    height: 40px; /* як .uk-input */
}
.erp-date:focus-within {
    border-color: #4f7cff;
    box-shadow: 0 0 0 3px rgba(79,124,255,.15);
}
.erp-date__icon {
    width: 18px;
    height: 18px;
    margin-left: 12px;
    color: #475569;
    flex: 0 0 auto;
}
.erp-date__input {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer;
    min-width: 0;
}
.erp-date__input::placeholder {
    color: #94a3b8;
}
.erp-date__tail {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-left: 1px solid #e6e9f2;
    cursor: pointer;
    user-select: none;
    align-self: stretch;
    height: 40px;
}
.erp-date__tail svg {
    width: 16px;
    height: 16px;
    color: #64748b;
}

.erp-date__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(26px);
    border: 1px solid rgba(15,23,42,0.14);
    border-radius: 20px;
    box-shadow: 0 36px 84px rgba(15,23,42,0.22);
    display: none;
    z-index: var(--erp-z-dropdown, 49000);
    overflow: hidden;
}
.erp-date__panel.open {
    display: block;
}

.erp-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px;
    border-bottom: 1px solid rgba(15,23,42,0.10);
}
.erp-cal-title {
    font-weight: 650;
    font-size: 14px;
    text-transform: capitalize;
}
.erp-cal-nav {
    display: flex;
    gap: 8px;
}
.erp-cal-btn {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,0.10);
    background: rgba(255,255,255,0.9);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.erp-cal-btn:hover {
    background: rgba(59,130,246,0.06);
}
.erp-cal-btn svg {
    width: 16px;
    height: 16px;
    color: #475569;
}
.erp-cal-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 12px 14px 0;
    text-align: center;
    font-size: 12px;
    color: #6b7280;
}
.erp-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 10px 14px 16px;
    text-align: center;
    gap: 4px;
}
.erp-cal-day {
    border-radius: 12px;
    padding: 10px 0;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}
.erp-cal-day:hover {
    background: rgba(59,130,246,0.08);
}
.erp-cal-day.muted {
    color: #cbd5e1;
    cursor: default;
}
.erp-cal-day.today {
    box-shadow: inset 0 0 0 1.5px rgba(59,130,246,0.70);
}
.erp-cal-day.active {
    background: #3b82f6;
    color: #fff;
    font-weight: 650;
}
.erp-cal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(15,23,42,0.08);
    color: #6b7280;
    font-size: 12px;
}
.erp-cal-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.erp-cal-action {
    border: none;
    background: none;
    color: #3b82f6;
    font-weight: 650;
    cursor: pointer;
}
.erp-cal-action--muted {
    color: #64748b;
    font-weight: 600;
}
.erp-cal-action--muted:hover {
    color: #475569;
}
.erp-cal-action:hover {
    text-decoration: underline;
}

html, body {
    margin:0;
    padding:0;
    background:#ffffff;
    font-family:'Segoe UI', sans-serif;
}

/* Приховуємо системні кнопки автозаповнення контактів/телефону */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    position: absolute;
    right: 0;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #fff inset !important;
    -webkit-text-fill-color: inherit;
    caret-color: inherit;
}

/* Дитячі сліди для стану завантаження */
.erp-loading-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(79, 70, 229, 0.08), 0 6px 16px rgba(0,0,0,0.05);
    border: 1px solid rgba(99,102,241,0.12);
}
.erp-loading-block .erp-loading-text {
    font-size: 13px;
    color: #4b5563;
    letter-spacing: 0.01em;
}
.erp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}
.erp-loader-footprints {
    position: relative;
    width: 78px;
    height: 78px;
    transform: rotate(-15deg);
}
.erp-loader-footprints span {
    position: absolute;
    width: 13px;
    height: 20px;
    background: linear-gradient(135deg, #6ea8ff 0%, #4f79ff 100%);
    border-radius: 60% 40% 38% 62%;
    opacity: 0;
    transform: rotate(16deg);
    animation: erpFootstep 1.4s linear infinite;
    box-shadow:
        6px 2px 0 -4px rgba(0,0,0,0.12),
        -3px 1px 0 -5px rgba(0,0,0,0.08);
}
.erp-loader-footprints span:nth-child(1) { top: 52px; left: 6px;  animation-delay: 0s;   }
.erp-loader-footprints span:nth-child(2) { top: 38px; left: 24px; animation-delay: 0.18s; }
.erp-loader-footprints span:nth-child(3) { top: 24px; left: 42px; animation-delay: 0.36s; }
.erp-loader-footprints span:nth-child(4) { top: 10px; left: 58px; animation-delay: 0.54s; }

@keyframes erpFootstep {
    0%   { opacity: 0; transform: translateY(10px) scale(0.82) rotate(16deg); }
    18%  { opacity: 0.9; transform: translateY(2px) scale(1) rotate(16deg); }
    55%  { opacity: 0.45; }
    100% { opacity: 0; transform: translateY(-6px) scale(1.05) rotate(16deg); }
}

.erp-loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.7), rgba(255,255,255,0.4));
    z-index: 5000;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Маршрут НП у перегляді замовлення */
.erp-route-card {
    position: relative;
}
.erp-route {
    position: relative;
    margin-top: 6px;
    padding-left: 26px;
}
.erp-route::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(180deg, rgba(148,163,184,0.5), rgba(148,163,184,0.15));
}
.erp-route-item {
    position: relative;
    margin-bottom: 12px;
    padding-left: 6px;
}
.erp-route-dot {
    position: absolute;
    left: -18px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5e7eb;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.erp-route-dot--current {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 4px 12px rgba(79,70,229,0.35);
}
.erp-route-item--past .erp-route-dot { background: #d1d5db; }
.erp-route-item--future .erp-route-dot { background: #e0e7ff; }
.erp-route-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 13px;
}
.erp-route-sub {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
}
.erp-route-summary {
    margin-bottom: 10px;
}
.erp-route-cities {
    font-weight: 700;
    color: #0f172a;
}
.erp-route-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}
.erp-route-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(79,70,229,0.12);
    color: #4338ca;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
}
.erp-route-heading {
    font-weight: 700;
    color: #0f172a;
    font-size: 14px;
}
.erp-route-subline {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}
.erp-route-time {
    font-size: 12px;
    color: #6b7280;
}
.erp-route-statusline {
    font-size: 13px;
    color: #111827;
    font-weight: 700;
}

/* Декоративна лінія-розділювач (використовується в накладних) */
.erp-section-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(226,232,240,0), rgba(226,232,240,1), rgba(226,232,240,0));
    margin: 6px 0 10px 0;
}

/* ==================== POS / Каса ==================== */
.erp-pos-shell {
    position: fixed;
    inset: 0;
    max-width: none;
    margin: 0;
    background: radial-gradient(circle at 10% 0, rgba(59,130,246,0.08), transparent 55%),
                radial-gradient(circle at 90% 10%, rgba(16,185,129,0.08), transparent 55%),
                linear-gradient(135deg, #f9fafb 0%, #edf2ff 50%, #f9fafb 100%);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(15,23,42,0.16);
    border: 1px solid rgba(148,163,184,0.35);
    display: flex;
    flex-direction: column;
    z-index: 2500;
}
.erp-pos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px;
    background: rgba(255,255,255,0.95);
    border-radius: 18px 18px 0 0;
    border-bottom: 1px solid rgba(226,232,240,0.9);
}
.erp-pos-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.erp-pos-logo {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: radial-gradient(circle at 30% 0, #4f46e5, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #eef2ff;
    box-shadow: 0 10px 24px rgba(79,70,229,0.45);
}
.erp-pos-logo i[data-lucide] {
    width: 18px;
    height: 18px;
}
.erp-pos-title {
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 13px;
    color: #0f172a;
}
.erp-pos-subtitle {
    font-size: 12px;
    color: #6b7280;
}
.erp-pos-header-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: radial-gradient(circle at 0 0, rgba(255,255,255,0.9), rgba(248,250,252,0.9));
    border: 1px solid rgba(226,232,240,0.9);
    box-shadow: 0 8px 20px rgba(148,163,184,0.35);
}
.erp-pos-header-right > * + * {
    border-left: 1px solid rgba(226,232,240,0.9);
    padding-left: 8px;
}
.erp-pos-shift {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(226,232,240,0.7);
}
.erp-pos-shift-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}
.erp-pos-date-input {
    min-width: 130px;
    border: none !important;
    background: transparent !important;
    padding: 0 0 0 4px !important;
    font-size: 13px;
    height: 24px;
}
.erp-pos-back-btn {
    font-size: 12px;
    padding: 0 10px;
    margin-left: 4px;
    background: rgba(255,255,255,0.95);
    border-color: rgba(209,213,219,0.9);
    box-shadow: 0 4px 10px rgba(148,163,184,0.35);
}
.erp-pos-cashier {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(226,232,240,0.7);
    font-size: 11px;
    min-width: 150px;
}
.erp-pos-cashier .label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--erp-text-meta, #6b7280);
    font-size: 10px;
}
.erp-pos-cashier .value {
    font-weight: 600;
    color: #111827;
}
.erp-pos-shift-btn {
    font-size: 11px;
    padding: 0 10px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: #16a34a;
    color: #ecfdf5;
    box-shadow: 0 8px 18px rgba(34,197,94,0.35);
    white-space: nowrap;
}
.erp-pos-shift-btn.erp-pos-shift-btn--closed {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-color: #ea580c;
    box-shadow: 0 8px 18px rgba(234,88,12,0.38);
}
.erp-pos-header-right .uk-button {
    min-height: 0;
    height: 30px;
    line-height: 1.2;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
}
.erp-pos-body {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(340px, 1.15fr);
    gap: 10px;
    padding: 10px 16px 14px;
    border-radius: 0 0 18px 18px;
}
.erp-pos-body.erp-pos-body--gate {
    display: flex;
    align-items: center;
    justify-content: center;
}
.erp-pos-gate-card {
    width: min(760px, 100%);
}
.erp-pos-gate-card .erp-info-row-grid {
    margin-top: 4px;
}
.erp-pos-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ==================== Продаж (як сторінка модуля) ==================== */
.erp-sales-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.erp-sales-meta .uk-text-meta {
    font-size: 12px;
}
.erp-sales-shift-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.erp-sales-shift-btn i[data-lucide],
.erp-sales-shift-btn svg {
    width: 14px;
    height: 14px;
}
.erp-sales-page .erp-sales-products-list {
    max-height: 340px;
}
.erp-sales-page .erp-sales-cart-table-wrap {
    max-height: 420px;
}
@media (max-width: 960px) {
    .erp-sales-page .erp-sales-products-list {
        max-height: 300px;
    }
    .erp-sales-page .erp-sales-cart-table-wrap {
        max-height: 360px;
    }
}
.erp-pos-toolbar {
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(226,232,240,0.9);
    box-shadow: 0 8px 20px rgba(15,23,42,0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.erp-pos-toolbar-left {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.erp-pos-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.erp-pos-toolbar-btn {
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: radial-gradient(circle at 0 0, #f9fafb, #eef2ff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    min-height: 0;
    height: 26px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(15,23,42,0.08);
    transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.erp-pos-toolbar-btn i[data-lucide] {
    width: 14px;
    height: 14px;
}
.erp-pos-toolbar-btn span {
    white-space: nowrap;
}
.erp-pos-toolbar-btn:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, #e5e7eb 100%);
    box-shadow: 0 6px 14px rgba(59,130,246,0.25);
    transform: translateY(-1px);
}
.erp-pos-toolbar-btn--primary {
    border-color: #2563eb;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 40%, #4f46e5 100%);
    color: #eef2ff;
    box-shadow: 0 8px 20px rgba(37,99,235,0.4);
}
.erp-pos-toolbar-btn--primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 40%, #4338ca 100%);
    box-shadow: 0 10px 24px rgba(30,64,175,0.55);
}
.erp-pos-toolbar-status-label {
    font-size: 11px;
    color: var(--erp-text-meta, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.erp-pos-toolbar-status-badge {
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #e0e7ff;
}
.erp-pos-toolbar-status-badge.erp-pos-toolbar-status--held {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}
.erp-pos-toolbar-status-badge.erp-pos-toolbar-status--active {
    background: #ecfdf5;
    color: #15803d;
    border-color: #bbf7d0;
}
.erp-pos-block {
    background: rgba(255,255,255,0.96);
    border-radius: 14px;
    border: 1px solid rgba(226,232,240,0.9);
    box-shadow: 0 10px 28px rgba(15,23,42,0.12);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.erp-pos-block + .erp-pos-block {
    margin-top: 10px;
}
.erp-pos-block-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.erp-pos-section-title {
    font-weight: 700;
    font-size: 13px;
    color: #0f172a;
}
.erp-pos-section-subtitle {
    font-size: 12px;
    color: #6b7280;
}
.erp-pos-summary-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}
.erp-pos-summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(15,23,42,0.04);
    border: 1px solid rgba(148,163,184,0.7);
    box-shadow: 0 2px 6px rgba(15,23,42,0.08);
    font-size: 11px;
    font-weight: 600;
    color: #111827;
}
.erp-pos-summary-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 0, #22c55e, #16a34a);
}

.erp-pos-summary-icon-btn {
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f9fafb;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15,23,42,0.08);
    padding: 0;
}
.erp-pos-summary-icon-btn i[data-lucide] {
    width: 14px;
    height: 14px;
}
.erp-pos-summary-icon-btn:hover {
    background: #eff6ff;
    box-shadow: 0 4px 10px rgba(59,130,246,0.25);
}
.erp-pos-search {
    margin-top: 6px;
}
.erp-pos-search .uk-form-icon {
    width: 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.erp-pos-search-hint {
    margin-top: 4px;
    font-size: 11px;
    color: var(--erp-text-meta, #6b7280);
}
.erp-pos-products-list {
    margin-top: 8px;
    flex: 1;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px dashed #e5e7eb;
    padding: 6px;
    overflow: auto;
}
.erp-pos-products-empty {
    font-size: 12px;
    color: #6b7280;
    padding: 10px;
}
.erp-pos-products-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    margin-bottom: 6px;
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, 0.22);
    background: linear-gradient(180deg, rgba(238, 242, 255, 0.95), rgba(248, 250, 255, 0.95));
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
    color: #475569;
    font-size: 12px;
}
.erp-pos-products-note b {
    color: #0f172a;
    font-weight: 650;
}
.erp-pos-products-note .meta {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}
.erp-pos-product {
    width: 100%;
    border: none;
    background: #ffffff;
    border-radius: 8px;
    padding: 7px 8px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 2px 4px rgba(15,23,42,0.06);
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.erp-pos-product:last-child {
    margin-bottom: 0;
}
.erp-pos-product:hover {
    background: #f3f4ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(129,140,248,0.18);
}
.erp-pos-product--no-stock {
    border: 1px solid rgba(239,68,68,0.65);
    box-shadow: 0 3px 10px rgba(248,113,113,0.4);
}
.erp-pos-product--no-stock .erp-pos-product-stock {
    color: #dc2626;
    font-weight: 600;
}
.erp-pos-product-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.erp-pos-product-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.10);
    flex: 0 0 auto;
}
.erp-pos-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.erp-pos-product-main {
    flex: 1;
    min-width: 0;
}
.erp-pos-product-name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}
.erp-pos-product-sku {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}
.erp-pos-product-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-left: 8px;
}
.erp-pos-product-price {
    font-weight: 700;
    font-size: 12px;
    color: #16a34a;
}
.erp-pos-product-stock {
    font-size: 11px;
    color: #6b7280;
}
.erp-pos-block-receipt {
    flex: 1;
}
.erp-pos-check-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    margin-top: 4px;
}
.erp-pos-check-table th,
.erp-pos-check-table td {
    font-size: 12px;
}
.erp-pos-receipt-meta {
    font-size: 11px;
    color: var(--erp-text-meta, #6b7280);
    display: flex;
    gap: 8px;
}
.erp-pos-check-summary {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 6px;
    margin-top: 4px;
    border-top: 1px dashed #e5e7eb;
}
.erp-pos-check-summary-item .label {
    font-size: 11px;
    color: #6b7280;
}
.erp-pos-check-summary-item .value {
    font-weight: 700;
    font-size: 14px;
    color: #0f172a;
}
.erp-pos-qty-ctrl {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}
.erp-pos-qty-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: #f9fafb;
    font-size: 14px;
    cursor: pointer;
}
.erp-pos-qty-btn:hover {
    background: #e5e7eb;
}
.erp-pos-qty-val {
    display: inline-block;
    min-width: 20px;
    text-align: center;
    font-size: 12px;
}
.erp-pos-block-payment {
    margin-top: 10px;
}
.erp-pos-pay-methods {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.erp-pos-pay-method {
    flex: 1;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 4px 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}
.erp-pos-pay-method i[data-lucide] {
    width: 14px;
    height: 14px;
}
.erp-pos-pay-method--active {
    background: linear-gradient(135deg, #0f172a 0%, #111827 40%, #1e293b 100%);
    color: #f9fafb;
    border-color: #020617;
    box-shadow: 0 6px 16px rgba(15,23,42,0.45);
}
.erp-pos-pay-grid {
    margin-top: 4px;
    border-radius: 10px;
    background: radial-gradient(circle at 0 0, rgba(243,244,246,0.96), rgba(229,231,235,0.96));
    border: 1px solid rgba(209,213,219,0.9);
    padding: 8px 10px;
    box-shadow: 0 10px 24px rgba(15,23,42,0.12);
}
.erp-pos-pay-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}
.erp-pos-pay-row:last-child {
    margin-bottom: 0;
}
.erp-pos-pay-row .label {
    font-size: 12px;
    color: #4b5563;
}
.erp-pos-pay-row .value {
    font-weight: 700;
    font-size: 16px;
    text-align: right;
    color: #0f172a;
}
.erp-pos-pay-row--result .value {
    color: #16a34a;
}
.erp-pos-pay-row--result .value.erp-pos-change-negative {
    color: #dc2626;
}
.erp-pos-pay-row .field .uk-input {
    height: 30px;
    font-size: 13px;
}
.erp-pos-pay-row--due .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
}
.erp-pos-pay-row--due .value {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
}
.erp-pos-pay-row--quick .label {
    font-size: 11px;
    color: #6b7280;
}
.erp-pos-quick-cash {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}
.erp-pos-quick-cash button {
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.erp-pos-quick-cash button:hover {
    background: #e5f3ff;
    box-shadow: 0 2px 6px rgba(59,130,246,0.25);
    transform: translateY(-1px);
}
.erp-pos-quick-cash button[data-fill="due"] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #eff6ff;
    border-color: #1d4ed8;
}
.erp-pos-quick-cash button[data-fill="due"]:hover {
    box-shadow: 0 4px 10px rgba(37,99,235,0.45);
}
.erp-pos-pay-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}
.erp-pos-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 220px;
    padding: 4px 18px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 45%, #0ea5e9 100%);
    border-color: #16a34a;
    color: #ecfdf5;
    box-shadow: 0 12px 28px rgba(34,197,94,0.45);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    font-weight: 800;
    min-height: 0;
    height: 32px;
}

.erp-pos-customer {
    margin-top: 10px;
}
.erp-pos-customer-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 8px;
}
.erp-pos-customer .label {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 2px;
}
.erp-pos-customer .field .uk-input {
    height: 30px;
    font-size: 13px;
}

.erp-pos-discount {
    margin-top: 10px;
    padding: 6px 8px;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px dashed #e5e7eb;
}
.erp-pos-discount-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-bottom: 4px;
}
.erp-pos-discount-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.erp-pos-discount .label {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 2px;
}
.erp-pos-discount .field .uk-input {
    height: 28px;
    font-size: 13px;
}
.erp-pos-submit-btn:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 45%, #0284c7 100%);
    box-shadow: 0 14px 32px rgba(22,163,74,0.6);
}

.erp-pos-block-summary {
    margin-bottom: 6px;
}
.erp-pos-receipt-preview {
    border-radius: 12px;
    background: #111827;
    color: #f9fafb;
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11px;
    box-shadow: 0 14px 30px rgba(15,23,42,0.7);
    position: relative;
    overflow: hidden;
}
.erp-pos-receipt-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 1px dashed rgba(148,163,184,0.6);
    pointer-events: none;
}
.erp-pos-receipt-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}
.erp-pos-receipt-title {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px;
}
.erp-pos-receipt-preview .erp-pos-receipt-meta {
    font-size: 10px;
    color: #9ca3af;
    display: flex;
    gap: 6px;
}
.erp-pos-receipt-body {
    margin: 4px 0 6px 0;
    border-top: 1px dashed rgba(148,163,184,0.7);
    border-bottom: 1px dashed rgba(148,163,184,0.7);
    padding: 4px 0;
}
.erp-pos-receipt-line {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
}
.erp-pos-receipt-line:last-child {
    margin-bottom: 0;
}
.erp-pos-receipt-line .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.erp-pos-receipt-line .sum {
    font-weight: 600;
}
.erp-pos-receipt-line-muted {
    font-size: 10px;
    color: #9ca3af;
}
.erp-pos-receipt-footer {
    margin-top: 4px;
}
.erp-pos-receipt-footer .row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
}
.erp-pos-receipt-footer .row span:last-child {
    font-weight: 600;
}
.erp-pos-receipt-footer .row.small span {
    font-size: 10px;
}

.erp-pos-block-today {
    margin-top: 8px;
}
.erp-pos-today-meta {
    font-size: 11px;
    color: #6b7280;
}
.erp-pos-today-kpi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 6px;
}
.erp-pos-today-kpi .kpi {
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}
.erp-pos-today-kpi .label {
    font-size: 11px;
    color: #6b7280;
}
.erp-pos-today-kpi .value {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}
.erp-pos-today-list-wrap {
    border-radius: 10px;
    border: 1px dashed #e5e7eb;
    background: #f9fafb;
    max-height: 220px;
    overflow: auto;
    padding: 4px 4px 4px 0;
}
.erp-pos-today-empty {
    padding: 8px 10px;
    font-size: 12px;
    color: #6b7280;
}
.erp-pos-today-list {
    padding: 2px 4px 2px 8px;
}
.erp-pos-today-modal {
    max-width: 640px;
    width: 100%;
}
.erp-pos-today-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 4px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 6px rgba(15,23,42,0.06);
    margin-bottom: 4px;
}
.erp-pos-today-item:last-child {
    margin-bottom: 0;
}
.erp-pos-today-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.erp-pos-today-item-main .number {
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
}
.erp-pos-today-item-main .meta {
    font-size: 11px;
    color: #6b7280;
}
.erp-pos-today-item-right {
    text-align: right;
    font-size: 11px;
}
.erp-pos-today-item-right .sum {
    font-weight: 700;
    color: #0f172a;
}
.erp-pos-today-item-right .badge {
    display: inline-block;
    margin-top: 2px;
}

@media (max-width: 1024px) {
    .erp-pos-body {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(0, auto);
    }
    .erp-pos-column-right {
        margin-top: 8px;
    }
}

/* HEADER */
header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:60px;
    background:#ffffff;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    color:#0f172a;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    z-index:1000;
    border-bottom:1px solid #e6e8f0;
    box-shadow:0 10px 28px rgba(15, 23, 42, 0.08);
}
.header-left {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
.menu-toggle {
    cursor:pointer;
    width:32px;
    height:32px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:8px;
    transition:background 0.25s ease;
}
.menu-toggle:hover { background:rgba(15,23,42,0.06); }
.menu-toggle svg { stroke:#0f172a; width:22px; height:22px; }

.erp-mode-switch {
    display:inline-flex;
    align-items:center;
    gap:2px;
    padding:2px;
    border-radius:999px;
    border:1px solid #e6e8f0;
    background:#f8faff;
    box-shadow:0 10px 24px rgba(15, 23, 42, 0.08);
}
.erp-mode-switch__btn {
    border:none;
    background:transparent;
    cursor:pointer;
    height:28px;
    padding:0 10px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:800;
    color:#475569;
    transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.erp-mode-switch__btn i[data-lucide],
.erp-mode-switch__btn svg {
    width:14px;
    height:14px;
}
.erp-mode-switch__btn.is-active {
    background:#1d4ed8;
    color:#ffffff;
    box-shadow:0 10px 24px rgba(37,99,235,0.18);
}
.erp-mode-switch__btn:hover {
    background:rgba(29, 78, 216, 0.08);
}
.erp-mode-switch__btn.is-active:hover {
    background:#1d4ed8;
}
@media (max-width: 520px) {
    .erp-mode-switch__btn span { display:none; }
    .erp-mode-switch__btn { padding:0 8px; }
}

.company-name {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    font-weight:bold;
    color:#0f172a;
    max-width:46vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.header-page-name { display: none; }
.header-user {
    display:flex;
    align-items:center;
    gap:10px;
}
.header-ai-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.22);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(59, 130, 246, 0.10));
    color: #4f46e5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.header-ai-btn i[data-lucide] { width: 18px; height: 18px; }
.header-ai-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(99, 102, 241, 0.32);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}
.header-ai-btn:active { transform: translateY(0); }
.header-user__avatar {
    width:32px;
    height:32px;
    border-radius:10px;
    background:#e0e7ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:#4338ca;
}
.header-user__meta {
    display:flex;
    flex-direction:column;
    line-height:1.1;
}
.header-user__name { font-weight:700; color:#0f172a; }
.header-user__role {
    font-size:12px;
    color:#64748b;
}
.header-user-menu {
    position: relative;
}
.header-user__trigger {
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 3px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.header-user__trigger:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.header-user-menu.is-open .header-user__trigger {
    background: #f8fafc;
    border-color: #cbd5e1;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08);
}
.header-user__chevron {
    width: 18px;
    height: 18px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease;
}
.header-user__chevron i[data-lucide],
.header-user__chevron svg {
    width: 16px;
    height: 16px;
}
.header-user-menu.is-open .header-user__chevron {
    transform: rotate(180deg);
}
.header-user__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    padding: 8px;
    z-index: 1100;
}
.header-user__dropdown[hidden] {
    display: none !important;
}
.header-user__dropdown-head {
    padding: 8px 10px 10px;
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 4px;
}
.header-user__dropdown-name {
    font-weight: 700;
    color: #0f172a;
}
.header-user__dropdown-role {
    font-size: 12px;
    color: #64748b;
}
.header-user__menu-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: #0f172a;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}
.header-user__menu-item i[data-lucide],
.header-user__menu-item svg {
    width: 16px;
    height: 16px;
    color: #64748b;
}
.header-user__menu-item:hover {
    background: #f8fafc;
}
.header-user__menu-item.is-danger {
    color: #b91c1c;
}
.header-user__menu-item.is-danger i[data-lucide],
.header-user__menu-item.is-danger svg {
    color: #dc2626;
}

.header-pwa {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 2px;
}
.header-pwa__btn {
    height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(37, 99, 235, 0.22);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(30, 135, 240, 0.10));
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.header-pwa__btn i[data-lucide],
.header-pwa__btn svg {
    width: 16px;
    height: 16px;
}
.header-pwa__btn:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.32);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}
.header-pwa__btn:active { transform: translateY(0); }
.header-pwa__ios {
    height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(248, 250, 255, 0.9);
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
@media (max-width: 780px) {
    .header-pwa__btn span { display: none; }
}

.header-shift {
    height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(248, 250, 255, 0.9);
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.header-shift__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
    flex: 0 0 auto;
}
.header-shift__text {
    color: inherit;
}
.header-shift__meta {
    color: #64748b;
    font-weight: 700;
}
.header-shift.is-open {
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(240, 253, 244, 0.92);
    color: #15803d;
}
.header-shift.is-open .header-shift__dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}
.header-shift.is-opening,
.header-shift.is-created,
.header-shift.is-closing {
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(255, 247, 237, 0.94);
    color: #b45309;
}
.header-shift.is-opening .header-shift__dot,
.header-shift.is-created .header-shift__dot,
.header-shift.is-closing .header-shift__dot {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}
.header-shift.is-closed,
.header-shift.is-none {
    border-color: rgba(148, 163, 184, 0.32);
    background: rgba(248, 250, 252, 0.95);
    color: #334155;
}
.header-shift.is-closed .header-shift__dot,
.header-shift.is-none .header-shift__dot {
    background: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
}
.header-shift.is-error {
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(254, 242, 242, 0.9);
    color: #b91c1c;
}
.header-shift.is-error .header-shift__dot {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}
@media (max-width: 780px) {
    .header-shift__meta { display: none; }
    .header-shift { padding: 0 10px; }
}

.header-tax {
    position: relative;
    height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(248, 250, 255, 0.9);
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    min-width: 180px;
    overflow: hidden;
}
.header-tax__label {
    color: #64748b;
    font-weight: 800;
}
.header-tax__value {
    color: inherit;
}
.header-tax__pct {
    margin-left: auto;
    color: #64748b;
    font-weight: 800;
}
.header-tax__bar {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.10);
    overflow: hidden;
    pointer-events: none;
}
.header-tax__bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.95), rgba(16, 185, 129, 0.95));
    transition: width .35s ease;
}
.header-tax--plain {
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    gap: 8px;
}
.header-tax--plain .header-tax__pct {
    margin-left: 0;
}
.header-tax--plain .header-tax__label {
    color: #64748b;
    font-weight: 700;
}
.header-tax--plain i[data-lucide],
.header-tax--plain svg {
    width: 16px;
    height: 16px;
}
.header-tax.is-warn {
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(255, 247, 237, 0.94);
    color: #b45309;
}
.header-tax.is-warn .header-tax__bar-fill {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.95), rgba(249, 115, 22, 0.95));
}
.header-tax.is-danger {
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(254, 242, 242, 0.9);
    color: #b91c1c;
}
.header-tax.is-danger .header-tax__bar-fill {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
}
.header-tax.is-unset {
    color: #334155;
}
.header-tax.is-unset .header-tax__bar-fill {
    background: rgba(148, 163, 184, 0.75);
}
.header-tax.is-error {
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(254, 242, 242, 0.9);
    color: #b91c1c;
}
.header-tax.is-error .header-tax__bar-fill {
    background: rgba(239, 68, 68, 0.80);
}
.header-tax--plain.is-warn,
.header-tax--plain.is-danger,
.header-tax--plain.is-unset,
.header-tax--plain.is-error {
    border: 0;
    background: transparent;
}
@media (max-width: 980px) {
    .header-tax { min-width: 160px; }
}
@media (max-width: 780px) {
    .header-tax { min-width: auto; }
    .header-tax__label { display: none; }
    .header-tax__pct { display: none; }
}

/* Offline UX: елементи, що потребують інтернету */
[data-requires-online="1"].is-disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* SIDEBAR */
:root {
    --sidebar-expanded: 240px;
    --sidebar-collapsed: 50px;
}
.sidebar {
    position:fixed;
    top:60px;
    bottom:40px;
    left:0;
    width:var(--sidebar-expanded);
    background:#ffffff;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    color:#0f172a;
    padding:15px 8px;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    overflow-y:auto;
    box-shadow:4px 0 16px rgba(15, 23, 42, 0.08);
    border-right:1px solid #e6e8f0;
    transition:width .25s ease;
    z-index:900;
}
.erp-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    pointer-events: none;
    z-index: 880;
}
body.erp-sidebar-open .erp-sidebar-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.sidebar-mode[data-sidebar-mode="pos"] { display:none; }
body[data-erp-mode="pos"] .sidebar-mode[data-sidebar-mode="erp"] { display:none; }
body[data-erp-mode="pos"] .sidebar-mode[data-sidebar-mode="pos"] { display:block; }
.sidebar::-webkit-scrollbar { width:0; height:0; }
.sidebar { scrollbar-width: none; -ms-overflow-style: none; }
.sidebar.collapsed { width:var(--sidebar-collapsed); }
.sidebar-link {
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    margin-bottom:6px;
    border-radius:12px;
    text-decoration:none;
    color:#6b7280;
    background:transparent;
    border:1px solid transparent;
    box-shadow:none;
    transition:background-color .2s ease, color .2s ease, border-color .2s ease;
    position:relative;
    z-index:1;
}
.sidebar-link .item-text {
    font-size:14px;
    font-weight:600;
    color:#334155;
}
.sidebar-icon {
    width:28px;
    height:28px;
    border-radius:10px;
    background:transparent;
    border:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#475569;
    flex:0 0 auto;
}
.sidebar-icon svg,
.sidebar-icon i[data-lucide] {
    width:18px;
    height:18px;
    stroke-width:2.1;
}
.sidebar-icon svg,
.sidebar-icon i[data-lucide] {
    width:16px;
    height:16px;
}
.sidebar-link:hover {
    background:#f8fafc;
    border-color:#eef2f7;
}
.sidebar-link:hover .item-text {
    color:#0f172a;
}
.sidebar-link:hover,
.sidebar-link:focus,
.sidebar-link:active {
    text-decoration:none;
}
.sidebar-link.active {
    background:transparent;
    border-color:transparent;
    color:#111827;
    font-weight:600;
}
.sidebar-link.active .sidebar-icon {
    background:#e0e7ff;
    border:1px solid #c7d2fe;
    color:#1e3a8a;
}
.sidebar-link.active .item-text { color:#1e3a8a; }
.sidebar-group { margin-top:12px; }
.sidebar-group:first-child { margin-top:0; }
.sidebar-group + .sidebar-group {
    margin-top:14px;
    padding-top:10px;
    border-top:1px dashed #e2e8f0;
}
.sidebar-section-title {
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#94a3b8;
    padding:6px 12px;
}
.item-text { white-space:nowrap; }

.sidebar.collapsed .item-text { display:none; }
.sidebar.collapsed .sidebar-section-title { display:none; }
.sidebar.collapsed .sidebar-link { justify-content:center; padding:10px; }
.sidebar.collapsed .sidebar-icon { margin:0; }
.sidebar.collapsed .sidebar-link::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    background: #111827;
    color: #ffffff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    transition: opacity .15s ease, transform .15s ease;
}
.sidebar.collapsed .sidebar-link::before {
    content: "";
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    width: 8px;
    height: 8px;
    background: #111827;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity .15s ease;
}
.sidebar.collapsed .sidebar-link:hover::after,
.sidebar.collapsed .sidebar-link:hover::before {
    opacity: 1;
}

/* MAIN */
main {
    margin-top:60px;
    margin-bottom:40px;
    padding:20px;
    margin-left:var(--sidebar-expanded);
    min-height:calc(100vh - 100px);
    transition:margin-left .25s ease;
}
.sidebar.collapsed ~ main { margin-left:var(--sidebar-collapsed); }

/* Таблиці: на мобільному даємо горизонтальну прокрутку без ламання верстки */
.erp-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.erp-table-scroll::-webkit-scrollbar { height: 0; }

/* ==========================================================================
   PWA Kiosk mode (PWA → Каса)
   Працює лише коли JS ставить body[data-pwa-kiosk="1"].
   ========================================================================== */
body[data-pwa-kiosk="1"] header,
body[data-pwa-kiosk="1"] .sidebar,
body[data-pwa-kiosk="1"] footer {
    display: none !important;
}
body[data-pwa-kiosk="1"] .erp-sidebar-overlay { display:none !important; }
body[data-pwa-kiosk="1"] main {
    margin: 0 !important;
    padding: 14px;
    min-height: 100vh;
}
body[data-pwa-kiosk="1"] .sidebar.collapsed ~ main {
    margin-left: 0 !important;
}

.erp-no-scroll { overflow: hidden !important; }

/* ==========================================================================
   Mobile layout (телефон)
   ========================================================================== */
@media (max-width: 980px) {
    header { padding: 0 12px; }
    .company-name { max-width: 42vw; }

    /* Off-canvas sidebar */
    .sidebar {
        bottom: 0;
        width: min(86vw, 320px);
        transform: translateX(-110%);
        transition: transform .25s ease, width .25s ease;
        padding-bottom: calc(15px + 56px);
        z-index: 900;
    }
    .sidebar.collapsed { width: min(86vw, 320px); }
    .sidebar.collapsed .item-text { display: inline; }
    .sidebar.collapsed .sidebar-section-title { display: block; }
    .sidebar.collapsed .sidebar-link { justify-content: flex-start; padding: 10px 12px; }
    .sidebar.collapsed .sidebar-icon { margin: 0; }
    .sidebar.collapsed .sidebar-link::after,
    .sidebar.collapsed .sidebar-link::before { display: none; }
    body.erp-sidebar-open .sidebar { transform: translateX(0); }

    /* Main area */
    main {
        margin-left: 0 !important;
        padding: 14px;
    }
}

@media (max-width: 780px) {
    .company-name { display: block; max-width: 54vw; }
    .header-subject-name { display: none; }
    .header-page-name { display: inline; }
}

@media (max-width: 640px) {
    .header-user__meta { display: none; }
    .header-user__trigger { padding: 3px 6px; }
    .header-user__dropdown { min-width: 210px; }
}

@media (max-width: 520px) {
    header { height: 56px; }
    main { margin-top: 56px; }
    .sidebar { top: 56px; }

    footer { padding: 0 12px; }
    .footer-text { display:none; }
    .footer-left, .footer-right { min-width: 0; }

    /* iOS: не зумити сторінку при фокусі в інпутах */
    input, select, textarea,
    .uk-input, .uk-select, .uk-textarea, .uk-search-input {
        font-size: 16px !important;
    }

    /* Модалки: ширина під телефон */
    .uk-modal-dialog {
        width: calc(100vw - 18px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 18px !important;
    }
    .uk-modal-body { padding: 16px !important; }
}

.erp-pwa-kiosk-fab {
    position: fixed;
    right: calc(env(safe-area-inset-right) + 14px);
    /* У звичайному інтерфейсі не перекриваємо шапку */
    top: calc(env(safe-area-inset-top) + 74px);
    z-index: 3000;
    pointer-events: none;
}
body[data-pwa-kiosk="1"] .erp-pwa-kiosk-fab {
    /* У “кіоск‑інтерфейсі” шапка/меню приховані — можна піднімати кнопку вгору */
    top: calc(env(safe-area-inset-top) + 14px);
}
.erp-pwa-kiosk-fab-btn {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,255,0.98));
    box-shadow: 0 18px 34px rgba(15,23,42,0.16);
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.erp-pwa-kiosk-fab-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(37,99,235,0.35);
    box-shadow: 0 22px 42px rgba(15,23,42,0.20);
}
.erp-pwa-kiosk-fab-btn:active { transform: translateY(0); }
.erp-pwa-kiosk-fab-btn svg { width: 20px; height: 20px; stroke-width: 2; }
body[data-pwa-kiosk="1"] .erp-pwa-kiosk-fab-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* ==========================================================================
   PWA Install (Premium overlay)
   Відображається лише коли JS показує бекдроп.
   ========================================================================== */
.erp-pwa-install-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 25, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 65000;
}
.erp-pwa-install-backdrop.is-hidden { display: none; }

.erp-pwa-install-modal {
    width: 480px;
    max-width: calc(100vw - 32px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 248, 255, 0.88));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 26px;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    padding: 32px 32px 28px;
    animation: erpPwaModalIn .35s cubic-bezier(.2,.8,.2,1);
}

.erp-pwa-install-header { text-align: center; margin-bottom: 22px; }
.erp-pwa-install-app-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, #4a8cff, #6fb1ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .5px;
    box-shadow: 0 14px 30px rgba(74, 140, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.erp-pwa-install-title {
    font-size: 22px;
    font-weight: 650;
    color: #0f1220;
    margin-bottom: 6px;
}
.erp-pwa-install-subtitle {
    font-size: 14.5px;
    line-height: 1.45;
    color: #5b6275;
}

.erp-pwa-install-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 26px 0;
}
.erp-pwa-install-feature {
    background: rgba(255, 255, 255, 0.75);
    border-radius: 14px;
    padding: 14px 14px 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 16px rgba(0, 0, 0, 0.08);
}
.erp-pwa-install-feature-title {
    font-size: 14px;
    font-weight: 600;
    color: #141726;
    margin-bottom: 4px;
}
.erp-pwa-install-feature-text {
    font-size: 13px;
    color: #606780;
    line-height: 1.4;
}

.erp-pwa-install-actions {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.erp-pwa-install-btn-primary {
    height: 50px;
    border-radius: 14px;
    border: none;
    font-size: 15.5px;
    font-weight: 650;
    color: #fff;
    background: linear-gradient(135deg, #4a8cff, #6fb1ff);
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(74, 140, 255, 0.45);
    transition: transform .15s ease, box-shadow .15s ease;
}
.erp-pwa-install-btn-primary:hover { box-shadow: 0 18px 40px rgba(74, 140, 255, 0.55); }
.erp-pwa-install-btn-primary:active { transform: scale(.97); }
.erp-pwa-install-btn-primary[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.erp-pwa-install-btn-secondary {
    background: none;
    border: none;
    font-size: 14px;
    color: #6b728a;
    cursor: pointer;
}
.erp-pwa-install-btn-secondary:hover { text-decoration: underline; }

.erp-pwa-install-note {
    margin-top: 14px;
    font-size: 12.5px;
    color: #7b8198;
    text-align: center;
}

@keyframes erpPwaModalIn {
    from { opacity: 0; transform: translateY(12px) scale(.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 520px) {
    .erp-pwa-install-modal {
        padding: 24px 20px 20px;
        border-radius: 22px;
    }
    .erp-pwa-install-features { grid-template-columns: 1fr; }
}

/* FOOTER */
footer {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:40px;
    background:#ffffff;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    color:#0f172a;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #e6e8f0;
    box-shadow:0 -8px 20px rgba(15, 23, 42, 0.06);
    padding:0 16px;
    z-index: 800;
}
.footer-text {
    font-weight:500;
}
.footer-left, .footer-right {
    display:flex;
    align-items:center;
    gap:10px;
}
.footer-left {
    justify-content:flex-start;
    min-width:120px;
}
.footer-right {
    justify-content:flex-end;
    min-width:120px;
}
.footer-settings-btn, .footer-notify-btn { position:relative; }
.footer-settings-btn {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #e6e8f0;
    border-radius:10px;
    background:#ffffff;
    color:#1d4ed8;
    box-shadow:0 4px 10px rgba(15, 23, 42, 0.06);
    transition:all .2s ease;
    text-decoration:none;
}
.footer-settings-btn:hover {
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(15, 23, 42, 0.12);
}
.footer-settings-btn i { width:16px; height:16px; }
.footer-notify-btn {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border:1px solid #e6e8f0;
    border-radius:10px;
    background:#ffffff;
    color:#1d4ed8;
    box-shadow:0 6px 16px rgba(15, 23, 42, 0.08);
    transition:all .2s ease;
    gap:6px;
    padding:0 6px;
}
.footer-notify-btn:hover {
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(15, 23, 42, 0.12);
}
.footer-notify-btn i {
    width:18px;
    height:18px;
}
.footer-notify-btn svg { width:18px; height:18px; }

@keyframes erp-bell-pop {
    0%   { transform: scale(1) rotate(0deg); }
    30%  { transform: scale(1.18) rotate(-12deg); }
    55%  { transform: scale(0.98) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.footer-notify-btn.is-toast-pop svg{
    transform-origin: 50% 50%;
    animation: erp-bell-pop 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-notify-badge {
    width:10px;
    height:10px;
    border-radius:50%;
    padding:0;
    background:#ef4444;
    color:#ffffff;
    font-size:9px;
    font-weight:700;
    line-height:10px;
    display:none;
    text-align:center;
    position:absolute;
    top:-2px;
    right:-2px;
    box-shadow:0 4px 10px rgba(239,68,68,0.35);
}
.footer-notify-btn.has-new .footer-notify-badge {
    display:inline-block;
}

/* Notification panel */
#erp-notify-overlay {
    position:fixed;
    /* Не перекриваємо футер, щоб кнопка "Сповіщення" могла закривати панель повторним кліком */
    inset:0 0 40px 0;
    background:rgba(15,23,42,0.25);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
    z-index:2200;
    pointer-events:none;
}
#erp-notify-overlay.open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
#erp-notify-panel {
    position:fixed;
    top:70px;
    bottom:70px;
    right:12px;
    width:360px;
    max-width:calc(100vw - 40px);
    background:#ffffff;
    border:1px solid #e6e8f0;
    box-shadow:0 18px 40px rgba(15,23,42,0.12);
    border-radius:16px;
    padding:14px;
    display:flex;
    flex-direction:column;
    transform:translateX(120%);
    transition:transform .28s ease;
    z-index:2300;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
#erp-notify-panel.open {
    transform:translateX(0);
}
@media (max-width: 640px) {
    #erp-notify-panel {
        top: 60px;
        bottom: 40px;
        right: 0;
        width: 100vw;
        max-width: 100vw;
        border-radius: 16px 16px 0 0;
    }
}

/* AI panel */
#erp-ai-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.28);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 2400;
    pointer-events: none;
}
#erp-ai-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
#erp-ai-panel {
    position: fixed;
    top: 70px;
    bottom: 70px;
    right: 12px;
    width: 420px;
    max-width: calc(100vw - 24px);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(120%);
    transition: transform .28s ease;
    z-index: 2500;
}
#erp-ai-panel.open { transform: translateX(0); }
.erp-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.10), rgba(255, 255, 255, 0));
}
.erp-ai-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.erp-ai-title-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.20), rgba(59, 130, 246, 0.12));
    border: 1px solid rgba(99, 102, 241, 0.22);
    color: #4f46e5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
    flex: 0 0 auto;
}
.erp-ai-title-icon i[data-lucide] { width: 18px; height: 18px; }
.erp-ai-title-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.erp-ai-title-main { font-weight: 900; letter-spacing: -0.3px; color:#0f172a; }
.erp-ai-title-sub { font-size: 11px; font-weight: 800; color: #64748b; }
.erp-ai-header-actions { display: inline-flex; align-items: center; gap: 8px; }
.erp-ai-close {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.86);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
}
.erp-ai-close i[data-lucide] { width: 18px; height: 18px; }
.erp-ai-close:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
}
.erp-ai-clear {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.86);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
}
.erp-ai-clear i[data-lucide] { width: 18px; height: 18px; }
.erp-ai-clear:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
}

.erp-ai-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background:
        radial-gradient(160px 160px at 18% 8%, rgba(99, 102, 241, 0.08), transparent 60%),
        radial-gradient(220px 220px at 92% 18%, rgba(59, 130, 246, 0.06), transparent 62%),
        #ffffff;
}
.erp-ai-msg {
    max-width: 86%;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    background: rgba(255,255,255,0.92);
}
.erp-ai-msg.user {
    align-self: flex-end;
    border-color: rgba(99, 102, 241, 0.22);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(59, 130, 246, 0.12));
}
.erp-ai-msg.ai { align-self: flex-start; }
.erp-ai-msg-title {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: -0.25px;
    color: #0f172a;
    margin-bottom: 4px;
}
.erp-ai-msg-text { font-size: 13px; font-weight: 600; color: #334155; white-space: pre-wrap; }
.erp-ai-msg-meta {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    display: flex;
    gap: 8px;
    align-items: center;
}
.erp-ai-msg-meta .dot { width: 4px; height: 4px; border-radius: 999px; background: rgba(100, 116, 139, 0.6); }
.erp-ai-actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.erp-ai-action {
    border: 1px solid rgba(99, 102, 241, 0.22);
    background: rgba(255, 255, 255, 0.86);
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 900;
    font-size: 12px;
    color: #3730a3;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.erp-ai-action:hover {
    transform: translateY(-1px);
    border-color: rgba(99, 102, 241, 0.34);
    background: rgba(99, 102, 241, 0.10);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.erp-ai-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding: 12px 14px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(248,250,252,0.92));
}
.erp-ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.erp-ai-chip {
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.86);
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 900;
    font-size: 12px;
    color: #334155;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}
.erp-ai-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(99, 102, 241, 0.22);
    background: rgba(99, 102, 241, 0.10);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
    color: #3730a3;
}
.erp-ai-form { display: flex; align-items: flex-end; gap: 10px; }
.erp-ai-input {
    flex: 1 1 auto;
    resize: none;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    min-height: 40px;
    max-height: 140px;
    line-height: 1.35;
}
.erp-ai-input:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.42);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14), 0 12px 28px rgba(15, 23, 42, 0.08);
}
.erp-ai-send {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(99, 102, 241, 0.24);
    background: linear-gradient(135deg, #6366f1, #3b82f6);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(99, 102, 241, 0.25);
    transition: transform .15s ease, box-shadow .15s ease;
}
.erp-ai-send i[data-lucide] { width: 18px; height: 18px; }
.erp-ai-send:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(99, 102, 241, 0.30); }
.erp-ai-send:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; transform: none; }
.erp-ai-hint { margin-top: 8px; font-size: 11px; font-weight: 800; color: #64748b; }

@media (max-width: 640px) {
    #erp-ai-panel {
        top: 60px;
        bottom: 40px;
        right: 0;
        width: 100vw;
        max-width: 100vw;
        border-radius: 16px 16px 0 0;
    }
    .erp-ai-chip { width: 100%; justify-content: center; }
}
@media (max-width: 520px) {
    #erp-ai-panel { top: 56px; }
    #erp-notify-panel { top: 56px; }
}
.erp-notify-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding-bottom:10px;
    border-bottom:1px solid #eef1f7;
}
.erp-notify-title {
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    color:#0f172a;
}
.erp-notify-title i {
    width:18px;
    height:18px;
    color:#1d4ed8;
}
.erp-notify-history {
    border:1px solid #e6e8f0;
    background:#f8faff;
    width:32px;
    height:32px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#1d4ed8;
    transition:all .2s ease;
}
.erp-notify-history:hover {
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(15,23,42,0.12);
}
.erp-notify-tabs {
    display:flex;
    gap:8px;
    padding:10px 4px 6px;
}
.erp-notify-tab {
    flex:1;
    height:32px;
    border:1px solid #e6e8f0;
    border-radius:10px;
    background:#f8faff;
    color:#1f2937;
    font-weight:600;
    transition:all .2s ease;
}
.erp-notify-tab.active,
.erp-notify-tab.uk-active,
.erp-settings-tabs-bar .erp-notify-tab[data-settings-tab="general"][data-active="true"],
.erp-settings-tabs-bar .erp-notify-tab[data-settings-tab="store"][data-active="true"],
.erp-settings-tabs-bar .erp-notify-tab[data-settings-tab="stock"][data-active="true"],
.erp-settings-tabs-bar .erp-notify-tab[data-settings-tab="orders"][data-active="true"],
.erp-settings-tabs-bar .erp-notify-tab[data-settings-tab="sales"][data-active="true"],
.erp-settings-tabs-bar .erp-notify-tab[data-settings-tab="notifications"][data-active="true"],
.erp-settings-tabs-bar .erp-notify-tab[data-settings-tab="security"][data-active="true"],
.erp-settings-tabs-bar .erp-notify-tab[data-settings-tab="backup"][data-active="true"],
.erp-settings-tabs-bar .erp-notify-tab[data-settings-tab="advanced"][data-active="true"] {
    background:#1d4ed8;
    color:#ffffff;
    border-color:#1d4ed8;
    box-shadow:0 10px 24px rgba(37,99,235,0.18);
}
.erp-settings-tabs-bar .erp-notify-tab.active,
.erp-settings-tabs-bar .erp-notify-tab.uk-active {
    background:#1d4ed8;
    color:#ffffff;
    border-color:#1d4ed8;
    box-shadow:0 10px 24px rgba(37,99,235,0.18);
}
.erp-notify-close {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #e6e8f0;
    border-radius:10px;
    background:#f7f9ff;
    color:#0f172a;
    transition:all .2s ease;
}
.erp-notify-close:hover {
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(15, 23, 42, 0.12);
}
.erp-settings-close {
    top:14px;
    right:14px;
    width:32px;
    height:32px;
    border-radius:10px;
    border:1px solid #e6e8f0;
    background:#f7f9ff;
    color:#0f172a;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .2s ease;
}
.erp-settings-close:hover {
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(15, 23, 42, 0.12);
}
.erp-notify-body {
    flex:1;
    overflow:auto;
    padding:12px 6px 6px;
}
.erp-notify-empty {
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#6b7280;
    text-align:center;
}
.erp-notify-empty i {
    width:22px;
    height:22px;
    color:#1d4ed8;
}
.erp-notify-item {
    border:1px solid rgba(0,0,0,0.06);
    border-radius:14px;
    padding:12px 14px;
    margin-bottom:12px;
    background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,249,252,0.94));
    box-shadow:0 10px 24px rgba(15,23,42,0.10);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transition:transform .15s ease, box-shadow .15s ease;
}
.erp-notify-item:hover {
    transform:translateY(-1px);
    box-shadow:0 16px 36px rgba(15,23,42,0.16);
}
.erp-notify-item strong {
    display:block;
    margin-bottom:4px;
    color:#0f172a;
}
.erp-notify-item .uk-text-meta {
    color:#6b7280;
}
.erp-notify-item-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}
.erp-notify-item-close {
    border:1px solid #e6e8f0;
    background:#f3f4f6;
    width:24px;
    height:24px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:#6b7280;
    transition:all .15s ease;
    padding:0;
}
.erp-notify-item-close:hover {
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(15,23,42,0.12);
    color:#0f172a;
}
.erp-notify-list {
    display:block;
}
.erp-notify-footer-actions {
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding-top:8px;
    border-top:1px solid #eef1f7;
    margin-top:auto;
}
.erp-notify-footer-actions button {
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #e6e8f0;
    border-radius:12px;
    background:#f8faff;
    color:#1d4ed8;
    transition:all .2s ease;
}
.erp-notify-footer-actions button:hover {
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(15,23,42,0.12);
}
.erp-notify-history-modal {
    max-width:90vw;
    width:1200px;
    border-radius:16px;
    box-shadow:0 18px 40px rgba(15,23,42,0.2);
    display:flex;
    flex-direction:column;
    max-height: calc(100vh - 96px);
}
.erp-notify-history-modal .erp-notify-history-head .uk-margin-small-left {
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.erp-notify-history-modal .erp-notify-history-head h3 {
    margin: 0;
    line-height: 1.15;
}
.erp-notify-history-modal .erp-notify-history-head p {
    margin: 2px 0 0 0;
    line-height: 1.25;
}
.erp-notify-history-modal h3 {
    display:flex;
    align-items:center;
    gap:8px;
}
.erp-notify-history-modal h3 i {
    width:18px;
    height:18px;
    color:#1d4ed8;
}
.erp-notify-history-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.erp-notify-history-body{
    flex: 1 1 auto;
    display:flex;
    flex-direction:column;
    min-height: 0;
}
.erp-notify-history-list{
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
}
.erp-notify-history-tab {
    border:1px solid #e6e8f0;
    border-radius:10px;
    padding:6px 10px;
    background:#f8faff;
    cursor:pointer;
    transition:all .2s ease;
}
.erp-notify-history-tab.active {
    background:#1d4ed8;
    color:#ffffff;
    border-color:#1d4ed8;
    box-shadow:0 10px 24px rgba(37,99,235,0.18);
}
.erp-notify-history-item {
    border:1px solid #e6e8f0;
    border-radius:12px;
    padding:10px 12px;
    margin-bottom:10px;
    background:#ffffff;
    box-shadow:0 6px 16px rgba(15,23,42,0.08);
}
.erp-notify-history-item .meta {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    color:#6b7280;
    font-size:12px;
}

/* Settings modal */
.erp-settings-modal {
    max-width:90vw;
    width:1200px;
    border-radius:16px;
    box-shadow:0 18px 40px rgba(15,23,42,0.18);
    display:flex;
    flex-direction:column;
    max-height: calc(100vh - 96px);
}
.erp-settings-modal-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:8px;
    flex-wrap:wrap;
}
.erp-settings-modal-head-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width: 0;
}
.erp-settings-modal-head-text{
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.erp-settings-modal-head-text .erp-modal-subtitle {
    margin: 2px 0 0 0 !important;
    line-height: 1.25;
}
.erp-settings-modal-head-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex: 1 1 420px;
    min-width: 0;
}
.erp-settings-modal h3 {
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    font-size:18px;
}
.erp-settings-modal h3 i {
    width:18px;
    height:18px;
    color:#1d4ed8;
}
.erp-settings-status {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:#666;
    margin-left:0;
}
.erp-settings-status-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    background:#9e9e9e;
    display:inline-block;
}
.erp-settings-status.is-saving .erp-settings-status-dot {
    background:#1e87f0;
    box-shadow:0 0 0 0 rgba(30,135,240,0.6);
    animation:erpPulse 1.6s infinite;
}
.erp-settings-status.is-saved .erp-settings-status-dot {
    background:#32d296;
    box-shadow:none;
    animation:none;
}
.erp-settings-status.is-error .erp-settings-status-dot {
    background:#f0506e;
    box-shadow:none;
    animation:none;
}
.erp-settings-status.is-error .erp-settings-status-text {
    color:#f0506e;
}
.erp-settings-status.is-saving .erp-settings-status-text {
    color:#1e87f0;
}
.erp-settings-status-text {
    line-height:1.2;
}

@keyframes erpPulse {
    0% { box-shadow:0 0 0 0 rgba(30,135,240,0.6); }
    70% { box-shadow:0 0 0 10px rgba(30,135,240,0); }
    100% { box-shadow:0 0 0 0 rgba(30,135,240,0); }
}
.settings-search--modal {
    min-width:320px;
}
.erp-settings-tabs-bar {
    display:flex;
    gap:8px;
    padding:8px 0 6px;
    flex-wrap:nowrap;
    overflow-x:auto;
}
.erp-settings-tabs-bar .erp-notify-tab {
    flex:0 0 auto;
    min-width:0;
    text-align:center;
    white-space:nowrap;
}
.erp-settings-subtabs {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px;
    padding:4px 4px 4px;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    margin:0 0 8px 0;
    width:auto;
}
.erp-settings-subtabs .erp-notify-tab {
    min-width:110px;
    height:30px;
    padding:0 12px;
    text-align:center;
    border-radius:12px;
}
.erp-settings-subtabs--inline {
    justify-content:flex-end;
    margin:0;
    padding:0;
    gap:6px;
}
.erp-settings-subtabs--inline .erp-notify-tab {
    min-width:100px;
    height:28px;
    padding:0 10px;
}
.erp-settings-section-head {
    display:block;
    width:100%;
    margin-bottom:12px;
}
.erp-settings-section-search {
    min-width:220px;
}
.erp-settings-section-search .uk-input {
    height:36px;
}
.erp-settings-subtab-content {
    display:none;
    margin-top:8px;
}
.erp-settings-subtab-content.erp-settings-subtab-content--active {
    display:block;
}

.erp-settings-mini-title{
    font-size:12px;
    font-weight:700;
    color:#0f172a;
    margin-top:10px;
}
/* основні секції модалки */
.erp-settings-section {
    display:none;
}
.erp-settings-section--active {
    display:block;
}
/* видимість секцій тепер керує UIkit switcher */
.erp-settings-footer button {
    margin-left:6px;
}
.erp-settings-footer {
    display:flex;
    justify-content:flex-end;
    gap:6px;
}
.erp-settings-modal-body {
    padding:0;
    overflow:auto;
    max-height:none;
    min-height:0;
    flex: 1 1 auto;
    background:transparent;
    border-radius:0;
    box-shadow:none;
}
.erp-settings-modal-body .erp-settings-inner {
    padding:16px;
}
}

.login-page {
    background:#f8fafc;
    margin:0;
    overflow:hidden;
}

.erp-login-page {
    margin:0;
    padding:16px;
    height:100vh;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
}

.erp-login-shell {
    width:100%;
    max-width:420px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.erp-login-card {
    width:100%;
    border-radius:14px;
    border:1px solid #e5e7eb;
    background:#ffffff;
    box-shadow:0 10px 30px rgba(15, 23, 42, 0.08);
}

.erp-login-brand {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-align:center;
    margin-bottom:12px;
}

.erp-login-logo {
    width:48px;
    height:48px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    color:#ffffff;
    background:#111827;
    box-shadow:none;
}

.erp-login-title {
    font-weight:700;
    font-size:20px;
    color:#0f172a;
}

.erp-login-sub {
    color:#6b7280;
    font-size:13px;
}

.erp-login-actions {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.erp-login-hint {
    font-size:12px;
    color:#6b7280;
    text-align:center;
}
/* Settings page */
.settings-toolbar {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:10px 12px;
    box-shadow:0 8px 20px rgba(15,23,42,0.06);
}
.settings-pill-toggle {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.settings-pill-toggle a {
    border:1px solid #e5e7eb;
    padding:8px 12px;
    border-radius:10px;
    color:#111827;
    background:#ffffff;
    transition:all .2s ease;
}
.settings-pill-toggle a.active {
    background:#eef2ff;
    border-color:#c7d2fe;
    color:#1d4ed8;
}
.settings-search {
    min-width:260px;
}
.settings-tabs-wrap {
    overflow-x:auto;
}
.settings-tabs {
    display:inline-flex;
    gap:8px;
    padding:6px 0;
}
.settings-tab {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid #e5e7eb;
    background:#ffffff;
    color:#111827;
    white-space:nowrap;
    transition:all .2s ease;
}
.settings-tab.active {
    background:#eef2ff;
    border-color:#c7d2fe;
    color:#1d4ed8;
}
.settings-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.erp-settings-grid {
    /* використовуємо uikit uk-grid, не CSS grid */
}
.erp-settings-block {
    background:#ffffff;
    border:1px solid #e6e8f0;
    border-radius:14px;
    padding:16px;
    box-shadow:0 12px 28px rgba(15,23,42,0.06);
    display:flex;
    flex-direction:column;
}
.erp-settings-block-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}
.erp-settings-block-title {
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    color:#0f172a;
}
.erp-settings-block-description {
    color:#64748b;
    font-size:13px;
}
.erp-settings-badge {
    padding:6px 10px;
    border-radius:10px;
    background:#eef2ff;
    color:#1d4ed8;
    font-weight:600;
    font-size:12px;
}
.erp-form-group {
    margin-bottom:12px;
}
.erp-form-group-inline {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}
.erp-form-label {
    font-weight:600;
    display:block;
    margin-bottom:4px;
    color:#0f172a;
}
.erp-form-help {
    color: var(--erp-text-meta, #6b7280);
    font-size:12px;
    margin-top:4px;
}
.erp-flex-1 {
    flex:1;
}
.erp-icon-16 {
    width:16px;
    height:16px;
    margin-right:6px;
}

/* iOS-like toggle */
.erp-toggle {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
}
.erp-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.erp-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    transition: .3s;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}
.erp-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
}
.erp-toggle input:checked + .erp-toggle-slider {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-color: #7c3aed;
}
.erp-toggle input:checked + .erp-toggle-slider:before {
    transform: translateX(20px);
}

/* Legacy switches -> iOS-like */
.erp-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.erp-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.erp-switch-pill {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    background-color: #e5e7eb;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    transition: .3s;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
}
.erp-switch-pill::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
    transition: .3s;
}
.erp-switch input:checked + .erp-switch-pill {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-color: #7c3aed;
}
.erp-switch input:checked + .erp-switch-pill::after {
    transform: translateX(20px);
}

/* PRODUCTS GRID / TABLE */
.products-header {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}
.products-header h2 { margin:0; }
.header-controls {
    display:flex;
    gap:10px;
    align-items:center;
}
.search-box input { min-width:220px; }
.view-toggle button {
    border:none;
    padding:6px 10px;
    border-radius:8px;
    cursor:pointer;
    background:#ecf0f1;
}
.view-toggle button:hover { background:#dcdde1; }

.products-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:15px;
}
.products-card {
    background:white;
    border-radius:12px;
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
    padding:12px;
    position:relative;
    display:flex;
    flex-direction:column;
}
.products-card .status {
    position:absolute;
    top:10px;
    right:10px;
    padding:3px 8px;
    border-radius:999px;
    font-size:11px;
    color:white;
}
.status.in-stock { background:#2ecc71; }
.status.out-of-stock { background:#e74c3c; }
.status.ordered { background:#f1c40f; }

.products-card-img img {
    width:100%;
    border-radius:10px;
    object-fit:cover;
    max-height:140px;
}
.products-card-header {
    margin-top:8px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.products-card-header h3 {
    margin:0;
    font-size:15px;
}
.product-sku {
    font-size:12px;
    color:#7f8c8d;
}
.product-info {
    margin-top:8px;
    font-size:13px;
}

/* Products table */
.products-table {
    width:100%;
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
}

/* Orders form */
.order-card {
    background:white;
    border-radius:12px;
    padding:15px;
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
}

/* Кнопки + / − у сітці розмірів накладної */
.erp-size-counter {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}
.erp-size-btn-minus,
.erp-size-btn-plus {
    width:36px;
    height:36px;
    border-radius:12px;
    border:1px solid #cfd8e3;
    background:linear-gradient(135deg, #f6f8fb, #e9eef7);
    color:#0f172a;
    box-shadow:0 6px 16px rgba(15, 23, 42, 0.06);
    transition:all 0.18s ease;
    font-weight:700;
    line-height:1;
}
.erp-size-btn-minus:hover,
.erp-size-btn-plus:hover {
    background:linear-gradient(135deg, #4f8df7, #6fc3ff);
    color:#ffffff;
    border-color:#4f8df7;
    box-shadow:0 10px 20px rgba(79, 141, 247, 0.25);
}
.erp-size-btn-minus:active,
.erp-size-btn-plus:active {
    transform:translateY(1px) scale(0.99);
    box-shadow:0 4px 12px rgba(15, 23, 42, 0.16);
}
.erp-size-btn-minus:disabled,
.erp-size-btn-plus:disabled {
    opacity:0.6;
    cursor:not-allowed;
    box-shadow:none;
    background:linear-gradient(135deg, #f0f2f5, #e2e6ed);
}

/* Карточки розмірів у накладних */
.erp-size-grid {
    gap:12px;
}
.erp-size-cell {
    background:linear-gradient(145deg, #ffffff, #f5f7fb);
    border:1px solid #e6ebf3;
    border-radius:14px;
    padding:12px;
    box-shadow:0 10px 30px rgba(15, 23, 42, 0.08);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    transition:all 0.2s ease;
    text-align:center;
}
.erp-size-cell:hover {
    transform:translateY(-2px);
    box-shadow:0 14px 36px rgba(79, 141, 247, 0.18);
    border-color:#c3d7ff;
}
.erp-size-pill {
    width:52px;
    height:52px;
    border-radius:50%;
    background:linear-gradient(135deg, #4f8df7, #6fc3ff);
    color:#fff;
    font-weight:700;
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 20px rgba(79, 141, 247, 0.3);
}
.erp-size-label {
    font-size:12px;
    color:#60708c;
}
.erp-size-qty {
    min-width:28px;
    font-weight:700;
    color:#0f172a;
}

/* Кроки для додавання позиції накладної */
.erp-steps {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.erp-step {
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    background:linear-gradient(145deg, #ffffff, #f6f8fc);
    border:1px solid #e5eaf4;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(15, 23, 42, 0.06);
    transition:all .2s ease;
}
.erp-step-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    background:#9aa5b5;
    display:inline-block;
}
.erp-step-title {
    font-weight:600;
    color:#0f172a;
}
.erp-step.active {
    border-color:#4f8df7;
    background:linear-gradient(135deg, #4f8df7, #6fc3ff);
    box-shadow:0 10px 24px rgba(79, 141, 247, 0.25);
}
.erp-step.active .erp-step-title { color:#fff; }
.erp-step.active .erp-step-dot { background:#fff; }
.erp-step-line {
    flex:1 1 28px;
    height:2px;
    background:linear-gradient(90deg, #c4d4f4, #8bb9ff);
    border-radius:4px;
    min-width:32px;
}
.order-step {
    display:block;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:0;
}

/* Таби кроків на формі позиції накладної */
.erp-tab-nav {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    padding:10px 12px;
    background:#fff;
    border:1px solid #e5eaf3;
    border-radius:14px;
    box-shadow:0 6px 18px rgba(15, 23, 42, 0.06);
}
.erp-tab-button {
    border:1px solid #dfe3eb;
    padding:10px 14px;
    border-radius:12px;
    background:#f7f9fc;
    color:#0f172a;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    transition:all .18s ease;
}
.erp-tab-button:hover {
    border-color:#1e87f0;
    color:#1e87f0;
    background:#eef5ff;
    box-shadow:0 8px 20px rgba(30, 135, 240, 0.18);
}
.erp-tab-button.active {
    border-color:#1e87f0;
    background:#1e87f0;
    color:#fff;
    box-shadow:0 10px 22px rgba(30, 135, 240, 0.25);
}
.erp-step-panel {
    margin-top:14px;
    padding:16px;
    border:1px solid #e5eaf3;
    border-radius:14px;
    background:#fff;
    box-shadow:0 6px 18px rgba(15, 23, 42, 0.06);
}

/* Плашка артикула у хедері форми */
.erp-sku-pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    background:#1e87f0;
    color:#fff;
    border-radius:12px;
    font-weight:700;
    box-shadow:0 8px 18px rgba(30, 135, 240, 0.25);
}
.erp-sku-pill::before {
    content:'#';
    opacity:0.8;
}

/* Видимість іконок на фокусі для lucide */
.uk-inline:focus-within  .uk-form-icon svg { opacity: 1 !important; stroke: #1e87f0 !important; fill: none !important; }

/* Розмір Lucide-іконок у полях введення (щоб не були надто великими) */
.uk-form-icon > svg.lucide,
.uk-form-icon > svg {
    width: 18px;
    height: 18px;
}

/* iOS-style toasts (UIkit.notification) */
.uk-notification { z-index: 50000 !important; }
.uk-notification-top-left,
.uk-notification-top-center,
.uk-notification-top-right,
.uk-notification-bottom-left,
.uk-notification-bottom-center,
.uk-notification-bottom-right { padding: 14px; }

/* Маски (іконки) для псевдо-іконок у тостах */
:root{
    --erp-toast-mask-info: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%2016v-4'/%3E%3Cpath%20d='M12%208h.01'/%3E%3C/svg%3E");
    --erp-toast-mask-check: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M8%2012l2%202%204-4'/%3E%3C/svg%3E");
    --erp-toast-mask-warn: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l10%2018H2L12%203z'/%3E%3Cpath%20d='M12%209v4'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");
    --erp-toast-mask-danger: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M15%209l-6%206'/%3E%3Cpath%20d='M9%209l6%206'/%3E%3C/svg%3E");
}

/* Сумісність: erp-toast-mac лишився у викликах, але вигляд тепер iOS */
.uk-notification-message.erp-toast,
.uk-notification-message.erp-toast-ios,
.uk-notification-message.erp-toast-mac {
    --erp-toast-accent-rgb: 37, 99, 235;           /* default */
    --erp-toast-mask: var(--erp-toast-mask-info);  /* default icon */
    position: relative;
    display: block;
    border-radius: 22px;
    padding: 12px 44px 12px 56px; /* місце під close + псевдо-іконку */
    min-width: 290px;
    max-width: min(460px, 92vw);
    background:
        radial-gradient(140px 140px at 18px 18px, rgba(var(--erp-toast-accent-rgb), 0.18), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,250,252,0.92));
    border: 1px solid rgba(var(--erp-toast-accent-rgb), 0.22);
    box-shadow: 0 18px 52px rgba(15, 23, 42, 0.18);
    color: #0f172a;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
    word-break: break-word;
}

/* Якщо тост вже має власну іконку всередині — прибираємо зайвий відступ */
.uk-notification-message.erp-toast.erp-toast-has-icon,
.uk-notification-message.erp-toast-ios.erp-toast-has-icon,
.uk-notification-message.erp-toast-mac.erp-toast-has-icon { padding-left: 14px; }

/* Акцент/іконка залежно від статусу (і UIkit-класів, і наших erp-toast-*) */
.uk-notification-message.uk-notification-message-success.erp-toast,
.uk-notification-message.uk-notification-message-success.erp-toast-ios,
.uk-notification-message.uk-notification-message-success.erp-toast-mac,
.uk-notification-message.erp-toast-success { --erp-toast-accent-rgb: 34, 197, 94; --erp-toast-mask: var(--erp-toast-mask-check); }
.uk-notification-message.uk-notification-message-warning.erp-toast,
.uk-notification-message.uk-notification-message-warning.erp-toast-ios,
.uk-notification-message.uk-notification-message-warning.erp-toast-mac,
.uk-notification-message.erp-toast-warning { --erp-toast-accent-rgb: 245, 158, 11; --erp-toast-mask: var(--erp-toast-mask-warn); }
.uk-notification-message.uk-notification-message-danger.erp-toast,
.uk-notification-message.uk-notification-message-danger.erp-toast-ios,
.uk-notification-message.uk-notification-message-danger.erp-toast-mac,
.uk-notification-message.erp-toast-danger { --erp-toast-accent-rgb: 239, 68, 68; --erp-toast-mask: var(--erp-toast-mask-danger); }
.uk-notification-message.uk-notification-message-primary.erp-toast,
.uk-notification-message.uk-notification-message-primary.erp-toast-ios,
.uk-notification-message.uk-notification-message-primary.erp-toast-mac,
.uk-notification-message.uk-notification-message-info.erp-toast,
.uk-notification-message.uk-notification-message-info.erp-toast-ios,
.uk-notification-message.uk-notification-message-info.erp-toast-mac,
.uk-notification-message.erp-toast-primary,
.uk-notification-message.erp-toast-info { --erp-toast-accent-rgb: 37, 99, 235; --erp-toast-mask: var(--erp-toast-mask-info); }

/* Псевдо-іконка (для тостів без вбудованої іконки) */
.uk-notification-message.erp-toast:not(.erp-toast-has-icon)::before,
.uk-notification-message.erp-toast-ios:not(.erp-toast-has-icon)::before,
.uk-notification-message.erp-toast-mac:not(.erp-toast-has-icon)::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 12px;
    width: 34px;
    height: 34px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--erp-toast-accent-rgb), 0.22), rgba(var(--erp-toast-accent-rgb), 0.10));
    border: 1px solid rgba(var(--erp-toast-accent-rgb), 0.18);
    box-shadow:
        0 12px 24px rgba(var(--erp-toast-accent-rgb), 0.18),
        inset 0 1px 0 rgba(255,255,255,0.75);
}
.uk-notification-message.erp-toast:not(.erp-toast-has-icon)::after,
.uk-notification-message.erp-toast-ios:not(.erp-toast-has-icon)::after,
.uk-notification-message.erp-toast-mac:not(.erp-toast-has-icon)::after {
    content: '';
    position: absolute;
    left: 14px;
    top: 12px;
    width: 34px;
    height: 34px;
    background: rgb(var(--erp-toast-accent-rgb));
    opacity: 0.92;
    -webkit-mask-image: var(--erp-toast-mask);
    mask-image: var(--erp-toast-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
}

/* Кнопка закриття (UIkit) */
.uk-notification-message.erp-toast .uk-notification-close,
.uk-notification-message.erp-toast-ios .uk-notification-close,
.uk-notification-message.erp-toast-mac .uk-notification-close {
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
    color: #334155;
}
.uk-notification-message.erp-toast .uk-notification-close:hover,
.uk-notification-message.erp-toast-ios .uk-notification-close:hover,
.uk-notification-message.erp-toast-mac .uk-notification-close:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
    color: #0f172a;
}
.uk-notification-message.erp-toast .uk-notification-close svg,
.uk-notification-message.erp-toast-ios .uk-notification-close svg,
.uk-notification-message.erp-toast-mac .uk-notification-close svg { width: 12px; height: 12px; }

/* Контент тоста (наш HTML з erpToast) */
.erp-toast-ios-content { display: flex; flex-direction: column; gap: 8px; }
.erp-toast-ios-head { display: flex; align-items: flex-start; gap: 12px; }
.erp-toast-ios-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.erp-toast-ios-title { font-size: 14px; font-weight: 900; letter-spacing: -0.25px; line-height: 1.1; }
.erp-toast-ios-meta { font-size: 11px; font-weight: 800; color: #64748b; letter-spacing: 0.01em; }
.erp-toast-ios-text { font-size: 13px; color: #334155; font-weight: 600; white-space: pre-wrap; }

/* Розширений блок деталей (key/value або список) */
.erp-toast-ios-details {
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.10);
    display: grid;
    gap: 6px;
}
.erp-toast-ios-detail-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.erp-toast-ios-detail-row .k { color:#64748b; font-weight:800; font-size:12px; }
.erp-toast-ios-detail-row .v { color:#0f172a; font-weight:900; font-size:12px; text-align:right; }
.erp-toast-ios-detail-text { color:#334155; font-weight:600; font-size:12.5px; }

.erp-toast-ios-link{
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(var(--erp-toast-accent-rgb), 0.24);
    background: rgba(255, 255, 255, 0.72);
    color: rgb(var(--erp-toast-accent-rgb));
    font-weight: 900;
    font-size: 12px;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}
.erp-toast-ios-link:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
}

/* Фолбек-розмітка (старі виклики з .erp-toast-line) */
.erp-toast-line { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.erp-toast-module { font-weight: 900; color: #0f172a; letter-spacing: -0.25px; }
.erp-toast-text { font-weight: 600; color: #334155; white-space: pre-wrap; }

/* Фолбек-розмітка (старі виклики з .erp-toast-body) */
.erp-toast-body { display:flex; flex-direction:column; gap:8px; }
.erp-toast-title { font-size: 14px; font-weight: 900; letter-spacing: -0.25px; line-height: 1.1; color:#0f172a; }

/* Іконки у тості */
.erp-toast-icon {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
    stroke: currentColor;
    fill: none;
}
.erp-toast-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--erp-toast-accent-rgb), 0.22), rgba(var(--erp-toast-accent-rgb), 0.10));
    border: 1px solid rgba(var(--erp-toast-accent-rgb), 0.18);
    color: rgb(var(--erp-toast-accent-rgb));
    box-shadow:
        0 12px 24px rgba(var(--erp-toast-accent-rgb), 0.18),
        inset 0 1px 0 rgba(255,255,255,0.75);
    flex: 0 0 auto;
}

/* ==========================================================================
   iOS Fold/Unfold Toast Stack (custom, не UIkit.notification)
   ========================================================================== */
:root{
    --erp-toast-stack-width: 360px;
    --erp-toast-stack-gap: 10px;

    /* Підхоплюємо ваші змінні теми, якщо існують */
    --erp-toast-stack-radius: var(--erp-radius-lg, 20px);
    --erp-toast-stack-surface: var(--erp-color-surface, rgba(255,255,255,.82));
    --erp-toast-stack-border: rgba(255,255,255,.35);

    --erp-toast-stack-shadow: 0 14px 42px rgba(15, 23, 42, .18);
    --erp-toast-stack-text: rgba(17,24,39,.95);
    --erp-toast-stack-muted: rgba(17,24,39,.60);

    --erp-toast-stack-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* “Fold” глибина та зсув */
    --erp-toast-stack-fold-y: 14px;
    --erp-toast-stack-fold-z: 46px;

    /* Unfold: на скільки px тости перекриваються між собою (режим B) */
    --erp-toast-stack-unfold-overlap: 26px;
}

.erp-toast-root{
    position: fixed;
    z-index: 55000;
    width: min(var(--erp-toast-stack-width), calc(100vw - 24px));
    pointer-events: none;
}
.erp-toast-root--br{ right: 18px; bottom: 18px; }
.erp-toast-root--tr{ right: 18px; top: 18px; }

/* У розгорнутому стані даємо стеку доходити до верху екрану */
.erp-toast-root.is-unfolded.erp-toast-root--br{
    top: 0;
    bottom: 18px;
}

.erp-toast-stack{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    transform-style: preserve-3d;
    perspective: 800px;
}

.erp-toast-item{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: auto;
    transform: translateY(0) translateZ(0);
    transition: transform 600ms var(--erp-toast-stack-ease), opacity 220ms ease;
    will-change: transform;
}

.erp-toast-anim{
    transform: translate3d(0,0,0) scale(1);
    opacity: 1;
    transition: transform 600ms var(--erp-toast-stack-ease), opacity 220ms ease;
    will-change: transform, opacity;
}
.erp-toast-item.is-entering{ pointer-events: none; }
.erp-toast-item.is-entering .erp-toast-anim{
    opacity: 0;
    transform: translate3d(var(--erp-toast-entry-x, 0px), var(--erp-toast-entry-y, 0px), 0) scale(var(--erp-toast-entry-scale, 0.25));
}

.erp-toast-card{
    display: grid;
    grid-template-columns: 28px 1fr 24px;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border-radius: var(--erp-toast-stack-radius);
    background: var(--erp-toast-stack-surface);
    border: 1px solid var(--erp-toast-stack-border);
    box-shadow: var(--erp-toast-stack-shadow);
    color: var(--erp-toast-stack-text);
}

.erp-toast-stack-icon{
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.erp-toast-stack-icon svg{
    width: 18px;
    height: 18px;
}

.erp-toast-stack-head{
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 28px; /* під висоту іконки */
}
.erp-toast-stack-title{
    min-width: 0;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -0.25px;
    line-height: 1.1;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.erp-toast-stack-meta{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--erp-toast-stack-muted);
    margin: 0;
    line-height: 1;
    margin-left: auto;
}
.erp-toast-stack-meta--abs{
    position: absolute;
    top: 0;
    right: 0;
    margin-left: 0;
}
.erp-toast-stack-app-name{
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.erp-toast-stack-time{ white-space: nowrap; }

.erp-toast-stack-content{
    min-width: 0;
    position: relative;
}
.erp-toast-stack-content--absmeta{
    /* резерв під таймер, щоб заголовок не "підлазив" під нього */
    padding-right: 54px;
}
.erp-toast-stack-body{ min-width: 0; }

.erp-toast-stack-close{
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    color: var(--erp-toast-stack-muted);
    line-height: 1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0;
}
.erp-toast-stack-close:hover{
    background: rgba(0,0,0,.06);
    color: rgba(0,0,0,.80);
}

.erp-toast-stack-more{
    margin-top: 8px;
    font-size: 12px;
    color: var(--erp-toast-stack-muted);
    display: none;
}

.erp-toast-card--noicon{
    grid-template-columns: 0 1fr 24px;
}
.erp-toast-card--noicon .erp-toast-stack-icon{
    display: none;
}

/* Статуси (акцент фону іконки) */
.erp-toast-item--success .erp-toast-stack-icon{ background: rgba(34,197,94,.14); color: #16a34a; }
.erp-toast-item--warning .erp-toast-stack-icon{ background: rgba(245,158,11,.16); color: #b45309; }
.erp-toast-item--danger  .erp-toast-stack-icon{ background: rgba(239,68,68,.14); color: #dc2626; }
.erp-toast-item--primary .erp-toast-stack-icon{ background: rgba(59,130,246,.14); color: #2563eb; }

/* --------------------------
   FOLDED (складений стек)
   -------------------------- */
.erp-toast-stack:not(.is-unfolded) .erp-toast-item:nth-child(1){ z-index: 10; }
.erp-toast-stack:not(.is-unfolded) .erp-toast-item:nth-child(2){
    z-index: 9;
    transform: translateY(calc(var(--erp-toast-stack-fold-y) * -1)) translateZ(calc(var(--erp-toast-stack-fold-z) * -1));
}
.erp-toast-stack:not(.is-unfolded) .erp-toast-item:nth-child(3){
    z-index: 8;
    transform: translateY(calc(var(--erp-toast-stack-fold-y) * -2)) translateZ(calc(var(--erp-toast-stack-fold-z) * -2));
}
.erp-toast-stack:not(.is-unfolded) .erp-toast-item:nth-child(4){
    z-index: 7;
    opacity: .65;
    transform: translateY(calc(var(--erp-toast-stack-fold-y) * -3)) translateZ(calc(var(--erp-toast-stack-fold-z) * -3));
}
.erp-toast-stack:not(.is-unfolded) .erp-toast-item:nth-child(n+5){
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(var(--erp-toast-stack-fold-y) * -4)) translateZ(calc(var(--erp-toast-stack-fold-z) * -4));
}

/* Ховаємо контент у “задніх” картках (видно лише підкладку) */
.erp-toast-stack:not(.is-unfolded) .erp-toast-item:nth-child(n+2) .erp-toast-stack-meta,
.erp-toast-stack:not(.is-unfolded) .erp-toast-item:nth-child(n+2) .erp-toast-stack-body,
.erp-toast-stack:not(.is-unfolded) .erp-toast-item:nth-child(n+2) .erp-toast-stack-more{
    opacity: 0;
}

/* Різні “скляні” опациті для глибини */
.erp-toast-stack:not(.is-unfolded) .erp-toast-item:nth-child(2) .erp-toast-card{ background: rgba(255,255,255,.74); }
.erp-toast-stack:not(.is-unfolded) .erp-toast-item:nth-child(3) .erp-toast-card{ background: rgba(255,255,255,.64); }
.erp-toast-stack:not(.is-unfolded) .erp-toast-item:nth-child(4) .erp-toast-card{
    background: rgba(255,255,255,.52);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
}

/* --------------------------
   UNFOLDED (розгорнутий)
   -------------------------- */
.erp-toast-stack.is-unfolded .erp-toast-item{
    opacity: 1;
    pointer-events: auto;
    /* Реальний offset рахує JS і записує у --erp-toast-unfold-y (негативні px) */
    transform: translate3d(0, calc(var(--erp-toast-unfold-y, 0px) + var(--erp-toast-scroll, 0px)), 0);
}
.erp-toast-stack.is-unfolded.is-scrolling .erp-toast-item{
    transition: none !important; /* під час wheel‑scroll не "пливе" через easing */
}

@media (prefers-reduced-motion: reduce){
    .erp-toast-item{ transition: none !important; }
    .erp-toast-anim{ transition: none !important; }
    .erp-toast-item.is-entering .erp-toast-anim{ opacity: 1; transform: none; }
}

/* Mac-style confirm modals */
.erp-confirm-modal {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,255,0.98));
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 40px rgba(15,23,42,0.18);
}
.erp-confirm-modal.uk-modal-body { padding: 24px 22px; }
.erp-confirm-modal .uk-modal-close-default { top: 12px; right: 12px; }
.erp-confirm-modal .uk-flex { gap: 12px; }
.erp-confirm-content { margin-top: 4px; }
.erp-confirm-modal .erp-confirm-content .uk-margin-small-left {
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Деякі модалки не обгортають хедер у .erp-confirm-content — вирівнюємо заголовок по іконці все одно */
.erp-confirm-modal .erp-modal-icon + .uk-margin-small-left,
.erp-modal-dialog .erp-modal-icon + .uk-margin-small-left {
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.erp-confirm-modal .erp-confirm-content h3 {
    margin: 0;
    line-height: 1.15;
}
.erp-confirm-modal .erp-confirm-content p {
    margin: 2px 0 0 0;
    line-height: 1.25;
}
.erp-confirm-modal .erp-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(239,68,68,0.12);
    color: #b91c1c;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.erp-confirm-modal .erp-modal-icon--danger { background: rgba(239,68,68,0.12); color:#b91c1c; }
.erp-confirm-modal h3 { font-size: 20px; margin-bottom: 4px; letter-spacing: -0.2px; }
.erp-confirm-modal p { color:#4b5563; margin-top: 4px; }
.erp-confirm-modal .uk-button:not(.erp-icon-button):not(.erp-pos-icon-btn):not(.erp-pos-toolbar-btn):not(.erp-pos-summary-icon-btn):not(.erp-hold-restore-btn):not(.uk-icon-button) {
    border-radius: 999px !important;
    padding: 8px 16px;
    font-weight: 600;
}
.erp-confirm-modal .uk-button-danger {
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #fff;
    border: none;
    box-shadow: 0 12px 24px rgba(239,68,68,0.25);
}
.erp-confirm-modal .erp-modal-icon--warning { background: rgba(245,158,11,0.12); color:#b45309; }
.erp-confirm-modal .erp-modal-icon--info { background: rgba(59,130,246,0.12); color:#1d4ed8; }
.erp-confirm-modal .erp-modal-icon--success { background: rgba(34,197,94,0.12); color:#15803d; }
.erp-confirm-modal .erp-modal-icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 1.8;
}
.erp-modal-w-sm { width: 560px; max-width: calc(100vw - 40px); }
.erp-modal-w-md { width: 720px; max-width: calc(100vw - 40px); }
.erp-modal-w-lg { width: 860px; max-width: calc(100vw - 40px); }
.erp-modal-w-xl { width: 980px; max-width: calc(100vw - 40px); }
.erp-modal-w-2xl { width: 1280px; max-width: 96vw; }
.erp-modal-full {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0 !important;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}
.erp-modal-full.uk-modal-body { padding: 20px 24px; }
#inv-reasons-modal .erp-modal-full {
    width: min(1150px, 94vw);
    max-width: 94vw;
    height: auto;
    max-height: 88vh;
    margin: 6vh auto !important;
    border-radius: 18px;
    box-shadow: 0 22px 48px rgba(15,23,42,0.22);
}
#inv-reasons-modal .erp-modal-full.uk-modal-body { padding: 22px 24px; }
#inv-reasons-modal .inv-reasons-scroll {
    flex: 1;
    min-height: 0;
    max-height: calc(70vh - 120px);
    overflow: auto;
}

#inv-reasons-modal .uk-margin-top.uk-flex {
    gap: 10px;
    margin-top: 14px;
}

#inv-reasons-modal .uk-margin-top.uk-flex .uk-button-default,
#inv-reasons-modal .uk-margin-top.uk-flex .uk-button-danger {
    padding: 10px 18px;
    border-radius: 10px;
}

#inv-reasons-modal .uk-button {
    min-width: 132px;
}
.erp-confirm-modal .uk-button-default {
    background: rgba(255,255,255,0.9);
    border: 1px solid #e2e8f0;
    color: #1f2937;
    box-shadow: 0 10px 22px rgba(15,23,42,0.12);
}
.erp-confirm-modal .uk-flex-right { justify-content: flex-end; gap: 10px; }

/* Базовий мак-стиль для всіх інших модалок через erp-modal-dialog */
.erp-modal-dialog {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,255,0.98));
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 40px rgba(15,23,42,0.18);
}
.erp-modal-dialog .uk-modal-body { padding: 22px 20px; }
.erp-modal-dialog .uk-modal-close-default { top: 12px; right: 12px; }
.erp-modal-dialog .uk-button { border-radius: 12px; }
.erp-modal-dialog .uk-button-primary { box-shadow: 0 10px 22px rgba(30,135,240,0.18); }
.erp-modal-dialog .uk-button-default {
    background: rgba(255,255,255,0.9);
    border: 1px solid #e2e8f0;
    color: #1f2937;
    box-shadow: 0 10px 20px rgba(15,23,42,0.12);
}

/* KPI / статистика — мак-стиль */
.erp-stat-card { background: transparent; display: block; margin: 0; }
.erp-stat-card-inner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background:
        linear-gradient(140deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35)),
        linear-gradient(200deg, rgba(124,58,237,0.12), rgba(14,165,233,0.10));
    border: 1px solid rgba(255,255,255,0.4);
    color: #0f172a;
    box-shadow:
        0 14px 32px rgba(15,23,42,0.10),
        0 0 0 1px rgba(255,255,255,0.16) inset;
}
.erp-stat-card-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,0.85), transparent 42%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.25), transparent 55%),
        linear-gradient(120deg, rgba(255,255,255,0.12), rgba(255,255,255,0));
    pointer-events: none;
}
.erp-stat-card-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 140% at 50% 120%, rgba(99,102,241,0.12), transparent 65%);
    pointer-events: none;
}
.erp-stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    font-weight: 700;
    margin-bottom: 4px;
}
.erp-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}
.erp-stat-meta { color: #64748b; font-size: 12px; margin-top: 4px; }
.erp-stat-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eff4ff, #e0e7ff);
    border: 1px solid rgba(224,231,255,0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(59,130,246,0.18);
    color: #1e3a8a;
}
.erp-stat-icon i,
.erp-stat-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.7;
}

/* Скломорфний контейнер для KPI у хедерах/панелях */
.erp-stats,
.erp-stats-secondary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    padding: 6px;
    border-radius: 18px;
    background: linear-gradient(220deg, rgba(124,58,237,0.08) 0%, rgba(236,72,153,0.06) 45%, rgba(255,255,255,0) 75%);
    border: 0;
    box-shadow: none;
}
.erp-stats > .erp-stat-card,
.erp-stats-secondary > .erp-stat-card {
    padding: 0;
    position: relative;
}

.erp-stat-card--soft .erp-stat-card-inner {
    background: linear-gradient(135deg, #ffffff 0%, #f6f7fb 100%);
    border-style: dashed;
    border-color: #e5e7eb;
    box-shadow: 0 12px 28px rgba(15,23,42,0.08);
}

.erp-home-kpi-card {
    border: none;
    background: #ffffff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: none;
    border: 0;
    backdrop-filter: none;
}
.erp-home-kpi-label {
    font-weight: 700;
    color: #0f172a;
    font-size: 15px;
    margin-bottom: 6px;
}
.erp-home-kpi-value {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}
.erp-home-kpi-sub { color: #64748b; font-size: 13px; margin-top: 4px; }
.erp-home-kpi-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(37,99,235,0.08);
    color: #1d4ed8;
    font-weight: 700;
    border: 1px solid rgba(37,99,235,0.12);
    box-shadow: none;
}

/* Home quick actions (v5 experimental premium FX, scaled down) */
.erp-home-action {
    --acc: #6d5efc;

    --stroke: rgba(14,25,55,0.10);
    --stroke2: rgba(14,25,55,0.16);

    --text: #0d1321;
    --muted: rgba(13,19,33,0.64);
    --muted2: rgba(13,19,33,0.48);

    --shadow: 0 22px 70px rgba(12,22,48,0.14);
    --shadow2: 0 12px 34px rgba(12,22,48,0.12);
    --shadow3: 0 8px 18px rgba(12,22,48,0.10);

    --r1: 22px;

    /* Scale tuning (smaller than the v5 mock) */
    --pad: 14px;
    --minh: 104px;
    --icon: 44px;
    --iconPad: 8px;
    --title: 14.5px;
    --sub: 11.75px;
    --chip: 11.5px;

    --sparkOpacity: 0.38;
    --sparkOpacityHover: 0.58;
    --sparkStrokeW: 2.6;

    /* Watermark tuning */
    --wmOpacity: 0.11;
    --wmOpacityHover: 0.15;
    --wmBlur: 0px;

    /* Experimental FX toggles (set to 0 to disable) */
    --fxRim: 1;
    --fxPattern: 1;
    --fxSparkGlow: 1;

    /* Strength */
    --rimOpacity: 0.22;
    --patternOpacity: 0.065;
    --sparkGlowOpacity: 0.22;

    appearance: none;
    width: 100%;
    min-height: var(--minh);
    padding: var(--pad);
    border-radius: var(--r1);
    border: 1px solid var(--stroke);
    background:
        radial-gradient(760px 240px at 18% 18%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 62%),
        radial-gradient(560px 220px at 92% 0%, rgba(255,255,255,0.26), transparent 58%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--acc) 7%, rgba(255,255,255,0.70)) 0%,
            rgba(255,255,255,0.56) 28%,
            rgba(255,255,255,0.44) 60%,
            color-mix(in srgb, var(--acc) 8%, rgba(255,255,255,0.42)) 100%);
    box-shadow: var(--shadow3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, filter 0.16s ease;
    position: relative;
    text-align: left;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 12px;
    touch-action: manipulation;
}
.erp-home-action p { margin: 0; }

@media (prefers-color-scheme: dark) {
    .erp-home-action {
        --stroke: rgba(255,255,255,0.10);
        --stroke2: rgba(255,255,255,0.16);

        --text: #eef3ff;
        --muted: rgba(238,243,255,0.66);
        --muted2: rgba(238,243,255,0.46);

        --shadow: 0 26px 86px rgba(0,0,0,0.50);
        --shadow2: 0 14px 38px rgba(0,0,0,0.46);
        --shadow3: 0 8px 18px rgba(0,0,0,0.36);

        --sparkOpacity: 0.34;
        --sparkOpacityHover: 0.52;

        --rimOpacity: 0.18;
        --patternOpacity: 0.055;
        --sparkGlowOpacity: 0.18;

        background:
            radial-gradient(760px 240px at 18% 18%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 62%),
            radial-gradient(520px 240px at 92% 0%, rgba(255,255,255,0.10), transparent 60%),
            linear-gradient(135deg,
                rgba(14,22,44,0.68) 0%,
                rgba(14,22,44,0.54) 38%,
                rgba(14,22,44,0.46) 64%,
                color-mix(in srgb, var(--acc) 10%, rgba(14,22,44,0.44)) 100%);
    }
}

.erp-home-action:hover {
    transform: translateY(-2px);
    border-color: var(--stroke2);
    box-shadow: var(--shadow);
    filter: saturate(1.06) contrast(1.02);
}
.erp-home-action:active {
    transform: translateY(1px) scale(0.995);
    box-shadow: var(--shadow3);
}
.erp-home-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent), var(--shadow);
    border-color: color-mix(in srgb, var(--acc) 28%, var(--stroke2));
}

/* Gloss sweep */
.erp-home-action::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.30) 18%, transparent 36%);
    transform: translateX(-120%);
    opacity: 0;
    pointer-events: none;
}
.erp-home-action:hover::before {
    opacity: 0.42;
    animation: erp-home-action-sweep 1.1s ease;
}
@keyframes erp-home-action-sweep {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

/* Micro-grain */
.erp-home-action::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 3px 3px;
    mix-blend-mode: overlay;
    opacity: 0.18;
    pointer-events: none;
}

/* Experimental FX: rim light */
.erp-home-action .rim {
    position: absolute;
    inset: 0;
    border-radius: var(--r1);
    pointer-events: none;
    opacity: calc(var(--fxRim) * var(--rimOpacity));
    background:
        radial-gradient(420px 220px at 0% 18%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 62%),
        radial-gradient(420px 220px at 100% 80%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 64%);
    -webkit-mask:
        linear-gradient(#000,#000) content-box,
        linear-gradient(#000,#000);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    filter: saturate(1.1);
}

/* Experimental FX: micro pattern */
.erp-home-action .pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: calc(var(--fxPattern) * var(--patternOpacity));
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 20l6-6 4 4 7-7'/%3E%3Cpath d='M26 11h6v6'/%3E%3Cpath d='M11 39h18'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 92px 92px;
    background-position: 18px 22px;
    transform: rotate(-10deg) scale(1.05);
}
@media (prefers-color-scheme: light) {
    .erp-home-action .pattern {
        mix-blend-mode: multiply;
        opacity: calc(var(--fxPattern) * (var(--patternOpacity) + 0.01));
        filter: contrast(1.05);
    }
}

/* Watermark */
.erp-home-action .wm {
    position: absolute;
    left: -24px;
    top: -16px;
    width: 168px;
    height: 168px;
    opacity: var(--wmOpacity);
    transform: rotate(8deg);
    pointer-events: none;
    filter: blur(var(--wmBlur));
    mix-blend-mode: soft-light;
}
@media (prefers-color-scheme: light) {
    .erp-home-action .wm { mix-blend-mode: multiply; }
}
.erp-home-action:hover .wm { opacity: var(--wmOpacityHover); }

.erp-home-action .wm svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: color-mix(in srgb, var(--acc) 65%, rgba(255,255,255,0.55));
    stroke-width: 1.9;
    opacity: 0.95;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@media (prefers-color-scheme: light) {
    .erp-home-action .wm svg { stroke: color-mix(in srgb, var(--acc) 55%, rgba(13,19,33,0.35)); }
}

.erp-home-action .toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; position: relative; z-index: 1; }
.erp-home-action .left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.erp-home-action .iconWrap {
    width: var(--icon);
    height: var(--icon);
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 26px rgba(10,20,40,0.16);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.erp-home-action .iconWrap::before {
    content: "";
    position: absolute;
    inset: -14px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.88), transparent 56%);
    opacity: 0.95;
    pointer-events: none;
}
.erp-home-action .icon {
    width: calc(var(--icon) - (var(--iconPad) * 2));
    height: calc(var(--icon) - (var(--iconPad) * 2));
    stroke: #0d1321;
    stroke-width: 2.25;
    fill: none;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}
.erp-home-action .text { min-width: 0; position: relative; z-index: 2; }
.erp-home-action .title {
    font-weight: 900;
    letter-spacing: 0.18px;
    font-size: var(--title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.erp-home-action .meta {
    margin-top: 4px;
    color: var(--muted);
    font-size: var(--sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.erp-home-action .right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; position: relative; z-index: 2; }
.erp-home-action .chip {
    font-size: var(--chip);
    font-weight: 900;
    letter-spacing: 0.15px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--acc) 22%, var(--stroke));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--acc) 10%, rgba(255,255,255,0.62)),
        color-mix(in srgb, var(--acc) 7%, rgba(255,255,255,0.50)));
    color: var(--text);
    box-shadow: 0 10px 24px rgba(10,20,40,0.10);
}
@media (prefers-color-scheme: dark) {
    .erp-home-action .chip {
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--acc) 12%, rgba(14,22,44,0.44)),
            color-mix(in srgb, var(--acc) 8%, rgba(14,22,44,0.34)));
    }
}
.erp-home-action .chev {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: grid;
    place-items: center;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
@media (prefers-color-scheme: dark) {
    .erp-home-action .chev { background: rgba(14,22,44,0.30); }
}
.erp-home-action:hover .chev {
    transform: translateX(1px);
    border-color: var(--stroke2);
    background: rgba(255,255,255,0.60);
}
@media (prefers-color-scheme: dark) {
    .erp-home-action:hover .chev { background: rgba(14,22,44,0.46); }
}
.erp-home-action .chev svg { width: 18px; height: 18px; stroke: var(--text); stroke-width: 2.2; fill: none; opacity: 0.9; }

.erp-home-action .bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 2px; position: relative; z-index: 1; }
.erp-home-action .metric { display: flex; flex-direction: column; gap: 3px; min-width: 0; position: relative; z-index: 2; }
.erp-home-action .metric .k { color: var(--muted2); font-size: 11.5px; font-weight: 800; letter-spacing: 0.12px; }
.erp-home-action .metric .v {
    font-size: 14px;
    font-weight: 950;
    letter-spacing: 0.18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "ss01" 1;
}

.erp-home-action .spark {
    width: 150px;
    height: 40px;
    position: relative;
    flex: 0 0 auto;
    opacity: var(--sparkOpacity);
    transition: opacity 0.16s ease, transform 0.16s ease;
    transform: translateY(1px);
    pointer-events: none;
    -webkit-mask-image: radial-gradient(90px 50px at 80% 60%, #000 58%, transparent 100%);
    mask-image: radial-gradient(90px 50px at 80% 60%, #000 58%, transparent 100%);
    z-index: 2;
}
.erp-home-action:hover .spark { opacity: var(--sparkOpacityHover); transform: translateY(0px); }
.erp-home-action .spark svg { width: 100%; height: 100%; }
.erp-home-action .spark .gridline { stroke: rgba(255,255,255,0.18); stroke-width: 1; opacity: 0.55; }
@media (prefers-color-scheme: light) {
    .erp-home-action .spark .gridline { stroke: rgba(13,19,33,0.10); opacity: 0.8; }
}
.erp-home-action .spark path.line {
    stroke: color-mix(in srgb, var(--acc) 74%, #ffffff);
    stroke-width: var(--sparkStrokeW);
    fill: none;
    opacity: 0.95;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,0.18));
}
@media (prefers-color-scheme: light) {
    .erp-home-action .spark path.line {
        stroke: color-mix(in srgb, var(--acc) 84%, #0d1321);
        filter: drop-shadow(0 10px 18px rgba(12,22,48,0.12));
    }
}

/* Experimental spark glow (under the line) */
.erp-home-action .spark .glow {
    opacity: calc(var(--fxSparkGlow) * var(--sparkGlowOpacity));
    filter: blur(10px);
}

.erp-home-action[data-tone="sales"] { --acc: #6d5efc; }
.erp-home-action[data-tone="invoices"] { --acc: #22c55e; }
.erp-home-action[data-tone="orders"] { --acc: #f97316; }
.erp-home-action[data-tone="np"] { --acc: #06b6d4; }

@media (prefers-reduced-motion: reduce) {
    .erp-home-action { transition: none !important; }
    .erp-home-action::before { display: none !important; }
    .erp-home-action .chev { transition: none !important; }
    .erp-home-action .spark { transition: none !important; }
}

.erp-kpi-wrap { gap: 12px; }
.erp-kpi-card {
    border: 0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    backdrop-filter: none;
}
.erp-kpi-card .label {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.erp-kpi-card .value { font-weight: 800; font-size: 13px; color: #0f172a; }

.erp-login-kpi {
    border: 0;
    background: #ffffff;
    box-shadow: none;
    backdrop-filter: none;
    border-radius: 12px;
}

/* AI-підказки (дашборд/профіль) */
.erp-ai-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}
.erp-ai-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    color: #0f172a;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.erp-ai-item:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10);
}
.erp-ai-icon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.10);
    color: #1d4ed8;
    flex: 0 0 32px;
    margin-top: 0;
}
.erp-ai-icon i[data-lucide],
.erp-ai-icon svg {
    width: 18px;
    height: 18px;
}
.erp-ai-item[data-tone="warn"] .erp-ai-icon {
    background: rgba(234, 179, 8, 0.12);
    color: #92400e;
}
.erp-ai-item[data-tone="bad"] .erp-ai-icon {
    background: rgba(239, 68, 68, 0.12);
    color: #7f1d1d;
}
.erp-ai-item[data-tone="ok"] .erp-ai-icon {
    background: rgba(34, 197, 94, 0.12);
    color: #14532d;
}
.erp-ai-list .erp-ai-title {
    font-weight: 800;
    font-size: 13px;
    line-height: 1.25;
}
.erp-ai-list .erp-ai-meta {
    font-size: 12px;
    color: var(--erp-text-meta);
    margin-top: 2px;
}
.erp-ai-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.erp-ai-right > i[data-lucide],
.erp-ai-right > svg {
    transition: transform 0.18s ease;
    transform: translateX(0);
}
.erp-ai-item:hover .erp-ai-right > i[data-lucide],
.erp-ai-item:hover .erp-ai-right > svg {
    transform: translateX(4px);
}
.erp-ai-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    font-weight: 800;
    font-size: 12px;
}
.erp-ai-item[data-tone="warn"] .erp-ai-count {
    background: rgba(234, 179, 8, 0.12);
    color: #713f12;
}
.erp-ai-item[data-tone="bad"] .erp-ai-count {
    background: rgba(239, 68, 68, 0.12);
    color: #7f1d1d;
}
.erp-ai-empty {
    padding: 10px 10px;
    border-radius: 16px;
    border: 1px dashed rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.75);
    color: var(--erp-text-meta);
    font-size: 12px;
}

/* ERP Timeline Premium (вкладки + важливе) */
.erp-timeline-premium {
    --bg: #f4f6fb;
    --glass: rgba(255, 255, 255, 0.82);
    --glass2: rgba(255, 255, 255, 0.92);
    --bd: rgba(15, 23, 42, 0.10);
    --bd2: rgba(15, 23, 42, 0.06);
    --tx: #0b1220;
    --mut: #64748b;
    --ac: #3b82f6;
    --ok: #10b981;
    --wa: #f59e0b;
    --da: #ef4444;
    --r: 22px;
    --sh: 0 14px 40px rgba(15, 23, 42, 0.10);
    --sh2: 0 18px 50px rgba(15, 23, 42, 0.14);
    --ring: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

.erp-timeline-premium .btn {
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--bd);
    background: rgba(255, 255, 255, 0.84);
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-weight: 700;
    color: var(--tx);
}
.erp-timeline-premium .btn:hover {
    background: rgba(59, 130, 246, 0.06);
}
.erp-timeline-premium .btn:focus {
    outline: none;
    box-shadow: var(--ring);
}

.erp-timeline-premium .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.70);
    font-size: 12px;
    font-weight: 700;
    color: #334155;
}
.erp-timeline-premium .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ac);
}
.erp-timeline-premium .dot.ok { background: var(--ok); }
.erp-timeline-premium .dot.wa { background: var(--wa); }
.erp-timeline-premium .dot.da { background: var(--da); }

.erp-timeline-premium .badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.66);
    color: var(--tx);
}
.erp-timeline-premium .badge.ok {
    color: #0f766e;
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.10);
}
.erp-timeline-premium .badge.wa {
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.25);
    background: rgba(245, 158, 11, 0.10);
}
.erp-timeline-premium .badge.da {
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.10);
}
.erp-timeline-premium .badge.info {
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.25);
    background: rgba(59, 130, 246, 0.10);
}
.erp-timeline-premium .mono {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Tabs bar */
.erp-timeline-premium .tabbar {
    padding: 12px 16px;
    border-bottom: 1px solid var(--bd2);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.erp-timeline-premium .seg {
    display: flex;
    gap: 6px;
    padding: 6px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.erp-timeline-premium .tab {
    height: 32px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.erp-timeline-premium .tab:hover {
    background: rgba(59, 130, 246, 0.06);
}
.erp-timeline-premium .tab.active {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 23, 42, 0.10);
    color: #0b1220;
}
.erp-timeline-premium .count {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.78);
    color: var(--mut);
    font-size: 11px;
    font-weight: 800;
}
.erp-timeline-premium .tog {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--bd);
    background: rgba(255, 255, 255, 0.84);
    font-weight: 750;
    font-size: 13px;
    color: #111827;
    cursor: pointer;
    user-select: none;
}
.erp-timeline-premium .tog:hover { background: rgba(59, 130, 246, 0.06); }
.erp-timeline-premium .switch {
    width: 38px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.78);
    position: relative;
}
.erp-timeline-premium .knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.18);
    transition: all 0.15s ease;
}
.erp-timeline-premium .tog.on .switch {
    border-color: rgba(59, 130, 246, 0.28);
    background: rgba(59, 130, 246, 0.10);
}
.erp-timeline-premium .tog.on .knob {
    left: 18px;
    background: rgba(59, 130, 246, 0.60);
}

/* Layout */
.erp-timeline-premium .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0;
}
.erp-timeline-premium .side {
    position: sticky;
    top: 14px;
    align-self: start;
}
@media (max-width: 980px) {
    .erp-timeline-premium .side {
        position: relative;
        top: 0;
    }
}
.erp-timeline-premium .sidebox {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.erp-timeline-premium .sidebox b {
    display: block;
    font-size: 13px;
}
.erp-timeline-premium .sidebox .row {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--mut);
}
.erp-timeline-premium .sidebox .row strong {
    color: #111827;
    font-weight: 800;
}
.erp-timeline-premium .mini {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}
.erp-timeline-premium .mini .item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
}
.erp-timeline-premium .mini .item span {
    font-size: 12px;
    color: #111827;
    font-weight: 750;
}
.erp-timeline-premium .mini .item small {
    display: block;
    margin-top: 2px;
    color: var(--mut);
    font-weight: 650;
    font-size: 11px;
}
.erp-timeline-premium .small {
    font-size: 12px;
    color: var(--mut);
}

/* Timeline */
.erp-timeline-premium .erp-tl-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 2px 0 10px;
}
.erp-timeline-premium .erp-tl-topbar-left,
.erp-timeline-premium .erp-tl-topbar-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.erp-timeline-premium .erp-tl-search {
    flex: 1 1 320px;
    min-width: 220px;
    max-width: 420px;
}
.erp-timeline-premium .erp-tl-search .uk-input {
    height: 40px;
    border-radius: 999px;
    padding-left: 42px;
}
.erp-timeline-premium .erp-tl-search .uk-form-icon {
    width: 42px;
}
.erp-timeline-premium .erp-tl-controls-card {
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 18px;
    padding: 10px 12px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.erp-timeline-premium .erp-tl-controls-card .uk-search-input {
    height: var(--erp-input-height);
    min-height: var(--erp-input-height);
    padding-top: 0;
    padding-bottom: 0;
    line-height: calc(var(--erp-input-height) - 2px);
    border-radius: 14px;
}
.erp-timeline-premium .tlwrap {
    max-height: 720px;
    overflow: auto;
    padding-right: 4px;
}
@media (max-width: 980px) {
    .erp-timeline-premium .tlwrap {
        max-height: none;
    }
}
.erp-timeline-premium .tl {
    position: relative;
    padding-left: 30px;
}
.erp-timeline-premium .tl:before {
    content: "";
    position: absolute;
    left: 14px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(15, 23, 42, 0.10);
}
.erp-timeline-premium .day {
    margin: 10px 0 14px;
}
.erp-timeline-premium .day h3 {
    position: sticky;
    top: 0;
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--mut);
    font-weight: 800;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.0), rgba(248, 250, 252, 0.75) 30%, rgba(248, 250, 252, 0.75) 70%, rgba(248, 250, 252, 0.0));
    padding: 8px 0;
    backdrop-filter: blur(8px);
    z-index: 5;
}
.erp-timeline-premium .ev {
    position: relative;
    margin: 0 0 12px;
}
.erp-timeline-premium .bullet {
    position: absolute;
    left: -22px;
    top: 14px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.92);
    background: var(--ac);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}
.erp-timeline-premium .bullet.ok { background: var(--ok); }
.erp-timeline-premium .bullet.wa { background: var(--wa); }
.erp-timeline-premium .bullet.da { background: var(--da); }

.erp-timeline-premium .evcard {
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    padding: 12px;
}
.erp-timeline-premium .evhead {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}
.erp-timeline-premium .evtitle {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
}
.erp-timeline-premium .evtime {
    font-size: 12px;
    color: var(--mut);
}
.erp-timeline-premium .evmeta {
    margin-top: 6px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.erp-timeline-premium .evtext {
    margin-top: 8px;
    color: #111827;
    font-size: 13px;
    line-height: 1.35;
}
.erp-timeline-premium .evactions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.erp-timeline-premium .link {
    height: 34px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    font-weight: 750;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    text-decoration: none;
}
.erp-timeline-premium .link:hover {
    background: rgba(59, 130, 246, 0.06);
    text-decoration: none;
}
.erp-timeline-premium .link.primary {
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: var(--ring);
}
.erp-timeline-premium .toggle {
    margin-left: auto;
}
.erp-timeline-premium .more {
    margin-top: 10px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    transition: all 0.18s ease;
}
.erp-timeline-premium .more.open {
    max-height: 320px;
    opacity: 1;
    padding-top: 10px;
}
.erp-timeline-premium .cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 720px) {
    .erp-timeline-premium .cols {
        grid-template-columns: 1fr;
    }
}
.erp-timeline-premium .kv {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    padding: 10px;
}
.erp-timeline-premium .kv b {
    display: block;
    font-size: 12px;
    font-weight: 800;
}
.erp-timeline-premium .kv span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--mut);
}

/* -------------------------------------------------------------------------
   ERP Profile Hero (клієнт / постачальник / партнер / користувач)
   ------------------------------------------------------------------------- */
.erp-customer-info-card {
    position: relative;
    overflow: hidden;
}
.erp-customer-info-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%22180%22%20cy%3D%2260%22%20r%3D%2250%22%20fill%3D%22%2394a3b8%22%20fill-opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22170%22%20r%3D%2240%22%20fill%3D%22%23cbd5e1%22%20fill-opacity%3D%220.32%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2218%22%20fill%3D%22%23e2e8f0%22%20fill-opacity%3D%220.35%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 240px 240px;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}
.erp-customer-info-card > * {
    position: relative;
    z-index: 1;
}

.erp-customer-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.erp-customer-hero-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 320px;
    min-width: 240px;
}
.erp-customer-hero-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.erp-customer-hero-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--erp-text-meta);
}
.erp-customer-hero .erp-profile-summary-name {
    font-size: 16px;
}
.erp-customer-hero .erp-profile-summary-role {
    font-size: 12px;
}
.erp-customer-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.erp-customer-hero-chips--right {
    margin-top: 0;
    justify-content: flex-end;
}
.erp-customer-hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
@media (max-width: 640px) {
    .erp-customer-hero-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.erp-summary-chip--success {
    --erp-lbl-accent: #15803d;
    --erp-lbl-bgc: rgba(21,128,61,.12);
    --erp-lbl-bdc: rgba(21,128,61,.22);
}
.erp-summary-chip--danger {
    --erp-lbl-accent: #b91c1c;
    --erp-lbl-bgc: rgba(185,28,28,.12);
    --erp-lbl-bdc: rgba(185,28,28,.24);
}

/* Профіль: "природні" висоти (без розтягування карток) */
.erp-profile-columns.erp-profile-columns--natural {
    align-items: start;
}
.erp-profile-columns.erp-profile-columns--natural .erp-profile-col {
    align-items: start;
    align-content: start;
}
.erp-profile-columns.erp-profile-columns--natural .erp-profile-col > .uk-card {
    height: auto;
}

/* KPI: 2×2 grid у профілях (перебиває framework.css) */
.erp-item-summary-grid.erp-item-summary-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
    .erp-item-summary-grid.erp-item-summary-grid--two {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* KPI: компактний вигляд тайлів (профілі) */
.erp-summary-compact .erp-item-summary-tile {
    padding: 6px 8px;
    min-height: 38px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
}
.erp-summary-compact .erp-item-summary-label {
    font-size: 10px;
}
.erp-summary-compact .erp-item-summary-value {
    font-size: 15px;
}
.erp-summary-compact .erp-item-summary-icon i[data-lucide],
.erp-summary-compact .erp-item-summary-icon svg {
    width: 16px;
    height: 16px;
}

/* ERP бейджі (роль/статус) */
.erp-badge {
    --erp-lbl-accent: #64748b;
    --erp-lbl-bgc: rgba(100,116,139,.10);
    --erp-lbl-bdc: rgba(100,116,139,.20);
    --erp-lbl-txc: var(--erp-label-text);

    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--erp-label-h);
    padding-left: var(--erp-label-px-l);
    padding-right: var(--erp-label-px-r);
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--erp-label-line);
    color: var(--erp-lbl-txc);
    font-size: var(--erp-label-fz);
    font-weight: 740;
    letter-spacing: .10px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    user-select: none;
    font-variant-numeric: tabular-nums;
    cursor: default;
}
.erp-badge:hover{
    background: var(--erp-label-line2);
}
.erp-badge .lucide,
.erp-badge i[data-lucide],
.erp-badge svg {
    width: var(--erp-label-svg);
    height: var(--erp-label-svg);
    padding: calc((var(--erp-label-ico) - var(--erp-label-svg)) / 2);
    border-radius: 999px;
    background:
        radial-gradient(120% 120% at 30% 25%,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.90) 45%,
            rgba(255,255,255,.82) 100%
        );
    border: 1px solid var(--erp-label-ico-bd);
    box-shadow: var(--erp-label-ico-shadow), var(--erp-label-ico-inset-top), var(--erp-label-ico-inset-ring);
    color: var(--erp-lbl-accent);
    flex: 0 0 auto;
    box-sizing: content-box;
}

.erp-badge--admin {
    --erp-lbl-accent: #1d4ed8;
    --erp-lbl-bgc: rgba(29,78,216,.12);
    --erp-lbl-bdc: rgba(29,78,216,.22);
}
.erp-badge--manager {
    --erp-lbl-accent: #075985;
    --erp-lbl-bgc: rgba(14,165,233,.12);
    --erp-lbl-bdc: rgba(14,165,233,.22);
}
.erp-badge--staff {
    --erp-lbl-accent: #334155;
    --erp-lbl-bgc: rgba(148,163,184,.14);
    --erp-lbl-bdc: rgba(148,163,184,.26);
}
.erp-badge--active {
    --erp-lbl-accent: #15803d;
    --erp-lbl-bgc: rgba(21,128,61,.12);
    --erp-lbl-bdc: rgba(21,128,61,.22);
}
.erp-badge--blocked {
    --erp-lbl-accent: #b91c1c;
    --erp-lbl-bgc: rgba(185,28,28,.12);
    --erp-lbl-bdc: rgba(185,28,28,.24);
}
.erp-badge--invited {
    --erp-lbl-accent: #7c6f46;
    --erp-lbl-bgc: rgba(124,111,70,.10);
    --erp-lbl-bdc: rgba(124,111,70,.20);
}

/* Компактний аватар для таблиць */
.erp-profile-avatar--sm {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 13px;
}

/* Іконки в dropdown-меню */
.uk-dropdown-nav a .lucide,
.uk-dropdown-nav a svg.lucide {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex: 0 0 16px;
}

.erp-customer-tabs {
    margin-top: 10px;
}

/* dropdowns */
.uk-dropdown,
.uk-drop,
.uk-dropbar,
.uk-dropbar-large {
    z-index: 99999 !important;
}

/* Картка клієнта: вкладка "Замовлення" — права колонка не перекриває hero */
.erp-orders-right-sticky {
    position: sticky;
    top: 72px;
    z-index: 600;
}
@media (max-width: 959px) {
    .erp-orders-right-sticky {
        position: static;
        top: auto;
        z-index: auto;
    }
}

/* Товари: яскраві бейджі "Акція/Розпродаж" (щоб не були білі на білому) */
.erp-sale-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
    white-space: nowrap;
}
.erp-sale-pill i[data-lucide],
.erp-sale-pill svg {
    width: 14px;
    height: 14px;
    color: #ffffff;
}
.erp-sale-pill--promo {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(236, 72, 153, 0.95));
    border-color: rgba(99, 102, 241, 0.35);
}
.erp-sale-pill--clearance {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.95), rgba(239, 68, 68, 0.95));
    border-color: rgba(249, 115, 22, 0.40);
}

.product-card__badge.product-card__badge--sale {
    border: none;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
}
.product-card__badge.product-card__badge--sale i[data-lucide],
.product-card__badge.product-card__badge--sale svg {
    color: #ffffff;
}
.product-card__badge.product-card__badge--sale.product-card__badge--sale-promo {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(236, 72, 153, 0.92));
}
.product-card__badge.product-card__badge--sale.product-card__badge--sale-clearance {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.92), rgba(239, 68, 68, 0.92));
}

/* =====================================================================
   Товари → Список товарів → Вигляд карткою: ціна в правому верхньому куті
   + “виріз” фото під ціну (як на макеті)
   ===================================================================== */

#prod-cards-grid .product-card__image {
    position: relative; /* псевдоелемент для "вирізу" */
}

/* "Виріз" робимо тільки під текстом ціни (бейджом), тому тут виріз НЕ малюємо */
#prod-cards-grid .product-card__image::before {
    content: none;
}

/* Гарантуємо порядок шарів: фото під вирізом */
#prod-cards-grid .product-card__image img {
    position: relative;
    z-index: 0;
}

/* Бейдж ціни — у самий кут без відступу */
#prod-cards-grid .product-card__badge-group--right {
    margin-top: -12px;  /* скасовує top:12px у .product-card__badges */
    margin-right: -14px; /* скасовує padding-right:14px у .product-card__badges */
}

#prod-cards-grid .product-card__badge-group--right .product-card__badge--right {
    /* Це і є "виріз" під ціною: біла плашка, яка перекриває фото тільки під текстом */
    background: rgba(255, 255, 255, 0.98);
    border: 0; /* як в CodePen: без бордера */
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
    /* Як на макеті: лівий верх і правий низ без заокруглення */
    position: relative;
    --cut-r: var(--erp-radius-lg, 20px);
    border-radius: 0 var(--cut-r) 0 var(--cut-r);
    padding: 12px 16px; /* менший "виріз" */
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #0f172a;
    text-shadow: none;
    line-height: 1;
    white-space: nowrap;

    /* щоб клік по ціні відкривав товар (проходив до лінка на фото) */
    pointer-events: none;
    user-select: none;
}

/* Виріз як у CodePen: інверсне заокруглення, щоб "заокруглювалося" фото */
#prod-cards-grid .product-card__badge-group--right .product-card__badge--right::before,
#prod-cards-grid .product-card__badge-group--right .product-card__badge--right::after {
    content: "";
    position: absolute;
    width: var(--cut-r);
    height: var(--cut-r);
    background: inherit;
    border: 0;
    box-shadow: none;
    -webkit-mask-image: radial-gradient(circle at 0 100%,
        transparent var(--cut-r),
        #000 calc(var(--cut-r) + 1px));
    mask-image: radial-gradient(circle at 0 100%,
        transparent var(--cut-r),
        #000 calc(var(--cut-r) + 1px));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

#prod-cards-grid .product-card__badge-group--right .product-card__badge--right::before {
    top: 0;
    right: 100%;
}

#prod-cards-grid .product-card__badge-group--right .product-card__badge--right::after {
    top: 100%;
    right: 0;
}

/* В картках товарів ціну знизу прибрали — залишаємо тільки дії, вирівнюємо вправо */
#prod-cards-grid .product-card__price-row {
    justify-content: center;
}

#prod-cards-grid .product-card__actions {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 0;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    overflow: hidden;
    background: transparent;
}

#prod-cards-grid .product-card__action-pill {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 0;
    box-sizing: border-box;
    border-radius: 0;
    background: transparent;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    user-select: none;
    transition: background 0.12s ease, color 0.12s ease;
}

#prod-cards-grid .product-card__action-pill--sale {
    color: #1e40af;
}

#prod-cards-grid .product-card__action-text {
    display: inline-block;
}

/* Легкий градієнт для тексту "Продаж" (фон кнопки лишається прозорим) */
#prod-cards-grid .product-card__action-text--sale {
    color: #1e40af;
}

@supports (-webkit-background-clip: text) {
    #prod-cards-grid .product-card__action-text--sale {
        background-image: linear-gradient(90deg, #2563eb, #7c3aed);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

#prod-cards-grid .product-card__action-pill + .product-card__action-pill {
    border-left: 1px solid rgba(15, 23, 42, 0.10);
}

#prod-cards-grid .product-card__action-pill:hover {
    background: rgba(15, 23, 42, 0.06);
}

#prod-cards-grid .product-card__action-pill--sale:hover {
    background: rgba(15, 23, 42, 0.06);
}

#prod-cards-grid .product-card__action-pill:active {
    background: rgba(15, 23, 42, 0.08);
}

#prod-cards-grid .product-card__action-pill:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.20);
}

#prod-cards-grid .product-card__action-pill--sale:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.28);
}

/* Модалка "Продаж" зі списком дій: кнопки без фону + розділювач */
.erp-sale-actions {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    overflow: hidden;
    background: transparent;
}

.erp-sale-action {
    width: 100%;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    user-select: none;
    transition: background 0.12s ease;
}

.erp-sale-action + .erp-sale-action {
    border-top: 1px solid rgba(15, 23, 42, 0.10);
}

.erp-sale-action:hover {
    background: rgba(15, 23, 42, 0.06);
}

.erp-sale-action:active {
    background: rgba(15, 23, 42, 0.08);
}

.erp-sale-action:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.25);
}

@media (max-width: 640px) {
    #prod-cards-grid .product-card__image::before {
        content: none;
    }

    #prod-cards-grid .product-card__badge-group--right .product-card__badge--right {
        --cut-r: 18px;
        padding: 10px 12px;
        font-size: 18px;
    }

    #prod-cards-grid .product-card__action-pill {
        height: 38px;
        font-size: 13px;
        padding: 0 12px;
    }
}

/* Вкладки профілю: компактні rounded pills (перебиває framework.css) */
.erp-tab-switcher.erp-tab-switcher--client {
    background: transparent;
    border: 0;
    padding: 0;
    gap: 8px;
}
.erp-tab-switcher.erp-tab-switcher--client > li > a {
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    border-radius: 18px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    box-shadow: none;
}
.erp-tab-switcher.erp-tab-switcher--client > li > a:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.erp-tab-switcher.erp-tab-switcher--client > li.uk-active > a,
.erp-tab-switcher.erp-tab-switcher--client > li > a[aria-selected="true"] {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #1d4ed8;
    box-shadow: none;
    transform: none;
}

.erp-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}
.erp-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.erp-action-pill i[data-lucide],
.erp-action-pill svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
}
.erp-action-pill:hover {
    text-decoration: none;
    background: #f8fafc;
    color: #1d4ed8;
    border-color: #cbd5f5;
}
.erp-action-pill.is-disabled {
    background: #f1f5f9;
    color: #94a3b8;
    border-color: #e5e7eb;
    cursor: not-allowed;
}
.erp-action-pill--danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}
.erp-action-pill--danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

/* Персональні блоки: читабельні рядки "ключ — значення" */
.erp-info-row-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.erp-info-row-grid.erp-info-row-grid--one {
    grid-template-columns: minmax(0, 1fr);
}
.erp-info-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #eef2f7;
}
.erp-info-row--wide {
    grid-column: 1 / -1;
}
.erp-info-row-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}
.erp-info-row-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #f1f5f9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    flex: 0 0 auto;
}
.erp-info-row-icon i[data-lucide],
.erp-info-row-icon svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
}
.erp-info-row-value {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    min-width: 0;
}
.erp-info-row-value a {
    color: inherit;
    text-decoration: none;
}
.erp-info-row-value a:hover {
    text-decoration: underline;
}
.erp-info-action {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-decoration: none;
}
.erp-info-action i[data-lucide],
.erp-info-action svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
}
.erp-info-action:hover {
    background: #eef2ff;
    color: #4f46e5;
}
@media (max-width: 640px) {
    .erp-info-row-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .erp-info-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: flex-start;
    }
}

.erp-section-title-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.erp-section-icon-box {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
}
.erp-section-icon-box i[data-lucide],
.erp-section-icon-box svg {
    width: 14px;
    height: 14px;
    display: block;
    stroke: currentColor;
    fill: none;
}

/* === Єдиний стиль для всіх кнопок === */
:root {
    --erp-btn-radius: 12px;
    --erp-btn-border: #e2e8f0;
    --erp-btn-bg: #ffffff;
    --erp-btn-text: #0f172a;
    --erp-btn-hover-bg: #f8fafc;
    --erp-btn-hover-border: #93c5fd;
    --erp-btn-disabled-bg: #f1f5f9;
    --erp-btn-disabled-text: #94a3b8;
    --erp-btn-primary: #1d4ed8;
    --erp-btn-primary-bg: #eff6ff;
    --erp-btn-danger: #b91c1c;
    --erp-btn-danger-bg: #fef2f2;
    --erp-icon-radius: 12px;
}

.uk-button,
.btn,
.erp-action-pill,
.erp-icon-button,
.erp-pos-icon-btn,
.erp-hold-restore-btn {
    border-radius: var(--erp-btn-radius) !important;
    border: 1px solid var(--erp-btn-border) !important;
    background: var(--erp-btn-bg) !important;
    color: var(--erp-btn-text) !important;
    box-shadow: none !important;
}

.uk-button:hover,
.btn:hover,
.erp-action-pill:hover,
.erp-icon-button:hover,
.erp-pos-icon-btn:hover,
.erp-hold-restore-btn:hover {
    background: var(--erp-btn-hover-bg) !important;
    border-color: var(--erp-btn-hover-border) !important;
}

.uk-button:disabled,
.uk-button[disabled],
.btn:disabled,
.erp-action-pill[disabled],
.erp-icon-button[disabled],
.erp-pos-icon-btn[disabled],
.erp-hold-restore-btn[disabled] {
    background: var(--erp-btn-disabled-bg) !important;
    color: var(--erp-btn-disabled-text) !important;
    border-color: var(--erp-btn-border) !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.uk-button-primary,
.btn.primary,
.btn.is-on {
    background: var(--erp-btn-primary-bg) !important;
    color: var(--erp-btn-primary) !important;
    border-color: var(--erp-btn-hover-border) !important;
}

.uk-button-danger,
.btn.danger,
.erp-action-pill--danger {
    background: var(--erp-btn-danger-bg) !important;
    color: var(--erp-btn-danger) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

.uk-icon-button,
.erp-pos-summary-icon-btn,
.erp-pos-toolbar-btn {
    border-radius: var(--erp-btn-radius) !important;
}

/* Іконкові кнопки: квадратні з заокругленням по всьому проєкту */
.uk-icon-button,
.erp-icon-button,
.erp-pos-icon-btn,
.erp-hold-restore-btn,
.erp-pos-toolbar-btn,
.erp-pos-summary-icon-btn,
.erp-info-action,
.sidebar-icon,
.uk-modal-close-default,
.uk-close,
.uk-notification-close,
.uk-offcanvas-close {
    border-radius: var(--erp-icon-radius) !important;
}

/* ==================== Каса: модальні вікна ==================== */
#cash-session-log-modal .erp-session-log-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
#cash-session-log-modal .erp-session-log-table {
    max-height: 60vh;
    overflow: auto;
}
#cash-session-log-modal .erp-session-log-params {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
    max-width: 420px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#cash-shift-open-modal .svc-field {
    padding: 12px;
    display: grid;
    gap: 10px;
}
#cash-shift-open-modal .svc__label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, 0.6);
    font-weight: 900;
    line-height: 1.1;
}
#cash-shift-open-modal .svc__inputWrap {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    align-items: center;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.02);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    min-height: var(--erp-input-height, 40px);
}
#cash-shift-open-modal .svc__inputWrap:focus-within {
    border-color: rgba(79, 124, 255, 0.55);
    box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.14);
    background: rgba(79, 124, 255, 0.04);
}
#cash-shift-open-modal .svc__inputWrap--note {
    grid-template-columns: 46px 1fr;
}
#cash-shift-open-modal .svc__prefix {
    height: var(--erp-input-height, 40px);
    display: grid;
    place-items: center;
    border-right: 1px solid rgba(120, 130, 160, 0.2);
    color: rgba(11, 18, 32, 0.6);
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}
#cash-shift-open-modal .svc__prefix i,
#cash-shift-open-modal .svc__prefix svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
}
#cash-shift-open-modal .svc__input {
    height: var(--erp-input-height, 40px);
    border: 0;
    outline: 0;
    background: transparent;
    color: #0b1220;
    padding: 0 10px;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    width: 100%;
    min-width: 0;
    line-height: calc(var(--erp-input-height, 40px) - 2px);
}
#cash-shift-open-modal .svc__input::placeholder {
    color: rgba(11, 18, 32, 0.32);
}
#cash-shift-open-modal .svc__clear {
    height: var(--erp-input-height, 40px);
    border: 0;
    background: transparent;
    border-left: 1px solid rgba(120, 130, 160, 0.2);
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(11, 18, 32, 0.6);
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}
#cash-shift-open-modal .svc__clear:hover {
    background: rgba(15, 23, 42, 0.03);
}
#cash-shift-open-modal .svc__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#cash-shift-open-modal .svc__chip {
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.02);
    color: #0b1220;
    padding: 8px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12.5px;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
#cash-shift-open-modal .svc__chip:hover {
    background: rgba(15, 23, 42, 0.04);
    transform: translateY(-1px);
}
#cash-shift-open-modal .svc__help {
    font-size: 12px;
    line-height: 1.25;
    color: rgba(11, 18, 32, 0.6);
}
#cash-shift-open-modal .svc__help strong {
    color: #0b1220;
    font-weight: 950;
}
@media (max-width: 720px) {
    #cash-shift-open-modal .svc__inputWrap {
        grid-template-columns: 44px 1fr;
    }
    #cash-shift-open-modal .svc__clear {
        display: none;
    }
}

#cash-shift-close-modal .erp-confirm-modal {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 60px);
    overflow: hidden;
}
#cash-shift-close-modal [data-cash-shift-close-form] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#cash-shift-close-modal [data-cash-shift-close-after] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 12px;
    flex: 1;
}
#cash-shift-close-modal .erp-zreport-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
}
#cash-shift-close-modal .erp-zreport-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
}
#cash-shift-close-modal .erp-zreport-preview {
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}
#cash-shift-close-modal .erp-zreport-preview img {
    display: block;
    width: 100%;
    height: auto;
}
#cash-shift-close-modal .svc-field {
    padding: 12px;
    display: grid;
    gap: 10px;
}
#cash-shift-close-modal .svc__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}
#cash-shift-close-modal .svc__label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, 0.6);
    font-weight: 900;
    line-height: 1.1;
}
#cash-shift-close-modal .svc__inputWrap {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    align-items: center;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.02);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    min-height: var(--erp-input-height, 40px);
}
#cash-shift-close-modal .svc__inputWrap--dual {
    grid-template-columns: 46px 1fr auto auto;
}
#cash-shift-close-modal .svc__inputWrap:focus-within {
    border-color: rgba(79, 124, 255, 0.55);
    box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.14);
    background: rgba(79, 124, 255, 0.04);
}
#cash-shift-close-modal .svc__inputWrap--note {
    grid-template-columns: 46px 1fr;
}
#cash-shift-close-modal .svc__prefix {
    height: var(--erp-input-height, 40px);
    display: grid;
    place-items: center;
    border-right: 1px solid rgba(120, 130, 160, 0.2);
    color: rgba(11, 18, 32, 0.6);
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}
#cash-shift-close-modal .svc__prefix i,
#cash-shift-close-modal .svc__prefix svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
}
#cash-shift-close-modal .svc__input {
    height: var(--erp-input-height, 40px);
    border: 0;
    outline: 0;
    background: transparent;
    color: #0b1220;
    padding: 0 10px;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    width: 100%;
    min-width: 0;
    line-height: calc(var(--erp-input-height, 40px) - 2px);
}
#cash-shift-close-modal .svc__input::placeholder {
    color: rgba(11, 18, 32, 0.32);
}
#cash-shift-close-modal .svc__action {
    height: var(--erp-input-height, 40px);
    border: 0;
    background: transparent;
    border-left: 1px solid rgba(120, 130, 160, 0.2);
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(11, 18, 32, 0.7);
    font-weight: 900;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
#cash-shift-close-modal .svc__action:hover {
    background: rgba(15, 23, 42, 0.03);
}
#cash-shift-close-modal .svc__action svg {
    width: 16px;
    height: 16px;
}
#cash-shift-close-modal .svc__balance {
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.02);
    color: rgba(11, 18, 32, 0.7);
    font-weight: 900;
    font-size: 12px;
    white-space: nowrap;
}


/* Requisites v2 — line-separated, premium, no inner cards */
.erp-reqv2 { padding-top: 8px; }

.erp-reqv2-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
}

@media (max-width: 860px){  .erp-reqv2-grid{ grid-template-columns: 1fr; } }

.erp-reqv2-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(14,25,55,.10);
  min-width:0;
}

.erp-reqv2-left{ display:flex; align-items:center; gap:10px; min-width:0; }

.erp-reqv2-ic{
  width: 34px; height: 34px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 18px rgba(12,22,48,.08);
  flex: 0 0 auto;
}

.erp-reqv2-meta{ min-width:0; flex:1 1 auto; }

.erp-reqv2-k{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12px;
  color: rgba(13,19,33,.58);
  line-height: 1.1;
}

.erp-reqv2-v{
  margin-top: 3px;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .12px;
  color: rgba(13,19,33,.92);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erp-reqv2-v--wrap{
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.erp-reqv2-sub{
  margin-top: 2px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing:.10px;
  color: rgba(13,19,33,.55);
}

.erp-reqv2-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-feature-settings: "tnum" 1;
  letter-spacing: .06px;
}

.erp-reqv2-link{ text-decoration:none; font-weight: 1000; }
.erp-reqv2-link:hover{ text-decoration: underline; }

.erp-reqv2-copy{
  width: 34px; height: 34px;
  border-radius: 14px;
  border: 1px solid rgba(14,25,55,.10);
  background: rgba(255,255,255,.28);
  box-shadow: 0 8px 18px rgba(12,22,48,.06);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  flex: 0 0 auto;
}
.erp-reqv2-copy:hover{ background: rgba(255,255,255,.40); border-color: rgba(14,25,55,.16); }
.erp-reqv2-copy:active{ transform: translateY(1px) scale(.99); }

/* Wide warning row */
.erp-reqv2-item--wide{ grid-column: 1 / -1; }
.erp-reqv2-item--warn .erp-reqv2-ic{
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.22);
}