@import url('./icons.css');

html, body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.text-danger {
    color: var(--dxds-color-content-danger-default-rest);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--dxds-color-border-success-default-rest);
}

.invalid {
    outline: 1px solid var(--dxds-color-border-danger-default-rest);
}

.validation-message {
    color: var(--dxds-color-content-danger-default-rest);
}

.button-link {
    text-decoration: unset;
}

/* Κεντραρισμένη επικεφαλίδα σε κάθε σελίδα των πυλών μελών (Αίτημα 39). Ήταν αριστερά
   παντού, ενώ οι τίτλοι των πλαισίων μέσα στις σελίδες ήταν ήδη κεντραρισμένοι σε όσες
   οθόνες είχαν περάσει από ανασχεδίαση — από εκεί προερχόταν η ασυνέπεια. Ο κανόνας μπαίνει
   εδώ, μία φορά, ώστε να μη μπορεί μια νέα σελίδα να ξεφύγει. Το .title είναι flex column,
   οπότε το align-items κεντράρει τίτλο και υπότιτλο ως μπλοκ· το text-align φροντίζει τον
   υπότιτλο όταν σπάει σε δεύτερη γραμμή. Το back-office (Edoeap.Services) έχει δικό του
   site.css και δεν επηρεάζεται. */
.title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1rem 0;
}

.title.title-secondary {
    padding: 0.313rem 0 0;
    color: var(--dxds-color-content-secondary-default-rest);
}

.title-header-text {
    font-size: var(--dxds-font-size-headline-lg);
    font-weight: var(--dxds-font-weight-headline-default);
    letter-spacing: var(--dxds-letter-spacing-headline-lg);
    line-height: var(--dxds-line-height-headline-lg);
}

.title-content-text {
    font-size: var(--dxds-font-size-base-lg);
    font-weight: var(--dxds-font-weight-base-default);
    letter-spacing: var(--dxds-letter-spacing-base-lg);
    line-height: var(--dxds-line-height-base-lg);
}

.form-actions {
    display: flex;
    gap: 0.625rem;
    justify-content: flex-end;
    margin-top: 0.625rem;
}

.main-content {
    display: flex;
    flex-direction: column;
    /* Γεμίζει το ύψος όταν η σελίδα είναι κοντή, μεγαλώνει με το περιεχόμενο όταν
       είναι μακριά (`flex-shrink: 0`). Ήταν `height: 100%`, που κρατούσε το κουτί
       στο ύψος της οθόνης και άφηνε το περιεχόμενο να ξεχειλίζει από κάτω του —
       οπότε το κενό που κρατά ο scroller (.dx-app-content::after) ήταν το μόνο
       σημείο που μπορούσε να το ακολουθήσει. */
    flex: 1 0 auto;
    width: 100%;
    /* Widened from 75rem so data-grid pages use more of the viewport on large screens
       while still centering (and collapsing to 100% on smaller screens). */
    max-width: 105rem;
    margin-left: auto;
    margin-right: auto;
}

/* Form pages opt into a narrower container. The 105rem above exists for data grids; on a
   two-column form it stretches each field to ~50rem, so the eye has to travel the width of the
   screen from the caption to the value it belongs to — the opposite of what the older, less
   computer-literate members need. 64rem ≈ two columns of ~30rem plus the gap. */
.main-content-narrow {
    max-width: 64rem;
}

/* ── .page-panel: το περιεχόμενο της σελίδας ως ένα διακριτικό πλαίσιο ──────────
   Εγκρίθηκε στο Αίτημα 39 (δοκιμή στην «Ταυτότητα Οφειλής») και επεκτάθηκε σε όλες
   τις σελίδες στο Αίτημα 40.

   Σκόπιμα υποτονικό: μία ήπια γραμμή, στρογγυλεμένες γωνίες και η μικρότερη σκιά του
   theme (xs) — αρκετά για να ξεχωρίζει η καρτέλα από το φόντο, όχι τόσο ώστε να τραβά
   το βλέμμα από το περιεχόμενο. Τα tokens ακολουθούν το θέμα, άρα δουλεύει και σε
   dark mode. */
.page-panel {
    background-color: var(--dxds-color-surface-neutral-default-rest, #fff);
    border: 1px solid var(--dxds-color-border-neutral-default-rest, rgba(16, 24, 40, 0.10));
    border-radius: 0.75rem;
    padding: 1.75rem;
    box-shadow: var(--dxds-box-shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.05));
}

