@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth; 
    font-size: 13px;
}

body {
    margin-bottom: 0px;
    padding: 0;
    height: 100%;
    font-size: 0.9rem;
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#chess-graphics-layer,
#liveBoard svg {
    pointer-events: none !important;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Αλλάζει τον κέρσορα όταν περνάμε πάνω από την άσκηση για να δείξει ότι σέρνεται */
.draggable-item {
    cursor: grab !important;
    transition: transform 0.2s ease;
}

    .draggable-item:active {
        cursor: grabbing !important;
    }

    /* Εφέ όταν "πιάνεις" μια κάρτα */
    .draggable-item.ui-draggable-dragging {
        z-index: 9999;
        opacity: 0.8;
        transform: scale(1.05);
    }

/* Το "φάντασμα" που ακολουθεί το ποντίκι κατά το drag στο jsTree */
#jstree-dnd {
    z-index: 10000 !important;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #0d6efd;
    padding: 5px 10px;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Highlight στον φάκελο-στόχο όταν σέρνεις κάτι από πάνω του */
.jstree-hovered {
    background: #e7f1ff !important;
    border-radius: 2px;
}

.puzzle-card:hover {
    border: 1px solid #0d6efd !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}
/* Ο κέρσορας πάνω από τη σκακιέρα */
.fen-preview {
    cursor: pointer !important;
}

/* Αν θέλουμε να διατηρήσουμε το grab μόνο όταν πιάνουμε την κάρτα από το περίγραμμα */
.draggable-item {
    cursor: grab;
}

/* Όταν κάνουμε hover στη σκακιέρα, μια μικρή οπτική ένδειξη */
.fen-preview:hover {
    opacity: 0.9;
    filter: brightness(1.05);
}

.item-card {
    border-radius: 12px;
    border-color: #dee2e6 !important; /* Ανοιχτό γκρι border */
}

    .item-card:hover {
        transform: translateY(-5px); /* Μικρό σήκωμα στο hover */
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
        border-color: #0d6efd !important; /* Μπλε border στο hover */
    }

/* Περιορισμός τίτλου σε 1 γραμμή για ομοιομορφία */
.card-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Η κάρτα πιάνει όλο το διαθέσιμο πλάτος του column */
.compact-layout {
    width: 100%;
    transition: all 0.2s ease;
    border: 1px solid #eee !important;
}

    .compact-layout:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
        border-color: #dee2e6 !important;
    }

/* Διαχείριση των Tags */
.mini-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    /* Περιορίζουμε το ύψος για να μην "ξεχειλώνει" η κάρτα αν υπάρχουν πολλά tags */
    max-height: 38px;
    overflow: hidden;
}

.mini-tag {
    font-size: 0.68rem;
    color: #6c757d;
    background-color: #f1f3f5;
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid #e9ecef;
}

/* Εξασφαλίζουμε ότι το grid δεν αφήνει τεράστια κενά */
.row-cols-md-4 { /* Ή όποιο νούμερο χρησιμοποιείς */
    margin-bottom: 1rem;
}
/***************************************************************/

