/* ==========================================================================
   EDOEAP shared theming (Edoeap.Web.Theming)
   - Size-mode scaling: DevExpress component density is driven by the
     "ParentSizeMode" cascade; these rules scale the surrounding application
     text/titles so the whole UI grows and shrinks together.
   - Fallback navigation icons: the few metaphors with no DevExpress Icon
     Library match are rendered as CSS masks tinted with currentColor, so they
     recolor automatically for light and dark themes.
   - Two colour sources, deliberately: DevExpress component internals flow from
     the Fluent design-system tokens (--dxds-*), while the application shell
     (header, sidebar, content surface, panels, watermark) is skinned with the
     EDOEAP brand tokens (--edoeap-*) declared in the :root block below. Those
     are the only literal hex values in the repo — everything else references
     them, so a brand change is edited in exactly one place.
   ========================================================================== */

/* --- Brand accent aliases -------------------------------------------------
   Page/scoped CSS still references --kind-accent / --kind-accent-dark (previously
   set to a static per-app hex on the old shell). Alias them to the Fluent accent
   tokens so every accent usage becomes theme-aware and picks up each app's brand
   accent automatically (light and dark). */
:root {
    --kind-accent: var(--dxds-color-surface-primary-default-rest);
    --kind-accent-dark: var(--dxds-color-content-primary-default-rest);

    /* --- EDOEAP design-system tokens (from the shared Figma "Design System EDOE")
       Primitives → Semantics. These drive the app *shell* (header, sidebar,
       content surface, brand watermark). DevExpress component internals still
       flow from the Fluent --dxds-* tokens; these only skin the shared chrome. */
    --edoeap-color-primary: #3080ea;      /* brand/primary — active nav, primary button */
    --edoeap-color-primary-dark: #186edf; /* primary pressed/hover */
    --edoeap-color-primary-2: #cde2ff;    /* primary light */
    --edoeap-color-primary-3: #e1edff;    /* primary light 2 — hovered/expanded nav */
    --edoeap-color-primary-4: #eef5ff;    /* primary lightest */
    --edoeap-color-secondary: #003274;    /* brand secondary navy — header background */
    --edoeap-color-neutral: #00204a;      /* darkest navy — primary text */
    --edoeap-color-neutral-2: #5f6e82;    /* muted text */
    --edoeap-color-tertiary: #eec319;     /* gold accent (logo "my") */
    --edoeap-color-success: #48ce88;
    --edoeap-color-error: #de5151;
    --edoeap-color-warning: #ffbd2d;
    --edoeap-color-system-5: #f5f5f5;
    --edoeap-color-system-10: #f2f2f2;
    --edoeap-color-system-20: #dbdbdb;
    --edoeap-color-system-30: #c5c5c5;
    --edoeap-color-system-50: #8f8f8f;
    --edoeap-color-white: #ffffff;
    --edoeap-color-white-grey: #f4f4f4;   /* page/content background */

    /* Shell roles */
    --edoeap-header-bg: var(--edoeap-color-secondary);
    --edoeap-header-fg: var(--edoeap-color-white);
    --edoeap-header-height: 76px;
    --edoeap-sidebar-bg: var(--edoeap-color-white);
    --edoeap-page-bg: var(--edoeap-color-white-grey);

    /* Form panels styled like the AFM/AMKA login card: white surface, subtle
       border, primary top accent, rounded corners, soft shadow. */
    --edoeap-form-bg: var(--edoeap-color-white);
    --edoeap-form-border: var(--edoeap-color-system-20);
    --edoeap-form-radius: 10px;

    /* --- Expense status colours ------------------------------------------
       The colour of a submitted expense carries meaning for the member:
       rejected, costed and paid must be distinguishable at a glance. One base
       colour per stage; the badge derives its background, border and text from
       it, so changing a stage's colour is a one-line edit here. The stage a
       badge gets is decided in ExpenseStatusResolver.StatusColors. */
    --edoeap-status-registered: var(--edoeap-color-neutral-2); /* καταχωρημένη — ουδέτερο */
    --edoeap-status-review: #7a5af8;                           /* προς έλεγχο — μωβ */
    --edoeap-status-approved: var(--edoeap-color-primary);     /* ελέγχθηκε — μπλε */
    --edoeap-status-action: var(--edoeap-color-warning);       /* θέλει ενέργεια — πορτοκαλί */
    --edoeap-status-rejected: var(--edoeap-color-error);       /* απορρίφθηκε — κόκκινο */
    --edoeap-status-settled: #00a3a8;                          /* κοστολογήθηκε — τιρκουάζ */
    --edoeap-status-payment: #2f9e6b;                          /* προς πληρωμή — πράσινο σκούρο */
    --edoeap-status-paid: var(--edoeap-color-success);         /* πληρώθηκε — πράσινο */
    --edoeap-status-unknown: var(--edoeap-color-system-50);    /* άγνωστη — γκρι */

    /* --- Gender colours (πλαίσια εμμέσων μελών) ---------------------------
       Ο πελάτης ζήτησε χρωματικό διαχωρισμό ανά φύλο και έδωσε ο ίδιος τα δύο
       χρώματα. Σκόπιμα ΟΧΙ γαλάζιο/ροζ — το δίπολο είναι στερεότυπο και δεν
       προσθέτει τίποτα στην αναγνωσιμότητα. Το φύλο παράγεται από τον
       MemberGenderResolver και ΔΕΝ είναι πάντα γνωστό — γι' αυτό υπάρχει και η
       ουδέτερη τρίτη τιμή. Το χρώμα δεν είναι ποτέ ο μόνος φορέας της
       πληροφορίας: η ετικέτα σχέσης μένει πάντα ορατή δίπλα του.
       Τα δύο χρώματα τα δίνει ο πελάτης· ήταν τιρκουάζ/μωβ (γράφημα «Women Mean
       Business» των Telegraph/Datawrapper) και έγιναν το navy και το χρυσό του
       ΕΔΟΕΑΠ — ουσιαστικά το ζεύγος --edoeap-color-secondary / -tertiary, οπότε
       οι καρτέλες πλέον ανήκουν οπτικά στην ταυτότητα του οργανισμού. Οι -soft
       είναι η ίδια απόχρωση ~12% πάνω σε λευκό: τα πλαίσια πρέπει να
       διαβάζονται με navy κείμενο, όχι να φωνάζουν. */
    --edoeap-gender-male: #1c3470;                             /* navy — αναφορά πελάτη */
    --edoeap-gender-male-soft: #e4e7ee;
    --edoeap-gender-female: #e2c347;                           /* χρυσό — αναφορά πελάτη */
    --edoeap-gender-female-soft: #fcf8e9;
    --edoeap-gender-unknown: var(--edoeap-color-neutral-2);    /* αδιευκρίνιστο — γκρι */
    --edoeap-gender-unknown-soft: var(--edoeap-color-system-5);
}

