@import url('open.iconic/font/css/open-iconic-bootstrap.min.css');

/* Design tokens -- reuse the exact colors already established on the login/landing/Dashboard/
   global-search pages rather than inventing new ones. Introduced to retire the old lime-green
   (#9acd32) brand accent used throughout the rest of the app in favor of this blue identity;
   see CLAUDE.md's color-overhaul section for the full color map. */
:root {
    --omx-primary: rgb(8, 98, 155);
    --omx-primary-dark: #0a3f66;
    --omx-primary-hover: #06517f;
    --omx-accent-green: #16c444;
    --omx-accent-purple: #5f368d;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Clickable customer/staff/product/invoice/payment name that opens its QuickView popup.
   Matches the .url-links style already used for invoice links app-wide. */
.omx-quicklink {
    color: rgb(8, 98, 155) !important;
    cursor: pointer !important;
}

.omx-quicklink:hover {
    color: #16c444 !important;
    font-weight: bold;
}


/*DATA AREA*/

#bank-details p {
    margin: 2px !important;
    color:rgb(8, 98, 155);
}

#MainReq-10 .row {
    padding-bottom: 10px !important;
}

#MainReq-10 label{
    display: block;
    padding-bottom:7px!important;
    padding-top:6px !important;
}

#ModalBodyEdit3 label{
    display: block;
    padding-bottom:7px!important;
    padding-top:6px !important;
}

/*POS SCREEN */
.inner-grid-data p {
    margin: 1px !important;
}

.omx-label-2 {
    margin-bottom: 8px !important;
}

#ModalBodyEdit8 p {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.shift-details-area {
    border-style: solid !important;
    background-color: #F7F7F7 !important;
    margin-bottom: 7px;
    padding: 5px;
    border-radius: 5px;
}

.shift-info-small p {
    margin: 2px !important;
}
.shift-info-total{
    font-size:40px;
    color:var(--omx-primary);
}

.top-backround-shift-details {
    margin-bottom: 15px;
    color:#ccc;
    background-color: #5f368d;
    margin-left:2px!important;
    margin-right:2px!important;
    padding-top:5px;
    padding-bottom:5px;
    border-radius:5px;
}

.money-color-shift-details {
    color: rgb(8, 98, 155);
    font-weight: bold;
    font-size:20px;
}

.shift-details-area span {
    padding-top: 14px !important;
    color: rgb(8, 98, 155);
    font-size: 16px;
    align-items: flex-end !important;
    text-align: end;
}


.holding-sales {
    color: #fff;
    border-radius: 40%;
    background-color: red;
    top: 12px;
    font-size: 12px;
    margin-left: 2px;
    border: solid 0.2px red outset;
    padding: 7px 12px;
}

.change {
    font-size: 25px!important;
    color: #00a9e6 !important;
}

.totals-area {
    padding-left: 15px !important;
}

/* The POS cart row. Its grid-era rules (.pos-cart-grid, and focused-row overrides keyed on
   .dxbl-grid) were removed when the cart became a plain list -- one of them, keyed on
   .dxbl-grid-data-row, never matched anything even then: that class does not appear anywhere in
   the DevExpress theme. The layout rules below are still live and still used by the list. */

.pos-cart-line {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    line-height: 1.25;
    width: 100%;
    box-sizing: border-box;
}

.pos-cart-line-end {
    /* align-items:flex-end only right-aligns children within this flex box's own width --
       without width:100% above, the box shrinks to fit its content and can sit anywhere in a
       wider cell (DxGridDataColumn's own TextAlignment="Right" doesn't reach into a custom
       CellDisplayTemplate's block-level markup either, since text-align has no effect on a
       block/flex child's position within its parent). width:100% is what makes this box span
       the whole cell, so flex-end can then genuinely flush its content to the cell's right edge. */
    align-items: flex-end;
}

.pos-cart-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-cart-meta {
    font-size: 12px;
    font-weight: 500;
    color: #8a94a6;
}

.pos-cart-total {
    font-size: 15px;
    font-weight: 700;
    color: #5f368d;
}

.pos-cart-discount-tag {
    font-size: 11px;
    font-weight: 600;
    color: #16c444;
    background: rgba(22, 196, 68, 0.12);
    padding: 1px 7px;
    border-radius: 10px;
    white-space: nowrap;
}

.pos-cart-kebab {
    opacity: 0.55;
}

.pos-cart-kebab:hover {
    opacity: 1;
}




.omx-small-text {
    font-size: 16px !important;
}

.Selected-Customer {
    font-size: 14px !important;
    color: #e69f0c !important;
    font-weight: bold !important;
    display: inline-block; /* Make it behave like text but allow width */
    max-width: 95%;
    white-space: nowrap; /* No line breaks */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ... */
    vertical-align: middle;
    padding-right: 5px;
}


.Bill-numbers {
    font-size: 14px !important;
    color: var(--omx-primary) !important;
}


.pos-key {
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

    .pos-key.active {
        transform: scale(0.95);
        /*        box-shadow: inset 0 7px 7px #fcfe3b;*/
        box-shadow: inset 1px 1px 1px 1px #fcfe3b;
    }


.MoneyColor-Blue {
    color: #1678c2 !important;
    font-weight: bold !important;
    font-size:25px!important;
}

.product-price {
    color: var(--omx-primary);
    font-size: 15px;
    font-weight: bold;
}

.product-types{
    padding:7px;
    margin:auto;
    background:#ccc;
    color:rgb(8, 98, 155);
    font-size:14px;
    font-weight:bold;
    text-align:center;
    align-content:center!important;
    border-radius:5px;
    
}

.customer-dropdown p {
    margin: 2px !important;
}

.Omx-pos-input-height input[type=text], input[type=button] {
    height: 45px!important;
}

.Omx-pos-input-height {
    height: 45px !important;
}



.omx-search-btn-dark {
    /*    background: #9acd32 !important;*/
    /*    width: 50px;*/
    height: 45px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.omx-search-btn {
    background: var(--omx-primary) !important;
    width: 50px;
    height: 45px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}


.Selected-payment-type {
    margin-top: 7px !important;
    font-size: 16px!important;
}

.Selected-payment-type b {
    margin-top: 7px !important;
    font-size: 16px !important;
}

.summary-values b{
    color:var(--omx-primary);
    font-size:18px;
}

.Selected-payment-type b {
    color: var(--omx-primary);
    font-size: 14px;
    padding-right: 3px;
}

.omx-cb-offset {
    margin-top: 0px;
}
.pos-keypad {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
    justify-items: center;
}

.pos-action-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    justify-items: center;
}

.pos-payment-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    justify-items: center;
   
}

.omx-action-btn i {
    font-size:18px!important;
}
.omx-action-btn {
    color: #fff;
    align-content: center;
    height: 80px;
    width: 160px;
    text-align: center;
    vertical-align: central;
    background-color: var(--omx-primary);
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,.08);
    transition: all 0.15s ease-in-out;
    margin-top: 5px;
    margin-bottom: 5px;
}

.sign-out-btn {
    color: #fff;
    align-content: center;
    height: 80px;
    width: 160px;
    text-align: center;
    vertical-align: central;
    background-color: #f16021!important;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,.08);
    transition: all 0.15s ease-in-out;
    margin-top: 5px;
    margin-bottom: 5px;
}

.omx-action-btn:hover {
    opacity: 75%;
}

    .omx-action-btn span {
        color: #5f368d;
    }

    .omx-action-btn i {
        padding-right:7px!important;
    }

.pos-more-actions-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    justify-items: center;
}

.total-due{

}

.HasMoney-credt-types {
    background-color: #d0bb10 !important;
}

.non-cash-credt-types {
    background-color: #5f368d!important;
}

.payment-types.non-cash-credt-types span {
    color: #fff !important;
}

.payment-types {
    color: #fff;
    align-content: center;
    height: 80px;
    width: 120px;
    text-align: center;
    vertical-align: central;
    background-color: #81b214;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,.08);
    transition: all 0.15s ease-in-out;
    margin-top:5px;
    margin-bottom:5px;
}
    .payment-types:hover {
        opacity: 75%;
    }

    .payment-types span{
        color: #5f368d;
    }

.payment-buttons {
    width: 120px !important;
    height: 50px;
    /*    color:rgb(8, 98, 155)!important;*/
    font-weight: bold;
    border-radius: 5px;
}



.pos-btn {
    height: 70px;
    width: 70px !important;
    font-size: 1.5rem;
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,.08);
    transition: all 0.15s ease-in-out;
}

    .pos-btn:active {
        transform: scale(0.96);
        box-shadow: 0 2px 4px rgb(8, 98, 155);
    }

#posDisplay {
    letter-spacing: 1px;
}

/* END POS SCREEN */


#omxpos{
    padding-bottom:15px!important;
}

.Total-label {
    color: #00a9e6;
    font-size: 40px;
}

.pos-info-bar {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    background-color:#333;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;

}
    .pos-info-bar p {
        font-size:17px;
        color:#ccc;
    }

    .product-bar-label {
        color: rgb(8, 98, 155);
        font-weight: bold;
        padding-bottom: 15px !important;
        font-size: 12px;
    }

.product-bar-label-2 {
    color:rgb(8, 98, 155);
    font-weight:bold;
    padding-bottom:17px!important;
    font-size:12px;
}

.special-text {
    color: rgb(8, 98, 155) !important;
    font-weight: bold;
}

.product-bar-scan {
    margin-top: 0px !important;
}

.omx-label {
    padding-bottom: 15px !important;
}

.url-links {
    cursor: pointer !important;
    color: rgb(8, 98, 155) !important;
    padding-left: 5px;
    vertical-align: central !important;
    /*    margin-top:2px;*/
}

    .url-links:hover{
        color:#16c444!important;
        font-weight:bold;
    }




.dxbl-grid .dxbl-grid-focused-row td span {
    color: #e7f1ff !important;
    font-weight: 600;
}



.OutOfStock {
    color: red;
    font-style: italic;
}

.stock-count-info{
    padding-bottom:15px!important;
    padding-top:15px!important;
}