/* Βασικό στυλ για τα κουμπιά δράσης στην κάρτα */
.btn-card-action {
    position: absolute;
    top: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 10;
    opacity: 0; /* Κρυφά από προεπιλογή */
    transition: all 0.2s ease-in-out;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Θέση για το Delete (Δεξιά) */
.btn-delete {
    right: 6px;
    color: #dc3545;
}

/* Θέση για το Add (Αριστερά) */
.btn-add {
    left: 6px;
    color: #198754;
}

/* Εμφάνιση των κουμπιών όταν το ποντίκι είναι πάνω στην κάρτα */
.item-card:hover .btn-card-action {
    opacity: 1;
}

/* Hover εφέ για τα ίδια τα κουμπιά */
.btn-delete:hover {
    background: #dc3545;
    color: white;
}

.btn-add:hover {
    background: #198754;
    color: white;
}

/* Μικρή διόρθωση για να μην κρύβεται ο τίτλος αν είναι μεγάλος */
.item-card .card-body {
    padding-top: 25px !important; /* Αφήνει χώρο για τα κουμπιά που θα εμφανιστούν */
}


/***************************************************************/

/* Styling για τα κουμπιά επιλογής σειράς */
.turn-selector .btn-check:checked + .btn-outline-primary {
    background-color: #f8f9fa; /* Ελαφρύ γκρι για να φαίνεται το λευκό */
    color: #0d6efd;
    border-width: 2px;
    font-weight: bold;
}

.turn-selector .btn-check:checked + .btn-outline-dark {
    background-color: #212529; /* Μαύρο φόντο όταν επιλέγεται ο Μαύρος */
    color: white;
    border-width: 2px;
    font-weight: bold;
}

/* Hover εφέ */
.turn-selector .btn:hover {
    filter: brightness(90%);
}
/*************************************************************************************/
/* Πώς φαίνονται οι κινήσεις κανονικά */
.move-link {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.2s, color 0.2s;
    display: inline-block;
}

    /* Όταν περνάει το ποντίκι από πάνω (Hover) */
    .move-link:hover {
        background-color: #e9ecef; /* Ένα απαλό γκρι */
        text-decoration: none;
    }

/* Όταν η κίνηση είναι επιλεγμένη (Κλικ) */
.active-move {
    background-color: #0d6efd; /* Το μπλε του Bootstrap */
    color: white !important;
    font-weight: bold;
}
/***********************MYClass ChessBoard**************************************************************/

/* Βασικό μέγεθος σκακιέρας */
.responsive-board {
    width: 100%;
    max-width: min(100%, 80vh);
    margin: 0 auto;
}

    /* Μέγεθος όταν εμφανίζονται τα Spare Pieces */
    .responsive-board.setup-active {
        max-width: min(100%, 65vh); /* Μικραίνει για να χωρέσουν τα κομμάτια */
    }

/* Οποιοδήποτε modal header μέσα σε ένα modal θα δείχνει το "χέρι" ή το "move" icon */
.modal-header {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}

    /* Όταν το πατάς, αλλάζει σε "grabbing" για καλύτερη αίσθηση */
    .modal-header:active {
        cursor: -webkit-grabbing;
        cursor: grabbing;
    }

/* 2. Ο πρωταγωνιστής: Το πάνελ των κινήσεων */
/* Κεντρικό Πάνελ PGN */
.moves-output-panel,
#livePgnDisplay {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

/* ==========================================================================
   TACTICOCHESS - UNIFIED LIGHT & DARK MODE THEMING
   ========================================================================== */

/* 1. Κεντρικά Πάνελ (PGN Moves Panel & Symbols Tab) */
#livePgnDisplay, .moves-output-panel, #symbols-panel {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

    /* 2. Κύρια Γραμμή & Βαριάντες - ΑΠΟΛΥΤΩΣ ΙΔΙΟ ΦΟΝΤΟ ΠΑΝΤΟΥ */
    #livePgnDisplay .main-move-row,
    #livePgnDisplay .sideline-row,
    #livePgnDisplay .move-node {
        background-color: transparent !important;
        color: var(--bs-body-color) !important;
    }

    /* 🟢 2α. MAIN LINE: Έντονη & Μεγαλύτερη Γραμματοσειρά */
    #livePgnDisplay .main-move-row {
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.6;
    }

    /* 🟢 2β. SIDELINES (Βαριάντες): Πιο διακριτική εμφάνιση */
    #livePgnDisplay .sideline-row {
        font-size: 0.9rem;
        font-weight: 400;
        opacity: 0.88;
        border-left: 2px solid var(--bs-border-color) !important;
        padding-left: 8px;
        margin: 4px 0;
    }

    /* 3. Ενεργή / Επιλεγμένη Κίνηση (Current Move) */
    #livePgnDisplay .move-node.current-move {
        background-color: var(--bs-primary) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
    }

    /* 4. Hover στις Κινήσεις */
    #livePgnDisplay .move-node:not(.current-move):hover {
        background-color: var(--bs-tertiary-bg) !important;
        color: var(--bs-body-color) !important;
    }

    /* 5. Κουμπιά στο Symbols Tab */
    #symbols-panel .btn,
    #symbols-panel button {
        background-color: var(--bs-tertiary-bg) !important;
        color: var(--bs-body-color) !important;
        border: 1px solid var(--bs-border-color) !important;
    }

        #symbols-panel .btn:hover,
        #symbols-panel button:hover {
            background-color: var(--bs-secondary-bg) !important;
            border-color: var(--bs-primary) !important;
        }


