/* Όταν το body έχει αυτή την κλάση, το main "νεκρώνει" και δεν αντιδρά στο ποντίκι */
body.menu-open .main {
    pointer-events: none;
}
#page-timeline,
#page-insert,
#page-edit {
    display: none;
}

.main, .center{
    min-height: 0 !important;
}

:root {
    --font-xs: clamp(0.6875rem, 0.2vw + 0.625rem, 0.875rem); /* 11px */
    --font-sm: clamp(0.75rem, 0.3vw + 0.675rem, 1rem);      /* 12px */
    --font-md: clamp(0.875rem, 0.4vw + 0.75rem, 1.125rem);  /* 14px */
    --font-lg: clamp(0.9375rem, 0.5vw + 0.8rem, 1.25rem);   /* 15px */
    --font-xl: clamp(1.25rem, 2vw + 1rem, 2rem);            /* 25px */
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; 
}

@media (max-width: 768px) {
    header {
        flex-direction: column; /* Τίτλος πάνω, Login από κάτω */
        gap: 10px;
        text-align: center;
    }

    .titlee {
        text-align: center;
        width: 100%;
    }

    .login {
        justify-content: center;
        width: 100%;
    }

    .main {
        /* Στο κινητό τα κάνουμε το ένα κάτω από το άλλο */
        grid-template-columns: 100%;
        grid-template-areas: 
            "center"
            "results-area";
    }
}

body{
    display: grid;
    grid-template-rows: calc(10%) 
                        calc(85%)
                        calc(5%);
    grid-template-areas: 
        "header"
        "main"
        "footer";
   
   background-color: #cccccc;
}

.header {
    background-color: #334155;
    display: flex;
    flex-wrap: wrap; /* Επιτρέπει στα στοιχεία να αλλάξουν γραμμή αν στενέψει πολύ η οθόνη */
    font-family: "Outfit", sans-serif;
    align-items: center;
    justify-content: center; 
    /* Χρήση clamp για το μέγεθος της γραμματοσειράς */
    font-size: clamp(18px, 2.5vw, 25px); 
    color: white;
    min-height: auto
}

.titlee{
    flex:1;
    text-align: center;
    font-weight: 300;
    font-size: var(--font-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inconsolata', monospace;
}

/* Container για να είναι το dropdown και το + δίπλα-δίπλα */
.project-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 20px; /* Απόσταση από τον τίτλο */
}

/* Στυλ για το dropdown (αν δεν το έχεις ήδη) */
#project-dropdown {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    font-family: "Outfit", sans-serif;
    cursor: pointer;
}

#project-dropdown option {
    background-color: #334155; /* Ίδιο με το header για να μην "κλωτσάει" */
    color: white;
}

/* Το κουμπί "+" */
#add-project-btn {
    background-color: rgba(251, 191, 36, 0.1);
    color: #fbbf24; /* Φωτεινό χρυσό */
    border: 1px dashed rgba(251, 191, 36, 0.8);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: "Outfit", sans-serif;
    font-weight: bold;
    transition: all 0.2s ease;
}

#add-project-btn:hover {
    background-color: rgba(251, 191, 36, 0.2);
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.2);
}

#add-project-btn:active {
    transform: scale(0.95);
}

@media (min-width: 1024px) {
    .titlee {
        font-size: var(--font-lg)
    }
}

.login li{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 200;
}

#manual-title{
    color:darkred;
    font-weight: 400;
    font-size: var(--font-md)

}

#login-title{
    color:darkred;
    font-weight: 400;
    justify-content: center;
    font-size: var(--font-md);

}
.login{
    right: 30px;
    display:flex;
    cursor: pointer;
    font-size: var(--font-md);

    gap:40px;
}

.login #login-title:hover{
    color:olive;
    text-decoration: underline
}

.login #manual-title:hover{
    color:olive;
    text-decoration:underline;
}

.main{
    display: grid;
    grid-template-columns: 85% 15%;
    grid-template-areas: " center results-area";
    gap:2px;
    background-color: #cccccc;
    position: relative;
}

.menu-toggle {

    position: fixed;

    top: 10px;

    left: 20px;

    z-index: 1000;

    background: initial; /* Σκούρο μπλε/γκρι */

    color: white;

    border: none;

    border-radius: 8px;

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

    transition: all 0.2s ease;

}



.menu-toggle:hover {

    background: #1e293b;

    transform: scale(1.05);

}

/* Το Sidebar (Αρχικά κρυμμένο στα αριστερά) */
.options-drawer {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    z-index: 999999; /* Κράτα το μεγάλο νούμερο που βάλαμε πριν! */
    display: flex;
    flex-direction: column;
    padding-top: 25px; /* Μικρύναμε το padding γιατί μπαίνει ο τίτλος */
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Outfit', sans-serif; /* Σιγουρεύουμε τη γραμματοσειρά για όλο το Drawer */
}

/* Όταν προσθέτουμε την κλάση 'open' μέσω JS */
.options-drawer.open {
    left: 0; 
}

/* Ο νέος τίτλος "MENU" */
.drawer-title {
    font-size: 24px;
    font-weight: 800; /* Πολύ έντονο / bold */
    color: #1e293b; /* Σκούρο σχεδόν μαύρο */
    margin: 0;
    padding: 0 25px 30px 25px; /* Κενό από κάτω για να χωρίζει από τα κουμπιά */
    letter-spacing: 1.5px; /* Λίγος αέρας ανάμεσα στα γράμματα */
    text-transform: uppercase;
}

/* Στυλ για τα Κουμπιά/Links του Menu */
.options-drawer button {
    background: transparent;
    border: none;
    padding: 16px 25px;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 16px;
    font-weight: 500; /* Λίγο πιο "γεμάτα" γράμματα */
    color: #334155; /* Πιο σκούρο γκρι για το κείμενο */
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-left 0.2s;
    font-family: 'Outfit', sans-serif;
    border-left: 4px solid transparent; /* Αόρατο border για να μην "κουνιέται" στο hover */
}

.options-drawer button.updating {
    color: #0284c7; /* Ένα ωραίο, ήρεμο μπλε για την ανανέωση */
    border-left: 4px solid #0284c7; /* Εμφανίζουμε τη γραμμή στα αριστερά */
    cursor: not-allowed; /* Δείχνει στον χρήστη ότι δεν μπορεί να το ξαναπατήσει */
    pointer-events: none; /* Κλειδώνει το κουμπί τελείως */
    animation: pulse-update 1.5s infinite ease-in-out; /* Το animation */
}

/* Αν έχεις εικονίδιο (π.χ. span ή i) μέσα στο κουμπί, να πάρει και αυτό το χρώμα */
.options-drawer button.updating span,
.options-drawer button.updating i {
    color: #0284c7;
}

/* Το animation για το ελαφρύ αναβόσβημα (pulse) */
@keyframes pulse-update {
    0% {
        opacity: 1;
        background: rgba(2, 132, 199, 0.05); /* Απαλό γαλάζιο φόντο */
    }
    50% {
        opacity: 0.5; /* Μειώνεται η φωτεινότητα στη μέση */
        background: transparent;
    }
    100% {
        opacity: 1;
        background: rgba(2, 132, 199, 0.05);
    }
}

/* Το νέο Hover effect: Μόνο γκρι background και η μπλε γραμμή, ΟΧΙ μπλε γράμματα */
.options-drawer button:hover {
    background: #f1f5f9;
    border-left: 4px solid #0ea5e9;
    color: #1e293b; /* Τα γράμματα γίνονται απλά ελάχιστα πιο σκούρα */
}



/* Ενίσχυση των εικονιδίων */
.options-drawer button .material-symbols-outlined {
    font-size: 26px; /* Ελαφρώς μεγαλύτερα */
    font-weight: 600; /* Πιο παχιές γραμμές στο icon (αν υποστηρίζεται από το font σου) */
    color:#aaa; /* Έντονο γκρι για τα icons */
    transition: color 0.2s;
}

/* Προαιρετικό: Τα εικονίδια μπορούν να γίνονται ελάχιστα πιο σκούρα στο hover */
.options-drawer button:hover .material-symbols-outlined {
    color: #1e293b;
}

/* Το overlay παραμένει το ίδιο */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    z-index: 999998; /* Ένα κλικ κάτω από το drawer */
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
    backdrop-filter: blur(2px);
}

.drawer-overlay.visible {
    display: block;
    opacity: 1;
}

.center{
    background-color: #F5F5F5 ;
    font-family: 'Outfit', sans-serif;
    display:flex;
    align-items: center;
    justify-content: center;
    overflow-y: none;
    overflow-x: visible;
    position:relative;

}

#welcome{
    display:flex;
}

#page-timeline {
    /* Το display: grid έρχεται από την JS inline */
    /* Ορίζουμε το 3-row grid */
    grid-template-rows: auto 1fr auto !important; 
    grid-template-columns: 100% !important;
    
    height: 100% !important; /* Γεμίζει το ύψος του γονέα του */
    width: 100% !important;
    
    /* Καθαρισμός από περιττά padding/margin/gaps */
    margin: 0 !important;
    padding: 0 !important; 
    row-gap: 0 !important; 
    
    /* Εγγύηση containment: τίποτα δεν βγαίνει έξω */
    overflow: hidden;
    box-sizing: border-box;
    
    /* Ένας καθαρός, συμπαγής διαχωρισμός */
    background-color: #F5F5F5;
    border: 1px solid #ddd;
    
}

