/* ============================================================================
   DxEdasys Design System — unified interactive layer
   ----------------------------------------------------------------------------
   Single source of truth for the interactive controls: buttons, toolbar items,
   inputs / editors, dropdowns and search boxes.

   This file is loaded AFTER DxEdasys.styles.css so it harmonizes every page and
   neutralizes the (heavily duplicated) per-page overrides that used to drift.

   Brand primary: #008cba
   ============================================================================ */

:root {
    /* --- Brand palette ---------------------------------------------------- */
    --app-primary: #008cba;
    --app-primary-rgb: 0, 140, 186;
    --app-primary-hover: #00779e;
    --app-primary-active: #007095;
    --app-primary-soft: rgba(0, 140, 186, 0.10);
    --app-primary-soft-hover: rgba(0, 140, 186, 0.16);

    /* --- Neutrals --------------------------------------------------------- */
    --app-surface: #ffffff;
    --app-surface-muted: #f4f7fb;
    --app-border: #d8dee8;
    --app-border-strong: #c3ccda;
    --app-text: #1f2937;
    --app-text-muted: #64748b;

    /* --- Shape ------------------------------------------------------------ */
    --app-radius-sm: 0.25rem;
    --app-radius: 0.375rem;
    --app-radius-lg: 0.5rem;

    /* --- Control metrics -------------------------------------------------- */
    --app-control-height: 2.25rem;
    --app-control-height-sm: 2rem;
    --app-control-padding-x: 0.75rem;
    --app-control-padding-y: 0.3125rem;

    /* --- Elevation (soft but visible) ------------------------------------- */
    --app-shadow-rest: 0 1px 3px rgba(15, 23, 42, 0.10);
    --app-shadow-hover: 0 3px 8px rgba(15, 23, 42, 0.14);
    --app-shadow-active: 0 1px 2px rgba(15, 23, 42, 0.10);

    /* --- Focus ring ------------------------------------------------------- */
    --app-focus-ring-color: rgba(0, 140, 186, 0.30);
    --app-focus-ring: 0 0 0 0.1875rem var(--app-focus-ring-color);

    /* --- Motion ----------------------------------------------------------- */
    --app-transition: background-color 140ms ease, border-color 140ms ease,
        color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

/* ---------------------------------------------------------------------------
   1. Harmonize the Bootstrap (Yeti) tokens with the app brand.
      Yeti's primary is #008cba; we keep it as the single brand color.
      `html:root` outranks the theme's own `:root`, so load order does not
      matter (some layouts re-load the theme CSS after this file).
   --------------------------------------------------------------------------- */
html:root,
html[data-bs-theme] {
    --bs-primary: var(--app-primary);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-border-color: var(--app-border);
    --bs-border-radius: var(--app-radius);
    --bs-border-radius-sm: var(--app-radius-sm);
    --bs-border-radius-lg: var(--app-radius-lg);
    --bs-focus-ring-color: var(--app-focus-ring-color);
    --bs-link-color: var(--app-primary);
    --bs-link-color-rgb: var(--app-primary-rgb);
    --bs-link-hover-color: var(--app-primary-hover);
}

/* ---------------------------------------------------------------------------
   1b. Login card: align form editors with the submit button.
       DevExpress form layout adds negative row margins + item paddings, which
       make text editors wider than the rest of the card.
   --------------------------------------------------------------------------- */
.login-card .dxbl-fl .dxbl-row {
    margin-left: 0;
    margin-right: 0;
}

.login-card .dxbl-fl .dxbl-fl-item {
    padding-left: 0;
    padding-right: 0;
}

.login-card .dxbl-fl .dxbl-fl-ctrl,
.login-card .dxbl-fl .dxbl-text-edit {
    width: 100%;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   2. DevExpress button tokens.
      Set directly on `.dxbl-btn` (the theme also sets them there, so they must
      live on the element to win). Render-style colors (e.g. Primary) keep
      working because they rely on --bs-primary, which we re-mapped above.
   --------------------------------------------------------------------------- */
body.edasys-app .dxbl-btn:not(.dxbl-edit-btn-clear):not(.dxbl-edit-btn-dropdown):not(.dxbl-spin-btn-dec):not(.dxbl-spin-btn-inc) {
    --dxbl-btn-border-radius: var(--app-radius);
    --dxbl-btn-padding-x: var(--app-control-padding-x);
    --dxbl-btn-padding-y: var(--app-control-padding-y);
    --dxbl-btn-box-shadow: var(--app-shadow-rest);
    --dxbl-btn-hover-box-shadow: var(--app-shadow-hover);
    --dxbl-btn-active-box-shadow: var(--app-shadow-active);
    --dxbl-btn-disabled-box-shadow: none;
    --dxbl-btn-focus-border-color: var(--app-primary);
    --dxbl-btn-focus-outline-color: var(--app-primary);
    --dxbl-btn-focus-outline-size: 2px;
    --dxbl-btn-focus-outline-offset: 2px;
    --dxbl-btn-focus-box-shadow: none;

    font-weight: 500;
    transition: var(--app-transition);
}

/* ---------------------------------------------------------------------------
   3. Secondary buttons → white / outline.
      Yeti renders ButtonRenderStyle.Secondary as flat gray (#eee). The app uses
      it for toolbars/filters where the gray stands out, so we align it with the
      light outline surface used elsewhere (e.g. the "Εξαγωγή" button).
   --------------------------------------------------------------------------- */
body.edasys-app .dxbl-btn-secondary {
    --dxbl-btn-bg: var(--app-surface);
    --dxbl-btn-border-color: var(--app-border);
    --dxbl-btn-color: var(--app-text);
    --dxbl-btn-hover-bg: var(--app-surface-muted);
    --dxbl-btn-hover-border-color: var(--app-border-strong);
    --dxbl-btn-hover-color: var(--app-primary);
    --dxbl-btn-hover-background: none;
    --dxbl-btn-active-bg: var(--app-primary-soft);
    --dxbl-btn-active-border-color: var(--app-primary);
    --dxbl-btn-active-color: var(--app-primary);
    --dxbl-btn-active-background: none;
    --dxbl-btn-disabled-bg: var(--app-surface);
    --dxbl-btn-disabled-color: var(--app-text-muted);
    --dxbl-btn-disabled-border-color: var(--app-border);
    --dxbl-btn-disabled-background: none;
}

/* ---------------------------------------------------------------------------
   4. DevExpress toolbar tokens.
   --------------------------------------------------------------------------- */
body.edasys-app .dxbl-toolbar {
    --dxbl-toolbar-btn-border-radius: var(--app-radius);
    --dxbl-toolbar-btn-padding-x: 0.625rem;
    --dxbl-toolbar-btn-padding-y: 0.28rem;
    --dxbl-toolbar-item-spacing: 0.375rem;
    --dxbl-toolbar-separator-color: var(--app-border);
}

body.edasys-app .dxbl-toolbar .dxbl-btn {
    transition: var(--app-transition);
}

/* ---------------------------------------------------------------------------
   5. DevExpress editor (input) tokens — text edit, memo, combo, date, spin.
      All editors are built on `.dxbl-text-edit`, so overriding here unifies
      their shape, spacing, border and focus ring.
   --------------------------------------------------------------------------- */
body.edasys-app .dxbl-text-edit {
    --dxbl-text-edit-border-radius: var(--app-radius);
    --dxbl-text-edit-padding-x: 0.5rem;
    --dxbl-text-edit-padding-y: var(--app-control-padding-y);
    --dxbl-text-edit-border-color: var(--app-border);
    --dxbl-text-edit-focus-border-color: var(--app-primary);
    --dxbl-text-edit-focus-shadow-color: var(--app-focus-ring-color);
    --dxbl-text-edit-focus-shadow-blur: 0.1875rem;
    --dxbl-text-edit-focus-shadow-spread: 0;

    transition: var(--app-transition);
}

body.edasys-app .dxbl-edit-dropdown {
    --dxbl-edit-dropdown-border-radius: var(--app-radius-lg);
    --dxbl-edit-dropdown-border-color: var(--app-border);
}

/* Panels that host controls also get the unified radius. */
body.edasys-app .dxbl-dropdown,
body.edasys-app .dxbl-popup,
body.edasys-app .dxbl-flyout,
body.edasys-app .dxbl-list-box {
    --dxbl-dropdown-border-radius: var(--app-radius-lg);
    --dxbl-popup-border-radius: var(--app-radius-lg);
    --dxbl-flyout-border-radius: var(--app-radius-lg);
    --dxbl-list-box-border-radius: var(--app-radius);
}

/* Softer popup / dropdown shadow (the theme default is quite heavy). */
body.edasys-app .dxbl-popup,
body.edasys-app .dxbl-flyout,
body.edasys-app .dxbl-dropdown {
    --dxbl-popup-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    --dxbl-flyout-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

/* Softer hover highlight on dropdown / menu / list items. */
body.edasys-app .dxbl-menu {
    --dxbl-menu-item-hover-bg: rgba(15, 23, 42, 0.045);
}

body.edasys-app .dxbl-list-box {
    --dxbl-list-box-item-hover-bg: rgba(15, 23, 42, 0.045);
    --dxbl-list-box-item-active-bg: rgba(15, 23, 42, 0.06);
}

/* Menu / dropdown items use normal weight (buttons are lighter than 600). */
body.edasys-app .dxbl-menu-item,
body.edasys-app .dxbl-menu-item > .dxbl-btn,
body.edasys-app .dxbl-dropdown-item,
body.edasys-app .dxbl-list-box-item {
    font-weight: 400 !important;
}

/* Toolbar items (including the Export button) follow the lighter button weight. */
body.edasys-app .dxbl-toolbar-item,
body.edasys-app .dxbl-toolbar-item .dxbl-btn,
body.edasys-app .grid-export-split .dxbl-btn {
    font-weight: 500;
}

/* Only the currently selected item stays bold. */
body.edasys-app .dxbl-menu-item.dxbl-selected > .dxbl-btn,
body.edasys-app .dxbl-menu-item > .dxbl-btn.dxbl-selected,
body.edasys-app .dxbl-menu-item[aria-selected="true"] > .dxbl-btn,
body.edasys-app .dxbl-menu-item > .dxbl-btn[aria-selected="true"],
body.edasys-app .dxbl-menu-item-selected > .dxbl-btn,
body.edasys-app .dxbl-dropdown-item.dxbl-selected,
body.edasys-app .dxbl-dropdown-item[aria-selected="true"],
body.edasys-app .dxbl-list-box-item.dxbl-list-box-item-selected {
    font-weight: 600 !important;
}

body.edasys-app .dxbl-menu-item:not(.dxbl-disabled):hover,
body.edasys-app .dxbl-menu-item:not(.dxbl-disabled):hover > .dxbl-btn,
body.edasys-app .dxbl-menu-item:not(.dxbl-disabled):hover > .dxbl-btn::before,
body.edasys-app .dxbl-dropdown-item.dxbl-btn:not(.dxbl-disabled):not(:disabled):hover,
body.edasys-app .dxbl-list-box-item:not(.dxbl-list-box-item-disabled):hover,
body.edasys-app .dxbl-list-box-item:not(.dxbl-list-box-item-disabled):hover > td:first-of-type::before {
    background-color: rgba(15, 23, 42, 0.045) !important;
}

/* ---------------------------------------------------------------------------
   6. Unified button elevation.
      `!important` is required because the pages ship duplicated, more specific
      `.dxbl-btn:not(...):not(...)` rules. Grid filter funnels, link buttons,
      the custom FAB and the editor-internal buttons (clear X, dropdown toggle,
      spin buttons) are excluded so their native, flat look is preserved.
   --------------------------------------------------------------------------- */
body.edasys-app .dxbl-btn:not(.dxbl-edit-btn-clear):not(.dxbl-edit-btn-dropdown):not(.dxbl-spin-btn-dec):not(.dxbl-spin-btn-inc):not(.dxbl-grid-filter-menu-funnel-btn):not(.dxbl-btn-link):not(.app-fab-main):not(.app-fab-button):not(:disabled):not(.dxbl-disabled) {
    box-shadow: var(--app-shadow-rest) !important;
}

body.edasys-app .dxbl-btn:not(.dxbl-edit-btn-clear):not(.dxbl-edit-btn-dropdown):not(.dxbl-spin-btn-dec):not(.dxbl-spin-btn-inc):not(.dxbl-grid-filter-menu-funnel-btn):not(.dxbl-btn-link):not(.app-fab-main):not(.app-fab-button):not(:disabled):not(.dxbl-disabled):hover,
body.edasys-app .dxbl-btn:not(.dxbl-edit-btn-clear):not(.dxbl-edit-btn-dropdown):not(.dxbl-spin-btn-dec):not(.dxbl-spin-btn-inc):not(.dxbl-grid-filter-menu-funnel-btn):not(.dxbl-btn-link):not(.app-fab-main):not(.app-fab-button):not(:disabled):not(.dxbl-disabled):focus-visible {
    box-shadow: var(--app-shadow-hover) !important;
    transform: none;
}

body.edasys-app .dxbl-btn:not(.dxbl-edit-btn-clear):not(.dxbl-edit-btn-dropdown):not(.dxbl-spin-btn-dec):not(.dxbl-spin-btn-inc):not(.dxbl-grid-filter-menu-funnel-btn):not(.dxbl-btn-link):not(.app-fab-main):not(.app-fab-button):not(:disabled):not(.dxbl-disabled):active {
    box-shadow: var(--app-shadow-active) !important;
    transform: none;
}

body.edasys-app .dxbl-btn:disabled,
body.edasys-app .dxbl-btn.dxbl-disabled {
    box-shadow: none !important;
    transform: none;
}

/* Buttons nested in a group / split / search box share one flat surface. */
body.edasys-app .dxbl-btn-group .dxbl-btn,
body.edasys-app .dxbl-split-btn .dxbl-btn,
body.edasys-app .dxbl-btn-split .dxbl-btn,
body.edasys-app .grid-export-split .dxbl-btn,
body.edasys-app .imag .dxbl-btn {
    box-shadow: none !important;
    transform: none;
}

body.edasys-app .dxbl-btn-group .dxbl-btn:hover,
body.edasys-app .dxbl-btn-group .dxbl-btn:focus-visible,
body.edasys-app .dxbl-split-btn .dxbl-btn:hover,
body.edasys-app .dxbl-split-btn .dxbl-btn:focus-visible,
body.edasys-app .grid-export-split .dxbl-btn:hover,
body.edasys-app .grid-export-split .dxbl-btn:focus-visible {
    box-shadow: none !important;
    transform: none;
}

/* Search boxes and export split buttons use the same elevation as buttons,
   so toolbars read as one consistent surface. */
body.edasys-app .imag,
body.edasys-app .grid-export-split {
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-rest) !important;
    transition: var(--app-transition);
}

body.edasys-app .imag:hover,
body.edasys-app .imag:focus-within,
body.edasys-app .grid-export-split:hover,
body.edasys-app .grid-export-split:focus-within {
    box-shadow: var(--app-shadow-hover) !important;
}

/* ---------------------------------------------------------------------------
   7. Bootstrap buttons (used in a few views) follow the same system.
   --------------------------------------------------------------------------- */
body.edasys-app .btn {
    --bs-btn-border-radius: var(--app-radius);
    --bs-btn-font-weight: 500;
    transition: var(--app-transition);
}

body.edasys-app .btn:not(.btn-link):not(.btn-close) {
    box-shadow: var(--app-shadow-rest) !important;
}

body.edasys-app .btn:not(.btn-link):not(.btn-close):hover,
body.edasys-app .btn:not(.btn-link):not(.btn-close):focus-visible {
    box-shadow: var(--app-shadow-hover) !important;
    transform: none;
}

body.edasys-app .btn:not(.btn-link):not(.btn-close):active {
    box-shadow: var(--app-shadow-active) !important;
    transform: none;
}

body.edasys-app .btn-primary {
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);
    --bs-btn-active-bg: var(--app-primary-active);
    --bs-btn-active-border-color: var(--app-primary-active);
}

body.edasys-app .btn-outline-primary {
    --bs-btn-color: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary);
    --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-active-bg: var(--app-primary-active);
    --bs-btn-active-border-color: var(--app-primary-active);
    --bs-btn-disabled-color: var(--app-primary);
    --bs-btn-disabled-border-color: var(--app-primary);
}