.current-move .node-shape-dot {
    background-color: #ffc107;
}

.node-shape-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #3498db; /* Μπλε τελεία */
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}

/* 3. Μορφοποίηση των κειμένων στα Tabs */
.analysis-tabs-wrapper .nav-tabs .nav-link {
    color: #495057;
    border-color: #dee2e6;
}

    .analysis-tabs-wrapper .nav-tabs .nav-link.active {
        font-weight: bold;
        background-color: #f8f9fa;
    }

/* Ρύθμιση για το κάτω μέρος των Tabs */
.analysis-tabs-wrapper {
    min-height: 260px;
    max-height: 40%;
}

/* Το textarea απλώνει αυτόματα στο διαθέσιμο ύψος του Tab */
#move-comment-textarea {
    resize: none;
    border-radius: 0 0 4px 4px;
}


.cursor-move {
    cursor: move;
}


.highlight-border {
    box-shadow: inset 0 0 0 4px #e67e22 !important;
}

.highlight-move {
    box-shadow: inset 0 0 0 4px #e67e22 !important;
}

.highlight-best {
    box-shadow: inset 0 0 0 4px #2ecc71 !important;
}

.material-advantage {
    display: flex;
    align-items: center;
    gap: 1px;
}

    .material-advantage img {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }

.material-score {
    font-size: 12px;
    font-weight: bold;
    color: #666;
    margin-left: 4px;
    line-height: 2;
}


/* Grid Layout & Panels Base */
.grid-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: calc(100vh - 70px);
    overflow: hidden;
}

.left-panel,
.chess-right-panel {
    overflow: hidden;
}

/* ---- LIGHT MODE (Προεπιλογή) ---- */
:root, [data-bs-theme="light"] {
    --bs-body-bg: #f4f6f8;
    --bs-body-color: #2c3e50;
}

    [data-bs-theme="light"] .card {
        background-color: #ffffff;
    }

/* ---- DARK MODE ---- */
[data-bs-theme="dark"] {
    --bs-body-bg: #0f172a;
    --bs-body-color: #e2e8f0;
}

    [data-bs-theme="dark"] .card {
        background-color: #1e293b;
        border: 1px solid #334155;
    }

    [data-bs-theme="dark"] .form-control {
        background-color: #0f172a;
        color: #e2e8f0;
        border-color: #334155;
    }

        [data-bs-theme="dark"] .form-control:focus {
            background-color: #0f172a;
            color: #ffffff;
            border-color: #3b82f6;
        }

.card {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Floating Button */
#theme-toggle-floating {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    z-index: 1050;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.3s ease;
    cursor: pointer;
}

    #theme-toggle-floating:hover {
        opacity: 1;
        transform: scale(1.1);
    }

@media (max-width: 768px) {
    #theme-toggle-floating {
        width: 40px;
        height: 40px;
        bottom: 15px;
        right: 15px;
        font-size: 1rem;
    }
}

/* CALENDAR */
#calendar {
    background: white;
    padding: 15px;
    border-radius: 8px;
}

#calendarModal,
#lessonEditModal {
    user-select: none;
    -webkit-user-select: none;
}

#calendarModal {
    z-index: 1050;
}

#lessonEditModal {
    z-index: 1070 !important;
}

#timetable-view {
    position: relative;
    z-index: 100;
}

.modal {
    z-index: 1065 !important;
}

.modal-backdrop {
    z-index: 1060 !important;
}

.fc-event {
    cursor: pointer;
    transition: transform 0.15s ease-in-out;
}

    .fc-event:hover {
        transform: scale(1.02);
    }

.fc-v-event .fc-event-main {
    white-space: normal !important;
    font-size: 0.78rem !important;
    line-height: 1.15;
    padding: 2px 4px !important;
}

.fc-event-title {
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.2;
}

.fc-timegrid-slot {
    height: 32px !important;
}

.fc-timegrid-slot-label {
    font-size: 0.75rem !important;
}