#papers-options { justify-self: start; text-align: left; }
.select-all { justify-self: center; }
.options-wrapper { justify-self: end;}

@media (min-width: 1024px) {
    #page-timeline {
        padding: 8px 2px;
    }
}


/* Το δοχείο του κενού */
.gap-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start; /* Στέλνει τη φούσκα τέρμα πάνω, στην ευθεία των ετών */
    justify-content: center;
    min-width: 120px; /* Αρκετός χώρος για να φανεί η γραμμή δεξιά-αριστερά */
    flex-shrink: 0;
    
    /* Μικρορύθμιση: Ανέβασε ή κατέβασε αυτό το νούμερο για 
       να το φέρεις ΑΚΡΙΒΩΣ στην ίδια ευθεία με τα μαύρα 4x4 dots σου */
    margin-top: -3px; 
}



/* Η ίδια η φούσκα */
.gap-bubble {
    position: relative;
    z-index: 2; /* Πάνω από τη γραμμή */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Το κόλπο: Ίδιο χρώμα με το φόντο σου (#F5F5F5) 
       για να φαίνεται ότι "κόβει" τη γραμμή από πίσω */
    background-color: #F5F5F5; 
    color: #64748b;
    border: 1px solid #cbd5e1;
    
    padding: 4px 14px;
    border-radius: 20px;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(0.7rem, 0.3vw + 0.6rem, 0.85rem);
    font-style: italic;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* Απειροελάχιστη σκιά */
}

/* Για να μην συμπιέζονται στο μηδέν τα άδεια έτη */
.year-block.empty-year {
    min-width: 50px; 
    opacity: 0.8; /* Αχνά για να μην τραβάνε το μάτι */
}

.year-block {
    margin-bottom: 25px;
    display:flex;
    flex-direction: column;
    align-items: center;
    position:relative;

    height: 100%;
}

.year-title {
    font-size: clamp(0.75rem, 0.3vw + 0.675rem, 1rem);
    font-weight: bold;
    margin-bottom: 1px;
    position:relative;
    bottom: 4px;
    z-index:4;
}

.year-title.year-active {
    color: #2e7d32; /* Ένα "ζωντανό" πράσινο */
    text-shadow: 0px 0px 8px rgba(46, 125, 50, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}



.papers-row-wrapper {
    position: relative;
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 5px 5px;
}
.papers-row-wrapper::before,
.papers-row-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 50px; /* Το πάχος της θολούρας */
    z-index: 10;
    pointer-events: none; /* Για να μπορείς να κάνεις κλικ στα πρώτα/τελευταία κουτάκια */
}

.papers-row-wrapper::before {
    top: 0;
    background: linear-gradient(to bottom, white 20%, transparent);
}

.papers-row-wrapper::after {
    bottom: 0;
    background: linear-gradient(to top, white 20%, transparent);
}

.papers-row-wrapper.can-scroll-up::before { opacity: 1; }
.papers-row-wrapper.can-scroll-down::after { opacity: 1; }


.papers-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    justify-content: flex-start;
    flex-direction: column;
    margin-top: 5px;
    align-items: center;
    width: 100%;
    height: 90%;
    overflow-y: auto;
    overflow-x: visible;
    scroll-behavior: smooth;
    padding: 6px 0; 
    z-index: 1000;
}

#up-button{
    color:#333;
}
.papers-row::-webkit-scrollbar{
    display:none;
}

.col-scroll-btn {
    /* --- Δυναμικό Μέγεθος --- */
    /* Το ύψος προσαρμόζεται από 24px έως 34px ανάλογα με την οθόνη */
    height: clamp(24px, 4vh, 34px); 
    width: 100%;
    
    background: rgba(255, 255, 255, 0.7); /* Glassmorphism βάση */
    backdrop-filter: blur(4px);            /* Θόλωμα του από πίσω περιεκτικού */
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: relative;
    z-index: 100;
    margin: 0;
    padding: 0;
    
    /* Μαλακή μετάβαση για όλα */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Στρογγυλεμένες γωνίες μόνο στις εξωτερικές πλευρές για "pill" σχήμα */
    border-radius: 8px; 
}
/* Το "Fade" εφέ πίσω από το βέλος */
#year-block-id-εδώ .col-scroll-btn::before { /* Ή βάλε κλάση */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}


.col-scroll-btn.hidden-btn {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateY(5px); /* Μικρό εφέ κίνησης όταν εξαφανίζεται */
}

.col-scroll-btn .material-symbols-outlined {
    font-size: 20px !important;
    color: #666 !important; /* Πιο μαλακό γκρι από το απόλυτο μαύρο */
    transition: color 0.2s ease;
}

.col-scroll-btn:hover .material-symbols-outlined {
    color: #000 !important;
}

/* Η κλάση που το κάνει πράσινο */
.col-scroll-btn.green-btn .material-symbols-outlined {
    color: #2e7d32 !important;
}

/* Το animation που ζήτησες - πιο διακριτικό fade */
.col-scroll-btn.green-btn {
        background-color: #2e7d32;
    color: white;
    border-color: #2e7d32;
    animation: pulse-green 2s infinite;
}

/* Η κλάση που το κρύβει - Βεβαιώσου ότι ΔΕΝ υπάρχει όταν πρέπει να φαίνεται */
.col-scroll-btn.hidden-btn {
    display: none !important; 
}

@keyframes simple-fade {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}
.paper-square {
    display: flex;
    flex-direction: row;
    background-color: #333333;
    width: clamp(10px, 0.9vw, 16px);
    height: clamp(10px, 0.9vw, 16px);
    border-radius: 50%;
    position:relative;
    z-index:1001;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    order: 0;
}

.paper-square.selected{
   box-shadow: 0 0 0 2px white, 0 0 0 4px #333;
   z-index: 100;
}

.paper-square:hover {
    background-color: #888 !important;
    z-index: 1000;
}



.paper-square:hover .hover-info{
    opacity:1;
    z-index: 100000;
}


.paper-square.unmatched {
    /* ΣΗΜΑΝΤΙΚΟ: ΜΗΝ αλλάζεις width και height! */
    
    /* Μικραίνουμε το στοιχείο στο 25% του μεγέθους του (ή όσο θες εσύ) */
    transform: scale(0.25); 
    
    /* Το κάνουμε στρογγυλό */
    border-radius: 50%;
    
    /* Το χρώμα που ήθελες */
    background-color: #000 !important; 
    
    /* Αχνό */
    opacity: 0.2;
    
    /* Αφαιρούμε σκιές αν υπάρχουν */
    box-shadow: none !important;
    
    /* Να μην μπορείς να το πατήσεις */
    pointer-events: none;
    order: 1;
}





.timeline-line{
    width:4px;
    flex-shrink: 0;
    height:4px;
    background-color: #444;
    border-radius: 50%;

}



/* Αν θέλεις η γραμμή να γίνεται και αυτή γκρι στο hover */


/* Tooltip */
.hover-info {
    position: fixed; /* Κλειδώνει στην οθόνη */
    top: 0;
    left: 0;
    z-index: 9999999; /* Τέρμα πάνω */
    
    display: none; /* Κρυφό αρχικά */
    flex-direction: column;
    
    background-color: white;
    color: #333;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25); /* Ωραία σκιά */
    
    font-size: var(--font-sm);
    line-height: 1.4;
    text-align: left;
    max-width: 280px;
    width: max-content;
    
    pointer-events: none; /* Το ποντίκι περνάει από μέσα του - ΣΗΜΑΝΤΙΚΟ */
    opacity: 0;
    transition: opacity 0.15s ease;
}

.hover-info .hover-title{
    margin-bottom: 2px;
}

.hover-info .hover-authors{
    white-space: normal;
   
}



.results-area{
    background-color: #e5e5e5;
    align-items: center;
    justify-content: center;
    overflow-y:hidden;
    font-family: "Outfit", sans-serif;
    font-size: small;
    gap: 8px;
    overflow-y:scroll;
}

.results-area::-webkit-scrollbar{
    display:none
}



.selected-things{
    margin-left: 4px;
    display:none;
    font-family: "Outfit", sans-serif;
    margin-top: 15px;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 5px;
    align-items: flex-start;
}

.selection-label {
    font-size: clamp(0.875rem, 0.4vw + 0.75rem, 1.125rem);
    font-weight: 600;
    color: #475569; /* Ένα ωραίο, διακριτικό γκρι-μπλε */
    margin-bottom: 8px; /* Δίνει αέρα ανάμεσα στον τίτλο και τα tags */
}

.tags-container {
    display: flex;
    flex-wrap: wrap; 
    gap: 6px; 
    width: 100%;
}

.key-words{
    display:none;
    font-family:"Outfit", sans-serif;
    justify-content: center;
    margin-top:8px
}

.timeline-search{
    display:grid;
    grid-template-rows: 1fr auto;
    grid-template-areas: "filters-container"
                          "clear-button-container";
    font-family: 'Outfit', sans-serif;
    overflow-y:hidden;
    gap: 5px;
    height: 100%;
}

.filters-container{
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    padding-left: 10px;
    overflow-y: scroll;
    justify-content: center;
    margin-top: 5px;
}
.filters-container::-webkit-scrollbar{
    display:none;
}