.StockDetails{
    padding-top:20px!important;
    color:rgb(8, 98, 155);
    font-weight:bold;
    font-weight:bold;
}


.text-primary {
    color: #5f368d;
    font-weight: bold;
    font-size: 14px;
    padding-right: 7px;
}
.text-success {
    color: var(--omx-accent-green);
    font-weight: bold;
    font-size: 14px;
    padding-right: 7px;
}
.text-warning {
    color: #dd6d0f;
    font-weight: bold;
    font-size: 14px;
    padding-right: 7px;
}
.text-info {
    color: rgba(13, 110, 253, 0.25);
    font-weight: bold;
    font-size: 14px;
    padding-right: 7px;
}
.text-secondary {
    color: #333;
    font-weight: bold;
    font-size: 14px;
    padding-right: 7px;
}

.data-loading {
    padding: 100px;
    font-size: 20px;
    height: 550px;
    width: 550px;
    margin: auto;
    color: #5f368d;
}

.Ai-label {
    padding-top: 25px;
    padding-bottom: 10px;
}

.Ai-label span{
    color:#f6f11d;
}

.Filter-operator {
    padding-top: 15px;
    color: rgb(8, 98, 155);
    font-weight: bold;
}

.SelectedRowData {
    background: #ccc !important;
    border-radius: 5px;
    padding: 7px;
    color: #161616 !important;
}

.full-width-grid
{
    width:100%!important;
    overflow-x:auto;
    height:100%!important;
}


.data-area-small {
    background: #F7F7F7;
    padding-left:10px;
}

.additem {
    color: #161616 !important;
    font-size:15px!important;
    font-weight:200;
}

.settings-gear {
    color: #fa8c05!important;
    font-size:12px;
    padding-right:7px;
    cursor:pointer;
}

.data-child {
    color: #fa8c05;
    padding-left: 12px;
    cursor: pointer;
    font-size: 12px;
    width: 100% !important;
    /*white-space: nowrap;*/ /* stay on one line */
    /*overflow: hidden;*/ /* hide overflow */
    /*text-overflow: ellipsis;*/ /* add ... */
}

.data-child:hover {
    color: #5f368d;
    padding-left: 12px;
}

.ReportBuilderGrid {
    height: 97.2vh !important;
    overflow-x: auto;
    width: 100%!important;
    
}


.data-report-properties {
    color: #5f368d;
    padding-left: 12px;
    cursor: pointer;
    font-size: 12px;
    width: 100% !important;
    white-space: nowrap; 
}

.data-source-fields {
    color: var(--omx-primary);
    padding-left: 12px;
    cursor: pointer;
    font-size: 12px;
    width: 100% !important;
    white-space: nowrap;
}

    .data-source-fields:hover {
        color: #5f368d;
        padding-left: 12px;
    }

.data-report-properties:hover {
    color: var(--omx-primary);
    padding-left: 12px;
}

/*DATA AREA*/
.omx-tables {
}



#ModalBodyEdit7 {
}

#ModalBodyEdit7 .row {
    padding-top:7px!important;
    padding-bottom:7px!important;
}

    #ModalBodyEdit7 label {
/*        padding-top: 3px !important;*/
        padding-bottom: 14px !important;
        font-size:12px;
    }

    .offset-omxComboBox{
        margin-top:10px;
    }

.code-area{
    font-size:10px;
}
.field_lables{
    font-size:10px!important;
    color:rgb(8, 98, 155);
}


.config-row {
    margin: 7px !important;
    padding: 5px !important;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    min-height:75px;
}

.config-row {
    margin: 7px !important;
    padding: 10px !important;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    min-height: 75px;
}

    .config-row.selected-row {
        border-color: #5f368d; 
        box-shadow: 0 0 5px rgba(13, 110, 253, 0.25); 
      
    }

    .config-row.Error-row {
        border-color: red;
        box-shadow: 0 0 5px rgba(13, 110, 253, 0.25);
    }

    .config-row:hover {
        border-color: var(--omx-primary);
        box-shadow: 0 0 5px rgba(13, 110, 253, 0.25)
    }



.info-area {
}

.ErrorDetails{
    min-height:50px;
    max-height:500px!important;
}

.result-area{

}

.filter-area{

}

.filter-area b {
    font-size:12px;
}

.filter-rows{
    padding-top:10px;
}

.table-row-header {

}

.report_search_bar
{
    padding-right:39px!important;
}
.report-design {
    background: #ccc;
    padding-top: 17px;
    padding-bottom: 17px;
    padding-left: 7px;
    padding-right: 7px;
}
.section-title {
    font-size: 12px;
    color: #5f368d;
    margin-top: 35px;
    margin-bottom: 15px;
    font-weight: bold;
}

.section-title-2 {
    font-size: 12px;
    color: #5f368d;
    margin-top: 5px;
    margin-bottom: 15px;
    font-weight: bold;
}
.small-text{
    margin-top:15px;
    font-size:12px;
}

.definitions {
    background: #F7F7F7;
    border-radius: 5px;
    padding: 7px;
    line-height:20px;
}
.definitions b {
    color: rgb(8, 98, 155) !important;
    cursor:pointer;
}
    .definitions {
        font-size:12px!important;
    }

    .removef {
        cursor: pointer;
        color: red;
        padding-left: 10px !important;
    }


.TableSource{
    color:#167807;
    font-weight:bold;
}

.FieldSource {
    color: #5f368d;
}

.FormatSource {
    color: #5f368d;
    font-style: italic;
}

.postion-cbx{
    padding-top:15px!important;
}

.source-text {
    color: rgb(8, 98, 155);
    font-weight: bold;
    font-size: 12px;
    font-style: italic;
}


/* class added by the JS helper: left-align the header text */
.dx-last-header {
    /* ensure the header content is left aligned */
    display: block !important; /* make sure span behaves predictably */
    text-align: left !important;
    padding-left: 8px !important; /* adjust spacing as you like */
}

    /* target the inner span inside the custom element if needed */
    .dx-last-header > span,
    .dx-last-header span {
        display: block !important;
        text-align: left !important;
    }


.customer-filter{
        margin-top:8px!important;
}

.Profile-name {
    color: var(--omx-primary) !important;
    /*    font-weight: bold !important;*/
    font-size: 16px !important;
}
.pretty-dots {
    cursor: pointer;
    color:rgb(8, 98, 155) !important;
}
    .pretty-dots:hover {
        background-color: #f0f0f0;
        border: solid 1px #ccc;
        border-radius: 10%;
    } 

.login-user2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    color: rgb(8, 98, 155) !important;
    /*    margin-top: 5px !important*/
}

/*new dropdown workday style*/

.omx-rel-act-dropdown {
    position: relative;
    white-space: nowrap;
    overflow: visible !important; /* ensures trigger isn't clipped */
}

    .omx-rel-act-dropdown > i {
        color: white;
        text-decoration: none;
        padding: 0.5rem 1rem;
        display: inline-block;
        cursor: pointer;
    }

.omx-rel-act-dropdown-content {
    display: none;
    position: fixed !important; /* <-- KEY FIX */
    background-color: white;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 100 !important;
    min-width: 220px;
    border-radius: 5px;
    overflow: visible !important;
    animation: fadeIn 0.3s ease-in-out;
}

    .omx-rel-act-dropdown-content i {
        color: #333;
        padding: 0.75rem 1rem;
        text-decoration: none;
        display: block;
    }

        .omx-rel-act-dropdown-content i:hover {
            background-color: #f1f1f1;
        }

.omx-rel-act-dropdown:hover .omx-rel-act-dropdown-content {
    display: block !important;
}




/*legend dropdown workday style*/







hr{
    color:var(--omx-primary);
    line-height:1px;
    margin-top:10px
}

.favcolor {
    color: var(--omx-primary) !important;
    font-weight: bold !important;
}

.nowraapings {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    width:auto;
}



.Usernames{
        color:var(--omx-primary)!important;
    font-weight:bold!important;
}

.storeloc-icon {
    text-align: left !important;
    float: left !important;
    margin-right: auto !important;
}

.loc-color{
    color: var(--omx-primary) !important;
    font-weight: bold !important;
}

.touch-feather {
    align-content: center;
    min-height: 70px;
    min-width: 150px;
    cursor: pointer;
}

/*.dx-popup-wrapper, .dx-overlay-content, .modal-dialog {
    border-radius: 10px;
    max-width: 420px;
    width: 90%;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.4;
}

body, html {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-y: scroll;
}

@supports (-webkit-touch-callout: none) {
    .dx-popup-wrapper {
        height: calc(100vh - 20px) !important;
    }
}

html {
    overflow-y: scroll;
}

.dx-popup-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: none !important;
}

.dx-popup,
#ModalBodyEdit {
    width: 100% !important;*/ /* or your preferred fixed width */
/*max-width: 90vw;
    height:auto;
    max-height: 90%;
}*/

.MoneyColor
{
    color:var(--omx-primary)!important;
    font-weight:bold!important;
}
.MoneyColorNegative {
    color: red !important;
    font-weight: bold !important;
}

#ModalBodyEdit3 {
    padding-top:5px;
}
#ModalBodyEdit3 .row {
    margin-top: 10px !important;
    margin-bottom: 7px !important;
}

.field-grid > div {
    margin-bottom: 10px;
}
.field-grid label {
    display: block;
    padding-bottom:7px!important;
    padding-top:6px !important;
}

/* Reusable filter-popup field layout. Bootstrap's .row/.col-md-* grid breaks to columns based on
   the browser VIEWPORT width, not the width of whatever container it's actually inside -- so two
   DxDateEdit controls in a .col-md-6 pair inside a DxPopup with no explicit Width (most filter
   popups in this app) get forced into a 50% column on any normal desktop viewport regardless of
   how narrow the popup itself renders, and a DxDateEdit's own rendered width (icon + clear
   button) can exceed that column, spilling past the popup's edge. This is a real flexbox row
   instead, which wraps based on the POPUP's own available width -- use in place of .row/.col-md-*
   for any filter-dialog body (From/To Date pairs, a Location combo row, etc.). */
.omx-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
}