/* --- Application-wide size mode ------------------------------------------- */
body.small-size { font-size: 0.8125rem; }
body.medium-size { font-size: 0.875rem; }
body.large-size { font-size: 1rem; }

body.small-size .app-title { font-size: var(--dxds-font-size-base-lg); }
body.medium-size .app-title { font-size: var(--dxds-font-size-title-md); }
body.large-size .app-title { font-size: var(--dxds-font-size-title-lg); }

/* --- Shared DevExpress shell (DxDrawer + DxTreeView + DxToolbar) ---------- */
.dx-app-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* Mobile browsers count the collapsing address bar inside 100vh, so the last
       rows of a page sit under it until the user scrolls. 100dvh follows the
       visible viewport instead; the 100vh above stays as the fallback. */
    height: 100dvh;
}

.dx-app-header {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
    background-color: var(--dxds-color-surface-neutral-default-rest);
}

.dx-app-body {
    flex: 1 1 auto;
    min-height: 0;
}

.dx-app-title {
    font-family: var(--dxds-font-family-sans-serif);
    font-weight: var(--dxds-font-weight-base-strong, 600);
    color: var(--dxds-color-content-neutral-default-rest);
    white-space: nowrap;
}

.dx-app-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.dx-app-brand img {
    height: 2rem;
    width: auto;
}

.dx-app-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.dx-app-brand-org {
    font-weight: var(--dxds-font-weight-base-strong, 600);
    color: var(--dxds-color-content-neutral-default-rest);
}

.dx-app-brand-sub {
    font-size: var(--dxds-font-size-base-sm, 0.75rem);
    color: var(--dxds-color-content-neutral-subtle-rest, var(--dxds-color-content-neutral-subdued-rest));
}

.dx-app-drawer-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dx-app-nav {
    flex: 1 1 auto;
    overflow-y: auto;
}

.dx-app-drawer-footer {
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--dxds-color-border-neutral-default-rest);
}