.clear-button-container{
    display:flex;
    justify-content: center;
    align-items: center;
}


.count{
    font-style: italic;
}

.filters-title{
    display: flex;
    font-size: 30px;
    font-weight: 300;
}
.list-title{
    margin-top:2px;
    font-size: clamp(0.9375rem, 0.5vw + 0.8rem, 1.25rem);    font-weight: 300;
    margin-bottom: 0;
    display: flex;
    align-items: center
    ;
    
}

.list-title.collapsed + .filter-list {
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    border: none !important;
}

.filter-list{
    list-style:none;
    padding-right:10px;
    margin:0;
    padding-top: 0;
    border-bottom: 1px solid #000000;
}

.filter-list li{
    margin-left: clamp(10px, 3vw, 25px);
    font-size: clamp(0.75rem, 0.3vw + 0.675rem, 1rem);
    color:#666;
    padding:2px 0;
    cursor:pointer;
    transition: color 0.2s ease;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease;
}

.arrow-icon {
    transition: transform 0.3s ease;
}

/* Όταν η λίστα είναι κλειστή */
.collapsed .arrow-icon {
    transform: rotate(-90deg); /* Το βελάκι κοιτάει αριστερά */
}

.collapsed + .filter-list {
    max-height: 0;
    opacity: 0;
    pointer-events: none; /* Να μην μπορεί να πατηθεί τίποτα κρυμμένο */
}

.show-more-button{
    font-style: italic;
    color:black
}

.filter-list li:hover{
    color:olive;
    text-decoration: underline;

}

.filter-title{
font-size: clamp(1.25rem, 1vw + 1.1rem, 1.75rem);}



.footer{
    background-color: #334155;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-areas: "count-wrapper" "title-ntua" "null";
    font-size: clamp(0.75rem, 0.3vw + 0.675rem, 1rem);
    color: white;
    font-family: "Outfit", sans-serif;
}

#count-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    
}
#title-ntua{
    display:flex;
    justify-content: center;
    align-items: center;
    font-style: italic;
}
#boolean-filter{
    display:flex;
    justify-content: center;
    align-items: center;
}
#on-off{
    font-style: italic;
}



.bold-icon{
    font-variation-settings: 
    'wght' 200, 
    'GRAD' 0, 
    'opsz' 48;
}

.options button{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    border-radius: 50px;
    background-color: #555555;
    color:#E5E5E5;
    outline:none;
    box-shadow: none;
    appearance: none;
    font-weight: 800px;
    border:none;
    cursor:pointer;
}



.options button:hover{
    background-color: #444444;
}



.options button:active{
    background-color: #cccccc;
    transform: none;
    box-shadow: none;
    color:#333333;
}

.options button:active .material-symbols-outlined{
    color:#333333;

}

.page{
    display:none;
}




    
/*form*/
/* --- Γενικό Layout της Σελίδας --- */
#page-insert {
    display: flex;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 80%;
    
    /* ΑΛΛΑΓΗ: 80vh αντί για 80% ώστε να μένει ΠΑΝΤΑ χώρος για το footer στην οθόνη */
    height: 80vh !important; 
    overflow-y: hidden !important; 
    overflow-x: hidden !important;
}

.form-card {
    background: #ffffff;
    width: 100%;
    max-width: 600px;
    /* ΑΛΛΑΓΗ: 100% του page-insert (δηλαδή του 80vh) */
    max-height: 100%; 
    display: flex;
    flex-direction: column; 
    padding: 40px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    box-sizing: border-box; 
}

/* 3. Ο Τίτλος (Μένει ακίνητος) */
.form-card h3 {
    margin: 0 0 20px 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    flex-shrink: 0; 
}

/* 4. Η Φόρμα (ΕΔΩ ΓΙΝΕΤΑΙ ΤΟ SCROLL) */
form#basic-form {
    flex: 1; 
    /* ΚΡΙΣΙΜΟ: Το min-height: 0 αναγκάζει το flexbox να ενεργοποιήσει το scroll */
    min-height: 0; 
    overflow-y: auto; 
    padding-right: 20px; 
    margin-right: -10px; 
    padding-bottom: 30px; 
}

/* 5. Η λεπτή μπάρα κύλισης (δεν αλλάζουμε τίποτα εδώ) */
form#basic-form::-webkit-scrollbar {
    width: 6px;
}

form#basic-form::-webkit-scrollbar-track {
    background: transparent;
}

form#basic-form::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}

form#basic-form::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}
/* --- Διάταξη Πεδίων --- */
.entry-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-row {
    display: flex;
    gap: 15px;
    width: 100%;
}

.form-group {
    flex: 1; /* Πιάνει τον μισό χώρο στο form-row */
    display: flex;
    flex-direction: column;
}

.full-width {
    width: 100%;
}

/* --- Στυλ για Inputs & Selects --- */
.entry-info input, 
.entry-info select {
    width: 100%;
    padding: 12px 15px;
    font-family: "Outfit", sans-serif;
    font-size: clamp(0.875rem, 0.4vw + 0.75rem, 1.125rem);
    color: #1e293b;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.entry-info input::placeholder {
    color: #94a3b8;
    font-style: normal;
}

#papertype {
    color: #94a3b8; /* Γκρι αρχικά, αλλάζει με JS όταν επιλεγεί */
    cursor: pointer;
}

/* --- Focus States (Ο μαγικός φωτισμός όταν κλικάρεις) --- */
.entry-info input:focus, 
.entry-info select:focus {
    outline: none;
    border-color: #0ea5e9;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* --- Πεδία με Κουμπί δίπλα (Authors / Keywords) --- */
.input-with-btn {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

.input-with-btn input {
    padding-right: 45px; /* Χώρος για να μην καβαλάει το κείμενο το κουμπί */
}

.icon-btn {
    position: absolute;
    right: 5px;
    background-color: #555555;
    color: #e5e5e5;
    border: none;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.icon-btn:hover {
    background-color:#008b8b;
    transform: scale(1.05);
}

.icon-btn:active {
    transform: scale(0.95);
}

.icon-btn .material-symbols-outlined {
    font-size: 20px;
    font-variation-settings: 
      'FILL' 0,   /* 0 = άδειο (outlined), 1 = γεμάτο (solid) */
      'wght' 400, /* ΕΔΩ είναι το font-weight! (Δέχεται τιμές από 100 έως 700) */
      'GRAD' 0,   /* Grade: πόσο έντονο φαίνεται (από -25 έως 200) */
      'opsz' 20
}

/* --- Τα Δυναμικά Πεδία (Extra Fields) --- */
.extra-fields {
    display: none; /* Αλλάζει με JS */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    background-color: #f8fafc;
    padding: 20px;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    margin-top: 5px;
}

/* Όταν η JS τα κάνει ορατά, θα πρέπει να είναι grid, όχι flex */
.extra-fields.active {
    display: grid !important; 
}

/* --- Το Κουμπί Submit --- */
.submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 500;
    background-color: #0f172a; /* Σκούρο, σοβαρό χρώμα */
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.submit-btn:hover {
    background-color: #1e293b;
}

.submit-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}



ul, li {
    list-style: none !important; 
    padding-left: 0;
}

.sort-container, .legend-container {
    position: relative;
    display: flex;
    align-items: center;
}
#legend-title{
    font-size: 2px;
    font-style:italic
}

.legend-dropdown {
    width: 220px; /* Πλάτος μενού */
    padding: 0;
}

.legend-header {
    background-color: #f9f9f9;
    padding: 8px 12px;
    font-size: clamp(0.75rem, 0.3vw + 0.675rem, 1rem);
    font-weight: 700;
    color: #555;
    border-bottom: 1px solid #eee;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#dynamic-legend-content {
    padding: 8px 0;
}

.legend-row {
    padding: 6px 15px;
    font-size: 13px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-bar {
    height: 8px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
}

.legend-section-title {
    font-size: clamp(0.6875rem, 0.2vw + 0.625rem, 0.875rem);
    color: #888;
    padding: 4px 15px;
    margin-top: 5px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Στυλ για κάθε αντικείμενο (Article/Conference) */
#legend-container li {
    display: flex;       /* Flex και στο li για να ευθυγραμμιστεί η τελεία με το κείμενο */
    align-items: center; /* Κεντράρισμα τελείας-κειμένου */
    height: 100%;
}

#legend-container { /* Ή όποια είναι η κλάση του άσπρου παραθύρου */
    max-height: 60vh !important; /* Το ύψος δεν θα ξεπερνάει ποτέ το 60% της οθόνης */
    overflow-y: auto !important; /* Αν το περιεχόμενο βγει εκτός, εμφάνισε μπάρα scroll! */
}


/* Κεντράρει όλο το block μέσα στο timeline container */
.empty-state-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 400px; /* Δώσε του λίγο ύψος για να φαίνεται επιβλητικό */
    padding: 20px;
}

/* Το μεγάλο κουμπί με τις διακεκομμένες γραμμές */
.empty-state-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    padding: 60px 40px;
    
    background-color: #f8fafc; /* Πολύ απαλό γκρι/μπλε φόντο */
    border: 2px dashed #cbd5e1; /* Η διακεκομμένη γραμμή */
    border-radius: 16px;
    cursor: pointer;
    text-align: center;
    
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Το Hover Effect - Δείχνει στον χρήστη ότι μπορεί να το πατήσει */
.empty-state-dropzone:hover {
    border-color: #008b8b; /* Το κεντρικό σου χρώμα */
    background-color: #f0fdfa; /* Ένα πολύ αχνό πράσινο/βεραμάν */
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 139, 139, 0.1);
}