/* ---------------------------------------------------------------------------
   8. Selection controls share the brand accent.
   --------------------------------------------------------------------------- */
body.edasys-app input[type="checkbox"],
body.edasys-app input[type="radio"],
body.edasys-app .dxbl-checkbox input,
body.edasys-app .dxbl-radio input {
    accent-color: var(--app-primary);
}

/* ---------------------------------------------------------------------------
   9. Unified scrollbars.
      Native scroll containers (the side menu, page content, popups, text
      areas…) used to show the browser's default bar, which did not match the
      thin overlay scrollbar DevExpress renders inside the grids
      (`.dxbl-scroll-viewer`). The rules below reproduce that grid look on
      every native scrollbar: a slim, rounded, semi-transparent thumb over a
      transparent track.

      The thumb color follows the container's text color (currentColor), so it
      stays legible on both the light canvas and the dark side menu; the plain
      rgba value is the fallback for browsers without `color-mix()` support.

      Note: DevExpress hides the native scrollbar of its grids/list boxes
      (`...scroll-viewer-content { scrollbar-width: none }` and
      `::-webkit-scrollbar { display: none }`), so those keep their own
      overlay bar — only genuinely native scrollbars are restyled here.
   --------------------------------------------------------------------------- */
body.edasys-app {
    --app-scrollbar-size: 0.5rem;
    /* Matches the DevExpress grid thumb: currentColor at ~50% (the rgba value
       is the fallback for browsers without color-mix()). */
    --app-scrollbar-thumb: rgba(33, 33, 33, 0.5);
    --app-scrollbar-thumb-hover: rgba(33, 33, 33, 0.75);
}