/* Σελίδες με πίνακα δεδομένων (Αίτημα 40). Ο πίνακας κρατά το δικό του λεπτό
   περίγραμμα — «πίνακας μέσα σε καρτέλα», όχι διπλό πλαίσιο, αρκεί να τα χωρίζει
   καθαρός χώρος. Το padding μικραίνει επειδή ο πίνακας φέρνει ήδη δικό του, και το
   ύψος του πίνακα κατεβαίνει κατά τα 2rem που προσθέτει το πλαίσιο πάνω-κάτω:
   αλλιώς ο πίνακας θα ξεπερνούσε το κάτω μέρος της οθόνης και θα κυλούσε η σελίδα
   αντί για τον πίνακα. Το --edoeap-grid-max-height είναι το προβλεπόμενο σημείο
   παρέμβασης — δες theming.css, .dxbl-grid.edoeap-grid. */
.page-panel-grid {
    padding: 1rem;
    --edoeap-grid-max-height: calc(100vh - 17rem);
}

/* Σε στενή οθόνη το πλαίσιο θα άφηνε δύο άχρηστες λωρίδες δεξιά κι αριστερά. */
@media (max-width: 35.9375em) {
    .page-panel {
        border-left: none;
        border-right: none;
        border-radius: 0;
        padding: 1.25rem 1rem;
    }

    .page-panel-grid {
        padding: 0.75rem 0.5rem;
    }
}

/* Το πλαίσιο είναι διακόσμηση της οθόνης, όχι του εγγράφου: στην εκτύπωση δεν
   πρέπει να εμφανιστεί ούτε όταν η ίδια η .page-panel είναι η περιοχή εκτύπωσης. */
@media print {
    .page-panel {
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }
}

/* Inactivity auto-logout warning (see wwwroot/js/edoeap-idle.js). */
.edoeap-idle-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 27, 43, 0.55);
    z-index: 13000;
}

.edoeap-idle-card {
    background: #fff;
    max-width: 420px;
    width: calc(100% - 2.5rem);
    padding: 1.75rem 2rem;
    border-radius: 0.75rem;
    text-align: center;
    box-shadow: 0 24px 60px rgba(2, 12, 27, 0.45);
    border-top: 5px solid #1B5FA8;
}

.edoeap-idle-card h2 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: #1f2a37;
}

.edoeap-idle-card p {
    margin: 0 0 1.25rem;
    color: #51607a;
    line-height: 1.5;
}

.edoeap-idle-card .edoeap-idle-stay {
    padding: 0.7rem 1.4rem;
    border: none;
    border-radius: 0.5rem;
    background: #1B5FA8;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.edoeap-idle-card .edoeap-idle-stay:hover {
    background: #134577;
}

/* Print: render only the marked document region and hide the app shell (used by the window.print
   callers — certificates, insurance card, debt identity, expense detail). Mark a printable region
   with class="edoeap-print". */
