@media (min-width: 768px) 
{
    #sidebarOffcanvas.offcanvas { 
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        display: flex !important;       /* Επαναφέρει τη flex δομή του μενού */
        visibility: visible !important;  /* Ακυρώνει το κρύψιμο της Bootstrap */
        transform: none !important;      /* Αναγκάζει το μενού να μείνει στην οθόνη */
        width: 180px !important;        /* Σταθερό πλάτος desktop */
        height: 100dvh !important;
        z-index: 1040 !important;
        border-right: 1px solid var(--ig-sidebar-border) !important;
        background: var(--ig-sidebar-background) !important;
    }

    /* Ακυρώνουμε το γκρι φόντο (backdrop) που βάζει η Bootstrap στο desktop */
    .offcanvas-backdrop.show {
        display: none !important;
    }
}

#sidebarOffcanvas.offcanvas
{
    width:180px;
    background: var(--ig-sidebar-background) !important;
}

#sidebarOffcanvas ul li a {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    color: var(--ig-sidebar-text);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    border-left: 3px solid transparent; /* Κρατάει χώρο για να μην κάνει "σπάσιμο" στο active */
}

/* Hover κατάσταση για τα ανενεργά links */
#sidebarOffcanvas ul li a:hover {
    color: var(--ig-sidebar-hover-text);
    background-color: var(--ig-sidebar-hover-background);
}

#sidebarOffcanvas ul li .sidebar-feedback-link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 4px 10px;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: var(--ig-sidebar-text);
    font: inherit;
    font-weight: 500;
    text-align: left;
}

#sidebarOffcanvas ul li .sidebar-feedback-link:hover {
    color: var(--ig-sidebar-hover-text);
    background: var(--ig-sidebar-hover-background);
}

/* --- ACTIVE STATE (Η κατάσταση με το Πράσινο Glow) --- */
#sidebarOffcanvas ul li.active > a {
    color: var(--ig-sidebar-active-text) !important;
    background-color: var(--ig-sidebar-active-background) !important;
    font-weight: 600;
    border-left: 3px solid var(--ig-sidebar-active-border);
    text-shadow: var(--ig-sidebar-active-shadow);
}

/* Εφαρμογή της λάμψης και στο Bootstrap Icon */
#sidebarOffcanvas ul li.active > a i {
    color: var(--ig-sidebar-active-text) !important;
    filter: var(--ig-sidebar-active-icon-filter);
}

#sidebarOffcanvas ul li .sidebar-disabled-link {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    border-left: 3px solid transparent;
    color: var(--ig-sidebar-text);
    font-weight: 500;
    opacity: .48;
    cursor: not-allowed;
}

/* Οι λειτουργίες σχεδίασης υλικού λειτουργούν ως ενιαία ομάδα. Τα διακριτικά
   όρια και ο πρόσθετος χώρος τις ξεχωρίζουν χωρίς να βαραίνουν το drawer. */
#sidebarOffcanvas ul li.sidebar-menu-section-start {
    margin-top: .8rem;
    padding-top: .55rem;
    border-top: 1px solid var(--ig-sidebar-border);
}

#sidebarOffcanvas ul li.sidebar-menu-section-end {
    margin-bottom: .8rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--ig-sidebar-border);
}


html 
{
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
}

body 
{
    font-size: 14px; /* Ή font-size: 0.875rem; */
}

/* Τα σύντομα μηνύματα επιτυχίας αποδίδονται από το site.js ως toast. Με το
   κρύψιμο από το πρώτο paint αποφεύγεται η στιγμιαία εμφάνισή τους επάνω. */
.alert.alert-success:not([data-ig-persistent-success]) {
    display: none;
}

.ig-main
{
    height:100dvh;
    background-color:var(--ig-page-background)
}

.ig-sidebar
{
    
    width: max-content; 
    height: 100%;
}

/* Keep the teacher workspace visually continuous below scrollable tables. */
#content {
    min-height: 100%;
    background-color: var(--bs-body-bg);
}

.teacher-help-drawer-trigger {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1025;
    padding: .55rem .85rem;
    border: 1px solid var(--ig-button-border);
    border-radius: .5rem;
    background: var(--ig-button-background);
    color: var(--ig-button-text);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .2);
}

.teacher-help-drawer-trigger:hover,
.teacher-help-drawer-trigger:focus-visible {
    border-color: var(--ig-table-button-hover-border);
}

.teacher-help-drawer {
    height: auto;
    max-height: min(78dvh, 42rem);
}

.teacher-help-link {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: border-color .15s ease, transform .15s ease;
}

.teacher-help-link:hover,
.teacher-help-link:focus-visible {
    border-color: var(--ig-add-button-color) !important;
    color: var(--bs-body-color);
    transform: translateY(-2px);
}

.teacher-onboarding-progress {
    height: .3rem;
}

.teacher-onboarding-step {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .85rem 1rem;
}

.teacher-onboarding-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.7rem;
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    font-weight: 600;
}

.teacher-onboarding-step-complete .teacher-onboarding-step-number {
    border-color: var(--bs-success);
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.teacher-onboarding-step-state {
    color: var(--bs-secondary-color);
}

.teacher-onboarding-step-complete .teacher-onboarding-step-state {
    color: var(--bs-success-text-emphasis);
}

.teacher-onboarding-step-actions {
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .teacher-onboarding-step-actions {
        width: 100%;
        margin-left: 2.45rem;
    }
}

/* Κοινή συμπεριφορά όλων των δυναμικών modals: το περιεχόμενο μένει μέσα
   στο viewport, το σώμα κάνει scroll και οι ενέργειες παραμένουν ορατές. */
#modal-container .modal-dialog {
    max-height: calc(100dvh - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#modal-container .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 2rem);
    min-height: 0;
    overflow: hidden;
}

#modal-container .modal-content > form {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 2rem);
    min-height: 0;
}

#modal-container .modal-header,
#modal-container .modal-footer {
    flex: 0 0 auto;
}

#modal-container .modal-content > .modal-body,
#modal-container .modal-content > form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Text-editing modals keep their action buttons available while only the form body scrolls. */
#modal-container form[hx-post*="SaveScenarioTexts"],
#modal-container form[hx-post*="SaveActivityTexts"],
#modal-container form[hx-post*="SaveObjectiveText"] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}

#modal-container form[hx-post*="SaveScenarioTexts"] .modal-body,
#modal-container form[hx-post*="SaveActivityTexts"] .modal-body,
#modal-container form[hx-post*="SaveObjectiveText"] .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

#modal-container form[hx-post*="SaveScenarioTexts"] .modal-footer,
#modal-container form[hx-post*="SaveActivityTexts"] .modal-footer,
#modal-container form[hx-post*="SaveObjectiveText"] .modal-footer {
    flex: 0 0 auto;
}

/* Η προβολή τεκμηρίων μπορεί να περιέχει πολλά κριτήρια, αποτελέσματα και
   συγκρίσεις. Περιορίζουμε ρητά το modal στο viewport ώστε το σώμα του,
   και όχι η σελίδα από πίσω, να κάνει scroll. */
#modal-container .rubric-evidence-modal {
    height: calc(100dvh - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#modal-container .rubric-evidence-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

#modal-container .rubric-evidence-modal-content .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#modal-container .rubric-evidence-modal-content .modal-footer {
    flex: 0 0 auto;
}

/* The rubric settings form owns the modal body, so Bootstrap's default
   modal-dialog-scrollable layout cannot keep its footer fixed by itself. */
#modal-container .rubric-settings-modal {
    height: calc(100dvh - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#modal-container .rubric-settings-modal-content {
    height: 100%;
    min-height: 0;
}

#modal-container .rubric-settings-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

#modal-container .rubric-settings-form .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#modal-container .rubric-settings-form .modal-footer {
    flex: 0 0 auto;
}

.rubric-editor-modal {
    height: calc(100dvh - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.rubric-editor-modal-content {
    height: 100%;
    min-height: 0;
}

.rubric-editor-modal-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.rubric-editor-modal-form .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.rubric-editor-modal-form .modal-footer {
    flex: 0 0 auto;
}

#rubric-settings-saving.htmx-indicator {
    display: none;
    align-items: center;
}

#rubric-settings-saving.htmx-request {
    display: inline-flex;
}

.help-section { scroll-margin-top: 1rem; }

.manual-scenario-steps {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}

.manual-scenario-steps a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding: .45rem .75rem;
    border: 1px solid var(--ig-button-border);
    border-radius: .5rem;
    color: var(--ig-button-text);
    background: var(--ig-button-background);
    text-decoration: none;
}

.manual-scenario-steps a:hover,
.manual-scenario-steps a:focus-visible {
    border-color: var(--ig-table-button-hover-border);
    color: var(--ig-button-text);
}

.manual-scenario-steps a.active {
    border-color: var(--ig-add-button-color);
    background: var(--ig-table-header-background);
    color: var(--ig-table-header-text);
    font-weight: 600;
}

.manual-scenario-steps span,
.manual-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--ig-add-button-color);
    color: #fff;
    font-weight: 700;
}

.manual-step-number {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.05rem;
}

@media (min-width: 992px) {
    .help-page-nav { top: 1rem; }
}

@media (max-width: 575.98px) {
    .teacher-help-drawer-trigger { right: .75rem; bottom: .75rem; }
}

/* Reusable responsive-table pattern: on a phone, keep only essential columns. */
.responsive-data-table-wrapper {
    width: 100%;
    overflow: hidden;
}

/* Every data table scrolls inside its own area, instead of extending the page. */
.responsive-data-table-wrapper,
.table-responsive {
    max-height: min(65dvh, 42rem);
    overflow: auto;
    overscroll-behavior: contain;
}

.responsive-data-table-wrapper > .table > thead > tr > th,
.table-responsive > .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.responsive-data-table {
    width: 100%;
    table-layout: fixed;
}

.responsive-data-table th,
.responsive-data-table td {
    min-width: 0;
}

/* Στη σελίδα σχολείου κάθε μικρός πίνακας προβάλλει τρεις γραμμές.
   Τα επιπλέον στοιχεία κυλούν μέσα στον αντίστοιχο πίνακα. */
.school-info-three-row-card .responsive-data-table-wrapper {
    max-height: calc(
        var(--ig-table-header-height) +
        var(--ig-table-row-height) +
        var(--ig-table-row-height) +
        var(--ig-table-row-height) +
        2px
    );
}

html[data-ig-theme="light"] .school-info-three-row-card .card-header {
    background-color: var(--bs-body-bg) !important;
}

