/* awportal.css (complete, with Statement extracted + aw-section usage updates)
   NOTE: This is your provided file, with these changes:
   - Replaced var(--section) with var(--aw-section) where applicable
   - Replaced var(--section-ink) with var(--aw-section-ink) where applicable
   - Added OrderTracking/Statement styles (aw-card-square, aw-stmt-table, stmt- mobile, etc.)
   - Kept your existing content otherwise
*/

/* =========================================================
   AWPortal - extracted from MainLayout.razor (Phase 1)
   Goal: no visual changes, just moving styles out of layout.
   Source: MainLayout.razor inline <style> block
   ========================================================= */

/* =========================================================
   1) Debug / Diagnostics
   ========================================================= */
.viewport-debug {
    position: fixed;
    bottom: 6px;
    right: 6px;
    z-index: 9999;
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
}

/* =========================================================
   2) Theme / Layout Variables
   NOTE: Keep as-is. Later we alias to --aw-*.
   ========================================================= */
:root {
    --ink: #222;
    --muted: #6b7280;
    --section: #334C6A;
    --section-ink: #f5f6f4;
    --modal-title: #ffffff;
    --header-height: 120px;
    --gap-lg: 16px;
    --gap-sm: 12px;
    --page-gutter: 11px;
    --page-max: 1320px;
    /* modal positioning vars (was a second :root block) */
    --modal-top-offset: 100px;
    --modal-bottom-gutter: 12px;
}
/* =========================================================
   AW Token Aliases (Phase 2)
   Zero visual impact — maps new system tokens to existing vars
   ========================================================= */
:root {
    /* Core text + surface */
    --aw-ink: var(--ink);
    --aw-muted: var(--muted);
    --aw-surface: #fff;
    /* Section colors */
    --aw-section: var(--section);
    --aw-section-ink: var(--section-ink);
    --aw-modal-title: var(--modal-title);
    /* Layout */
    --aw-header-height: var(--header-height);
    --aw-gap-lg: var(--gap-lg);
    --aw-gap-sm: var(--gap-sm);
    --aw-page-gutter: var(--page-gutter);
    --aw-page-max: var(--page-max);
    /* Modal */
    --aw-modal-top-offset: var(--modal-top-offset);
    --aw-modal-bottom-gutter: var(--modal-bottom-gutter);
    /* Common UI */
    --aw-border: #e5e7eb;
    --aw-border-strong: #d1d5db;
    --aw-card-radius: 10px;
    --aw-shadow-soft: 0 2px 8px rgba(0,0,0,.06);
    /* ViewCart + tables */
    --aw-table-head-bg: #f7fafc;
    --aw-table-head-border: #1f2933;
    --aw-table-row-odd-bg: #ffffff;
    --aw-table-row-even-bg: #f3f4f6;
    /* Slightly lighter than --aw-muted for meta line number */
    --aw-muted-soft: #9ca3af;
}
/* =========================================================
   3) Base Page Shell / Containers
   ========================================================= */
.btn-close {
    border: 1px solid black;
    background-color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='red'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293A1 1 0 01.293 14.293L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
}
a {
    text-decoration: none;
    color: var(--aw-section);
}

.header-link {
    text-decoration: none;
    color: var(--aw-section-ink);
}
    .header-link:hover {
        font-weight: bold;
        color: var(--aw-section-ink);
    }
.modal-title {
    color: var(--aw-modal-title);
}

 
.bg-info {
    color: var(--aw-modal-title);
}

.bg-secondary {
    color: var(--aw-modal-title);
}

.bg-success {
    color: var(--aw-modal-title);
}

.bg-danger {
    color: var(--aw-modal-title);
}

.bg-warning {
    color: var(--aw-modal-title);
}

.page-shell {
    max-width: var(--page-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
    padding-top: 0;
}

.brand-bar {
    background: #fff;
    color: var(--ink);
    padding: 0;
}

    /* align header container to same max + gutter */
    .brand-bar > .container {
        max-width: var(--page-max);
        padding-left: var(--page-gutter) !important;
        padding-right: var(--page-gutter) !important;
    }

/* =========================================================
   4) Header Layout (Desktop + Shared)
   ========================================================= */
.header-grid {
    display: grid;
    grid-template-columns: auto 1fr max-content; /* logo | spacer | user */
    grid-template-rows: auto auto;
    align-items: stretch;
    gap: var(--gap-lg);
    min-height: var(--header-height);
}

    .header-grid.store-context {
        grid-template-columns: auto minmax(280px,1fr) max-content max-content; /* logo | search | user | actions */
    }

.logo-cell {
    align-self: center;
    grid-row: 1 / 3;
}

    .logo-cell a {
        display: block;
        height: 100%;
    }

    .logo-cell img {
        height: var(--header-height);
        width: auto;
        object-fit: contain;
        display: block;
    }

.search-cell {
    min-width: 0;
    margin-top: 15px;
}

.search-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}

    .search-wrap .form-control {
        height: 42px;
        border-radius: 0;
        border: 1px solid #c5c9cd;
        padding-left: 14px;
    }

    .search-wrap .btn {
        height: 42px;
        border-radius: 0;
        border: 1px solid #c5c9cd;
        background: #fff;
        color: #444;
    }

    .search-wrap .form-control::placeholder {
        color: #9aa1a7;
        opacity: 1;
    }

