@media (min-width: 1367px) {
    .w-currency {
        width: 100%
    }

    .card-info {
        font-size: 17.5px;
    }

    /*.card-padding {
        padding: 22px 16px;
    }
    .card-value {
        font-size: 25px;
        margin-top: 10px;
    }*/
}

@media (max-width: 1366px) {
    .svg-item {
        width: 40px;
        height: 41px;
        fill: #dfdfdf;
    }

    .card-value {
        font-size: 20px;
        margin-top: 10px;
    }

    .card-padding {
        margin: 1px 0px;
    }
}

@media (max-width: 1025px) {
    .col-lg-3.padding-l-r {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}


@media (min-width: 991px) {
    .w-currency-value {
        width: 100%
    }
}

@media screen and (min-width: 768px) {
    .modal:before {
        content: " ";
        display: inline-block;
        vertical-align: middle;
    }
}

/*@media(min-width: 320px) and (max-width: 400px) {
    #rightContentPanel{
        width: 100vw;
    }
    .card-body > .dropdown-item, .accordion > .card .card-header a {
        padding: 10px;
    }

    .left-panel {
        width: 0;
    }

    .fullwidthPanel .left-panel {
        width: 180px;
        z-index: 9;
    }

    .fullwidthPanel .top-header {
        width: calc(100% - 180px);
        left: 180px;
    }

    .top-header {
        width: calc(100% - 0px);
        left: 0;
    }
    .topmenu {
        padding: 24px 0;
    }
    .user-icon-o > div {
        right: 29px;
    }
    div.pull-right .dropdown-toggle {
        display: none;
    }

    .fullwidthPanel .container {
        width: calc(100% - 180px);
    }

    .container {
        margin-top: 110px;
        width: calc(100% - 0px);
        margin-right: 0;
        max-width: 100%;
    }

    .caret.dropdown-toggle::after {
        right: 10px;
    }

    .card.card-main {
        margin: 5px;
    }

    .main-content {
        margin-right: 10px;
        padding: 10px;
    }
    .customScroll {
        width: 100%;
        overflow: auto;
    }
}*/
@media(min-width: 768px) and (max-width: 991px) {
    .accordion {
        height: calc(100vh - 126px);
    }

    .patient-info .tab-content {
        height: auto;
    }

    .left-panel {
        width: 0;
    }

    .fullwidthPanel {
        overflow: hidden;
    }

        .fullwidthPanel .wraper {
            width: 100%;
            overflow: hidden;
        }

        .fullwidthPanel .left-panel {
            width: 180px;
            z-index: 9;
        }

        .fullwidthPanel .top-header {
            width: calc(100% - 180px);
            left: 180px;
        }

    .top-header {
        width: calc(100% - 0px);
        left: 0;
    }

    .fullwidthPanel .container {
        width: 100%;
        margin-left: 180px;
        min-width: 100%;
    }

    .container {
        margin-top: 110px;
        width: calc(100% - 0px);
        margin-right: 0;
        max-width: 100%;
    }

    .toggleIcon {
        width: 40px;
        min-width: 40px;
        margin: 0 0 0 10px;
    }

    .toggleIcon .navbar-brand img {
        width: 30px;
        min-width: 30px;
        height: auto;
    }

    .locationddl .k-dropdown .k-dropdown-wrap {
        width: 100%;
        max-width: 250px;
    }

    .locationddl > .k-dropdown {
        width: 100%;
        max-width: 250px;
    }

    .topmenu > div:last-child > div {
        gap: 5px;
    }

    .printer_wrapper {
        min-width: auto;
    }

    .printer_wrapper #spnZebraPrinterStatus {
        display: none;
    }

    .user-section.float-right {
        max-width: 120px;
        overflow: hidden;
    }

    .user-section.float-right .pull-right .dropdown-toggle {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }

    .user-section.float-right .pull-right .dropdown-toggle a {
        display: inline;
    }

    .connect-xero-button .btn {
        padding: 6px 8px !important;
        font-size: 12px;
    }
}

@media (max-width:576px) {
    .employertable .k-grid .k-grid-content table td:last-child {
        overflow: visible;
    }

        .employertable .k-grid .k-grid-content table td:last-child .field-validation-error {
            position: absolute;
            right: 0;
            top: 100%;
            background: #fff !important;
            color: #ff0000 !important;
        }
}

@media(min-width: 320px) and (max-width: 767px) {
    .patient-info .tab-content {
        height: auto;
    }

    .card-body > .dropdown-item, .accordion > .card .card-header a {
        padding: 10px;
    }

    .left-panel {
        width: 0;
    }

    .fullwidthPanel .left-panel {
        width: 180px;
        z-index: 9;
    }

    .fullwidthPanel .top-header {
        width: calc(100% - 180px);
        left: 180px;
    }

    .top-header {
        width: calc(100% - 0px);
        left: 0;
    }

    .accordion {
        height: calc(100vh - 126px);
    }

    .fullwidthPanel .container {
        width: 100%;
        margin-left: 180px;
        min-width: 100%;
    }

    .fullwidthPanel {
        overflow: hidden;
    }

        .fullwidthPanel .wraper {
            width: 100%;
            overflow: hidden;
        }

    .topmenu {
        padding: 24px 0;
    }

    div.pull-right .dropdown-toggle {
        display: none;
    }

    .user-icon-o > div {
        right: 10px;
    }

    .toggleIcon {
        width: 40px;
        min-width: 40px;
        margin: 0 0 0 10px;
    }

        .toggleIcon .navbar-brand {
            min-width: 30px;
        }

        .toggleIcon .navbar-brand img {
            width: 30px;
            min-width: 30px;
            height: auto;
        }

    .locationddl .k-dropdown .k-dropdown-wrap {
        width: 100%;
        max-width: 180px;
    }

    .locationddl > .k-dropdown {
        width: 100%;
        max-width: 180px;
    }

    .topmenu > div:last-child > div {
        gap: 4px;
    }

    .printer_wrapper {
        min-width: auto;
    }

    .printer_wrapper #spnZebraPrinterStatus {
        display: none;
    }

    .connect-xero-button .btn {
        padding: 5px 6px !important;
        font-size: 11px;
    }

    .container {
        margin-top: 110px;
        width: calc(100% - 0px);
        margin-right: 0;
        max-width: 100%;
    }

    .caret.dropdown-toggle::after {
        right: 10px;
    }

    .card.card-main {
        margin: 5px;
    }

    .main-content {
        margin-right: 10px;
        padding: 10px;
    }

    #rightContentPanel {
        width: 94vw;
    }

    .customScroll {
        width: 100%;
        overflow: auto;
    }

    .k-grid-pager {
        display: flex;
        align-items: baseline;
    }
    /*    .k-pager-md .k-pager-info, .k-pager-sm .k-pager-info, .k-pager-sm .k-pager-sizes, .k-pager-sm .k-pager-numbers {
        display: flex;
        position: absolute;
        top: 50px;
        width: 90%;
    }*/
    .k-pager-md .k-pager-info, .k-pager-sm .k-pager-info, .k-pager-sm .k-pager-sizes, .k-pager-sm .k-pager-numbers {
        display: none;
    }

    .k-grid .k-grid-search {
        float: none;
        width: 100%;
        margin: 0 0 10px;
    }

    .patient-info ul.nav-tabs {
        justify-content: flex-start;
    }

    #grdDailyRxLogDetails .k-grid-search {
        width: 100%;
        margin: 5px 0px !important;
        overflow: auto;
    }

    .k-header.k-grid-toolbar {
        text-align: center;
    }

    .k-grid a.btn.btn-primary {
        width: 100%;
        float: none;
        display: block;
        margin: 0;
    }
}

