/* =========================
   CLEAN POS LAYOUT (FINAL)
   ========================= */

html, body {
    height: 100%;
    margin: 0;
    background: #fff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    overflow: hidden; /* prevent double scrollbars */
}

/* ---- Layout container ---- */
.app-shell {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    flex: 0 0 auto;
    padding: 10px 14px;
}

.app-body {
    flex: 1 1 auto;
    min-height: 0; /* ✅ critical */
    padding: 14px;
}

/* Common */
.pos-label {
    min-width: 110px;
    font-weight: 500;
}

/* =========================
   POS Page (2 columns)
   ========================= */

.pos-root {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 360px; /* left + right fixed */
    gap: 14px;
    overflow: hidden;
}

/* LEFT */
.pos-left {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 0;
    overflow: hidden;
}

/* barcode row (left area) */
.barcode-row {
    margin-top: 2px;
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 10px;
    align-items: end;
}

.barcode-box .barcode-label {
    display: block;
    font-weight: 800;
    margin-bottom: 6px;
    color: #1c4e9a;
}

/* GRID wrapper takes all remaining height */
.pos-grid-wrap {
    flex: 0 0 auto;
    height: calc(100vh - 430px);
    min-height: 320px;
    border: 2px solid #333;
    border-radius: 6px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    /* Force DxGrid to fill wrapper height */
    .pos-grid-wrap .dxbs-grid,
    .pos-grid-wrap .dxbs-grid-root,
    .pos-grid-wrap .dxbs-grid-container {
        height: 100% !important;
    }

    /* ✅ DevExpress grid must stretch */
    .pos-grid-wrap .dxbl-grid {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .pos-grid-wrap .dxbl-grid-content,
    .pos-grid-wrap .dxbl-scroll-view {
        flex: 1 1 auto;
        min-height: 0;
    }

/* RIGHT */
.pos-right {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
}

/* Buttons grid (right side) */
.actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Panels */
.panel {
    border: 1px solid #cfe0ff;
    border-radius: 10px;
    background: #fff;
    padding: 14px;
}

.panel-title {
    font-weight: 900;
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
}

.kv {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eef2f7;
    font-size: 13px;
}

    .kv:last-child {
        border-bottom: none;
    }

.kv-strong span:last-child {
    font-weight: 900;
}

.hdr-date {
    width: 140px;
}

/* Header bold (optional) */
.nice-grid .dxbl-grid-header-row th {
    font-weight: 900;
}

/*POS Error*/
.pos-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 520px;
    padding: 6px 10px;
    margin: 6px 0;
    background-color: #fdecea;
    border: 1px solid #f5c2c7;
    border-radius: 6px;
    color: #842029;
    font-size: 13px;
}

    .pos-error span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.pos-error-close {
    background: transparent;
    border: none;
    color: #842029;
    font-size: 14px;
    cursor: pointer;
    padding-left: 8px;
}

/*Screen Stop Modal*/
.pos-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-modal {
    width: 520px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.25);
    padding: 18px;
}

.pos-modal-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #842029;
}

.pos-modal-body {
    font-size: 16px;
    line-height: 1.35;
    padding: 12px;
    border: 1px solid #f5c2c7;
    background: #fdecea;
    border-radius: 8px;
    color: #842029;
    margin-bottom: 14px;
}

.pos-modal-actions {
    display: flex;
    justify-content: flex-end;
}

