/*
 * Θέμα εμφάνισης NYLC: «μαλακό» και συμπαγές (compact), με τα χρώματα του
 * λογότυπου — μπλε #215490 και χρυσό #B38E39 (μετρημένα από το
 * public/img/nylc2.png).
 *
 * ΠΩΣ ΔΟΥΛΕΥΕΙ
 *
 * Όλα τα χρώματα του θέματος είναι μεταβλητές `--nylc-*`, ορισμένες δύο
 * φορές: στο :root για το φωτεινό και στο .dark για το σκοτεινό. Οι κανόνες
 * από κάτω γράφονται ΜΙΑ φορά και απλώς διαβάζουν τις μεταβλητές. Έτσι το
 * σκοτεινό θέμα δεν είναι δεύτερο αντίγραφο που ξεχνιέται σε κάθε αλλαγή.
 *
 * ΓΙΑΤΙ ΚΕΡΔΙΖΕΙ ΧΩΡΙΣ !important: το στυλ του Filament 5 είναι μέσα σε
 * `@layer components`, και ό,τι είναι εκτός layer κερδίζει πάντα, όποιο κι
 * αν είναι το specificity. Το ίδιο ισχύει και για τους κανόνες σκοτεινού
 * θέματος του Filament (`:where(.dark, .dark *)`): τους υπερισχύουμε όλους
 * μαζί, γι' αυτό κάθε κανόνας εδώ πρέπει να δουλεύει και στα δύο θέματα —
 * δηλαδή να χρησιμοποιεί μεταβλητές, ποτέ σταθερό χρώμα.
 *
 * ΤΟ ΑΝΤΙΣΤΡΟΦΟ ΤΗΣ ΙΔΙΑΣ ΙΔΙΟΤΗΤΑΣ: ένας κανόνας εδώ καταπίνει και τις
 * παραλλαγές του Filament για το ίδιο στοιχείο (π.χ. `.fi-inline` χωρίς
 * περιθώρια). Γι' αυτό οι επιλογείς κρατούν τα ίδια `:not(...)` με τους
 * αντίστοιχους του Filament.
 *
 * Φορτώνεται μετά το nylc.css (render hook στον AdminPanelProvider).
 */

/* =============================================================== χρώματα */

:root {
    --nylc-blue: #215490;
    --nylc-gold: #b38e39;

    /* Η σελίδα: κρεμ με απόχρωση του χρυσού, όχι γκρι. */
    --nylc-page: #f7f4ec;
    /* Πλαϊνό μενού και πάνω μπάρα: λίγο πιο ανοιχτά από τη σελίδα. */
    --nylc-chrome: #fbf9f4;
    /* Κάρτες, πίνακες, φόρμες. */
    --nylc-surface: #ffffff;
    /* Κεφαλίδα πίνακα, πόδι, ενεργή καρτέλα. */
    --nylc-surface-alt: #fbf9f4;

    --nylc-line: #e6dfcf;
    --nylc-line-soft: #efeadf;
    --nylc-hover: #f5efe1;

    /* Ενεργό στοιχείο μενού και επιλεγμένη καρτέλα: μπλε του λογότυπου. */
    --nylc-active-bg: #e8eef7;
    --nylc-active-ink: #1a4475;

    --nylc-gold-soft: #f4ecd9;
    --nylc-gold-ink: #7a5f22;

    --nylc-shadow: 0 1px 2px rgb(66 52 20 / 0.06), 0 1px 1px rgb(66 52 20 / 0.03);
    --nylc-radius: 0.75rem;

    /*
     * Ανάγλυφο: «σηκωμένο» στοιχείο (μη επιλεγμένη καρτέλα φόρμας) και
     * «πατημένο» (η επιλεγμένη). Φως από πάνω: ανοιχτή γραμμή στην πάνω
     * ακμή, σκιά από κάτω. Οι σκιές έχουν τον ζεστό τόνο των --nylc-line,
     * γιατί η γκρι σκιά πάνω στο κρεμ φαίνεται βρόμικη.
     */
    --nylc-raised-from: #ffffff;
    --nylc-raised-to: #f6f1e5;
    --nylc-raised-edge: #ddd3bd;
    --nylc-raised-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 1px 0 #d5c9ae, 0 2px 4px rgb(66 52 20 / 0.12);
    --nylc-raised-shadow-hover: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 1px 0 #cfc2a4, 0 3px 7px rgb(66 52 20 / 0.16);
    --nylc-pressed-bg: var(--nylc-active-bg);
    --nylc-pressed-ink: var(--nylc-active-ink);
    --nylc-pressed-shadow: inset 0 2px 3px rgb(26 68 117 / 0.18), inset 0 0 0 1px rgb(33 84 144 / 0.28);
    --nylc-well: #f1ece0;
}