@media (max-width: 768px) {
    #grdDeliveries {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* Phone-sized view optimizations for Delivery grid */
@media (max-width: 576px) {
    /* Hide all top filters on phones to maximize space */
    .delivery-filters {
        display: none !important;
    }
}

@media(max-width: 767px) {
    ul.accordion-list .accordion-list-data {
        min-height: 110px
    }

    h3.text-danger.accordion-position.accordion-position span.k-widget.k-dropdown {
        left: 0;
        top: 41px;
    }

    .accordion-list-data > .row > .col-12 > .row .answer-wrapper:first-child {
        padding-top: 55px
    }
}


/* ==========================================================================
   App-wide responsive overrides
   - Sidebar overlays content on tablet/phone (does not push)
   - Modals/popups become full-width on small screens
   - Kendo grids gain horizontal scroll instead of being crushed
   - Bootstrap rows stack on phones
   ========================================================================== */

/* Prevent horizontal page scroll on small screens */
@media (max-width: 991px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .wraper,
    .mainsection {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* ---- Page title alignment with content ----
   The title <h5> is now rendered INSIDE #rightContentPanel (see _Layout),
   so it inherits the same 15px panel padding as every other piece of
   page content. No extra h5 padding needed — the panel wrapper handles
   the offset uniformly across all pages.
   Restore the styling the original site.css gave to .body-content > h5
   (uppercase, etc.) since that selector no longer matches now that h5
   has moved inside #rightContentPanel. */
#rightContentPanel > h5,
.body-content #rightContentPanel > h5 {
    margin: 0 0 12px 0;
    padding: 0;
    color: #000000;
    text-transform: uppercase;
    word-break: break-all;
    overflow: auto;
    max-height: 40px;
}

/* ---- Strip horizontal padding/margin on common page wrappers so grids,
   tabs, and forms all start at the same x-position as the page title.
   Different pages use different wrappers (.patient-from, .patient-info,
   .patient-info-box, .main-content, plain .row, Bootstrap .px-1/2/3/4/5
   utility classes, .mx-* row-margin utilities) — normalise them all.
   Use descendant selectors (no >) so deeply-nested wrappers — e.g. tab
   partials that wrap their grid in .patient-info-box > .patient-from > .row
   inside a tab-pane — also get flushed left. */
#rightContentPanel .patient-from,
#rightContentPanel .patient-info-box,
#rightContentPanel > .patient-info,
#rightContentPanel > .main-content,
#rightContentPanel > .px-1,
#rightContentPanel > .px-2,
#rightContentPanel > .px-3,
#rightContentPanel > .px-4,
#rightContentPanel > .px-5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Bootstrap rows anywhere inside the panel: drop the negative margins so
   they don't extend beyond the panel content edge. Use a descendant
   selector (no >) so this applies to nested rows too — POS, Drug, etc.
   wrap their filter rows several levels deep. Also kill any Bootstrap
   px-* utility classes applied directly to a row (e.g. Sales page uses
   <div class="row px-4">) so the row content starts at the panel edge. */
#rightContentPanel .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#rightContentPanel .row.px-1,
#rightContentPanel .row.px-2,
#rightContentPanel .row.px-3,
#rightContentPanel .row.px-4,
#rightContentPanel .row.px-5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---- Sales page filters: align with title and stretch full width ----
   The Sales view (Index.cshtml) injects inline CSS that gives every
   .sales-info-box .form-group an 8px L/R padding on phones, which leaves
   filters slightly indented from the page title above them. Kill the
   left padding on the first filter and tighten the inputs so they fill
   their column edge-to-edge. */
#rightContentPanel .sales-info-box .row > .form-group:first-child,
#rightContentPanel .todaySales-info-box .row > .form-group:first-child {
    padding-left: 0 !important;
}

/* Inputs / Kendo widgets inside Sales filter rows should fill the column */
#rightContentPanel .sales-info-box .form-group .form-control,
#rightContentPanel .sales-info-box .form-group .k-widget,
#rightContentPanel .sales-info-box .form-group .k-datepicker,
#rightContentPanel .sales-info-box .form-group .k-combobox,
#rightContentPanel .sales-info-box .form-group .k-dropdown {
    width: 100% !important;
    max-width: 100% !important;
}

/* The grid below the filters should also span full width of the panel */
#rightContentPanel .sales-info-box .k-grid,
#rightContentPanel .todaySales-info-box .k-grid {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 767px) {
    /* Override the sales view's inline 8px form-group padding so filters
       sit flush-left, matching the title and tabs above them. */
    #rightContentPanel .sales-info-box .form-group,
    #rightContentPanel .todaySales-info-box .form-group {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* The first column of any row inside the panel must align flush with the
   title above it. Strip its left padding regardless of wrapper depth. */
#rightContentPanel .row > [class*="col-"]:first-child,
#rightContentPanel .row > .form-group:first-child,
#rightContentPanel .row > [class*="px-"]:first-child {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Some pages stack labels/inputs directly inside .main-content (no .row
   wrapper). Make sure those leaf elements also align flush with the title. */
#rightContentPanel > .main-content > label,
#rightContentPanel > .main-content > .form-group,
#rightContentPanel > .main-content > input,
#rightContentPanel > .main-content > .k-grid {
    margin-left: 0;
}

/* nav-tabs inside .patient-info: align the row of tabs with the title.
   ul.nav-tabs has no horizontal padding by default, so no change there;
   but make sure no Bootstrap mx utility class is pushing it sideways. */
#rightContentPanel > .patient-info > .nav.nav-tabs {
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
}

/* ---- Kendo tooltips / popups (e.g. Drug-info hover popup on Price Quote) ----
   Kendo positions tooltips relative to their trigger element with no concern
   for viewport bounds, so on phones a wide tooltip can extend past the right
   edge of the screen. Cap the width and tighten padding so they always stay
   on-screen, and let long content wrap and scroll inside instead of
   overflowing horizontally. */