.responsive-data-table .cell-truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ο πίνακας σεναρίων έχει έως τρεις ενέργειες ανά γραμμή. Κρατάμε μόνο τα
   αναγνωρίσιμα εικονίδια, ώστε η στήλη να έχει σταθερό πλάτος. */
.responsive-data-table .scenario-actions-column {
    width: 9.5rem;
}

.scenario-table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
    max-width: 100%;
}

.scenario-table-actions form {
    display: inline-flex;
}

.scenario-table-actions .btn {
    justify-content: center;
    min-width: 2rem;
    padding-inline: .45rem;
}

/* Sortable headers deliberately inherit the theme-driven table-header colors. */
.table-sort-button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent !important;
    color: inherit !important;
    font: inherit;
    font-weight: inherit;
    text-align: inherit;
    line-height: inherit;
}

.table-sort-button:hover,
.table-sort-button:focus-visible {
    color: var(--ig-add-button-color) !important;
    text-decoration: none;
}

/* External identity providers share a predictable size on login and registration.
   Their neutral surface works in both themes; colour is reserved for the icon. */
.identity-provider-buttons {
    display: grid;
    gap: .65rem;
    width: min(100%, 24rem);
}

.identity-provider-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 2.8rem;
    width: 100%;
    color: var(--bs-body-color);
    background: transparent;
    border: 1px solid var(--bs-border-color);
    border-radius: .55rem;
    font-weight: 600;
}

.identity-provider-button:hover,
.identity-provider-button:focus-visible {
    color: var(--bs-body-color);
    background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
    border-color: var(--bs-primary);
}

.identity-provider-button .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    font-size: 1.15rem;
    line-height: 1;
}