.omx-filter-field {
    flex: 1 1 160px;
    min-width: 160px;
}

.omx-filter-field-full {
    flex: 1 1 100%;
}

.omx-filter-field .form-label {
    display: block;
}

/* DxFormLayout helpers -- Phase 3 of the DxControl usage plan. DxFormLayout's ColSpan* values are
   relative to its own container (unlike Bootstrap's col-md-*, which keys off the viewport and so
   mis-sizes fields inside a narrow popup -- the bug class documented repeatedly in CLAUDE.md).
   These two rules only add breathing room; the column maths is DevExpress's own. */
.omx-form-layout {
    margin-bottom: 4px;
}

/* A checkbox pair sitting in a form-layout item has no caption above it, so it doesn't inherit the
   label's top offset -- nudge it down to sit on the same baseline as the captioned fields beside it. */
.omx-form-checkrow {
    margin-top: 26px;
}

/*  A ceiling for genuinely dense reports, not a fixed size. Was height:247vh, which meant a page
    using it reserved 1778px whether it had five rows or five hundred. */
.omx-grid-audit-style {
    max-height: 247vh !important;
}

.omx-grid-vh {
    max-height: 73vh !important;
}

.omx-grid-fit {
    max-height: 73vh !important;
}

/* Decreased from 57.9vh once the checkout section (tender inputs/currency/payment-type buttons/
   keypad/action row) moved into its own popup (see POSscreen.razor's CheckoutEditor) -- the cart
   now shares the page with only the header bar, the info bar/totals, and the Checkout CTA below
   it, so a slightly shorter grid keeps the whole view fitting comfortably on a 13" laptop screen
   without needing to scroll to see the CTA. */
.omx-grid-fit-pos {
    max-height: 48vh !important;
}

.omx-grid-fit-profile {
    max-height: 54vh !important;
}

.omx-grid-fit-profile-2 {
    max-height: 73vh !important;
}

bg-light-2 {
    /*    background-color: #fff !important;*/
    background-color: red !important;
}

.CustomLabel{
    margin-bottom:8px!important;
}

#MainReq4{
/*    width:70vw !important;*/
}

#pageheaders {
    position: sticky;
    top: 0;
    z-index: 1000; /* ensures it stays above grid or toolbar */
    background-color: #fff; /* same as your page background */
    padding: 15px 0px;
    border-bottom: 1px solid #ddd;
}

    #pageheaders .col-md-4:last-child {
        margin-right: 0 !important;
    }

.iconwith {
    margin: 5px 10px !important;
}

.omx-row-height .row{
    padding: 7px 0px 7px 0px!important;
}

.omx-grid-xxsml {
    max-height: 170px !important;
    color:rgb(8, 98, 155);
}

.omx-page-height {
    max-height: 74vh !important;
}

.InnerGridHeight{
    height:50%!important;
}

.omx-topbar{
    background:var(--omx-primary)!important;
    width:100%!important;
}
.CompanyTitle {
    color:#fff;
    margin-top:15px!important;
}

.omx-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
}

    .omx-topbar-brand:hover .CompanyTitle {
        opacity: 0.85;
    }

    .omx-topbar-brand .CompanyTitle {
        margin-top: 0 !important;
    }

.omx-topbar-logo {
    height: 34px;
    width: auto;
    margin: 8px 0;
    /*  RENDERED AS A WHITE SILHOUETTE, and that is deliberate. Measured off the file
        itself: the average colour of its opaque pixels is rgb(25, 96, 138) against a
        topbar of var(--omx-primary) = rgb(8, 98, 155) -- a contrast ratio of 1.05:1,
        i.e. the mark is the same blue as the bar it sits on and cannot be seen. White
        scores 6.50:1 on the same ground.

        A white card behind it is NOT the alternative -- that was tried during the login
        redesign and removed, because the mark is genuinely alpha-transparent and the
        card read as a mistake sitting on the gradient. The mark is single-hue (only
        4.9% of the image is opaque), so flattening it loses nothing but a hue it could
        not display against this background anyway.  */
    filter: brightness(0) invert(1);
}

.topbarnav {
    height: 50px !important;
    width: 75px !important;
}

.topBanners {
    display:flex !important;
    gap:5px!important;
}

.pull-right {
    text-align: right;
    margin-right: 0px !important;
    color: #fff !important;
    margin-right: 7px !important;
}

.bar {
    display: block !important; /* stack vertically */
    width: 40px; /* bar width */
    height: 4px; /* bar thickness */
    margin: 7px 0; /* space between bars */
    background-color: #fff; /* bar color */
    border-radius: 5px; /* smooth edges */
}


html, body, #app {
    height: 100%;
    overflow: hidden;
}

#app {
    background-color: inherit;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.dxbs-tree ul.nav > .nav-item > .nav-link:not(.disabled):not(.active) {
    cursor: pointer;
    color: #73a50d;
    position: relative;
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    width: 250px !important;
}


.dropdown-content{
    text-align:left !important;
    margin-top:2px;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff !important;
    background-color: var(--omx-primary) !important;
}

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.125rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.2rem;
    -webkit-transition: -webkit-box-shadow 0.15s ease-in-out !important;
    transition: -webkit-box-shadow 0.15s ease-in-out !important;
    -o-transition: box-shadow 0.15s ease-in-out;
    transition: box-shadow 0.15s ease-in-out !important;
    transition: box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

.dxbs-tree ul.nav > .nav-item > .nav-link > span:not(.image):not(.badge):not(.expand-btn) {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    /*    padding-left:0px!important;*/
    font-size:12px!important;
    margin-left: 0px !important;
}

[b-0xvbq61j3v] .content {
    padding: 0rem 2rem 0 2rem!important;
    overflow: auto;
}

#ModalBodyEdit .row {
    margin-top:5px!important;
    margin-bottom:7px!important;

}
#ModalBodyEdit label {
    display: block;
    padding-bottom:7px!important;
    padding-top:6px !important;
}
#ModalBodyEdit2 .row  {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}
#ModalBodyEdit2 label {
    display: block;
    padding-bottom:7px!important;
    padding-top:6px !important;
}


#ModalContentArea{
    margin-top:15px!important;
}

.header-height{
    margin-top:25px!important;
}

.SmallModals {
    max-height: 455px !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.XXSmallModals {
    max-height: 200px !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.SmallModals-products {
    max-height: 580px !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}


.xxsmall-grid {
    max-height: 300px !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*  Applied to DxPopup, never to a grid -- checked: 12 usages across 7 files, all popups.

    IT USED TO SAY height: 420px. A FIXED height, so a popup with nine fields in it was 420px tall
    whatever it contained, and the body scrolled inside. That is why Location Management scrolled.

    The other three properties were worse than useless here. white-space: nowrap and
    text-overflow: ellipsis are GRID CELL properties -- they truncate a long cell value with an
    ellipsis. On a popup they stop labels and hint text wrapping, which is the opposite of what a
    form needs. This class was clearly written for a grid and then applied to popups.

    Now: sizes to its content, and only caps on a viewport genuinely too short to hold it. overflow
    stays auto rather than hidden for that one case -- on a 600px laptop a 700px form has to do
    something, and clipping the Save button off the bottom is worse than scrolling to it.  */
.XtraSmallModals {
    max-height: 90vh !important;
    overflow: auto;
}

/*  The same, minus the height -- already commented out by whoever hit this first, without
    removing the three grid-cell properties that came with it.  */
.XtraSmallModals_associations {
    max-height: 90vh !important;
    overflow: auto;
}

.FilterdControls .row {
    margin-top: 15px !important;
    margin-bottom: 30px !important;
}

.row_space {
    margin-top: 10px !important;
    margin-bottom: 5px !important;
}


.msg-btn{
    width:70px!important;
}

.msgboxTitle {
    font-size: 14px;
    font-weight: bold;
    color: #5f368d;
}

    .msgboxTitle span {
        padding-right: 7px !important;
    }

    .message-body {
        text-align: center;
        text-wrap: auto;
        word-break: break-word;
    }

.sys-title {
    margin: auto !important;
    padding-top: 5px !important;
    padding-left: 5px !important;
    font-size: 20px !important
}

.companylogin {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--omx-primary);
    font-size: 10px;
    padding-bottom:15px !important;
}


.LoadingPanels {
    height: 120px !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.LoadingPanelsSpin {
    text-align:center;
    font-size:16px;
    color:var(--omx-primary);
}

.loaders {
    width: 48px !important;
    height: 48px !important;
    border: 5px solid #ccc !important;
    border-top: 5px solid #1e90ff !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    margin: 100px auto !important;
}

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

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


.XtraSmallModals row {
    margin-top: 10px !important;
    margin-bottom: 5px !important;
}

    .XtraSmallModals .row {
        margin-top: 10px !important;
        margin-bottom: 5px !important;
    }
    

    #omax-app {
    }

#omax-app hr {

}

    #omax-app h3 {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        font-size: 1.5rem;
        color: #161616;
    }

.Edit-modal-width {
    width: 50% !important;
}

.Grid_data .dxbl-grid {
/*    height: 522px;

    width: 100%;
    height: 10%!important;*/
}

.dxbl-pager dxbl-btn-group input[type=text] {
    width: 10em !important;
}
.dxbl-pager-page-edit dxbl-text-edit {
    width: 10em !important;
}

.dxbl-pager-container > .dxbl-pager-page-size-selector > .dxbl-text-edit {
    width: 5em;
}

/*  Sizes to its rows, capped at the window.

    This was height:750px, which is why a five-row grid still reserved most of the screen and why
    every grid dropped into a popup or a tab needed a {XX}SmallModals class to claw the space back:
    a max-height cannot shrink a box with a definite height, it can only cap it. With height:auto
    the max-height classes already scattered through this file finally do what they were written
    for, and a grid in a small container behaves without being told to.

    Safe because nothing in this app virtualises: DxGrid 22.2.3 has no virtual-scrolling property,
    and the VirtualScrollingEnabled="true" written on ~50 grids is absorbed by DxGrid's
    CaptureUnmatchedValues parameter and rendered as an inert HTML attribute. If the DevExpress
    version is ever raised and virtualisation switched on, this needs revisiting -- virtualisation
    needs a bounded viewport to decide what to render. */