@media (max-width: 767px) {
    .k-animation-container,
    .k-tooltip,
    .k-popup {
        max-width: 92vw !important;
    }

    .k-tooltip,
    .k-popup,
    .k-callout {
        word-wrap: break-word;
        white-space: normal;
    }

    .k-tooltip-content,
    .k-popup .k-content,
    .k-popup > div,
    .k-list-container {
        max-width: 92vw !important;
        max-height: 70vh !important;
        overflow: auto;
        word-wrap: break-word;
        white-space: normal;
        box-sizing: border-box;
    }

    /* If Kendo positions the animation container off the right edge, pull
       it back inside the viewport. left:auto + right:4vw clamps the
       right edge to a small gutter from the screen edge. */
    .k-animation-container[style*="left:"] {
        max-width: 92vw !important;
    }
}

/* ---- Toastr notifications: fit inside the viewport on phones ----
   The toastr stylesheet hard-codes width: 500px on each toast div, which
   overflows a typical 360px phone. Cap at 92vw so toasts always fit, and
   pull the right/left/center positioning in by 4vw so they have a small
   gap from the screen edge. */
@media (max-width: 575px) {
    #toast-container,
    #toast-container > div,
    #toast-container.toast-top-right > div,
    #toast-container.toast-top-left > div,
    #toast-container.toast-top-center > div,
    #toast-container.toast-bottom-right > div,
    #toast-container.toast-bottom-left > div,
    #toast-container.toast-bottom-center > div,
    #toast-container.toast-bottom-full-width > div,
    #toast-container.toast-top-full-width > div {
        width: 92vw !important;
        max-width: 92vw !important;
        box-sizing: border-box;
    }

    #toast-container.toast-top-right,
    #toast-container.toast-bottom-right {
        right: 4vw !important;
    }

    #toast-container.toast-top-left,
    #toast-container.toast-bottom-left {
        left: 4vw !important;
    }

    #toast-container.toast-top-center,
    #toast-container.toast-bottom-center {
        left: 50% !important;
        transform: translateX(-50%);
        right: auto !important;
    }

    #toast-container > div {
        padding: 12px 12px 12px 50px !important;
        font-size: 13px;
        line-height: 1.4;
        word-wrap: break-word;
    }
}

/* On tablets, cap at a sensible width too so a 500px toast doesn't push
   off the right edge of a 600-768px viewport */
@media (min-width: 576px) and (max-width: 991px) {
    #toast-container > div,
    #toast-container.toast-top-right > div,
    #toast-container.toast-top-center > div,
    #toast-container.toast-bottom-right > div,
    #toast-container.toast-bottom-center > div {
        width: auto !important;
        max-width: 90vw !important;
        min-width: 280px;
        box-sizing: border-box;
    }
}

/* ---- Chart of Accounts: "Validate All" toolbar button ----
   The button sits inside .k-grid-toolbar with raw Bootstrap btn-secondary
   styling, so it had no margin/padding tuning of its own. Give it the
   normal toolbar-button treatment, and on phones make it full-width so
   it doesn't squish next to the grid search input. */
#btnCoaValidateAll {
    margin-left: 8px;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

@media (max-width: 767px) {
    /* Stack toolbar items so search + button each get their own row */
    .k-grid-toolbar:has(#btnCoaValidateAll),
    .k-grid .k-header.k-grid-toolbar:has(#btnCoaValidateAll) {
        flex-wrap: wrap !important;
        gap: 6px;
    }

    #btnCoaValidateAll {
        margin-left: 0;
        width: 100%;
        padding: 8px 14px;
    }
}

/* Normalise .main-content's horizontal padding/margin so its content lines
   up with bare-grid pages (Master List etc.) and with the page title. The
   wrapper keeps its top/bottom padding for breathing room inside the card.
   Both horizontal paddings AND margins are stripped so the inner grid spans
   the full panel width on every viewport — no slim grid + wide-empty-margin
   issues like the Reports / Drug pages were showing. */
.main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* .patient-info > .tab-content has 15px L/R padding from site.css that
   compounds with the panel's own padding — strip it inside #rightContentPanel
   so tab content (filters, grids) starts flush with the title above. */
#rightContentPanel .patient-info .tab-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Some page partials add Bootstrap .m-3 to a section heading and an inline
   style="margin-left:10px" to a filter row — both push content right of
   the page title. These pushes hurt at every viewport (the indent is just
   more obvious on small screens), so override at the global level. */
#rightContentPanel h6.m-3,
#rightContentPanel h5.m-3,
#rightContentPanel h4.m-3,
#rightContentPanel h3.m-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* Beat inline style="margin-left: 10px" / similar inline margins on rows.
   CSS with !important wins over inline styles without !important. */
#rightContentPanel .row[style*="margin-left"],
#rightContentPanel .row[style*="margin-right"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* site.css adds `div#grdInsuranceBillingClaims { margin: 0 15px }` which
   pushes the Insurance Billing Claim grid 15px in from each side,
   misaligning it with the page title and filter row above. Strip the
   horizontal margin so the grid lines up flush. */
div#grdInsuranceBillingClaims {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ---- Report tab partials: full width grids, flush-aligned filters ----
   The Reports / RxLogReports / ExpiredsDrugReports / DrugUsageReports etc.
   partials wrap their filter section in a bare <div> and the grid in a
   <div class="main-content"> — both inside a .tab-pane inside .patient-info.
   Force everything in these wrappers to span the full panel width and have
   no left padding/margin so the filter labels, the grid, and the page
   title above all share the same x-position. */
#rightContentPanel > .patient-info > .tab-content > .tab-pane > div,
#rightContentPanel > .patient-info > .tab-content > .tab-pane > .main-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* The Kendo grid inside each report tab fills the full width of main-content */
#rightContentPanel > .patient-info > .tab-content > .tab-pane > .main-content > .k-grid,
#rightContentPanel > .patient-info > .tab-content > .tab-pane > .main-content .k-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Inside .main-content, Bootstrap rows (negative margins) and columns
   (small padding) already provide visual gutters, so no extra inset needed */

/* ---- Delivery page filters: align with title and grid below ----
   The filter row is a Bootstrap .row inside #rightContentPanel. By default
   .row has -15px L/R margins which extend it beyond the panel's content
   edge, and col-sm-2 has 15px padding — net offset ends up 15px right of
   the title. Strip the negative margin and the first-col left padding so
   the From Date label starts flush with the title above it. */