/* Το εικονίδιο */
.empty-state-icon {
    font-size: 54px;
    color: #94a3b8;
    margin-bottom: 16px;
    transition: color 0.2s ease;
}

.empty-state-dropzone:hover .empty-state-icon {
    color: #008b8b;
}

/* Ο Τίτλος */
.empty-state-title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #334155;
    margin: 0 0 10px 0;
}

/* Ο Υπότιτλος */
.empty-state-subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    color: #64748b;
    margin: 0;
}

#timeline-wrapper, 
.view-bar, 
.timeline-controls {
    width: 95%;            /* Σε μικρές οθόνες πιάνει σχεδόν όλο το πλάτος */
    max-width: 1400px;     /* Σε μεγάλες οθόνες "κλειδώνει" εδώ */
    margin-left: auto;     /* Κεντράρισμα */
    margin-right: auto;    /* Κεντράρισμα */
}

.view-bar {
    /* Κατάργηση floating style */
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    
    /* Κατάργηση γωνιών/σκιών και προσθήκη διαχωριστικής γραμμής */
    border: none !important;
    border-bottom: 1px solid #ddd !important; 
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff;
    background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(191, 191, 191, 1) 100%);

    padding: 10px 24px;
    box-sizing: border-box;

    /* Το υπάρχον Flex logic σου, χωρίς gap clamp */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 15px; 
}

/* Εξασφαλίζουμε ότι τα εσωτερικά στοιχεία (κουμπιά/toggles) 
   δεν θα γίνουν πολύ μικρά στο mobile */
.view-bar > * { 
    flex-shrink: 0; 
    min-width: fit-content;
}
#timeline-wrapper{
    position:relative;
    width:100%;
    background-color: white;
    border: 1px solid #bbbbbb;
    overflow: hidden;
    box-sizing: border-box;
}

#timeline-container {

    width: 100%;

    min-width: 0;

    height: 100%;

    display: flex;

    flex-direction: row;

    align-items: stretch;

    gap: clamp(7px, 1vw, 12.5px);

   

    padding: 20px 40px 45px 40px;

    box-sizing: border-box;



    justify-content: flex-start;

    overflow-x: auto;

    overflow-y: hidden;


    scroll-behavior: smooth;

}

#timeline-container::-webkit-scrollbar{
    display:none
}

#timeline-wrapper::before,
#timeline-wrapper::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:50px;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#timeline-wrapper::before {
    left: 0;
    background: linear-gradient(to right, white 10%, transparent);
}

#timeline-wrapper::after {
    right: 0;
    background: linear-gradient(to left, white 10%, transparent);
}

/* Κλάσεις ελέγχου */
#timeline-wrapper.show-left::before { opacity: 1; }
#timeline-wrapper.show-right::after { opacity: 1; }

.horiz-scroll-btn {
    position: absolute;
    bottom: 20px;
    z-index: 2000;                 /* Πάνω από τα Fades (z-index: 10) */
    width: 36px; height: 36px;
    border-radius: 50%;          /* Στρογγυλά */
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.horiz-scroll-btn.green-btn{
    background-color: #2e7d32;
    color: white;
    border-color: #2e7d32;
    animation: pulse-green 2s infinite;
}

.horiz-scroll-btn.has-hidden-results:hover {
    background-color: #1b5e20;
}
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(46, 125, 50, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}
.horiz-scroll-btn:hover{
    transform: scale(1.15);
    color:#000;
}
.horiz-scroll-btn:active{
    transform: scale(0.9);
}

#scroll-left-btn { left: 15px; }
#scroll-right-btn { right: 15px; }

/* Η κλάση που βάζει η JS για να τα κρύψει όταν φτάνεις στα άκρα */
.horiz-scroll-btn.hidden-btn {
    opacity: 0;
    pointer-events: none;
}

/* Το track της μπάρας */
#timeline-nav-bar {
    position: absolute;
    bottom: 33px; /* Κεντραρισμένο κάθετα με τα κουμπιά (bottom 20px + 18px μισό κουμπί) */
    left: 65px;   /* Μετά το αριστερό κουμπί */
    right: 65px;  /* Πριν το δεξί κουμπί */
    height: 4px;
    background: #eeeeee;
    border-radius: 10px;
    z-index: 1500;
    user-select: none;
}

/* Το συρόμενο "thumb" */
#timeline-nav-thumb {
    position: absolute;
    height: 100%;
    width: 20%; /* Θα το υπολογίζει η JS δυναμικά */
    background: #bbbbbb;
    border-radius: 10px;
    transition: background 0.2s;
    cursor:grab;
}

#timeline-nav-thumb:active{
    cursor:grabbing
}

#timeline-nav-bar:hover #timeline-nav-thumb {
    background: #888888;
}
.view-bar > *::before {
    content: none !important; 
    display: none !important;
}



/* 3. ΧΩΡΟΣ ΓΙΑ ΤΗ ΓΡΑΜΜΗ */
/* Δίνουμε χώρο δεξιά, μόνο σε όσα έχουν γραμμή, για να μην πέφτει η γραμμή πάνω στο επόμενο στοιχείο */
.view-bar > *:not(:last-child) {
    padding-right: 20px;  /* Χώρος μέσα στο στοιχείο για τη γραμμή */
    margin-right: 20px;   /* Απόσταση από το επόμενο στοιχείο */
}

/* --- ΒΑΣΙΚΟ STYLING (Desktop & Tablet) --- */
.timeline-controls {
    /* Κατάργηση floating style */
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    
    /* Κατάργηση γωνιών/σκιών και προσθήκη κάτω διαχωριστικής γραμμής */
    border: none !important;
    border-top: 1px solid #ddd !important; 
    border-radius: 0 !important;
    box-shadow: none !important;
    background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(191, 191, 191, 1) 100%);

    min-height: 60px;
    padding: 10px 24px;
    box-sizing: border-box;

    /* Το υπάρχον Grid logic σου */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center; 
    gap: 0;
}
/* ==========================================================================
   📱 MOBILE RESPONSIVENESS (Οθόνες μικρότερες από 768px)
   ========================================================================== */



/* --- ΣΤΥΛ ΓΙΑ ΤΑ ΕΣΩΤΕΡΙΚΑ ΤΜΗΜΑΤΑ --- */

/* 1. ΑΡΙΣΤΕΡΑ: Selected Papers / Unselect All */
.controls-div {
    justify-self: start; /* Κολλημένο αριστερά */
    width: 100%;         /* Πιάνει όλο τον χώρο μέχρι το κέντρο */
    
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Σπρώχνει το κείμενο κοντά στη γραμμή */
    
    height: 40px; /* Ύψος για να φαίνεται ωραία η κάθετη γραμμή */
    padding-right: 30px; /* Απόσταση από την κάθετη γραμμή */
    border-right: 1px solid #e0e0e0; /* Η κάθετη γραμμή */
}

/* 2. ΚΕΝΤΡΟ: Select All Button */
.select-all {
    justify-self: center; /* Ακριβώς στο κέντρο */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    height: 40px;
    padding: 0 30px; /* Αέρας δεξιά και αριστερά από το κουμπί */
    border-right: 1px solid #e0e0e0; /* Η δεύτερη κάθετη γραμμή */
}

/* 3. ΔΕΞΙΑ: More Options */
.options-wrapper {
    justify-self: center; /* Κολλημένο δεξιά */
    width: 100%;
    
    display: flex !important;
    align-items: center;
    justify-content: flex-start; /* Σπρώχνει το κουμπί κοντά στη γραμμή */
    
    padding-left: 30px; /* Απόσταση από την κάθετη γραμμή */
}