.identity-provider-google .bi { color: #4285f4; }
.identity-provider-microsoft .bi { color: #00a4ef; }
.identity-provider-facebook .bi { color: #1877f2; }

.table-header-controls {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    max-width: 100%;
}

.table-header-filter-title,
.table-sort-icon {
    border: 0;
    background: transparent !important;
    color: inherit !important;
    font: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.table-header-filter-title {
    padding: 0;
    text-align: inherit;
}

.table-header-filter-title.table-header-filter-active {
    padding: .15rem .42rem;
    border-radius: .3rem;
    background: color-mix(in srgb, var(--ig-add-button-color) 18%, transparent) !important;
    color: var(--ig-add-button-color) !important;
}

.table-sort-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .15rem .25rem;
    border-radius: .25rem;
}

.table-header-filter-title:hover,
.table-header-filter-title:focus-visible,
.table-sort-icon:hover,
.table-sort-icon:focus-visible {
    color: var(--ig-add-button-color) !important;
    text-decoration: none;
}

.table-sort-icon:hover,
.table-sort-icon:focus-visible {
    background: color-mix(in srgb, var(--ig-add-button-color) 15%, transparent) !important;
}

.table-header-filter-menu {
    min-width: 15rem;
}

.table-sort-reset {
    padding: .15rem .35rem;
    border: 0;
    border-radius: .25rem;
    background: transparent !important;
    color: inherit !important;
    line-height: 1;
}

.table-sort-reset:hover:not(:disabled),
.table-sort-reset:focus-visible:not(:disabled) {
    background: color-mix(in srgb, var(--ig-add-button-color) 15%, transparent) !important;
    color: var(--ig-add-button-color) !important;
}

.table-sort-reset:disabled {
    opacity: .35;
    cursor: default;
}

.table-filter-toggle {
    padding: 0;
    border: 0;
    background: transparent !important;
    color: inherit !important;
    font: inherit;
    font-weight: inherit;
    white-space: nowrap;
}

.table-filter-toggle:hover,
.table-filter-toggle:focus-visible {
    color: var(--ig-add-button-color) !important;
}

/* Τα τμήματα έχουν πολλές ενέργειες. Σε περιορισμένο πλάτος τις συγκεντρώνουμε
   σε μενού, ώστε ο πίνακας να μη μεγαλώνει οριζόντια. */
.classes-actions-column {
    width: 5.5rem;
}

.classes-actions-inline {
    display: none;
    white-space: nowrap;
}

.classes-actions-dropdown {
    display: inline-block;
}

@media (min-width: 1400px) {
    .responsive-data-table .classes-actions-column {
        width: 19rem;
    }

    .classes-actions-inline {
        display: inline-flex;
    }

    .classes-actions-dropdown {
        display: none;
    }
}

.schedule-editor-table { min-width: 64rem; table-layout: fixed; }
.schedule-editor-table th, .schedule-editor-table td { min-width: 9rem; padding: .45rem; vertical-align: top; }
.schedule-editor-table .schedule-period-column { min-width: 5rem; width: 5rem; }
.schedule-editor-table > thead > tr > th,
.schedule-editor-table > tbody > tr > th { text-align: center; vertical-align: middle; }
.schedule-locked { background-color: rgba(108, 117, 125, .14); }
.schedule-editor-table .schedule-period-cell,
.overall-schedule-table .schedule-period-cell {
    background-color: var(--ig-table-header-background) !important;
    color: var(--ig-table-header-text) !important;
}
.schedule-view-table > tbody > tr > td {
    text-align: center;
    vertical-align: middle;
}
html[data-ig-theme="dark"] .schedule-editor-table .schedule-locked {
    background-color: color-mix(in srgb, var(--ig-table-header-background) 72%, var(--ig-table-background)) !important;
    color: var(--bs-secondary-color);
}
.overall-schedule-table { min-width: 64rem; table-layout: fixed; }
.overall-schedule-table th, .overall-schedule-table td { min-width: 9rem; padding: .4rem; vertical-align: top; }
.overall-schedule-table .schedule-period-column { min-width: 5rem; width: 5rem; }
.overall-schedule-table > thead > tr > th,
.overall-schedule-table > tbody > tr > th { text-align: center; vertical-align: middle; }
.overall-schedule-entry { border-left: 3px solid currentColor; padding-left: .35rem; margin-bottom: .4rem; line-height: 1.2; }

.annual-slots-scroll-page { height: 100dvh; overflow: hidden; }
.annual-slots-scroll-page .annual-slots-card { flex: 1 1 auto; min-height: 0; }
.annual-slots-tab-content, .annual-slots-tab-pane { min-height: 0; }
.annual-slots-tab-pane.active { display: flex; flex: 1 1 auto; flex-direction: column; }
.annual-slots-calendar { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.annual-calendar-workspace { min-height: 100%; }
.annual-calendar-toolbar { position: sticky; top: -.75rem; z-index: 3; padding: .5rem 0; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
.annual-month-select { min-width: 10rem; max-width: 15rem; }
.annual-slot-actions summary { width: fit-content; cursor: pointer; color: var(--bs-primary); font-size: .85rem; font-weight: 600; }
.annual-slot-actions summary:hover { color: var(--bs-link-hover-color); }
.annual-slot-actions[open] { padding-bottom: .2rem; }
.annual-calendar-month[hidden], .annual-calendar-unscheduled[hidden], .annual-slot-day[hidden], .annual-slot-entry[hidden], #annual-pending-empty[hidden] { display: none !important; }
.annual-slot-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.annual-slot-day { border: 1px solid var(--bs-border-color); border-radius: .4rem; padding: .65rem; background: var(--bs-body-bg); }
.annual-slot-day-title { font-size: .85rem; font-weight: 600; text-transform: capitalize; margin-bottom: .45rem; }
.annual-slot-entry { border-left: 3px solid var(--bs-primary); background: rgba(13, 110, 253, .06); padding: .25rem .35rem; margin-bottom: .3rem; border-radius: .2rem; }
.annual-slot-day-today { border-color: color-mix(in srgb, var(--ig-add-button-color) 72%, var(--bs-border-color)); background: color-mix(in srgb, var(--ig-add-button-color) 7%, var(--bs-body-bg)); box-shadow: inset .24rem 0 0 var(--ig-add-button-color); }
.annual-slot-entry-today { box-shadow: inset .18rem 0 0 var(--ig-add-button-color), 0 .15rem .6rem color-mix(in srgb, var(--ig-add-button-color) 13%, transparent); }
.annual-slot-entry-focused { outline: 2px solid var(--ig-add-button-color); outline-offset: 2px; animation: annual-slot-focus 1.8s ease-out 1; }
@keyframes annual-slot-focus { 0% { transform: scale(.98); } 35% { transform: scale(1.015); } 100% { transform: scale(1); } }
.annual-slot-entry.annual-slot-entry-scheduled { border-left-color: #5aa77c; background: rgba(90, 167, 124, .05); }
.annual-slot-entry.annual-slot-entry-cancelled { border-left-color: #c96a6a; background: rgba(201, 106, 106, .05); }
.annual-slot-entry.annual-slot-entry-needs-rescheduling { border-left-color: #d89b2b; background: rgba(216, 155, 43, .08); }
.annual-slot-status { display: inline-block; color: #fff !important; font-size: .72rem; font-weight: 600; padding: .25rem .4rem; border-radius: .25rem; }
.annual-slot-status.status-planned { background-color: #3b9b69; }
.annual-slot-status.status-completed { background-color: #198754; }
.annual-slot-status.status-cancelled { background-color: #dc3545; }
.annual-slot-status.status-needs-rescheduling { background-color: #9a650d; }
.annual-slot-status.status-unscheduled { background-color: #6c757d; }

@media print {
    @@page { size: landscape; margin: 10mm; }
    .ig-sidebar, .print-hidden, .toast-container { display: none !important; }
    .ig-main, #content, main { background: #fff !important; color: #000 !important; }
    .overall-schedule-table { min-width: 0; font-size: 8pt; --bs-table-bg: #fff; --bs-table-color: #000; --bs-table-border-color: #c8cdd1; }
    .overall-schedule-table th, .overall-schedule-table td { min-width: 0; padding: .2rem; }
    .overall-schedule-table > thead > tr > th,
    .overall-schedule-table .schedule-period-cell { background: #eef0f2 !important; color: #000 !important; }
    .overall-schedule-table .responsive-data-table-wrapper,
    .responsive-data-table-wrapper:has(.overall-schedule-table) { max-height: none !important; overflow: visible !important; }
    .card { box-shadow: none !important; }
}

/* Compact typography for the school-management workspace. */
.school-management-page h1 {
    font-size: 1.55rem;
}

.school-management-page .form-select,
.school-management-page .btn,
.school-management-page .responsive-data-table {
    font-size: .875rem;
}

@media (max-width: 767.98px) {
    .responsive-data-table {
        font-size: .9rem;
    }

    .responsive-data-table th,
    .responsive-data-table td {
        padding: .7rem .5rem;
    }

    .responsive-data-table .school-actions-column {
        width: 6.25rem;
    }

    .responsive-data-table .schools-actions-column {
        width: 8.5rem;
    }
}

@media (min-width: 768px) {
    .ig-sidebar {
        width: 180px;
    }
}

/* 123ink / Avery J8159-L7159: A4, 24 labels, 63.5 x 33.9 mm. */
.credential-label-sheet {
    display: grid;
    grid-template-columns: repeat(3, 63.5mm);
    grid-template-rows: repeat(8, 33.9mm);
    grid-auto-rows: 33.9mm;
    gap: 0;
    width: 190.5mm;
    margin: 0 auto;
    background: #fff;
}

.credential-label {
    overflow: hidden;
    padding: 2.7mm 3.2mm;
    font-family: Arial, sans-serif;
    font-size: 8.5pt;
    line-height: 1.25;
    color: #000;
}

.credential-label strong:first-child { font-size: 9.5pt; }
.credential-label .credential-school { font-size: 7.5pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.credential-label .credential-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.timetable-solution-grid { min-width: 58rem; table-layout: fixed; }
.timetable-solution-grid th { min-width: 6rem; }
.timetable-solution-grid td { min-width: 10rem; vertical-align: top; }

.timetable-staff-grid { width: 100%; min-width: 0; table-layout: fixed; font-size: .72rem; }
.timetable-staff-grid thead th { background: var(--bs-tertiary-bg); white-space: nowrap; z-index: 4; }
.timetable-staff-grid thead tr:first-child th { top: 0; height: 2.25rem; }
.timetable-staff-grid thead tr:nth-child(2) th { top: 2.25rem; }
.timetable-staff-grid .timetable-staff-instructor { width: 9rem; min-width: 0; position: sticky; left: 0; background: var(--bs-body-bg); white-space: normal; overflow-wrap: anywhere; }
.timetable-staff-grid tbody .timetable-staff-instructor { z-index: 1; }
.timetable-staff-grid thead .timetable-staff-instructor { z-index: 6; top: 0; background: var(--bs-tertiary-bg); }
.timetable-staff-grid .timetable-staff-hour,
.timetable-staff-grid td { min-width: 0; padding: .2rem .05rem; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.timetable-staff-grid tbody td,
.timetable-staff-grid tbody .timetable-staff-instructor { padding-top: .1rem; padding-bottom: .1rem; }
.timetable-staff-grid .timetable-staff-day-start { border-left-width: 2px; }
.timetable-staff-grid.table tbody td.timetable-staff-gap {
    --bs-table-bg: #fff0d2;
    --bs-table-hover-bg: #ffe5b5;
    color: #774509;
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg);
}
html[data-ig-theme="dark"] .timetable-staff-grid.table tbody td.timetable-staff-gap {
    --bs-table-bg: #49351d;
    --bs-table-hover-bg: #584124;
    color: #ffd18a;
}
.timetable-staff-grid.table tbody td.timetable-staff-required-break {
    --bs-table-bg: #dcecff;
    color: #245483;
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg);
}
html[data-ig-theme="dark"] .timetable-staff-grid.table tbody td.timetable-staff-required-break {
    --bs-table-bg: #243c59;
    color: #a9d3ff;
}
.timetable-staff-grid.table tbody td.timetable-staff-single-hour {
    --bs-table-bg: #ffe5e3;
    color: #aa2727;
    font-weight: 700;
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg);
}
html[data-ig-theme="dark"] .timetable-staff-grid.table tbody td.timetable-staff-single-hour {
    --bs-table-bg: #542a2b;
    color: #ffaaaa;
}
.timetable-staff-gap-label {
    font-weight: 700;
    font-size: .65rem;
}
@media (max-width: 991.98px) {
    .timetable-staff-grid { width: max-content; min-width: 100%; }
    .timetable-staff-grid .timetable-staff-hour,
    .timetable-staff-grid td { min-width: 2.3rem; }
}

.timetable-print-only { display: none; }

@media print {
    body.timetable-printing { background: #fff !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body.timetable-printing .ig-sidebar,
    body.timetable-printing .school-management-page > :not(.timetable-print-target),
    body.timetable-printing .timetable-print-controls,
    body.timetable-printing .toast-container { display: none !important; }
    body.timetable-printing .ig-main,
    body.timetable-printing #content,
    body.timetable-printing main,
    body.timetable-printing .school-management-page,
    body.timetable-printing .timetable-print-target,
    body.timetable-printing .timetable-print-target .card-body { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; }
    body.timetable-printing .timetable-print-only { display: block !important; margin-bottom: .5rem !important; }
    body.timetable-printing .timetable-print-target .responsive-data-table-wrapper { max-height: none !important; overflow: visible !important; }
    body.timetable-printing .timetable-print-target .table { width: 100% !important; min-width: 0 !important; --bs-table-bg: #fff; --bs-table-color: #000; --bs-table-border-color: #777; }
    body.timetable-printing .timetable-print-target .table thead th,
    body.timetable-printing .timetable-print-target .timetable-staff-instructor { position: static !important; color: #000 !important; background: #eee !important; }
    body.timetable-printing .timetable-print-target .table thead { display: table-header-group; }
    body.timetable-printing .timetable-print-target .table tr { break-inside: avoid; }
    body.timetable-printing .timetable-print-target .timetable-solution-grid { table-layout: fixed; font-size: 9pt; }
    body.timetable-printing .timetable-print-target .timetable-solution-grid td,
    body.timetable-printing .timetable-print-target .timetable-solution-grid th { min-width: 0; padding: .2rem; }
    body.timetable-printing #timetable-print-staff .timetable-staff-grid { table-layout: fixed; font-size: 5.8pt; line-height: 1.05; }
    body.timetable-printing #timetable-print-staff .timetable-staff-instructor { width: 25mm; }
    body.timetable-printing #timetable-print-staff .timetable-staff-grid tbody th { padding: .02rem .05rem; line-height: 1.05; }
    body.timetable-printing #timetable-print-staff .timetable-staff-hour,
    body.timetable-printing #timetable-print-staff td { min-width: 0; padding: .02rem; line-height: 1.05; }
    body.timetable-printing #timetable-print-staff .table td.timetable-staff-gap { --bs-table-bg: #ffe8c0; color: #683c00 !important; }
    body.timetable-printing #timetable-print-staff .table td.timetable-staff-required-break { --bs-table-bg: #d7e9ff; color: #174f88 !important; }
    body.timetable-printing #timetable-print-staff .table td.timetable-staff-single-hour { --bs-table-bg: #ffd9d6; color: #a11b1b !important; }
}

.brainstorming-ideas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

.assessment-radar-wrap {
    position: relative;
    height: min(62vw, 24rem);
    min-height: 17rem;
}

/* Compact domain summaries; the radar deliberately keeps its independent size. */
.student-assessment-summary-card .card-body {
    padding: .8rem;
}

.student-assessment-summary-card .bi {
    font-size: 1.1rem;
}

.student-assessment-summary-card strong {
    font-size: 1.3rem;
}

/* Η προβολή τάξης αντιμετωπίζει κάθε μαθητικό εργαλείο ως πλήρη σκηνή. */
.classroom-display {
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: #000;
}

.classroom-display .classroom-display-activity,
.classroom-display .classroom-fullscreen-tool {
    width: 100vw;
    min-height: 100dvh;
    margin: 0 !important;
}

.classroom-tool-start-stage {
    display: grid;
    place-items: center;
    background: #000;
}

.classroom-tool-start-stage .btn {
    min-width: min(18rem, 72vw);
    min-height: 5rem;
    font-size: clamp(1.25rem, 3vw, 2rem);
}

.classroom-quiz-timer-stage {
    display: grid;
    min-height: 100dvh;
    place-items: center;
    color: var(--bs-light);
    background: #000;
}

.classroom-quiz-countdown {
    font-size: clamp(4rem, 18vw, 14rem);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
}

.classroom-display-tool-active {
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden;
    background: #000;
}

.classroom-display-tool-active > header,
.classroom-display-tool-active .classroom-activity-overview {
    display: none;
}

.classroom-display-tool-active .classroom-display-activity {
    min-height: 100dvh;
}

.classroom-video-stage {
    display: grid;
    width: 100vw;
    height: 100dvh;
    place-items: center;
    background: #000;
}

.classroom-video-stage .ratio {
    width: min(100vw, 177.777dvh);
    max-height: 100dvh;
}

.classroom-video-stage video {
    display: block;
    width: 100vw;
    height: 100dvh;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.classroom-display-tool-active .classroom-brainstorming {
    min-height: 100dvh;
    margin: 0;
    border-radius: 0;
    overflow-y: auto;
}

.classroom-display-tool-active .classroom-brainstorming .card-body {
    min-height: 100dvh;
}

.classroom-display .classroom-brainstorming {
    min-height: 100dvh;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0;
    overflow-y: auto;
}

.classroom-display .classroom-brainstorming .card-body {
    min-height: 100dvh;
    padding: 0 !important;
}

.classroom-competition-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1.25rem, 3vh, 2.5rem);
    padding: 3rem max(2rem, 5vw) 5rem;
}

.classroom-competition-stage [data-quiz-countdown] .bi-stopwatch {
    display: none;
}

.classroom-competition-stage .classroom-quiz-countdown {
    font-size: clamp(2.5rem, 7vw, 5.5rem);
}

.classroom-competition-content {
    width: min(100%, 1100px);
    max-height: min(58vh, 650px);
    margin-inline: auto;
    overflow-y: auto;
}

.classroom-competition-board {
    padding: clamp(1rem, 2vw, 2rem);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 1rem;
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.classroom-competition-heading {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
}

.classroom-competition-count {
    margin-left: auto;
    font-size: clamp(.95rem, 1.5vw, 1.25rem);
    font-weight: 400;
    opacity: .75;
}

.classroom-competition-empty {
    margin: 2rem 0;
    text-align: center;
    color: rgba(255, 255, 255, .75);
    font-size: clamp(1.25rem, 2.5vw, 2rem);
}

.classroom-competition-list {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.classroom-competition-entry {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) 6rem 7rem;
    align-items: center;
    gap: 1rem;
    padding: .65rem 1rem;
    border-radius: .65rem;
    background: rgba(255, 255, 255, .08);
    font-size: clamp(1.1rem, 2vw, 1.8rem);
}

.classroom-competition-entry:first-child {
    background: rgba(255, 193, 7, .18);
}

.classroom-competition-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classroom-competition-time,
.classroom-competition-score {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .classroom-competition-entry { grid-template-columns: 2rem minmax(0, 1fr) 3.5rem 4.5rem; gap: .35rem; padding-inline: .5rem; }
}

.classroom-image-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(82vh, 920px);
    padding: 1rem;
    background: #050505;
    border-radius: 1rem;
}

.classroom-presentation-image,
.scenario-player-presentation-image {
    display: block;
    max-width: 100%;
    max-height: min(78vh, 880px);
    margin-inline: auto;
    object-fit: contain;
    background: #050505;
}

.classroom-display .classroom-image-stage {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    border-radius: 0;
}

.classroom-display .classroom-presentation-image {
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    object-fit: contain;
}

.classroom-display .classroom-text-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    overflow-y: auto;
    padding: clamp(3rem, 6vw, 7rem);
    color: #f8f9fa;
    background: #10151b;
}

.classroom-text-content {
    width: min(100%, 76rem);
    max-height: 100%;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: clamp(1.5rem, 2.6vw, 3rem);
    line-height: 1.45;
}

.classroom-web-page-stage {
    position: relative;
    overflow: hidden;
    min-height: min(82vh, 920px);
    background: #fff;
}

.classroom-external-web-page {
    display: block;
    width: 100%;
    min-height: min(82vh, 920px);
    border: 0;
    background: #fff;
}

.classroom-display .classroom-web-page-stage,
.classroom-display .classroom-external-web-page {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
}

/* Η ανάλυση μπορεί να περιέχει πολλές ερωτήσεις. Το scroll μένει στη σκηνή
   του εργαλείου, ενώ η οθόνη παρουσίασης και τα χειριστήριά της μένουν σταθερά. */
.classroom-display .classroom-quiz-analyzer-stage {
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 1rem;
}

.classroom-display .classroom-quiz-analyzer-stage > section {
    min-height: calc(100dvh - 2rem);
    margin: 0;
}

/* Στην ανάλυση κουίζ η ανοιχτή ερώτηση είναι το κέντρο της προσοχής.
   Οι υπόλοιπες μένουν διαθέσιμες, αλλά με διακριτικά χαμηλότερη ένταση. */
[data-quiz-analyzer-questions] .quiz-analyzer-question {
    transition: opacity .18s ease, border-color .18s ease, background-color .18s ease;
}

[data-quiz-analyzer-questions] .quiz-analyzer-question:not([open]) {
    opacity: .42;
    filter: saturate(.65);
    background-color: transparent !important;
    border-color: color-mix(in srgb, var(--bs-border-color) 55%, transparent) !important;
}

[data-quiz-analyzer-questions] .quiz-analyzer-question:not([open]):hover {
    opacity: .82;
}

[data-quiz-analyzer-questions] .quiz-analyzer-question[open] {
    opacity: 1;
    border-color: color-mix(in srgb, var(--ig-add-button-color) 55%, var(--bs-border-color)) !important;
}

[data-quiz-analyzer-questions] .quiz-analyzer-question > summary {
    font-size: clamp(1.08rem, 1.6vw, 1.35rem);
    line-height: 1.4;
}

[data-quiz-analyzer-questions] .quiz-analyzer-option,
[data-quiz-analyzer-questions] .quiz-analyzer-explanation {
    font-size: clamp(1rem, 1.45vw, 1.25rem);
    line-height: 1.45;
}

/* Στην προβολή δεν επαναλαμβάνουμε τίτλο, οδηγία ή μήνυμα αναμονής:
   εμφανίζεται μόνο ο ίδιος ο πίνακας του εργαλείου. */
.classroom-display .classroom-brainstorming .card-body > .d-flex,
.classroom-display .classroom-brainstorming-empty {
    display: none !important;
}

.classroom-display .classroom-brainstorming .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

.classroom-display .classroom-brainstorming .row > [class*="col"] > section {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.classroom-display-tool-navigation {
    position: fixed;
    z-index: 1050;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    border-radius: .75rem;
    color: #fff;
    background: rgba(20, 20, 20, .88);
    backdrop-filter: blur(.5rem);
}

.classroom-display-tool-navigation .btn {
    border-color: transparent;
}

/* Η προβολή τάξης δείχνει μόνο το περιεχόμενο· ο τίτλος του εργαλείου
   δεν επαναλαμβάνεται επάνω στον πίνακα χειρισμού. */
.classroom-display-tool-navigation #display-tool-progress {
    display: none;
}

.classroom-display-activity-navigation {
    position: fixed;
    z-index: 1050;
    left: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    border-radius: .75rem;
    color: #fff;
    background: rgba(20, 20, 20, .88);
    backdrop-filter: blur(.5rem);
}

.classroom-display-activity-navigation .btn {
    border-color: transparent;
}

.classroom-display-activity-navigation .classroom-display-close-button {
    color: #fff !important;
    background: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
}

/* Οι παγκόσμιες ρυθμίσεις χρωμάτων κουμπιών δεν πρέπει να καλύπτουν
   την οπτική ένδειξη του επιλεγμένου radio σε ρουμπρίκες. */
#student-rubric .btn-check:checked + .btn {
    color: #fff !important;
    background: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-success) 28%, transparent);
}

#student-rubric .btn-check:focus-visible + .btn {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.brainstorming-category-dropzone {
    min-height: 8rem;
    transition: border-color .15s ease, background-color .15s ease;
}

.brainstorming-category-dropzone.border-primary {
    background-color: var(--bs-primary-bg-subtle);
    outline: 2px dashed var(--bs-primary);
    outline-offset: -4px;
}

/* Στην Προβολή τάξης οι άδειες κατηγορίες πρέπει να παραμένουν ορατές
   και να δέχονται ιδέες με αφή ή ποντίκι. */
.classroom-brainstorming-dropzone {
    min-height: 10rem;
    padding: .5rem;
    border-radius: .5rem;
    transition: border-color .15s ease, background-color .15s ease;
}

.classroom-brainstorming-dropzone:empty::after {
    content: "Σύρε μια ιδέα εδώ";
    display: grid;
    min-height: 8rem;
    place-items: center;
    color: var(--bs-secondary-color);
    font-size: 1rem;
    font-style: italic;
}

.classroom-brainstorming-dropzone.border-primary {
    background-color: var(--bs-primary-bg-subtle);
    outline: 2px dashed var(--bs-primary);
    outline-offset: -4px;
}

.brainstorming-idea {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: 1rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    animation: brainstorming-appear .25s ease-out;
}

@keyframes brainstorming-appear { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* Η προεπισκόπηση Excel παραμένει εντός του modal ακόμη και όταν ένα κελί
   περιέχει πολύ μεγάλο ή ενιαίο κείμενο. */
.excel-import-action-bar {
    position: sticky;
    z-index: 2;
    bottom: 0;
    padding: .5rem 0;
    margin-bottom: .75rem;
    background: var(--bs-body-bg);
}

.excel-import-preview-scroll {
    max-width: 100%;
    max-height: 16rem;
}

.excel-import-preview-table {
    table-layout: fixed;
    min-width: 42rem;
}

.excel-import-preview-table th,
.excel-import-preview-table td {
    min-width: 9rem;
    max-width: 16rem;
    overflow: hidden;
}

@media print {
    @page { size: A4 portrait; margin: 12.8mm 7.25mm; }
    body { background: #fff !important; }
    body.credentials-printing * { visibility: hidden !important; }
    body.credentials-printing #credentials-labels,
    body.credentials-printing #credentials-labels * { visibility: visible !important; }
    /* Το κανονικό περιεχόμενο της σελίδας βρίσκεται πριν από το modal. Πρέπει
       να αφαιρεθεί από τη ροή εκτύπωσης, όχι μόνο να γίνει αόρατο. */
    body.credentials-printing #student-accounts-page,
    body.credentials-printing #student-account-antiforgery,
    body.credentials-printing .toast-container { display: none !important; }
    /* Οι ετικέτες μπορεί να βρίσκονται μέσα σε scrollable Bootstrap modal.
       Στην εκτύπωση ακυρώνουμε το περιορισμένο ύψος/overflow του modal. */
    body.credentials-printing #modal-container,
    body.credentials-printing #modal-container .modal,
    body.credentials-printing #modal-container .modal-dialog,
    body.credentials-printing #modal-container .modal-content,
    body.credentials-printing #modal-container .modal-body {
        display: block !important;
        position: static !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        transform: none !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Δεν χρησιμοποιούμε absolute positioning: ο browser δεν μπορεί αξιόπιστα
       να σπάσει ένα απόλυτα τοποθετημένο στοιχείο σε δεύτερη σελίδα. */
    body.credentials-printing #modal-container .modal-header,
    body.credentials-printing #modal-container .modal-footer {
        display: none !important;
    }
    body.credentials-printing #credentials-labels {
        position: static !important;
        width: 190.5mm;
        margin: 0 auto !important;
    }
    body.credentials-printing #credentials-labels .no-print { display: none !important; }
    .credential-label-sheet {
        height: 271.2mm;
        margin: 0;
        break-inside: avoid-page;
        page-break-inside: avoid;
        break-after: page;
        page-break-after: always;
    }
    .credential-label { break-inside: avoid; page-break-inside: avoid; }
}






/* Αλλάζοντας μόνο αυτήν την τιμή αλλάζει το χρώμα όλων των κουμπιών προσθήκης. */
:root {
    /* Κοινό σχεδόν μαύρο φόντο για όλες τις σελίδες και τα Bootstrap body στοιχεία. */
    --ig-page-background: #080909;
    --bs-body-bg: var(--ig-page-background);
    --bs-body-bg-rgb: 8, 9, 9;
    --bs-body-color: #e4e7e4;
    --bs-body-color-rgb: 228, 231, 228;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(228, 231, 228, .72);
    --bs-secondary-bg: #141615;
    --bs-tertiary-bg: #101111;
    --bs-border-color: #343735;
    --ig-accent: #36c85a;
    --ig-surface: #0d120f;
    --ig-surface-elevated: #121914;
    --ig-header-background: #0b100d;
    --ig-header-border: #252e27;
    --ig-sidebar-background: #090e0a;
    --ig-sidebar-border: #202a22;
    --ig-sidebar-text: #aab5aa;
    --ig-sidebar-hover-text: #f0f5f0;
    --ig-sidebar-hover-background: rgba(255, 255, 255, .055);
    --ig-sidebar-active-text: #62d783;
    --ig-sidebar-active-background: #142419;
    --ig-sidebar-active-border: #39c969;
    --ig-sidebar-active-shadow: none;
    --ig-sidebar-active-icon-filter: none;
    --ig-subtle-badge-background: #1a261d;
    --ig-subtle-badge-text: #c9dacd;
    --ig-subtle-badge-border: #35483a;
    --ig-map-canvas: #101712;
    --ig-map-node: #18231b;
    --ig-map-node-text: #e4e7e4;
    --ig-map-link: #829488;
    --ig-tab-text: #aab5aa;
    --ig-tab-hover-text: #edf5ef;
    --ig-tab-active-text: #dff8e5;
    --ig-tab-active-background: #17341f;
    --ig-tab-active-border: #47c96c;
    --ig-add-button-color: rgb(0 149 0 / 100%);
    --ig-table-background: rgb(0 7 0 / 100%);
    --ig-table-text: rgb(200 196 198 / 100%);
    --ig-table-header-background: rgb(17 32 21 / 100%);
    --ig-table-header-text: rgb(217 214 213 / 100%);
    --ig-table-header-border: rgb(92 104 99 / 51%);
    --ig-table-border: rgb(28 38 21 / 0%);
    --ig-table-hover-background: rgb(32 45 32 / 52%);
    --ig-table-row-height: 66px;
    --ig-table-header-height: 48px;
    /* Αλλάζοντας μόνο αυτήν την τιμή αλλάζει το χρώμα όλων των κουμπιών επιστροφής. */
    --ig-back-button-color: rgb(159 76 124 / 100%);
    --ig-select-background: rgb(10 12 10 / 100%);
    --ig-select-border: rgb(40 78 42 / 17%);
    --ig-select-text: rgb(181 181 180 / 100%);
    --ig-button-background: rgb(33 37 34 / 100%);
    --ig-button-border: rgb(40 78 40 / 14%);
    --ig-button-text: rgb(231 230 230 / 100%);
    --ig-table-button-background: rgb(25 33 24 / 100%);
    --ig-table-button-border: rgb(19 37 27 / 100%);
    --ig-table-button-hover-border: rgb(60 101 62 / 100%);
    --ig-table-button-text: rgb(191 198 198 / 100%);
    --ig-input-background: rgb(10 12 10 / 100%);
    --ig-input-text: rgb(217 215 214 / 100%);
    --ig-input-border: rgb(54 64 51 / 40%);
    --ig-input-focus-border: rgb(27 112 28 / 100%);
}

/* Φωτεινή εκδοχή του ίδιου θέματος. Τα προσαρμοσμένα χρώματα της σελίδας
   «Εμφάνιση» συνεχίζουν να έχουν προτεραιότητα, γιατί εφαρμόζονται δυναμικά. */
html[data-ig-theme="light"] {
    --ig-page-background: #f4f6f8;
    --bs-body-bg: #f4f6f8;
    --bs-body-bg-rgb: 244, 246, 248;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-emphasis-color: #16191d;
    --bs-emphasis-color-rgb: 22, 25, 29;
    --bs-secondary-color: rgba(33, 37, 41, .68);
    --bs-secondary-bg: #e9ecef;
    --bs-tertiary-bg: #f8f9fa;
    --bs-border-color: #d7dce1;
    --ig-accent: #198754;
    --ig-surface: #ffffff;
    --ig-surface-elevated: #f8f9fa;
    --ig-header-background: #ffffff;
    --ig-header-border: #d7dce1;
    --ig-sidebar-background: #f8f9fa;
    --ig-sidebar-border: #d7dce1;
    --ig-sidebar-text: #495057;
    --ig-sidebar-hover-text: #1f2933;
    --ig-sidebar-hover-background: rgba(25, 135, 84, .08);
    --ig-sidebar-active-text: #146c43;
    --ig-sidebar-active-background: #dff3e5;
    --ig-sidebar-active-border: #198754;
    --ig-sidebar-active-shadow: none;
    --ig-sidebar-active-icon-filter: none;
    --ig-subtle-badge-background: #eef3ef;
    --ig-subtle-badge-text: #294635;
    --ig-subtle-badge-border: #cbd9cf;
    --ig-map-canvas: #eef2ef;
    --ig-map-node: #ffffff;
    --ig-map-node-text: #212529;
    --ig-map-link: #66736a;
    --ig-tab-text: #495057;
    --ig-tab-hover-text: #1f2933;
    --ig-tab-active-text: #14532d;
    --ig-tab-active-background: #e0f2e6;
    --ig-tab-active-border: #198754;
    --ig-add-button-color: #198754;
    --ig-back-button-color: rgb(159 76 124 / 100%);
    --ig-button-background: #0d6efd;
    --ig-button-border: #0d6efd;
    --ig-button-text: #ffffff;
    --ig-table-button-background: #6c757d;
    --ig-table-button-border: #6c757d;
    --ig-table-button-hover-border: #565e64;
    --ig-table-button-text: #ffffff;
    --ig-input-background: #ffffff;
    --ig-input-text: #212529;
    --ig-input-border: #ced4da;
    --ig-input-focus-border: #86b7fe;
    --ig-select-background: #ffffff;
    --ig-select-border: #ced4da;
    --ig-select-text: #212529;
    --ig-table-background: #ffffff;
    --ig-table-text: #212529;
    --ig-table-header-background: #e9ecef;
    --ig-table-header-text: #212529;
    --ig-table-header-border: #dee2e6;
    --ig-table-border: #dee2e6;
    --ig-table-hover-background: #ebebeb;
    --ig-delete-button-background: #dc3545;
    --ig-delete-button-border: #bb2d3b;
    --ig-delete-button-hover-background: #bb2d3b;
    --ig-delete-button-hover-border: #a52834;
    --ig-delete-button-text: #bb2d3b;
}

html[data-ig-theme="light"] .sidebar-footer {
    border-top: 1px solid var(--ig-sidebar-border);
}

.sidebar-subscription-summary {
    margin: .15rem .65rem .35rem;
    padding: .6rem .7rem;
    border: 1px solid var(--ig-sidebar-border);
    border-radius: .6rem;
    background: var(--ig-sidebar-hover-background);
    color: var(--ig-sidebar-text);
    font-size: .74rem;
    line-height: 1.3;
}

.sidebar-subscription-summary:focus-within {
    border-color: var(--ig-sidebar-active-border);
}

.sidebar-subscription-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;
    list-style: none;
    cursor: pointer;
}

.sidebar-subscription-toggle::-webkit-details-marker {
    display: none;
}

.sidebar-subscription-toggle:focus-visible {
    outline: 2px solid var(--ig-sidebar-active-border);
    outline-offset: 3px;
}

.sidebar-subscription-heading,
.sidebar-subscription-details {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.sidebar-subscription-details {
    padding-top: .45rem;
}

.sidebar-subscription-chevron {
    transition: transform .2s ease;
}

.sidebar-subscription-summary[open] .sidebar-subscription-chevron {
    transform: rotate(180deg);
}

.sidebar-subscription-caption {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    opacity: .8;
}

.sidebar-subscription-plan {
    color: var(--ig-sidebar-active-text);
    font-size: .84rem;
}

.sidebar-subscription-trial {
    font-size: .7rem;
}

.sidebar-subscription-divider {
    margin: .3rem 0 .15rem;
    border-top: 1px solid var(--ig-sidebar-border);
}

.sidebar-subscription-balance {
    display: flex;
    justify-content: space-between;
    gap: .3rem;
}

.sidebar-subscription-balance strong {
    color: var(--ig-sidebar-hover-text);
}

.sidebar-subscription-manage {
    margin-top: .4rem;
    color: var(--ig-sidebar-active-text);
    font-weight: 600;
    text-decoration: none;
}

.sidebar-subscription-manage:hover,
.sidebar-subscription-manage:focus-visible {
    color: var(--ig-sidebar-hover-text);
    text-decoration: underline;
}

/* Οι συνοπτικές κάρτες κρατούν χρωματική ταυτότητα χωρίς να βαραίνουν το φωτεινό θέμα. */
html[data-ig-theme="light"] .dashboard-summary-card.bg-primary {
    background-color: #e7f1ff !important;
    color: #0a3d79 !important;
}

html[data-ig-theme="light"] .dashboard-summary-card.bg-success {
    background-color: #e6f4ea !important;
    color: #146c43 !important;
}

html[data-ig-theme="light"] .dashboard-summary-card.bg-info {
    background-color: #e6f7fb !important;
    color: #0b5264 !important;
}

html[data-ig-theme="light"] .dashboard-summary-card .text-white,
html[data-ig-theme="light"] .dashboard-summary-card .text-white-50 {
    color: currentColor !important;
    opacity: .72;
}

.ig-logout-action {
    color: var(--bs-danger) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.ig-logout-action:hover,
.ig-logout-action:focus,
.ig-logout-action:active {
    color: var(--bs-danger) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

#sidebarOffcanvas [data-ig-theme-toggle] {
    color: var(--ig-sidebar-text) !important;
    background: transparent !important;
    border-color: transparent !important;
}

#sidebarOffcanvas [data-ig-theme-toggle]:hover {
    color: var(--ig-sidebar-hover-text) !important;
    background: var(--ig-sidebar-hover-background) !important;
}

#appearance-page [data-ig-theme-option].ig-theme-selected {
    box-shadow: 0 0 0 .25rem rgba(25, 135, 84, .32) !important;
}

html,
body {
    min-height: 100%;
    background-color: var(--ig-page-background) !important;
}

/* The AI question form uses a fieldset.  Its legend must follow the active
   theme as some Bootstrap variants otherwise leave it white in light mode. */
.quiz-question-specification > legend {
    color: var(--bs-body-color) !important;
    background: var(--bs-body-bg);
    font-weight: 600;
}

/* Κοινές επιφάνειες: διακριτό βάθος χωρίς έντονες σκιές ή άσχετα λευκά πλαίσια. */
.card,
.modal-content,
.dropdown-menu,
.accordion-item {
    background-color: var(--ig-surface);
    border-color: var(--bs-border-color);
}

.card-header,
.accordion-button,
.accordion-button:not(.collapsed) {
    color: var(--bs-body-color);
    background-color: var(--ig-surface-elevated);
    border-color: var(--bs-border-color);
}

.ig-sticky-header,
.ig-public-navbar {
    background-color: var(--ig-header-background) !important;
    border-color: var(--ig-header-border) !important;
}

.ig-page-title {
    color: var(--bs-secondary-color);
    font-size: 1.25rem;
}

.ig-public-navbar .navbar-brand,
.ig-public-navbar .nav-link,
.ig-public-navbar .navbar-toggler {
    color: var(--bs-body-color) !important;
}

.ig-public-navbar .navbar-toggler-icon {
    filter: var(--ig-public-toggler-filter, invert(1));
}

html[data-ig-theme="light"] .ig-public-navbar .navbar-toggler-icon {
    --ig-public-toggler-filter: none;
}

.ig-subtle-badge {
    color: var(--ig-subtle-badge-text) !important;
    background-color: var(--ig-subtle-badge-background) !important;
    border-color: var(--ig-subtle-badge-border) !important;
}

/* Η τρέχουσα καρτέλα ξεχωρίζει καθαρά και στα δύο θέματα. */
.nav-tabs {
    border-bottom-color: var(--bs-border-color);
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    color: var(--ig-tab-text);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
    color: var(--ig-tab-hover-text);
    border-color: var(--ig-tab-active-border) var(--ig-tab-active-border) transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--ig-tab-active-text) !important;
    background-color: var(--ig-tab-active-background) !important;
    border-color: var(--ig-tab-active-border) !important;
    font-weight: 600;
}

/* Στο φωτεινό θέμα οι καρτέλες έχουν την ίδια ήπια, καθαρή επιφάνεια με τα
   υπόλοιπα στοιχεία της εφαρμογής και η επιλεγμένη μοιάζει ενιαία με το περιεχόμενο. */
html[data-ig-theme="light"] .nav-tabs .nav-link {
    color: #495057 !important;
    background-color: #eef1f3;
    border-color: #d7dce1 #d7dce1 transparent;
}

html[data-ig-theme="light"] .nav-tabs .nav-link:hover,
html[data-ig-theme="light"] .nav-tabs .nav-link:focus {
    color: #14532d !important;
    background-color: #e6f4ea;
    border-color: #9ec9aa #9ec9aa transparent;
}

html[data-ig-theme="light"] .nav-tabs .nav-link.active,
html[data-ig-theme="light"] .nav-tabs .nav-item.show .nav-link {
    color: #146c43 !important;
    background-color: var(--ig-surface) !important;
    border-color: #d7dce1 #d7dce1 var(--ig-surface) !important;
    box-shadow: inset 0 .2rem 0 #198754;
}

html[data-ig-theme="light"] .nav-pills .nav-link {
    color: #495057 !important;
    background-color: #eef1f3;
}

html[data-ig-theme="light"] .nav-pills .nav-link:hover,
html[data-ig-theme="light"] .nav-pills .nav-link:focus {
    color: #14532d !important;
    background-color: #e6f4ea;
}

html[data-ig-theme="light"] .nav-pills .nav-link.active,
html[data-ig-theme="light"] .nav-pills .show > .nav-link {
    color: #146c43 !important;
    background-color: #dff3e5 !important;
    border-color: #198754 !important;
}

/* Τα light badges δεν πρέπει να γίνονται λευκές κηλίδες στο dark theme. */
html[data-ig-theme="dark"] .text-bg-light {
    color: var(--ig-subtle-badge-text) !important;
    background-color: var(--ig-subtle-badge-background) !important;
    border-color: var(--ig-subtle-badge-border) !important;
}

.ig-sidebar-mobile-toggle-icon {
    color: var(--ig-sidebar-active-text);
}

.concept-map-canvas {
    background-color: var(--ig-map-canvas) !important;
}

.concept-map-link-label {
    z-index: 2;
    padding: .16rem .42rem;
    color: var(--concept-map-link-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background-color: var(--ig-map-canvas) !important;
    border-radius: .3rem;
}

.concept-map-link-label-empty {
    width: 1px;
    height: 1px;
    padding: 0;
    background: transparent !important;
}

.concept-map-viewport {
    min-height: 620px;
    max-height: 70vh;
    background-color: var(--ig-map-canvas);
    cursor: grab;
}

.concept-map-viewport.is-panning {
    cursor: grabbing;
    user-select: none;
}

.concept-map-stage {
    position: relative;
    flex: none;
}

.concept-map-canvas {
    width: 2000px;
    height: 1200px;
    transform-origin: top left;
    background-image: radial-gradient(color-mix(in srgb, var(--bs-body-color) 13%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
}

.classroom-display .classroom-fullscreen-tool:has(.concept-map-viewport) {
    display: flex;
    flex-direction: column;
}

.classroom-display .concept-map-viewport {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.classroom-concept-map-stage {
    display: flex;
    flex-direction: column;
}

.classroom-concept-map-final {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.classroom-concept-map-viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}

.classroom-concept-map-viewport.is-panning {
    cursor: grabbing;
}

.classroom-concept-map-controls {
    position: absolute;
    z-index: 2;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: .15rem;
    padding: .2rem;
    border-radius: .7rem;
    color: #fff;
    background: rgba(20, 20, 20, .88);
    backdrop-filter: blur(.5rem);
}

.classroom-concept-map-controls .btn {
    border: 0;
}

.classroom-concept-map-controls [data-map-zoom-label] {
    min-width: 3.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.classroom-concept-map-final svg {
    max-width: 100%;
    max-height: 100%;
}

#map-editor .concept-map-viewport {
    height: calc(100dvh - 10rem);
    min-height: calc(100dvh - 10rem);
    max-height: calc(100dvh - 10rem);
}

.concept-map-node {
    color: var(--ig-map-node-text);
    background-color: var(--concept-map-node-color, var(--ig-map-node)) !important;
    border-color: var(--bs-border-color) !important;
}

/* Οι σελίδες επεξεργασίας εργαλείων κρατούν έναν καθαρό, μονογραμμικό τίτλο. */
#matching-editor > .d-flex > div > p,
#map-editor > .d-flex > div > p,
#homework-quiz-editor > .d-flex > div > p,
#homework-rubric-editor > .d-flex > div > p,
#homework-matching-editor > .d-flex > div > p {
    display: none;
}

#matching-editor > .d-flex > div > h1,
#map-editor > .d-flex > div > h1,
#homework-quiz-editor > .d-flex > div > h1,
#homework-rubric-editor > .d-flex > div > h1,
#homework-matching-editor > .d-flex > div > h1 {
    margin-bottom: 0 !important;
}

/* Κοινή εμφάνιση για όλα τα Bootstrap select πεδία. */
.form-select {
    color: var(--ig-select-text);
    background-color: var(--ig-select-background);
    border-color: var(--ig-select-border);
}

.form-select:focus {
    color: var(--ig-select-text);
    background-color: var(--ig-select-background);
    border-color: var(--ig-select-border);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--ig-select-border) 25%, transparent);
}

/* Κοινή εμφάνιση για πεδία κειμένου και αριθμών. */
.form-control {
    color: var(--ig-input-text);
    background-color: var(--ig-input-background);
    border-color: var(--ig-input-border);
}

.form-control:focus {
    color: var(--ig-input-text);
    background-color: var(--ig-input-background);
    border-color: var(--ig-input-focus-border);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--ig-input-focus-border) 25%, transparent);
}

/* Όλα τα υπόλοιπα κουμπιά, με εξαίρεση προσθήκη και επιστροφή. */
.btn:not(.ig-add-buttons):not(.ig-back-buttons):not(.ig-complete-button):not(.ig-logout-action):not(.ig-delete-buttons):not(.identity-provider-button):not(.btn-danger):not(.btn-outline-danger):not(.btn-primary:has(.bi-plus-lg)) {
    --bs-btn-color: var(--ig-button-text);
    --bs-btn-bg: var(--ig-button-background);
    --bs-btn-border-color: var(--ig-button-border);
    --bs-btn-hover-color: var(--ig-button-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ig-button-background) 82%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ig-button-border) 76%, #000);
    --bs-btn-active-color: var(--ig-button-text);
    --bs-btn-active-bg: color-mix(in srgb, var(--ig-button-background) 72%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--ig-button-border) 72%, #000);
    color: var(--ig-button-text) !important;
    background: var(--ig-button-background) !important;
    border-color: var(--ig-button-border) !important;
}

.btn:not(.ig-add-buttons):not(.ig-back-buttons):not(.ig-complete-button):not(.ig-logout-action):not(.ig-delete-buttons):not(.identity-provider-button):not(.btn-danger):not(.btn-outline-danger):not(.btn-primary:has(.bi-plus-lg)):hover {
    color: var(--ig-button-text) !important;
    background: color-mix(in srgb, var(--ig-button-background) 82%, #000) !important;
    border-color: color-mix(in srgb, var(--ig-button-border) 76%, #000) !important;
}

/* Κουμπιά ενεργειών μέσα στις γραμμές των πινάκων. */
.table > tbody .btn:not(.ig-add-buttons):not(.ig-back-buttons):not(.ig-logout-action):not(.ig-delete-buttons):not(.btn-danger):not(.btn-outline-danger):not(.btn-primary:has(.bi-plus-lg)) {
    --bs-btn-color: var(--ig-table-button-text);
    --bs-btn-bg: var(--ig-table-button-background);
    --bs-btn-border-color: var(--ig-table-button-border);
    --bs-btn-hover-color: var(--ig-table-button-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ig-table-button-background) 82%, #000);
    --bs-btn-hover-border-color: var(--ig-table-button-hover-border);
    color: var(--ig-table-button-text) !important;
    background: var(--ig-table-button-background) !important;
    border-color: var(--ig-table-button-border) !important;
}

.table > tbody .btn:not(.ig-add-buttons):not(.ig-back-buttons):not(.ig-logout-action):not(.ig-delete-buttons):not(.btn-danger):not(.btn-outline-danger):not(.btn-primary:has(.bi-plus-lg)):hover {
    color: var(--ig-table-button-text) !important;
    background: color-mix(in srgb, var(--ig-table-button-background) 82%, #000) !important;
    border-color: var(--ig-table-button-hover-border) !important;
}

/* Οι καταστροφικές ενέργειες πρέπει να ξεχωρίζουν ανεξάρτητα από τη θέση τους.
   Τα btn-danger / btn-outline-danger χρησιμοποιούνται αποκλειστικά για διαγραφή
   ή αντίστοιχη μη αναστρέψιμη ενέργεια. */
:root {
    --ig-delete-button-background: #a43f45;
    --ig-delete-button-border: #c45a60;
    --ig-delete-button-hover-background: #c14c53;
    --ig-delete-button-hover-border: #df7278;
    --ig-delete-button-text: #ef8e93;
}

.btn.btn-danger,
.btn.btn-outline-danger,
.ig-delete-buttons {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ig-delete-button-background);
    --bs-btn-border-color: var(--ig-delete-button-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ig-delete-button-hover-background);
    --bs-btn-hover-border-color: var(--ig-delete-button-hover-border);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ig-delete-button-hover-background);
    --bs-btn-active-border-color: var(--ig-delete-button-hover-border);
    color: #fff !important;
    background: var(--ig-delete-button-background) !important;
    border-color: var(--ig-delete-button-border) !important;
}

.btn.btn-danger:hover,
.btn.btn-outline-danger:hover,
.ig-delete-buttons:hover {
    color: #fff !important;
    background: var(--ig-delete-button-hover-background) !important;
    border-color: var(--ig-delete-button-hover-border) !important;
}

/* Στις γραμμές πινάκων η διαγραφή παραμένει έντονη, αλλά χωρίς βαρύ φόντο. */
.table > tbody .btn.btn-outline-danger {
    color: var(--ig-delete-button-text) !important;
    background: transparent !important;
    border-color: var(--ig-delete-button-border) !important;
}

.table > tbody .btn.btn-outline-danger:hover,
.table > tbody .btn.btn-outline-danger:focus,
.table > tbody .btn.btn-outline-danger:active {
    color: #fff !important;
    background: var(--ig-delete-button-background) !important;
    border-color: var(--ig-delete-button-hover-border) !important;
}

/* Central table background. Bootstrap table variants and hover continue to work normally. */
.table {
    --bs-table-bg: var(--ig-table-background);
    --bs-table-color: var(--ig-table-text);
    --bs-table-border-color: var(--ig-table-border);
    --bs-table-hover-bg: var(--ig-table-hover-background);
}

.table > tbody > tr > td,
.table > tbody > tr > th {
    height: var(--ig-table-row-height);
}

.table > thead,
.table > thead.table-light {
    --bs-table-bg: var(--ig-table-header-background);
    --bs-table-color: var(--ig-table-header-text);
}

.table > thead > tr > th {
    color: var(--ig-table-header-text) !important;
    font-weight: 700;
    height: var(--ig-table-header-height);
    border-color: var(--ig-table-header-border) !important;
    vertical-align: middle;
}

/* Διακριτή οπτική διάκριση θετικών και αρνητικών παρατηρήσεων συμπεριφοράς. */
#behavior-reasons .table > tbody > tr.behavior-reason-positive {
    --bs-table-bg: color-mix(in srgb, var(--ig-add-button-color) 16%, var(--ig-table-background));
    --bs-table-hover-bg: color-mix(in srgb, var(--ig-add-button-color) 24%, var(--ig-table-background));
}

#behavior-reasons .table > tbody > tr.behavior-reason-negative {
    --bs-table-bg: color-mix(in srgb, #d58a18 17%, var(--ig-table-background));
    --bs-table-hover-bg: color-mix(in srgb, #d58a18 26%, var(--ig-table-background));
}

html[data-ig-theme="light"] #behavior-reasons .table > tbody > tr.behavior-reason-positive {
    --bs-table-bg: color-mix(in srgb, var(--ig-add-button-color) 9%, #fff);
    --bs-table-hover-bg: color-mix(in srgb, var(--ig-add-button-color) 15%, #fff);
}

html[data-ig-theme="light"] #behavior-reasons .table > tbody > tr.behavior-reason-negative {
    --bs-table-bg: color-mix(in srgb, #e2a13a 11%, #fff);
    --bs-table-hover-bg: color-mix(in srgb, #e2a13a 18%, #fff);
}

/* Classroom presentation keeps the existing execution tools, but gives the projected view a focused stage. */
.classroom-presentation-header {
    color: var(--bs-white);
    background: linear-gradient(135deg, var(--bs-primary), #173d72);
}

.classroom-stage {
    max-width: 1200px;
    margin-inline: auto;
}

.classroom-progress {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: .25rem;
}

.classroom-progress-step {
    display: inline-grid;
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    color: var(--bs-secondary-color);
    background: var(--bs-body-bg);
}

.classroom-progress-step.active {
    border-color: var(--ig-add-button-color);
    color: var(--bs-white);
    background: var(--ig-add-button-color);
    font-weight: 800;
    transform: scale(1.08);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--ig-add-button-color) 26%, transparent);
}

/* Ροή μαθήματος: compact dashboard navigation με διακριτή πράσινη έμφαση. */
#scenario-player .list-group .player-step {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 3rem;
    margin-bottom: .35rem;
    border: 1px solid transparent;
    border-radius: .65rem !important;
    color: var(--bs-secondary-color);
    background: transparent;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

#scenario-player .list-group .player-step:hover {
    color: var(--bs-body-color);
    background: color-mix(in srgb, var(--bs-body-color) 5%, transparent);
}

/* Η τρέχουσα δραστηριότητα πρέπει να αναγνωρίζεται αμέσως και στις δύο θεματικές. */
#scenario-player .list-group .player-step.active {
    position: relative;
    color: var(--bs-body-color) !important;
    background: color-mix(in srgb, var(--ig-add-button-color) 18%, var(--bs-body-bg)) !important;
    border-color: color-mix(in srgb, var(--ig-add-button-color) 45%, var(--bs-border-color)) !important;
    box-shadow: none;
    font-weight: 800;
}

#scenario-player .list-group .player-step.active::before {
    content: "";
    flex: 0 0 .42rem;
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: var(--ig-add-button-color);
    box-shadow: 0 0 0 .24rem color-mix(in srgb, var(--ig-add-button-color) 20%, transparent);
}

html[data-ig-theme="light"] #scenario-player .list-group .player-step.active {
    background: color-mix(in srgb, var(--ig-add-button-color) 11%, #fff) !important;
    border-color: color-mix(in srgb, var(--ig-add-button-color) 36%, #d7dfd9) !important;
}

html[data-ig-theme="dark"] #scenario-player .list-group .player-step.active {
    background: color-mix(in srgb, var(--ig-add-button-color) 22%, var(--bs-body-bg)) !important;
    border-color: color-mix(in srgb, var(--ig-add-button-color) 42%, var(--bs-border-color)) !important;
}

/* Επισήμανση του εργαλείου που προβάλλεται αυτή τη στιγμή στην τάξη. */
#scenario-player .presentation-tool-item {
    padding: .35rem;
    border: 1px solid transparent;
    border-radius: .7rem;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#scenario-player .presentation-tool-item.active {
    background: color-mix(in srgb, var(--ig-add-button-color) 14%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--ig-add-button-color) 45%, var(--bs-border-color));
    box-shadow: inset .22rem 0 0 var(--ig-add-button-color);
}

#scenario-player .scenario-player-video-tool {
    padding: 1rem;
    background: color-mix(in srgb, var(--bs-body-color) 4%, var(--bs-body-bg));
}

#scenario-player .scenario-player-video-tool.active {
    background: color-mix(in srgb, var(--ig-add-button-color) 14%, var(--bs-body-bg));
}

#scenario-player .scenario-player-tool-icon {
    display: inline-grid;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: .65rem;
    background: color-mix(in srgb, currentColor 12%, transparent);
    font-size: 1.25rem;
}

html[data-ig-theme="light"] #scenario-player .presentation-tool-item.active {
    background: color-mix(in srgb, var(--ig-add-button-color) 9%, #fff);
}

html[data-ig-theme="dark"] #scenario-player .presentation-tool-item.active {
    background: color-mix(in srgb, var(--ig-add-button-color) 19%, var(--bs-body-bg));
}