/* Firefox */
body.edasys-app * {
    scrollbar-width: thin;
    scrollbar-color: var(--app-scrollbar-thumb) transparent;
}

/* Chromium / WebKit */
body.edasys-app *::-webkit-scrollbar {
    width: var(--app-scrollbar-size);
    height: var(--app-scrollbar-size);
}

body.edasys-app *::-webkit-scrollbar-track {
    background: transparent;
}

body.edasys-app *::-webkit-scrollbar-thumb {
    background-color: var(--app-scrollbar-thumb);
    background-color: color-mix(in srgb, currentColor 50%, transparent);
    border-radius: 0.75rem;
}

body.edasys-app *::-webkit-scrollbar-thumb:hover {
    background-color: var(--app-scrollbar-thumb-hover);
    background-color: color-mix(in srgb, currentColor 75%, transparent);
}

body.edasys-app *::-webkit-scrollbar-corner {
    background: transparent;
}

/* Keep the native scrollbars of DevExpress scroll containers hidden so only
   their own overlay scrollbar is drawn. This also prevents the global rules
   above from fighting with that overlay and making it flicker. */
body.edasys-app .dxbl-scroll-viewer > .dxbl-scroll-viewer-content {
    scrollbar-width: none;
}

body.edasys-app .dxbl-scroll-viewer > .dxbl-scroll-viewer-content::-webkit-scrollbar {
    display: none;
}