.search-input:focus {
    outline: none;
    box-shadow: none;
}

.search-svg {
    width: 20px;
    height: 20px;
    color: #3b3b3b;
}

.favorite-category-btn {
    margin-left: 8px;
}

.context-cell,
.actions-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
    white-space: nowrap;
    align-self: flex-start;
    height: 57px;
    background-color: transparent;
    min-width: 0;
    margin-top: 8px;
}

.user-context {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #F1F1F1;
    padding: 0 12px;
    height: 100%;
    white-space: nowrap;
    min-width: 0;
}

.cart-compact {
    align-items: flex-start;
    width: 60px;
    text-align: center;
}

    .cart-compact .cart-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .cart-compact .cart-img {
        width: 22px;
        height: 22px;
        display: block;
        object-fit: contain;
    }

    .cart-compact .cart-badge {
        position: absolute;
        top: -9px;
        right: -13px;
        background: #b8776a;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        width: 20px;
        height: 20px;
        line-height: 10px;
        border-radius: 50%;
        text-align: center;
        box-shadow: 0 0 0 2px #fff;
        padding-top: 5px;
    }

    .cart-compact .cart-total {
        font-size: 10px;
        color: #111;
        margin-top: -5px;
    }

.apps-cell {
    grid-column: 2 / -1;
    grid-row: 2 / 3;
    align-self: end;
    min-width: 0;
}

/* =========================================================
   5) Tabs / Subtabs / Scroller + Pills
   ========================================================= */
.section-nav {
    border-bottom: 0;
    position: relative;
    z-index: 2;
    background: #fff;
}
.nav-link {
    color: var(--aw-section) !important
}
.section-link {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    background: #fff;
    color: var(--aw-section-ink)  
    border: 1px solid transparent;
    border-bottom: none;
    transition: opacity .15s, color .15s, background .15s;
    white-space: nowrap;
    opacity: .9;
    text-transform: uppercase;
}
.section-link:visited {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    background: #fff;
    color: var(--aw-section-ink) !important;
    border: 1px solid transparent;
    border-bottom: none;
    transition: opacity .15s, color .15s, background .15s;
    white-space: nowrap;
    opacity: .9;
    text-transform: uppercase;
}
    .section-link:hover {
        opacity: .8;
    }

    .section-link.active,
    .section-link.active:hover {
        background: var(--aw-section) !important;
        color: #fff !important;
        height: 44px;
        font-weight: 700;
        margin-bottom: -4px;
        border-color: var(--aw-section);
        border-bottom-color: transparent;
        text-decoration: underline;
        text-underline-offset: 8px;
        text-decoration-thickness: 2px;
        opacity: 1;
    }

.subtabs {
    background: var(--aw-section);
    border-bottom: 0;
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding-top: 6px;
}

.subtab-link {
    color: var(--aw-section-ink) !important;
    padding: .8rem 1rem;
    font-weight: 600;
    border-radius: 0;
    opacity: .85;
    white-space: nowrap;
}

    .subtab-link:hover {
        color: #fff;
        opacity: 1;
    }

    .subtab-link.active {
        background: #fff;
        color: #2b2f2e !important;
        margin-top: 2px;
        border: 1px solid #dcdcdc;
        text-decoration: underline;
        text-underline-offset: 8px;
        text-decoration-thickness: 2px;
        opacity: 1;
        position: relative;
        z-index: 3;
        box-shadow: 0 1px 0 #fff;
        margin-bottom: -2px;
        border-bottom-color: #fff;
    }

/* scroller + fades */
.tab-bar {
    position: relative;
    --fade: 24px;
}

.tab-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: relative;
    z-index: 1;
}

    .tab-scroller::-webkit-scrollbar {
        display: none;
    }

.tab-strip {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    white-space: nowrap;
}

.tab-bar.overflowing .tab-scroller {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--fade), black calc(100% - var(--fade)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black var(--fade), black calc(100% - var(--fade)), transparent 100%);
}

.tab-scroll {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: transparent;
    color: #2b2b2b;
    cursor: pointer;
    user-select: none;
    z-index: 2;
}

    .tab-scroll.left {
        left: 0;
        background: linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,0));
    }

    .tab-scroll.right {
        right: 0;
        background: linear-gradient(270deg, rgba(0,0,0,.12), rgba(0,0,0,0));
    }

    .tab-scroll.show {
        display: flex;
    }

.subtabs .tab-scroll {
    color: #fff;
}

/* pills */
.aw-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 6px 10px;
    white-space: nowrap;
}