.delivery-filters {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.delivery-filters > .form-group:first-child,
.delivery-filters > .col-auto:first-child,
.delivery-filters > [class*="col-"]:first-child {
    padding-left: 0 !important;
}

.delivery-filters > .form-group,
.delivery-filters > [class*="col-"] {
    padding-right: 12px;
}

/* ---- SIDEBAR: overlay on top of content (no push) on tablet/phone ---- */
@media (max-width: 991px) {
    .left-panel {
        width: 0 !important;
        overflow: hidden;
        z-index: 1050 !important;
        top: 0;
        left: 0;
        transition: width 0.25s ease-in-out;
    }

    .fullwidthPanel .left-panel {
        width: 260px !important;
        max-width: 80vw !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 1050 !important;
    }

    /* Top header always full width — never pushed by sidebar on mobile */
    .top-header,
    .fullwidthPanel .top-header {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Container always full width — never pushed by sidebar on mobile */
    .container,
    .fullwidthPanel .container,
    .container.body-content,
    .fullwidthPanel .container.body-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        min-width: 0 !important;
    }

    .fullwidthPanel .wraper {
        width: 100% !important;
    }

    /* Backdrop while sidebar is open */
    .fullwidthPanel #leftMenuBackdrop {
        display: block;
    }

    #leftMenuBackdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1040;
    }
}

/* ---- TOP HEADER: keep on a single row, shrink/hide items as needed ---- */
@media (max-width: 991px) {
    .top-header {
        padding: 5px 8px !important;
        height: auto !important;
    }

    /* Single row, no wrap — items must shrink instead of dropping */
    .topmenu {
        flex-wrap: nowrap !important;
        gap: 6px;
        min-width: 0;
    }

    .topmenu > div {
        flex-wrap: nowrap !important;
        min-width: 0;
    }

    .topmenu > div > div {
        flex-wrap: nowrap !important;
        min-width: 0;
    }

    /* Right-side actions: nowrap, allow shrink, align tight */
    .topmenu > div:last-child > div {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px;
    }

    /* Printer status text already hidden on small screens elsewhere; the wrapper itself is also redundant */
    .printer_wrapper {
        font-size: 12px;
        margin: 0 !important;
    }

    /* Notification icon: strip the Bootstrap .btn-primary background/padding/border
       — the bell PNG already has its own blue circle, so the underlying btn-primary
       was producing a visible blue square/dot beneath the bell. */
    #notification-icon.btn,
    #notification-icon.btn.btn-primary {
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    #notification-icon:hover,
    #notification-icon:focus,
    #notification-icon:active {
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Body sits below the fixed header — give it enough top spacing so the
       page title (e.g. "DASHBOARD") is not hidden underneath. */
    .container,
    .container.body-content {
        margin-top: 100px !important;
        padding-top: 8px;
    }

    /* Tighten the title's own top margin since the container already provides spacing */
    .body-content > h5 {
        margin: 4px 0 8px !important;
    }
}

@media (max-width: 767px) {
    /* Hide printer status block entirely on phones — frees room for icons */
    .printer_wrapper {
        display: none !important;
    }
}

@media (max-width: 575px) {
    /* Shrink the location dropdown so notification + profile icons fit on one row */
    .locationddl,
    .locationddl > .k-dropdown,
    .locationddl .k-dropdown .k-dropdown-wrap {
        width: 130px !important;
        max-width: 130px !important;
        min-width: 0 !important;
    }

    .locationddl .k-dropdown .k-input {
        font-size: 12px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Pull the toggle/hamburger tighter to the edge */
    .toggleIcon {
        margin: 0 0 0 4px !important;
    }

    /* Tighten icon sizes in the right cluster */
    .user-section img {
        width: 30px;
        height: 30px;
        margin-left: 4px;
    }

    .notification-icon {
        width: 24px;
    }

    .user-section.user-icon-o > div > a.btn {
        padding: 0 !important;
    }

    /* Notification badge should sit on top of the bell, not push width */
    #total-notification-count {
        font-size: 10px;
        left: auto !important;
        right: -6px !important;
        top: -4px !important;
    }

    .container,
    .container.body-content {
        margin-top: 95px !important;
        padding-top: 8px;
    }
}

/* Very narrow phones — hide the location dropdown entirely (still toggleable from settings/menu) */
@media (max-width: 380px) {
    .locationddl {
        display: none !important;
    }
}

/* ---- MODALS & POPUPS: full width on small screens ---- */
@media (max-width: 991px) {
    /* Override hard-coded desktop widths from site.css */
    .modal.show {
        width: auto !important;
        left: 0 !important;
        right: 0 !important;
        padding-right: 0 !important;
    }

    div#insuranceClaimmodal,
    div#divClaimDetails div#insuranceClaimmodal,
    div#divAddNewSig div#sigmodal,
    div#divPrescriptionStatusUpdate,
    div#divClaimDetailsdef {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        margin: 0 auto !important;
    }

    div#dvadddocument .modal-box.modal-dialog-centered.drugDescription .modal-content {
        max-width: 95% !important;
    }
}

@media (max-width: 767px) {
    .modal-dialog,
    .modal .modal-dialog,
    .modal-dialog.modal-dialog-centered,
    div#divPrescriptionStatusUpdate .modal-dialog.modal-dialog-centered {
        width: 96% !important;
        max-width: 96% !important;
        margin: 0.5rem auto !important;
        display: block !important;
    }

    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        width: 96% !important;
        max-width: 96% !important;
    }

    .modal-content,
    div#insuranceClaimmodal .modal-content,
    div#divClaimDetails div#insuranceClaimmodal .modal-content,
    div#divAddNewSig div#sigmodal .modal-content,
    div#dvadddocument .modal-box.modal-dialog-centered.drugDescription .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .modal-body,
    div#insuranceClaimmodal .modal-body {
        max-height: 70vh !important;
        overflow-y: auto !important;
        padding: 0.75rem !important;
    }

    .modal-header,
    .modal-footer {
        padding: 0.5rem 0.75rem !important;
        flex-wrap: wrap !important;
    }

    .modal-footer .btn {
        margin: 4px 0;
    }

    .claims-verified-popup {
        min-width: 92vw !important;
        max-width: 92vw !important;
        width: 92vw !important;
    }

    .modal-open div#divPatientInsurancePopup {
        width: 96% !important;
        max-width: 96% !important;
    }
}

/* Desktop: let any grid's row area scroll sideways when its columns are wider
   than the panel (the scroll rules below are mobile-only, <=1024px). No-op for
   grids that fit. >=1025px keeps the <=1024px rules untouched. */
@media (min-width: 1025px) {
    .k-grid-content,
    .k-grid-content.k-auto-scrollable {
        overflow-x: auto !important;
    }
}

/* ---- KENDO GRIDS / TABLES / ROSTERS: keep grids inside their parent, let Kendo's
   own scrollable container handle horizontal scroll for wide column tables.
   Two layers:
     1. Constrain .k-grid (the outer widget) to its parent width so the page
        itself never gets a horizontal scrollbar from a wide grid.
     2. DO NOT force overflow / width on Kendo's internal .k-grid-content or
        .k-grid-header-wrap — Kendo computes the body's table width from its
        scroll container at init, and forcing those properties caused rows to
        render with collapsed height on real mobile devices.
     Breakpoint extended to 1024px so iPad-portrait and similar tablet
     viewports also get the constrained / internally-scrollable grid layout. */