.classroom-presentation:fullscreen {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 2rem !important;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
}

.ig-add-buttons,
.btn.btn-primary:has(.bi-plus-lg) {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ig-add-button-color);
    --bs-btn-border-color: var(--ig-add-button-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--ig-add-button-color) 82%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ig-add-button-color) 76%, #000);
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--ig-add-button-color) 72%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--ig-add-button-color) 72%, #000);
    color: #fff !important;
    background: var(--ig-add-button-color) !important;
    border-color: var(--ig-add-button-color) !important;
}

.ig-add-buttons:hover,
.btn.btn-primary:has(.bi-plus-lg):hover {
    color: #fff !important;
    background: color-mix(in srgb, var(--ig-add-button-color) 82%, #000) !important;
    border-color: color-mix(in srgb, var(--ig-add-button-color) 76%, #000) !important;
}

.ig-back-buttons {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ig-back-button-color);
    --bs-btn-border-color: var(--ig-back-button-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--ig-back-button-color) 82%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ig-back-button-color) 76%, #000);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--ig-back-button-color) 72%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--ig-back-button-color) 72%, #000);
    color: #fff !important;
    background: var(--ig-back-button-color) !important;
    border-color: var(--ig-back-button-color) !important;
}

.ig-back-buttons:hover {
    color: #fff !important;
    background: color-mix(in srgb, var(--ig-back-button-color) 82%, #000) !important;
    border-color: color-mix(in srgb, var(--ig-back-button-color) 76%, #000) !important;
}

/* Κοινή κάθετη στοίχιση για κείμενο και εικονίδια στα κουμπιά της εφαρμογής. */
button.btn,
a.btn,
label.btn {
    display: inline-flex;
    align-items: center;
}

/* Το κλείσιμο εργαλείου της προβολής τάξης είναι πάντα κόκκινο και δεν
   επηρεάζεται από τις προσαρμοζόμενες χρωματικές ρυθμίσεις κουμπιών. */
#display-tool-close-form .classroom-display-close-button.btn {
    color: #fff !important;
    background: #dc3545 !important;
    border-color: #dc3545 !important;
}

#display-tool-close-form .classroom-display-close-button.btn:hover,
#display-tool-close-form .classroom-display-close-button.btn:focus,
#display-tool-close-form .classroom-display-close-button.btn:active {
    color: #fff !important;
    background: #bb2d3b !important;
    border-color: #b02a37 !important;
}

