/* ===== GLOBAL DEVEXTREME DATA GRID ===== */

/* Sticky headers */
.dx-datagrid .dx-datagrid-headers {
    position: sticky !important;
    top: 0;
    z-index: 10;
    background-color: var(--bg-card, #fff);
}

[data-theme="dark"] .dx-datagrid .dx-datagrid-headers {
    background-color: var(--bg-card, #1e1e24);
}

.dx-datagrid .dx-datagrid-filter-row {
    position: sticky !important;
    top: 36px;
    z-index: 9;
    background-color: var(--bg-card, #fff);
}

[data-theme="dark"] .dx-datagrid .dx-datagrid-filter-row {
    background-color: var(--bg-card, #1e1e24);
}

/* Let sticky DataGrid headers escape the DevExtreme drawer content wrapper.
   Sticky is disabled by any ancestor with overflow != visible. */
#appDrawer .dx-drawer-wrapper,
#appDrawer .dx-drawer-content {
    overflow: visible;
}

/* Highlights the group header row on mouse hover */
.dx-datagrid-rowsview .dx-group-row:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    cursor: pointer;
}

/* ===== BATTERY CHECK POPUP (shared: Parakatathikes, newGuarrantee) ===== */
.battery-popup-error {
    color: #dc2626;
    margin-top: 8px;
    font-size: 13px;
}

.battery-popup-body {
    padding: 10px;
    max-height: 70vh;
    overflow-y: auto;
}

.battery-popup-footer {
    padding: 10px 12px;
    text-align: right;
    border-top: 1px solid var(--border-color, var(--border));
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 0;
}

.battery-popup-fieldset {
    margin: 0;
    padding: 0;
}

/* ===== GLOBAL DEVEXTREME POPUP — MOBILE ===== */
/* Shell sizing is handled by devx-popup-mobile.js via fullScreen on phones */

/* ===== FULLSCREEN MOBILE POPUP SHELL =====
   DevExtreme moves the popup wrapper to the page body, so selectors written as
   "#my-popup ..." never match while the popup is open. JS tags the wrapper with
   .devx-mobile-popup and sets --devx-vv-* from visualViewport.
   Wrapper = fullscreen shade. Overlay content = visible panel (keeps footer on-screen). */
.devx-mobile-popup {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.devx-mobile-popup > .dx-overlay-content {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: var(--devx-vv-top, 0px) !important;
    left: var(--devx-vv-left, 0px) !important;
    width: min(var(--devx-vv-width, 100%), 100%) !important;
    /* min() against the wrapper: the visible viewport keeps the footer on screen,
       100% keeps the panel inside the shade, which clips at overflow: hidden. */
    height: min(var(--devx-vv-height, 100%), 100%) !important;
    max-width: min(var(--devx-vv-width, 100%), 100%) !important;
    max-height: min(var(--devx-vv-height, 100%), 100%) !important;
    overflow: hidden !important;
    box-sizing: border-box;
    transform: none !important;
    margin: 0 !important;
}

.devx-mobile-popup .dx-popup-title {
    flex-shrink: 0;
}

.devx-mobile-popup .dx-popup-content,
.devx-mobile-popup .dx-popup-content-scrollable {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Popups that wrap body + footer in a shell div still need one flex column. */
.devx-mobile-popup .dx-popup-content > [class*="popup-shell"] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}

/* Fallback for popups whose content is a single unnamed block */
.devx-mobile-popup .dx-popup-content > *:only-child:not([class*="popup-shell"]) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* The single scroll surface */
.devx-mobile-popup [class*="popup-body"] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.devx-mobile-popup .home-news-video-popup-body {
    overflow: hidden !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    background: #000;
}

.devx-mobile-popup .books-diagram-popup-body {
    overflow: auto !important;
    overflow-x: auto !important;
    padding: 4px 8px 8px;
}

.devx-mobile-popup .home-news-video-frame {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
    height: 100%;
}

/* Always on screen, above the phone's home indicator */
.devx-mobile-popup [class*="popup-footer"] {
    display: flex;
    flex-shrink: 0 !important;
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 6px;
    padding: 6px 8px;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
}

.devx-mobile-popup [class*="popup-footer"] .dx-button {
    flex: 1 1 auto;
    min-width: 0;
}

/* Landscape phone: thin title/footer so the body keeps most of the height */
@media (orientation: landscape) and (max-height: 500px) {
    .devx-mobile-popup .dx-popup-title {
        min-height: 32px;
        padding: 2px 8px;
    }

    .devx-mobile-popup [class*="popup-footer"] {
        padding: 4px 8px;
        padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
        gap: 4px;
    }
}

/* Phones in portrait (narrow) or landscape (short + touch) */
@media (max-width: 576px), (hover: none) and (pointer: coarse) and (max-height: 700px), (orientation: landscape) and (max-height: 500px) {
    .dx-popup-content .dx-field {
        flex-wrap: wrap;
    }

    .dx-popup-content .dx-field-label,
    .dx-popup-content .dx-field-value {
        width: 100% !important;
        padding-left: 0;
        padding-right: 0;
    }

    .dx-popup-content .dx-field-label {
        margin-bottom: 4px;
    }

    .dx-popup-content .dx-textbox,
    .dx-popup-content .dx-selectbox,
    .dx-popup-content .dx-textarea,
    .dx-popup-content .dx-numberbox,
    .dx-popup-content .dx-datebox,
    .dx-popup-content .dx-fileuploader {
        width: 100% !important;
        max-width: 100% !important;
    }

    .dx-popup-content .dx-datagrid {
        max-width: 100%;
    }

    .dx-popup-content .order-popup-actions,
    .dx-popup-content .dx-popup-bottom,
    .dx-popup-content .dx-toolbar {
        flex-wrap: wrap;
        justify-content: stretch;
        gap: 8px;
    }

    .dx-popup-content .order-popup-actions .dx-button,
    .dx-popup-content .dx-popup-bottom .dx-button {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* --- DataGrid search panel: compact fixed width on phone --- */
    .dx-datagrid-search-panel {
        width: 100px !important;
        max-width: 100px !important;
        min-width: 0 !important;
        flex: 0 0 auto;
    }

    .dx-datagrid-search-panel .dx-texteditor,
    .dx-datagrid-search-panel .dx-texteditor-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .dx-datagrid-search-panel .dx-texteditor-input {
        font-size: 12px !important;
        min-height: 28px;
        padding: 4px 8px !important;
        padding-left: 8px !important;
    }

    .dx-datagrid-search-panel .dx-placeholder::before {
        font-size: 12px;
    }

    .dx-datagrid-search-panel .dx-icon-search,
    .dx-datagrid-search-panel .dx-texteditor-buttons-container {
        display: none !important;
    }

    .dx-datagrid-column-chooser,
    .dx-datagrid-column-chooser.dx-overlay-wrapper {
        z-index: 1502 !important;
    }

    .dx-datagrid-column-chooser .dx-overlay-shader {
        z-index: 1;
    }

    /* After the first fullscreen open, DX keeps toolbar-button top/left so the
       2nd open shows the shade with the panel off-screen. Pin to the viewport. */
    .dx-datagrid-column-chooser .dx-overlay-content {
        z-index: 2 !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        transform: none !important;
        margin: 0 !important;
    }

    .dx-datagrid-column-chooser .dx-popup-content {
        max-height: none;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dx-datagrid-column-chooser-list {
        max-height: none;
    }

    /* ===== PARTIDA HISTORY POPUP (_PartidaHistoryPopup) ===== */
    #partida-history-popup .dx-popup-content,
    #manage-popup .dx-popup-content,
    #paralavi-popup .dx-popup-content,
    #timol-popup .dx-popup-content,
    #crc-popup .dx-popup-content {
        overflow: hidden;
        max-height: calc(100vh - 48px);
        display: flex;
        flex-direction: column;
    }

    #partida-history-popup .partida-history-popup-body,
    #manage-popup .manage-popup-body,
    #paralavi-popup .parak-popup-body,
    #timol-popup .parak-popup-body,
    #crc-popup .crc-popup-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 8px 4px;
    }

    #manage-popup .manage-popup-body {
        padding: 10px;
    }

    #partida-history-popup.dx-popup-wrapper,
    #partida-history-popup .dx-overlay-content {
        max-width: 100vw !important;
        box-sizing: border-box;
    }

    .partida-history-popup-body {
        max-width: 100%;
        overflow-x: hidden;
    }

    #partida-history-grid,
    #partida-history-grid .dx-datagrid {
        width: 100% !important;
        max-width: 100% !important;
    }

    #partida-history-grid .dx-datagrid-headers .dx-datagrid-text-content {
        white-space: normal;
        line-height: 1.25;
        font-size: 11px;
    }

    #partida-history-grid .dx-datagrid-rowsview .dx-row > td {
        font-size: 12px;
    }

    /* ===== MANAGE ORDER POPUP (BackorderAntal) ===== */
    #manage-popup #manage-row-summary {
        font-size: 12px;
        line-height: 1.5;
    }

    #manage-popup.dx-popup-wrapper,
    #manage-popup .dx-overlay-content {
        max-width: 100vw !important;
        box-sizing: border-box;
    }

    .manage-popup-body {
        max-width: 100%;
        overflow-x: hidden;
    }

    #manage-popup #manage-action-select,
    #manage-popup .dx-selectbox {
        max-width: 100%;
    }

    /* ===== PARALAVI / TIMOL POPUPS (Parakatathikes) ===== */
    #paralavi-popup.dx-popup-wrapper,
    #paralavi-popup .dx-overlay-content,
    #timol-popup.dx-popup-wrapper,
    #timol-popup .dx-overlay-content,
    #crc-popup.dx-popup-wrapper,
    #crc-popup .dx-overlay-content {
        max-width: 100vw !important;
        box-sizing: border-box;
    }

    #paralavi-popup .parak-popup-body,
    #timol-popup .parak-popup-body,
    #crc-popup .crc-popup-body {
        max-width: 100%;
        overflow-x: hidden;
        padding: 10px;
    }

    #paralavi-popup .parak-popup-footer,
    #timol-popup .parak-popup-footer,
    #crc-popup .crc-popup-footer {
        flex-shrink: 0;
        flex-wrap: wrap;
        justify-content: stretch;
    }

    #paralavi-popup .parak-popup-footer .dx-button,
    #timol-popup .parak-popup-footer .dx-button,
    #crc-popup .crc-popup-footer .dx-button {
        flex: 1 1 auto;
        min-width: 0;
    }

    #timol-popup #timol-antik-select,
    #timol-popup .dx-selectbox {
        max-width: 100%;
    }

    #timol-replacement-grid,
    #timol-replacement-grid > .dx-widget,
    #timol-replacement-grid .dx-datagrid {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }

    /* One vertical scroll (popup body); allow light horizontal if needed */
    #timol-replacement-grid .dx-datagrid-rowsview,
    #timol-replacement-grid .dx-datagrid-content,
    #timol-replacement-grid .dx-scrollable-wrapper,
    #timol-replacement-grid .dx-scrollable-container,
    #timol-replacement-grid .dx-scrollable-content {
        height: auto !important;
        max-height: none !important;
    }

    #timol-replacement-grid .dx-datagrid-rowsview,
    #timol-replacement-grid .dx-scrollable-container {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    #timol-replacement-grid .dx-scrollbar-vertical {
        display: none !important;
    }

    #timol-replacement-grid .dx-datagrid-headers .dx-datagrid-text-content {
        white-space: normal;
        line-height: 1.2;
        font-size: 11px;
    }

    #timol-replacement-grid .dx-datagrid-headers .dx-row > td,
    #timol-replacement-grid .dx-datagrid-rowsview .dx-row > td {
        padding: 4px 4px;
        font-size: 11px;
        vertical-align: middle;
    }

    #timol-replacement-grid .dx-command-select {
        width: 36px !important;
        min-width: 36px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    #timol-replacement-grid .availability-pill {
        min-width: 0;
        max-width: 100%;
        width: auto;
        padding: 2px 6px;
        gap: 4px;
        flex-wrap: wrap;
        border-radius: 6px;
    }

    #timol-replacement-grid .availability-text {
        white-space: normal;
        line-height: 1.25;
        font-size: 10px;
        word-break: break-word;
    }

    #timol-replacement-panel > p {
        font-size: 12px;
        margin: 6px 0 4px;
    }

    /* ===== SHARED WIZARD POPUPS (activation / sparequar / newservice / battery / creditcard / admin-access) ===== */
    #activation-popup.dx-popup-wrapper,
    #activation-popup .dx-overlay-content,
    #sparequar-popup.dx-popup-wrapper,
    #sparequar-popup .dx-overlay-content,
    #newservice-popup.dx-popup-wrapper,
    #newservice-popup .dx-overlay-content,
    #battery-popup.dx-popup-wrapper,
    #battery-popup .dx-overlay-content,
    #crc-popup.dx-popup-wrapper,
    #crc-popup .dx-overlay-content,
    #admin-access-popup.dx-popup-wrapper,
    #admin-access-popup .dx-overlay-content,
    #password-popup.dx-popup-wrapper,
    #password-popup .dx-overlay-content,
    #home-news-video-popup.dx-popup-wrapper,
    #home-news-video-popup .dx-overlay-content,
    #booksDiagramZoomPopup.dx-popup-wrapper,
    #booksDiagramZoomPopup .dx-overlay-content {
        max-width: 100vw !important;
        box-sizing: border-box;
    }

    /* Fullscreen shell sizing lives in the .devx-mobile-popup block above; the
       wrapper is a child of <body>, so it cannot be reached by popup id. */

    #activation-popup .dx-overlay-content,
    #sparequar-popup .dx-overlay-content,
    #newservice-popup .dx-overlay-content,
    #battery-popup .dx-overlay-content,
    #crc-popup .dx-overlay-content,
    #admin-access-popup .dx-overlay-content,
    #password-popup .dx-overlay-content,
    #paralavi-popup .dx-overlay-content,
    #timol-popup .dx-overlay-content,
    #home-news-video-popup .dx-overlay-content,
    #booksDiagramZoomPopup .dx-overlay-content {
        display: flex !important;
        flex-direction: column !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        transform: none !important;
        margin: 0 !important;
    }

    #activation-popup .dx-popup-title,
    #sparequar-popup .dx-popup-title,
    #newservice-popup .dx-popup-title,
    #battery-popup .dx-popup-title,
    #crc-popup .dx-popup-title,
    #admin-access-popup .dx-popup-title,
    #password-popup .dx-popup-title,
    #home-news-video-popup .dx-popup-title,
    #booksDiagramZoomPopup .dx-popup-title {
        flex-shrink: 0;
        min-height: 36px;
        padding: 4px 8px;
    }

    /* Do not use height:auto here — that lets content grow past the overlay
       and creates a second, almost-empty outer scrollbar in landscape. */
    #activation-popup .dx-popup-content,
    #activation-popup .dx-popup-content-scrollable,
    #sparequar-popup .dx-popup-content,
    #sparequar-popup .dx-popup-content-scrollable,
    #newservice-popup .dx-popup-content,
    #newservice-popup .dx-popup-content-scrollable,
    #battery-popup .dx-popup-content,
    #battery-popup .dx-popup-content-scrollable,
    #crc-popup .dx-popup-content,
    #crc-popup .dx-popup-content-scrollable,
    #admin-access-popup .dx-popup-content,
    #admin-access-popup .dx-popup-content-scrollable,
    #password-popup .dx-popup-content,
    #password-popup .dx-popup-content-scrollable,
    #paralavi-popup .dx-popup-content,
    #paralavi-popup .dx-popup-content-scrollable,
    #timol-popup .dx-popup-content,
    #timol-popup .dx-popup-content-scrollable,
    #home-news-video-popup .dx-popup-content,
    #home-news-video-popup .dx-popup-content-scrollable,
    #booksDiagramZoomPopup .dx-popup-content,
    #booksDiagramZoomPopup .dx-popup-content-scrollable {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0;
    }

    #activation-popup .activation-popup-body,
    #sparequar-popup .activation-popup-body,
    #newservice-popup .activation-popup-body,
    #battery-popup .battery-popup-body,
    #crc-popup .crc-popup-body,
    #admin-access-popup .admin-access-popup-body,
    #password-popup .admin-password-popup-body,
    #paralavi-popup .parak-popup-body,
    #timol-popup .parak-popup-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 4px 8px 8px;
        overscroll-behavior: contain;
    }

    #home-news-video-popup .home-news-video-popup-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        overflow: hidden !important;
        padding: 0;
        display: flex;
        flex-direction: column;
        background: #000;
        overscroll-behavior: contain;
    }

    #booksDiagramZoomPopup .books-diagram-popup-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        overflow: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px 8px 8px;
        overscroll-behavior: contain;
    }

    #home-news-video-popup .home-news-video-frame {
        flex: 1 1 auto;
        min-height: 0;
        aspect-ratio: auto;
        height: 100%;
    }

    #activation-popup .activation-popup-footer,
    #sparequar-popup .activation-popup-footer,
    #newservice-popup .activation-popup-footer,
    #battery-popup .battery-popup-footer,
    #crc-popup .crc-popup-footer,
    #admin-access-popup .admin-access-popup-footer,
    #password-popup .admin-password-popup-footer,
    #paralavi-popup .parak-popup-footer,
    #timol-popup .parak-popup-footer {
        flex-shrink: 0;
        flex-wrap: wrap;
        justify-content: stretch;
        gap: 6px;
        padding: 6px 8px;
        padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
        text-align: right;
        border-top: 1px solid var(--border-color, var(--border));
    }

    #activation-popup .activation-popup-footer .dx-button,
    #sparequar-popup .activation-popup-footer .dx-button,
    #newservice-popup .activation-popup-footer .dx-button,
    #battery-popup .battery-popup-footer .dx-button,
    #crc-popup .crc-popup-footer .dx-button,
    #admin-access-popup .admin-access-popup-footer .dx-button,
    #password-popup .admin-password-popup-footer .dx-button {
        flex: 1 1 auto;
        min-width: 0;
    }

    #activation-popup .activation-popup-footer .dx-button-content,
    #sparequar-popup .activation-popup-footer .dx-button-content,
    #newservice-popup .activation-popup-footer .dx-button-content,
    #battery-popup .battery-popup-footer .dx-button-content,
    #crc-popup .crc-popup-footer .dx-button-content {
        font-size: 12px;
        padding: 4px 8px;
    }

    /* Compact stacked forms */
    #activation-popup .activation-form-grid,
    #sparequar-popup .activation-form-grid,
    #newservice-popup .activation-form-grid,
    #crc-popup .crc-form-grid {
        grid-template-columns: 1fr;
        gap: 2px 0;
        margin: 0;
    }

    #activation-popup .activation-form-grid label,
    #sparequar-popup .activation-form-grid label,
    #newservice-popup .activation-form-grid label,
    #crc-popup .crc-form-grid label {
        font-size: 12px;
        line-height: 1.3;
    }

    #activation-popup .activation-form-grid .dx-widget,
    #sparequar-popup .activation-form-grid .dx-widget,
    #newservice-popup .activation-form-grid .dx-widget,
    #crc-popup .crc-form-grid .dx-widget {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-self: stretch;
        box-sizing: border-box;
    }

    #activation-popup .dx-texteditor-input,
    #sparequar-popup .dx-texteditor-input,
    #newservice-popup .dx-texteditor-input,
    #battery-popup .dx-texteditor-input,
    #crc-popup .dx-texteditor-input {
        font-size: 13px;
        min-height: 30px;
        padding: 4px 8px;
    }

    #sparequar-popup .dx-textarea .dx-texteditor-input,
    #newservice-popup .dx-textarea .dx-texteditor-input,
    #battery-popup .dx-textarea .dx-texteditor-input {
        min-height: 48px;
    }

    #activation-popup .dx-radiobutton-label,
    #sparequar-popup .dx-radiobutton-label,
    #newservice-popup .dx-radiobutton-label,
    #battery-popup .dx-radiobutton-label {
        font-size: 12px;
        line-height: 1.3;
    }

    #activation-popup .activation-info-table td,
    #sparequar-popup .activation-info-table td,
    #newservice-popup .activation-info-table td {
        padding: 1px 6px 1px 0;
        font-size: 12px;
    }

    #activation-popup .activation-info-table td:first-child,
    #sparequar-popup .activation-info-table td:first-child,
    #newservice-popup .activation-info-table td:first-child {
        white-space: nowrap;
        padding-right: 12px;
    }

    #activation-popup .activation-info-table td:last-child,
    #sparequar-popup .activation-info-table td:last-child,
    #newservice-popup .activation-info-table td:last-child {
        word-break: break-word;
    }

    /* --- Activation-specific --- */
    #activation-popup #act-sn {
        word-break: break-all;
    }

    #activation-popup .activation-info-text,
    #activation-popup .activation-warning-text {
        font-size: 12px;
        line-height: 1.3;
        margin: 0 0 6px;
    }

    /* --- SpareQuar-specific --- */
    #sparequar-popup #sq-sn-code {
        word-break: break-all;
    }

    /* History grid must not create a second vertical scrollbar inside popup body */
    #sparequar-popup #sq-history-grid,
    #sparequar-popup #sq-history-grid > .dx-widget,
    #sparequar-popup #sq-history-grid .dx-datagrid,
    #sparequar-popup #sq-history-grid .dx-datagrid-rowsview,
    #sparequar-popup #sq-history-grid .dx-datagrid-content,
    #sparequar-popup #sq-history-grid .dx-scrollable-wrapper,
    #sparequar-popup #sq-history-grid .dx-scrollable-container,
    #sparequar-popup #sq-history-grid .dx-scrollable-content {
        height: auto !important;
        max-height: none !important;
    }

    #sparequar-popup #sq-history-grid .dx-datagrid-rowsview,
    #sparequar-popup #sq-history-grid .dx-scrollable-container {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    #sparequar-popup #sq-history-grid .dx-scrollbar-vertical {
        display: none !important;
    }

    /* --- NewService-specific --- */
    #newservice-popup #ns-sn-code {
        word-break: break-all;
    }

    /* History + consumables: no nested vertical scrollbar inside popup body */
    #newservice-popup #ns-history-grid,
    #newservice-popup #ns-history-grid > .dx-widget,
    #newservice-popup #ns-history-grid .dx-datagrid,
    #newservice-popup #ns-history-grid .dx-datagrid-rowsview,
    #newservice-popup #ns-history-grid .dx-datagrid-content,
    #newservice-popup #ns-history-grid .dx-scrollable-wrapper,
    #newservice-popup #ns-history-grid .dx-scrollable-container,
    #newservice-popup #ns-history-grid .dx-scrollable-content,
    #newservice-popup #ns-consumables-grid,
    #newservice-popup #ns-consumables-grid > .dx-widget,
    #newservice-popup #ns-consumables-grid .dx-datagrid,
    #newservice-popup #ns-consumables-grid .dx-datagrid-rowsview,
    #newservice-popup #ns-consumables-grid .dx-datagrid-content,
    #newservice-popup #ns-consumables-grid .dx-scrollable-wrapper,
    #newservice-popup #ns-consumables-grid .dx-scrollable-container,
    #newservice-popup #ns-consumables-grid .dx-scrollable-content {
        height: auto !important;
        max-height: none !important;
    }

    #newservice-popup #ns-history-grid .dx-datagrid-rowsview,
    #newservice-popup #ns-history-grid .dx-scrollable-container,
    #newservice-popup #ns-consumables-grid .dx-datagrid-rowsview,
    #newservice-popup #ns-consumables-grid .dx-scrollable-container {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    #newservice-popup #ns-history-grid .dx-scrollbar-vertical,
    #newservice-popup #ns-consumables-grid .dx-scrollbar-vertical {
        display: none !important;
    }

    /* --- Battery-specific --- */
    #battery-popup .battery-popup-fieldset {
        margin: 0;
        padding: 0;
    }

    #battery-popup .dx-fieldset .dx-field {
        display: block;
        float: none;
        padding: 4px 0;
        margin: 0;
    }

    #battery-popup .dx-field-label,
    #battery-popup .dx-field-value {
        float: none !important;
        width: 100% !important;
        display: block;
        box-sizing: border-box;
    }

    #battery-popup .dx-field-label {
        font-size: 12px;
        line-height: 1.25;
        margin: 0 0 2px !important;
        padding: 0 !important;
    }

    #battery-popup .dx-field-value {
        padding: 0 !important;
        margin: 0;
    }

    #battery-popup .dx-field-value .dx-widget {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    #battery-popup #battery-popup-sncode {
        word-break: break-all;
    }

    #battery-popup .battery-popup-body > p {
        font-size: 12px;
        line-height: 1.25;
        margin: 0 0 4px;
    }

    #battery-popup #battery-last-date {
        display: inline-block;
        font-size: 13px;
        font-weight: 600;
        padding: 4px 0;
    }

    #battery-popup .dx-radiogroup {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    #battery-popup .dx-radiogroup .dx-item-content,
    #battery-popup .dx-radiogroup .dx-radiobutton {
        white-space: normal;
        line-height: 1.25;
        margin: 0;
        align-items: flex-start;
    }

    #battery-popup .dx-radiogroup .dx-radiobutton-icon {
        margin-top: 1px;
    }

    #battery-popup .battery-popup-error {
        font-size: 12px;
        margin-top: 4px;
        margin-bottom: 0;
    }

    #battery-popup .battery-popup-footer .dx-button {
        width: auto !important;
        min-height: 36px;
    }

    /* Base page styles use 70vh — clear that inside fullscreen shell */
    #battery-popup .battery-popup-body {
        max-height: none !important;
        padding: 4px 8px 8px;
    }

    #marketingPartsMessagePopup.dx-popup-wrapper,
    #marketingPartsMessagePopup .dx-overlay-content {
        max-width: 100vw !important;
        box-sizing: border-box;
    }

    #marketingPartsMessagePopup .marketing-parts-popup-shell {
        min-height: 0;
        height: 100%;
    }

    #marketingPartsMessagePopup .marketing-parts-popup-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px 8px 8px;
    }

    #marketingPartsMessagePopup .marketing-parts-popup-message {
        font-size: 13px;
        line-height: 1.4;
    }

    #marketingPartsMessagePopup .marketing-parts-popup-footer {
        flex-shrink: 0;
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: stretch;
        padding: 6px 8px;
    }

    #marketingPartsMessagePopup .marketing-parts-popup-footer .dx-button {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 36px;
    }
}