@media (max-width: 1024px) {
    /* Outer page panel: NEVER scroll horizontally as a whole — wide grids
       must scroll inside their own .k-grid-content, not by dragging the
       toolbar / header / pager along. Vertical scroll stays as needed.
       Force width:100% to override the legacy 94vw rule that was leaving
       6vw of whitespace beside the panel on mobile. */
    #rightContentPanel {
        padding: 8px !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Generic responsive wrappers (used by non-Kendo HTML tables) */
    .table-responsive,
    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Constrain .k-grid (and every layout box inside it) to viewport width
       so wide grids never push the OUTER #rightContentPanel into horizontal
       scroll mode. Without these caps, Kendo sizes .k-grid-content to its
       inner table's column-width total (often >1200px), which overflows the
       grid widget, which overflows #rightContentPanel — so the entire grid
       (toolbar, header, body, pager) ends up scrolling left/right as a unit
       instead of just the row data. */
    .k-grid {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Scrollable Kendo grids have an inner .k-grid-content that handles
       horizontal scroll; the outer widget can stay overflow:hidden so the
       toolbar / pager don't drift sideways. */
    .k-grid:has(.k-grid-content) {
        overflow: hidden !important;
    }

    /* Non-scrollable Kendo grids (Scrollable(false)) render the <table> as
       a direct child of .k-grid, so the only place horizontal scroll can
       happen is the .k-grid widget itself. Allow it. The toolbar and
       pager are siblings of the table but we keep them sticky to the
       left edge via position:sticky so they don't slide with the scroll. */
    .k-grid:not(:has(.k-grid-content)) {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    .k-grid:not(:has(.k-grid-content)) > .k-grid-toolbar,
    .k-grid:not(:has(.k-grid-content)) > .k-header.k-grid-toolbar,
    .k-grid:not(:has(.k-grid-content)) > .k-grid-footer,
    .k-grid:not(:has(.k-grid-content)) > .k-pager-wrap,
    .k-grid:not(:has(.k-grid-content)) > .k-grid-pager {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: #fff;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* The footer wrap should stay full-panel-width and clip its inner
       table — together with position:sticky on its parent .k-grid-footer
       above, this keeps the "Total Amount" cell pinned visible while the
       body table can scroll horizontally beside/under it. */
    .k-grid:not(:has(.k-grid-content)) > .k-grid-footer > .k-grid-footer-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .k-grid:not(:has(.k-grid-content)) > .k-grid-footer > .k-grid-footer-wrap > table {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    /* JS-injected total strip — extracts the aggregate text out of the
       Kendo footer cell and displays it as a full-width banner below the
       grid. Always visible regardless of horizontal scroll, and works
       for both scrollable and non-scrollable grids. */
    .k-grid > .k-grid-mobile-total-strip {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding: 8px 12px;
        background: #f5f5f5;
        border-top: 1px solid #d8dde2;
        font-weight: 600;
        font-size: 13px;
        color: #212529;
        white-space: nowrap;
        overflow-x: auto;
        position: sticky;
        left: 0;
        z-index: 3;
    }

    .k-grid > .k-grid-toolbar,
    .k-grid > .k-header.k-grid-toolbar,
    .k-grid > .k-grid-header,
    .k-grid > .k-grouping-header,
    .k-grid > .k-grid-content,
    .k-grid > .k-grid-content.k-auto-scrollable,
    .k-grid > .k-grid-footer,
    .k-grid > .k-grid-pager,
    .k-grid > .k-pager-wrap {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Footer wrap: clip the inner table the same way Kendo clips the
       header-wrap, so Kendo's internal scroll-sync can keep header,
       body and footer columns aligned. */
    .k-grid-footer,
    .k-grid-footer-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box;
    }

    /* The inner footer table should be AS WIDE AS the body table — Kendo
       computes that width and writes it inline. Don't force width:100%
       (that would shrink the footer below the body width and the aggregate
       cell would end halfway). Just floor it at the panel width. */
    .k-grid-footer-wrap > table {
        width: auto !important;
        min-width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
    }

    /* The body content is the ONLY layer that scrolls horizontally — header
       wrap clips while staying in sync via Kendo's internal scroll handler */
    .k-grid-content,
    .k-grid-content.k-auto-scrollable {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .k-grid-header,
    .k-grid-header-wrap {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    /* Make the inner header/body tables fill the panel width so a grid with
       fewer/narrower columns (e.g. Master List → Drug Class with only
       Edit / Delete / Drug Class) doesn't leave a wide empty strip on the
       right. Kendo sets inline pixel widths on these tables based on the
       sum of column widths, which is often less than the actual panel —
       forcing width:100% with !important wins over the inline style and
       lets the auto-width last column expand to fill the remaining space.
       For grids whose columns sum to MORE than 100%, table-layout:fixed
       still respects each column's pixel width and the surplus overflows
       .k-grid-content (which has overflow-x:auto), so horizontal scroll
       still engages. */
    .k-grid-header-wrap,
    .k-grid-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .k-grid-header-wrap > table,
    .k-grid-content > table {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* Non-scrollable grids (Scrollable(false)) render the <table> as a direct
       child of .k-grid (no .k-grid-content wrapper). Force their width too
       so the inline 335px-style width Kendo sets doesn't leave whitespace.
       Use very high specificity (multiple class chains) to beat Kendo's
       inline style + JS-applied widths.
       table-layout:auto with width:100% lets the browser distribute extra
       space across columns when the column-content total is less than the
       panel width (Master List 3-col case fills evenly), while still
       allowing the table to grow wider than the panel for scrollable
       grids with many columns (Drug page case → horizontal scroll inside
       .k-grid-content engages). */
    div.k-grid > table[role="grid"],
    div.k-grid.k-widget > table[role="grid"],
    div.k-grid > table.k-selectable,
    div.k-grid > table[style],
    .k-grid-content > table,
    .k-grid-header-wrap > table {
        width: 100% !important;
        min-width: 100% !important;
        table-layout: auto !important;
    }

    /* Also strip the inline col widths set by Kendo from .Width(80) etc.
       so columns redistribute proportionally with the table-fixed rule. */
    div.k-grid colgroup col[style*="width"],
    div.k-grid colgroup col {
        width: auto !important;
    }

    /* Cells inside command columns (Edit/Delete with icon-only buttons)
       have content much narrower than the equal-distributed col width
       under table-layout:fixed — center their icons so they don't sit
       awkwardly at the far left of a wide cell. */
    .k-grid td.k-command-cell {
        text-align: center;
    }

    /* ---- Toolbar (Search + Add button): proper gap between items ---- */
    .k-grid-toolbar,
    .k-grid .k-header.k-grid-toolbar {
        gap: 10px !important;
        padding: 10px !important;
        row-gap: 10px !important;
    }

    /* Each direct child of the toolbar gets a small margin so the wrap
       between Add-button row and Search-input row has proper spacing on
       phones — gap doesn't always work in older browsers under flex-wrap */
    .k-grid-toolbar > * {
        margin: 4px 0 !important;
    }

    /* Search input full width on phones so it doesn't crash into the
       Add button when the toolbar wraps */
    .k-grid-toolbar .k-grid-search {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        margin: 4px 0 !important;
    }

    /* Add-New / Add-Drug etc. buttons get their own row on phones */
    .k-grid-toolbar > a.btn,
    .k-grid-toolbar > a.k-button,
    .k-grid-toolbar > a[class*="AddNew"],
    .k-grid-toolbar > .k-button[class*="AddNew"] {
        flex: 0 0 auto !important;
        margin: 4px 0 !important;
    }

    /* For non-scrollable grids (e.g. Scrollable(false)), wrap the inner table
       in horizontal scroll so wide tables don't break the layout. */
    .k-grid:not(.k-grid-scrollable) > table,
    .k-grid > .k-grid-toolbar + table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    /* Pager wraps onto multiple lines so all controls remain reachable */
    .k-grid-pager,
    .k-pager-wrap {
        flex-wrap: wrap !important;
        gap: 4px;
    }

    /* Toolbar (Search, Excel, PDF buttons) wraps so it doesn't overflow */
    .k-grid-toolbar,
    .k-grid .k-header.k-grid-toolbar {
        flex-wrap: wrap !important;
        white-space: normal !important;
    }

    .k-grid-toolbar > * {
        margin-bottom: 4px;
    }

    /* Audit-trail-style overflow containers — no longer constrained to a fixed vw */
    div#grdPrescriptionAuditTrails {
        max-width: 100% !important;
    }

    /* Prevent a Bootstrap .row containing a grid from sprawling wider than viewport */
    .row.customScroll {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* On phones, individual grid columns shouldn't force a minimum width that
   exceeds the viewport — Kendo scrolls the table inside .k-grid-content,
   we just want each th/td to keep its column width while remaining inside.
   Also strip Kendo's hard-coded inline col widths (e.g. <col style="width:80px">
   from .Width(80)) so columns redistribute proportionally with the table
   width on small screens instead of being locked to fixed pixels. */
@media (max-width: 575px) {
    /* HEADERS: never wrap. The header text dictates the minimum column
       width, so "Quantity" stays as one word instead of wrapping to
       "Qu / an / ti / ty". Browser uses the header text's natural width
       as the col's min-content for table-layout:auto. */
    .k-grid-header th.k-header,
    .k-grid-header th,
    .k-grid > table > thead > tr > th {
        white-space: nowrap !important;
        word-break: keep-all !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* BODY CELLS: still allow wrap so long data text (e.g. an address or
       drug name) breaks within the column without forcing it wider than
       the header text would otherwise dictate. */
    .k-grid-content td,
    .k-grid > table > tbody > tr > td {
        white-space: normal;
        word-break: break-word;
    }

    /* FOOTER CELLS (aggregate row e.g. "Total Amount : 103991.99"): keep
       on a SINGLE line, never wrap character-by-character. The cell's
       natural width then forces the column wider, and horizontal scroll
       on .k-grid-content handles the overflow. */
    .k-grid > table > tfoot > tr > td,
    .k-grid-content tfoot td,
    .k-grid .k-footer-template,
    .k-grid td.k-footer-template,
    .k-grid .k-grid-footer td,
    .k-grid .k-grid-footer-wrap td {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow: visible !important;
        text-overflow: clip !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        line-height: 1.4;
    }

    .k-grid colgroup col {
        width: auto !important;
    }
}

/* ---- Bootstrap nav-tabs on small screens: wrap nicely with gaps ----
   Pages like Sales, ReportingDataExport, Master List, Report Migration etc.
   render many tabs in a single horizontal row. On phones they crowd against
   each other. Wrap onto multiple lines with a visible gap and a clear
   active-state, while keeping the row itself transparent (no gray strip). */
@media (max-width: 991px) {
    .nav.nav-tabs {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px;
        row-gap: 6px;
        background: transparent !important;
        border-bottom: 0 !important;
        padding: 0 !important;
        margin-bottom: 10px;
    }

    .nav.nav-tabs > .nav-item,
    .patient-info .nav.nav-tabs > .nav-item {
        margin-bottom: 0 !important;
        flex: 0 0 auto;
        background: transparent !important;
        border: 0 !important;
        border-right: 0 !important;
        padding: 0 !important;
    }

    .nav.nav-tabs > .nav-item > .nav-link {
        padding: 6px 12px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        border: 1px solid #ced4da !important;
        border-radius: 6px !important;
        background: #fff !important;
        color: #495057;
        margin: 0 !important;
        line-height: 1.3;
    }

    .nav.nav-tabs > .nav-item > .nav-link:hover {
        background: #fff !important;
        border-color: #d7171e !important;
        color: #d7171e !important;
    }

    .nav.nav-tabs > .nav-item > .nav-link.active {
        background: #d7171e !important;
        border-color: #d7171e !important;
        color: #fff !important;
        font-weight: 600;
    }
}

@media (max-width: 575px) {
    .nav.nav-tabs > .nav-item > .nav-link {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }
}

/* ---- PRESCRIPTION APPROVAL page (ReviewPrintedLabel.cshtml) ----
   This page nests the grid inside <div class="row" id="navcontainer"><div
   class="ContentsubBody"><div class="main-content px-0 custm-border">. The
   Bootstrap .row has negative left/right margins that push the inner grid
   beyond #rightContentPanel, so the grid sits visually offset from the
   page title above it. Strip those margins so the grid lines up with the
   title at every viewport size, and on mobile also force internal scroll. */
#navcontainer.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

#navcontainer .ContentsubBody,
#navcontainer .main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 991px) {
    #navcontainer .ContentsubBody,
    #navcontainer .main-content {
        max-width: 100% !important;
        overflow-x: hidden;
    }

    /* Constrain the grid widget + its child layout boxes to viewport width
       so the inner <table>'s column widths overflow .k-grid-content (which
       handles the scroll) instead of overflowing the whole grid widget */
    #grdReviewPrintedLabelPrescriptions {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
        overflow: hidden !important;
    }

    #grdReviewPrintedLabelPrescriptions .k-grid-toolbar,
    #grdReviewPrintedLabelPrescriptions .k-grid-header,
    #grdReviewPrintedLabelPrescriptions .k-grid-content,
    #grdReviewPrintedLabelPrescriptions .k-grid-pager {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Header wrap clips inner header table; content scrolls horizontally */
    #grdReviewPrintedLabelPrescriptions .k-grid-header-wrap {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    #grdReviewPrintedLabelPrescriptions .k-grid-content,
    #grdReviewPrintedLabelPrescriptions .k-grid-content.k-auto-scrollable {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---- DELIVERIES GRID: scroll the table inside its own JS-injected wrapper ----
   The Delivery grid is manually initialised in Delivery/Index.cshtml with
   scrollable:false, so it renders as ONE plain <table> inside #grdDeliveries
   (no inner .k-grid-content scroll layer). To get "only rows scroll left/right
   while toolbar / filters / pager stay fixed", the view JS wraps the inner
   <table> in a <div class="delivery-table-scroll"> after grid init. The CSS
   below makes that wrapper the horizontal scroll container, while keeping the
   <table> itself as a normal table so header & body columns stay aligned via
   the usual <colgroup> column-width sync. */
@media (max-width: 768px) {
    /* Outer widget: NO horizontal scroll here — keeps toolbar/pager fixed */
    #grdDeliveries {
        overflow-x: hidden !important;
        max-width: 100%;
    }

    /* JS-injected wrapper around the table. Only rows/headers scroll inside.
       touch-action pan-x lets the OS pan horizontally on swipe without the
       gesture being interpreted by Kendo as a row selection. user-select
       none prevents the row text from being highlighted during scroll. */
    #grdDeliveries .delivery-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
        touch-action: pan-x pan-y;
    }

    #grdDeliveries .delivery-table-scroll > table,
    #grdDeliveries .delivery-table-scroll > table * {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* But keep links / inputs clickable + their text copyable */
    #grdDeliveries .delivery-table-scroll a,
    #grdDeliveries .delivery-table-scroll input,
    #grdDeliveries .delivery-table-scroll select,
    #grdDeliveries .delivery-table-scroll button {
        -webkit-user-select: auto;
        user-select: auto;
    }

    /* Keep the table as a real <table> so colgroup column widths apply and
       header columns stay aligned with body columns.
       Use width:max-content so the table grows to fit each column's natural
       width — this keeps Address from shrinking when more columns toggle on.
       min-width:100% keeps a single-column table from looking too narrow. */
    #grdDeliveries .delivery-table-scroll > table {
        width: -webkit-max-content !important;
        width: max-content !important;
        min-width: 100%;
        table-layout: auto !important;
    }

    /* Toolbar (search), filter bar and pager stay full-width and DO NOT scroll
       horizontally — they're siblings of the .delivery-table-scroll wrapper */
    #grdDeliveries .k-grid-toolbar,
    #grdDeliveries .k-header.k-grid-toolbar,
    #grdDeliveries .k-grid-pager,
    #grdDeliveries .k-pager-wrap,
    .delivery-filters {
        max-width: 100% !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        white-space: normal !important;
        overflow-x: hidden !important;
    }

    /* Override site.css's width:auto / wrap that was crushing cells */
    #grdDeliveries th,
    #grdDeliveries td {
        width: auto;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Allow address / patient name to wrap inside their cells */
    #grdDeliveries td.col-address,
    #grdDeliveries td.col-patient {
        white-space: normal !important;
        word-break: break-word !important;
    }
}

@media (max-width: 576px) {
    /* On the smallest phones, drop min-width down so the table is still
       scrollable but doesn't force a giant rightward scroll */
    #grdDeliveries .delivery-table-scroll > table {
        min-width: 600px;
    }

    /* Tighten cell padding on small phones */
    #grdDeliveries th,
    #grdDeliveries td {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
}