/* Sign-out lives in the sidebar for every app: full width, left aligned, so it reads as the
   last item of the navigation list rather than a floating button. */
.dx-app-drawer-footer .dx-app-logout {
    width: 100%;
    justify-content: flex-start;
}

.dx-app-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
    padding: 1rem;
}

/* Λίγος αέρας κάτω από το τελευταίο στοιχείο κάθε σελίδας: η σελίδα δεν πρέπει να
   κόβεται ακριβώς εκεί που τελειώνει το περιεχόμενό της.

   Γιατί ψευδοστοιχείο και όχι `padding-bottom` εδώ: το περιεχόμενο ξεχειλίζει από
   τον scroller, και το κάτω padding ενός στοιχείου με `overflow: auto` δεν
   ακολουθεί αξιόπιστα σε όλους τους browsers ό,τι ξεχειλίζει. Ένα πραγματικό flex
   item το ακολουθεί πάντα — και δεν κοστίζει scrollbar σε κοντές σελίδες, γιατί
   εκεί απλώς κάθεται μέσα στον ελεύθερο χώρο που ήδη υπάρχει. */
.dx-app-content::after {
    content: "";
    flex: 0 0 1.75rem;
}

/* --- Data grids: vertical scrolling instead of a pager --------------------
   Data grids scroll their rows internally (with sticky header/footer) rather
   than paging. The DevExpress grid root caps its height with the
   --dxbl-grid-max-height variable (10000px by default, i.e. unbounded); we lower
   it so a grid never runs past the bottom of the screen. Short grids still
   collapse to their content (the root is a flex column). The `.dxbl-grid`
   qualifier raises specificity so our value wins regardless of stylesheet load
   order. Pages with tall content above a grid can shrink the cap locally by
   setting --edoeap-grid-max-height. Printing restores the unbounded height so
   every row appears on paper. */
.dxbl-grid.edoeap-grid,
.dxbl-grid.admin-grid,
.dxbl-grid.benefit-grid {
    --dxbl-grid-max-height: var(--edoeap-grid-max-height, calc(100vh - 15rem));
    /* Fill the available width of the page/container. DxGrid uses a fixed table
       layout, so columns are sized via each column's Width/MinWidth; when their
       combined width exceeds this box the grid shows its own horizontal scrollbar
       (columns keep their MinWidth instead of collapsing). */
    width: 100%;
}

/* Keep filter-row combo boxes compact and full-width within their cell. */
.edoeap-grid-filter-combo {
    width: 100%;
}

@media print {
    .dxbl-grid.edoeap-grid,
    .dxbl-grid.admin-grid,
    .dxbl-grid.benefit-grid {
        --dxbl-grid-max-height: 10000px;
    }
}

/* Sidebar user card */
.dx-app-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.25rem;
    min-width: 0;
}

.dx-app-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--dxds-color-surface-primary-default-rest);
    color: var(--dxds-color-content-primary-on-primary-rest, #fff);
    font-weight: var(--dxds-font-weight-base-strong, 600);
    font-size: 0.85rem;
}