/* ============================================================================
   Grid selection - uniform selected-row color for all grids
   (same soft blue used in the Customer Card page)
   ============================================================================ */
body.edasys-app .dxbl-grid {
    --dxbl-grid-selection-bg: #d3e9f6;
    --dxbl-grid-selection-focus-bg: #d3e9f6;
}


/* ---------------------------------------------------------------------------
   8. Unified panel radius (matches the CrudEdt product form groups).
      Applies to DevExpress grids, report containers, invoice/DCL cards,
      section panels and dealer/help cards.
   --------------------------------------------------------------------------- */
:root {
    --app-panel-radius: 0.5rem;
}

body.edasys-app .dxbl-grid,
body.edasys-app .dxbl-grid-container,
body.edasys-app .grid-container,
body.edasys-app .card,
body.edasys-app .invoice-section,
body.edasys-app .dcs-section,
body.edasys-app .ha-list,
body.edasys-app .ha-editor,
body.edasys-app .dcl-hero,
body.edasys-app .dcl-table-wrap,
body.edasys-app .dcl-remote,
body.edasys-app .dcl-empty,
body.edasys-app .dealer-card,
body.edasys-app .dealer-request-card,
body.edasys-app .dealer-empty {
    border-radius: var(--app-panel-radius) !important;
}