.dxbl-grid {
    height: auto;
    max-height: 73vh;
}
.search-item {
    width: 10rem;
}
.dxwrap-text {
    white-space: nowrap!important;
    overflow: hidden;
    word-break:break-word
    overflow: ellipsis;
}

.header-bold span {
    font-weight: 700;
    color: #161616;
}
/* DevExpress and Bootstrap Themes */
.alt-item > td:not(.dxbl-grid-empty-cell),
.alt-item > td:not(.dxbl-grid-indent-cell) {
    background-color: #F7F7F7 !important;
    color: #161616;
}
/* Fluent Themes */
.alt-item {
    --dxbl-grid-row-bg: var(--DS-color-surface-neutral-subdued-rest);
}



.nav_row {
    width: 100% !important;
}

.search-box {
    margin:auto!important;
    width: 50% !important;
    height:40px;
    border-radius:5px!important;
    margin-top:7px!important;
    margin-bottom:5px!important;
}

.login-area {
    margin: auto;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
}

.d-block
{

}
.Navtops {
    min-width: 300px;
    max-width: 300px;
}

.collapseibles {
    background-color: var(--omx-primary) !important;
    border: none !important;
    height: 100%;
}
    .collapseibles:hover {
        background-color: var(--omx-primary-hover) !important
    }

.hb-color {
    color: #fff !important;
}

.login-header {
    /*    text-align:center;*/
}

    .login-header h2 {
        color: var(--omx-primary);
    }

    .login-header p {
        color: rgb(8, 98, 155);
    }

.login-content {
   
}

.login-button {
    width: 100%;
    height: 40px;
    background-color: var(--omx-primary) !important;
}
    .login-button:hover {
        background-color: var(--omx-primary-hover) !important
    }

.input-space{
    margin:10px!important;
}


.Toolbar-data{
    margin-bottom:25px!important;
}

.login-name {
    padding-right: 30px;
    margin-right: auto
}

.login-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #fff!important;
    margin-top:7px!important
}
.login-user-out {
    color: #fff !important;
    text-decoration: none;
    padding: 0.5rem 1rem;
    background-color: var(--omx-primary) !important;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-right: 20px !important;
    margin-top: 7px !important;
}
    .login-user-out a {
        color: #fff !important;
        text-decoration:none!important;
    }


    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

body {
    font-family: Arial, sans-serif;
    background-color: #fff;
    color: #333;
}

header {
    background-color: rgb(8, 98, 155);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

    header h1 {
        color: white;
        font-size: 1.5rem;
    }

nav {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
/*    justify-content: flex-end;*/
/*    max-width: 70%;*/
}

.dropdown {
    position: relative;
    white-space: nowrap;
}

    .dropdown > a {
        color: white;
        text-decoration: none;
        padding: 0.5rem 1rem;
        display: inline-block;
        transition: background-color 0.3s ease;
        cursor: pointer;
    }

        .dropdown > a:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    /*    z-index: 1000;*/
    z-index: 99999 !important;
    right: 0;
    min-width: 220px;
    border-radius: 5px;
    overflow: visible; /* allow full height */
    animation: fadeIn 0.3s ease-in-out;
}

    .dropdown-content a {
        color: #333;
        padding: 0.75rem 1rem;
        text-decoration: none;
        display: block;
    }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

.dropdown:hover .dropdown-content {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 4rem 2rem;
    background: linear-gradient(to right, lightskyblue, white);
    animation: slideIn 1s ease-in-out;
}

.hero-text {
    max-width: 600px;
}

    .hero-text h2 {
        font-size: 2.5rem;
        color: #222;
    }

    .hero-text p {
        margin: 1rem 0;
        font-size: 1.1rem;
        color: #555;
    }

    .hero-text button {
        background-color: yellowgreen;
        color: white;
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: transform 0.3s;
    }

        .hero-text button:hover {
            transform: scale(1.05);
        }

.hero-img img {
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    animation: fadeIn 1.5s ease;
}

.features {
    padding: 4rem 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    background-color: #f9f9f9;
}

.feature {
    background-color: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    animation: fadeIn 1s ease-in-out;
}

    .feature:hover {
        transform: translateY(-5px);
    }

    .feature h3 {
        color: yellowgreen;
        margin-bottom: 1rem;
    }

    .feature p {
        color: #666;
    }

footer {
    background-color: lightskyblue;
    text-align: center;
    padding: 2rem;
    color: white;
}


.splash-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    height: 100vh;
    font-family: "Segoe UI",Roboto,"Helvetica Neue","-apple-system",BlinkMacSystemFont,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: .88rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}

    .splash-screen .spinner-border {
        border: .2em solid;
        border-color: #5f368d #bfbfbf #bfbfbf;
        width: 120px;
        height: 120px;
    }

.splash-screen-caption {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
}

.splash-screen-text {
    color: #a1a1a1;
    margin-top: .5rem;
}



/*CARD view DATA*/
/* ===== Card Grid Layout (optional) ===== */
.card-grid {
    --gap: 1.25rem;
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    padding: var(--gap);
}

/* ===== Card Base ===== */
.card {
    --radius: 16px;
    --shadow: 0 8px 20px rgba(0,0,0,.08);
    --shadow-hover: 0 16px 40px rgba(0,0,0,.16);
    --surface: #ffffff;
    --text: #0f172a; /* slate-900 */
    --muted: #64748b; /* slate-500 */
    --ring: 36 96% 60%; /* hsl for accent ring (e.g. #7c3aed) */

    position: relative;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: clip;
    transform: translateZ(0); /* enables smoother transforms */
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    border: 1px solid rgba(15,23,42,.06);
    color: var(--text);
}

    /* Subtle gradient sheen on hover */
    .card::after {
        content: "";
        position: absolute;
        inset: -1px;
        pointer-events: none;
        background: radial-gradient(1200px 200px at var(--mx, 50%) var(--my, 0%), rgba(124,58,237,.08), transparent 60%);
        transition: opacity .35s ease;
        opacity: 0;
    }

/* Card content helpers */
.card-media {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #f8fafc;
}

    .card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s ease;
    }

.card-body {
    padding: 1rem 1rem 1.1rem;
}

.card-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .2px;
    margin: .1rem 0 .4rem;
}

.card-subtitle {
    font-size: .9rem;
    color: var(--muted);
    margin-bottom: .6rem;
}

.card-actions {
    display: flex;
    gap: .5rem;
    margin-top: .6rem;
}

.card-btn {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: .55rem .9rem;
    background: #111827;
    color: #fff;
    font-size: .9rem;
    cursor: pointer;
    transition: transform .25s ease, opacity .25s ease, background-color .25s ease;
}

    .card-btn.ghost {
        background: var(--omx-primary);
        color: #fff;
    }

    .card-btn:hover {
        transform: translateY(-1px);
    }

    .card-btn:active {
        transform: translateY(0);
        opacity: .85;
    }

/* ===== Hover / Focus animation ===== */
.card:hover,
.card:focus-within {
    transform: translateY(-6px) scale(1.01);
    box-shadow: var(--shadow-hover);
    border-color: hsl(var(--ring) / .25);
}

    .card:hover::after,
    .card:focus-within::after {
        opacity: 1;
    }

    .card:hover .card-media img,
    .card:focus-within .card-media img {
        transform: scale(1.06);
    }

/* ===== Mouse position reactive sheen (optional) ===== */
.card {
    --mx: 50%;
    --my: 0%;
}

.card-grid {
    position: relative;
}

    .card-grid .card {
        /* No extra rules needed; JS snippet below updates --mx/--my */
    }

/* Dashboard KPI/chart helpers -- promoted here from SalesOverview.razor.css, where they'd
   originally only been defined. Blazor CSS isolation scopes a .razor.css file's rules to that one
   component; every other Dashboards page (AccountsReceivable, CustomerInsights, EmployeePerformance,
   InventoryHealth, LiveSalesActivity, ProfitAndLoss, Revenue, VendorPerformance) already referenced
   these exact class names in its markup but was rendering completely unstyled -- confirmed via the
   compiled scopedcss bundle, where .kpi-value/.dashboard-chart-box/.dash-mini-table only ever
   compiled to a SalesOverview-specific [b-xxxx] selector. Global here so every current and future
   dashboard page gets them for free. */
.kpi-value {
    font-size: clamp(1.1rem, 2.2vw, 1.75rem);
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.dashboard-chart-box {
    height: 320px;
    max-width: 100%;
}

.dash-mini-table {
    max-height: 220px;
    overflow-y: auto;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .card,
    .card * {
        transition: none !important;
        animation: none !important;
    }
}

/* ===== Dark mode (optional) ===== */
@media (prefers-color-scheme: dark) {
    .card {
        --surface: #0b1220;
        --text: #e5e7eb;
        --muted: #9aa4b2;
        border-color: rgba(255,255,255,.06);
        box-shadow: 0 8px 24px rgba(0,0,0,.5);
    }

    .card-btn.ghost {
        background: rgba(255,255,255,.08);
        color: #e5e7eb;
    }
}

.feature {
    background-color: white;
    padding: 0.5rem!important;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    animation: fadeIn 1s ease-in-out;
}

.storeloc {
    height: 250px;
}

.storeloc-item {
    padding-left: 9px;
    font-weight: bold;
    /*    text-align:center;*/
    word-break: break-word;
    word-wrap: break-word;
    overflow: hidden;
    color: var(--omx-primary)!important;
}

.vhp {
    height: 70% !important;
}

.msgboxTitleStoreChooser {
    font-size: 16px;
    font-weight: bold;
    color: var(--omx-primary);
}

#nutesf .features {
    background-color: #fff !important;
}





.fixrows {
}

.logs-spec {
    margin-top: 5px!important;
}

.LoadingPanelsSpin p {
    text-align: center!important;
}

.alt-item-grid-line {
    background-color: #f7f7f7 !important;
    color: #161616 !important;
}