/* ---- Border / look-and-feel polish for the Deliveries table (ALL viewports) ----
   Without an inner .k-grid-header / .k-grid-content split, Kendo's normal grid
   header styles don't apply, so the <thead> picks up generic <th> borders that
   render with thick dark vertical separators between columns (visible on
   desktop too). We strip those vertical borders and match the body row style:
   only a single light bottom border per row, no left/right/top per cell. */
#grdDeliveries > table,
#grdDeliveries .delivery-table-scroll > table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 0 !important;
}

/* Body rows: clean horizontal separators only */
#grdDeliveries > table > tbody > tr > td,
#grdDeliveries .delivery-table-scroll > table > tbody > tr > td {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Header cells: match the app-wide .k-grid-header look (site.css uses #dfdfdf) —
   plain light-grey background, normal case, normal weight (Kendo theme),
   single thin bottom border, no vertical separators between header cells. */
#grdDeliveries > table > thead > tr > th,
#grdDeliveries .delivery-table-scroll > table > thead > tr > th {
    background-color: #dfdfdf !important;
    background-image: none !important;
    color: #212529 !important;
    font-weight: bold;
    font-size: 14px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    padding: 12px 8px !important;
    vertical-align: middle;
    /* Strip the dark vertical separators between header cells */
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* Last data row: drop the trailing bottom border */
#grdDeliveries > table > tbody > tr:last-child > td,
#grdDeliveries .delivery-table-scroll > table > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