@media print {
    body * {
        visibility: hidden;
    }

    .edoeap-print,
    .edoeap-print * {
        visibility: visible;
    }

    .edoeap-print {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Action buttons inside a print region must not appear on paper. */
    .edoeap-print .form-actions {
        display: none !important;
    }
}

/* Around twenty pages already mark their failure messages with .alert-error, but the class had no
   rule anywhere in the repo — so every one of those messages rendered as plain body text, easy to
   miss. Matches .appointment-slot below, in the danger palette.

   Το ίδιο ίσχυε και για τις άλλες τρεις παραλλαγές: οι σελίδες έγραφαν class="alert-success" ή
   "alert-info" και από κάτω ένα inline style= που έκανε τη δουλειά — και όπου το inline style
   έλειπε (ProviderSubmission, DoctorVisitExpenses), η μοναδική επιβεβαίωση υποβολής έβγαινε σκέτο
   κείμενο. Ένας κανόνας εδώ, καμία inline δήλωση στις σελίδες. */
.alert-error,
.alert-success,
.alert-info,
.alert-warning {
    /* Το margin ήταν κι αυτό inline σε κάθε σελίδα (15px, 10px, 16px κατά περίπτωση) — τώρα είναι
       μέρος του κανόνα, ώστε ένα μήνυμα να μη κολλάει ποτέ στο επόμενο στοιχείο. */
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid currentColor;
    border-left-width: 4px;
    border-radius: 4px;
}

.alert-error {
    border-color: var(--dxds-color-border-danger-default-rest, #f1b4b0);
    background: var(--dxds-color-surface-danger-subdued-rest, #fde7e7);
    color: var(--dxds-color-content-danger-default-rest, #b42318);
}

.alert-success {
    border-color: var(--dxds-color-border-success-default-rest, #a6d5b4);
    background: var(--dxds-color-surface-success-subdued-rest, #e6f4ea);
    color: var(--dxds-color-content-success-default-rest, #1e7e34);
}

.alert-info {
    border-color: var(--dxds-color-border-info-default-rest, #b3cdf0);
    background: var(--dxds-color-surface-info-subdued-rest, #e7f0fb);
    color: var(--dxds-color-content-info-default-rest, #134577);
}

.alert-warning {
    border-color: var(--dxds-color-border-warning-default-rest, #f0d3a0);
    background: var(--dxds-color-surface-warning-subdued-rest, #fdf3e2);
    color: var(--dxds-color-content-warning-default-rest, #8a5a00);
}

/* Status badges (appointment status column, and reusable elsewhere). */
.appt-badge {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
}

.appt-badge-success {
    background: var(--dxds-color-surface-success-subdued-rest, #e6f4ea);
    color: var(--dxds-color-content-success-default-rest, #1e7e34);
}

.appt-badge-danger {
    background: var(--dxds-color-surface-danger-subdued-rest, #fde7e7);
    color: var(--dxds-color-content-danger-default-rest, #b42318);
}

.appt-badge-info {
    background: var(--dxds-color-surface-info-subdued-rest, #e7f0fb);
    color: var(--dxds-color-content-info-default-rest, #134577);
}

.appt-badge-neutral {
    background: var(--dxds-color-surface-neutral-subtle-rest, #eef2f6);
    color: var(--dxds-color-content-neutral-default-rest, #1f2a37);
}

/* ── Ηλεκτρονικά Ραντεβού ───────────────────────────────────────────────────
   The member's name and the "Νέο Ραντεβού" call to action share the top line,
   so the button is reachable without scrolling past the appointment history. */
.appointments-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--dxds-color-border-neutral-subtle-rest, #e3e8ef);
}

.appointments-member {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.appointments-member-name {
    font-weight: 600;
    font-size: var(--dxds-font-size-base-lg, 1rem);
}

.appointments-member-am {
    font-size: 0.85em;
    color: var(--dxds-color-content-neutral-subdued-rest, #5b6a7d);
}

/* The two row actions (details, cancel) on one line; they wrap on a narrow
   window rather than push the column wider. */
.appointment-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem 0.5rem;
}

/* Withdrawing a booking is destructive, so it is worth the one rule it takes to
   mark it: in Fluent every button variant rests on the same neutral text colour
   and only differs on hover, so Danger would have to be a solid red button —
   far too loud for something that repeats on every row. Overriding the variable
   rather than `color` keeps DevExpress's own hover and active states coherent,
   and the token follows the theme (danger-70 light, danger-90 dark). The glyph
   comes along on its own: --dxbl-image-fill is currentcolor. */
.appointment-actions .appointment-action-cancel {
    --dxbl-btn-color: var(--dxds-color-content-danger-default-rest, #b42318);
}

/* Label/value pairs in the details and cancel-confirmation popups. */
.appointment-details {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: 0.4rem 1rem;
    margin: 0.5rem 0;
}

.appointment-details > div {
    display: contents;
}

.appointment-details span {
    color: var(--dxds-color-content-neutral-subdued-rest, #5b6a7d);
}

.appointment-details strong {
    font-weight: 600;
    word-break: break-word;
}

/* The slot the availability search proposes — the one thing to read on the page. */
.appointment-slot {
    margin: 1rem 0;
    padding: 0.875rem 1rem;
    border: 1px solid var(--dxds-color-border-info-default-rest, #b9d2f2);
    border-left-width: 4px;
    border-radius: 4px;
    background: var(--dxds-color-surface-info-subdued-rest, #e7f0fb);
    color: var(--dxds-color-content-info-default-rest, #134577);
}

.appointment-slot-label {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.appointment-slot-value {
    font-size: 1.25em;
    font-weight: 600;
    text-transform: capitalize;
}

.appointment-slot-note {
    margin-top: 0.35rem;
    font-size: 0.9em;
}