.dx-app-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.dx-app-user-name {
    font-weight: var(--dxds-font-weight-base-strong, 600);
    color: var(--dxds-color-content-neutral-default-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dx-app-user-badge {
    font-size: var(--dxds-font-size-base-sm, 0.75rem);
    color: var(--dxds-color-content-neutral-subtle-rest, var(--dxds-color-content-neutral-subdued-rest));
}

/* For a member the avatar opens their details, so it is a <button>. Everything a button brings
   with it — border, background, inherited-but-not-quite font — is undone here, so it looks exactly
   like the static block it replaces; only the pointer and the focus ring say it does something. */
.dx-app-user-button {
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dx-app-user-button:focus-visible {
    outline: 2px solid var(--dxds-color-border-primary-default-rest, currentColor);
    outline-offset: 2px;
    border-radius: 4px;
}

/* The same card at the top of the drawer, for the phones where the header avatar does not fit.
   Hidden by default; the media query below — the one that hides the avatar — turns it on. */
.dx-app-drawer-user {
    display: none;
}

/* --- Fallback navigation icons (no DevExpress Icon Library match) --------- */
.edoeap-nav-icon {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.edoeap-nav-health {
    -webkit-mask-image: url("../icons/health.svg");
    mask-image: url("../icons/health.svg");
}

.edoeap-nav-idcard {
    -webkit-mask-image: url("../icons/idcard.svg");
    mask-image: url("../icons/idcard.svg");
}

.edoeap-nav-stethoscope {
    -webkit-mask-image: url("../icons/stethoscope.svg");
    mask-image: url("../icons/stethoscope.svg");
}

.edoeap-nav-vote {
    -webkit-mask-image: url("../icons/vote.svg");
    mask-image: url("../icons/vote.svg");
}

/* ==========================================================================
   EDOEAP member portals — Figma "Design System EDOE" skin.
   Every rule below is scoped to `.dx-app-portal`, a marker class carried only
   by the shared MainLayout (Edoeap.Web.Shared) that the three member portals
   use: Edoeap, Edoeap.Doctor and Edoeap.Pensioner. The Edoeap.Services and
   Edoeap.Auth apps reuse the same .dx-app-* chrome classes but have their own
   layouts (no .dx-app-portal), so they keep the original look untouched.
   ========================================================================== */

/* Top bar: navy background, white foreground, fixed height, left-pinned logo.
   position:relative anchors the absolutely-centered platform title. */
.dx-app-portal .dx-app-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--edoeap-header-height);
    padding: 0 1rem;
    border-bottom: none;
    background-color: var(--edoeap-header-bg);
    color: var(--edoeap-header-fg);
}

/* Platform title (e.g. "Πλατφόρμα Συνταξιούχων") centered across the header,
   independent of the logo width on the left and the controls on the right. */
.dx-app-portal .dx-app-header .dx-app-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    font-size: 1.05rem;
}

.dx-app-portal .dx-app-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}

.dx-app-portal .dx-app-logo img {
    height: 2.75rem;
    width: auto;
    display: block;
}

/* Toolbar fills the rest of the bar and turns transparent so the navy shows. */
.dx-app-portal .dx-app-header .dx-app-toolbar {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Force toolbar content (title, buttons, DevExpress currentColor icons) white. */
.dx-app-portal .dx-app-header,
.dx-app-portal .dx-app-header .dx-app-title,
.dx-app-portal .dx-app-header .dxbl-toolbar,
.dx-app-portal .dx-app-header .dxbl-toolbar-item,
.dx-app-portal .dx-app-header .dxbl-toolbar .dxbl-btn,
.dx-app-portal .dx-app-header .dxbl-toolbar .dxbl-text {
    color: var(--edoeap-header-fg);
    --dxbl-btn-color: var(--edoeap-header-fg);
}

/* Toolbar icons may be currentColor <svg> or plain <img> SVGs; the filter
   forces either form to render white against the navy bar (logo is excluded —
   it lives in .dx-app-logo, outside the toolbar). */
.dx-app-portal .dx-app-header .dxbl-toolbar .dxbl-image,
.dx-app-portal .dx-app-header .dxbl-toolbar img,
.dx-app-portal .dx-app-header .dxbl-toolbar svg {
    color: var(--edoeap-header-fg);
    fill: currentColor;
    filter: brightness(0) invert(1);
}

/* Toolbar controls (hamburger, font-size dropdown, theme, logout) sit on the
   navy bar: transparent by default, subtle translucent-white on hover/focus/
   active so text + icon stay readable. Fixes the white-box rest state and the
   invisible/washed-out hover reported on the size dropdown, burger and logout. */
.dx-app-portal .dx-app-header .dxbl-toolbar .dxbl-btn {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--edoeap-header-fg);
}

.dx-app-portal .dx-app-header .dxbl-toolbar .dxbl-btn:hover,
.dx-app-portal .dx-app-header .dxbl-toolbar .dxbl-btn:focus,
.dx-app-portal .dx-app-header .dxbl-toolbar .dxbl-btn:focus-visible,
.dx-app-portal .dx-app-header .dxbl-toolbar .dxbl-btn:active,
.dx-app-portal .dx-app-header .dxbl-toolbar .dxbl-btn.dxbl-active {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: transparent;
    color: var(--edoeap-header-fg);
}

/* Keep the dropdown popup (size menu) readable: it renders on a white surface
   outside the navy bar, so its items use the normal dark-on-light treatment. */
.dxbl-dropdown .dxbl-btn .dxbl-image,
.dxbl-dropdown .dxbl-btn img,
.dxbl-dropdown .dxbl-btn svg {
    filter: none;
}

/* Sidebar / drawer: white surface. */
.dx-app-portal .dx-app-drawer .dxbl-drawer-panel,
.dx-app-portal .dx-app-drawer-body {
    background-color: var(--edoeap-sidebar-bg);
}