.alt-item-grid-line,
.dx-row-focused {
    background-color: #5f368d;
    opacity: 90%;
    color:#333!important;
}



.omx-btn-sm {
    width: 40px !important;
    height:25px!important;
    margin-right:3px;
    margin-bottom:-7px;
    text-align:left;
    padding-top:7px;
}



.row_spacing .row {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.sm-buttons {
    height: 25PX !important;
}

.sm-button-row btn-group-sm {
   
}

.omx-codes{
    padding-right:7px!important;
    padding-left:7px!important;
}


/*STYLING NAVBAR*/

/*background color*/
[b-drisd9cwj3] .app-sidebar, [b-drisd9cwj3] .app-sidebar > .nav-pills, [b-drisd9cwj3] .app-sidebar > .nav-pills > .nav-item, [b-drisd9cwj3] .app-sidebar > .nav-pills > .nav-item > a:not(.active) {
    background-color: #f8fafb!important;
}

/*navibar main menuitem node*/
.dxbs-tree ul.nav > .nav-item > .nav-link:not(.disabled):not(.active) {
    cursor: pointer;
    color: #8a8b8f;
    position: relative;
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    width: 200px !important;
    font-size:14px!important;
}

/*selected node child item*/
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--omx-primary);
    background-color: var(--omx-accent-purple);
    background-color: #f8fafb !important;
    font-size: 14px !important;
}

.sidebar[b-drisd9cwj3] {
    min-width: 200px;
    max-width: 500px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    transition: transform 0.1s ease-out;
    height: 100%;
    max-height: 100%;
    overflow: auto;
    background-color: #f8fafb!important;
}

.dxbl-grid > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead {
    background-color: #F7F7F7 !important;
    color: #74797b!important;
}

.dxbl-grid .dxbl-grid-table {
    border-collapse: separate;
    border-color: #00000000 !important;
    border-bottom-color: #cecece !important;
    border-style: var(--dxbl-grid-border-style);
    border-width: 0;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
    background: #ffffff!important;
}

.dxbl-grid .dxbl-grid-table tr {
/*    height:60px!important;*/
}

.dxbl-grid-header-row{
    background:var(--omx-primary)!important;
}


th {
    background: #f9f9f9 !important;
}
    th:last-child > span {
        text-align: right !important;
        float:right!important;
    }



tr {
    border-left: none !important;
    border-right: none !important;
    border-bottom-color: #efefef !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
}

    tr td {
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom-color: #efefef !important;
        border-bottom-style: solid !important;
        border-bottom-width: 1px !important;
    }


dxbl-grid .dxbl-grid-table > thead > tr, .dxbl-grid .dxbl-grid-table > tbody > tr, .dxbl-grid .dxbl-grid-table > tfoot > tr {
    border-left: none !important;
    border-right: none !important;
    border-style: solid !important;
    border-width: 4px !important;
}


thead th{
    border:none!important;
}

thead th:last-child{
    align-items:end!important;
}

    thead th:last-child span {
        align-items: end !important;
    }
.dxbl-grid .dxbl-grid-table > thead > tr > th > .dxbl-grid-column-resize-anchor {
    top: 0;
    right: calc((var(--dxbl-grid-border-width) - 7px) / 2 - 1 * var(--dxbl-grid-border-width));
    width: 7px;
    height: 100%;
    position: absolute;
    cursor: col-resize;
    z-index: 1;
    opacity: 0;
    color: #efefef !important;
}


.Grid-inline-span {
    display: flex;
    flex-direction: column; /* stack vertically */
    gap: 2px; /* adds 2px spacing between spans */
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left !important;
    align-items: flex-start !important;
}

    .Grid-inline-span span {
        display: block; /* ensure spans behave like block elements */
    }

    .Grid-inline-span span {
        display: block;
        margin-bottom: 2px;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .Grid-inline-span span:last-child {
            margin-bottom: 0; /* remove extra space on last one */
        }

        .Grid-inline-span span i {
            white-space: nowrap !important;
            overflow: hidden;
            text-overflow: ellipsis;
        }





.mini-item {
    display: flex;
    flex-direction: row; /* stack horizontally */
    gap: 5px; /* adds 2px spacing between spans */
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left !important;
    align-items: flex-start !important;
    font-size:10px!important;
}

    .mini-item span {
        display: block; /* ensure spans behave like block elements */
    }

    .mini-item span {
        display: block;
        margin-bottom: 2px;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .mini-item span:last-child {
            margin-bottom: 0; /* remove extra space on last one */
        }

        .mini-item span i {
            white-space: nowrap !important;
            overflow: hidden;
            text-overflow: ellipsis;
        }



.omx-comments {
    font-size: 12px !important;
    color: #5f368d;
}

.xsm{

}

#pageheaders{
    margin-top:15px!important;
}
#pageheaders i {
    color: var(--omx-primary) !important;
    padding-right: 5px !important;
}

/* The title was inheriting body black while its own icon was already primary blue, so the two
   halves of one heading did not read as one thing. Same blue as .cqv-name and .md-title, which
   is how an entity's name is coloured everywhere else in the app. */
#pageheaders h3 {
    color: var(--omx-primary);
}

.delete_button {
    color: #de4141 !important;
}
.edit_button {
    color: var(--omx-primary) !important;
}


/*BAGES*/

.success_bage{
    color:#fff;
    background:var(--omx-accent-green);
}

.success_bage_round {
    color: #fff;
    background: var(--omx-accent-green);
    border-radius: 5%;
    padding: 2px 6px 2px 6px;
}

.info_bage {
    color: #fff;
    background: rgb(8, 98, 155);
}
.warning_bage {
    color: #fff;
    background: #e5d62bc7;
}

.danger_bage {
    color: #fff;
    background: #d0553f;
}
.danger_bage_round {
    color: #fff;
    background: #d0553f;
    border-radius: 5%;
    padding: 2px 6px 2px 6px;
}
/* Neutral state: not good news, not bad news. Added rather than restyling .warning_bage_round,
   which is used on ~24 other pages where amber genuinely means "warning" and should stay. */
.neutral_bage_round {
    color: #fff;
    background: #64748b;
    border-radius: 5%;
    padding: 2px 6px 2px 6px;
}

.warning_bage_round {
    color: #fff;
    background: #e5d62bc7;
    border-radius: 5%;
    padding: 2px 6px 2px 6px;
}
.info_bage_round {
    color: #fff;
    background: rgb(8, 98, 155);
    border-radius: 5%;
    padding: 2px 6px 2px 6px;
}
.status-checked {
    color: var(--omx-accent-green);
    padding-right:5px;
}

.transfer-status-received {
    color: #155724;
    background: #d4edda;
    border-radius: 5%;
    padding: 2px 6px 2px 6px;
}

.status-waiting {
    color: rgb(8, 98, 155);
    padding-right: 5px;
}
.status-danger {
    color: #e6561f;
    padding-right: 5px;
}

#MainReq .row{
    padding-bottom:7px!important;
    
}

#MainReq .Toolbar-data{
    padding-top:5px!important;
}

#MainReq label {
    padding-bottom: 3px;
}

.omx-grid-small{
    height:300px!important;
}

.omx-grid-small-tickets {
    max-height: 60vh !important;
}

.omx-grid-medium {
    height: 450px !important;
}

.omx-grid-medium-x {
    max-height: 250px !important;
}

.omx-grid-Large {
    height: 700px !important;
}
.omx-grid-Larger {
    height: 100% !important;
}

.omx-grid-LargerX {
    height: 100% !important;
}


/*
    Clamp a long message to four lines.

    The margin that used to be here was removed: Toast.razor.css also declares
    .omx-toast-body with !important margins, so the two rules fought and which
    one applied depended purely on the order they landed in the bundle. Spacing
    is the scoped file's job now; this rule owns only the clamp.

    Four lines rather than three because the messages this app produces explain
    what to do about the problem, and the instruction was landing in the part
    that got ellipsed away.
*/
.omx-toast-body {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: break-word !important;
}

.span-width-icon{
   margin-left:7px!important;
   width:60px;
}

.span-width-icon-dbl {
    margin-left: 7px !important;
    margin-right: 7px !important;
    width: 60px;
}

.btn-toolbar-with {
    width: 150px !important;
}
/*TOAST ANIMATIONS*/
.omx-toast-base {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}

    /* Glow effect */
    .omx-toast-base::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 10px;
        padding: 2px;
        background: var(--toast-glow, transparent);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        animation: glowPulse 3s ease-in-out infinite;
    }

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.5;
        filter: blur(2px);
    }

    50% {
        opacity: 1;
        filter: blur(4px);
    }
}

/* Toast Types */
.omx-toast-warning-bg {
    --toast-glow: linear-gradient(135deg, #fffbe6 0%, #ffe066 100%);
    color: #735c00;
}

.omx-toast-error-bg {
    --toast-glow: linear-gradient(135deg, #ffeaea 0%, #ff4d4d 100%);
    color: #7a1a1a;
}

.omx-toast-success-bg {
    --toast-glow: linear-gradient(135deg, #e9fce9 0%, #5cb85c 100%);
    color: #1b5e20;
}

.omx-toast-info-bg {
    --toast-glow: linear-gradient(135deg, #e6f7ff 0%, #36a2eb 100%);
    color: #0d3c61;
}


/*legend TOAST ANIMATIONS*/







.omx-grid-small-sc {
    height: 510px !important;
}

.oi-flash{
    color:var(--omx-primary);
}

.gaps-button{
    gap:5px!important;
    width:49%!important;
}

.gaps-button-large {
    gap: 5px !important;
    width: 30% !important;
}

.gaps-button-larger {
    gap: 5px !important;
    width: 100% !important;
}


#ReqStatus i {
    float:right!important;
    margin-right:5px!important;
}

.popup-demo-events-footer #MainStatus i {
    float:right !important;
    margin-left: 5px !important;
   
}


#barcodeRow {
    margin-bottom: 10px !important;
}
#barcodeRow label {
    font-weight:bold!important;
}

.infotext {
    border-radius:inherit;
    font-size: 12px !important;
    color: #5f368d !important;
    font-weight: bold !important;
    padding: 5px !important;
}