.pos-modal-btn {
    min-width: 110px;
    padding: 10px 14px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background: #0d6efd;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

/* NumericPad Backdrop */
.np-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card */
.np-card {
    width: 560px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    padding: 16px;
}

/* Header */
.np-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.np-title {
    font-size: 18px;
    font-weight: 800;
}

.np-close {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #e6e6e6;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
}

/* Display */
.np-display {
    margin-bottom: 12px;
}

.np-input {
    width: 100%;
    height: 52px;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    padding: 0 14px;
    font-size: 22px;
    font-weight: 800;
    text-align: right;
    outline: none;
}

/* Body layout */
.np-body {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

/* Key grid */
.np-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    flex: 1 1 auto;
}

/* Keys */
.np-key {
    height: 56px;
    border-radius: 12px;
    border: none;
    background: #0d6efd;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
}

    .np-key:hover {
        filter: brightness(0.95);
    }

.np-key-muted {
    background: #f1f3f5;
    color: #212529;
    font-size: 15px;
    font-weight: 800;
}

/* OK button */
.np-side {
    width: 130px;
    display: flex;
}

.np-ok {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: none;
    background: #198754;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
}

    .np-ok:hover {
        filter: brightness(0.95);
    }

.np-hint {
    margin-top: 10px;
    font-size: 12px;
    color: #6c757d;
}

/* give space so text doesn't overlap the left icon button */
.money-input-pad .dxbs-editor-input {
    padding-left: 44px !important;
}

/* make the left editor button clean */
.money-pad-icon {
    width: 38px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    /* keypad icon */
    .money-pad-icon::before {
        content: "";
        width: 18px;
        height: 18px;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.95;
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d6efd'>\
<path d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm2 4H8v2h1V6zm4 0h-1v2h1V6zm3 0h-1v2h1V6zM9 10H8v2h1v-2zm3 0h-1v2h1v-2zm3 0h-1v2h1v-2zM9 14H8v2h1v-2zm3 0h-1v2h1v-2zm3 0h-1v2h1v-2z'/>\
</svg>");
    }

/* =========================
   POS Header (DEDUPED + FIXED)
   ========================= */

.pos-header {
    padding: 4px 10px;
    margin-bottom: 2px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    min-height: 0;
    display: flex;
    align-items: flex-start;
}

.pos-header-split {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.pos-header-left {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.pos-header .dynamic-zone {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

/* ✅ Right side: real 2x2 grid, keeps your markup */
.pos-header-right {
    flex: 0 0 auto;
    min-width: 380px;
    display: grid;
    grid-template-columns: auto auto; /* col1 | col2 */
    gap: 8px 18px; /* row-gap | col-gap */
    align-items: center;
    justify-content: end;
}

    /* ✅ Make your existing row divs NOT affect layout, but keep them in markup */
    .pos-header-right .pos-header-row {
        display: contents;
    }

/* Field item */
.pos-h-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.pos-h-label {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.75;
}

.pos-h-value {
    font-size: 13px;
    font-weight: 800;
}

/* Make Branch editor align with text */
.pos-header-right .dxbl-editor,
.pos-header-right .dxbs-editor {
    align-self: center;
}

/* Skeleton */
.pos-combo-skeleton {
    height: 30px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background: linear-gradient(90deg,#f5f5f5 25%,#eeeeee 37%,#f5f5f5 63%);
    background-size: 400% 100%;
    animation: posShimmer 1.0s ease-in-out infinite;
}

@keyframes posShimmer {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: 0 0
    }
}

/* Mobile input icon */
.mobile-input {
    padding-left: 34px !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    background-size: 16px 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236c757d' d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 2v16h10V4H7zm5 15a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E") !important;
}

/* =========================
   DevExpress Menu Icons (DEDUPED)
   ========================= */

.menu-icon {
    width: var(--dxbl-icon-width);
    height: var(--dxbl-icon-height);
    min-width: var(--dxbl-icon-width);
    min-height: var(--dxbl-icon-height);
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}

.menu-icon-home {
    mask-image: var(--dxbl-icon-home);
    -webkit-mask-image: var(--dxbl-icon-home);
}

.menu-icon-support {
    mask-image: var(--dxbl-icon-support);
    -webkit-mask-image: var(--dxbl-icon-support);
}

.menu-icon-contacts {
    mask-image: var(--dxbl-icon-contacts);
    -webkit-mask-image: var(--dxbl-icon-contacts);
}

.menu-icon-about {
    mask-image: var(--dxbl-icon-about);
    -webkit-mask-image: var(--dxbl-icon-about);
}

.menu-icon-components {
    mask-image: var(--dxbl-icon-products);
    -webkit-mask-image: var(--dxbl-icon-products);
}

/* =========================
   RESPONSIVE (Desktop/Tablet/Mobile)
   ========================= */
@media (max-width: 1200px) {
    .pos-grid-wrap {
        height: calc(100vh - 460px);
    }
}

@media (max-width: 980px) {
    .pos-grid-wrap {
        height: 45vh;
    }
}

@media (max-width: 520px) {
    .pos-grid-wrap {
        height: 40vh;
        min-height: 240px;
    }
}

@media (max-width: 1200px) {
    .pos-root {
        grid-template-columns: 1fr 340px;
    }

    .pos-header-right {
        min-width: 320px;
    }
}

/* Small tablet: stack right under left */
@media (max-width: 980px) {
    .pos-root {
        grid-template-columns: 1fr;
    }

    .pos-right {
        max-height: 45vh;
    }

    .pos-header-split {
        align-items: flex-start;
        flex-direction: column;
    }

    /* On smaller screens, allow right block to flow naturally */
    .pos-header-right {
        min-width: 0;
        width: 100%;
        justify-content: start;
        grid-template-columns: auto auto;
    }
}

/* Mobile: tighter paddings + actions become single column if needed */
@media (max-width: 520px) {
    .app-body {
        padding: 10px;
    }

    .barcode-row {
        grid-template-columns: 1fr;
    }

    .actions {
        grid-template-columns: 1fr;
    }

    /* Right header becomes single column for readability */
    .pos-header-right {
        grid-template-columns: 1fr;
        justify-content: start;
    }

    .pos-h-item {
        white-space: normal;
    }
}
/* ✅ Tablet & Mobile: enable normal scrolling */
@media (max-width: 991px) {
    html, body {
        overflow-y: auto !important;
        height: auto !important;
    }

    /* allow the main content to scroll as a page */
    .ix-shell {
        height: auto !important;
        min-height: 100vh;
        overflow: visible !important;
    }

    .ix-body {
        overflow: visible !important;
        min-height: auto !important;
    }

    /* grid should not trap scrolling on small screens */
    .pos-grid-wrap {
        flex: 0 0 auto !important;
        height: 40vh; /* adjust: 35–50vh */
        min-height: 260px;
        overflow: auto;
    }
}
/* =====================================================
   POS Header – Mobile/Tablet alignment (works with your current markup)
   ===================================================== */
@media (max-width: 991px) {

    /* overall header card */
    .pos-header,
    .pos-header-split {
        padding: 12px 10px;
        border-radius: 12px;
    }

    /* stack split sections on mobile */
    .pos-header-split {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px;
    }

        /* LEFT side: force every field row to be same layout */
        .pos-header-split > div:first-child > div {
            display: grid !important;
            grid-template-columns: 120px 1fr;
            column-gap: 10px;
            row-gap: 8px;
            align-items: center;
            width: 100%;
        }

            /* every label cell (your first <div style="min-width:..">Salesman</div>) */
            .pos-header-split > div:first-child > div > div:first-child {
                font-size: 12px;
                font-weight: 650;
                color: #374151;
                white-space: nowrap;
                min-width: 0 !important; /* override inline min-width */
                width: 120px; /* consistent label width */
                text-align: left;
            }

            /* make controls stretch full */
            .pos-header-split > div:first-child > div .dxbl-texteditor,
            .pos-header-split > div:first-child > div .dxbl-combobox,
            .pos-header-split > div:first-child > div input,
            .pos-header-split > div:first-child > div select {
                width: 100% !important;
                max-width: 100% !important;
            }

            /* put History + "New Customer" nicely on same line */
            .pos-header-split > div:first-child > div:has(.pos-btn),
            .pos-header-split > div:first-child > div:has(button) {
                grid-template-columns: 120px 1fr;
            }

        /* History button should sit in the control column */
        .pos-header-split .pos-btn {
            justify-self: start;
            margin-left: 0 !important;
        }

        /* the "New Customer" text (your small label) */
        .pos-header-split > div:first-child > div > div[style*="font-size:12px"] {
            grid-column: 2 / -1;
            margin-top: -4px;
            opacity: .75;
            font-size: 12px;
        }

    /* RIGHT side (Voucher/Branch/Time) */
    .pos-header-right {
        margin-top: 6px;
        padding-top: 10px;
        border-top: 1px dashed #e5e7eb;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px;
        align-items: center;
    }

    /* each right item align label + value */
    .pos-h-item {
        display: grid;
        grid-template-columns: 95px 1fr;
        align-items: center;
        column-gap: 8px;
    }

    .pos-h-label {
        font-size: 12px;
        font-weight: 650;
        color: #6b7280;
        white-space: nowrap;
    }

    .pos-h-value {
        font-weight: 800;
        color: #111827;
        justify-self: start;
    }

    /* Branch combo should fill remaining cell */
    .pos-header-right .dxbl-combobox {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* barcode row tighten */
    .barcode-row,
    .pos-barcode-row {
        margin-top: 8px;
    }
}
/* =====================================================
   POS - Actions bar after grid (Desktop row style)
   ===================================================== */

/* Desktop: actions in a single row (5 buttons) under grid */
@media (min-width: 992px) {
    .pos-left .actions {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
        margin-top: 10px;
    }

        /* Save should NOT span full row in desktop mode */
        .pos-left .actions .pos-btn-primary {
            grid-column: auto !important;
        }
}

/* Mobile/Tablet: keep your existing 2-column behavior */
@media (max-width: 991px) {
    .pos-left .actions {
        margin-top: 10px;
    }
}
/* =====================================================
   POS Header – Voucher No alignment (LEFT aligned)
   ===================================================== */

.pos-h-item.voucher-no,
.pos-h-item.voucher-no .pos-h-value {
    min-width: 90px; /* enough for 6 digits */
}

    .pos-h-item.voucher-no .pos-h-value {
        display: inline-block;
        text-align: left; /* ✅ FIX: start from left */
        font-weight: 700;
        letter-spacing: 0.5px;
    }
/* =========================
   Ixpert POS - Login Page
   ========================= */

.ix-login-layout {
    min-height: 100vh;
}

.ix-login-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(1200px 600px at 20% 20%, #eef2ff 0%, rgba(238,242,255,0) 60%), radial-gradient(1000px 500px at 80% 30%, #e0f2fe 0%, rgba(224,242,254,0) 60%), #f6f7fb;
}

.ix-login-card {
    width: 560px;
    max-width: 94vw;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
    padding: 22px 22px 18px;
}

.ix-login-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ix-login-brand {
    font-weight: 900;
    letter-spacing: .2px;
    font-size: 16px;
    color: #0f172a;
}

.ix-login-title {
    font-weight: 900;
    font-size: 30px;
    line-height: 1.1;
    color: #0f172a;
}

.ix-login-sub {
    color: #64748b;
    font-size: 13px;
}

.ix-login-divider {
    height: 1px;
    background: #eef2f7;
    margin: 14px 0 16px;
}

.ix-login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ix-login-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 12px;
}

.ix-login-label {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.ix-login-input .dxbl-texteditor,
.ix-login-input .dx-texteditor {
    border-radius: 10px !important;
}

.ix-login-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.ix-login-btn-primary {
    width: 100%;
    border-radius: 10px !important;
    font-weight: 900 !important;
    height: 42px;
}

.ix-login-tip {
    margin-top: 6px;
    text-align: center;
    color: #64748b;
    font-size: 12px;
}

.ix-login-error {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #9f1239;
    padding: 10px 12px;
    border-radius: 12px;
}

.ix-login-error-title {
    font-weight: 900;
    margin-bottom: 2px;
}

.ix-login-error-msg {
    font-weight: 700;
    opacity: .95;
}

/* Responsive */
@media (max-width: 560px) {
    .ix-login-card {
        padding: 18px 16px 14px;
        border-radius: 14px;
    }

    .ix-login-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .ix-login-label {
        font-size: 12px;
        opacity: .9;
    }
}
/* Ensure grid area can scroll */
.report-grid {
    height: calc(100vh - 280px);
}

    /* Force grid content to allow horizontal scrolling when columns overflow */
    .report-grid .dxbl-grid-table {
        width: max-content;
    }

    /* Keep the grid container scrolling */
    .report-grid .dxbl-grid {
        overflow: auto;
    }

.report-empty {
    height: calc(100vh - 280px);
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    background: #fff;
}

.report-empty-title {
    font-size: 18px;
    font-weight: 800;
}

.report-empty-sub {
    font-size: 13px;
    opacity: .75;
}
/*Final Update for Header*/
.ix-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 58px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: #ffffff;
}

.ix-topmenu {
    font-size: 14px;
}

    .ix-topmenu .dx-menu-item-text {
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    .ix-topmenu .dx-menu-item {
        padding: 0 10px !important;
    }

.mi-ico {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: middle;
}
/*Final Update for Header*/
/* Always-visible action bar (no DxToolbar => no '...' overflow) */
.ix-report-toptools {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap; /* wraps instead of collapsing */
}

/* Button sizing to keep header compact */
.ix-toolbtn {
    height: 32px;
    border-radius: 10px;
    font-weight: 800;
    padding: 6px 12px;
}

/* Search box width */
.ix-toolsearch {
    min-width: 220px;
}

    .ix-toolsearch .dx-texteditor {
        height: 32px !important;
    }
/* ---------- Buttons (SVG-based, no DevExpress icon dependency) ---------- */
.ix-btn, .ix-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 13px;
    border: 1px solid rgba(0,0,0,0.10);
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
}

    .ix-btn:hover {
        background: rgba(0,0,0,0.03);
    }

.ix-btn-primary {
    background: #0d64c0;
    border-color: #0d64c0;
    color: #fff;
}

    .ix-btn-primary:hover {
        filter: brightness(0.97);
    }

.ix-ico {
    width: 16px;
    height: 16px;
    /* outline icon style */
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.ix-ico {
    width: 16px;
    height: 16px;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}


/* ---------- Keep SearchBox aligned (no split) ---------- */
.ix-actions .ix-searchbox {
    width: 200px;
    min-width: 200px;
}

/* ---------- Fix “vertical scroll overlapping” feel ---------- */
/* Add a little breathing space for scrollbar + avoid overlay on last column */
.ix-report-grid-card {
    padding-bottom: 14px;
}

/* This selector is safe across DevExpress builds: add right padding to grid content area */
.report-grid .dxbl-grid,
.report-grid .dx-grid,
.report-grid .dxgv {
    padding-right: 10px;
}

/* Slightly reduce grid height so pager/footer never gets hidden */
.report-grid {
    /* keep your current Height=calc(...) too; this is just a safety cushion */
    margin-bottom: 4px;
}

.ix-cm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
}

    .ix-cm-item svg {
        width: 16px;
        height: 16px;
        stroke: #1f6fbf; /* Your POS blue */
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
/* Grid scroll wrapper */
.ix-grid-wrapper {
    height: calc(100vh - 260px); /* adjust based on header size */
    overflow: hidden;
}

    /* Let DevExpress manage internal scrolling */
    .ix-grid-wrapper .dx-grid {
        height: 100% !important;
    }

/* Prevent scrollbar overlap */
.dx-datagrid-rowsview,
.dx-scrollable-container {
    padding-right: 8px !important;
}
    /* Thin modern scrollbar */
    .dx-scrollable-container::-webkit-scrollbar {
        width: 8px;
    }

    .dx-scrollable-container::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.25);
        border-radius: 8px;
    }

        .dx-scrollable-container::-webkit-scrollbar-thumb:hover {
            background: rgba(0,0,0,0.4);
        }
/* ============================= */
/* MOBILE FIXES (REPORT HEADER)  */
/* ============================= */

@media (max-width: 768px) {

    .ix-report-page {
        padding: 10px;
    }

    .ix-report-page-bg {
        padding: 8px;
        border-radius: 12px;
    }

    .ix-report-head-card {
        padding: 12px;
        border-radius: 12px;
    }

    /* Title row becomes stacked */
    .ix-report-head-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 8px;
    }

    .ix-report-title {
        font-size: 16px;
    }

    .ix-report-sub {
        font-size: 12px;
    }

    /* Filters: 2 columns on tablet-ish widths */
    .ix-filter-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: end;
    }

    .ix-filter-item {
        min-width: 0 !important; /* kill overflow */
    }

    /* Make DevExpress editors fill cell */
    .ix-filter-row .dx-texteditor,
    .ix-filter-row .dx-dropdowneditor,
    .ix-filter-row .dx-datebox {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Run button: full width at end */
    .ix-run-btn {
        width: 100%;
        justify-self: stretch;
        height: 36px;
        border-radius: 10px;
    }

    /* Grid card tighter */
    .ix-report-grid-card {
        padding: 8px;
        border-radius: 12px;
    }
}

/* Phone widths: single column */
@media (max-width: 520px) {

    .ix-filter-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Reduce extra whitespace */
    .ix-report-sub {
        display: none;
    }
}

/* ============================= */
/* ACTION BUTTONS ROW (MOBILE)   */
/* If your buttons are inside the DxGrid toolbar, this helps too */
/* ============================= */

@media (max-width: 768px) {

    /* If buttons are in your own row container, use this class (see step 3) */
    .ix-actions-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }

        .ix-actions-row .ix-act-btn {
            flex: 1 1 calc(50% - 8px);
            min-width: 150px;
        }

        .ix-actions-row .ix-search-wrap {
            flex: 1 1 100%;
            min-width: 0;
        }

            .ix-actions-row .ix-search-wrap .dx-texteditor {
                width: 100% !important;
            }
}
/* ============================= */
/* REPORT HEADER: RESPONSIVE FIX */
/* ============================= */

.ix-head-row1 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ix-head-title {
    min-width: 0;
}

.ix-head-company {
    display: flex;
    align-items: flex-start;
}

.ix-company-badge {
    font-weight: 800;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(0,0,0,0.03);
    white-space: nowrap;
}

.ix-head-row2 {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-top: 10px;
    flex-wrap: wrap;
}

.ix-filters-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 190px));
    gap: 12px;
    align-items: end;
}