/* Landscape phone: keep title/footer thin so the body remains the scroll surface */
@media (hover: none) and (pointer: coarse) and (max-height: 500px) {
    #activation-popup .dx-popup-title,
    #sparequar-popup .dx-popup-title,
    #newservice-popup .dx-popup-title,
    #battery-popup .dx-popup-title,
    #crc-popup .dx-popup-title,
    #admin-access-popup .dx-popup-title,
    #password-popup .dx-popup-title,
    #paralavi-popup .dx-popup-title,
    #timol-popup .dx-popup-title,
    #manage-popup .dx-popup-title,
    #partida-history-popup .dx-popup-title,
    #home-news-video-popup .dx-popup-title,
    #booksDiagramZoomPopup .dx-popup-title {
        min-height: 32px;
        padding: 2px 8px;
    }

    #activation-popup .activation-popup-footer,
    #sparequar-popup .activation-popup-footer,
    #newservice-popup .activation-popup-footer,
    #battery-popup .battery-popup-footer,
    #crc-popup .crc-popup-footer,
    #admin-access-popup .admin-access-popup-footer,
    #password-popup .admin-password-popup-footer,
    #paralavi-popup .parak-popup-footer,
    #timol-popup .parak-popup-footer,
    #crc-popup .crc-popup-footer {
        padding: 4px 8px;
        padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
        gap: 4px;
    }
}