.ImportErrors {
    height: 160px !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    
}


.full_page_setails{

}

    .full_page_setails label {
        font-weight: bold;
        margin-top: 7px;
        margin-bottom: 7px;
        color: #534f4f;
        
    }
.omx-checkbox label{
    margin:0!important;
}

.space_spans span{
    margin:5px!important;
}

.checkLables{
    display:flex!important;
    gap:5px;
}

.User_permissions {
    color: var(--omx-primary) !important;
}

.secgroup{
    margin-top:15px!important;
}

#ModalContentBody .col-md-12 {
    padding-bottom: 7px !important;
    margin-top: 5px !important
}

#ModalContentBody label{
    padding-top:7px;
    padding-bottom:5px;
    font-weight:bold;
}

.omx-clearfix{
    margin-top:20px!important;
}

.filter-bar {
    padding: 5px;
    border-bottom: 1px solid #ccc;
}

.filter-item {
    min-width: 180px;
    max-width: 250px;
    flex: 1 1 auto;
}

@media (max-width: 1200px) {
    .filter-item {
        min-width: 150px;
        max-width: 220px;
    }
}

@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column;
        gap: 10px;
    }

    .filter-item {
        width: 100%;
    }
}


.RapImage {
    height: 60px;
    margin-right: 8px;
}

.raptext {
    font-size: 14px!important;
/*    font-weight: bold;*/
    color: #5f368d!important;
}


ct-white {
    background-color: #fff !important;
}

footer {
    background-color: #ffffff!important;
    text-align: center;
    padding: 2rem;
    color: white;
}





/*POPOVER INFORMATION*/

/*.clickable-term {
    cursor: pointer;
    color: #007bff;
}

    .clickable-term:hover {
        text-decoration: underline;
    }

.info-section {
    position: relative;
    margin: 40px 0;
}

.popover {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-width: 250px;
    z-index: 999;
}

.guide-term {
    cursor: pointer;
    color: #0d6efd;
    font-weight: bold;
}

    .guide-term:hover {
        text-decoration: underline;
    }

.guide-target {
    position: relative;
    margin: 40px 0;
}

.guide-popover {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-width: 300px;
    z-index: 999;
}

.transient-popover {
    position: absolute;
    z-index: 9999;
    max-width: 320px;
    background: #fff;
    color: #212529;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    transition: opacity 200ms ease, transform 200ms ease;
    opacity: 0;
    transform: translateY(-6px);
    font-size: 0.95rem;
}*/

    /* optional small caret */
    /*.transient-popover::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid rgba(0,0,0,0.12);
        left: 50%;
        transform: translateX(-50%);
        bottom: -8px;
        opacity: 0.9;
    }*/

    /* when placed below (not strictly needed) you can override caret */
    /*.transient-popover[data-below="true"]::after {
        border-top: none;
        border-bottom: 8px solid rgba(0,0,0,0.12);
        top: -8px;
        bottom: auto;
    }*/

/* small helpers for inline clickable terms */
/*.guide-inline {
    cursor: pointer;
    color: #0d6efd;
    font-weight: 600;
}

    .guide-inline:hover {
        text-decoration: underline;
    }*/

/* ensure code inside popover looks nice */
/*.transient-popover code {
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
    font-size: 0.9rem;
}*/

.transient-popover {
    position: absolute !important;
    background: #333;
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    z-index: 999999999 !important;
    font-size: 0.9rem;
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
}



/*legend POPOVER INFORMATION*/
/* Roster Calendar (DxScheduler). The scheduler needs an explicit height -- unlike DxGrid it has no
   useful intrinsic one, and the `.dxbl-grid` sizing rule elsewhere in this file doesn't apply to
   it. The legend swatches are hand-drawn rather than pulled from the
   scheduler's own label rendering, so they're kept in sync with RosterCalendar.razor's
   RosterLabels colours by hand -- change one, change the other. */
.omx-roster-scheduler {
    height: 68vh;
    min-height: 420px;
}

.roster-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: .78rem;
    color: #5b6577;
}

.roster-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.roster-swatch {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    display: inline-block;
}