/* First / last column: no extra side border */
#grdDeliveries > table > thead > tr > th:first-child,
#grdDeliveries > table > tbody > tr > td:first-child,
#grdDeliveries .delivery-table-scroll > table > thead > tr > th:first-child,
#grdDeliveries .delivery-table-scroll > table > tbody > tr > td:first-child {
    border-left: 0 !important;
    padding-left: 8px !important;
}
#grdDeliveries > table > thead > tr > th:last-child,
#grdDeliveries > table > tbody > tr > td:last-child,
#grdDeliveries .delivery-table-scroll > table > thead > tr > th:last-child,
#grdDeliveries .delivery-table-scroll > table > tbody > tr > td:last-child {
    border-right: 0 !important;
}

/* Header on phones: slightly smaller font + tighter padding to fit nicely
   on narrow viewports; same look (no uppercase, normal case) as desktop */
@media (max-width: 768px) {
    #grdDeliveries .delivery-table-scroll > table > thead > tr > th {
        font-size: 13px !important;
        padding: 10px 8px !important;
    }
}

/* ---- Mobile column-toggle buttons: visible active vs inactive state ----
   The Status/Address/Pay/Phone buttons need a strong, obvious active state
   so the user can see at a glance which columns are currently shown. */
.mobile-cols-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
}

.mobile-cols-toggle > .k-button {
    padding: 4px 12px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    font-weight: 600;
    background: #fff !important;
    color: #495057 !important;
    border: 1px solid #ced4da !important;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    cursor: pointer;
    line-height: 1.3;
}

.mobile-cols-toggle > .k-button:hover {
    background: #f1f3f5 !important;
}

/* Active state — clearly highlighted (red pill matching app accent) */
.mobile-cols-toggle > .k-button.k-button-solid-primary,
.mobile-cols-toggle > .k-button.k-button-solid-primary:hover {
    background: #d7171e !important;
    color: #fff !important;
    border-color: #d7171e !important;
    box-shadow: 0 1px 4px rgba(215, 23, 30, 0.25);
}

.mobile-cols-toggle > span {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
    margin-right: 4px;
}

