/* Shared responsive sizing for grids used by all WMS modules. */
.wms-dashboard {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Flex items otherwise keep the grid's intrinsic width and overflow the
   terminal-sized application shell. */
.wms-dashboard > *,
.wms-dashboard .flex-grow-1,
.wms-dashboard .overflow-auto {
    min-width: 0;
    max-width: 100%;
}

.wms-dashboard > .flex-grow-1 {
    width: 100%;
}

.min-height-0 {
    min-height: 0 !important;
}

.wms-touch-grid {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto;
}

/* Use the same field-aligned summary presentation in Admin and Mobile grids. */
.wms-touch-grid .dxbl-grid-footer-row {
    color: #432273;
    background: #f0edf5;
    font-weight: 800;
}

.wms-touch-grid .dxbl-grid-footer-row > td {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    background: inherit;
    border-top: 2px solid #d8cfea;
    white-space: nowrap;
}

/* Keep horizontal scrolling easy to grab on every Admin Menu form without
   increasing the width of vertical scrollbars. */
.tanim-layout-page *::-webkit-scrollbar {
    height: 20px;
}

.tanim-layout-page *::-webkit-scrollbar-track:horizontal {
    background: #e6e9ed;
    border-top: 1px solid #cbd1d8;
}

.tanim-layout-page *::-webkit-scrollbar-thumb:horizontal {
    min-width: 72px;
    background: #646b73;
    border: 4px solid #e6e9ed;
    border-radius: 999px;
}

.tanim-layout-page *::-webkit-scrollbar-thumb:horizontal:hover {
    background: #414850;
}

.wms-virtual-grid {
    height: 100%;
    min-height: 220px;
}

/* Full-page grid standard: the layout owns the viewport and the grid owns
   vertical/horizontal scrolling. Toolbars and column headers stay visible. */
.wms-viewport-grid-layout {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0 !important;
    overflow: hidden;
}

.page:has(> main.wms-viewport-grid-layout) {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.wms-viewport-grid-layout > .top-row {
    flex: 0 0 auto;
}

.wms-viewport-grid-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

.wms-viewport-grid-page {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    height: 100% !important;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.wms-mobile-layout-wrapper .wms-viewport-grid-page {
    align-items: stretch;
    padding: 0 !important;
}

/* Mobile transaction forms use one height owner. Keeping the action bar in
   the page flow lets the grid consume every remaining pixel and places its
   summary footer immediately above the actions on every screen height. */
.wms-viewport-grid-page > .wms-action-bar {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto;
    width: 100% !important;
    margin-top: 0;
    transform: none !important;
}

.wms-mobile-layout-wrapper .wms-viewport-grid-page > .wms-action-bar {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Keep mobile grid content flush with the page chrome. Individual controls
   already provide their own spacing, so page-level padding only costs rows. */
.wms-mobile-layout-wrapper .wms-viewport-grid-page > .flex-grow-1 {
    padding-top: 4px !important;
    padding-bottom: 0 !important;
}

.wms-viewport-grid-page > .wms-tabs {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.wms-viewport-grid-page > .wms-tabs > .dxbl-tabs-content-panel {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
}

.wms-viewport-grid-page > .wms-tabs [role="tabpanel"] {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.wms-viewport-grid-page .wms-virtual-grid {
    min-height: 0;
}

/* Mobile list standard: the grid frame owns all remaining page height.
   DevExpress keeps its footer at the bottom of this constrained area, so the
   summary bar stays immediately above the form action buttons on every
   screen size instead of following the last data row. */
.wms-mobile-layout-wrapper .wms-viewport-grid-page .wms-mobile-grid-frame {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    min-width: 0;
    min-height: 0;
    overflow: hidden !important;
}

.wms-mobile-layout-wrapper .wms-viewport-grid-page .wms-mobile-grid-frame > .wms-touch-grid {
    flex: 1 1 auto;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

.wms-mobile-layout-wrapper .wms-viewport-grid-page .wms-mobile-grid-panel {
    min-height: 0;
    padding-bottom: 0 !important;
    overflow: hidden;
}

.wms-mobile-layout-wrapper .wms-viewport-grid-page .wms-touch-grid .dxbl-grid-footer-row > td {
    padding-top: 4px;
    padding-bottom: 4px;
}

.wms-mobile-layout-wrapper .wms-touch-grid .wms-mobile-grid-summary-list {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    width: 100%;
    color: inherit;
    line-height: 1.2;
}

.wms-mobile-layout-wrapper .wms-touch-grid .wms-mobile-grid-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.wms-mobile-layout-wrapper .wms-touch-grid .wms-mobile-grid-summary > i {
    flex: 0 0 auto;
    font-size: 1rem;
}

.wms-mobile-layout-wrapper .wms-touch-grid .wms-mobile-grid-summary-value {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* DevExpress renders popups under body, outside .wms-dashboard. Their grid
   hosts must therefore receive the same shrink and overflow behavior. */
.dxbl-popup .wms-touch-grid,
.dxbl-popup .flex-grow-1,
.dxbl-popup .overflow-auto {
    min-width: 0;
    max-width: 100%;
}

/* DevExpress context menus are rendered under body, outside component-scoped CSS. */
.wms-record-context-menu {
    min-width: 250px !important;
    overflow: hidden !important;
    padding: .4rem !important;
    background: #fff !important;
    border: 1px solid #ded4ea !important;
    border-radius: .7rem !important;
    box-shadow: 0 14px 34px rgba(31, 19, 49, .24) !important;
}

.wms-record-context-menu [role="menuitem"] {
    min-height: 44px !important;
    margin: .12rem 0 !important;
    padding: .6rem .8rem !important;
    color: #172b4d !important;
    border-radius: .45rem !important;
    font-weight: 700 !important;
}

.wms-record-context-menu [role="menuitem"]:hover,
.wms-record-context-menu [role="menuitem"]:focus {
    color: #5f2f92 !important;
    background: #f3edf9 !important;
}

.wms-record-context-menu [role="menuitem"]:has(.bi-trash3) {
    color: #c6283d !important;
}

.wms-record-context-menu [role="menuitem"]:has(.bi-trash3):hover,
.wms-record-context-menu [role="menuitem"]:has(.bi-trash3):focus {
    color: #a61f32 !important;
    background: #fff0f2 !important;
}

.wms-shell-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 12px;
}

.wms-shell-overlay-front {
    z-index: 2600;
}

.wms-shell-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
}

.wms-shell-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(100%, 480px);
    height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.25);
}

/* app.css gives dashboard containers centered children and inner padding.
   Shell popups must keep their header, body and footer at full width. */
.wms-shell-panel.wms-dashboard {
    align-items: stretch;
    padding: 0;
}

.wms-shell-panel.wms-dashboard > .wms-shell-header,
.wms-shell-panel.wms-dashboard > .wms-shell-body,
.wms-shell-panel.wms-dashboard > .wms-shell-footer {
    width: 100%;
    align-self: stretch;
}

.wms-shell-header {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    min-height: 52px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #ffffff;
    border-bottom: 1px solid #d6d5d5;
}

.wms-shell-header h5 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1a365d;
}

.wms-shell-header-primary {
    color: #ffffff;
    background: #663a96;
    border-bottom-color: #663a96;
}

.wms-shell-header-primary h5 {
    color: #ffffff;
}

.wms-shell-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    overflow: hidden;
}

.wms-shell-footer {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    padding: 10px 14px;
    background: #ffffff;
    border-top: 1px solid #e0e0e0;
}

.wms-shell-body .wms-touch-grid,
.wms-shell-body .multi-siparis-grid-wrap,
.wms-shell-body .multi-siparis-detail-grid-wrap,
.wms-shell-body .siparis-eslestirme-grid-wrap {
    min-width: 0;
    max-width: 100%;
}

.wms-shell-footer .wms-popup-footer,
.wms-shell-footer .wms-popup-footer > div,
.wms-shell-footer .wms-popup-footer-actions {
    min-width: 0;
    max-width: 100%;
}

.wms-shell-footer .wms-popup-footer-actions {
    flex: 1 1 240px;
}

.wms-shell-footer .btn {
    min-width: 0;
    white-space: nowrap;
}

/* DxPopup is rendered outside the page shell. These shared classes keep
   transaction popups aligned with the same mobile application frame. */
.wms-app-shell-width-popup {
    width: min(480px, calc(100vw - 24px)) !important;
    max-width: 480px !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.wms-app-shell-popup {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    width: min(480px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
}

.wms-app-shell-popup-body {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    overflow: auto;
}

.wms-app-shell-popup-footer {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.wms-label-print-popup {
    position: fixed !important;
    margin: 0 !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: min(720px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
}

.wms-label-print-popup.wms-packing-list-print-popup {
    width: calc(100vw - 24px) !important;
}

.wms-label-print-popup-body {
    min-width: 0;
    min-height: 0;
    overflow: hidden !important;
}

.wms-label-print-popup-header {
    min-height: 54px;
    background: #fff;
    color: #102a43;
    font-size: 1.1rem;
    font-weight: 800;
    text-align: center;
}

.wms-label-print-popup-footer {
    width: 100%;
    min-width: 0;
    padding: 9px 12px !important;
    border-top: 1px solid #d9deea;
    background: #fff;
}

@media (max-width: 576px) {
    .wms-app-shell-width-popup {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .wms-shell-overlay {
        padding: 0;
    }

    .wms-shell-panel {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .wms-app-shell-popup {
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    .wms-label-print-popup,
    .wms-label-print-popup.wms-packing-list-print-popup {
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }
}
/* Opt-in project selection palette; headers, filter rows and other grids stay unchanged. */
.wms-yellow-selection .dxbl-grid-table tr.dxbl-grid-selected-row,
.wms-yellow-selection .dxbl-grid-table tr.dxbl-grid-selected-row > td,
.wms-yellow-selection .dxbl-grid-table tr.dxbl-grid-selected-row > th {
    color: #332b00 !important;
    background-color: #fff3a6 !important;
    font-weight: 700;
}

.wms-yellow-selection .dxbl-grid-table tr.dxbl-grid-selected-row > td,
.wms-yellow-selection .dxbl-grid-table tr.dxbl-grid-selected-row > th {
    border-color: #ead577 !important;
}