.menu {
    /* Τυπογραφία */
    font-family: 'Outfit', sans-serif;
    font-size: clamp(0.875rem, 0.4vw + 0.75rem, 1.125rem);
    font-weight: 500; /* Το 300 είναι πολύ λεπτό για κουμπιά και "χάνεται". Το 500 είναι ιδανικό. */
    letter-spacing: 0.3px; /* Δίνει λίγο αέρα στα γράμματα για καλύτερη αναγνωσιμότητα */
    
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* ΣΗΜΑΝΤΙΚΟ: Βάζει αυτόματα κενό ανάμεσα στο εικονίδιο και το κείμενο! */
    padding: 10px 20px;
    
    /* Εμφάνιση */
    border: none;
    border-radius: 8px; /* Λίγο πιο στρογγυλεμένα για πιο μοντέρνο look */
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* Διακριτική σκιά για να ξεχωρίζουν από το φόντο */
    
    /* Animations */
    /* Το cubic-bezier κάνει την κίνηση πιο ομαλή και φυσική από το απλό 'ease' */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* Το δοχείο του μενού */
.more-options-toolbar {
    position: absolute;
    bottom: calc(100% + 15px); /* Βγαίνει ακριβώς από πάνω */
    left: 50%;
    
    /* Στήσιμο Flexbox για να μπαίνουν τα κουμπιά το ένα κάτω από το άλλο */
    display: flex;
    flex-direction: column;
    gap: 4px; /* Μικρό κενό ανάμεσα στα κουμπιά */
    
    /* Εμφάνιση */
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    padding: 8px;
    z-index: 100;
    
    /* 🌟 ANIMATION ΕΜΦΑΝΙΣΗΣ 🌟 */
    /* Αντί για display:none, χρησιμοποιούμε opacity/visibility για να "παίζει" το animation */
    opacity: 0;
    visibility: hidden;
    transform-origin: bottom center; /* Η κίνηση "φυτρώνει" από κάτω προς τα πάνω */
    transform: translateX(-50%) translateY(10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Όταν το μενού ΔΕΝ έχει την κλάση .hidden (όταν δηλαδή ανοίγει) */
.more-options-toolbar:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

.more-options-toolbar .option-item::after,
.more-options-toolbar .option-item::before {
    display: none !important;
    content: none !important;
}

/* Η "αόρατη γέφυρα" για να μην κλείνει κατά λάθος */
.more-options-toolbar::before {
    content: "";
    position: absolute;
    bottom: -15px; 
    left: 0; 
    width: 100%; 
    height: 15px; 
    background: transparent;
}

/* Τα κουμπιά μέσα στο μενού */
.more-options-toolbar .option-item {
    display: flex;
    align-items: center;
    gap: 12px; /* Το κενό ανάμεσα στο εικονίδιο και το κείμενο! */
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #334155; /* Σκούρο γκρι */
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    width: 100%;
    white-space: nowrap; /* Εμποδίζει το κείμενο να "σπάσει" σε 2 γραμμές */
    transition: all 0.2s ease;
}

/* 🌟 ANIMATION ΓΙΑ ΤΟ HOVER ΣΤΑ ΚΟΥΜΠΙΑ 🌟 */
.more-options-toolbar .option-item:hover {
    background-color: #f1f5f9; /* Απαλό γκρι φόντο */
    color: #008b8b; /* Το κείμενο παίρνει το χρώμα του κεντρικού σου θέματος */
    transform: translateX(4px); /* Το κουμπί γλιστράει ελαφρώς προς τα δεξιά! */
}

/* Μέγεθος εικονιδίων για να δένουν ωραία με το κείμενο */
.more-options-toolbar .option-item .material-symbols-outlined {
    font-size: 20px;
}

.menu:disabled {
    background-color: #ccc; /* Γκρι χρώμα */
    color: black;            /* Σκούρο γκρι εικονίδιο */
    cursor: default;        /* Όχι χεράκι */
    opacity: 0.5;           /* Πιο αχνό */
    pointer-events: none;   /* Δεν πατιέται */
    transform: none;        /* Καμία μεγέθυνση */
    box-shadow: none;
}

#clear-filters:hover {
    transform: scale(1.1);
    background-color: darkred;
}

#download{
    display: flex; 
    
    background-color:#008b8b;
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    justify-content: center;
    align-items: center; /* Για να κεντράρει το icon */
    margin-left: 10px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

#download:hover{
    transform: scale(1.1);
    background-color: darkblue;
}

#select-all{
    display: flex; 
    background-color:darkgreen;
    color: white;

}

#select-all:hover{
    transform: scale(1.1);
    background-color:#333333
}

.paper-tag{
    background-color: #008b8b;
    color:#333333;
    border-radius: 15px;
    font-size: 10px;
    padding: 2px 2px;
    max-width: 30px;
}

#papers-options{
    gap:10px;

}

#select-bar{
    display:flex;
    flex-direction: row;
    gap:5px;
    font-size: small;
    font-style:italic;
    align-items: center;
}

/* Βεβαιώσου ότι το τετραγωνάκι έχει relative για να είναι η "άγκυρα" */
.paper-square {
    position: relative; 
    cursor: pointer;
    /* ... τα υπόλοιπα styles σου ... */
}



/* Το ΕΞΩΤΕΡΙΚΟ κουτί - Λειτουργεί ως "γέφυρα" */
.action-toolbar {
    /* 1. Τοποθέτηση */
    position: absolute;
    top: 100%; 
    left: 50%;
    transform: translateX(-50%);
    
    /* 2. Απόσταση από το τετραγωνάκι (εδώ ρυθμίζεις πόσο "αέρα" θες) */
    margin-top: 5px; /* Δοκίμασε 10px ή 15px ανάλογα το γούστο */
    
    /* 3. Εμφάνιση (Το μαύρο χάπι) */
    background-color: #333; 
    border-radius: 30px;    
    padding: 10px 6px;      
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    
    display: none;          
    flex-direction: column; 
    gap: 12px;              
    z-index: 1501;
    animation: popIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes popIn {
    0% {
        opacity: 0;
        /* Ξεκινάει λίγο πιο πάνω (-10px) και λίγο πιο μικρό (scale 0.9) */
        /* Κρατάμε το translateX(-50%) για να παραμείνει κεντραρισμένο */
        transform: translateX(-50%) translateY(-10px) scale(0.9);
    }
    100% {
        opacity: 1;
        /* Καταλήγει στην τελική θέση και στο κανονικό μέγεθος */
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.action-toolbar::before {
    content: "";
    position: absolute;
    
    top: -15px;  
    left: 0;
    width: 100%; 
    height: 20px; 
    
    background: transparent; /* Αόρατο! */
    /* background: red; <--- Ξε-σχολίασέ το αν θες να δεις πού είναι η γέφυρα για debug */
}



/* Στυλ για τα κουμπιά */
.action-btn {
    position:relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    color: #7f8c8d;
    transition: all 0.2s ease;
    padding: 0;
}

.action-btn:hover {
    transform: scale(1.2);
    color:#e3f2fd;
}

.action-btn::after {
    content: attr(data-tooltip); /* Παίρνει το κείμενο δυναμικά */
    position: absolute;
    
    /* Θέση: Στα δεξιά (100%) + λίγο κενό (10px) */
    left: 100%;
    top: 50%;
    transform: translateY(-50%); /* Κεντράρισμα στον κάθετο άξονα */
    margin-left: 10px; 

    /* Εμφάνιση */
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: clamp(0.75rem, 0.3vw + 0.675rem, 1rem);
    font-family: 'Outfit', sans-serif;
    white-space: nowrap; /* Μη σπας το κείμενο σε γραμμές */
    pointer-events: none; /* Να μην ενοχλεί στο κλικ */
    
    /* Animation */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
    z-index: 9999; /* Να βγαίνει πάνω από όλα */
}

/* Εμφάνιση στο Hover */
.action-btn:hover::after {
    opacity: 1;
    visibility: visible;
}



.action-btn:hover::before {
    opacity: 1;
    visibility: visible;
}

/* --- BUTTON HOVER COLORS --- */

/* Το γενικό hover (μεγέθυνση & σκούρο γκρι) */
.action-btn:hover {
    transform: scale(1.2);
    color: #333; 
}

/* Τα ειδικά χρώματα (Πρέπει να είναι META το γενικό) */

#doi:hover{
    color:#1b5e20
}

#select-option:hover{
    color: whitesmoke
}

#bib:hover { 
    color:#f1c40f   !important; /* Βάζω !important για δοκιμή */
}

#scholar:hover { 
    color: #3498db!important; 
}

#copy:hover { 
    color: #2ecc71 !important; 
}

#edit-option:hover{
    color:#ef4444 !important;
}

#remove-papers-btn{
  font-size: clamp(0.875rem, 0.4vw + 0.75rem, 1.125rem);
  font-weight: 200;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family:'Outfit', sans-serif;
      padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: center;

}

#remove-papers-btn:hover {
    transform: scale(1.1);
    background-color: darkred;
    color:white;
    justify-content:center;
    align-items:center
}

.more-options-toolbar {
    position: absolute;
    bottom: calc(100% + 10px); /* Το σπρώχνει 100% πάνω από το ύψος του κουμπιού, συν 10px αέρα */
    left: 50%; /* Το πάει στη μέση του κουμπιού */
    transform: translateX(-50%); /* Το κεντράρει απόλυτα */
    
    /* Λοιπά στυλ (χρώματα, display κλπ) τα ρυθμίζεις όπως θες, π.χ.: */
    display: flex;
    flex-direction: column; /* ή row αν θες τα κουμπιά δίπλα-δίπλα */
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 6px;
    padding: 8px;
    z-index: 1501; /* Για να είναι σίγουρα πάνω από άλλα στοιχεία */
}

/* Αν έχεις κλάση .hidden για να το κρύβεις */
.more-options-toolbar.hidden {
    display: none; 
    /* ή opacity: 0; pointer-events: none; αν χρησιμοποιείς fade animations */
}

/* Η "αόρατη γέφυρα" για να μην χάνεται το hover (αν το ανοίγεις με hover) */
.more-options-toolbar::before {
    content: "";
    position: absolute;
    bottom: -15px; /* Μπαίνει στο κάτω μέρος του μενού */
    left: 0; 
    width: 100%; /* Απλώνεται σε όλο το πλάτος του μενού */
    height: 15px; /* Καλύπτει το κενό μέχρι το κουμπί */
    background: transparent;
}



.options-wrapper {
        position: relative;
    display: inline-flex; 
    align-items: center;
    justify-content: center;
}