/*
 * Σκοτεινό: βαθύ μπλε του λογότυπου αντί για το ουδέτερο μαύρο του Filament.
 * Ο χρυσός ανοίγει λίγο, αλλιώς πάνω σε σκούρο μπλε δεν διαβάζεται.
 */
.dark {
    --nylc-gold: #d1ac5a;

    --nylc-page: #0a1424;
    --nylc-chrome: #0c182b;
    --nylc-surface: #101e34;
    --nylc-surface-alt: #14243d;

    --nylc-line: rgb(148 170 204 / 0.16);
    --nylc-line-soft: rgb(148 170 204 / 0.09);
    --nylc-hover: rgb(148 170 204 / 0.07);

    --nylc-active-bg: rgb(96 142 207 / 0.18);
    --nylc-active-ink: #b9cff0;

    --nylc-gold-soft: rgb(209 172 90 / 0.15);
    --nylc-gold-ink: #e3c27a;

    --nylc-shadow: 0 1px 2px rgb(0 0 0 / 0.3);

    /*
     * Στο σκοτεινό η σκιά από μόνη της χάνεται πάνω σε σκούρο φόντο: το
     * ανάγλυφο το κρατά κυρίως η φωτεινή πάνω ακμή και η διαφορά τόνου
     * ανάμεσα στο στοιχείο και στο «πηγάδι» της μπάρας.
     */
    --nylc-raised-from: #22324a;
    --nylc-raised-to: #1a283d;
    --nylc-raised-edge: rgb(148 170 204 / 0.22);
    --nylc-raised-shadow: inset 0 1px 0 rgb(185 207 240 / 0.14), 0 1px 0 rgb(0 0 0 / 0.45), 0 2px 5px rgb(0 0 0 / 0.4);
    --nylc-raised-shadow-hover: inset 0 1px 0 rgb(185 207 240 / 0.2), 0 1px 0 rgb(0 0 0 / 0.5), 0 3px 8px rgb(0 0 0 / 0.5);
    /*
     * Η επιλεγμένη εδώ παίρνει συμπαγές μπλε και όχι το διάφανο
     * --nylc-active-bg: πάνω στο σκούρο «πηγάδι» το διάφανο έβγαινε σχεδόν
     * ίδιο με τις σηκωμένες καρτέλες.
     */
    --nylc-pressed-bg: #1f4677;
    --nylc-pressed-ink: #e6efff;
    --nylc-pressed-shadow: inset 0 2px 4px rgb(0 0 0 / 0.45), inset 0 0 0 1px rgb(120 165 228 / 0.45);
    --nylc-well: #0b1628;
}

/* ============================================================ συμπαγές */

/*
 * Η «συμπαγής» πυκνότητα με μία μεταβλητή: όλα τα περιθώρια, τα κενά και τα
 * ύψη του Filament είναι πολλαπλάσια του --spacing (0.25rem). Στο 0.2rem
 * όλη η διεπαφή μαζεύεται κατά 20% ομοιόμορφα, χωρίς να κυνηγάμε ένα ένα
 * τα components. Τα μεγέθη γραμμάτων ΔΕΝ εξαρτώνται από αυτό.
 *
 * Μην το κατεβάσεις κάτω από ~0.19rem: τα εικονίδια (5 × spacing) και τα
 * checkbox γίνονται πολύ μικρά για αφή.
 */
.fi-body {
    --spacing: 0.2rem;
    --topbar-height: 3.5rem;

    background-color: var(--nylc-page);
}

/* ===================================================== πάνω μπάρα, μενού */