body.edasys-app .dxbl-grid,
body.edasys-app .grid-container,
body.edasys-app .invoice-section,
body.edasys-app .dcs-section,
body.edasys-app .ha-list,
body.edasys-app .ha-editor,
body.edasys-app .dcl-table-wrap,
body.edasys-app .dcl-remote,
body.edasys-app .dcl-empty,
body.edasys-app .dealer-card,
body.edasys-app .dealer-request-card,
body.edasys-app .dealer-empty {
    overflow: hidden;
}

body.edasys-app .invoice-section__header,
body.edasys-app .dcs-section-head,
body.edasys-app .dcl-hero,
body.edasys-app .ha-hero,
body.edasys-app .dcs-hero {
    border-top-left-radius: var(--app-panel-radius) !important;
    border-top-right-radius: var(--app-panel-radius) !important;
}

/* Το header των DevExpress grids μένει τετράγωνο (χωρίς radius). */
body.edasys-app .dxbl-grid,
body.edasys-app .dxbl-grid-container,
body.edasys-app .grid-container,
body.edasys-app .dcl-table-wrap {
    border-top-left-radius: var(--app-panel-radius) !important;
    border-top-right-radius: var(--app-panel-radius) !important;
}

body.edasys-app .dxbl-grid th {
    border-radius: 0 !important;
}