.impact-toggle-container {
    display: flex;
    align-items: center;
    gap: 10px; 
    font-family: 'Outfit', sans-serif;
}
.impact-label {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(0.875rem, 0.4vw + 0.75rem, 1.125rem);
    font-weight: 500;
    color: #333;
    white-space: nowrap;
}
.switch {
    position: relative;
    display: inline-block;
    width: 44px;  
    height: 24px; 
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;        
    border-radius: 34px;    
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px; 
    width: 18px;
    left: 3px;    
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}


/* Αλλαγή χρώματος φόντου σε ΠΡΑΣΙΝΟ */
input:checked + .slider {
    background-color: #2ecc71; /* Το πράσινο που ήθελες! */
}

input:checked + .slider:before {
    transform: translateX(20px);
}

input:focus + .slider {
    box-shadow: 0 0 1px #2ecc71;
}

#timeline-search-bar{
    display:flex;
    justify-content: center;
    align-items: center;
}

.search-container {
    width: 80%; /* Όρισε το πλάτος που προτιμάς */
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 12px;
    transition: box-shadow 0.3s ease;
    height:10px;
    margin-bottom:10px;
    margin-top:10px

}

.search-container:focus-within {
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
    border-color: #bbbbbb;
}

#title-search {
    border: none;
    outline: none;
    width: 100%;
    font-family: "Outfit", sans-serif;
    font-size: clamp(0.75rem, 0.3vw + 0.675rem, 1rem);
    margin-left: 8px;
    color: #333;
}

.search-icon {
    color: #888;
    font-size: 20px;
}

/* Όταν η κλάση 'loading' προστεθεί στο container */
.impact-toggle-container.loading {
    opacity: 0.7;
    pointer-events: none; /* Απαγορεύει το κλικ */
}

.impact-toggle-container.loading .slider {
    background-color: #b0b0b0; /* Γκρι */
    cursor: wait; /* Δείχνει ρολογάκι/κλεψύδρα */
    animation: pulse 1.5s infinite; /* Εφέ παλμού */
}
.vertical-separator {
    width: 1px;
    height: 25px;
    background-color: #ddd;
    margin: 0 5px;
    display: none;
}

/* Το Animation του παλμού */
@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Προαιρετικά: Μικρό κειμενάκι loading */
.loading-text {
    font-size: clamp(0.75rem, 0.3vw + 0.675rem, 1rem);
    color: #666;
    margin-left: 5px;
    font-style: italic;
}

.legend-wrapper {
    display: flex;
    align-items: center;
    margin-left: 20px; /* Απόσταση από τα κουμπιά */
    padding-left: 20px;
    border-left: 1px solid #444; /* Διαχωριστική γραμμή */
    min-height: 30px;
}

/* Κοινό στυλ για τις μπάρες */
.legend-bar {
    height: 8px;
    border-radius: 4px;
    margin: 0 8px;
    display: inline-block;
}

.legend-row {
    display: flex;
    align-items: center;
    margin-right: 15px;
    font-size: clamp(0.6875rem, 0.2vw + 0.625rem, 0.875rem);
    color: #333;
}

/*form*/
.form-button{
    width: 100px;
    height: 30px;
    border-radius: 5px;
    font-family: "Outfit", sans-serif;
    background-color: #555555;
    color: white;
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease;

}
.form-button:hover{
        transform: scale(1.1);
}
.form-button:disabled{
    background-color: #888;
    color: white;
    transition: none;
}


/* Το μικρό κουμπί (Εικονίδιο μόνο) */
.mini-icon-btn {
    font-family: "Outfit", sans-serif;
    background: transparent;
    border: 1px solid transparent; /* Για να μην κουνιέται στο hover */
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    color: #555;
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: var(--font-md)
}

/* Μέγεθος εικονιδίου */
.mini-icon-btn span {
    font-size: 24px; 
    color: #666;
}



/* Hover effect: Γκρι φόντο */
.mini-icon-btn:hover {
    background-color: #f0f0f0;
    color: #333;
}

/* Active state: Όταν είναι ανοιχτό το μενού ή επιλεγμένο φίλτρο */
.mini-icon-btn.active {
    background-color: #e3f2fd; /* Απαλό μπλε */
    color: #0056b3; /* Μπλε εικονίδιο */
}




/* --- Το Dropdown Menu (Λίστα) --- */
/* --- DROPDOWN MENUS (Βασικό CSS) --- */
.mini-dropdown {
    display: none; /* Κρυφό από default */
    position: absolute;
    top: 100%; /* Ακριβώς κάτω από το κουμπί */
    left: 0;
    margin-top: 8px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Σκιά για να ξεχωρίζει */
    z-index: 2000; /* Πάνω από όλα */
    min-width: 160px;
    overflow: hidden;
}

/* --- Η ΚΛΑΣΗ ΠΟΥ ΕΛΕΙΠΕ --- */
/* Όταν η JS προσθέτει το 'show', το μενού εμφανίζεται */
.mini-dropdown.show {
    display: block !important;
    animation: fadeIn 0.2s ease-out;
}

/* Animation για ωραία εμφάνιση */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Στυλ κάθε επιλογής στη λίστα */
.mini-option {
    padding: 10px 12px;
    font-size: clamp(0.875rem, 0.4vw + 0.75rem, 1.125rem);
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px; /* Κενό ανάμεσα σε εικονίδιο και κείμενο */
    border-bottom: 1px solid #f9f9f9;
    transition: background 0.1s;
}

/* Αφαιρούμε τη γραμμή στο τελευταίο */
.mini-option:last-child {
    border-bottom: none;
}

/* Hover στην επιλογή */
.mini-option:hover {
    background-color: #f5f5f5;
    color: #000;
}

/* Εικονίδια μέσα στη λίστα */
.mini-option span {
    font-size: 18px;
    color: #666;
}

.mini-option:hover span {
    color: #333;
}

/* Animation εμφάνισης */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   ADMIN DASHBOARD - ANIMATED TABS LAYOUT
========================================= */
.batch-form-container table tr:hover {
    background-color: #fdfdfd;
}

.batch-form-container td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
}

/* Custom Checkbox στυλ */
.conflict-checkbox {
    width: 18px;
    height: 18px;
    accent-color: olive;
    cursor: pointer;
}

/* Badge για τον αριθμό των papers */
.paper-count-badge {
    background: #eef2f3;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    color: #555;
    font-weight: bold;
}

/* 1. Κεντρικό Container (Διατηρεί το sidebar στα αριστερά) */
#page-edit {
    display: flex;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center !important;
    
    width: 100%;
    
    /* Το κλειδώνουμε ΑΥΣΤΗΡΑ στο μέγεθος του .center (στο 85% της οθόνης δηλαδή) */
    height: 100% !important; 
    
    /* ΤΟ ΜΥΣΤΙΚΟ ΠΟΥ ΕΛΕΙΠΕ: Του λέμε να μην ακολουθεί το μέγεθος του περιεχομένου */
    min-height: 0 !important; 
    
    /* Ενεργοποίηση του Scroll εσωτερικά */
    overflow-y: auto !important; 
    overflow-x: hidden !important;
    
    padding-top: 20px;
    padding-bottom: 40px; /* Για να μην κολλάει η κάρτα στο footer όταν σκρολάρεις τέρμα κάτω */
    box-sizing: border-box;
}

#page-edit::-webkit-scrollbar{
    display:none
}
/* 2. Ο χώρος δίπλα στο sidebar που περιέχει τα Tabs και τις Φόρμες */
.admin-dashboard-wrapper {
    display: grid;
    grid-template-rows: auto 1fr; /* Γραμμή 1: Τα Tabs (auto), Γραμμή 2: Η Κάρτα (1fr = όλος ο υπόλοιπος χώρος) */
    align-items: start; /* Κρατάει τα στοιχεία στην κορυφή και δεν τα αφήνει να ξεχειλώσουν κάθετα */
    
    width: 100%;
    max-width: 850px;
    padding: 16px 24px 24px 24px !important; /* Ελάχιστο κενό πάνω (16px), κανονικό γύρω-γύρω */
    margin: 0;
    box-sizing: border-box;
    height: max-content !important; 
    margin: 0 auto !important;
}

/* =========================================
   ΤΑ ANIMATED TABS (ΜΕΝΟΥ)
========================================= */

.admin-tabs-header {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0;
    margin-bottom: 24px; /* Το κενό ανάμεσα στην μπάρα και την λευκή κάρτα */
    width: 100%;
}
.admin-tabs-nav {
    display: flex;
    position: relative; /* ΣΗΜΑΝΤΙΚΟ για να "εγκλωβίσει" το κινούμενο indicator */
    gap: 16px;
}

.tab-btn {
    background: transparent;
    border: none;
    padding: 12px 24px;
   font-size: clamp(0.875rem, 0.4vw + 0.75rem, 1.125rem);
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: color 0.3s ease;
    letter-spacing: 0.5px;
    margin: 0;
    outline: none;
}

.tab-btn:hover { color: #0f172a; }
.tab-btn.active { color: #2e7d32; } /* Πράσινο χρώμα για το ενεργό */

/* Το κινούμενο πράσινο στοιχείο */
.tab-indicator {
    position: absolute;
    bottom: -2px; /* Πάνω ακριβώς στη γκρι γραμμή */
    left: 0;
    height: 3px;
    background-color: #2e7d32;
    border-radius: 3px 3px 0 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0;
}

#reset-keyword-btn{
    display: none !important;
}

#reset-venue-btn{
    display: none !important;
}