@media (min-width: 576px) {
    #wishlistOffcanvas {
        --bs-offcanvas-width: 480px;
    }
}

/* AUTH PAGES */
.auth-container {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 0), linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    background-size: 24px 24px, 100% 100%;
}

.auth-back-btn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f8fafc;
    transition: all 0.2s ease;
}

    .auth-back-btn:hover {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
        transform: translateX(-3px);
    }

.auth-card {
    background: #ffffff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;
}

.auth-card-header {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
}

.tracking-wide {
    letter-spacing: 0.5px;
}

/* Symbol Glyphs */
.glyph-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.glyph-btn {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    min-width: 42px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 6px;
    transition: all 0.15s ease-in-out;
}

    .glyph-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
    }

[class*="square-"] {
    position: relative !important;
}

.board-glyph-container {
    position: absolute;
    top: -12px;
    right: -12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 1000;
    pointer-events: none;
}

.board-glyph-badge {
    min-width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 900;
    font-size: 1.8rem;
    line-height: 1;
    padding: 2px;
    border: 3px solid #ffffff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    position: relative;
}

.glyph-btn, .glyph-panel-btn {
    padding: 1px 5px !important;
    font-size: 0.75rem !important;
    min-width: 24px !important;
    height: 24px !important;
    line-height: 1 !important;
    font-weight: 700;
    border-radius: 4px;
    margin: 1px !important;
}

.board-glyph-badge + .board-glyph-badge {
    margin-left: -16px;
}

.glyph-panel-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

.glyph-panel-btn.active {
    outline: 2px solid #ffffff;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.4);
}

.navbar {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}

.navbar-nav .nav-link {
    font-size: 0.88rem;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.dropdown-menu .dropdown-item {
    font-size: 0.85rem;
    padding: 0.3rem 0.8rem;
}

/* STUDIO CONTAINER */
.studio-container {
    display: flex;
    width: 100%;
    height: calc(100vh - 80px);
    overflow: hidden;
    position: relative;
}

.left-panel {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.studio-sidebar {
    position: relative !important;
    width: 380px;
    min-width: 380px;
    max-width: 380px;
    height: 100%;
    flex-shrink: 0;
    background-color: #ffffff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.main-board-container {
    flex-grow: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-header {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

    .card-header::-webkit-scrollbar {
        display: none;
    }

    .card-header .btn {
        font-size: 0.825rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

.studio-workspace {
    flex-grow: 1;
    overflow-y: auto;
}

#tab-content .ql-container {
    height: calc(100% - 42px) !important;
    overflow-y: auto;
}

#tab-content .ql-toolbar {
    flex-shrink: 0;
}

/* 🟢 Απόκρυψη του Link Tooltip του Quill όταν η σελίδα είναι σε Read-Only mode (για Readers) */
.ql-container.ql-disabled .ql-tooltip {
    display: none !important;
}

/* Lichess Check Effect - Safe Inset Shadow (Διατηρεί το αρχικό φόντο) */
/*.square-check {
    box-shadow: inset 0 0 12px 6px rgba(255, 0, 0, 0.85), inset 0 0 25px 12px rgba(231, 76, 60, 0.6) !important;
}
*/
/* 1. Ορισμός σχετικής θέσης στο τετράγωνο */
/* 🟢 Σκούρεμα / Highlight αρχικού τετραγώνου (Lichess style) */
. /* 🟢 1. ΗΠΙΟ ΚΑΙ ΜΙΚΡΟΤΕΡΟ ΣΑΧ (Δεν καλύπτει τον Βασιλιά) */
.square-check {
    position: relative !important;
}

/* Η λάμψη μειώθηκε στο 85% και πήρε πιο μαλακό gradient */
.square-check:has(img:not(.ghost-piece))::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 85% !important; /* Μικρότερος κύκλος */
    height: 85% !important;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient( circle at center, rgba(220, 38, 38, 0.75) 0%, rgba(239, 68, 68, 0.35) 55%, rgba(220, 38, 38, 0) 80% ) !important;
    pointer-events: none !important;
    z-index: 1 !important; /* Πίσω από τον Βασιλιά */
}

/* 🔴 Εξασφαλίζουμε ότι η εικόνα του Βασιλιά σχεδιάζεται ΠΑΝΩ από τη λάμψη */
.square-check img {
    position: relative !important;
    z-index: 2 !important;
}

/* 🟢 2. ΦΥΣΙΚΟ ΓΚΡΙΖΑΡΙΣΜΑ / ΣΚΟΥΡΕΜΑ ΑΦΕΤΗΡΙΑΣ (Lichess Style) */
/* Το διαφανές μαύρο σκουραίνει/γκριζάρει φυσικά τόσο τα λευκά όσο και τα μαύρα τετράγωνα */
/* 🟢 1. ΑΦΕΤΗΡΙΑ: Φίλτρο σκούρου τόνου (Overlay) */
.square-source-drag {
    position: relative !important;
}

    /* Το ::before λειτουργεί σαν ημιδιαφανές "τζάμι/φίλτρο" πάνω από το τετράγωνο */
    .square-source-drag::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.25) !important; /* Σκουραίνει φυσικά όποιο χρώμα κι αν έχει το τετράγωνο */
        pointer-events: none !important;
        z-index: 1 !important;
    }