/*
 * Η λεπτή χρυσή γραμμή κάτω από την μπάρα είναι η «υπογραφή» του θέματος:
 * το λογότυπο είναι μπλε και χρυσό, και μόνο μπλε έχανε τη μισή ταυτότητα.
 */
.fi-topbar {
    background-color: var(--nylc-chrome);
    box-shadow: inset 0 -1px 0 var(--nylc-line), 0 1px 0 color-mix(in srgb, var(--nylc-gold) 55%, transparent);
}

.fi-sidebar {
    background-color: var(--nylc-chrome);
}

/*
 * Ο τίτλος δίπλα στο λογότυπο. Κόβεται με «…» αντί να σπάει σε δύο
 * γραμμές, που θα ψήλωνε την μπάρα. Κάτω από 64rem (κινητό, tablet) το
 * Filament κρύβει το λογότυπο από την μπάρα (το μενού γίνεται συρτάρι),
 * οπότε κρύβεται και ο τίτλος: μόνος του, δίπλα στο ☰, θα έπιανε τον χώρο
 * της αναζήτησης. Το ίδιο κείμενο υπάρχει στη σελίδα σύνδεσης.
 */
.nylc-brand-title {
    display: none;
}

@media (min-width: 64rem) {
    .nylc-brand-title {
        display: block;
        min-width: 0;
        max-width: 26rem;
        margin-inline-start: 0.75rem;
        padding-inline-start: 0.75rem;
        border-inline-start: 1px solid color-mix(in srgb, var(--nylc-gold) 55%, transparent);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1.25rem;
        letter-spacing: -0.005em;
        color: var(--nylc-active-ink);
    }
}

/* Η διαχωριστική γραμμή μενού / περιεχομένου, μόνο σε οθόνη υπολογιστή. */
@media (min-width: 64rem) {
    .fi-sidebar {
        border-inline-end: 1px solid var(--nylc-line);
    }
}

.fi-sidebar-nav {
    row-gap: 1.25rem;
    padding-inline: 0.875rem;
    padding-block: 1.25rem;
}

.fi-sidebar-group-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.fi-sidebar-item-btn {
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
}

.fi-sidebar-item-btn:hover,
.fi-sidebar-item-btn:focus-visible {
    background-color: var(--nylc-hover);
}

.fi-sidebar-item-label {
    font-size: 0.8125rem;
}

/*
 * Ενεργό στοιχείο: απαλό μπλε φόντο με χρυσή κάθετη γραμμή στην αρχή, όπως
 * το «χάπι» του προτύπου. Η γραμμή ζωγραφίζεται με inset σκιά για να μη
 * μετακινεί το κείμενο ούτε ένα pixel.
 */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--nylc-active-bg);
    box-shadow: inset 3px 0 0 var(--nylc-gold);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--nylc-active-ink);
}

/* ================================================================= σελίδα */

.fi-page-header-main-ctn {
    row-gap: 1.25rem;
    padding-block: 1.25rem;
}

.fi-header-heading {
    font-size: 1.375rem;
    line-height: 1.875rem;
}

.fi-breadcrumbs {
    font-size: 0.8125rem;
}

/* ================================================================ κάρτες */

/*
 * Πίνακες, ενότητες φόρμας, κάρτες στατιστικών και καρτέλες φίλτρων: ένα
 * ενιαίο «χαρτί» με λεπτό ζεστό περίγραμμα αντί για το γκρι δαχτυλίδι του
 * Filament.
 *
 * Η ενότητα μέσα σε καρτέλες μένει διάφανη (κανόνας στο nylc.css, με
 * μεγαλύτερο specificity από αυτόν εδώ).
 */
.fi-ta-ctn,
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-wi-stats-overview-stat,
.fi-sc-tabs.fi-contained,
.fi-tabs:not(.fi-contained) {
    background-color: var(--nylc-surface);
    border-radius: var(--nylc-radius);
    box-shadow: 0 0 0 1px var(--nylc-line), var(--nylc-shadow);
}

.fi-section-header {
    border-color: var(--nylc-line-soft);
}

.fi-section-header-heading {
    font-size: 0.9375rem;
}

/* =============================================================== πίνακες */