/* ===== ANTAL LEGEND POPUP (BooksOnLine, AdvanceSpareSearch) ===== */
.antal-legend-popup-body {
    padding: 8px 4px;
    font-size: 13px;
    line-height: 1.5;
}

.antal-color-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.antal-color-legend-item {
    display: flex;
    justify-content: flex-start;
}

.antal-legend-info {
    font-size: 12px;
    line-height: 1.5;
}

.antal-text-blue {
    color: #1d4ed8;
    font-weight: 600;
}

html[data-theme='dark'] .antal-text-blue {
    color: #93c5fd;
}

.antal-text-yellow {
    background: #ff0;
    color: #000;
}

.antal-color-legend .availability-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: all .2s ease;
    min-width: 0;
    justify-content: flex-start;
    gap: 6px;
    padding: 2px 9px 2px 6px;
}

.antal-color-legend .availability-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    color: #1f2937;
}

.antal-color-legend .status-indicator {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
    transition: transform .18s ease, box-shadow .18s ease;
}

.antal-color-legend .availability-pill--green {
    background: linear-gradient(135deg, rgba(39,174,96,0.14), rgba(39,174,96,0.06));
    border-color: rgba(39,174,96,0.22);
}

.antal-color-legend .availability-pill--green .availability-text {
    color: #166534;
}

