/* ═══════════════════════════════════════════════════════════
   Μόνο ό,τι χρειάζεται το ίδιο το Blazor. Το style.css μένει
   αυτούσιο, όπως ήρθε από το prototype.
   ═══════════════════════════════════════════════════════════ */

/* Το banner σφάλματος υπάρχει πάντα στο DOM και εμφανίζεται μόνο όταν συμβεί σφάλμα. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: #fff3cd;
    border-top: 1px solid #ffe69c;
    color: #664d03;
    font-size: 14px;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, .12);
}

#blazor-error-ui .reload {
    margin-left: 10px;
    color: var(--accent, #1c56d4);
    text-decoration: underline;
    cursor: pointer;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 16px;
    top: 10px;
    cursor: pointer;
}

/* Το <FocusOnNavigate Selector="h1"> εστιάζει τον τίτλο σε κάθε πλοήγηση, ώστε ένας
   αναγνώστης οθόνης να ανακοινώνει τη νέα σελίδα. Για να το πετύχει, το Blazor βάζει
   tabindex="-1" στον τίτλο — και ο browser ζωγραφίζει δαχτυλίδι εστίασης γύρω από
   κείμενο που δεν είναι καν χειριστήριο.

   Κρύβεται ΜΟΝΟ για στοιχεία που εστιάζονται προγραμματιστικά. Τα πραγματικά
   χειριστήρια (σύνδεσμοι, κουμπιά, πεδία) κρατούν το δαχτυλίδι τους, που το χρειάζεται
   όποιος πλοηγείται με πληκτρολόγιο. */
[tabindex="-1"]:focus {
    outline: none;
}

/* Οι φόρμες επικύρωσης του Blazor δανείζονται τα χρώματα του design. */
.validation-message {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    color: #b42318;
}

.invalid {
    border-color: #b42318 !important;
}