.fi-ta-ctn .fi-ta-header,
.fi-ta-ctn .fi-ta-header-toolbar {
    border-color: var(--nylc-line);
}

.fi-ta-table > thead > tr {
    background-color: var(--nylc-surface-alt);
}

.fi-ta-header-cell {
    padding-block: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
}

.dark .fi-ta-header-cell {
    color: var(--gray-300);
}

/*
 * Το κύριο κέρδος του compact: γραμμή ~34px αντί για ~53px. Το :not(.fi-inline)
 * είναι του Filament και πρέπει να μείνει — οι «inline» στήλες (π.χ. μέσα σε
 * stack) δεν έχουν δικό τους περιθώριο.
 */
.fi-ta-text:not(.fi-inline),
.fi-ta-icon:not(.fi-inline),
.fi-ta-color:not(.fi-inline),
.fi-ta-selection-cell {
    padding-block: 0.5rem;
}

.fi-ta-text-item,
.fi-ta-cell {
    font-size: 0.8125rem;
}

.fi-ta-table > tbody > tr,
.fi-ta-row {
    border-color: var(--nylc-line-soft);
}

/* Οι ζώνες μένουν πιο αχνές από το hover, για να ξεχωρίζει η γραμμή κάτω από τον δείκτη. */
.fi-ta-row.fi-striped {
    background-color: var(--nylc-surface-alt);
}

.fi-ta-row.fi-clickable:hover {
    background-color: var(--nylc-hover);
}

.fi-ta-row.fi-selected:not(.fi-striped) {
    background-color: var(--nylc-active-bg);
}

.fi-ta-ctn .fi-pagination,
.fi-ta-ctn > div > nav {
    font-size: 0.8125rem;
}

/* ============================================================== καρτέλες */

/*
 * Οι καρτέλες φίλτρων πάνω από τους πίνακες γίνονται «χάπια», όπως στο
 * πρότυπο. Η ενεργή παίρνει το μπλε του ενεργού μενού, ώστε το «πού είμαι»
 * να έχει παντού την ίδια όψη.
 */
.fi-tabs:not(.fi-contained) {
    padding: 0.25rem;
    border-radius: 999px;
}

.fi-tabs:not(.fi-contained) .fi-tabs-item {
    border-radius: 999px;
    padding: 0.3125rem 0.875rem;
    font-size: 0.8125rem;
}

.fi-tabs-item:hover {
    background-color: var(--nylc-hover);
}