.antal-color-legend .status-indicator.green {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 0 8px rgba(34,197,94,0.50);
}

.antal-color-legend .availability-pill--blue {
    background: linear-gradient(135deg, rgba(47,128,237,0.14), rgba(47,128,237,0.06));
    border-color: rgba(47,128,237,0.22);
}

.antal-color-legend .availability-pill--blue .availability-text {
    color: #1d4ed8;
}

.antal-color-legend .status-indicator.blue {
    background: #3b82f6;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 0 8px rgba(59,130,246,0.45);
}

html[data-theme='dark'] .antal-color-legend .availability-text {
    color: var(--text-body);
}

html[data-theme='dark'] .antal-color-legend .status-indicator {
    box-shadow: 0 0 0 2px rgba(30,30,36,0.92);
}

html[data-theme='dark'] .antal-color-legend .status-indicator.green {
    box-shadow: 0 0 0 2px rgba(30,30,36,0.92), 0 0 6px rgba(34,197,94,0.40);
}

html[data-theme='dark'] .antal-color-legend .status-indicator.blue {
    box-shadow: 0 0 0 2px rgba(30,30,36,0.92), 0 0 6px rgba(59,130,246,0.35);
}

html[data-theme='dark'] .antal-color-legend .availability-pill--green {
    background: linear-gradient(135deg, rgba(34,197,94,0.24), rgba(34,197,94,0.10));
    border-color: rgba(34,197,94,0.34);
}