.dx-app-portal .dx-app-nav {
    padding: 0.75rem 0.5rem 0;
}

.dx-app-portal .dx-app-drawer-footer {
    border-top: 1px solid var(--edoeap-color-system-30);
}

/* Brand watermark pinned to the sidebar bottom (Figma: 98x50, #c5c5c5, centered,
   above a 1px top border). Rendered as a CSS mask tinted with the neutral grey. */
.dx-app-portal .dx-app-watermark {
    width: 98px;
    height: 50px;
    margin: 0.5rem auto 0.25rem;
    background-color: var(--edoeap-color-system-30);
    -webkit-mask: url("../icons/edoeap-oval.svg") center / contain no-repeat;
    mask: url("../icons/edoeap-oval.svg") center / contain no-repeat;
}

/* Content surface: light grey page background. */
.dx-app-portal .dx-app-content {
    background-color: var(--edoeap-page-bg);
}

/* Header user block (Figma avatar): white name, light-blue role, avatar circle
   in light-blue with navy initials, sitting on the navy bar. */
.dx-app-portal .dx-app-header .dx-app-user {
    gap: 0.6rem;
    padding: 0 0.25rem;
}

.dx-app-portal .dx-app-header .dx-app-user-avatar {
    background-color: var(--edoeap-color-primary-2);
    color: var(--edoeap-color-secondary);
}

.dx-app-portal .dx-app-header .dx-app-user-name {
    color: var(--edoeap-header-fg);
}

.dx-app-portal .dx-app-header .dx-app-user-badge {
    color: var(--edoeap-color-primary-2);
}

/* --- Portal header on small screens ---------------------------------------
   The bar is one non-wrapping flex row — logo | toolbar — with the platform
   title absolutely centred on top of both. On a phone the three fight over the
   same ~340px, which produced exactly the two reported symptoms:

   * things overlap — the title is `position: absolute`, so it reserves no space
     in the row at all and is simply painted over the logo and the buttons;
   * things are missing — the toolbar is `flex: 1 1 auto`, but a flex item's
     default `min-width: auto` equals its content width, so it could never
     actually shrink. Its right-hand items (μέγεθος, αποσύνδεση, avatar) were
     pushed past the edge of the bar instead of collapsing into the DevExpress
     adaptive menu.

   Below, the second is fixed at every width and the first by dropping the least
   useful content as the bar gets narrower. Desktop widths are unaffected. */

/* Not a mobile fix: without it the toolbar can never give ground and DevExpress
   adaptivity never gets a chance to trigger, at any screen size. */
.dx-app-portal .dx-app-header .dx-app-toolbar {
    min-width: 0;
}

/* ≤991px — the name and the role are the first things the bar can do without;
   the avatar alone still says whose session this is. */
@media (max-width: 61.9375em) {
    .dx-app-portal .dx-app-header .dx-app-user-info {
        display: none;
    }
}

/* ≤767px — the DxLayoutBreakpoint threshold, where the drawer has already
   become an overlay and the header is the only navigation left on screen. */
@media (max-width: 47.9375em) {
    /* Set on the shell, not on the header, so anything that later sizes itself
       against the bar sees the same value. */
    .dx-app-portal {
        --edoeap-header-height: 3.5rem;
    }

    .dx-app-portal .dx-app-header {
        gap: 0.5rem;
        padding: 0 0.5rem;
    }

    /* Hidden rather than narrowed: an absolutely positioned element cannot take
       part in the row, so any width it keeps is width it steals from the logo
       and the buttons. Both the drawer and the page heading name the
       application, so nothing is actually lost here. */
    .dx-app-portal .dx-app-header .dx-app-title {
        display: none;
    }

    .dx-app-portal .dx-app-logo img {
        height: 2rem;
    }
}

/* ≤575px — on the narrowest phones the avatar goes too, so that the three
   controls that actually do something (μενού, μέγεθος γραμμάτων, αποσύνδεση)
   always fit. The sign-out in the header is the only one reachable here: the
   drawer starts closed on a small screen. */
@media (max-width: 35.9375em) {
    .dx-app-portal .dx-app-header .dx-app-user {
        display: none;
    }

    /* …and with it goes the only way into the member's details, so the same card moves to the top
       of the drawer. Deliberately the same breakpoint: the two cannot drift apart. */
    .dx-app-portal .dx-app-drawer-user {
        display: block;
    }
}