.fi-tabs-item.fi-active {
    background-color: var(--nylc-active-bg);
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-icon {
    color: var(--nylc-active-ink);
}

/*
 * Καρτέλες ΜΕΣΑ σε φόρμα (καρτέλα υποψηφίου: «Υποψήφιος», «Εξετάσεις»).
 * Με το επίπεδο στυλ του Filament η μη επιλεγμένη ήταν απλό κείμενο στο
 * χρώμα της κάρτας και δεν φαινόταν ότι πατιέται. Γίνονται «κουμπιά» με
 * ανάγλυφο: οι μη επιλεγμένες σηκωμένες πάνω από ένα ελαφρά βυθισμένο
 * «πηγάδι», η επιλεγμένη πατημένη μέσα σε αυτό, μπλε, με χρυσή γραμμή
 * από κάτω — η ίδια υπογραφή με την πάνω μπάρα.
 *
 * Ο επιλογέας ξεκινά από .fi-sc-tabs για να ΜΗΝ πιάσει τις καρτέλες
 * φίλτρων πάνω από τους πίνακες (.fi-tabs:not(.fi-contained), «χάπια»
 * πιο πάνω), που είναι άλλο στοιχείο με άλλη όψη.
 *
 * Το κενό ανάμεσα (gap) και το περιθώριο της μπάρας χρειάζονται: η μπάρα
 * έχει overflow-x: auto (κύλιση στο κινητό), που κόβει ό,τι σκιά βγαίνει
 * έξω από το περιεχόμενό της.
 */
.fi-sc-tabs .fi-tabs.fi-contained {
    gap: 0.5rem;
    padding: 0.625rem 0.75rem 0.75rem;
    background-color: var(--nylc-well);
    border-color: var(--nylc-line);
    border-start-start-radius: var(--nylc-radius);
    border-start-end-radius: var(--nylc-radius);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
}

.fi-sc-tabs .fi-tabs-item {
    border: 1px solid var(--nylc-raised-edge);
    background-image: linear-gradient(to bottom, var(--nylc-raised-from), var(--nylc-raised-to));
    box-shadow: var(--nylc-raised-shadow);
    transition: box-shadow 0.12s, transform 0.12s, background-color 0.12s;
}

.fi-sc-tabs .fi-tabs-item:not(.fi-active):hover {
    background-color: transparent;
    box-shadow: var(--nylc-raised-shadow-hover);
    transform: translateY(-1px);
}

.fi-sc-tabs .fi-tabs-item:not(.fi-active) .fi-tabs-item-label {
    color: var(--gray-700);
}

.dark .fi-sc-tabs .fi-tabs-item:not(.fi-active) .fi-tabs-item-label {
    color: var(--gray-200);
}

.fi-sc-tabs .fi-tabs-item:focus-visible {
    outline: 2px solid var(--nylc-blue);
    outline-offset: 2px;
}

.fi-sc-tabs .fi-tabs-item.fi-active {
    border-color: transparent;
    background-image: none;
    background-color: var(--nylc-pressed-bg);
    box-shadow: var(--nylc-pressed-shadow), inset 0 -2px 0 var(--nylc-gold);
    transform: translateY(1px);
}

.fi-sc-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-sc-tabs .fi-tabs-item.fi-active > .fi-icon {
    color: var(--nylc-pressed-ink);
}

.fi-sc-tabs .fi-tabs-item.fi-active .fi-tabs-item-label {
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .fi-sc-tabs .fi-tabs-item {
        transition: none;
    }

    .fi-sc-tabs .fi-tabs-item:not(.fi-active):hover,
    .fi-sc-tabs .fi-tabs-item.fi-active {
        transform: none;
    }
}

/* ======================================================= πεδία, κουμπιά */

.fi-input-wrp {
    background-color: var(--nylc-surface);
}

.fi-input-wrp:not(:focus-within):not(.fi-invalid) {
    box-shadow: 0 0 0 1px var(--nylc-line);
}

.fi-btn {
    border-radius: 0.5rem;
}

/* ================================================== αναδυόμενα, παράθυρα */

.fi-dropdown-panel,
.fi-modal-window {
    background-color: var(--nylc-surface);
    box-shadow: 0 0 0 1px var(--nylc-line), 0 10px 30px -10px rgb(0 0 0 / 0.25);
}

/* ======================================================= σελίδα σύνδεσης */

.fi-simple-layout {
    background-color: var(--nylc-page);
}

.fi-simple-main {
    background-color: var(--nylc-surface);
    box-shadow: 0 0 0 1px var(--nylc-line), var(--nylc-shadow);
    border-top: 3px solid var(--nylc-gold);
}

/* ================================================= επιλογέας φωτεινό/σκοτεινό */

/*
 * Δύο κουμπιά δίπλα δίπλα στην πάνω μπάρα. Ο επιλογέας του Filament υπάρχει
 * ήδη, αλλά κρυμμένος μέσα στο μενού χρήστη· ο χρήστης ζήτησε να φαίνεται.
 */
.nylc-theme {
    display: inline-flex;
    gap: 0.125rem;
    padding: 0.1875rem;
    margin-inline-end: 0.25rem;
    background-color: var(--nylc-surface-alt);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 1px var(--nylc-line);
}

.nylc-theme__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    color: var(--gray-500);
    background: none;
    border: 0;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 150ms, color 150ms;
}

.nylc-theme__btn:hover {
    color: var(--gray-800);
}

.dark .nylc-theme__btn:hover {
    color: var(--gray-100);
}

.nylc-theme__btn--active,
.nylc-theme__btn--active:hover {
    color: var(--nylc-gold-ink);
    background-color: var(--nylc-gold-soft);
}

.nylc-theme__icon {
    width: 0.9375rem;
    height: 0.9375rem;
}

/* Σε κινητό χωράνε μόνο τα εικονίδια. */
@media (max-width: 40rem) {
    .nylc-theme__label {
        display: none;
    }
}