html[data-theme='dark'] .antal-color-legend .availability-pill--green .availability-text {
    color: #86efac;
}

html[data-theme='dark'] .antal-color-legend .availability-pill--blue {
    background: linear-gradient(135deg, rgba(59,130,246,0.24), rgba(59,130,246,0.10));
    border-color: rgba(59,130,246,0.34);
}

html[data-theme='dark'] .antal-color-legend .availability-pill--blue .availability-text {
    color: #93c5fd;
}

/* ===== ANTAL ADD-TO-BASKET POPUP (BooksOnLine, AdvanceSpareSearch) ===== */
.antal-add-basket-popup-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 2px 0;
}

.antal-add-basket-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.4;
    word-break: break-word;
}

.antal-add-basket-code {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-body);
}

.antal-add-basket-descr {
    font-size: 13px;
    font-weight: bold;
    color: var(--text-body);
}

.antal-add-basket-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.antal-add-basket-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.antal-add-basket-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.antal-add-basket-error {
    color: #c00;
    font-weight: 600;
    font-size: 12px;
}

.antal-send-method-hint {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-muted);
}

/* ===== ANTAL SPARE BOOK POPUP (AdvanceSpareSearch) ===== */
.antal-spare-book-popup-body {
    padding: 8px;
    max-height: 60vh;
    overflow-y: auto;
}