/* Buttons: Figma corner radius (6px). Colours already flow from the primary
   accent (#3080ea) via the Fluent theme; this only aligns the geometry. */
.dx-app-portal .dxbl-btn {
    border-radius: 6px;
}

/* Button icons: DevExpress renders Icon-Library glyphs as fixed-colour images,
   so on the filled primary (blue) button they don't inherit the white text
   colour and look faint. Force them white to match the label. Scoped to the
   primary render style so secondary/outline buttons keep their dark glyphs. */
.dx-app-portal .dxbl-btn[class*="primary"] .dxbl-image,
.dx-app-portal .dxbl-btn[class*="primary"] img,
.dx-app-portal .dxbl-btn[class*="primary"] svg {
    filter: brightness(0) invert(1);
}

/* DxFormLayout groups → figma "login card" look. DevExpress paints the group's
   OWN frame through CSS variables (--dxbl-fl-group-* → --dxbl-group-*); a plain
   `border: none` can't beat that, so we zero the native frame via the variables.
   The edoeap-form-group class (added to every DxFormLayoutGroup root) then
   supplies the single card: white surface, subtle border, primary top accent,
   rounded corners and a soft shadow. The form-layout root (.dxbl-fl) stays
   transparent. DxForm fields themselves are untouched. */
.dx-app-portal {
    --dxbl-fl-group-bg: transparent;
    --dxbl-fl-group-border-width: 0;
    --dxbl-fl-group-border-color: transparent;
}

.dx-app-portal .dxbl-fl {
    background-color: transparent;
}

.dx-app-portal .edoeap-form-group {
    background-color: var(--edoeap-form-bg);
    border: 1px solid var(--edoeap-form-border);
    border-top: 5px solid var(--edoeap-color-primary);
    border-radius: var(--edoeap-form-radius);
    box-shadow: var(--dxds-box-shadow-lg);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.dx-app-portal .edoeap-form-group .dxbl-group {
    --dxbl-group-border-color: transparent;
}

/* --- Expense status badge -------------------------------------------------
   Used by the "Προβολή καταχωρημένων δαπανών" grid. The colour is information,
   not decoration: the member reads the stage of a claim from it. Each variant
   supplies one base colour; the badge derives a tinted surface, a stronger
   border and a darkened, readable label from that single value, so all nine
   stages stay visually consistent and any one of them can be retuned by editing
   its --edoeap-status-* variable alone.
   Mixing against white is safe here: dark mode is off in the member portals
   (EnableDarkMode = false in Edoeap, Edoeap.Pensioner, Edoeap.Doctor). */
.expense-status {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--expense-status-color) 40%, #fff);
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--expense-status-color) 14%, #fff);
    color: color-mix(in srgb, var(--expense-status-color) 72%, #000);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.expense-status-registered { --expense-status-color: var(--edoeap-status-registered); }
.expense-status-review     { --expense-status-color: var(--edoeap-status-review); }
.expense-status-approved   { --expense-status-color: var(--edoeap-status-approved); }
.expense-status-action     { --expense-status-color: var(--edoeap-status-action); }
.expense-status-rejected   { --expense-status-color: var(--edoeap-status-rejected); }
.expense-status-settled    { --expense-status-color: var(--edoeap-status-settled); }
.expense-status-payment    { --expense-status-color: var(--edoeap-status-payment); }
.expense-status-paid       { --expense-status-color: var(--edoeap-status-paid); }
.expense-status-unknown    { --expense-status-color: var(--edoeap-status-unknown); }

/* --- Gender accent --------------------------------------------------------
   Same idea as the expense badge above: the modifier only names two colours and
   every rule that draws with them lives in the component's own scoped CSS. That
   keeps one drawing rule instead of three, and lets other screens adopt the
   accent later without copying any styling. Applied by IndirectMemberForm. */
.edoeap-gender-male {
    --edoeap-gender-accent: var(--edoeap-gender-male);
    --edoeap-gender-accent-soft: var(--edoeap-gender-male-soft);
}

.edoeap-gender-female {
    --edoeap-gender-accent: var(--edoeap-gender-female);
    --edoeap-gender-accent-soft: var(--edoeap-gender-female-soft);
}

.edoeap-gender-unknown {
    --edoeap-gender-accent: var(--edoeap-gender-unknown);
    --edoeap-gender-accent-soft: var(--edoeap-gender-unknown-soft);
}