/* 🟢 2. GHOST PIECE (Καθαρό αχνό ίχνος κομματιού) */
.ghost-piece {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4 !important;
    pointer-events: none !important;
    z-index: 2 !important; /* Τοποθετείται πάνω από το σκούρο φίλτρο */
}
/* 📱 Responsive Fixes για Κινητά (Mobile Layout < 768px) */
@media (max-width: 767.98px) {

    /* 1. Κύριος Container: Κατακόρυφη ροή με φυσικό scroll */
    .grid-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
    }

    /* 2. Board Wrapper (Eval Bar + Chessboard) */
    .board-wrapper-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .left-panel {
        width: 100% !important;
        height: auto !important;
        flex-shrink: 0 !important;
    }

    /* 3. Διόρθωση Σκακιέρας: Εξασφάλιση εμφάνισης όλων των τετραγώνων */
    #liveBoard,
    .chessboard-container {
        width: 100% !important;
        max-width: min(90vw, 500px) !important; /* Προσαρμογή στο πλάτος της οθόνης */
        height: auto !important;
        display: block !important;
    }

        /* Επιβολή αναλογίας 1:1 σε ΚΑΘΕ τετράγωνο ξεχωριστά για να μη «θάβονται» τα κενά */
        #liveBoard [class*="square-"] {
            aspect-ratio: 1 / 1 !important;
            box-sizing: border-box !important;
        }

    /* 4. Μπάρα Αξιολόγησης (Eval Bar) */
    .eval-bar-container {
        width: 16px !important;
        min-width: 16px !important;
        height: min(90vw, 500px) !important; /* Ίσο ύψος με τη σκακιέρα */
        flex-shrink: 0 !important;
        margin-right: 6px !important;
    }

    /* 5. Δεξί Πάνελ (Κινήσεις & Tabs) */
    .chess-right-panel {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        margin-top: 15px !important;
        border-left: none !important;
        border-top: 1px solid var(--bs-border-color) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Διόρθωση για να φαίνονται ΟΛΕΣ οι κινήσεις PGN */
    #livePgnDisplay,
    .moves-output-panel {
        max-height: 220px !important; /* Σταθερό μέγιστο ύψος για να μη χάνεται */
        min-height: 120px !important;
        overflow-y: auto !important;
        flex-shrink: 0 !important;
    }

    /* Διόρθωση για τα Tabs (Comment, Symbols) */
    .analysis-tabs-wrapper {
        min-height: auto !important;
        max-height: none !important;
        margin-top: 10px !important;
    }

    /* 6. Διόρθωση Μπάρας Κουμπιών (Navigation / Actions) */
    /* Αν τα κουμπιά είναι σε κάποιο flex container, τα κάνουμε wrap ή scrollable */
    .board-controls,
    .chess-tools-bar,
    .card-header {
        display: flex !important;
        flex-wrap: wrap !important; /* Αναδίπλωση κουμπιών αν δεν χωράνε */
        justify-content: center !important;
        gap: 4px !important;
        overflow-x: auto !important;
    }

        .board-controls .btn,
        .chess-tools-bar .btn {
            padding: 4px 8px !important;
            font-size: 0.8rem !important;
        }

    /* 1. Επιτρέπουμε την αναδίπλωση στο header */
    .card-header {
        white-space: normal !important;
        flex-wrap: wrap !important;
        height: auto !important;
    }

        /* 2. Ξεκλειδώνουμε τα εσωτερικά flex containers/button groups */
        .card-header .btn-group,
        .card-header .d-flex,
        .card-header div {
            flex-wrap: wrap !important;
            white-space: normal !important;
        }

        /* 3. Δίνουμε ελευθερία στα κουμπιά να αλλάζουν γραμμή */
        .card-header .btn {
            white-space: nowrap !important; /* Κρατάει το κείμενο του κουμπιού σε 1 γραμμή */
            flex-shrink: 1 !important;
        }
}