.antal-spare-book-popup-title {
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
}

.antal-spare-book-link-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border-panel, rgba(0, 0, 0, 0.06));
}

.antal-spare-book-link-row a {
    color: var(--primary);
}

/* ===== ACTIVATION / WARRANTY WIZARD ALERTS (shared) ===== */
.activation-warning {
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    border: 1px solid rgba(255, 193, 7, 0.45);
    padding: 8px;
    margin: 10px 0;
    font-size: 12px;
    line-height: 1.45;
    border-radius: 4px;
}

html[data-theme='dark'] .activation-warning {
    border-color: rgba(255, 224, 131, 0.28);
}

.activation-info {
    background: var(--alert-info-bg);
    color: var(--alert-info-text);
    border: 1px solid rgba(12, 84, 96, 0.28);
    padding: 8px;
    margin: 10px 0;
    font-size: 12px;
    line-height: 1.45;
    border-radius: 4px;
}

html[data-theme='dark'] .activation-info {
    border-color: rgba(171, 227, 239, 0.28);
}

.activation-warning a {
    color: var(--primary);
    font-weight: 600;
}

html[data-theme='dark'] .activation-warning a {
    color: var(--primary-light);
}

.activation-warning-text {
    color: #c0392b;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.45;
}

html[data-theme='dark'] .activation-warning-text {
    color: #fca5a5;
}