.ix-filter-item {
    min-width: 0;
}

.ix-run-wrap {
    display: flex;
    align-items: flex-end;
}

.ix-run-btn {
    height: 36px;
    padding: 7px 18px;
    border-radius: 10px;
    font-weight: 800;
}

.ix-head-row3 {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}

.ix-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

    .ix-act-btn:hover {
        background: rgba(0,0,0,0.03);
    }

.ix-ico svg {
    width: 16px;
    height: 16px;
    display: block;
}

.ix-search-wrap {
    margin-left: auto;
    min-width: 240px;
}

/* ✅ MOBILE */
@media (max-width: 768px) {

    .ix-report-sub {
        display: none;
    }

    .ix-head-row1 {
        flex-direction: column;
        align-items: flex-start;
    }

    .ix-head-row2 {
        flex-direction: column;
        align-items: stretch;
    }

    .ix-filters-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ix-run-wrap {
        width: 100%;
    }

    .ix-run-btn {
        width: 100%;
    }

    .ix-head-row3 {
        gap: 8px;
    }

    .ix-act-btn {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
        min-width: 150px;
    }

    .ix-search-wrap {
        flex: 1 1 100%;
        min-width: 0;
        margin-left: 0;
    }

        .ix-search-wrap .dx-texteditor {
            width: 100% !important;
            max-width: 100% !important;
        }
}