#reset-venue-btn.active, #reset-keyword-btn.active {
    display: inline-flex !important; /* Το inline-flex είναι καλύτερο για κουμπιά από το σκέτο flex */
    align-items: center;
    justify-content: center;
    gap: 6px; /* Βάζει αυτόματα τέλεια απόσταση ανάμεσα στο βελάκι και το κείμενο */
    
    background-color: #2e7d32;
    color: #ffffff; /* Λευκό κείμενο για τέλεια αντίθεση */
    font-family: "Outfit", sans-serif; 
    font-size: 14px;
    font-weight: 500;
    
    padding: 8px 18px; /* Δίνει "αναπνοή" στο κουμπί */
    border: none;
    border-radius: 8px; /* Μοντέρνες, απαλές γωνίες */
    cursor: pointer;
    
    /* Ομαλή μετάβαση για το hover */
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(46, 125, 50, 0.2); /* Μια πολύ διακριτική πράσινη σκιά */
}

#reset-venue-btn.active:hover{
    background-color: #1b5e20; /* Γίνεται έναν τόνο πιο σκούρο */
    box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3); /* Η σκιά μεγαλώνει */
    transform: translateY(-1px); /* Σηκώνεται ελάχιστα πάνω, δίνοντας 3D αίσθηση */
}

#reset-venue-btn.active .material-symbols-outlined{
    font-size: 18px; 
}

#reset-keyword-btn.active {
    display: inline-flex !important; /* Το inline-flex είναι καλύτερο για κουμπιά από το σκέτο flex */
    align-items: center;
    justify-content: center;
    gap: 6px; /* Βάζει αυτόματα τέλεια απόσταση ανάμεσα στο βελάκι και το κείμενο */
    
    background-color: #2e7d32;
    color: #ffffff; /* Λευκό κείμενο για τέλεια αντίθεση */
    font-family: "Outfit", sans-serif; 
    font-size: 14px;
    font-weight: 500;
    
    padding: 8px 18px; /* Δίνει "αναπνοή" στο κουμπί */
    border: none;
    border-radius: 8px; /* Μοντέρνες, απαλές γωνίες */
    cursor: pointer;
    
    /* Ομαλή μετάβαση για το hover */
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(46, 125, 50, 0.2); /* Μια πολύ διακριτική πράσινη σκιά */
}

/* Το Hover Effect */
#reset-keyword-btn.active:hover {
    background-color: #1b5e20; /* Γίνεται έναν τόνο πιο σκούρο */
    box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3); /* Η σκιά μεγαλώνει */
    transform: translateY(-1px); /* Σηκώνεται ελάχιστα πάνω, δίνοντας 3D αίσθηση */
}

/* Προαιρετικό: Ρυθμίζει το μέγεθος στο βελάκι για να μην είναι τεράστιο */
#reset-keyword-btn.active .material-symbols-outlined {
    font-size: 18px; 
}

#reset-author-btn{
    display: none !important;
}

#reset-author-btn.active {
    display: inline-flex !important; /* Το inline-flex είναι καλύτερο για κουμπιά από το σκέτο flex */
    align-items: center;
    justify-content: center;
    gap: 6px; /* Βάζει αυτόματα τέλεια απόσταση ανάμεσα στο βελάκι και το κείμενο */
    
    background-color: #2e7d32;
    color: #ffffff; /* Λευκό κείμενο για τέλεια αντίθεση */
    font-family: "Outfit", sans-serif; 
    font-size: 14px;
    font-weight: 500;
    
    padding: 8px 18px; /* Δίνει "αναπνοή" στο κουμπί */
    border: none;
    border-radius: 8px; /* Μοντέρνες, απαλές γωνίες */
    cursor: pointer;
    
    /* Ομαλή μετάβαση για το hover */
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(46, 125, 50, 0.2); /* Μια πολύ διακριτική πράσινη σκιά */
}

#reset-author-btn.active:hover {
    background-color: #1b5e20; /* Γίνεται έναν τόνο πιο σκούρο */
    box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3); /* Η σκιά μεγαλώνει */
    transform: translateY(-1px); /* Σηκώνεται ελάχιστα πάνω, δίνοντας 3D αίσθηση */
}

#reset-author-btn.active .material-symbols-outlined {
    font-size: 18px; 
}


/* =========================================
   ΚΑΡΤΕΣ & ΦΟΡΜΕΣ (PANELS)
========================================= */

.admin-tabular-form {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 30px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Ελαφριά σκιά "κάρτας" */
    text-align: left !important;
    margin: 0;
}