.sparequar-result-msg {
    margin: 10px 0;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    border-radius: 4px;
    background: var(--alert-danger-bg);
    color: var(--alert-danger-text);
    border: 1px solid rgba(220, 53, 69, 0.35);
}

html[data-theme='dark'] .sparequar-result-msg {
    border-color: rgba(245, 198, 203, 0.28);
}

.sparequar-result-msg a {
    color: var(--primary);
    font-weight: 600;
}

html[data-theme='dark'] .sparequar-result-msg a {
    color: var(--primary-light);
}

/* ===== DATE HEADER FILTER — group separators ===== */
.dx-header-filter-menu .dx-list-item.devx-date-header-filter-sep,
.dx-header-filter-menu .dx-treeview-item.devx-date-header-filter-sep {
    border-bottom: 1px solid var(--dx-color-separator, #dee2e6);
}

/* ===== DATE HEADER FILTER — specific date box ===== */
.dx-header-filter-menu .devx-date-hf-content {
    display: flex;
    flex-direction: column;
}

.dx-header-filter-menu .devx-date-hf-content > .dx-list,
.dx-header-filter-menu .devx-date-hf-content > .dx-treeview {
    flex: 1 1 auto;
    min-height: 0;
}

.dx-header-filter-menu .devx-date-hf-datebox {
    flex: 0 0 auto;
    margin-bottom: 8px;
}

/* ===== PAGE-SCROLL GRIDS (opt-in .page-scroll-grid) ===== */
/* Mobile: page is the only vertical scroller; grid may still pan horizontally */
/* Phones in portrait (narrow) or landscape (short + touch) */
@media (max-width: 576px), (hover: none) and (pointer: coarse) and (max-height: 700px), (orientation: landscape) and (max-height: 500px) {
    .page-scroll-grid,
    .page-scroll-grid > .dx-widget,
    .page-scroll-grid .dx-datagrid {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    .page-scroll-grid .dx-datagrid-rowsview,
    .page-scroll-grid .dx-datagrid-rowsview .dx-scrollable-wrapper,
    .page-scroll-grid .dx-datagrid-rowsview .dx-scrollable-container,
    .page-scroll-grid .dx-datagrid-rowsview .dx-scrollable-content,
    .page-scroll-grid .dx-datagrid-rowsview .dx-datagrid-content {
        height: auto !important;
        max-height: none !important;
    }

    /* One horizontal scroller (body container only); header syncs via DX */
    .page-scroll-grid .dx-datagrid-headers .dx-scrollable-container,
    .page-scroll-grid .dx-datagrid-rowsview,
    .page-scroll-grid .dx-datagrid-rowsview .dx-scrollable-wrapper,
    .page-scroll-grid .dx-datagrid-rowsview .dx-scrollable-content,
    .page-scroll-grid .dx-datagrid-rowsview .dx-datagrid-content {
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }

    .page-scroll-grid .dx-datagrid-rowsview .dx-scrollable-container {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .page-scroll-grid .dx-scrollbar-vertical,
    .page-scroll-grid .dx-scrollbar-horizontal {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* ===== GRID TOOLBAR WRAP (devx-grid-toolbar-wrap.js): narrow grids wrap the toolbar (multiline) ===== */
/* Tools on the first row, aligned right; the group panel on its own row right above the column headers.
   Selectors must outrank DX's ".dx-toolbar.dx-toolbar-multiline .dx-toolbar-item { flex: 0 1 auto }". */
.devx-toolbar-wrap .dx-toolbar.dx-toolbar-multiline .dx-toolbar-items-container {
    justify-content: flex-end;
}

.dx-toolbar.dx-toolbar-multiline .dx-toolbar-item.devx-toolbar-grouppanel {
    order: 1;
    flex: 1 1 100%;
}

/* ===== GRID VIEWS (devx-grid-views.js): view picker + actions menu as one group ===== */
.devx-grid-views {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border-form);
    border-radius: 4px;
    background: var(--dropdown-bg);
    transition: border-color 0.15s;
}

.devx-grid-views:hover {
    border-color: var(--text-placeholder);
}

.devx-grid-views:focus-within {
    border-color: var(--primary);
}

/* Small muted prefix inside the group: "Προβολή  <view> ▾ | ⋯" */
.devx-grid-views__label {
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.devx-grid-views__select {
    width: 180px;
}

.devx-grid-views__select .dx-texteditor-input {
    padding-left: 6px;
}

/* The group draws the border; keep the inner editor flat (Fluent's focus underline stays) */
.devx-grid-views .dx-texteditor.dx-editor-outlined {
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
}

.devx-grid-views__separator {
    width: 1px;
    margin: 6px 0;
    background: var(--border-form);
}

.devx-grid-views__menu .dx-button {
    border-radius: 0 4px 4px 0;
}

/* "New" hint (devx-grid-views.js): pill after the label, dot on the compact button; removed once seen.
   Kept inside the item box: the toolbar clips anything that overflows it. */
.devx-grid-views-button {
    position: relative;
}

.devx-grid-views__new {
    display: none;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    background: #c0392b;
    pointer-events: none;
}

.devx-grid-views-is-new .devx-grid-views__new {
    display: inline-block;
}

.devx-grid-views-is-new .devx-grid-views-button::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c0392b;
    pointer-events: none;
}

/* Compact mode (narrow grid, set by devx-grid-views.js): icon button + bottom sheet */
.devx-grid-views-button {
    display: none;
}

.devx-grid-views-compact .devx-grid-views {
    display: none;
}

.devx-grid-views-compact .devx-grid-views-button {
    display: inline-block;
}

.devx-grid-views-sheet .dx-overlay-content {
    border-radius: 12px 12px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.devx-grid-views-sheet .dx-list-group-header {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.devx-grid-views-sheet__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
}

.devx-grid-views-sheet__icon {
    width: 20px;
    flex: 0 0 20px;
    color: var(--primary);
}

.devx-grid-views-sheet__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.devx-grid-views-sheet__star {
    color: var(--primary);
}