/* Στρογγυλές μόνο οι εξωτερικές πάνω γωνίες του header. */
/* Οι γωνίες του header προκύπτουν από το rounded wrapper (overflow:hidden),
   ώστε να μη δημιουργείται εσωτερικό «pill» στο πρώτο cell (π.χ. Επιλογή). */
body.edasys-app .dxbl-grid th,
body.edasys-app .dxbl-grid [role='columnheader'] {
    border-radius: 0 !important;
}

body.edasys-app .dxbl-group {
    border-radius: var(--app-panel-radius) !important;
    overflow: hidden;
}

/* CrudEdt form layout: κενό κάτω από τη γραμμή tabs. */
body.edasys-app .dxbl-fl .dxbl-tabs-content {
    padding: 0 !important;
}

body.edasys-app .dxbl-fl-tab-content {
    padding: 0.5rem 0 0.5rem !important;
}

body.edasys-app .dxbl-fl-tab-content > .dxbl-row:first-child,
body.edasys-app .dxbl-fl-tab-content .dxbl-group:first-child {
    margin-top: 0 !important;
}

/* Ενιαίο header format για όλα τα κύρια grids (headeralign). */
body.edasys-app .dxbl-grid.headeralign:not(.quiet-grid) .dxbl-grid-table > thead .dxbl-grid-header-row {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

body.edasys-app .dxbl-grid.headeralign:not(.quiet-grid) .dxbl-grid-table > thead .dxbl-grid-header-row > th {
    color: #fff !important;
    vertical-align: middle !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

body.edasys-app .dxbl-grid.headeralign:not(.quiet-grid) .dxbl-grid-header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

body.edasys-app .dxbl-grid.headeralign:not(.quiet-grid) .dxbl-grid-filter-menu-funnel-btn,
body.edasys-app .dxbl-grid.headeralign:not(.quiet-grid) .dxbl-grid-filter-menu-funnel-btn svg {
    color: #fff !important;
    fill: #fff !important;
}

body.edasys-app .headeralign .dxbl-grid-table > thead .dxbl-grid-header-row > th:hover,
body.edasys-app .headeralign .dxbl-grid-table > thead .dxbl-grid-header-row > th.dx-state-hover,
body.edasys-app .headeralign .dxbl-grid-table > thead .dxbl-grid-header-row > th.dxbl-grid-header-sortable:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}


/* ---------------------------------------------------------------------------
   City ComboBox: keep the clear (X) button subtle at rest.
   --------------------------------------------------------------------------- */
body.edasys-app .city-combo .dxbl-edit-btn-clear {
    opacity: 1;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    --dxbl-btn-bg: transparent;
    --dxbl-btn-hover-bg: transparent;
    --dxbl-btn-active-bg: transparent;
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-hover-border-color: transparent;
    --dxbl-btn-active-border-color: transparent;
    --dxbl-btn-box-shadow: none;
    --dxbl-btn-hover-box-shadow: none;
    --dxbl-btn-active-box-shadow: none;
}

/* Show the clear (X) button only while the user hovers the city combo,
   matching the "χαρακτηρισμός" dropdown in the product edit form. */
body.edasys-app .city-combo:not(:hover) .dxbl-edit-btn-clear {
    opacity: 0;
    pointer-events: none;
}

body.edasys-app .city-combo .dxbl-edit-btn-clear:hover,
body.edasys-app .city-combo .dxbl-edit-btn-clear:focus-visible {
    opacity: 1;
    background: transparent !important;
    box-shadow: none !important;
}

/* Clickable document numbers (e.g. the «Παραστατικό» column in grids). */
.balance-name-link {
    color: var(--bs-primary);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in srgb, var(--bs-primary), transparent 55%);
}

.balance-name-link:hover,
.balance-name-link:focus-visible {
    color: color-mix(in srgb, var(--bs-primary), black 20%);
    border-bottom-style: solid;
}