/* ---- BOOTSTRAP COLUMNS: stack on phones ---- */
@media (max-width: 575px) {
    [class*="col-md-"],
    [class*="col-lg-"],
    [class*="col-xl-"],
    [class*="col-sm-"],
    [class*="col-"][class*=" col-"],
    .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Bootstrap .px-1 / .px-2 / .px-3 utility classes on form-group cols
       leave an uneven indent vs the title above them. Strip horizontal
       padding on form-group cols inside a row so they line up flush. */
    .row > .form-group[class*="px-"],
    .row > [class*="col-"][class*="px-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Buttons inside filter cols: drop the leading <br/> spacing and
       ensure they wrap nicely at the start of their own row. */
    .row > .form-group input.k-button,
    .row > .form-group input[type="button"] {
        margin-bottom: 4px;
    }

    /* (broader-breakpoint versions of these rules live below at max-width:1024) */

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .main-content {
        margin-right: 0 !important;
        padding: 8px !important;
    }

    .card.card-main,
    .customCard {
        margin: 5px 0 !important;
    }

    /* Form inputs full-width on phones */
    .form-group .k-widget,
    .form-group input,
    .form-group select,
    .form-group textarea {
        max-width: 100% !important;
    }

    /* Button rows stack */
    .btn-group-justified .btn,
    .form-actions .btn {
        margin-bottom: 6px;
    }
}

/* ---- KENDO DROPDOWNS / DATE PICKERS: keep popups within viewport ---- */
@media (max-width: 767px) {
    .k-animation-container {
        max-width: 100vw !important;
    }

    .k-list-container,
    .k-popup,
    .k-calendar-container {
        max-width: 96vw !important;
    }

    .k-window {
        width: 96vw !important;
        max-width: 96vw !important;
        left: 2vw !important;
    }
}

/* ==========================================================================
   Mobile profile-pic dropdown
   - Desktop shows the existing "Welcome <name>" dropdown + a plain profile-pic link.
   - Phone/tablet hides the welcome dropdown (already) and routes the profile
     pic itself to a dropdown with User Profile / Change Password / Logout.
   ========================================================================== */
/* Default: desktop variant visible, mobile variant hidden */
.profile-dropdown-mobile {
    display: none;
}

.profile-link-desktop {
    display: inline-block;
}

@media (max-width: 991px) {
    .profile-link-desktop {
        display: none !important;
    }

    .profile-dropdown-mobile {
        display: inline-block !important;
    }

    /* Also hide the welcome-text wrapper on mobile (it's already toggle-hidden,
       but the empty wrapper still consumes space) */
    .user-section.float-right {
        display: none !important;
    }

    .profile-dropdown-mobile .dropdown-toggle.no-caret::after {
        display: none !important;
    }

    .profile-dropdown-mobile > a {
        display: inline-block;
        cursor: pointer;
    }

    .profile-dropdown-mobile img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        object-fit: cover;
    }

    /* Anchor the dropdown to the right edge of the trigger so it doesn't
       overflow off the right side of small viewports */
    .profile-dropdown-mobile-menu.dropdown-menu {
        right: 0;
        left: auto;
        min-width: 200px;
        max-width: 90vw;
        margin-top: 6px;
        font-size: 14px;
    }

    .profile-dropdown-mobile-menu .dropdown-item {
        padding: 10px 14px;
    }

    .profile-dropdown-mobile-menu .dropdown-item a,
    .profile-dropdown-mobile-menu .dropdown-item .button-link {
        color: #1D1D1D;
        text-decoration: none;
        background: none;
        border: 0;
        padding: 0;
        font: inherit;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
    }

    .profile-dropdown-mobile-menu .dropdown-item:hover {
        background: #f1f1f5;
    }
}

/* ==========================================================================
   Login page — fix top of page being cut off on phones / small tablets
   - .loginSec uses 100vh + align-items:center. When the stacked panels grow
     taller than the viewport, the top overflows above the screen with no way
     to scroll up. Switch to scrollable layout on small screens.
   ========================================================================== */
@media (max-width: 991px) {
    .loginSec {
        height: auto !important;
        min-height: 100vh;
        align-items: flex-start !important;
        padding: 16px 0;
        overflow-y: auto;
    }

    .login-box {
        width: 94% !important;
        margin: 12px auto !important;
    }

    .login-box > .row {
        min-height: 0 !important;
    }

    .login-left-panel {
        border-radius: 20px 20px 0 0 !important;
    }

    .login-left-content {
        padding: 24px 20px 20px !important;
        height: auto !important;
    }

    .loginform {
        padding: 28px 22px !important;
        height: auto !important;
    }

    .login-form-inner {
        max-width: 100% !important;
    }
}

@media (max-width: 575px) {
    .login-hero-text {
        font-size: 22px !important;
    }

    .login-hero-desc {
        font-size: 12.5px !important;
        margin-bottom: 16px !important;
    }

    .login-features {
        margin-bottom: 14px !important;
        gap: 10px !important;
    }

    .logintitle {
        margin-bottom: 20px !important;
    }

    .logintitle h2 {
        font-size: 22px !important;
    }

    .loginlogo {
        margin-bottom: 16px !important;
    }

    .loginform {
        padding: 22px 18px !important;
    }
}

/* ============================================================
   FINAL OVERRIDES — placed last so they win the cascade no
   matter what Kendo / page-level CSS sets.
   ============================================================ */

/* Force Kendo grid inner tables to be AT LEAST as wide as the grid,
   but allow growth when column-content (incl. wide footer aggregate
   cells like "Total Amount : 103991.99") needs more space. Highest-
   specificity selectors so they beat Kendo's defaults and any inline
   width the grid widget writes during init.
   - width:auto + min-width:100% → narrow grids (Master List) fill the
     panel, wide grids (Sales / Drug) grow beyond it so .k-grid-content
     scrolls horizontally inside.
   - max-width is intentionally unset so the table can extend wider. */
@media (max-width: 1024px) {
    html body #rightContentPanel div.k-grid > table,
    html body #rightContentPanel div.k-grid > table[role="grid"],
    html body #rightContentPanel div.k-grid .k-grid-content > table,
    html body #rightContentPanel div.k-grid .k-grid-header-wrap > table {
        width: auto !important;
        min-width: 100% !important;
        max-width: none !important;
        display: table !important;
        table-layout: auto !important;
    }

    /* Tbody / thead must NOT be flex children of the table when the table
       inside a flex .k-grid is treated weirdly — force normal table-row
       behaviour so they fill the table's width. */
    html body #rightContentPanel div.k-grid > table > thead,
    html body #rightContentPanel div.k-grid > table > tbody,
    html body #rightContentPanel div.k-grid > table > tfoot {
        display: table-row-group !important;
        width: auto !important;
    }

    /* Strip any inline col widths so columns can expand to fill the
       100%-wide table via auto layout. */
    html body #rightContentPanel div.k-grid colgroup col {
        width: auto !important;
    }
}