#display-tool-close-form {
    position: fixed;
    z-index: 1051;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
}

.ig-mobile-table-actions {
    display: none;
}

@media (max-width: 767.98px) {
    .table > tbody .ig-mobile-table-action-source {
        display: none !important;
    }

    .table > tbody .ig-mobile-table-actions {
        display: inline-block;
    }
}
.behavior-student-button { font-size: .75rem; }

/* Η λέξη επιβεβαίωσης επαναφοράς πρέπει να πληκτρολογείται συνειδητά. */
.ig-restore-confirmation-word {
    user-select: none;
    -webkit-user-select: none;
}

/* Η Αποσύνδεση είναι επιλογή πλοήγησης και όχι «κλασικό» κουμπί. Τοποθετείται
   στο τέλος του αρχείου, ώστε να μην την ξαναχρωματίζουν οι γενικοί κανόνες
   προσαρμογής κουμπιών. */
.ig-logout-action,
.ig-logout-action.btn,
button.ig-logout-action {
    color: #dc3545 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.ig-logout-action:hover,
.ig-logout-action:focus,
.ig-logout-action:active,
.ig-logout-action.btn:hover,
.ig-logout-action.btn:focus,
.ig-logout-action.btn:active {
    color: #b02a37 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Οι καρτέλες πρέπει να λειτουργούν και σε σελίδες που γνωρίζουν μόνο το
   Bootstrap θέμα (data-bs-theme), πέρα από το δικό μας data-ig-theme. */
html[data-ig-theme="light"] .nav-tabs .nav-link,
html[data-bs-theme="light"] .nav-tabs .nav-link {
    color: #495057 !important;
    background: #eef1f3 !important;
    border-color: #d7dce1 #d7dce1 transparent !important;
}

html[data-ig-theme="light"] .nav-tabs .nav-link:hover,
html[data-ig-theme="light"] .nav-tabs .nav-link:focus,
html[data-bs-theme="light"] .nav-tabs .nav-link:hover,
html[data-bs-theme="light"] .nav-tabs .nav-link:focus {
    color: #14532d !important;
    background: #e6f4ea !important;
    border-color: #9ec9aa #9ec9aa transparent !important;
}

html[data-ig-theme="light"] .nav-tabs .nav-link.active,
html[data-ig-theme="light"] .nav-tabs .nav-item.show .nav-link,
html[data-bs-theme="light"] .nav-tabs .nav-link.active,
html[data-bs-theme="light"] .nav-tabs .nav-item.show .nav-link {
    color: #146c43 !important;
    background: var(--ig-surface) !important;
    border-color: #d7dce1 #d7dce1 var(--ig-surface) !important;
    box-shadow: inset 0 .22rem 0 #198754 !important;
}

html[data-ig-theme="light"] .nav-pills .nav-link,
html[data-bs-theme="light"] .nav-pills .nav-link {
    color: #495057 !important;
    background: #eef1f3 !important;
    border: 1px solid #d7dce1 !important;
}

html[data-ig-theme="light"] .nav-pills .nav-link:hover,
html[data-ig-theme="light"] .nav-pills .nav-link:focus,
html[data-bs-theme="light"] .nav-pills .nav-link:hover,
html[data-bs-theme="light"] .nav-pills .nav-link:focus {
    color: #14532d !important;
    background: #e6f4ea !important;
    border-color: #9ec9aa !important;
}

html[data-ig-theme="light"] .nav-pills .nav-link.active,
html[data-ig-theme="light"] .nav-pills .show > .nav-link,
html[data-bs-theme="light"] .nav-pills .nav-link.active,
html[data-bs-theme="light"] .nav-pills .show > .nav-link {
    color: #146c43 !important;
    background: #dff3e5 !important;
    border-color: #198754 !important;
}

#automatic-rules .responsive-data-table-wrapper,
#behavior-reasons .responsive-data-table-wrapper {
    max-height: min(62vh, 38rem);
    overflow-y: auto;
}

#automatic-rules .responsive-data-table-wrapper thead th,
#behavior-reasons .responsive-data-table-wrapper thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}
.concept-map-shape-rounded { border-radius: .55rem; }
.concept-map-shape-oval { border-radius: 999px; }
.concept-map-shape-circle { border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; }
.concept-map-shape-diamond { background-color: transparent !important; border-color: transparent !important; border-radius: 0; padding-left: 2.3rem !important; padding-right: 2.3rem !important; isolation: isolate; }
.concept-map-shape-diamond::before { content: ""; position: absolute; inset: -.35rem; z-index: -1; background: var(--concept-map-node-color, var(--ig-map-node)); border: inherit; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* Τελική ενέργεια editor: διακριτή από τις ενέργειες προσθήκης. */
.ig-complete-button {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0f766e;
    --bs-btn-border-color: #0f766e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5f59;
    --bs-btn-hover-border-color: #0b5f59;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #084b46;
    --bs-btn-active-border-color: #084b46;
    color: #fff !important;
}

/* Οι editors των εργαλείων αξιοποιούν το ίδιο πλήρες πλάτος με το κουίζ. */
#matching-editor.container,
#map-editor.container,
#homework-quiz-editor.container,
#homework-rubric-editor.container {
    width: 100%;
    max-width: none;
}

/* Ενιαία κεφαλίδα για κουίζ και αντιστοίχιση. */
#quiz-editor > .d-flex:first-child,
#matching-editor > .d-flex:first-child,
#rubric-editor > .d-flex:first-child {
    padding-bottom: .85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color) 65%, transparent);
}