/* ✅ VERY SMALL PHONES */
@media (max-width: 480px) {
    .ix-filters-grid {
        grid-template-columns: 1fr;
    }

    .ix-act-btn {
        flex: 1 1 100%;
    }
}
/* icon-only buttons */
.ix-action-btn, .ix-run-btn {
    min-width: 38px;
    padding: 6px 10px !important;
    justify-content: center;
    gap: 0 !important;
}
/*Mobile Header*/
/* topbar layout */
.ix-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* menu area stays left, user area stays right */
.ix-menu-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.ix-topbar-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* prevent weird vertical misalignment in mobile */
@media (max-width: 768px) {
    .ix-topbar {
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
    }

    /* keep everything on one row as much as possible */
    .ix-menu-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

    .ix-topbar-right {
        flex: 0 0 auto;
    }

        /* user name alignment + trimming */
        .ix-topbar-right > div {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
        }

        /* avoid "Supervisor" dropping down / floating */
        .ix-topbar-right div[style*="font-weight:600"] {
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 12px !important;
        }

    /* keep logout button compact */
    .logout-btn-cta {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
/* ==========================================
   REPORT ACTIONS – MOBILE TOGGLE MODE
   (Clean override – no structure changes)
   ========================================== */

@media (max-width: 768px) {

    /* Hide normal buttons row */
    .ix-head-row3 .ix-act-btn,
    .ix-head-row3 .ix-search-wrap {
        display: none !important;
    }

    /* Show toggle menu button */
    .ix-mobile-actions-toggle {
        display: flex !important;
        margin-left: auto;
    }

    /* Toggle button style */
    .ix-mobile-dots-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1px solid rgba(0,0,0,0.12);
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .ix-mobile-dots-btn svg {
            width: 18px;
            height: 18px;
            stroke: #1f6fbf;
            stroke-width: 2;
        }

    /* Dropdown menu */
    .ix-mobile-actions-menu {
        position: absolute;
        right: 0;
        top: 44px;
        width: 220px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        border: 1px solid rgba(0,0,0,0.08);
        padding: 8px;
        display: none;
        z-index: 999;
    }

        .ix-mobile-actions-menu.active {
            display: block;
        }

        .ix-mobile-actions-menu button {
            width: 100%;
            border: none;
            background: none;
            padding: 10px 12px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            cursor: pointer;
            font-size: 14px;
        }

            .ix-mobile-actions-menu button:hover {
                background: rgba(0,0,0,0.04);
            }

        .ix-mobile-actions-menu svg {
            width: 16px;
            height: 16px;
            stroke: #1f6fbf;
            stroke-width: 2;
            fill: none;
        }
}

/* Desktop: ensure toggle hidden */
@media (min-width: 769px) {
    .ix-mobile-actions-toggle {
        display: none !important;
    }
}

@media (max-width: 768px) {

    /* Hide desktop header buttons row (your toolbar buttons) */
    .ix-report-toolbar {
        display: none !important;
    }

    /* Show mobile dots */
    .ix-mobile-actions-toggle {
        display: flex !important;
        margin-left: auto;
        position: relative;
    }

    .ix-mobile-dots-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1px solid rgba(0,0,0,0.12);
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .ix-mobile-dots-btn svg {
            width: 18px;
            height: 18px;
            fill: #1f6fbf;
        }

    .ix-mobile-actions-menu {
        position: absolute;
        right: 0;
        top: 42px;
        width: 220px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        border: 1px solid rgba(0,0,0,0.08);
        padding: 8px;
        display: none;
        z-index: 999;
    }

        .ix-mobile-actions-menu.active {
            display: block;
        }

        .ix-mobile-actions-menu button {
            width: 100%;
            border: none;
            background: none;
            padding: 10px 12px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            cursor: pointer;
            font-size: 14px;
        }

            .ix-mobile-actions-menu button:hover {
                background: rgba(0,0,0,0.04);
            }

    .ix-mi {
        width: 18px;
        display: inline-flex;
        justify-content: center;
    }
}

@media (min-width: 769px) {
    .ix-mobile-actions-toggle {
        display: none !important;
    }
}
/* ===== Actions visibility: Desktop vs Mobile ===== */
.ix-actions-desktop {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

/* on desktop, hide the 3-dots toggle */
@media (min-width: 769px) {
    .ix-mobile-actions-toggle {
        display: none !important;
    }

    .ix-actions-desktop {
        display: flex !important;
    }
}

/* on mobile, show ONLY 3-dots toggle, hide desktop buttons */
@media (max-width: 768px) {
    .ix-actions-desktop {
        display: none !important;
    }

    .ix-mobile-actions-toggle {
        display: inline-flex !important;
    }
}
/* =========================================
   MOBILE VISIBILITY + POSITION (FINAL)
   ========================================= */

.ix-mobile-actions-toggle {
    display: none !important;
}

.ix-head-row3 {
    display: flex !important;
}

/* =========================================
   MOBILE: Search left, Toggle right
   ========================================= */
@media (max-width: 768px) {

    .ix-head-row3 {
        display: none !important;
    }

    .ix-filter-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .ix-filter-item {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* ===============================
   RUN BUTTON MODERN STYLE
   =============================== */

    .ix-run-btn,
    .dx-button.ix-run-btn {
        background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 8px 18px !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
        transition: all 0.2s ease;
    }

        .ix-run-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35);
        }


    /* ✅ Search row */
    .ix-mobile-search {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        flex-direction: row !important; /* NORMAL direction */
    }

        /* ✅ Search takes full remaining width */
        .ix-mobile-search .dx-texteditor,
        .ix-mobile-search .dx-searchbox {
            flex: 1 1 auto !important;
            min-width: 0 !important;
        }

    /* ✅ Toggle pushed to RIGHT */
    .ix-mobile-actions-toggle {
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important; /* 🔥 THIS moves it right */
    }

    .ix-mobile-dots-btn {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
    }

    .ix-mobile-actions-menu {
        z-index: 99999 !important;
    }

    .ix-head-row3 .dx-searchbox,
    .ix-head-row3 .ix-desktop-search {
        display: none !important;
    }
}
/* ===== Header: keep user + logout visible & aligned ===== */

.ix-topbar-right {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    overflow: visible !important; /* prevents logout from clipping */
}

/* inner row */
.ix-topbar-right-inner {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

/* user badge (same look as your inline style, but responsive-safe) */
.ix-user-pill {
    font-weight: 600 !important;
    font-size: 13px !important;
    opacity: 0.85 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    background: rgba(0,0,0,0.04) !important;
    white-space: nowrap !important;
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* logout button never shrinks away */
.logout-btn-cta {
    flex: 0 0 auto !important;
    min-width: 40px !important;
    min-height: 40px !important;
}

/* mobile tighten */
@media (max-width: 768px) {
    .ix-topbar-right-inner {
        gap: 10px !important;
    }

    .ix-user-pill {
        max-width: 120px !important;
    }
}
/* =========================================================
   TOPBAR RIGHT ALWAYS VISIBLE (FINAL - PUT AT END OF site.css)
   ========================================================= */

/* Ensure header containers do NOT clip children */
html body .ix-topbar,
html body .ix-topbar-inner,
html body .ix-shell-topbar,
html body header,
html body .ix-topbar-row {
    overflow: visible !important;
}

/* Force topbar row to behave correctly */
html body .ix-topbar-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important; /* ✅ prevents logout going to next line or getting hidden */
    min-width: 0 !important;
}

    /* Middle area must shrink (so right never gets pushed out) */
    html body .ix-topbar-row > * {
        min-width: 0 !important;
    }

/* Right section pinned to far right */
html body .ix-topbar-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important; /* ✅ pushes it to the right */
    flex: 0 0 auto !important; /* ✅ never shrink away */
    white-space: nowrap !important;
    overflow: visible !important;
}

    /* Inner row */
    html body .ix-topbar-right .ix-topbar-right-inner {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    /* User pill: keep compact */
    html body .ix-topbar-right .ix-user-pill {
        font-weight: 600 !important;
        font-size: 13px !important;
        opacity: .85 !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        background: rgba(0,0,0,0.04) !important;
        max-width: 140px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Logout button: never disappear */
    html body .ix-topbar-right .logout-btn-cta {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 10px !important;
    }

/* Ensure icon visible (no black) */
html body .logout-btn-cta .logout-ico {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    color: #0d6efd !important;
}

/* Mobile tighten */
@media (max-width: 768px) {
    html body .ix-topbar-right .ix-topbar-right-inner {
        gap: 10px !important;
    }

    html body .ix-topbar-right .ix-user-pill {
        max-width: 110px !important;
    }
}
/* =========================================================
   DESKTOP FIX: remove duplicate search + align buttons
   (ADD AT VERY END of site.css)
   ========================================================= */

/* ✅ Desktop: show only the desktop row3 search + actions */
@media (min-width: 769px) {

    /* Hide the MOBILE search+toggle row completely on desktop */
    .ix-head-row2 .ix-mobile-search {
        display: none !important;
    }

    /* Ensure desktop row3 is visible */
    .ix-head-row3 {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        flex-wrap: nowrap !important;
    }

    /* ✅ Buttons in one clean line */
    .ix-actions-row {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
    }

    /* ✅ Search stays on right and does not drop */
    .ix-search-wrap {
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 220px !important; /* adjust if you want wider */
        min-width: 220px !important;
    }

        /* Ensure searchbox fits nicely */
        .ix-search-wrap .dx-searchbox,
        .ix-search-wrap .dx-texteditor {
            width: 100% !important;
        }
}
/* =========================================================
   DESKTOP: Put Row-2 (filters) + Row-3 (buttons+search)
   in the SAME ROW using CSS GRID
   ========================================================= */
@media (min-width: 769px) {

    /* Make the head card a grid container */
    .ix-report-head-card {
        display: grid !important;
        grid-template-columns: 1fr auto !important; /* left: filters, right: actions+search */
        grid-template-rows: auto auto !important; /* row1, row2 */
        column-gap: 18px !important;
        row-gap: 12px !important;
        align-items: center !important;
    }

    /* Row-1 spans full width */
    .ix-head-row1 {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    /* Row-2 goes left on second grid row */
    .ix-head-row2 {
        grid-column: 1 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Row-3 goes right on second grid row (same row as Row-2) */
    .ix-head-row3 {
        grid-column: 2 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    /* Keep the filter row compact */
    .ix-filter-row {
        display: flex !important;
        align-items: flex-end !important;
        gap: 14px !important;
        flex-wrap: nowrap !important;
    }

    /* Buttons row */
    .ix-actions-row {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }

    /* Search box right beside buttons */
    .ix-search-wrap {
        min-width: 220px !important;
    }

    /* Mobile items must stay hidden on desktop */
    .ix-mobile-search,
    .ix-mobile-actions-toggle {
        display: none !important;
    }
}
/* =========================================================
   DESKTOP: Align Right buttons+search with parameter inputs
   ========================================================= */
@media (min-width: 769px) {

    /* Align the whole right area to the same baseline as inputs */
    .ix-head-row3 {
        align-items: flex-end !important;
        padding-bottom: 2px !important; /* tiny nudge to match the input bottom line */
    }

    /* Ensure buttons + search are also bottom-aligned */
    .ix-actions-row,
    .ix-search-wrap {
        align-items: flex-end !important;
    }

        /* Search editor sits slightly higher by default in DevExpress */
        .ix-search-wrap .dx-texteditor {
            margin-bottom: 2px !important; /* adjust: 1px/2px/3px if needed */
        }

        /* Buttons: make sure they align to the same bottom line */
        .ix-actions-row .ix-action-btn {
            margin-bottom: 2px !important; /* same nudge as search */
        }
}
/* =========================================================
   DESKTOP: Align right buttons/search to INPUT row (not label)
   + Colorful action buttons
   ========================================================= */
@media (min-width: 769px) {

    /* 🔧 MAIN FIX: push the whole right section down to align with input boxes */
    .ix-head-row3 {
        padding-top: 22px !important; /* adjust 18-26px if needed */
        align-items: flex-end !important;
    }

    /* keep row3 content tight and aligned */
    .ix-actions-row {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .ix-search-wrap {
        display: flex !important;
        align-items: center !important;
        margin-left: 12px !important;
    }

    /* === Make action buttons modern + colorful === */
    .ix-actions-row .ix-action-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        height: 38px !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(0,0,0,0.10) !important;
        background: #fff !important;
        box-shadow: 0 1px 0 rgba(0,0,0,0.03) !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

        .ix-actions-row .ix-action-btn .ix-ico {
            width: 18px !important;
            height: 18px !important;
            stroke: currentColor !important;
            fill: none !important;
            stroke-width: 2 !important;
        }

        /* 🎨 Color per button (order matters) */
        .ix-actions-row .ix-action-btn:nth-child(1) { /* Save Layout */
            background: rgba(25, 135, 84, .10) !important;
            border-color: rgba(25, 135, 84, .35) !important;
            color: rgb(25, 135, 84) !important;
        }

        .ix-actions-row .ix-action-btn:nth-child(2) { /* Reset Layout */
            background: rgba(253, 126, 20, .10) !important;
            border-color: rgba(253, 126, 20, .35) !important;
            color: rgb(253, 126, 20) !important;
        }

        .ix-actions-row .ix-action-btn:nth-child(3) { /* Column Chooser */
            background: rgba(111, 66, 193, .10) !important;
            border-color: rgba(111, 66, 193, .35) !important;
            color: rgb(111, 66, 193) !important;
        }

        .ix-actions-row .ix-action-btn:nth-child(4) { /* Excel */
            background: rgba(13, 202, 240, .12) !important;
            border-color: rgba(13, 202, 240, .40) !important;
            color: rgb(13, 202, 240) !important;
        }

        /* hover polish */
        .ix-actions-row .ix-action-btn:hover {
            filter: brightness(0.98) !important;
            box-shadow: 0 3px 12px rgba(0,0,0,0.06) !important;
        }

    /* Search box match button height */
    .ix-search-wrap .dx-texteditor {
        height: 38px !important;
    }
}
/* =========================================================
   REPORT HEADER – make Title/Params/Company match new buttons
   (Paste LAST in site.css)
   ========================================================= */

/* Header card polish */
.ix-report-head-card {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important;
}

/* Title row spacing */
.ix-head-row1 {
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    margin-bottom: 10px !important;
}

/* Report title = bold + clean */
.ix-report-title {
    font-weight: 900 !important;
    letter-spacing: .2px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    color: #111 !important;
}

/* Subtitle softer */
.ix-report-sub {
    margin-top: 4px !important;
    font-size: 13px !important;
    color: rgba(0,0,0,0.62) !important;
}

/* Company badge = same pill style */
.ix-co-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: .2px !important;
    background: rgba(13,110,253,0.10) !important;
    border: 1px solid rgba(13,110,253,0.25) !important;
    color: #0d6efd !important;
    white-space: nowrap !important;
}

/* Parameter “mini cards” */
.ix-filter-item {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02) !important;
}

/* Label inside parameter card */
.ix-filter-label {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: rgba(0,0,0,0.65) !important;
    margin-bottom: 6px !important;
}

/* Inputs look “pill-ish” + clean */
.ix-filter-item .dx-texteditor,
.ix-filter-item .dx-dropdowneditor {
    border-radius: 12px !important;
}

.ix-filter-item .dx-texteditor-input {
    font-weight: 700 !important;
}

/* make the parameter row visually aligned + airy */
.ix-filter-row {
    gap: 12px !important;
}

/* Run button can stay as-is, but make it match the “premium” feel */
.ix-run-btn {
    border-radius: 12px !important;
    height: 38px !important;
    padding: 0 14px !important;
    font-weight: 800 !important;
}

/* Optional: slightly lift everything on desktop like your button row */
@media (min-width: 769px) {
    .ix-head-row2 {
        align-items: flex-end !important;
    }
}
/* =========================================================
   FORCE: Report Title + Run Button (DevExpress override)
   Paste at VERY END of site.css
   ========================================================= */

/* ---- Title (force) ---- */
body .ix-report-page .ix-report-title,
body .ix-report-page .ix-report-head-card .ix-report-title {
    font-weight: 900 !important;
    letter-spacing: .2px !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    color: #111 !important;
}

/* ---- Run button (force DevExpress primary override) ---- */
body .ix-report-page .ix-run-btn,
body .ix-report-page .ix-run-btn.dxbl-btn,
body .ix-report-page .ix-run-btn.dxbl-btn-primary {
    border-radius: 14px !important;
    height: 40px !important;
    padding: 0 16px !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 22px rgba(13,110,253,0.18) !important;
}

    /* keep the text bold (DevExpress wraps it) */
    body .ix-report-page .ix-run-btn .dxbl-btn-text,
    body .ix-report-page .ix-run-btn .dxbl-btn-content {
        font-weight: 900 !important;
    }
/* =========================================================
   FORCE: Report Title + Run Button (STRONG OVERRIDE)
   Paste at VERY END of site.css
   ========================================================= */

/* -----------------------------
   REPORT TITLE (Row1)
   ----------------------------- */
body .ix-report-page .ix-head-row1 {
    align-items: center !important;
}

    /* Title: bold + modern */
    body .ix-report-page .ix-head-row1 .ix-report-title {
        font-weight: 900 !important;
        font-size: 24px !important;
        line-height: 1.15 !important;
        letter-spacing: .2px !important;
        color: #0f172a !important;
    }

    /* Sub text slightly nicer */
    body .ix-report-page .ix-head-row1 .ix-report-sub {
        margin-top: 4px !important;
        color: rgba(15, 23, 42, 0.62) !important;
        font-weight: 500 !important;
    }

    /* Company badge: richer (same “nice” look) */
    body .ix-report-page .ix-head-row1 .ix-co-badge {
        border: 1px solid rgba(59,130,246,0.35) !important;
        background: rgba(59,130,246,0.10) !important;
        color: #2563eb !important;
        font-weight: 900 !important;
        border-radius: 999px !important;
        padding: 9px 14px !important;
    }


/* -----------------------------
   RUN BUTTON (DevExpress DxButton)
   ----------------------------- */

/* Target ALL possible button elements DevExpress renders */
body .ix-report-page .ix-run-btn,
body .ix-report-page .ix-run-btn.dxbl-btn,
body .ix-report-page button.ix-run-btn,
body .ix-report-page .dxbl-btn.ix-run-btn,
body .ix-report-page .dxbl-btn-primary.ix-run-btn {
    border-radius: 14px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    font-weight: 900 !important;
    border: 0 !important;
    box-shadow: 0 10px 22px rgba(13,110,253,0.18) !important;
}

    /* Make sure the inner text is bold too */
    body .ix-report-page .ix-run-btn .dxbl-btn-text,
    body .ix-report-page .ix-run-btn .dxbl-btn-content,
    body .ix-report-page .ix-run-btn span {
        font-weight: 900 !important;
        letter-spacing: .2px !important;
    }

    /* Hover polish */
    body .ix-report-page .ix-run-btn:hover {
        box-shadow: 0 14px 28px rgba(13,110,253,0.22) !important;
    }

/* Mobile keep full width (your existing behavior) */
@media (max-width: 768px) {
    body .ix-report-page .ix-run-btn,
    body .ix-report-page .ix-run-btn.dxbl-btn,
    body .ix-report-page button.ix-run-btn {
        width: 100% !important;
    }
}
/* =========================================================
   REPORT HEADER – FINAL (Title + Company + Run + Alignment)
   Paste at VERY END of site.css
   ========================================================= */

/* Ensure Row2 aligns everything to the same baseline */
body .ix-report-page .ix-head-row2 {
    align-items: flex-end !important;
}

/* Make filter cards + action buttons sit on same “floor” */
body .ix-report-page .ix-filter-row {
    align-items: flex-end !important;
}

/* Run button: premium + same height as colored buttons */
body .ix-report-page .ix-run-btn,
body .ix-report-page .ix-run-btn.dxbl-btn,
body .ix-report-page .ix-run-btn.dxbl-btn-primary {
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 22px rgba(13,110,253,0.18) !important;
}

/* Run button vertical alignment (because it has no label like parameters) */
body .ix-report-page .ix-filter-row .ix-run-btn {
    align-self: flex-end !important;
    margin-bottom: 2px !important;
}

/* Title: match the “premium” feel (clean + strong) */
body .ix-report-page .ix-report-title {
    font-weight: 900 !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    letter-spacing: .2px !important;
    color: #0f172a !important;
}

/* Subtitle softer */
body .ix-report-page .ix-report-sub {
    color: rgba(15, 23, 42, 0.62) !important;
    font-weight: 500 !important;
}

/* Company badge (top-right): same premium pill */
body .ix-report-page .ix-co-badge {
    border: 1px solid rgba(59,130,246,0.35) !important;
    background: rgba(59,130,246,0.10) !important;
    color: #2563eb !important;
    font-weight: 900 !important;
    border-radius: 999px !important;
    padding: 9px 14px !important;
}
/* =========================================================
   REPORT HEADER (DESKTOP) – FINAL ALIGNMENT OVERRIDE
   (Paste at VERY END of site.css)
   Targets: .ix-head-row2, .ix-filter-row, .ix-actions-row, .ix-search-wrap
   ========================================================= */

@media (min-width: 769px) {

    /* 1) Keep Row2 (filters) and Row3 (buttons+search) on SAME line */
    .ix-report-head-card {
        display: grid !important;
        grid-template-columns: 1fr auto !important; /* left filters | right actions */
        grid-template-rows: auto auto !important; /* row1 title | row2 content */
        column-gap: 18px !important;
        row-gap: 12px !important;
        align-items: end !important;
    }

    .ix-head-row1 {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    .ix-head-row2 {
        grid-column: 1 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: flex-end !important; /* ✅ bottom align like inputs */
    }

    .ix-head-row3 {
        grid-column: 2 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        display: flex !important;
        align-items: flex-end !important; /* ✅ align to input baseline */
        justify-content: flex-end !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        /* ✅ MAIN ALIGN FIX:
       Row3 has no labels; filters have labels above inputs.
       Push Row3 DOWN to match the INPUT line (not the label line). */
        padding-top: 22px !important; /* adjust 18–26px if needed */
    }

    /* 2) Filter row must stay one clean line */
    .ix-filter-row {
        display: flex !important;
        align-items: flex-end !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
    }

    /* 3) Buttons row (right) */
    .ix-actions-row {
        display: flex !important;
        align-items: flex-end !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }

    /* 4) Search box right beside buttons */
    .ix-search-wrap {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        min-width: 240px !important;
        margin-left: 12px !important;
    }

        .ix-search-wrap .dx-searchbox,
        .ix-search-wrap .dx-texteditor {
            width: 100% !important;
        }

    /* Keep heights consistent (buttons + search) */
    .ix-actions-row .ix-action-btn {
        height: 38px !important;
        margin: 0 !important;
    }

    .ix-search-wrap .dx-texteditor {
        height: 38px !important;
        margin: 0 !important;
    }

    /* Desktop: never show mobile search/toggle */
    .ix-head-row2 .ix-mobile-search,
    .ix-mobile-actions-toggle {
        display: none !important;
    }
}
/* ===============================
   REPORT TITLE STYLE
   =============================== */

/* =========================================
   PREMIUM GRADIENT REPORT TITLE
   (Matches action button theme)
   ========================================= */

.ix-report-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: .4px;
    background: linear-gradient( 90deg, #10b981, /* green (Save) */
    #3b82f6, /* blue  */
    #8b5cf6, /* purple (Column Chooser) */
    #06b6d4 /* cyan (Excel) */
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: titleGradientMove 6s ease infinite;
}

/* Soft animated movement */
@keyframes titleGradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
/*Voucher Edit*/
.ix-vno-edit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ix-vno-btn {
    border: none;
    background: #f3f4f6;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 800;
}

    .ix-vno-btn:hover {
        background: #e5e7eb;
    }

    .ix-vno-btn.primary {
        background: #2563eb;
        color: #fff;
    }

        .ix-vno-btn.primary:hover {
            filter: brightness(.95);
        }

.ix-vno-input {
    width: 110px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-weight: 800;
}

.ix-vno-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/*Voucher Edit*/

/* =========================================================
   GLOBAL THEME TOKENS
   ========================================================= */

.theme-host {
    --ix-bg: #f5f6f8;
    --ix-surface: #ffffff;
    --ix-surface-alt: #f7f7f8;
    --ix-surface-soft: #f3f4f6;
    --ix-text: #111827;
    --ix-text-muted: #6b7280;
    --ix-border: #d9dde3;
    --ix-border-soft: #e5e7eb;
    --ix-accent: #2563eb;
    --ix-accent-hover: #1d4ed8;
    --ix-accent-soft: rgba(37, 99, 235, 0.12);
    --ix-success: #198754;
    --ix-success-soft: rgba(25, 135, 84, 0.12);
    --ix-danger: #b4232a;
    --ix-danger-soft: #fdecea;
    --ix-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.theme-fluent-dark {
    --ix-bg: #1f232a;
    --ix-surface: #2a2f37;
    --ix-surface-alt: #242931;
    --ix-surface-soft: #313843;
    --ix-text: #f3f4f6;
    --ix-text-muted: #c3cad5;
    --ix-border: #414a57;
    --ix-border-soft: #3a424d;
    --ix-accent: #5ea3ff;
    --ix-accent-hover: #7db5ff;
    --ix-accent-soft: rgba(94, 163, 255, 0.18);
    --ix-success: #4fd49a;
    --ix-success-soft: rgba(79, 212, 154, 0.16);
    --ix-danger: #ff8d8d;
    --ix-danger-soft: rgba(140, 42, 42, 0.35);
    --ix-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.theme-blazing-dark,
.theme-purple {
    --ix-bg: #26222e;
    --ix-surface: #302b3a;
    --ix-surface-alt: #2a2633;
    --ix-surface-soft: #3a3446;
    --ix-text: #f5f3ff;
    --ix-text-muted: #d1cae8;
    --ix-border: #4c4460;
    --ix-border-soft: #433b56;
    --ix-accent: #9b7cff;
    --ix-accent-hover: #ad92ff;
    --ix-accent-soft: rgba(155, 124, 255, 0.18);
    --ix-success: #4fd49a;
    --ix-success-soft: rgba(79, 212, 154, 0.16);
    --ix-danger: #ff9da8;
    --ix-danger-soft: rgba(111, 39, 58, 0.35);
    --ix-shadow: 0 18px 40px rgba(12, 8, 24, 0.35);
}

.theme-blazing-berry {
    --ix-bg: #fff6f8;
    --ix-surface: #ffffff;
    --ix-surface-alt: #fff0f4;
    --ix-surface-soft: #ffe5ee;
    --ix-text: #3d2030;
    --ix-text-muted: #7a5365;
    --ix-border: #f1c9d8;
    --ix-border-soft: #f7dae4;
    --ix-accent: #d63384;
    --ix-accent-hover: #bb2d75;
    --ix-accent-soft: rgba(214, 51, 132, 0.14);
}

.theme-bootstrap,
.theme-fluent-light {
    --ix-bg: #f5f6f8;
    --ix-surface: #ffffff;
    --ix-surface-alt: #f8fafc;
    --ix-surface-soft: #f1f5f9;
    --ix-text: #111827;
    --ix-text-muted: #667085;
    --ix-border: #d9dde3;
    --ix-border-soft: #e5e7eb;
    --ix-accent: #2563eb;
    --ix-accent-hover: #1d4ed8;
    --ix-accent-soft: rgba(37, 99, 235, 0.12);
}

.theme-office-white {
    --ix-bg: #f7f8fb;
    --ix-surface: #ffffff;
    --ix-surface-alt: #f9fafb;
    --ix-surface-soft: #eef1f5;
    --ix-text: #202124;
    --ix-text-muted: #5f6368;
    --ix-border: #d6d9de;
    --ix-border-soft: #e2e5ea;
    --ix-accent: #f05b41;
    --ix-accent-hover: #d94830;
    --ix-accent-soft: rgba(240, 91, 65, 0.14);
    --ix-success: #2e7d32;
    --ix-success-soft: rgba(46, 125, 50, 0.12);
    --ix-danger: #c62828;
    --ix-danger-soft: #fdebea;
    --ix-shadow: 0 10px 24px rgba(60, 64, 67, 0.10);
}

.theme-host,
.theme-host .ix-shell,
.theme-host .embedded-shell,
.theme-host .app-shell,
.theme-host .workspace-shell,
.theme-host .ix-login-layout {
    background: var(--ix-bg);
    color: var(--ix-text);
}

.theme-host .ix-topbar,
.theme-host .workspace-panel,
.theme-host .module-sidebar,
.theme-host .menu-main-panel,
.theme-host .workspace-tabs-row,
.theme-host .workspace-content-host,
.theme-host .panel,
.theme-host .pos-header,
.theme-host .pos-grid-wrap,
.theme-host .np-card,
.theme-host .pos-modal,
.theme-host .menu-grid,
.theme-host .menu-form {
    background: var(--ix-surface) !important;
    color: var(--ix-text) !important;
    border-color: var(--ix-border) !important;
    box-shadow: var(--ix-shadow);
}

.theme-host .ix-body,
.theme-host .app-body,
.theme-host .menu-layout-content,
.theme-host .tab-host-layer,
.theme-host .screen-frame,
.theme-host .pos-right,
.theme-host .pos-left {
    background: var(--ix-bg) !important;
    color: var(--ix-text);
}

.theme-host .ix-company-badge,
.theme-host .ix-user-chip,
.theme-host .ix-theme-select,
.theme-host .module-nav-item,
.theme-host .mainmenu-card,
.theme-host .ix-tab-context-menu,
.theme-host .submenu-tile:hover,
.theme-host .ix-vno-input,
.theme-host .np-input,
.theme-host .np-close {
    background: var(--ix-surface) !important;
    color: var(--ix-text) !important;
    border-color: var(--ix-border) !important;
}

.theme-host .ix-muted,
.theme-host .ix-theme-label,
.theme-host .sidebar-title,
.theme-host .selected-module-kicker,
.theme-host .selected-module-subtitle,
.theme-host .pos-h-label,
.theme-host .np-hint,
.theme-host .kv,
.theme-host .module-nav-text,
.theme-host .submenu-text {
    color: var(--ix-text-muted) !important;
}

.theme-host .ix-brand,
.theme-host .selected-module-title,
.theme-host .mainmenu-title,
.theme-host .panel-title,
.theme-host .pos-h-value,
.theme-host .np-title,
.theme-host .ix-tab-context-item {
    color: var(--ix-text) !important;
}

.theme-host .workspace-message,
.theme-host .pos-error,
.theme-host .pos-modal-body {
    background: var(--ix-danger-soft) !important;
    color: var(--ix-danger) !important;
    border-color: color-mix(in srgb, var(--ix-danger) 25%, var(--ix-surface)) !important;
}

.theme-host .workspace-empty,
.theme-host .workspace-empty-inner,
.theme-host .selected-module-header,
.theme-host .module-nav-item:hover,
.theme-host .ix-tab-context-item:hover,
.theme-host .menu-inline-btn:hover,
.theme-host .submenu-tile:hover,
.theme-host .np-key-muted,
.theme-host .ix-vno-btn,
.theme-host .ix-theme-select,
.theme-host .logout-btn-cta:hover {
    background: var(--ix-surface-soft) !important;
}

.theme-host .module-nav-item.active,
.theme-host .mainmenu-card::before,
.theme-host .module-nav-dot,
.theme-host .submenu-bullet,
.theme-host .pos-modal-btn,
.theme-host .ix-vno-btn.primary,
.theme-host .np-key,
.theme-host .np-ok {
    background: var(--ix-accent) !important;
    color: #ffffff !important;
}

.theme-host .module-nav-item.active,
.theme-host .pos-btn-primary,
.theme-host .ix-login-btn-primary,
.theme-host .ix-login-btn-primary2 {
    border-color: color-mix(in srgb, var(--ix-accent) 55%, var(--ix-surface)) !important;
}

.theme-host .module-nav-item.active .module-nav-text,
.theme-host .module-nav-item.active .module-nav-dot,
.theme-host .ix-vno-btn.primary,
.theme-host .np-key,
.theme-host .np-ok,
.theme-host .pos-modal-btn {
    color: #ffffff !important;
}

.theme-host .ix-vno-btn,
.theme-host .np-close,
.theme-host .menu-inline-btn,
.theme-host .ix-tab-close-btn,
.theme-host .ix-theme-select,
.theme-host .logout-btn-cta,
.theme-host .pos-error-close {
    color: var(--ix-text) !important;
}

.theme-host .ix-vno-btn:hover,
.theme-host .np-close:hover,
.theme-host .ix-tab-close-btn:hover {
    background: var(--ix-surface-soft) !important;
}

.theme-host .logout-btn-cta,
.theme-host .pos-btn-primary,
.theme-host .ix-login-btn-primary2,
.theme-host .ix-login-btn-primary {
    background: var(--ix-accent) !important;
    color: #ffffff !important;
}

.theme-host .logout-btn-cta:hover,
.theme-host .pos-btn-primary:hover,
.theme-host .ix-login-btn-primary2:hover,
.theme-host .ix-login-btn-primary:hover,
.theme-host .ix-vno-btn.primary:hover,
.theme-host .np-key:hover,
.theme-host .np-ok:hover {
    background: var(--ix-accent-hover) !important;
}

.theme-host .kv,
.theme-host .selected-module-header,
.theme-host .sidebar-title,
.theme-host .workspace-tabs-row,
.theme-host .ix-topbar,
.theme-host .pos-header,
.theme-host .module-sidebar,
.theme-host .menu-main-panel {
    border-color: var(--ix-border-soft) !important;
}

.theme-host .dxbl-grid,
.theme-host .dxbs-grid,
.theme-host .dxbl-popup,
.theme-host .dxbl-text-edit,
.theme-host .dxbl-fl,
.theme-host .dxbl-tabs,
.theme-host .dxbl-btn,
.theme-host .dxbl-editor,
.theme-host .dxbl-dropdownedit,
.theme-host .dxbl-listbox {
    border-radius: 12px;
}

/* =========================================================
   RESPONSIVE FOUNDATION - COMPLETE APP SHELL
   Keeps existing theme and size-mode tokens; only changes flow/scroll.
   ========================================================= */

html,
body,
.ix-shell,
.theme-host,
.ix-body,
.ix-topbar {
    min-width: 0;
}

.ix-shell,
.theme-host {
    width: 100%;
    overflow: hidden;
}

.ix-topbar-left,
.ix-topbar-right,
.ix-user-wrap,
.ix-header-actions,
.ix-user-menu,
.ix-theme-menu,
.ix-notification-wrapper,
.ix-favorites-wrap {
    min-width: 0;
}

.ix-topbar-left {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .55rem;
    overflow: hidden;
}

.ix-topbar-left .ix-company-badge,
.ix-topbar-left .ix-brand,
.ix-topbar-left .ix-muted {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ix-global-search {
    flex: 1 1 min(420px, 42vw);
    min-width: 220px;
    max-width: 560px;
}

.ix-global-search-box,
.ix-global-search-box input {
    min-width: 0;
    width: 100%;
}

.ix-global-search-panel,
.ix-favorites-panel,
.ix-notification-panel,
.ix-user-dropdown,
.ix-theme-dropdown {
    max-width: min(94vw, 560px);
}

.ix-report-grid-card,
.master-view-card,
.frm-card,
.panel,
.section-card,
.tab-section-card {
    min-width: 0;
}

.dxbl-grid,
.dxbl-tl,
.dxbl-grid-container,
.dxbl-scroll-view,
.dxbl-grid-table {
    min-width: 0;
}

@media (max-width: 1100px) {
    .ix-topbar {
        height: auto !important;
        min-height: 58px;
        flex-wrap: wrap;
        align-items: center !important;
        gap: .5rem .75rem;
        padding-block: .45rem !important;
    }

    .ix-topbar-left {
        order: 1;
        flex: 1 1 calc(100% - 190px);
    }

    .ix-topbar-right {
        order: 2;
    }

    .ix-global-search {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
    }

    .ix-global-search-panel {
        left: 0;
        right: 0;
        width: auto;
    }
}

@media (max-width: 900px) {
    .report-grid,
    .ix-grid-wrapper,
    .pos-grid-wrap {
        min-height: 260px;
    }

    .report-grid .dxbl-grid-table,
    .menu-treelist .dxbl-grid-table,
    .menu-treelist .dxbl-tl-table {
        min-width: max-content;
    }
}

@media (max-width: 768px) {
    html,
    body {
        height: 100%;
        overflow: hidden !important;
        touch-action: manipulation;
    }

    .ix-shell,
    .theme-host {
        height: 100dvh !important;
        min-height: 100dvh !important;
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
    }

    .ix-body {
        flex: 1 1 auto;
        min-height: 0 !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .ix-topbar {
        flex: 0 0 auto;
        padding: .4rem .55rem !important;
    }

    .ix-topbar-left {
        flex: 1 1 100%;
        order: 1;
    }

    .ix-topbar-right {
        order: 2;
        margin-left: 0 !important;
    }

    .ix-global-search {
        order: 3;
        flex-basis: 100%;
    }

    .ix-company-badge {
        max-width: min(56vw, 260px);
    }

    .ix-muted,
    .ix-brand {
        display: none;
    }

    .ix-header-actions {
        gap: .35rem;
    }

    .ix-header-icon-btn {
        flex: 0 0 auto;
    }

    .ix-theme-dropdown,
    .ix-user-dropdown,
    .ix-notification-panel,
    .ix-favorites-panel {
        position: fixed !important;
        left: .6rem !important;
        right: .6rem !important;
        top: 54px !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(72dvh, 560px);
        overflow: auto;
        z-index: 99999 !important;
    }
}

@media (max-width: 640px) {
    .pos-modal,
    .np-modal {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }

    .pos-error {
        max-width: 100%;
    }
}

@media (max-width: 520px) {
    .ix-topbar-left {
        gap: .4rem;
    }

    .ix-favorites-launcher span {
        display: none;
    }

    .ix-global-search-box input::placeholder {
        font-size: 0;
    }

    .ix-global-search-box input {
        font-size: max(.9rem, 16px);
    }
}

/* Authenticated mobile pages need natural document scrolling; login remains self-contained. */
@media (max-width: 768px) {
    html,
    body {
        overflow: auto !important;
    }

    .ix-shell,
    .theme-host {
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    .ix-body {
        min-height: 0 !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    .ix-master-toolbtn,
    .ix-run-btn {
        min-height: 36px !important;
    }
}

/* Mobile app header must not cover the workspace navigation. */
@media (max-width: 768px) {
    html body .ix-topbar {
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 6px 8px !important;
        padding: 7px 8px !important;
        overflow: visible !important;
    }

    html body .ix-topbar-left {
        order: 1 !important;
        grid-column: 1 !important;
        flex: none !important;
        width: 100% !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }

    html body .ix-topbar-right {
        order: 2 !important;
        grid-column: 2 !important;
        flex: none !important;
        width: auto !important;
        margin-left: 0 !important;
        justify-content: flex-end !important;
    }

    html body .ix-global-search {
        order: 3 !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
        z-index: 21 !important;
    }

    html body .ix-global-search-box {
        height: 32px !important;
        min-height: 32px !important;
        border-radius: 7px !important;
    }

    html body .ix-global-search-panel {
        position: fixed !important;
        top: 78px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-height: min(62dvh, 440px) !important;
        z-index: 120 !important;
    }
}

/* ── Mobile popup centering (global — DxPopup renders at body level) ── */
@media (max-width: 900px) {
    .ch-popup-shell,
    .ix-scan-popup {
        position: fixed !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: calc(100vw - 16px) !important;
        width: calc(100vw - 16px) !important;
        margin-left: 0 !important;
        right: auto !important;
    }
}

/* Workspace tabs: default inactive (themes override in MenuLayout) */
.workspace-tabs-wrap .dxbl-tabs-item:has(.ix-tab-template.is-active),
.workspace-tabs-wrap .dxbl-tabs-item.dxbl-tabs-item-active,
.workspace-tabs-wrap .dxbl-tabs-item[aria-selected="true"] {
    background: #E8F1FF !important;
    border-color: #bfdbfe !important;
    color: #102A56 !important;
    box-shadow: 0 1px 4px rgba(47, 128, 237, .12) !important;
}

.workspace-tabs-wrap .dxbl-tabs-item:has(.ix-tab-template.is-active) .ix-tab-icon,
.workspace-tabs-wrap .dxbl-tabs-item:has(.ix-tab-template.is-active) .ix-tab-title,
.workspace-tabs-wrap .dxbl-tabs-item.dxbl-tabs-item-active .ix-tab-icon,
.workspace-tabs-wrap .dxbl-tabs-item.dxbl-tabs-item-active .ix-tab-title {
    color: inherit !important;
    font-weight: 700 !important;
}

.workspace-tabs-wrap .dxbl-tabs-item:has(.ix-tab-template.is-active) .ix-tab-close-btn {
    color: inherit !important;
    opacity: .7;
}

.workspace-tabs-wrap .dxbl-tabs-item:not(:has(.ix-tab-template.is-active)):not(.dxbl-tabs-item-active):not([aria-selected="true"]) {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

/* POS — soft grey page background (reference app style) */
.workspace-shell:has(.pos-page),
.workspace-panel:has(.pos-page),
.workspace-content-host:has(.pos-page),
.tab-host-layer:has(.pos-page),
.screen-frame:has(.pos-page),
.theme-host .ix-body:has(.pos-page),
.theme-host .app-body:has(.pos-page),
.theme-host .tab-host-layer:has(.pos-page) {
    background: #eef2f7 !important;
    background-color: #eef2f7 !important;
}