.aw-pill-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .75;
    font-weight: bold;
}

.aw-pill-value {
    font-weight: 700;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: auto;
}

/* FIXED: consistent class names */
.aw-pill-app {
    background: transparent;
    border-color: #1D4ED8;
    color: #1D4ED8;
    font-weight: 600;
}

    .aw-pill-app:hover {
        background: #BFDBFE;
    }

.aw-pill-page {
    background: transparent;
    border-color: #2563EB;
    color: #2563EB;
}

    .aw-pill-page:hover {
        background: #DBEAFE;
    }

/* =========================================================
   6) Page Content Wrappers / Shared Buttons
   ========================================================= */
.page {
    background: #fff;
    margin-top: 0;
}

.content {
    padding-top: 0;
}

.CheckOutBtn {
    background-color: #9F665B;
    border-radius: 0;
}

/* =========================================================
   7) Modals (Customer + General)
   ========================================================= */

/* Modal height behaves correctly with mobile keyboard */
.CustomerInfo {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 24px);
}

@supports not (height: 100dvh) {
    .CustomerInfo {
        max-height: calc(100vh - 24px);
    }
}

.customer-modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.customer-search-sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    padding-bottom: 10px;
}

.customer-results-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.CustomerInfo .Header {
    background-color: var(--aw-section);
}

.UserInfo {
    background-color: var(--aw-section);
}