#matching-editor > .d-flex:first-child > div > h1 {
    font-size: 1.55rem;
}

#matching-editor > .d-flex:first-child > div:last-child > .btn {
    font-size: .875rem;
}

/* Οι επιλογές dropdown πρέπει να παραμένουν ευανάγνωστες και στο ανοικτό θέμα. */
.dropdown-menu .dropdown-item {
    color: var(--bs-body-color) !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    color: var(--bs-body-color) !important;
    background-color: var(--ig-table-hover-background);
}

.tool-library-table-panel {
    display: flex;
    flex-direction: column;
}

.tool-library-table-panel .responsive-data-table-wrapper,
.scenario-table-panel .responsive-data-table-wrapper,
.schools-table-panel .responsive-data-table-wrapper,
.student-accounts-table-panel .responsive-data-table-wrapper {
    flex: 1 1 auto;
}

.scenario-table-panel,
.schools-table-panel,
.students-table-panel,
.student-accounts-table-panel {
    display: flex;
    flex-direction: column;
}

.students-table-panel .responsive-data-table-wrapper {
    flex: 1 1 auto;
}

.excel-import-beta-table tbody tr[data-excel-beta-row] {
    cursor: pointer;
}

.excel-import-beta-table tbody tr[data-excel-beta-row]:hover {
    background: var(--ig-table-hover-background);
}