/* Επικεφαλίδες & Κείμενα */
.admin-form-header {
    display: flex;
    justify-content: space-between; /* Σπρώχνει τα στοιχεία στις δύο άκρες */
    align-items: center; /* Τα στοιχίζει στο ίδιο ύψος κάθετα */
    margin-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
}
.admin-form-header h3 { margin-top: 0; font-size: 1.25em; color: #1e293b; text-align: left !important; }
.help-text { color: #64748b; font-size: 0.9em; margin: 0; text-align: left !important; }

/* Γραμμή Αναζήτησης */
.search-row { margin-bottom: 20px; }
.search-row label { display: block; color: #334155; margin-bottom: 8px; font-weight: 500; font-size: 0.9em; text-align: left !important;}

.input-group-wrapper {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.input-group-wrapper input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    box-sizing: border-box;
    transition: border-color 0.2s;
    height: 42px !important;
}

.input-group-wrapper input:focus { border-color: #3b82f6 !important; outline: none; }

/* Πίνακας Ενεργειών */
.action-table-wrapper {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    margin-top: 24px;
    overflow-x: auto; /* Αποτρέπει το σπάσιμο της κάρτας αν έχει μεγάλα δεδομένα */
}

.admin-action-table { width: 100%; border-collapse: collapse; text-align: left; }
.admin-action-table th, .admin-action-table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
    font-size: 14px;
    text-align: left !important;
}

.admin-action-table tr:last-child th, .admin-action-table tr:last-child td { border-bottom: none; }
.admin-action-table th { width: 120px; background: #f1f5f9; color: #475569; font-weight: 500; border-right: 1px solid #e2e8f0; }

.highlight-val { color: #0f172a; background: #e2e8f0; padding: 4px 8px; border-radius: 4px; font-weight: 600; }
.table-input { width: 100% !important; padding: 10px 12px !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; font-size: 14px !important; box-sizing: border-box; height: 42px !important; }
.row-hint { display: block; font-size: 0.85em; color: #94a3b8; margin-top: 6px; }
.danger-hint { color: #ef4444; }

/* =========================================
   ΚΟΥΜΠΙΑ
========================================= */
.admin-tabular-form button, .form-button {
    padding: 0 20px !important;
    border-radius: 6px !important;
    font-size: clamp(0.875rem, 0.4vw + 0.75rem, 1.125rem) !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
}

.btn-primary { background: #2e7d32 !important; color: white !important; }
.btn-primary:hover:not(:disabled) { background: #1b5e20 !important; }
.btn-primary:disabled { background: #a5d6a7 !important; cursor: not-allowed !important; color: white !important; }

.btn-outline { background: white !important; border-color: #cbd5e1 !important; color: #334155 !important; }
.btn-outline:hover { background: #f1f5f9 !important; }

.btn-danger-text {
    background: transparent !important;
    color: #ef4444 !important;
    border: 1px solid #fca5a5 !important;
    padding: 0 16px !important;
    height: 42px !important;
}
.btn-danger-text:hover { background: #fef2f2 !important; border-color: #ef4444 !important; }

.form-divider { border: 0; border-top: 1px solid #e2e8f0; margin: 24px 0; }
.form-actions { display: flex !important; justify-content: flex-end !important; }

/*============================================
            KOMMATI DEKSIA
==============================================*/
.selected-admin{
    display:flex;
    flex-direction: column;
    align-items: flex-start; /* Αλλαγή σε flex-start για αριστερή στοίχιση */
    padding-left: 30px;      /* Το κενό που ζήτησες από αριστερά */
    padding-right: 20px;
}

.selected-admin h3{
    font-size: var(--font-md);
}

.papers-list {
    list-style: none !important; /* Σταματάμε να παλεύουμε με τα default */
    padding-left: 0 !important; 
    margin: 0;
    width: 100%;
}

.papers-list li {
    display: block !important; /* Το κάνουμε block αντί για list-item */
    position: relative; /* ΣΗΜΑΝΤΙΚΟ: Αγκιστρώνει την κουκκίδα πάνω στο li */
    padding-left: 18px !important; /* Αφήνουμε χώρο αριστερά ΜΕΣΑ στο στοιχείο για την κουκκίδα */
    
    cursor: pointer;
    font-size: var(--font-sm);
    color: #555;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.5;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

/* ΦΤΙΑΧΝΟΥΜΕ ΤΗ ΔΙΚΗ ΜΑΣ CUSTOM ΚΟΥΚΚΙΔΑ */
.papers-list li::before {
    content: "•"; /* Ο χαρακτήρας της κουκκίδας */
    position: absolute;
    left: 0; /* Την κολλάμε τέρμα αριστερά */
    top: 7px; /* Την ευθυγραμμίζουμε με την πρώτη γραμμή του κειμένου */
    

    color: #2e7d32; /* Το πράσινο χρώμα της εφαρμογής */
    font-size: 1.6em; /* Την κάνουμε ωραία και μεγάλη */
    line-height: 1;
    transition: transform 0.2s ease;
}

/* Hover εφέ (μετακινεί το κείμενο) */
.papers-list li:hover {
    color: #2e7d32;
    transform: translateX(5px);
}

/* --- ΕΝΟΠΟΙΗΣΗ SEARCH & ADD --- */
.search-row, .add-row { 
    margin-bottom: 20px; 
}

/* Προσθέτουμε ένα ωραίο διαχωριστικό πάνω από το Add */
.add-row {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #cbd5e1; 
}

.search-row label, .add-row label { 
    display: block; 
    color: #334155; 
    margin-bottom: 8px; 
    font-weight: 500; 
    font-size: 0.9em; 
    text-align: left !important;
}

.input-group-wrapper, .add-group-wrapper {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.input-group-wrapper input, .add-group-wrapper input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    font-size: clamp(0.875rem, 0.4vw + 0.75rem, 1.125rem) !important;
    box-sizing: border-box;
    transition: border-color 0.2s;
    height: 42px !important;
}

.input-group-wrapper input:focus, .add-group-wrapper input:focus { 
    border-color: #3b82f6 !important; 
    outline: none; 
}

/* Το κουμπί Add (Μπλε για να διαφέρει από το Select) */
.add-btn { 
    background: #0ea5e9 !important; 
    color: white !important; 
}
.add-btn:hover:not(:disabled) { 
    background: #0284c7 !important; 
}
.add-btn:disabled { 
    background: #bae6fd !important; 
    cursor: not-allowed !important; 
    color: white !important; 
}

/* 1. Το "Καλάθι" (Container) */
.selected-papers-container {
    display: flex;
    flex-wrap: wrap;       /* Επιτρέπει στα tags να πηγαίνουν δίπλα-δίπλα και να αλλάζουν γραμμή */
    gap: 6px;              /* Μικρό κενό ανάμεσα στα tags για να είναι συμπαγή */
    
    /* Το μυστικό για να μην ψηλώνει το Modal */
    max-height: 110px;     /* Χωράει περίπου 3-4 γραμμές από tags */
    overflow-y: auto;      /* Εμφανίζει κάθετο scrollbar ΜΟΝΟ αν γεμίσει */
    
    /* Προαιρετικό: Ένα πολύ απαλό φόντο για να οριοθετείται ο χώρος οπτικά */
    padding: 8px;
    background-color: #fcfcfc;
    border: 1px solid #f1f5f9;
    border-radius: 6px;
    margin-top: 10px;
}

/* Φτιάχνουμε μια πιο διακριτική μπάρα κύλισης */
.selected-papers-container::-webkit-scrollbar {
    width: 6px;
}
.selected-papers-container::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

/* 2. Τα συμπαγή Tags (Chips) */
.admin-paper-tag {
    display: inline-flex;
    align-items: center;
    background-color: #F5E8D8; /* Κρατάμε το μπεζ σου που είναι πολύ ωραίο */
    color: #475569;            /* Σκούρο γκρι-μπλε για τα γράμματα */
    
    /* Πιο μαζεμένο μέγεθος */
    padding: 4px 10px;         
    border-radius: 16px;       
    font-size: clamp(0.75rem, 0.3vw + 0.675rem, 1rem);         /* Λίγο πιο μικρά γράμματα για να χωράνε πολλά */
    line-height: 1.2;
    
    border: 1px solid #eaddcc; 
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

.admin-paper-tag:hover {
    background-color: #eeddc8;
}



/* 3. Το κουμπάκι "X" */
.admin-paper-tag .remove-tag {
    margin-left: 6px;
    font-size: 16px;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-paper-tag .remove-tag:hover {
    color: #ef4444; /* Γίνεται κόκκινο όταν πας να το διαγράψεις */
}

#modal-selected-papers::-webkit-scrollbar {
    width: 6px;
}
#modal-selected-papers::-webkit-scrollbar-track {
    background: transparent;
}
#modal-selected-papers::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}

.custom-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.custom-modal-content {
    background: white;
    padding: 25px;
    border-radius: 8px;
    width: 450px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.modal-section {
    margin: 15px 0;
}

.custom-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(4px); /* Blur στο background */
    font-family: 'Outfit', sans-serif;
}

.custom-modal-content {
    background: white;
    padding: 30px;
    border-radius: 16px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.05);
}

.custom-modal-content h2 {
    margin-top: 0;
    color: #1e293b;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-section {
    margin: 25px 0;
}

.modal-section label {
    display: block;
    margin-bottom: 10px;
    color: #64748b;
    font-size: 0.9rem;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    transition: border-color 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: #008b8b;
}

/* Styled Buttons */
.btn {
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: opacity 0.2s;
}

#btn-save-paper-edit{
    font-size: var(--font-sm) !important;
}

#btn-link-existing{
    font-size: var(--font-sm) !important;
}

#btn-link-existing-author{
    font-size: var(--font-sm) !important;
}

#last-updated{
    font-size: var(--font-sm) !important;
}

.form-btn.btn-outline{
    font-size: var(--font-sm) !important;
}

#save-changes-btn{
    font-size: var(--font-sm) !important;
}

#modal-btn-save-links{
    font-size: var(--font-sm) !important;
}

.btn:hover { opacity: 0.85; }
.btn-warning { background: #f59e0b; color: white; }
.btn-danger { background: #ef4444; color: white; }
.btn-success { background: #10b981; color: white; }
.btn-secondary { background: #64748b; color: white; }

/* ==========================================================================
   📱 MOBILE RESPONSIVENESS (Οθόνες κάτω από 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. Απελευθέρωση του Body & Main
       Στο κινητό, το σταθερό ύψος (100%) και το overflow: hidden είναι εχθροί, 
       ειδικά όταν ανοίγει το πληκτρολόγιο. Τα κάνουμε ελεύθερα να σκρολάρουν. */
    body, html {
        height: auto !important;
        overflow-y: auto !important;
        display: block !important; /* Καταργούμε το Grid του body */
    }

    .main {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    /* 2. Επιδιόρθωση των Modals και της Φόρμας Insert */
    #page-insert, #page-edit {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        padding: 10px !important;
        display: none ;
    }

    .form-card, .admin-tabular-form, .modal-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
        margin-bottom: 20px;
        box-shadow: none; /* Αφαιρούμε τις μεγάλες σκιές για οικονομία χώρου */
    }

    /* Στα form-rows, τα πεδία μπαίνουν το ένα κάτω από το άλλο */
    .form-row, .display-flex {
        flex-direction: column;
        gap: 10px;
    }

    /* 3. Το Timeline και τα Controls του */
    #timeline-container {
        height: 60vh; /* Δίνουμε λίγο παραπάνω ύψος στο κινητό */
        padding: 10px 15px 45px 15px;
    }

    .timeline-controls {
        /* Σπάμε το Grid των 3 στηλών και τα βάζουμε κάθετα */
        grid-template-columns: 1fr;
        height: auto;
        padding: 15px;
        gap: 10px;
        border-radius: 10px;
    }

    .controls-div, .select-all, .options-wrapper {
        justify-self: center !important;
        justify-content: center !important;
        border-right: none !important;
        border-bottom: 1px solid #e0e0e0;
        padding: 10px 0 !important;
        width: 100%;
        height: auto;
    }

    /* Το τελευταίο δεν χρειάζεται γραμμή από κάτω */
    .options-wrapper {
        border-bottom: none;
    }

    /* 4. Διόρθωση των Tabs στο Admin Dashboard */
    .admin-tabs-nav {
        overflow-x: auto; /* Επιτρέπουμε οριζόντιο scroll στα tabs αν είναι πολλά */
        white-space: nowrap;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch; /* Smooth scroll για iOS */
    }
    
    .admin-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        padding: 10px 12px;
        font-size: 14px;
    }

    /* 5. Results Area (Η στήλη που πάει κάτω) */
    .results-area {
        width: 100%;
        height: auto;
        overflow-y: visible;
        padding: 15px;
    }

    /* 6. Fix για το Toolbar με τις "More Options" 
       Επειδή δεν χωράει δεξιά, το εμφανίζουμε από κάτω */
    .more-options-toolbar {
        left: 50% !important;
        top: 100% !important;
        transform: translateX(-50%) translateY(10px) !important;
        flex-direction: row; /* Τα κουμπιά δίπλα-δίπλα */
    }

    .more-options-toolbar::before, .more-options-toolbar::after {
        display: none; /* Κρύβουμε τα βελάκια σύνδεσης */
    }
    
    .more-options-toolbar.hidden {
        transform: translateX(-50%) translateY(0) scale(0.95) !important;
    }
}


/* Το Overlay Modal */
#citation-update-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Για να είναι πάνω από όλα */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#citation-update-modal.active {
    opacity: 1;
    visibility: visible;
}

/* Το λευκό κουτί μέσα στο Modal */
.citation-modal-content {
    background: white;
    padding: 30px 40px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    font-family: 'Outfit', sans-serif;
    max-width: 400px;
}

/* Το κινούμενο κυκλάκι (Spinner) */
.citation-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f1f5f9;
    border-top: 4px solid #008b8b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px auto;
}

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}