/* ==========================================================================
   MULTIMEDIA & LIVE CLASS PANEL STYLES
   ========================================================================== */

/* 1. Οριζόντια ταινία βίντεο (Participants Strip) */
#video-participants-strip {
    scrollbar-width: thin; /* Λεπτό scrollbar για Firefox */
}

    #video-participants-strip::-webkit-scrollbar {
        height: 4px; /* Λεπτό scrollbar για Chrome/Safari/Edge */
    }

    #video-participants-strip::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }

/* Κάρτες Βίντεο Συμμετεχόντων */
.participant-video-wrapper {
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 1px solid var(--bs-border-color);
    transition: transform 0.2s ease;
}

    .participant-video-wrapper:hover {
        transform: scale(1.02);
    }

/* 2. Chat Section μέσα στο Multimedia Panel */
.chat-section #chat-messages {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


/* 🖥️ Desktop / Default Floating Widget */
#floating-multimedia-widget {
    width: 320px;
    min-width: 280px;
    max-width: 360px;
    height: auto;
    z-index: 1050 !important; /* Εξασφαλίζει ότι επιπλέει πάνω από τη σκακιέρα */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
    transition: width 0.2s ease, height 0.2s ease;
}


/* 📱 Responsive adjustment για κινητά (<768px) */
@media (max-width: 767.98px) {
    #floating-multimedia-widget {
        width: calc(100% - 20px) !important; /* Αφήνει 10px περιθώριο αριστερά/δεξιά */
        min-width: unset !important;
        max-width: 100% !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        z-index: 1050 !important;
    }

    #video-participants-strip .participant-video-wrapper {
        width: 90px !important;
        height: 68px !important;
    }

    /* Περιορισμός ύψους στο chat όταν το widget είναι ανοιχτό σε κινητά */
    #floating-multimedia-widget #chat-messages {
        max-height: 120px !important;
    }
}

/* Εμποδίζει το tooltip να αλληλεπιδρά με το ποντίκι και να προκαλεί flickering */
.tooltip {
    pointer-events: none !important;
}

/*//////////////////////////////////////////////////////////////////////*/
/* Interactive Selection Cards */
.form-check-card {
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

    .form-check-card:hover {
        border-color: var(--bs-primary) !important;
        background-color: var(--bs-primary-bg-subtle) !important;
    }

    /* Όταν το checkbox είναι τσεκαρισμένο, αλλάζει το φόντο και το περιγράμμα */
    .form-check-card:has(.form-check-input:checked) {
        border-color: var(--bs-primary) !important;
        background-color: var(--bs-primary-bg-subtle) !important;
        box-shadow: 0 0 0 1px var(--bs-primary);
    }


/*//////////////////////////////////////////////////////////////////////*/

/* Διορθώνει την ευθυγράμμιση και αποτρέπει το κόψιμο της γραμμής στο toolbar του Quill */
.ql-toolbar.ql-snow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 6px 8px; /* Λίγο παραπάνω padding επάνω/κάτω για να αναπνέει */
}

    /* Ρύθμιση για το κουμπί εναλλαγής ώστε να μην εξέχει και να ταιριάζει ύψος */
    .ql-toolbar.ql-snow .btn-sm {
        padding: 2px 8px;
        font-size: 11px;
        line-height: 1.4;
    }