.roster-open { background: #d97706; }
.roster-filled { background: rgb(8, 98, 155); }
.roster-done { background: #16c444; }
.roster-cancelled { background: #b02a37; }

/* Refund balance strip -- used on InvoiceLineItems' Refunds tab and the Refund/Void/Cancelled
   page. Global (not a .razor.css) because both consumers are separate components and Blazor CSS
   isolation does not share rules between them. */
.refund-balance-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
}

.refund-balance-item {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 10px 16px;
    min-width: 150px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.refund-balance-net {
    border-color: rgb(8, 98, 155);
}

.refund-balance-label {
    display: block;
    font-size: .74rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 4px;
}

.refund-balance-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: rgb(8, 98, 155);
}


/* ========================================================================
   Modal forms that fit the device.

   THE PROBLEM, STATED PROPERLY

   Two separate things were making modal controls squash together, and the
   first attempt at this fixed neither.

   1. The popup had a FIXED pixel width. A 560px modal is a narrow column on a
      1920px monitor, so the fields were always going to be cramped no matter
      how they were arranged inside it.

   2. Both Bootstrap's col-md-* AND DevExpress's ColSpanMd key off the VIEWPORT,
      not off the popup. Inside a 560px popup on a desktop, col-md-3 is 25% of
      560px = 140px. Swapping one for the other changes nothing, because they
      share the same flaw.

   WHAT ACTUALLY WORKS

   CSS Grid auto-fit is measured against THE CONTAINER, which is the only thing
   here that knows how much room there really is. It fits as many columns as
   genuinely fit at a usable width and shares the leftover space between them.

   That means one declaration covers every device: four across on a wide
   monitor, two on a tablet, one on a phone, with no breakpoints to maintain
   and no possibility of a column narrower than a control needs.

   Paired with a popup width of min(Npx, Nvw), the form grows into whatever
   real estate the screen has instead of being stuck at a pixel count chosen
   for somebody else's monitor.
   ======================================================================== */

.omx-modal-form {
    display: grid;
    /* 210px is the floor at which a DxSpinEdit's spinners and a DxDateEdit's
       calendar button still fit comfortably. Below that they collide, which is
       what was being reported. */
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px 20px;
    align-items: start;
}

/*
    min-width: 0 is load-bearing, not tidying.

    A grid item defaults to min-width:auto, which refuses to shrink below its
    content. That is precisely how a control ends up wider than its column and
    spills over the edge. Setting it to 0 lets the column govern the control
    rather than the other way round.
*/
.omx-modal-form > * {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* A field that should take the whole row whatever the column count is. */
.omx-modal-form > .omx-field-full {
    grid-column: 1 / -1;
}

/* Twice the share of a normal field. For the one entry on a form that is
   plainly more important than the rest -- a name, a description -- where full
   width would leave the field beside it stranded on its own row. */
.omx-modal-form > .omx-field-wide {
    grid-column: span 2;
}

.omx-modal-form .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: .82rem;
    font-weight: 600;
    color: #4b5563;
}

/* Editors fill the column they are given, rather than carrying an intrinsic
   width that overflows it. */
.omx-modal-form .dxbl-edit,
.omx-modal-form .dxbl-text-edit,
.omx-modal-form input,
.omx-modal-form select {
    width: 100%;
    max-width: 100%;
}

/* ------------------------------------------------------------------------
   Two safety nets for the popups still laying out with Bootstrap rows.

   Deliberately minimal. The previous attempt gave those columns a min-width,
   which forced rows to wrap in popups that were previously fine, and put a
   scrollbar on the body -- turning one complaint into two. Neither of these
   changes any intended width; they only stop content escaping its bounds.
   ------------------------------------------------------------------------ */

/* Lets a column shrink to its share instead of being propped open by its
   content and spilling over the edge. Changes no layout that already fits. */
.dxbl-modal-body .row > [class*="col-"] {
    min-width: 0;
}

/* A popup can never be wider than the window it opens in. 39 files declare one
   with no Width at all, so their size comes from the content -- which on a
   laptop can put the footer buttons past the right edge where they cannot be
   clicked. Costs nothing when the popup already fits. */
.dxbl-modal-content {
    max-width: 96vw;
}

/* ---------------------------------------------------------------- discount scope
   Global rather than scoped: THREE pages carry the same discount editor -- ProductEdit,
   Products and EditDsicountPrices -- and Blazor CSS isolation does not share rules between
   components, so a scoped copy would style exactly one of them. */

/* Says what the chosen scope will actually do. The difference between a one-store and an
   all-stores discount is invisible in the control itself, and it is the whole reason a discount
   appears "not to work" at another branch. */
.disc-scope-hint {
    font-size: .78rem;
    color: #64748b;
    margin-top: 5px;
    line-height: 1.4;
}

.disc-scope-all {
    color: var(--omx-accent-green);
    font-weight: 600;
}

.disc-scope-warn {
    color: #b02a37;
    font-weight: 600;
}

/* Spacing between the all-locations checkbox and the location picker below it. */
.disc-scope-all-row {
    margin-bottom: 8px;
}

/* ===== Per-grid CSV export =====
   A right-aligned download icon sitting directly above its grid. Global rather than page-scoped
   because it appears on every grid in the application, and a scoped copy per page is how the same
   control ends up three different sizes. */
.omx-grid-export {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

    /* Quiet by default: this is an escape hatch people reach for occasionally, not a primary
       action, so it should not compete with the data underneath it. */
    .omx-grid-export .dxbl-btn {
        opacity: .6;
    }

    .omx-grid-export:hover .dxbl-btn {
        opacity: 1;
    }


/* ============================================================================
   POS MODALS -- the sale screen's popups and the grids inside them.

   Restyled through the DevExpress THEME VARIABLES rather than by writing selectors against the
   component's internal DOM. That matters: the variables (--dxbl-popup-*, --dxbl-grid-*) are a
   declared, stable surface of blazing-berry, whereas the class names are not. Verified against
   the shipped theme file before using any of them -- and that check paid for itself, because
   two names this codebase already styles, .dxbl-grid-data-row and .dxbl-grid-pager, appear
   nowhere in the theme at all and have therefore never matched anything.

   Global rather than in POSscreen.razor.css, and deliberately: CssClass lands on an element the
   DevExpress component renders, so it never carries the page's isolation attribute and a scoped
   rule could not reach it. Both class names here are new and applied only on this page, which
   is the same approach app.css already takes for .pos-cart-grid.
   ============================================================================ */

.pos-modal {
    /*
        Square corners, deliberately.

        A 14px radius was tried here and something behind the popup kept showing through at the
        corners -- clipping the children with overflow: hidden did not settle it either. Rounding
        was never what made these modals look better; the header, spacing and grid treatment did.
        Removed rather than tuned further, since a straight edge cannot be skewed.
    */
    --dxbl-popup-border-radius: 0;
    --dxbl-popup-border-color: #e6ebf1;
    --dxbl-popup-header-bg: #fbfcfd;
    --dxbl-popup-header-color: #16324f;
    --dxbl-popup-header-font-size: 0.95rem;
    --dxbl-popup-header-font-weight: 700;
    --dxbl-popup-header-padding-x: 20px;
    --dxbl-popup-header-padding-y: 14px;
    --dxbl-popup-body-padding-x: 20px;
    --dxbl-popup-body-padding-y: 16px;
    --dxbl-popup-footer-bg: #fbfcfd;
    --dxbl-popup-footer-padding-x: 16px;
    --dxbl-popup-footer-padding-y: 12px;
    --dxbl-popup-back-opacity: 0.32;
}

.pos-modal-grid {
    --dxbl-grid-bg: #fff;
    --dxbl-grid-color: #37424f;
    --dxbl-grid-border-color: #eef1f5;
    --dxbl-grid-border-radius: 11px;
    --dxbl-grid-font-size: 0.82rem;

    /* The header was painted #E6E6E6 by an inline style from Grid_CustomizeElement, which no
       stylesheet could override -- that handler is gone, so these now actually take effect. */
    --dxbl-grid-header-bg: #f8fafc;
    --dxbl-grid-header-color: #6b7784;
    --dxbl-grid-header-font-weight: 700;

    --dxbl-grid-text-cell-padding-x: 14px;
    --dxbl-grid-text-cell-padding-y: 10px;

    /*
        Selection and focus in the app's own blue rather than the theme's default.

        ALL SIX of these matter. The first version set only the selection and focus pairs and
        left the SELECTION-FOCUS pair alone -- and a row that is both selected and focused, which
        is what a single-row grid shows by default, takes that third pair. Its theme default is
        --dxbl-grid-selection-focus-color: #fff, so the row rendered white text on the pale blue
        set here and was effectively invisible.
    */
    --dxbl-grid-selection-bg: #eef4f9;
    --dxbl-grid-selection-color: #16324f;
    --dxbl-grid-focus-bg: #e5f0f7;
    --dxbl-grid-focus-color: #16324f;
    --dxbl-grid-selection-focus-bg: #dce9f4;
    --dxbl-grid-selection-focus-color: #16324f;

    /* Square, to match the popup around it. */
    border-radius: 0;

    /*
        Shrink to content.

        Written when .dxbl-grid pinned every grid to height:750px, so the max-height classes
        could only cap it -- a popup listing one held ticket reserved 60vh of empty white and
        pushed its own footer off the screen. The base rule is height:auto now, so this is
        belt-and-braces rather than the fix; the tighter cap below is what it still contributes.
    */
    height: auto !important;
}

/*
    THE FOCUSED ROW'S TEXT.

    app.css carries a global rule -- .dxbl-grid .dxbl-grid-focused-row td span -- that forces
    near-white (#e7f1ff) with !important. It was written for the old dark focused-row fill, and
    no CSS variable can beat it: setting --dxbl-grid-selection-focus-color had no effect because
    that rule wins regardless.

    That is what made the row in Resume Ticket unreadable -- near-white text on the pale blue
    background set here. Overridden by naming .pos-modal-grid, which out-specifies the global
    rule, rather than by weakening the global one, which other grids in the app still rely on.
*/
.pos-modal-grid.dxbl-grid .dxbl-grid-focused-row td span,
.pos-modal-grid.dxbl-grid .dxbl-grid-focused-row td {
    color: #16324f !important;
}

/* Small uppercase column headings, the same treatment the checkout popup gives its section
   titles. .dxbl-grid-header-row is one of the class names confirmed present in the theme. */
.pos-modal-grid .dxbl-grid-header-row {
    text-transform: uppercase;
    letter-spacing: .055em;
    font-size: .68rem;
}

/* Zebra striping is gone with the customizer. Rows are separated by the theme's own hairline,
   and hover is what tells the cashier which row is under the finger. */
.pos-modal-grid .dxbl-grid-table > tbody > tr:hover {
    background-color: #f7f9fc;
}

/*
    Row actions inside the register's modals -- currently the Resume button on Resume Ticket.

    DxButton's own Primary style is the DevExpress theme's, which is the one thing on these
    popups that still looks like the old app. This is the same shape the action bar under the
    cart uses: white, hairline border, blue on approach.
*/
.pos-row-btn.dxbl-btn {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    color: rgb(8, 98, 155) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
    box-shadow: none !important;
}

.pos-row-btn.dxbl-btn:hover {
    background: #eef4f9 !important;
    border-color: rgb(8, 98, 155) !important;
    color: rgb(8, 98, 155) !important;
}

/* ========================================================================
   UNIFORM FORM CONTROLS

   The complaint this answers: a DxTextBox and an OmxSearchComboBox sitting in
   the same row look like two different design systems -- one a flat square
   box, the other a rounded pill with a shadow -- and a DxSpinEdit beside a
   combobox is visibly a different height.

   Opt in by putting .omx-uniform-fields on any container: a modal form, a
   filter strip, a toolbar row. It reaches into DevExpress's own markup, which
   is why it is deliberately scoped under that class rather than applied to
   .dxbl-* globally -- an app-wide rule would restyle every editor in every
   screen, including ones nobody has looked at.

   TWO DIFFERENT TREATMENTS, ON PURPOSE

   Text boxes and memos take the full pill, matching OmxSearchComboBox exactly.

   Spin edits and date edits take the HEIGHT only. Their increment buttons and
   calendar button need a visible edge to read as buttons at all; making them
   borderless pills would hide the very controls that distinguish them.
   ======================================================================== */

.omx-uniform-fields {
    /* One number governs every control in the container, so they cannot drift
       apart later. Matches the natural height of OmxSearchComboBox's pill. */
    --omx-field-height: 38px;
}

/* ---- the pill, copied from OmxSearchComboBox's own .omx-search-form ---- */
/*
    !important throughout this block, deliberately.

    These override the DevExpress theme, which is loaded from its own package
    and cannot be inspected here to check what specificity its editor rules
    carry. app.css loads after it, so an equal-specificity rule would win --
    but a higher-specificity one in the theme would not, and the failure would
    be silent and only visible in a browser. The same reasoning already governs
    .dxbl-grid and the {XX}SmallModals overrides further up this file.
*/
.omx-uniform-fields .dxbl-text-edit,
.omx-uniform-fields .dxbl-memo-edit {
    background: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    padding: 0 14px !important;
    box-sizing: border-box;
    transition: box-shadow .15s ease;
    /* Load-bearing: DevExpress puts a white square-cornered input inside this
       container, which would otherwise paint over the rounded corners and
       leave the pill looking like a box with odd edges. */
    overflow: hidden;
}

/*  :not(.dxbl-memo-edit) is load-bearing. DevExpress renders a memo as
    <DXBL-MEMO-EDITOR class="dxbl-text-edit dxbl-memo-edit"> -- it carries BOTH classes -- so
    without the exclusion this pinned every memo in the app to 38px with overflow:hidden,
    showing about one line whatever its Rows was set to. The rule below was written to prevent
    exactly that, but it named .dxbl-memo, a class that does not exist in the rendered DOM, so
    it never matched and never protected anything. Class names confirmed against the real DOM. */
.omx-uniform-fields .dxbl-text-edit:not(.dxbl-memo-edit) {
    min-height: var(--omx-field-height) !important;
    height: var(--omx-field-height) !important;
    display: flex;
    align-items: center;
}

/* A memo is multi-line, so it gets the pill's look but keeps its own height --
   forcing it to one line would defeat the control. */
.omx-uniform-fields .dxbl-memo-edit {
    border-radius: 14px !important;
    padding: 6px 14px !important;
}

.omx-uniform-fields .dxbl-text-edit:focus-within,
.omx-uniform-fields .dxbl-memo-edit:focus-within {
    box-shadow: 0 2px 10px rgba(8, 98, 155, 0.35) !important;
}

/* Whatever DevExpress renders inside the pill must not draw a second border or
   a second background on top of it. Stated broadly because the inner element
   names are DevExpress's to change, and a missed one shows as a box inside a
   pill. */
.omx-uniform-fields .dxbl-text-edit > *,
.omx-uniform-fields .dxbl-memo-edit > *,
.omx-uniform-fields .dxbl-text-edit input,
.omx-uniform-fields .dxbl-memo-edit textarea {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.omx-uniform-fields .dxbl-text-edit input,
.omx-uniform-fields .dxbl-memo-edit textarea {
    font-size: 13.5px;
    color: #1a1a1a;
    padding: 0;
    width: 100%;
    min-width: 0;
}

.omx-uniform-fields .dxbl-text-edit input::placeholder,
.omx-uniform-fields .dxbl-memo-edit textarea::placeholder {
    color: #adb5bd;
}

/* ---- height only, for controls whose chrome has to stay visible ---- */
.omx-uniform-fields .dxbl-edit,
.omx-uniform-fields .dxbl-spinedit,
.omx-uniform-fields .dxbl-spin-edit,
.omx-uniform-fields .dxbl-date-edit-content,
.omx-uniform-fields .dxbl-combobox {
    min-height: var(--omx-field-height) !important;
}

/* The combobox sets its own padding, so its height is pinned directly rather
   than through min-height, or it lands a couple of pixels short of the rest.
   Its own rule is .omx-search-form[b-xxx] -- one class plus one attribute, the
   same specificity as the two classes here -- so this only wins because
   app.css is linked after the scoped bundle in index.html. !important removes
   the dependency on that ordering. */
.omx-uniform-fields .omx-search-form {
    height: var(--omx-field-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.omx-uniform-fields .omx-combobox-wrapper {
    height: var(--omx-field-height);
}

/* Editors fill the column they are given rather than carrying an intrinsic
   width that overflows it -- the same guard .omx-modal-form already applies. */
.omx-uniform-fields .dxbl-edit,
.omx-uniform-fields .dxbl-text-edit,
.omx-uniform-fields .omx-combobox,
.omx-uniform-fields input,
.omx-uniform-fields select {
    width: 100%;
    max-width: 100%;
}

/* ---- a horizontal strip of fields, for filter bars above a grid ---- */
.omx-field-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 18px;
    align-items: flex-end;
    margin: 12px 4px 14px;
}

.omx-field-strip > * {
    /* Same reasoning as .omx-modal-form > *: auto refuses to shrink below its
       content, which is how a control ends up wider than its share and spills. */
    min-width: 0;
    flex: 0 1 230px;
    display: flex;
    flex-direction: column;
}

.omx-field-strip > .omx-field-grow {
    flex: 1 1 260px;
}

/* Pushed to the right so an action never reads as just another field. */
.omx-field-strip > .omx-field-action {
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end;
}

.omx-field-strip .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: .82rem;
    font-weight: 600;
    color: #4b5563;
}

/* ------------------------------------------------------------------------
   A grid that shrinks to its rows.

   .dxbl-grid used to carry a blanket height: 750px, so SmallModals (455px) and
   XXSmallModals (200px) could only cap it -- a cap is not the same as fitting,
   and an empty line-items grid inside a popup still rendered as a large empty
   panel with "No data to display" adrift in it. The base rule is height:auto
   now; this remains useful for the much tighter 300px scroll cap it sets.

   This grows with the rows and only scrolls once there are enough of them to
   need it. Pair it with SmallModals rather than replacing it -- that class is
   what actually overrides the 750px, and this governs what happens below the
   cap.
   ------------------------------------------------------------------------ */
.omx-grid-fit-content,
.omx-grid-fit-content .dxbl-grid {
    height: auto !important;
    min-height: 0 !important;
}

.omx-grid-fit-content .dxbl-scroll-viewer {
    max-height: 300px;
}

/*  ReportBuilder's layout classes (.data-area, .data-parent, .Field-containers, .reportTitle,
    .reportBar, .report-name) used to live here. They were only ever used by that one page, and
    .data-area in particular forced every panel to 97.2vh with overflow:hidden -- which is what
    made the designer a column of tall grey blocks. They now live in ReportBuilder.razor.css,
    scoped to the page that owns them. Do not reintroduce them globally: app.css loads after the
    scoped bundle, so an !important rule here silently beats the page's own styling.            */

/*  ============================================================================
    DROPDOWNS -- THE HOUSE STYLE
    ============================================================================

    Every dropdown in this app looks like the product lookup: a white pill, no border, a soft
    shadow that deepens on focus, and a chevron drawn in the app's own blue. That look is set by
    OmxSearchComboBox.razor.css for the search comboboxes; these rules give a plain native
    <select> the same appearance, so a page does not look half-finished where it happens to use
    one.

    USE .omx-select ON EVERY <select> YOU ADD. It is one class and needs nothing else. A form
    wrapped in .omx-uniform-fields gets it automatically, which is why that block also matches
    select below -- opting a form in should not leave its dropdowns as the one square control
    among pills.

    !important throughout for the reason documented on .omx-uniform-fields: index.html links
    app.css after the scoped bundle and the DevExpress theme, so an equal-specificity rule wins
    already -- but a higher-specificity theme rule would not, and that failure is silent and only
    visible in a browser.
                                                                                             */

.omx-select,
.omx-uniform-fields select,
.omx-uniform-fields .form-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    background-color: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;

    /*  Right padding leaves room for the chevron; without it a long option name runs underneath. */
    padding: 7px 34px 7px 14px !important;
    font-size: 0.88rem;
    color: #1a1a1a;
    min-height: var(--omx-field-height, 38px);
    width: 100%;
    cursor: pointer;
    transition: box-shadow .15s ease;

    /*  The chevron, inline so it needs no image file and no extra element. Colour is the app's
        own primary blue, written as a data URI because CSS cannot put a var() inside one.       */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2308629B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5.5L8 11.5L14 5.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    background-size: 12px 12px !important;
}

.omx-select:focus,
.omx-uniform-fields select:focus,
.omx-uniform-fields .form-select:focus {
    outline: none !important;
    box-shadow: 0 2px 10px rgba(8, 98, 155, 0.35) !important;
}

.omx-select:disabled,
.omx-uniform-fields select:disabled {
    background-color: #f4f6f8 !important;
    color: #98a2b3;
    cursor: not-allowed;
}

/*  A plain text or number input alongside those selects, so a filter row does not mix a pill
    dropdown with a square box. */
.omx-input,
.omx-uniform-fields input[type="text"].form-control,
.omx-uniform-fields input[type="number"].form-control {
    background-color: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    padding: 7px 14px !important;
    font-size: 0.88rem;
    min-height: var(--omx-field-height, 38px);
}

.omx-input:focus,
.omx-uniform-fields input[type="text"].form-control:focus,
.omx-uniform-fields input[type="number"].form-control:focus {
    outline: none !important;
    box-shadow: 0 2px 10px rgba(8, 98, 155, 0.35) !important;
}

/*  The same pill, sized for a grid row. Bootstrap's own .form-select-sm only changes padding and
    font, so it needs a matching small variant here or an in-table dropdown keeps the full-size
    pill and makes the row too tall. */
.omx-select-sm {
    padding: 4px 28px 4px 11px !important;
    font-size: 0.82rem;
    min-height: 30px;
    background-position: right 9px center !important;
    background-size: 10px 10px !important;
}

/*  Possible-duplicate list in the till's add-customer popup. Each row is a real button because
    picking one attaches a sale to a person -- it needs keyboard focus and it needs to look
    pressable, which a styled div does not.  */
.omx-match-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.omx-match {
    /*  align-items is NOT decoration here. MudBlazor.min.css carries a bare
        button { align-items: center } reset and is linked after app.css, and this rule never set
        it -- so every line in the column was centred on its own text, which at any real width
        reads as right-aligned. text-align alone cannot fix it: the children are flex items, so
        the container aligns them and text-align only governs wrapping inside each one.  */
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
    text-align: left; padding: 10px 12px; cursor: pointer;
    background: #fff; border: 1px solid #d7dde5; border-radius: 10px;
}
.omx-match:hover { border-color: var(--omx-primary); box-shadow: 0 2px 6px rgba(0,0,0,.10); }
.omx-match-name { font-weight: 600; color: var(--omx-primary); }
.omx-match-meta { font-size: .8rem; color: #667085; }

/*  A match row that cannot be chosen. Global because .omx-match is: whichever screen disables a
    row needs it to stop looking pressable, or the disabled attribute is the only thing saying so
    and nobody sees it until they click.  */
.omx-match-off { opacity: .6; cursor: not-allowed; background: #f9fafb; }
.omx-match-off:hover { border-color: #d7dde5; box-shadow: none; }


/* ==========================================================================================
   MODALS: make Bootstrap's grid size against the POPUP instead of the viewport
   ==========================================================================================

   The recurring "controls collide / fall outside the modal" report has one cause, and it is
   not spacing. Bootstrap's columns are defined inside @media (min-width: 768px) -- confirmed
   in blazing-berry.bs5.css, which is where this app actually gets its grid from -- so they
   key off the VIEWPORT, never off the element containing them.

   Inside a popup that is simply wrong. On any desktop screen a col-md-6 in a 400px dialog is
   still handed 50% of a "large viewport" worth of columns and lands at 200px. A DxDateEdit or
   a combo carries icon and clear-button chrome and has a real minimum width well above that,
   so it renders past its own column and out of the dialog. That is the detached calendar
   button, and the two date fields sitting on top of each other.

   The columns keep their intended proportions. All this adds is a floor: once a column would
   be squeezed below a width a real control can live in, flex-wrap (already on .row) drops it
   to the next line instead of overflowing. Wide dialogs are untouched, because their columns
   never reach the floor.

   14rem is chosen, not rounded to: at that floor a 400px dialog wraps its two date fields onto
   separate rows -- which is the layout every one of these reports has ended up hand-built into
   the page -- while a 900px dialog still holds four col-md-3 across.

   min() rather than a flat value so a genuinely narrow dialog cannot be forced to overflow by
   the very rule meant to stop it overflowing.
*/
.dxbl-popup .row > [class*="col-"] {
    min-width: min(100%, 14rem);
    max-width: 100%;

    /*  A column that has wrapped onto a line of its own should FILL that line, not sit at
        its old percentage with the other half of the dialog empty beside it. flex-grow does
        exactly that and nothing more: when a row's columns sum to 12 there is no free space
        on the line, so nothing grows and the designed proportions are untouched. It only
        acts where space was going to waste -- a lone wrapped field, or a row someone left
        a gap in.  */
    flex-grow: 1;
}

/*  A popup can never be wider than the screen it is shown on. 68 popups in this app set no
    Width at all and are sized by whatever their content forces, which is fine until the
    content is wide.  */
.dxbl-popup {
    max-width: calc(100vw - 2rem);
}

/*  A bare <label> with no class gets no spacing from anywhere -- Bootstrap's reboot gives a
    plain label no margin, and this app's own label rules are all scoped to wrapper ids like
    #MainReq-10 or classes like .field-grid. Outside one of those it sits directly on top of
    its control. There are 117 such labels inside popups.

    Deliberately only labels carrying no class attribute at all, so nothing that has already
    been styled is touched.  */
.dxbl-popup label:not([class]) {
    display: block;
    margin-bottom: 6px;
}