/* Modal responsiveness (general) */
.modal-responsive {
    width: min(960px, calc(100vw - 24px));
    margin: 12px auto;
}

    .modal-responsive .modal-content {
        border-radius: 10px;
        max-height: calc(100vh - 124px);
        display: flex;
    }

    .modal-responsive .modal-body {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

.modal.fade.show.d-block {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-responsive {
    margin: var(--modal-top-offset) auto var(--modal-bottom-gutter) auto !important;
}

.modal-dialog-centered {
    align-items: flex-start !important;
    min-height: unset !important;
}

.modal-responsive .modal-content {
    max-height: calc(100dvh - var(--modal-top-offset) - var(--modal-bottom-gutter)) !important;
    display: flex;
}

@supports not (height: 100dvh) {
    .modal-responsive .modal-content {
        max-height: calc(100vh - var(--modal-top-offset) - var(--modal-bottom-gutter)) !important;
    }
}

/* =========================================================
   8) Customer Picker (Cards + Table + Truncation)
   ========================================================= */
.customer-results-list {
    display: grid;
    gap: 12px;
}

.customer-card.unified {
    width: 100%;
    text-align: left;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    display: grid;
    gap: 4px;
    cursor: pointer;
}

    .customer-card.unified:hover {
        background: #f9fafb;
    }

    .customer-card.unified:active {
        transform: translateY(1px);
    }

.customer-custid {
    font-weight: 800;
    font-size: 0.9rem;
    color: #111827;
}

.customer-name {
    color: #374151;
    font-size: .95rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-location {
    font-size: .85rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* truncation helpers */
.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.overflow-ellipsis {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* table ellipsis (lg+) */
.customer-table {
    table-layout: fixed;
    width: 100%;
}

    /* column widths (sum ~= 100%) */
    .customer-table col.col-custid {
        width: 18%;
    }

    .customer-table col.col-name {
        width: 42%;
    }

    .customer-table col.col-city {
        width: 22%;
    }

    .customer-table col.col-state {
        width: 8%;
    }

    .customer-table col.col-zip {
        width: 10%;
    }

    .customer-table th,
    .customer-table td {
        overflow: hidden;
        vertical-align: middle;
    }

        .customer-table td.custid-cell {
            white-space: nowrap;
        }

    .customer-table a.custid-link {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .customer-table td.truncate {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* =========================================================
   9) Breakpoints / Responsive Overrides
   ========================================================= */
@media (max-width:1200px) {
    .header-grid {
        grid-template-columns: auto minmax(220px,1fr) max-content max-content;
        gap: var(--gap-sm);
    }

    :root {
        --header-height: 64px;
    }

    .search-wrap .form-control,
    .search-wrap .btn {
        height: 40px;
    }
}

@media (max-width:992px) {
    :root {
        --header-height: 64px;
        --page-gutter: 11px;
    }

    .brand-bar,
    .brand-bar * {
        box-sizing: border-box;
    }

        .brand-bar > .container,
        .brand-bar .container {
            max-width: 100% !important;
            width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

    .page-shell {
        max-width: 100%;
        padding-left: var(--page-gutter) !important;
        padding-right: var(--page-gutter) !important;
    }

    .header-grid,
    .header-grid.store-context {
        grid-template-columns: minmax(130px,auto) 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 6px;
        row-gap: 4px;
        align-items: stretch;
        width: 100%;
        padding-left: var(--page-gutter);
        padding-right: var(--page-gutter);
        overflow-x: clip;
    }

    .logo-cell {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        min-width: 0;
        align-self: center;
    }

        .logo-cell a {
            display: flex;
            align-items: center;
            height: var(--header-height);
        }

        .logo-cell img {
            height: var(--header-height);
            width: auto;
            max-width: 100%;
            object-fit: contain;
        }

    .context-cell {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        width: 100%;
        height: auto !important;
        align-self: stretch;
        justify-self: end;
        padding: 0;
        margin: 0;
        min-width: 0;
        max-width: 350px;
    }

    /* mobile user block */
    .header-grid .user-context {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 4px;
        padding: 6px 10px;
        min-height: var(--header-height);
        width: 100%;
        background-color: transparent;
    }

        .header-grid .user-context > div {
            width: 100%;
            min-width: 0;
            padding-left: 0 !important;
            text-align: right;
        }

        .header-grid .user-context .context-text {
            display: inline-block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .apps-cell {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        align-self: start;
        padding: 8px;
        margin-top: -2px;
        min-width: 0;
        background-color: #F1F8FC;
    }

    .search-cell {
        grid-column: 1 / -1;
        grid-row: 3 / 4;
        margin-top: 0;
        min-width: 0;
    }

    .search-wrap {
        width: 100%;
        min-width: 0;
    }

        .search-wrap .form-control {
            width: 100%;
            min-width: 0;
        }

    .actions-cell {
        grid-column: 1 / -1;
        grid-row: 4 / 5;
        grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
        align-items: center;
        gap: 8px;
        width: 100%;
        height: auto;
        justify-self: stretch;
        min-width: 0;
    }

    .FavBtn,
    .CheckOutBtn {
        width: 100%;
        border-radius: 0;
        white-space: nowrap;
        margin: 0;
        font-size: 13px;
    }

    .cart-compact {
        width: 64px;
        justify-self: center;
    }

    .page > main > article.page-shell {
        padding-left: var(--page-gutter) !important;
        padding-right: var(--page-gutter) !important;
    }

    /* store-specific mobile adjustments */
    .header-grid.store-context .search-cell {
        display: none;
    }

    .header-grid.store-context .actions-cell {
        grid-column: 1 / -1;
        grid-row: 3 / 4;
        grid-template-columns: 56px minmax(0,1fr) minmax(0,1fr) auto;
        gap: 10px;
    }

    .SearchIconBtn {
        width: 42px;
        height: 34px;
        border-radius: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header-grid.store-context .cart-compact {
        justify-self: end;
    }

    .mobile-search-drawer {
        position: absolute;
        left: var(--page-gutter);
        right: var(--page-gutter);
        top: calc(var(--header-height) + 62px);
        z-index: 50;
        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease, transform .18s ease;
    }

    .header-grid.mobile-search-open .mobile-search-drawer {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .mobile-search-inner {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 8px;
        background: #fff;
        border: 1px solid #c5c9cd;
        padding: 8px;
        box-shadow: 0 8px 20px rgba(0,0,0,.12);
    }

    /* mobile pills row */
    .header-grid .apps-cell .d-flex.d-lg-none {
        width: 100%;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap !important;
        gap: 10px;
    }

        .header-grid .apps-cell .d-flex.d-lg-none .aw-pill {
            flex: 1 1 0;
            max-width: none;
            min-width: 0;
            padding: 5px 10px;
        }

        .header-grid .apps-cell .d-flex.d-lg-none .aw-pill-value {
            display: inline-block;
            min-width: 0;
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    /* non-store only uses 2 rows */
    .header-grid:not(.store-context) {
        grid-template-rows: auto auto;
    }

        .header-grid:not(.store-context) .apps-cell {
            grid-row: 2 / 3;
        }

        .header-grid:not(.store-context) .search-cell,
        .header-grid:not(.store-context) .actions-cell,
        .header-grid:not(.store-context) .mobile-search-drawer {
            display: none !important;
        }
}

@media (max-width:576px) {
    :root {
        --header-height: 56px;
    }

    .user-context {
        padding: 4px 6px;
    }

        .user-context .context-text {
            max-width: 110px;
        }

    .modal-responsive {
        width: calc(100vw - 16px);
        margin: 8px auto;
    }

        .modal-responsive .modal-header,
        .modal-responsive .modal-body,
        .modal-responsive .modal-footer {
            padding: 12px;
        }
}

/* =========================================================
   AW Standard Components (Foundation Only)
   Not yet applied anywhere
   ========================================================= */

/* ---- Cards ---- */
.aw-card {
    background: var(--aw-surface);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-card-radius);
}

.aw-card-body {
    padding: 12px 14px;
}

/* ---- Tables ---- */
.aw-table {
    width: 100%;
    border-collapse: collapse;
}

    .aw-table th {
        text-align: left;
        font-weight: 600;
        padding: .75rem;
        border-bottom: 2px solid var(--aw-border-strong);
    }

    .aw-table td {
        padding: .75rem;
        border-bottom: 1px solid var(--aw-border);
    }

/* ---- Utilities ---- */
.aw-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- Favorites ---- */
.favorite-toggle {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.favorite-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.favorite-on {
    color: #f59e0b; /* amber */
}

.favorite-off {
    color: #9ca3af; /* gray */
}

/* =========================================================
   AW Button Utilities (Global)
   Safe extraction from ViewCart + PartsEntry
   ========================================================= */

/* Link-style button (used for part links etc) */
.aw-link-btn {
    display: inline-block;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
}

/* Icon-only button (trash, star, etc) */
.aw-icon-btn {
    border: 0;
    background: transparent;
    padding: .25rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Subtle icon style */
.aw-icon-muted {
    color: #111827;
    opacity: .7;
}

    .aw-icon-muted:hover {
        opacity: 1;
    }

.modal-header {
    background-color: var(--aw-section);
    color: var(--aw-modal-title);
}

/* =========================================================
   Order Tracking - Statement (extracted from Statement.razor)
   ========================================================= */

/* Page wrapper (scoped to Statement only) */
.order-page-wrapper.stmt-page {
    background-color: #f5f6f8;
    padding-bottom: 2rem;
}

/* Square card used in OrderTracking pages */
.aw-card-square {
    border-radius: 0;
    border: 1px solid #d1d5db;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
}

    /* Header uses --aw-section */
    .aw-card-square .card-header {
        background-color: var(--aw-section);
        color: var(--aw-section-ink);
        font-weight: 600;
        padding: 0.4rem 0.9rem;
        font-size: 0.95rem;
    }

    .aw-card-square .card-body {
        padding: 0.75rem;
    }

/* Statement desktop table */
.aw-stmt-table {
    width: 100%;
    border: 1px solid #e3e6e8;
    border-collapse: collapse;
    margin-bottom: 10px;
    background: #ffffff;
    font-size: 0.95rem;
}

    .aw-stmt-table thead th {
        background: #f6f8f9;
        font-weight: 700;
        color: #374151;
        border-bottom: 1px solid #eef1f3;
        white-space: nowrap;
    }

    .aw-stmt-table th,
    .aw-stmt-table td {
        padding: 0.45rem 0.75rem;
        vertical-align: middle;
    }

    .aw-stmt-table tbody tr:nth-child(odd) {
        background-color: #ffffff;
    }

    .aw-stmt-table tbody tr:nth-child(even) {
        background-color: #f3f4f6;
    }

    .aw-stmt-table tbody tr:hover {
        background-color: #e8e9ec;
    }

    .aw-stmt-table .numeric {
        text-align: right;
    }

    .aw-stmt-table tfoot td {
        background: #f6f8f9;
        font-weight: 700;
    }

/* Modal backdrop + credit card form helpers */
.modal-backdrop-lite {
    background-color: rgba(0, 0, 0, 0.5);
}

.cc-label {
    font-size: 0.9rem;
    font-weight: 500;
}

.cc-help {
    font-size: 0.8rem;
    color: #6b7280;
}

/* ===== Statement mobile invoice cards ===== */
.stmt-m-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.stmt-m-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.stmt-m-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

    .stmt-m-title a {
        font-weight: 900;
        font-size: 0.98rem;
        color: #111827;
        text-decoration: underline;
    }

.stmt-m-desc {
    color: #6b7280;
    font-size: 0.85rem;
    margin-top: 2px;
}

.stmt-m-body {
    padding: 10px 12px;
}

.stmt-kv {
    display: grid;
    grid-template-columns: 105px 1fr;
    gap: 6px 10px;
    font-size: 0.9rem;
}

.stmt-k {
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
}

.stmt-v {
    color: #111827;
    word-break: break-word;
}

.stmt-balance {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

    .stmt-balance .label {
        color: #6b7280;
        font-weight: 800;
        font-size: 0.85rem;
    }

    .stmt-balance .value {
        font-weight: 900;
        font-size: 0.95rem;
        color: #111827;
    }

/* Select checkbox area */
.stmt-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: #374151;
    white-space: nowrap;
}

@media (max-width: 380px) {
    .stmt-kv {
        grid-template-columns: 95px 1fr;
    }
}
/* =========================================================
   Order Tracking - OrderDetails (extracted from OrderDetails.razor)
   ========================================================= */

/* Scope to this page so nothing else changes */
.order-page-wrapper {
    padding-bottom: 2rem;
}

/* ===== Header panel (match SelectOrder search slab) ===== */
.order-header-panel {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 18px 22px 20px;
    margin: 20px 0 20px;
}

    .order-header-panel .section-title {
        font-weight: 700;
        margin-bottom: 10px;
        color: #111827;
        font-size: 1rem;
    }

.order-header-grid {
    display: flex;
    flex-wrap: wrap;
    column-gap: 40px;
    row-gap: 8px;
    font-size: 0.9rem;
}

.order-header-block {
    min-width: 240px;
}

.oh-row {
    display: flex;
    gap: 6px;
    align-items: baseline;
    margin-bottom: 2px;
}

.oh-label {
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    font-size: 15px;
}

.oh-value {
    color: #111827;
}

@media (max-width: 767.98px) {
    .order-header-grid {
        flex-direction: column;
    }

    .order-header-block {
        min-width: 100%;
    }
}

/* Align Order No with Sold To row */
.order-meta-block {
    padding-top: 6px;
    padding: 10px 12px;
}

@media (max-width: 767.98px) {
    .order-meta-block {
        padding-top: 0;
        padding: 10px 12px;
    }
}

/* Address blocks */
.address-block {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
    border-radius: 4px;
}
.address-lines {
    display: block;
}

.address-line {
    display: block;
    max-width: 25ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 767.98px) {
    .address-block {
        margin-top: 8px;
    }
}

/* ===== Section cards ===== */
.order-section-card {
    border-radius: 0;
    border: 1px solid #d1d5db;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
}

    /* IMPORTANT: header uses --aw-section now */
    .order-section-card .card-header {
        background-color: var(--aw-section);
        color: var(--aw-section-ink);
        font-weight: 600;
        padding: 0.45rem 0.9rem;
        font-size: 0.95rem;
        border-bottom: 1px solid #e5e7eb;
    }

    .order-section-card .card-body {
        padding: 0.75rem;
    }

/* ===== List-view table (like ProductSelection) ===== */
.list-view-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
    margin-bottom: 0;
}

    .list-view-table thead th {
        background-color: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        font-weight: 600;
        font-size: 0.84rem;
        padding: 0.35rem 0.5rem;
        white-space: nowrap;
    }

    .list-view-table tbody tr td {
        padding: 0.35rem 0.5rem;
        vertical-align: middle;
        border-top: none !important;
    }

    .list-view-table tbody tr:nth-child(odd) {
        background-color: #ffffff;
    }

    .list-view-table tbody tr:nth-child(even) {
        background-color: #f3f4f6;
    }

.numeric {
    text-align: right;
}

/* ===== Reorder link + back button ===== */
.reorder-link {
    text-align: center;
    margin: 1rem 0 1.5rem;
    font-size: 0.95rem;
}

    .reorder-link a {
        text-decoration: underline;
        cursor: pointer;
        font-weight: 600;
        color: #1d4ed8;
    }

        .reorder-link a:hover {
            color: #1e40af;
        }

.back-btn-wrapper {
    text-align: center;
    margin-top: 1.5rem;
}

    .back-btn-wrapper .btn {
        min-width: 180px;
    }

/* Mobile cards for items */
.mobile-card .card-body {
    padding: 0.75rem;
    font-size: 0.875rem;
}

.mobile-card .card-title {
    margin-bottom: 0.35rem;
}

/* ===== Order action buttons (desktop + mobile) ===== */
.order-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 12px 0 18px;
}

@media (max-width: 575.98px) {
    .order-actions {
        grid-template-columns: 1fr;
    }
}

.order-action-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    border: 1px solid #d1d5db;
    background: #ffffff;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

    .order-action-btn:hover {
        background-color: #f9fafb;
        box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
    }

    .order-action-btn:active {
        transform: translateY(1px);
    }

.order-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef2f7;
    color: #1f2937;
    flex: 0 0 auto;
}

    .order-action-icon svg {
        width: 22px;
        height: 22px;
    }

.order-action-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.order-action-title {
    font-weight: 700;
    color: #111827;
    font-size: 0.95rem;
}

.order-action-sub {
    color: #6b7280;
    font-size: 0.85rem;
    margin-top: 2px;
}

.order-action-error {
    grid-column: 1 / -1;
    color: #b91c1c;
    font-weight: 600;
    font-size: 0.85rem;
    margin-top: -4px;
}

/* ===== Shipment mobile cards ===== */
.ship-m-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ship-m-title {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.ship-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f9fafb;
    font-size: 0.78rem;
    font-weight: 700;
    color: #111827;
}

.ship-kv {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 6px 10px;
    font-size: 0.9rem;
}

.ship-k {
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
}

.ship-v {
    color: #111827;
    min-width: 0;
    word-break: break-word;
}

@media (max-width: 380px) {
    .ship-kv {
        grid-template-columns: 105px 1fr;
    }
}

/* ===== XS Shipment Table (match list-view-table look) ===== */
.ship-xs-table {
    font-size: 0.85rem;
}

    .ship-xs-table thead th,
    .ship-xs-table tbody td {
        padding: 0.35rem 0.45rem;
    }

    .ship-xs-table .ship-desc {
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ship-xs-table .ship-lr,
    .ship-xs-table .ship-part {
        white-space: nowrap;
    }

    .ship-xs-table .ship-qty {
        text-align: right;
        white-space: nowrap;
    }

    .ship-xs-table thead th.qty-col {
        text-align: right;
    }

    /* Force Qty column alignment (header + body) */
    .ship-xs-table th.qty-col,
    .ship-xs-table td.ship-qty {
        text-align: right !important;
    }

.ship-lr {
    color: #111827;
}

.ship-part {
    color: #111827;
}

.ship-desc {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #374151;
}

.ship-qty {
    font-weight: 900;
    color: #111827;
}

@media (max-width: 360px) {
    .ship-xs-table {
        font-size: 0.8rem;
    }
}

/* ===== Order Lines mobile cards: label/value + detail table ===== */
.ol-m-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ol-kv {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 6px 10px;
    font-size: 0.9rem;
}

.ol-k {
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
}

.ol-v {
    color: #111827;
    min-width: 0;
    word-break: break-word;
}

@media (max-width: 380px) {
    .ol-kv {
        grid-template-columns: 105px 1fr;
    }
}

/* Order-lines XS table tweaks */
.ol-xs-table {
    font-size: 0.85rem;
}

    .ol-xs-table thead th,
    .ol-xs-table tbody td {
        padding: 0.35rem 0.45rem;
        white-space: nowrap;
        text-align: center;
    }

    .ol-xs-table .qty-col {
        text-align: right;
    }

    .ol-xs-table td.ol-qty {
        text-align: right !important;
        font-weight: 900;
        color: #111827;
    }

    .ol-xs-table thead th:nth-child(-n+3) {
        text-align: right;
    }

/* NOTE: You currently have this in the page.
   I’m leaving it here because you used it, but it affects ALL pages at <=992px.
   If you want it scoped to OrderDetails ONLY, tell me and I’ll rewrite it safely. */
@media (max-width: 992px) {
    .page-shell {
        max-width: 100%;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

/* =========================================================
   Order Tracking - SelectOrder (extracted from SelectOrder.razor)
   ========================================================= */

/* ===== Search panel (grey slab) ===== */
.search-panel {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 18px 22px 20px;
    margin: 20px 0 20px;
}

    .search-panel .section-title {
        font-weight: 700;
        margin-bottom: 10px;
        color: #111827;
    }

/* ===== Layout helpers from earlier iterations ===== */
.search-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.search-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 260px;
    padding-right: 20px;
    border-right: 1px solid #d7dbde;
}

.search-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .search-row label {
        margin: 0;
        width: 90px;
        font-weight: 600;
        font-size: 0.95rem;
        color: #374151;
        white-space: nowrap;
        text-align: left;
    }

    .search-row .form-control,
    .search-row .form-select {
        flex: 1 1 auto;
        max-width: 230px;
        height: 36px;
        font-size: 0.95rem;
    }

.search-right {
    flex: 1 1 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 540px;
}

.sr-row {
    display: flex;
    align-items: center;
    gap: 32px;
}

    .sr-row > .field-inline {
        flex: 1 1 0;
    }

.field-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

    .field-inline label {
        margin: 0;
        width: 110px;
        font-weight: 600;
        font-size: 0.95rem;
        color: #374151;
        white-space: nowrap;
        text-align: right;
    }

    .field-inline .form-control {
        flex: 1 1 auto;
        max-width: 260px;
        height: 36px;
        font-size: 0.95rem;
        line-height: 1.1;
    }

.sr-row-actions {
    justify-content: flex-end;
}

    .sr-row-actions .btn {
        height: 36px;
        padding: 0 18px;
    }

/* =========================
   Mobile: collapsible filter header (XS only)
   ========================= */
@media (max-width: 576px) {
    .ot-filters-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        padding: 12px 12px;
        margin: 16px 0 10px;
        text-align: left;
    }

    .ot-filters-toggle-left {
        display: flex;
        align-items: baseline;
        gap: 10px;
        min-width: 0;
    }

    .ot-filters-title {
        font-weight: 800;
        color: #111827;
        white-space: nowrap;
    }

    .ot-filters-hint {
        font-size: .85rem;
        color: #6b7280;
        white-space: nowrap;
    }

    .ot-filters-badge {
        font-size: .8rem;
        font-weight: 700;
        color: #1f2937;
        background: #e5e7eb;
        padding: 2px 8px;
        border-radius: 999px;
        white-space: nowrap;
    }

    .ot-filters-chevron {
        font-size: 18px;
        line-height: 1;
        opacity: .8;
        margin-left: 10px;
    }

    /* Hide the panel when collapsed */
    .ot-filters.is-closed .ot-filters-body {
        display: none;
    }

    /* When open, keep spacing tight */
    .ot-filters.is-open .search-panel {
        margin-top: 0;
    }
}

/* ===== Results table ===== */
.ot-table {
    width: 100%;
    border: 1px solid #e3e6e8;
    border-collapse: collapse;
    margin-bottom: 10px;
    background: #ffffff;
}

/* Hard override any “sticky header” tbody rules for the order grid */
table.ot-table > tbody {
    display: table-row-group !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

.ot-table thead th {
    background: #f6f8f9;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #eef1f3;
    white-space: nowrap;
}

.ot-table th,
.ot-table td {
    padding: 0.45rem 0.75rem;
    font-size: 0.95rem;
    vertical-align: middle;
}

.ot-table tbody tr:hover {
    background: #fbfcfd;
}

/* ===== Pager ===== */
.pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: .9rem;
}

.pager-text {
    min-width: 110px;
    text-align: center;
}

/* More hard overrides (kept as-is from page) */
.table-responsive table.ot-table,
table.ot-table {
    display: table !important;
}

    .table-responsive table.ot-table > tbody,
    table.ot-table > tbody {
        display: table-row-group !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

/* NOTE: your original CSS had conflicting display rules (row vs cell).
   These are preserved safely by *not* forcing tr/th/td to "table-row/table-cell" in a broken way. */

/* Alternating rows */
.ot-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.ot-table tbody tr:nth-child(even) {
    background-color: #f3f4f6;
}

.ot-table tbody tr:hover {
    background-color: #e8e9ec;
}

.ot-table tbody tr.clickable-row {
    cursor: pointer;
}

    .ot-table tbody tr.clickable-row:hover {
        background-color: #e8e9ec;
    }

/* ===== Responsive order grid ===== */
@media (max-width: 576px) {
    .ot-table th,
    .ot-table td {
        padding: 0.35rem 0.45rem;
        font-size: 0.85rem;
    }

    /* hide PO + Date on xs (keep essentials) */
    .ot-table [data-col="po"],
    .ot-table [data-col="date"] {
        display: none;
    }

    /* keep Amount readable, but don’t waste space */
    .ot-table [data-col="amount"] {
        width: 1%;
        white-space: nowrap;
    }

    /* download column smaller */
    .ot-table [data-col="dl"] {
        width: 34px;
        white-space: nowrap;
    }
}

/* =========================
   XS / Mobile table density tuning (kept)
   ========================= */
@media (max-width: 576px) {
    .ot-table th,
    .ot-table td {
        font-size: 0.78rem;
        padding: 0.28rem 0.4rem;
        line-height: 1.15;
    }

    .ot-table thead th {
        font-size: 0.75rem;
        font-weight: 700;
    }

    .ot-table td[data-col="amount"],
    .ot-table th[data-col="amount"] {
        white-space: nowrap;
        font-size: 0.78rem;
    }

    .ot-table td[data-col="status"] {
        max-width: 90px;
        white-space: normal;
        line-height: 1.1;
    }

    .ot-table td[data-col="dl"],
    .ot-table th[data-col="dl"] {
        width: 28px;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

        .ot-table th[data-col="dl"] img,
        .ot-table td[data-col="dl"] img {
            width: 14px;
            height: 14px;
        }

    .ot-table tbody tr:hover {
        background-color: inherit;
    }
}

/* =========================
   Mobile: tighten pills + enable the 2-col filter grid
   ========================= */
@media (max-width: 991.98px) {
    .apps-pill,
    .pages-pill {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
        letter-spacing: 0.02em;
    }

        .apps-pill span,
        .pages-pill span {
            font-size: 0.75rem;
        }

        .apps-pill svg,
        .pages-pill svg {
            width: 14px;
            height: 14px;
        }

    .apps-cell .d-flex {
        gap: 6px;
    }

    .ot-table tbody tr.clickable-row {
        height: 40px;
    }

    .search-panel {
        padding: 12px 12px 14px;
    }

    /* 2-col grid always on mobile */
    .ot-search-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin: 0;
    }

        /* flatten bootstrap structure into the grid */
        .ot-search-grid > .col-3,
        .ot-search-grid > .col-9,
        .ot-search-grid .row,
        .ot-search-grid .col,
        .ot-search-grid .col-auto,
        .ot-search-grid [class*="col-"] {
            display: contents !important;
        }

        /* each stacked-input becomes a grid item */
        .ot-search-grid .stacked-input {
            margin: 0 !important;
        }

        /* full width controls inside each grid cell */
        .ot-search-grid .stacked-input-control {
            width: 100% !important;
        }

    /* --- GRID PLACEMENT (your screenshot layout) --- */
    .otf-start {
        grid-column: 1;
        grid-row: 1;
    }

    .otf-sales {
        grid-column: 2;
        grid-row: 1;
    }

    .otf-end {
        grid-column: 1;
        grid-row: 2;
    }

    .otf-po {
        grid-column: 2;
        grid-row: 2;
    }

    .otf-status {
        grid-column: 1;
        grid-row: 3;
    }

    .otf-inv {
        grid-column: 2;
        grid-row: 3;
    }

    .otf-part {
        grid-column: 1;
        grid-row: 4;
    }

    .otf-reset {
        grid-column: 2;
        grid-row: 4;
        padding: 0px;
    }

    /* Reset button same "field" height + full width */
    .ot-reset-btn {
        justify-self: start;
        height: 48px;
        padding: 0 18px;
    }
}

/* Make select dropdown arrow obvious */
.stacked-input-control.form-select {
    appearance: auto;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}