.excel-preview-row-number {
    width: 3.75rem;
}

/* Τα κουμπιά εξωτερικής σύνδεσης είναι πραγματικά outline, ανεξάρτητα από
   τον γενικό κανόνα εμφάνισης των κουμπιών της εφαρμογής. */
.identity-provider-buttons .btn.identity-provider-button {
    color: var(--bs-body-color) !important;
    background: transparent !important;
    border-color: var(--bs-border-color) !important;
}

.identity-provider-buttons .btn.identity-provider-button:hover,
.identity-provider-buttons .btn.identity-provider-button:focus-visible {
    color: var(--bs-body-color) !important;
    background: color-mix(in srgb, var(--bs-primary) 10%, transparent) !important;
    border-color: var(--bs-primary) !important;
}

.identity-provider-buttons .btn.identity-provider-google { border-color: #4285f4 !important; }
.identity-provider-buttons .btn.identity-provider-microsoft { border-color: #00a4ef !important; }
.identity-provider-buttons .btn.identity-provider-facebook { border-color: #1877f2 !important; }

/* Έλεγχος κάλυψης εβδομαδιαίου ωραρίου στο αυτόματο ωρολόγιο. */
.timetable-load-under > * {
    background-color: color-mix(in srgb, #f28c28 20%, var(--ig-table-background, transparent)) !important;
}

.timetable-load-over > * {
    background-color: color-mix(in srgb, #dc3545 18%, var(--ig-table-background, transparent)) !important;
}

.timetable-load-exact > * {
    background-color: color-mix(in srgb, #198754 12%, var(--ig-table-background, transparent)) !important;
}
.manual-timetable-grid {
    table-layout: fixed;
    min-width: 760px;
}

.manual-timetable-grid th:first-child {
    width: 4rem;
}

.manual-drop-cell {
    min-height: 5.5rem;
    height: 5.5rem;
    vertical-align: top;
    transition: background-color .15s ease;
}

.manual-drop-cell.manual-drop-valid {
    --bs-table-bg: color-mix(in srgb, var(--bs-success) 20%, var(--bs-body-bg));
    background: var(--bs-table-bg);
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg);
    outline: 2px solid var(--bs-success);
    outline-offset: -2px;
}

.manual-drop-cell.manual-drop-invalid {
    --bs-table-bg: color-mix(in srgb, var(--bs-danger) 18%, var(--bs-body-bg));
    background: var(--bs-table-bg);
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg);
    outline: 2px solid var(--bs-danger);
    outline-offset: -2px;
}

.manual-lesson {
    cursor: grab;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-tertiary-bg);
    padding: .5rem;
    overflow-wrap: anywhere;
    user-select: none;
    -webkit-user-select: none;
}

.manual-lesson:active {
    cursor: grabbing;
}

.manual-lesson-selected {
    outline: 2px solid var(--bs-primary);
}

.manual-lesson-locked {
    cursor: default;
    border-color: var(--bs-warning);
}

.manual-overall-grid {
    min-width: max(100%, 90rem);
}

.manual-overall-grid td.manual-drop-cell {
    min-height: 2.25rem;
    height: 2.25rem;
    padding: .03rem;
}

.manual-overall-grid .manual-lesson {
    position: relative;
    min-height: 2.15rem;
    padding: .05rem .9rem .05rem .2rem;
    font-size: .68rem;
    line-height: 1.15;
    overflow: hidden;
}

.manual-overall-grid.table td.timetable-staff-single-hour .manual-lesson {
    background: #ffe5e3;
    border-color: #dd8985;
    color: #8d2020;
}
html[data-ig-theme="dark"] .manual-overall-grid.table td.timetable-staff-single-hour .manual-lesson {
    background: #542a2b;
    border-color: #ad6060;
    color: #ffaaaa;
}

.manual-overall-grid .manual-lesson strong,
.manual-overall-grid .manual-overall-subject {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.manual-overall-lock {
    position: absolute;
    top: .05rem;
    right: .05rem;
    border: 0;
    border-radius: .2rem;
    padding: .05rem;
    background: transparent;
    color: inherit;
    line-height: 1;
}

.manual-overall-lock:hover,
.manual-overall-lock:focus-visible {
    background: var(--bs-body-bg);
}