@media (min-width: 901px) {
    #screen-customers .leads-table-footer {
        display: flex;
        align-items: center;
        gap: 1rem;
        width: 100%;
        position: sticky;
        bottom: 0;
        border-top: 1px solid #f1f5f9;
        padding: .6rem 1rem;
        background: #fafbfb;
        justify-content: space-between;
        flex-direction: row-reverse;
        box-sizing: border-box;
    }

    #screen-customers .leads-table-footer-count {
        text-align: left;
        font-size: clamp(13px, 2vw, 14px);
        font-weight: 500;
        color: var(--text1);
        display: block;
        opacity: 1;
        visibility: visible;
        margin-right: auto;
    }

    #screen-customers .leads-table-footer > div:last-child {
        display: inline-flex;
        align-items: center;
        gap: 1rem;
        width: auto;
        flex: 0 0 auto;
    }

    #customersPageSizeSelect.input {
        text-align: center;
        height: 32px;
        min-height: unset;
        font-size: 14px;
        cursor: pointer;
        width: auto;
        min-width: 72px;
    }

    #customers-overlay.ui-overlay {
        background-color: rgba(30, 78, 132, 0.72);
    }

    .customers-editor-container {
        background: transparent;
        padding: 34px 28px 44px;
        box-sizing: border-box;
    }

    .customers-editor-container.is-open {
        padding-bottom: 44px;
    }

    .customers-editor-container .event-editor {
        width: min(1180px, 100%);
        margin: 0 auto;
        padding: 0;
        background: var(--bg-app);
        border: 1px solid var(--border-soft);
        border-top: 4px solid var(--primary);
        border-radius: 24px;
        overflow: hidden;
    }

    .customers-editor-container .editor-topbar {
        margin: 0;
        padding: 22px 28px 20px 92px;
        background: var(--white);
        border-bottom: 1px solid var(--border-soft);
        min-height: 86px;
        box-sizing: border-box;
    }

    .customers-editor-container .editor-title {
        margin: 0;
        padding: 0;
        border-radius: 0;
        font-size: 26px;
        font-weight: 800;
        color: var(--primary);
        line-height: 1.2;
    }

    .customers-editor-container .customers-editor-body {
        padding: 28px;
    }

    .customers-editor-container .customer-detail-root {
        max-width: none;
    }

    .customers-editor-container .customer-stats-grid {
        gap: 18px;
        margin-bottom: 28px;
    }

    .customers-editor-container .customer-stat-card {
        padding: 20px 22px;
        border: 1px solid var(--border-soft);
        border-right-width: 5px;
        border-radius: 20px;
        gap: 8px;
    }

    .customers-editor-container .customer-stat-label {
        font-size: 12px;
        font-weight: 700;
        color: var(--text1);
    }

    .customers-editor-container .customer-stat-value {
        font-size: 1.55rem;
        line-height: 1.15;
        font-weight: 800;
    }

    .customers-editor-container .customer-columns {
        grid-template-columns: minmax(320px, .95fr) minmax(0, 1.65fr);
        gap: 22px;
        align-items: start;
    }

    .customers-editor-container .customer-info-card,
    .customers-editor-container .customer-orders-card {
        padding: 0;
        background: var(--white);
        border: 1px solid var(--border-soft);
        border-radius: 20px;
        overflow: hidden;
    }

    .customers-editor-container .customer-section-header {
        margin: 0;
        padding: 18px 22px;
        background: var(--lightblue);
        border-bottom: 1px solid var(--border-soft);
        font-size: 16px;
        line-height: 1.3;
    }

    .customers-editor-container .customer-section-header i {
        font-size: 15px;
    }

    .customers-editor-container .customer-info-body {
        padding: 8px 22px 0;
    }

    .customers-editor-container .customer-info-row {
        padding: 16px 0;
        gap: 16px;
        align-items: flex-start;
    }

    .customers-editor-container .customer-info-label {
        font-size: 13px;
        font-weight: 700;
        color: var(--text1);
    }

    .customers-editor-container .customer-info-value {
        min-width: 0;
        flex: 1 1 auto;
        font-size: 15px;
        line-height: 1.5;
        font-weight: 600;
        text-align: end;
        unicode-bidi: plaintext;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .customers-editor-container .customer-field-display,
    .customers-editor-container .customer-field-input {
        display: block;
        width: min(100%, 360px);
        min-width: 0;
    }

    .customers-editor-container .customer-field-input {
        max-width: none;
    }

    .customers-editor-container .customer-info-actions {
        margin-top: 0;
        padding: 18px 22px 22px;
        border-top: 1px solid var(--border-soft);
        justify-content: flex-start;
        background: var(--bg-app);
    }

    .customers-editor-container .customer-info-actions .btn {
        min-height: 42px;
        padding: 0 18px;
        border-radius: 12px;
        font-weight: 700;
    }

    .customers-editor-container .customer-info-actions .btn.btn-outline,
    .customers-editor-container .customer-cancel-btn {
        border-color: var(--border-soft);
        background: var(--white);
        color: var(--primary);
    }

    .customers-editor-container .customer-save-btn {
        background: var(--primary);
        color: var(--white);
    }

    .customers-editor-container .customer-orders-table {
        padding: 18px 22px 22px;
        background: var(--white);
    }

    .customers-editor-container .customer-orders-table .table-head {
        display: grid;
        grid-template-columns: .9fr 1.2fr .95fr .9fr;
        background: var(--lightblue);
        border: 1px solid var(--border-soft);
        border-bottom: 0;
        border-radius: 16px 16px 0 0;
        overflow: hidden;
    }

    .customers-editor-container .customer-orders-table .table-head > div {
        padding: 14px 16px;
        color: var(--text1);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.01em;
    }

    .customers-editor-container .customer-orders-table .table-body {
        border: 1px solid var(--border-soft);
        border-radius: 0 0 16px 16px;
        overflow: hidden;
        background: var(--white);
    }

    .customers-editor-container .customer-orders-table .table-row {
        display: grid;
        grid-template-columns: .9fr 1.2fr .95fr .9fr;
        min-height: 56px;
        border-bottom: 1px solid var(--border-soft);
        background: var(--white);
    }

    .customers-editor-container .customer-orders-table .table-row:last-child {
        border-bottom: none;
    }

    .customers-editor-container .customer-orders-table .table-row > div {
        padding: 14px 16px;
        min-width: 0;
        display: flex;
        align-items: center;
        font-size: 14px;
        line-height: 1.45;
        color: var(--text2);
        unicode-bidi: plaintext;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .customers-editor-container .customer-orders-table .table-row > div:nth-child(1),
    .customers-editor-container .customer-orders-table .table-row > div:nth-child(3) {
        font-weight: 700;
        color: var(--black);
    }

    .customers-editor-container .customer-order-status {
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
    }

    .customers-editor-container .table-empty {
        padding: 26px 16px;
        color: var(--text1);
    }

    .customers-editor-container.is-open + .crm-fullscreen-overlay-close {
        top: 46px;
        left: max(28px, calc((100vw - 1180px) / 2 + 28px));
        width: 42px;
        height: 42px;
        border: 1px solid var(--border-soft);
        border-radius: 12px;
        background: var(--white);
        color: var(--text1);
    }

    .customers-editor-container.is-open + .crm-fullscreen-overlay-close svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 768px) {
    .customers-editor-container .customer-orders-card {
        border: 1px solid var(--border-soft);
        border-radius: 18px;
        overflow: hidden;
        background: var(--white);
    }

    .customers-editor-container .customer-orders-card .customer-section-header {
        margin-bottom: 0;
        padding: 14px 16px;
        background: var(--lightblue);
        border-bottom: 1px solid var(--border-soft);
    }

    .customers-editor-container .customer-orders-table {
        padding: 14px;
        background: var(--white);
    }

    .customers-editor-container .customer-orders-table .table-head {
        display: none;
    }

    .customers-editor-container .customer-orders-table .table-body {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .customers-editor-container .customer-orders-table .table-row {
        display: flex;
        flex-direction: column;
        gap: 0;
        background: var(--bg-app);
        border: 1px solid var(--border-soft);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    }

    .customers-editor-container .customer-orders-table .table-row > div {
        display: grid;
        grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        min-width: 0;
        padding: 11px 14px;
        border-bottom: 1px solid var(--border-soft);
        font-size: 14px;
        line-height: 1.45;
        color: var(--text2);
        unicode-bidi: plaintext;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .customers-editor-container .customer-orders-table .table-row > div::before {
        content: attr(data-label);
        font-size: 11px;
        line-height: 1.25;
        font-weight: 700;
        color: var(--text-muted);
        letter-spacing: 0.01em;
    }

    .customers-editor-container .customer-orders-table .table-row > div:last-child {
        border-bottom: none;
    }

    .customers-editor-container .customer-orders-table .table-row > div:nth-child(1) {
        display: block;
        padding-top: 14px;
        padding-bottom: 12px;
        background: color-mix(in srgb, var(--lightblue) 55%, var(--white));
        font-size: 16px;
        font-weight: 800;
        color: var(--primary);
    }

    .customers-editor-container .customer-orders-table .table-row > div:nth-child(1)::before {
        display: block;
        margin-bottom: 4px;
        font-size: 10px;
    }

    .customers-editor-container .customer-orders-table .table-row > div:nth-child(2) {
        font-size: 13px;
        color: var(--text1);
    }

    .customers-editor-container .customer-orders-table .table-row > div:nth-child(3) {
        font-size: 15px;
        font-weight: 800;
        color: var(--black);
    }

    .customers-editor-container .customer-orders-table .table-row > div:nth-child(4) {
        align-items: center;
    }

    .customers-editor-container .customer-orders-table .customer-order-status {
        justify-self: start;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
    }

    .customers-editor-container .customer-orders-table .table-empty {
        padding: 22px 16px;
        border: 1px dashed var(--border-soft);
        border-radius: 16px;
        background: var(--bg-app);
    }

    #screen-customers > .table {
        margin-top: 1rem;
        background: transparent;
        box-shadow: none;
        border: 0;
        overflow: visible;
    }

    #screen-customers > .table > .table-head {
        display: none;
    }

    #screen-customers #customers-table {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #screen-customers #customers-table > .table-row {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 4px 0;
        background: var(--white);
        border: 1px solid var(--border-soft);
        border-radius: 16px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
        overflow: hidden;
    }

    #screen-customers #customers-table > .table-row > div {
        display: grid;
        grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        min-width: 0;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border-soft);
        font-size: 14px;
        line-height: 1.45;
        color: var(--text2);
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #screen-customers #customers-table > .table-row > div::before {
        content: attr(data-label);
        font-size: 11px;
        line-height: 1.3;
        font-weight: 700;
        color: var(--text-muted);
        letter-spacing: 0.01em;
        min-width: 0;
    }

    #screen-customers #customers-table > .table-row > div:last-child {
        border-bottom: none;
    }

    #screen-customers #customers-table > .table-row > div:nth-child(1) {
        display: block;
        padding-top: 14px;
        padding-bottom: 12px;
        font-size: 17px;
        line-height: 1.4;
        font-weight: 800;
        color: var(--black);
    }

    #screen-customers #customers-table > .table-row > div:nth-child(1)::before {
        display: block;
        margin-bottom: 4px;
        font-size: 10px;
    }

    #screen-customers #customers-table > .table-row > div:nth-child(2),
    #screen-customers #customers-table > .table-row > div:nth-child(3) {
        font-weight: 600;
        color: var(--black);
    }

    #screen-customers #customers-table > .table-row > div:nth-child(3) {
        align-items: center;
    }

    #screen-customers #customers-table > .table-row > div:nth-child(4),
    #screen-customers #customers-table > .table-row > div:nth-child(5),
    #screen-customers #customers-table > .table-row > div:nth-child(6),
    #screen-customers #customers-table > .table-row > div:nth-child(7),
    #screen-customers #customers-table > .table-row > div:nth-child(8),
    #screen-customers #customers-table > .table-row > div:nth-child(9) {
        font-size: 13px;
    }

    #screen-customers #customers-table > .table-row > div:nth-child(8),
    #screen-customers #customers-table > .table-row > div:nth-child(9) {
        align-items: center;
    }
}