/* CSS Reset and Base Styles */
:root {
    /* Default theme — "Coffee" (the ΤΟΜΗ brand look) */
    --primary-color: #5a3a22;
    --secondary-color: #b98860;
    --background-light: #f5efe8;
    --background-white: #ffffff;
    --text-color: #2c1e14;
    --footer-bg: #3a2517;

    /* Accents: 1 = high-contrast anchor, 2 = brand highlight, 3 = soft highlight */
    --accent-color-1: #2c1e14;
    --accent-color-2: #c8762d;
    --accent-color-3: #e0a458;
    --accent-color-4: #25211e;

    /* Secondary/muted text + borders (theme-aware) */
    --text-muted: #7a6552;
    --border-color: #e4d8cc;
    --heading-color: #5a3a22;

    /* Typography */
    --base-font-size: 16px;
    --font-family: 'Arial', sans-serif;

    /* Borders and Shadows */
    --border-radius: 8px;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* Status colours. Referenced in several places (grade bands, rising and
       falling figures) but never defined, so those rules silently rendered
       with no colour at all. */
    --success-color: #2e7d32;
    --warning-color: #b26a00;
    --danger-color: #c62828;
}

/* Dark theme — charcoal + teal */
[data-theme="dark"] {
    --primary-color: #11161d;
    --secondary-color: #4b5563;
    --background-light: #1c2530;
    --background-white: #263241;
    --text-color: #e8edf2;
    --footer-bg: #0d1117;

    --accent-color-1: #e8edf2;
    --accent-color-2: #2dd4bf;
    --accent-color-3: #fbbf24;
    --accent-color-4: #3b3b3b;

    --text-muted: #9aa7b4;
    --border-color: #36424f;
    --heading-color: #eaf1f8;

    /* Lifted off the light-theme values — the darker greens and reds are
       unreadable against a charcoal card. */
    --success-color: #4ade80;
    --warning-color: #fbbf24;
    --danger-color: #f87171;

    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Light theme — lavender / violet */
[data-theme="light"] {
    --primary-color: #6d28d9;
    --secondary-color: #b188e6;
    --background-light: #f6f3fc;
    --background-white: #ffffff;
    --text-color: #2a2433;
    --footer-bg: #4c1d95;

    --accent-color-1: #2a2433;
    --accent-color-2: #db2777;
    --accent-color-3: #f59e0b;
    --accent-color-4: #201e25;

    --text-muted: #6f6880;
    --border-color: #e7ddf5;
    --heading-color: #6d28d9;
}

/* Blue theme — ocean / azure */
[data-theme="blue"] {
    --primary-color: #1d4ed8;
    --secondary-color: #75a6f5;
    --background-light: #eaf2fe;
    --background-white: #ffffff;
    --text-color: #14233f;
    --footer-bg: #15326b;

    --accent-color-1: #14233f;
    --accent-color-2: #06b6d4;
    --accent-color-3: #f59e0b;
    --accent-color-4: #1e2525;

    --text-muted: #5e7297;
    --border-color: #d3e2f7;
    --heading-color: #1d4ed8;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;

}
.unselectable {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;        /* Standard syntax */
}

html {
    font-size: var(--base-font-size);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-light);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Typography */
h1, h2, h3 {
    margin-bottom: 1rem;
    line-height: 1.2;
}

/* Layout */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

/* Header and Navigation */
header {
    background-color: var(--background-white);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
}
.add-lesson-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.3s ease;
}

.add-lesson-btn:hover {
    background-color: var(--secondary-color);;
}

.add-lesson-btn i {
    margin-right: 5px;
}
.logo {
    display: flex;
    align-items: center;
}

.logo img {
    max-width: 120px;
    height: auto;
}

/* Navigation */
nav {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
}

.nav-links li {
    margin: 0 1rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--heading-color);
    font-weight: 600;
    font-size: 1.1rem;
    transition: color 0.3s ease;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--heading-color);
}

/* Main Content */
main {
    flex: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
}

.content-wrapper {
    display: flex;
    background-color: var(--background-white);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    gap: 1rem;
}

/* Stats Section */
.stats-section {
    background-color: var(--background-light);
    padding: 3rem 0;
}

.stats-container {
    display: flex;
    justify-content: space-around;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background-color: var(--background-white);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.stat-circle:hover {
    transform: scale(1.05);
}

.stat-number {
    font-size: 3rem;
    font-weight: bold;
    color: var(--heading-color);
}

.stat-label {
    font-size: 1rem;
    text-align: center;
    color: var(--text-color);
}

/* Footer */
footer {
    background-color: var(--footer-bg);
    color: white;
    padding: 2rem;
    text-align: center;
}

.social-media {
    margin-top: 1rem;
}

.social-media a {
    color: white;
    margin: 0 0.5rem;
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.social-media a:hover {
    color: #ddd;
}


.registration-container {
    max-width: 600px; 
    margin: 2rem auto; 
    padding: 2rem; 
    background: var(--background-white);
    border-radius: 8px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.registration-container h1 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #49301b; 
}


.registration-container label {
    display: block; 
    margin-bottom: 0.5rem; 
    font-weight: bold; 
}

.registration-container input[type="text"],
.registration-container input[type="email"],
.registration-container input[type="password"],
.registration-container select {
    width: 100%; 
    padding: 0.8rem; 
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem; 
    transition: border 0.3s ease; 
}

.registration-container input:focus,
.registration-container select:focus {
    border-color: #7a4d2f; 
    outline: none; 
}

.registration-container button {
    width: 100%; 
    padding: 0.8rem;
    background-color: #49301b; 
    color: white; 
    border: none; 
    border-radius: 4px; 
    font-size: 1rem; 
    cursor: pointer;
    transition: background-color 0.3s ease; 
}

.registration-container button:hover {
    background-color: #7a4d2f; 
}

.registration-footer {
    text-align: center;
    margin-top: 1.5rem;
}
.course-selection {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1rem;
}

.course-checkbox {
    display: flex;
    align-items: center;
    width: calc(50% - 5px);
}
.my-icon {
    fill: var(--text-color);
}
.course-checkbox input {
    margin-right: 10px;
}
.registration-container textarea {
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.3s ease;
    resize: vertical; 
    min-height: 100px; 
    max-height: 300px; 
    overflow-y: auto; 
}
.registration-container textarea:focus {
    border-color: #7a4d2f;
    outline: none;
    box-shadow: 0 0 5px rgba(122, 77, 47, 0.3);
}
.input-error {
    border: 2px solid red !important;
}

.error-message {
    margin-bottom: 10px;
    color: red;
    font-size: 0.8rem;
}
.registration-container textarea::placeholder {
    color: var(--text-muted);
}
.registration-container input[type="text"].input-error,
.registration-container input[type="email"].input-error,
.registration-container textarea.input-error {
    border: 2px solid red !important;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
}
.logout-button {
    background-color: #ff4d4d;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.logout-button:hover {
    background-color: #e60000; 
}

.logout-button img {
    vertical-align: middle;
}
.header-buttons {
    display: flex;
    align-items: center;
    gap: 10px; 
}

.header-button {
    background-color: var(--primary-color); 
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.header-button:hover {
    background-color: var(--secondary-color); 
}

.header-button img {
    vertical-align: middle;
}

/* Header icons: the SVG file is a mask and the colour is the button's text
   colour, so the icon matches its label in every theme. On hover it takes
   --accent-color-2, the highlight the theme switcher already uses. An <img>
   cannot be recoloured, which is why the old icons stayed black. <i> rather
   than <span> because the mobile layout hides spans in these buttons. */
.header-icon {
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
            mask: var(--icon) center / contain no-repeat;
    transition: transform 0.2s ease;
}

/* On hover the icon changes colour and the button keeps its own. The usual
   hover background is so close to accent-2 that the icon all but vanished on
   it (1.11:1 in the coffee theme). Scoped to buttons that have an icon, so
   other header buttons keep their existing hover. */
.header-button:has(.header-icon):hover {
    background-color: var(--primary-color);
}

.header-button:hover .header-icon {
    background-color: var(--accent-color-2);
    transform: scale(1.12);
}

.dashboard-container {
    display: flex;
    margin-top: 20px;
}

.filter-container {
    background-color: var(--background-white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}
.filter-container h2 {
    margin-bottom: 15px;
    font-size: 1.5rem;
    color: var(--heading-color);
}
.filter-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-color);
}
.filter-container input[type="date"] {
    width: calc(50% - 10px); /* Adjust width to fit two inputs */
    padding: 10px;
    margin-right: 10px; /* Space between inputs */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}
.messages-container {
    width: 75%; /* 75% width for messages */
    padding: 20px;
}
.filter-container input[type="date"]:focus {
    border-color: var(--secondary-color);
    outline: none;
}
#apply-filters {
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}
#apply-filters:hover {
    background-color: var(--secondary-color);
}
.messages-container ul {
    list-style-type: none;
    padding: 0;
}

.messages-container li {
    padding: 10px;
    border-bottom: 1px solid #eee;
}
.call-icon {
    margin-left: 10px;
    color: var(--heading-color);
    cursor: pointer;
    transition: color 0.3s ease;
    width: 50px;
}

.call-icon:hover {
    color: var(--secondary-color);
}

#messages-list li {
    background-color: var(--background-white);
    color: var(--accent-color-1);
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
#inbox-messages-list li {
    background-color: var(--background-white);
    color: var(--accent-color-1);
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
#mailbox-section {
    background-color: var(--background-light);
    padding: 20px;
    border-radius: 10px;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}
.message-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s ease;
}
#messages-list, #inbox-messages-list {
    list-style-type: none;
    padding: 0;
    max-height: 500px;
    overflow-y: auto;
}
#messages-list li:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}
#inbox-messages-list li:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

#messages-list li.new-message {
    border-left: 4px solid var(--primary-color);
    background-color: #effff6;
}
#inbox-messages-list li.new-message {
    border-left: 4px solid var(--primary-color);
    background-color: #effff6;
}
#messages-list li.read-message {
    border-left: 4px solid var(--secondary-color);
    background-color: var(--background-white);
}
#inbox-messages-list li.read-message {
    border-left: 4px solid var(--secondary-color);
    background-color: var(--background-white);
}
.call-icon {
    color: var(--heading-color);
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.call-icon:hover {
    color: var(--secondary-color);
    transform: scale(1.2);
}

/* Message Details Modal Styling */
.message-details-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.message-details-modal {
    background-color: var(--background-white);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
}

.message-details-modal h2 {
    color: var(--heading-color);
    border-bottom: 2px solid var(--background-light);
    padding-bottom: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.message-info {
    background-color: var(--background-light);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.message-info p {
    margin: 10px 0;
    color: var(--text-color);
}
.message-name {
    font-weight: bold;
}

.message-content {
    background-color: var(--background-white);
    border-radius: 8px;
    padding: 20px;
}

.message-content h3 {
    color: var(--heading-color);
    margin-bottom: 10px;
    border-bottom: 1px solid var(--background-light);
    padding-bottom: 5px;
}
.message-contact {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.message-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.message-actions button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 1rem;
}

#close-message {
    background-color: var(--secondary-color);
    color: white;
}

#mark-read {
    background-color: var(--primary-color);
    color: white;
}

#close-message:hover {
    background-color: #6c757d;
}

#mark-read:hover {
    background-color: var(--secondary-color);
}

/* Filters Styling */
.filter-container {
    background-color: var(--background-white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.filter-container h2 {
    margin-bottom: 15px;
    font-size: 1.5rem;
    color: var(--heading-color);
    border-bottom: 2px solid var(--background-light);
    padding-bottom: 10px;
}

.filter-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-color);
}

.filter-container input[type="date"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
}

#apply-filters {
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    width: 100%;
}
#apply-filters:hover {
    background-color: var(--secondary-color);
}

.call-confirmation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.call-confirmation-modal {
    background-color: var(--background-white);
    width: 350px;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.call-confirmation-modal h2 {
    color: var(--heading-color);
    margin-bottom: 15px;
}


.call-confirmation-modal p {
    color: var(--text-color);
    margin-bottom: 20px;
}

.call-confirmation-buttons {
    display: flex;
    justify-content: space-between;
}

.call-confirmation-buttons button {
    flex: 1;
    padding: 10px;
    margin: 0 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#confirm-call {
    background-color: var(--primary-color);
    color: white;
}

#confirm-call:hover {
    background-color: var(--secondary-color);
}

#cancel-call {
    background-color: var(--background-light);
    color: var(--text-color);
}

#cancel-call {
    background-color: var(--background-light);
    color: var(--text-color);
}

.call-confirmation-modal .phone-number {
    font-weight: bold;
    color: var(--heading-color);
}
#archive-message {
    background-color: #6c757d; /* Neutral gray color */
    color: white;
}

#archive-message:hover {
    background-color: #545b62;
}

.message-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px; /* Add some space between buttons */
}

.message-actions button {
    flex: 1; /* Make buttons equal width */
}
.call-button {
    display: flex;
    align-items: center;
    gap: 5px;
}

.call-button img {
    width: 20px;
    height: 20px;
}
.students-dashboard {
    display: flex;
    height: calc(100vh - 100px);
    background-color: var(--background-light);
    border-radius: 12px;
    overflow: auto;
    /* box-shadow: 0 4px 10px rgba(0,0,0,0.1); */
}
.students-container {
    display: flex;
    width: 100%;
}
.students-list {
    width: 350px;
    background-color: var(--background-white);
    border-right: 1px solid #e0e0e0;
    overflow-y: auto;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}
.students-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.students-list-header {
    display: flex;
    padding: 15px;
    background-color: var(--background-light);
    border-bottom: 1px solid #e0e0e0;
}
.students-list-container {
    display: flex;
    flex-direction: column;
    /* width: 350px; */
    background-color: var(--background-white);
    border-right: 1px solid #e0e0e0;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}
.search-container {
    display: flex;
    width: 100%;
}
.students-list-header h2 {
    color: var(--heading-color);
    margin: 0;
    font-size: 1.5rem;
}

.search-input {
    flex-grow: 1;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}
.search-button {
    padding: 10px 15px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(73, 48, 27, 0.1);
}

.student-item {
    color: var(--accent-color-1);
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.student-item:hover {
    background-color: var(--background-light);
    color: var(--text-color);
    transform: translateX(5px);
}

.student-item.active {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.student-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.student-item.active .student-avatar {
    background-color: white; /* intentional: white disc on the selected (primary) row */
    color: var(--primary-color);
}

.student-info {
    flex: 1;
    overflow: hidden;
}

.student-name {
    font-weight: bold;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-details {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.student-item.active .student-details {
    color: rgba(255,255,255,0.7);
}

.students-details {
    flex: 1;
    background-color: var(--background-white);
    padding: 30px;
    overflow-y: auto;
    position: relative;
}

.student-details-section {
    background-color: var(--background-light);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.grade-level-selector {
    margin-top: 15px;
    margin-left: 65px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.grade-level-selector label {
    font-weight: bold;
    margin-right: 5px;
}

.grade-level-selector select {
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

#save-grade-level {
    padding: 5px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#save-grade-level:hover {
    background-color: #45a049;
}
.student-details-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 15px;
}

.student-details-header img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 20px;
    object-fit: cover;
    border: 4px solid var(--primary-color);
}

.student-details-header-info {
    flex: 1;
}

.student-details-header-info h1 {
    color: var(--heading-color);
    margin: 0 0 10px 0;
}

.student-details-header-info p {
    margin: 5px 0;
    color: var(--text-muted);
}

.student-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.student-info-item {
    background-color: var(--background-white);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.student-info-item h3 {
    color: var(--heading-color);
    margin-bottom: 10px;
    font-size: 1rem;
}

.student-info-item p {
    color: var(--text-color);
    font-weight: bold;
}
.students-menu {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-light);
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 0;
}

.students-menu-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background-color: transparent;
    color: var(--text-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    outline: none;
}

.students-menu-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.students-menu-btn:hover::after {
    width: 100%;
}

.students-menu-btn.active {
    background-color: var(--primary-color);
    color: white;
}

.students-menu-btn.active::after {
    width: 0;
}
.students-placeholder {
    flex: 1;
    overflow-y: auto;
}
.students-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-light);
    margin-bottom: 20px;
    overflow: hidden;
    width: 100%;
}

.students-details {
    padding: 30px;
}

.student-details-section {
    background-color: var(--background-light);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.student-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.student-info-item {
    background-color: var(--background-white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.student-info-item h3 {
    color: var(--heading-color);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--background-light);
    padding-bottom: 10px;
}

.lessons-table {
    width: 100%;
    border-collapse: collapse;
}

.lessons-table th, .lessons-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.lessons-table th {
    background-color: var(--background-light);
    color: var(--heading-color);
}

.weekly-schedule {
    background-color: var(--background-white);
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    table-layout: fixed; /* This helps with column width */
}

.day-schedule {
    background-color: var(--background-white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.day-schedule h3 {
    color: var(--heading-color);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--background-light);
    padding-bottom: 10px;
}

.day-schedule ul {
    list-style-type: none;
    padding: 0;
}

.day-schedule ul li {
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.lessons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.lesson-block {
    background-color: var(--background-white);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    transition: 0.2s;
}

.lesson-block:hover {
    transform: translateY(-5px);
    transition: 0.2s;
}

.lesson-title {
    color: var(--heading-color);
    border-bottom: 2px solid var(--background-light);
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.lesson-block.drag-over {
    background-color: #f0f8ff;
    /* No border change here on purpose — see .drag-over below. The block
       already carries a 1px border, so switching it to 2px grew the box by a
       pixel on every side and shifted the layout while the pointer was over
       it. The dashed edge is drawn with an outline instead. */
}

.student-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.lesson-students ul {
    list-style-type: none;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

.lesson-students li {
    color: var(--text-color);
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    background-color: var(--background-light);
    border-radius: 4px;
}

.lesson-students .student-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.lesson-students .student-name {
    flex-grow: 1;
}

.lesson-details {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.student-item {
    cursor: move;
}

.lesson-block {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px;
    transition: background-color 0.3s;
}

.lesson-block.drag-over {
    background-color: #f0f8ff;
}

.dragging {
    opacity: 0.5;
    cursor: grabbing;
}
.lesson-block.drag-over {
    background-color: #f0f8ff;
    /* No border change here on purpose — see .drag-over below. The block
       already carries a 1px border, so switching it to 2px grew the box by a
       pixel on every side and shifted the layout while the pointer was over
       it. The dashed edge is drawn with an outline instead. */
}

.student-item.dragging,
.lesson-students li.dragging {
    opacity: 0.5;
    cursor: grabbing;
}
.dragging {
    opacity: 0.5;
    transform: scale(0.95);
    background-color: rgba(0,123,255,0.2);
    transition: all 0.2s ease;
}
/* The drop-zone highlight.
   Drawn with an outline rather than a border: an outline is painted outside the
   box model and never changes an element's size, so lighting a zone up cannot
   move it or anything near it. A border here grew .lesson-block from 1px to
   2px, and an element that shifts under the pointer fires dragleave, which is
   half of why the highlight used to blink.
   The transition is limited to the colour for the same reason — `all` animated
   the border too, turning each flicker into a visible fade. */
.drag-over {
    background-color: rgba(0,123,255,0.1);
    outline: 2px dashed #007bff;
    outline-offset: -2px;
    transition: background-color 0.2s ease;
}
[draggable="true"] {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

[draggable="true"]:active {
    cursor: grabbing !important;
}
.scroll-zone {
    height: 50px; /* Height of the scroll zones */
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1000; /* Ensure it is above other elements */
}

.top-scroll-zone {
    top: 0;
    background-color: rgba(0, 255, 0, 0.3); /* Light green */
}

.bottom-scroll-zone {
    bottom: 0;
    background-color: rgba(255, 0, 0, 0.3); /* Light red */
}
.student-profile-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background-color: var(--background-light);
    padding: 20px;
    border-radius: 8px;
}

.student-profile-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
}

.student-profile-image img.student-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-basic-info h2 {
    margin: 0 0 10px 0;
    color: var(--accent-color-1);
}

.student-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.student-details-item {
    background-color: var(--background-light);
    padding: 15px;
    border-radius: 8px;
}

.student-details-item ul {
    list-style-type: none;
    padding: 0;
}

.student-details-item ul li {
    margin-bottom: 5px;
    padding: 5px;
    background-color: var(--background-light);
    border-radius: 4px;
}
.mailbox-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-light);
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 0;
}

.mailbox-menu-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background-color: transparent;
    color: var(--text-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    outline: none;
}

.mailbox-menu-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.mailbox-menu-btn:hover::after {
    width: 100%;
}

.mailbox-menu-btn.active {
    background-color: var(--primary-color);
    color: white;
}

.mailbox-menu-btn.active::after {
    width: 0;
}

.mailbox-section {
    display: none;
}
.student-details-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Profile Header */
.student-profile-card {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 40px;
    padding: 30px;
    background: var(--background-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
}
@media (max-width: 768px) {
    .student-profile-card {
        grid-template-columns: 1fr;
    }
}
.left-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center;
}

.profile-image-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
}

.student-avatar-details {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--accent-color-2);
    box-shadow: var(--box-shadow);
}

.student-status {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: var(--background-white);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.active-student {
    border: 2px solid rgb(168, 224, 83);
}

.inactive-student {
    border: 2px solid rgb(236, 72, 72);
}

.grade-selector {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.grade-selector label {
    font-size: 0.85rem;
    color: var(--secondary-color);
}

.form-select {
    padding: 8px 10px;
    border-radius: var(--border-radius);
    border: 1px solid #ccc;
}

.btn-save {
    background: var(--accent-color-2);
    color: white;
    padding: 8px;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-save:hover {
    background: #e6a800;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.btn-contact,
.btn-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: var(--border-radius);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
}

.btn-contact {
    background: var(--primary-color);
    color: white;
}

.btn-contact:hover {
    background: #004d99;
}

.btn-delete {
    background: var(--danger-color);
    color: white;
}

.btn-delete:hover {
    background: #c62828;
}

.right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.student-name-details {
    font-size: 2rem;
    margin: 0;
    color: var(--heading-color);
}

.student-meta {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.performance-section {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.performance-box {
    background: var(--background-light);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    flex: 1;
    min-width: 150px;
}

.performance-box .value {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.performance-box .value small {
    font-size: 1rem;
    opacity: 0.6;
}

.performance-box .label {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Grade colors */
.grade-4 .value { color: var(--success-color); }  /* 16-20 */
.grade-3 .value { color: var(--info-color); }     /* 12-15.9 */
.grade-2 .value { color: var(--warning-color); }  /* 8-11.9 */
.grade-1 .value { color: var(--danger-color); }   /* 0-7.9 */

.student-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 250px;
}

.grade-selector {
    display: flex;
    gap: 10px;
    align-items: center;
}

.form-select {
    padding: 8px 12px;
    border-radius: var(--border-radius);
    border: 1px solid #ddd;
    flex-grow: 1;
}

.btn-save {
    background: var(--accent-color-2);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.2s;
}

.btn-save:hover {
    background: #e6a800;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-contact, .btn-delete {
    padding: 8px 15px;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-contact {
    background: var(--background-light);
    color: white;
}

.btn-contact:hover {
    background: var(--primary-color);
}

.btn-delete {
    background: var(--danger-color);
    color: white;
}

.btn-delete:hover {
    background: #d32f2f;
}

/* Main Dashboard Grid */
.student-dashboard {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

@media (min-width: 1200px) {
    .student-dashboard {
        grid-template-columns: 1fr 1.5fr;
    }
}

/* Detail Cards */
.detail-card {
    background: var(--background-white);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--box-shadow);
    margin-bottom: 25px;
}

.section-title {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--heading-color);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.detail-item {
    margin-bottom: 10px;
}

.detail-label {
    font-weight: 600;
    color: var(--text-muted);
    display: block;
    margin-bottom: 3px;
    font-size: 0.9rem;
}

.detail-value {
    display: block;
    padding-left: 10px;
}

/* Lessons Section */
.lessons-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.lesson-item {
    background: var(--background-light);
    padding: 15px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--accent-color-2);
}

.lesson-item.completed {
    border-left-color: var(--success-color);
}

.lesson-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.lesson-title {
    margin: 0;
    font-size: 1.1rem;
}

.lesson-grade, .lesson-status {
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.9rem;
}

.lesson-status {
    background: var(--warning-color);
    color: white;
}

.lesson-meta {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.progress-bar {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--accent-color-2);
    transition: width 0.5s ease;
}

/* Analytics Cards */
.analytics-card {
    background: var(--background-white);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--box-shadow);
    margin-bottom: 25px;
}

.trend-chart {
    height: 200px;
    background: var(--background-light);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--secondary-color);
}

.trend-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.metric-item {
    background: var(--background-light);
    padding: 12px;
    border-radius: var(--border-radius);
}

.metric-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 5px;
}

.metric-value {
    font-weight: bold;
    font-size: 1.1rem;
}

.metric-value.positive {
    color: var(--success-color);
}

.metric-value.negative {
    color: var(--danger-color);
}

/* Strengths.
   The weaknesses column was removed — it repeated the analysis card above it —
   so the list now runs full width instead of sitting in half a grid. */
.student-strengths .sw-column li {
    align-items: center;
}

.strength-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.strength-label {
    font-weight: 600;
}

/* The figure behind the claim, kept quiet so the claim reads first. */
.strength-detail {
    font-size: 0.85rem;
    color: var(--secondary-color);
}

/* Strengths & Weaknesses */
.sw-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .sw-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.sw-column h3 {
    margin-top: 0;
    color: var(--heading-color);
    font-size: 1.1rem;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.strengths h3 {
    color: var(--success-color);
}

.weaknesses h3 {
    color: var(--danger-color);
}

.sw-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sw-column li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.strengths li i {
    color: var(--success-color);
}

.weaknesses li i {
    color: var(--danger-color);
}

.recommendation {
    font-size: 0.85rem;
    color: var(--secondary-color);
    margin-top: 5px;
    padding-left: 24px;
    font-style: italic;
}

/* Engagement Metrics */
.engagement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.engagement-item {
    text-align: center;
    padding: 15px;
    background: var(--background-light);
    border-radius: var(--border-radius);
}

.engagement-value {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--heading-color);
}

.engagement-label {
    font-size: 0.85rem;
    color: var(--secondary-color);
}
.mailbox-section.active {
    display: block;
}
/* Styles for the student details section */
.student-details-section {
    color: var(--heading-color);
    background-color: var(--background-light);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Styles for the profile header */
.student-profile-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.student-profile-image {
    margin-right: 20px;
}

.student-profile-image img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.student-basic-info h2 {
    margin: 0 0 10px 0;
    color: var(--heading-color);
}

/* Styles for the details grid */
.student-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Styles for each detail item */
.student-details-item {
    background-color: var(--background-white);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Styles for the mail icon */
.mail-icon {
    color: var(--heading-color);
    cursor: pointer;
    transition: color 0.3s ease;
}
.phone-icon{
    color: var(--heading-color);
    cursor: pointer;
    transition: color 0.3s ease;
}

.mail-icon:hover {
    color: var(--background-light); /* Change color on hover */
}
.phone-icon:hover {
    color: var(--background-light); /* Change color on hover */
}

/* The student card's Email and Call buttons are .btn-contact AND .mail-icon /
   .phone-icon, so on hover they got the icon rule's text colour on the
   button's --primary-color background. --background-light is near-white in
   every theme but dark, where it is #1c2530 on #11161d and the label vanished.
   White reads on --primary-color in all four themes. */
.btn-contact.mail-icon:hover,
.btn-contact.phone-icon:hover {
    color: white;
}

/* Dark mode: the buttons already show near-white text on a dark background, so
   a white hover changed almost nothing you could see. There the label turns
   --accent-color-2 instead, as the header icons do. */
[data-theme="dark"] .btn-contact.mail-icon:hover,
[data-theme="dark"] .btn-contact.phone-icon:hover {
    color: var(--accent-color-2);
}

/* Styles for the email modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.add-teacher-modal {
    color: var(--accent-color-1);
    background-color: var(--background-white);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 500px;
}

.add-teacher-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.add-teacher-modal .modal-header h2 {
    margin: 0;
}

.add-teacher-modal .modal-header .close-modal {
    font-size: 24px;
    cursor: pointer;
}

.add-teacher-modal .form-group {
    margin-bottom: 20px;
}

.add-teacher-modal .form-group label {
    display: block;
    margin-bottom: 10px;
}

.add-teacher-modal .form-group input[type="text"], 
.add-teacher-modal .form-group input[type="email"], 
.add-teacher-modal .form-group input[type="tel"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.add-teacher-modal .form-group input[type="file"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.add-teacher-modal .modal-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.add-teacher-modal .modal-actions button[type="submit"] {
    background-color: var(--primary-color);
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.add-teacher-modal .modal-actions button[type="button"] {
    background-color: #ccc;
    color: #333;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.add-teacher-modal .modal-actions button[type="submit"]:hover {
    background-color: var(--secondary-color);
}

.add-teacher-modal .modal-actions button[type="button"]:hover {
    background-color: #bbb;
}
.email-modal {
    background: var(--background-white);
    padding: 30px;
    border-radius: 10px;
    width: 400px;
    max-width: 90%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.email-modal h2 {
    margin-bottom: 15px;
    color: var(--heading-color);
}

.email-modal textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
    resize: vertical;
}

.modal-actions {
    display: flex;
    justify-content: space-between;
}

.modal-actions button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.modal-actions button#send-email {
    background-color: var(--secondary-color);
    color: white;
}

.modal-actions button#send-email:hover {
    background-color: var(--primary-color); /* Darker shade on hover */
}

.modal-actions button#cancel-email {
    background-color: #6c757d;
    color: white;
}

.modal-actions button#cancel-email:hover {
    background-color: #5a6268; /* Darker shade on hover */
}
/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Email Modal Styles */
.email-modal {
    background-color: var(--background-white);
    border-radius: 10px;
    width: 500px;
    max-width: 90%;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.email-modal h2 {
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

.template-section {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
}

.template-section label {
    flex-shrink: 0;
}

#template-select {
    flex-grow: 1;
    /* A flex item will not shrink below its content by default, and a select's
       content is its longest option. With the SouperSchool template titles that
       was wider than the modal, which pushed the button out past its edge. */
    min-width: 0;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#create-template-btn {
    flex-shrink: 0;
    white-space: nowrap;
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#create-template-btn:hover {
    background-color: var(--primary-color);
}

.email-modal textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

.modal-actions {
    display: flex;
    justify-content: space-between;
}

.modal-actions button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#send-email {
    background-color: #49301b;
    color: white;
}

#send-email:hover {
    background-color: #5a3f22;
}

#cancel-email {
    background-color: #6c757d;
    color: white;
}

#cancel-email:hover {
    background-color: #545b62;
}

/* Template Creation Modal */
.template-creation-modal {
    background-color: var(--background-white);
    border-radius: 10px;
    width: 500px;
    max-width: 90%;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.template-creation-modal h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--heading-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

.template-creation-modal > div {
    margin-bottom: 15px;
}

.template-creation-modal label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.template-creation-modal input,
.template-creation-modal select,
.template-creation-modal textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.template-creation-modal textarea {
    resize: vertical;
    min-height: 100px;
}

.template-creation-modal .modal-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

#save-template {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#save-template:hover {
    background-color: var(--primary-color);
}

#cancel-template {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#cancel-template:hover {
    background-color: #545b62;
}

/* Notifications */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px;
    border-radius: 5px;
    color: white;
    z-index: 1100;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.notification.success {
    background-color: #28a745;
}

.notification.error {
    background-color: #dc3545;
}
/* Teachers Section Styles */
.teachers-container {
    display: flex;
    height: calc(100vh - 100px);
    background-color: var(--background-light);
    border-radius: 12px;
    overflow: auto;
}

.teachers-list-container {
    display: flex;
    flex-direction: column;
    width: 350px;
    background-color: var(--background-white); /* Ensure white background */
    border-right: 1px solid #e0e0e0;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

.teachers-list-header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: var(--background-white); /* Ensure white background */
    border-bottom: 1px solid #e0e0e0;
}

.teachers-list {
    padding: 15px;
    background-color: var(--background-white); /* Ensure white background */
    border-bottom: 1px solid #e0e0e0;
}

.teachers-list-header-add-button {
    display: flex;
    justify-content: center;
    padding: 10px;
}
.teacher-item {
    color: var(--accent-color-1);
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.teacher-item:hover {
    background-color: var(--background-light);
    transform: translateX(5px);
}

.teacher-item.active {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.teacher-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.teacher-item.active .teacher-avatar {
    background-color: var(--background-white);
    color: var(--heading-color);
}

.teacher-info {
    flex: 1;
    overflow: hidden;
}

.teacher-name {
    font-weight: bold;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teachers-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.teachers-menu {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-light);
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 0;
    margin-bottom: 20px;
}

.teachers-menu-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background-color: transparent;
    color: var(--text-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    outline: none;
}

.teachers-menu-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.teachers-menu-btn:hover::after {
    width: 100%;
}

.teachers-menu-btn.active {
    background-color: var(--primary-color);
    color: white;
}

.teachers-menu-btn.active::after {
    width: 0;
}

.teachers-placeholder {
    flex: 1;
    overflow-y: auto;
}

.teacher-details {
    color: var(--accent-color-1);
    background-color: var(--background-white);
    padding: 30px;
}

.teacher-details-section {
    color: var(--accent-color-1);
    background-color: var(--background-light);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.teacher-profile-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background-color: var(--background-light);
    padding: 20px;
    border-radius: 8px;
}

.teacher-profile-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
}
.teacher-lessons-section{
    color: var(--accent-color-1);
}
.teacher-schedule-section{
    font-variant: var(--accent-color-1);
}
.teacher-profile-image img.teacher-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teacher-basic-info h2 {
    margin: 0 0 10px 0;
    color: #333;
}

.teacher-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.teacher-details-item {
    background-color: var(--background-white);
    padding: 15px;
    border-radius: 8px;
}

.teacher-details-item ul {
    list-style-type: none;
    padding: 0;
}

.teacher-details-item ul li {
    margin-bottom: 5px;
    padding: 5px;
    background-color: var(--background-light);
    border-radius: 4px;
}

/* Add Teacher Button Styles */
.add-teacher-button {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease; /* Smooth transition */
    cursor: pointer;
}

.add-teacher-button:hover {
    background-color: var(--secondary-color);
}
.teachers-list-header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: var(--background-light);
    border-bottom: 1px solid #e0e0e0;
}

/* .add-teacher-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
} */

.add-teacher-button:hover {
    background-color: var(--secondary-color);
    transform: scale(1.05);
}

.add-teacher-button i {
    font-size: 20px;
    margin-right: 10px;
}
.schedule-table {
    width: 100%;
    border-collapse: collapse;
}

.schedule-table th, 
.schedule-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

.schedule-table th {
    background-color: var(--background-light);
    color: var(--heading-color);
}

.lesson-cell {
    background-color: var(--background-light);
}

.lesson-title {
    font-weight: bold;
    margin-bottom: 5px;
}

.lesson-students {
    color: var(--text-muted);
    font-size: 0.9em;
}

.empty-cell {
    background-color: #f1f1f1;
    color: var(--text-muted);
}
.lesson.highlight {
    background-color: #e6f2ff;
    border: 1px solid #64b5f6;
    border-radius: 4px;
    padding: 5px;
    margin: 2px 0;
}
.highlighted {
    background-color: #FFC0CB !important; /* Light red */
    color: var(--accent-color-4);
    transition: 0.5s;
}
.highlighted:hover {
    background-color: #d48f9a !important; /* Light red */
}

.student-program-section {
    color: var(--accent-color-1);
    max-width: 100%;
    margin: 40px auto;
    padding: 20px;
    background-color: var(--background-light);
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: auto;
}

.weekly-schedule {
    min-width: 670px;
    width: 100%;
    border-collapse: collapse;
}

.weekly-schedule th, .weekly-schedule td {
    border: 1px solid #ddd;
    padding: 8px; /* Reduced padding to fit more columns */
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weekly-schedule th {
    background-color: #a51a1a;
}

.weekly-schedule td {
    background-color: var(--background-white);
}

.weekly-schedule th:first-child, .weekly-schedule td:first-child {
    text-align: left;
}
/* Schedule Modal Styles */
.schedule-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.schedule-modal .modal-content {
    background-color: var(--background-white);
    color: var(--accent-color-1);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 90%;
}

.schedule-modal h3 {
    margin-bottom: 20px;
    color: var(--heading-color);
}

.schedule-modal .modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.schedule-modal button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.schedule-modal .yes-button {
    background-color: var(--primary-color);
    color: white;
}

.schedule-modal .no-button {
    background-color: #6c757d;
    color: white;
}

.schedule-modal button:hover {
    opacity: 0.9;
}

/* Lesson Selection Modal Styles */
.lesson-selection-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
/* The names sit on --background-white, which is a dark navy in the dark theme,
   so the #333 this used to be was black on near-black. */
.student-list {
    color: var(--text-color);
}
.lesson-selection-modal .modal-content {
    background-color: var(--background-white);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 90%;
}
.modal-content h4 {
    color: var(--text-color);
}
.modal-content h3 {
    color: var(--text-color);
}
/* Same again for "Select Lesson" and "Select Teacher": this rule comes after
   .modal-content h3 and has the same weight, so the #333 won and the headings
   disappeared along with the names. */
.lesson-selection-modal h3 {
    margin-bottom: 20px;
    color: var(--heading-color);
}

.lesson-selection-modal .lesson-select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.lesson-selection-modal .teacher-select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.lesson-selection-modal .modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.lesson-selection-modal button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.lesson-selection-modal .save-button {
    background-color: var(--primary-color);
    color: white;
}

.lesson-selection-modal .cancel-button {
    background-color: #6c757d;
    color: white;
}

.lesson-selection-modal button:hover {
    background-color: var(--secondary-color);
}

/* Weekly Schedule Table Styles */
.weekly-schedule {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.weekly-schedule th, 
.weekly-schedule td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
}

.weekly-schedule th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #333;
}

.weekly-schedule td {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.weekly-schedule td:hover {
    background-color: var(--secondary-color);
    color: var(--text-color);
}
.student-lesson {
    background-color: rgba(73, 48, 27, 0.2); /* Your primary color with opacity */
    font-weight: bold;
    border: 2px solid #49301b; /* Your primary color */
}
.skip-class-modal {
    background: var(--background-white); /* Use background white from your palette */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    width: 400px; /* Fixed width */
    padding: 20px; /* Padding inside the modal */
}

/* Modal Title */
.skip-class-modal h2 {
    margin: 0 0 10px; /* Margin below the title */
    font-size: 24px; /* Font size for the title */
    color: var(--heading-color); /* Use primary color for the title */
}

/* Modal Message */
.skip-class-modal p {
    margin: 0 0 20px; /* Margin below the message */
    font-size: 16px; /* Font size for the message */
    color: var(--text-color); /* Use text color for the message text */
}
#cancel-skip {
    background-color: var(--secondary-color); /* Use secondary color for cancel */
    color: white; /* White text */
}

/* Confirm Button */
#confirm-skip {
    background-color: var(--primary-color); /* Use primary color for confirm */
    color: white; /* White text */
}

/* Button Hover Effects */
#cancel-skip:hover {
    background-color: var(--primary-color); /* Darker shade of secondary color on hover */
}

#confirm-skip:hover {
    background-color: var(--secondary-color); /* Darker shade of primary color on hover */
}
.inactive-class {
    background-color: rgba(0, 0, 0, 0.801)!important; /* Dark background for inactive classes */
    color: #ff0707; /* Change text color for better visibility */
    opacity: 0.7; /* Slightly transparent for a faded effect */
    transition: 0.5s;
}
.inactive-class:hover {
    background-color: rgb(0, 0, 0)!important; /* Dark background for inactive classes */
    color: #ff0707;
}

.tabs {
    display: flex;
    justify-content: space-around;
    /* A school can keep as many classes as it teaches in, so the strip wraps
       onto a second line instead of squeezing twelve tabs into one. */
    flex-wrap: wrap;
    gap: 6px;
    background-color: var(--primary-color); /* Use primary color for the tab background */
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px; /* Add some space below the tabs */
}

.tab {
    background-color: transparent; /* Transparent background for tabs */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for background and text color */
}

.tab:hover {
    background-color: var(--secondary-color); /* Change background on hover */
    color: var(--background-white); /* Keep text white on hover */
}

.tab:focus {
    outline: none; /* Remove default focus outline */
}

.tab.active {
    background-color: var(--secondary-color); /* Active tab background */
    color: var(--text-color); /* Active tab text color */
    font-weight: bold; /* Bold text for active tab */
}

/* Not a class — the way to add, rename and remove them. Dashed, so it reads as
   a control rather than as one more tab that can be selected. */
.tab-manage {
    border: 1px dashed rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    padding: 8px 14px;
}

/* ===== "Οι τάξεις μου" ===== */
.rooms-modal .modal-content {
    max-width: 460px;
    text-align: left;
}

.rooms-modal h3 { text-align: center; }

.rooms-list { margin-bottom: 14px; }

.room-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.room-row .room-name,
.rooms-add .new-room-name {
    flex: 1;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--background-light);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.95rem;
}

.room-row .room-name:focus,
.rooms-add .new-room-name:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* What the class is carrying, so a delete is not a surprise. */
.room-hours {
    min-width: 66px;
    text-align: right;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.rooms-modal .room-delete {
    padding: 6px 8px;
    background: none;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1;
}

.rooms-modal .room-delete:hover {
    background-color: color-mix(in srgb, var(--danger-color) 28%, transparent);
}

.rooms-add {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.rooms-modal button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

#save-schedule-btn {
    width: 50px; /* Width of the button */
    height: 50px; /* Height of the button */
    border: none; /* Remove border */
    background-color: var(--primary-color); /* Remove background */
    cursor: pointer; /* Change cursor to pointer */
    z-index: 10; /* Ensure it appears above other elements */
    transition: 0.5s;
}
#save-schedule-btn img {
    width: 100%; /* Make the image fill the button */
    height: 100%; /* Make the image fill the button */
}
#save-schedule-btn:hover {
    background-color: var(--secondary-color); /* Darker shade for hover effect */
    transform: scale(1.15); /* Slightly enlarge the button on hover */
}

#save-schedule-btn:focus {
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 5px var(--secondary-color); /* Add a subtle shadow for focus */
}
#send-the-program {
    width: 50px; /* Width of the button */
    height: 50px; /* Height of the button */
    border: none; /* Remove border */
    background-color: var(--primary-color); /* Remove background */
    cursor: pointer; /* Change cursor to pointer */
    z-index: 10; /* Ensure it appears above other elements */
    transition: 0.5s;
    margin-top: -25px;
    margin-right: 10px;
}
#send-the-program img {
    width: 100%; /* Make the image fill the button */
    height: 100%; /* Make the image fill the button */
}
#send-the-program:hover {
    background-color: #6f3c2b; /* Darker shade for hover effect */
    transform: scale(1.15); /* Slightly enlarge the button on hover */
}


#open-schedule-in-editor {
    display: inline-block; /* Make it inline-block for better spacing */
    background-color: var(--primary-color); /* Use secondary color for the button background */
    color: white; /* White text color */
    border: none; /* Remove default border */
    padding: 10px 20px; /* Add padding for better size */
    border-radius: 5px; /* Rounded corners */
    font-size: var(--base-font-size); /* Use base font size */
    font-family: var(--font-family); /* Use defined font family */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s, transform 0.2s; /* Smooth transition for background and transform */
    margin-top: 10px; /* Add some space above the button */
}

#open-schedule-in-editor:hover {
    background-color: var(--secondary-color); /* Darker shade for hover effect */
    color: white; /* White text color */
    transform: scale(1.05); /* Slightly enlarge the button on hover */
}

#open-schedule-in-editor:focus {
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 5px var(--secondary-color); /* Add a subtle shadow for focus */
}
#open-schedule-in-display {
    display: inline-block; /* Make it inline-block for better spacing */
    background-color: var(--primary-color); /* Use secondary color for the button background */
    color: white; /* White text color */
    border: none; /* Remove default border */
    padding: 10px 20px; /* Add padding for better size */
    border-radius: 5px; /* Rounded corners */
    font-size: var(--base-font-size); /* Use base font size */
    font-family: var(--font-family); /* Use defined font family */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s, transform 0.2s; /* Smooth transition for background and transform */
    margin-top: 10px; /* Add some space above the button */
}

#open-schedule-in-display:hover {
    color: white; /* White text color */
    background-color: var(--secondary-color); /* Darker shade for hover effect */
    transform: scale(1.05); /* Slightly enlarge the button on hover */
}

#open-schedule-in-display:focus {
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 5px var(--secondary-color); /* Add a subtle shadow for focus */
}

.mode-message {
    color: var(--accent-color-2); /* Change this to your desired color */
    margin-left: 10px;
}

.loading-dots {
    font-size: 30px;
    display: inline-block;
    animation: blink 1s infinite;
}

.delete-student-btn {
    background-color: #d9534f;
    color: white;
    border: none;
    cursor: pointer;
}

.delete-student-btn:hover {
    background-color: #c9302c;
}

.send-icon {
    width: 32px; /* Set the size */
    height: 32px;
    fill: var(--accent-color-2); /* Use CSS variable for color */
    transition: fill 0.3s ease, transform 0.2s ease; /* Smooth transitions */
  }
  
  .send-icon:hover {
    fill: var(--secondary-color); /* Change color on hover */
    transform: scale(1.1); /* Slightly enlarge on hover */
  }

  .sunbutt {
    background: none;
    border: none;
    width: 50px; /* Set the size */
    height: 50px;
    fill: var(--primary-color); /* Use CSS variable for color */
    transition: fill 0.3s ease, transform 0.2s ease; /* Smooth transitions */
  }
  
  .sunbutt:hover {
    fill: var(--secondary-color); /* Change color on hover */
    transform: scale(1.1); /* Slightly enlarge on hover */
  }
.add_lesson_but{
    background-color: var(--primary-color);
}
.add_lesson_but:hover{
    background-color: var(--secondary-color);
    transition: 0.3s;

}

.save-icon{
    width: 40px; /* Set the size */
    height: 40px;
    fill: var(--accent-color-2); /* Use CSS variable for color */
    transition: fill 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}
.save-icon:hover{
    fill: var(--primary-color); /* Use CSS variable for color */    fill: var(--secondary-color); /* Use CSS variable for color */
}
.add-lesson-modal{
    color: #000000;
}
@keyframes blink {
    0%, 20% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    80%, 100% {
        opacity: 1;
    }
}
@media screen and (max-width: 768px) {
    .weekly-schedule {
        overflow-x: auto; /* Enable horizontal scrolling */
    }

    .schedule-table {
        min-width: 600px; /* Ensure table is readable on small screens */
    }

    .schedule-table th, 
    .schedule-table td {
        padding: 8px; /* Reduce padding for smaller screens */
        font-size: 0.9rem; /* Slightly smaller font */
    }

    .lesson-cell {
        max-width: 150px; /* Limit cell width */
    }

    .lesson-title {
        font-size: 0.8rem;
        margin-bottom: 3px;
    }

    .lesson-students {
        font-size: 0.7rem;
    }
}

#tooltip {
    display: none;
    position: absolute;
    background: var(--background-white);
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    font-size: 14px;
    color: #333;
    border-radius: 4px;
    pointer-events: none; /* Ensure the tooltip doesn't interfere with mouse events */
    transition: opacity 0.2s ease-in-out; /* Smooth fade-in and fade-out */
    opacity: 0; /* Start hidden */
}
#tooltip.show {
    opacity: 1; /* Fully visible */
}


@media screen and (max-width: 480px) {
    .weekly-schedule {
        font-size: 0.8rem;
    }

    .schedule-table {
        min-width: 400px; /* Further reduction for very small screens */
    }

    .schedule-table th, 
    .schedule-table td {
        padding: 6px;
        font-size: 0.8rem;
    }

    .lesson-cell {
        max-width: 100px;
    }

    .lesson-title {
        font-size: 0.7rem;
    }

    .lesson-students {
        font-size: 0.6rem;
    }
}

/* Responsive table scrolling */
.weekly-schedule {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Ensure horizontal scrolling works well */
.schedule-table {
    width: 100%;
    min-width: 600px; /* Minimum width to trigger scrolling */
}
/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .teachers-container {
        flex-direction: column;
        height: auto;
    }

    .teachers-list-container {
        width: 100%;
        max-height: 300px;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }

    .teachers-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 15px;
    }

    .teachers-menu-btn {
        flex: 0 1 calc(33.333% - 10px);
        margin: 5px;
        padding: 10px;
        font-size: 0.9rem;
    }

    .teacher-profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .teacher-profile-image {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .teacher-details-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 480px) {
    .teachers-menu {
        flex-direction: column;
    }

    .teachers-menu-btn {
        width: 100%;
        flex: none;
        margin: 5px 0;
    }
}
/* Responsive Adjustments */
@media (max-width: 600px) {
    .email-modal,
    .template-creation-modal {
        width: 95%;
        margin: 0 10px;
    }

    .template-section {
        flex-direction: column;
        align-items: stretch;
    }

    .template-section label {
        margin-bottom: 5px;
    }

    .modal-actions {
        flex-direction: column;
    }

    .modal-actions button {
        width: 100%;
        margin-bottom: 10px;
    }
}
@media screen and (max-width: 768px) {
    .student-profile-image {
        width: 100px;
        height: 100px;
        margin-right: 10px;
    }

    .student-profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .student-basic-info {
        margin-top: 10px;
    }
}
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media screen and (max-width: 768px) {
    .students-dashboard {
        flex-direction: column;
        height: auto;
    }

    .students-container {
        flex-direction: column;
    }

    .students-list {
        width: 100%;
        max-height: 300px;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }

    .students-content {
        width: 100%;
    }

    .students-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 15px;
    }

    .students-menu-btn {
        flex: 0 1 calc(33.333% - 10px);
        margin: 5px;
        padding: 10px;
        font-size: 0.9rem;
    }

    .student-info-grid {
        grid-template-columns: 1fr;
    }

    .weekly-schedule {
        grid-template-columns: 1fr;
    }

    .lessons-table {
        font-size: 0.9rem;
    }

    .lessons-table th, 
    .lessons-table td {
        padding: 8px;
    }
}

@media screen and (max-width: 480px) {
    .students-menu {
        flex-direction: column;
    }

    .students-menu-btn {
        width: 100%;
        flex: none;
        margin: 5px 0;
    }

    .students-details {
        padding: 15px;
    }

    .student-details-section {
        padding: 15px;
    }

    .day-schedule {
        padding: 15px;
    }

    .day-schedule ul li {
        padding: 8px;
        font-size: 0.9rem;
    }
}
@media screen and (max-width: 768px) {
    .students-dashboard {
        flex-direction: column;
        height: auto;
    }

    .students-list {
        width: 100%;
        max-height: 300px;
    }

    .student-info-grid {
        grid-template-columns: 1fr;
    }
}
@media screen and (min-width: 769px) {
    #messages-list li {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    #messages-list li span {
        margin-right: 10px;
    }
    #inbox-messages-list li {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    #inbox-messages-list li span {
        margin-right: 10px;
    }

    .call-icon {
        margin-left: 10px;
    }
}
@media screen and (max-width: 768px) {
    .message-details-modal {
        width: 95%;
        max-width: 95%;
        margin: 0 10px;
    }

    .message-actions {
        flex-direction: column;
    }

    .message-actions button {
        width: 100%;
        margin-bottom: 10px;
    }
}
.call-confirmation-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.call-confirmation-modal {
    width: 95%;
    max-width: 350px;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .dashboard-container {
        flex-direction: column;
    }

    .filter-container {
        width: 100%;
        margin-bottom: 20px;
    }

    .messages-container {
        width: 100%;
    }

    .filter-container > div {
        display: flex;
        flex-direction: column;
    }

    .filter-container input[type="date"] {
        width: 100%;
        margin-bottom: 10px;
    }

    #apply-filters {
        width: 100%;
        margin-top: 10px;
    }

    #messages-list li {
        flex-direction: column;
        align-items: flex-start;
    }

    #messages-list li span {
        width: 100%;
        margin-bottom: 10px;
    }
    #inbox-messages-list li {
        flex-direction: column;
        align-items: flex-start;
    }

    #inbox-messages-list li span {
        width: 100%;
        margin-bottom: 10px;
    }

    .call-icon {
        align-self: flex-end;
    }
}
@media screen and (max-width: 480px) {
    .call-confirmation-modal {
        width: 90%;
        padding: 15px;
    }

    .call-confirmation-buttons {
        flex-direction: column;
    }

    .call-confirmation-buttons button {
        width: 100%;
        margin: 5px 0;
    }
}
@media screen and (max-width: 768px) {
    header {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    header h1 {
        margin-bottom: 10px;
    }

    .header-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }

    .header-buttons form {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .header-buttons .header-button span{
        display: none;
    }

    .header-buttons .header-button{
        margin: 5px;
        border-radius: 50px;
    }

    .logout-button {
        margin: 5px 0;
    }
}
@media screen and (max-width: 600px) {
    .registration-container {
        margin: 1rem; 
        padding: 1.5rem; 
    }
    .course-checkbox {
        width: 100%; 
    }
}
@media screen and (max-width: 1100px) {
    .content-wrapper {
        max-width: 689px;
        margin: 0 auto;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .content-wrapper img {
        max-width: 100%;
        height: auto;
        margin-bottom: 1rem;
    }

    .koimena {
        width: 100%;
        padding: 0 1rem;
    }

    .back1 {
        max-width: 300px; 
        width: 100%;
        height: auto;
    }
}
@media screen and (max-width: 768px) {
    
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--background-white);
        flex-direction: column;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }

    .nav-links li {
        margin: 1rem 0;
        text-align: center;
        width: 100%;
    }

    .menu-toggle {
        display: block;
    }

    .nav-links.active {
        display: flex;
    }
    .content-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .stats-container {
        flex-direction: column;
        align-items: center;
    }

    .stat-circle {
        width: 200px;
        height: 200px;
        margin-bottom: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ===== Student AI analysis (admin view) ===== */
.analysis-panel { overflow: hidden; }

/* Lesson strip: hovering one swaps the analysis below. */
.analysis-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.analysis-tab {
    padding: 7px 13px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--background-light);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, transform 0.18s ease;
}

.analysis-tab:hover {
    border-color: var(--accent-color-2);
    transform: translateY(-1px);
}

.analysis-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.analysis-tab:focus-visible {
    outline: 2px solid var(--accent-color-2);
    outline-offset: 2px;
}

/* Re-applied on every swap to replay the entry animation. */
.analysis-body.is-in {
    animation: analysisIn 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes analysisIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stagger the rows slightly so the panel feels alive rather than snapping. */
.analysis-body.is-in .metric-item {
    animation: analysisIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.analysis-body.is-in .metric-item:nth-child(1) { animation-delay: 0.02s; }
.analysis-body.is-in .metric-item:nth-child(2) { animation-delay: 0.05s; }
.analysis-body.is-in .metric-item:nth-child(3) { animation-delay: 0.08s; }
.analysis-body.is-in .metric-item:nth-child(4) { animation-delay: 0.11s; }
.analysis-body.is-in .metric-item:nth-child(5) { animation-delay: 0.14s; }

@media (prefers-reduced-motion: reduce) {
    .analysis-body.is-in,
    .analysis-body.is-in .metric-item { animation: none; }
    .analysis-tab { transition: none; }
}

.analysis-subhead {
    font-size: 0.86rem;
    color: var(--heading-color);
    margin: 14px 0 8px;
}

.analysis-detail {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 10px 0 0;
    line-height: 1.5;
}

.analysis-patterns,
.analysis-recommendations {
    list-style: none;
    padding: 0;
    margin: 0;
}

.analysis-patterns li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.analysis-patterns .pattern-category {
    font-weight: 600;
    font-size: 0.86rem;
}

.analysis-patterns .pattern-description {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.analysis-patterns .pattern-points {
    font-size: 0.75rem;
    color: #c62828;
    margin-top: 3px;
}

.analysis-recommendations li {
    position: relative;
    padding: 5px 0 5px 16px;
    font-size: 0.83rem;
    line-height: 1.45;
}

.analysis-recommendations li::before {
    content: '•';
    position: absolute;
    left: 2px;
    color: var(--accent-color-2);
}

.analysis-updated {
    margin-top: 12px;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: right;
}

/* ===== Teacher: Classes tab ===== */
.teacher-class-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.teacher-class-card {
    background: var(--background-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.teacher-class-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    cursor: pointer;
}

.teacher-class-head:hover { background: var(--background-light); }

.teacher-class-title { flex: 1; min-width: 0; }
.teacher-class-title strong { display: block; font-size: 1.02rem; }

.teacher-class-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.teacher-class-stats { display: flex; gap: 18px; text-align: center; }

.teacher-class-stat .value {
    display: block;
    font-weight: bold;
    font-size: 1.05rem;
    color: var(--heading-color);
}

.teacher-class-stat .label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.teacher-class-caret { transition: transform 0.2s ease; color: var(--text-muted); }
.teacher-class-card.open .teacher-class-caret { transform: rotate(180deg); }

/* Collapsed by default; opens when the header is tapped. */
.teacher-class-body { display: none; padding: 0 16px 16px; }
.teacher-class-card.open .teacher-class-body { display: block; }

.progress-bar.wide { width: 100%; margin-bottom: 16px; }

.teacher-class-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.teacher-class-columns h3 {
    font-size: 0.9rem;
    color: var(--heading-color);
    margin-bottom: 8px;
}

.teacher-milestone-list,
.teacher-class-students {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 260px;
    overflow-y: auto;
}

.teacher-milestone {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.teacher-milestone-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.86rem;
    margin-bottom: 5px;
}

.milestone-status {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    white-space: nowrap;
}

.teacher-milestone-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.teacher-class-student {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.86rem;
}

.student-mark { color: var(--text-muted); white-space: nowrap; }

/* ===== Teacher: Schedule tab ===== */
.teacher-schedule-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.schedule-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 4px 0 14px;
}

.teacher-slot {
    background: var(--background-light);
    vertical-align: middle;
    padding: 6px !important;
}

.teacher-slot-title { font-weight: 600; font-size: 0.84rem; }
.teacher-slot-meta { font-size: 0.72rem; color: var(--text-muted); }

@media (max-width: 768px) {
    .teacher-class-columns { grid-template-columns: 1fr; }
    .teacher-class-head { flex-wrap: wrap; gap: 10px; }
}

/* Friendly placeholder shown when a list has no items or fails to load. */
.empty-state {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted, #888);
    font-style: italic;
}

/* ===== Teacher: Performance tab ===== */

/* One colour per band, used by the ring, the pillar bars and the score chips
   so a teacher reads the same at every size. */
.teacher-performance-section {
    --band-excellent: #2e9e5b;
    --band-solid: #2f7fd1;
    --band-watch: #d98324;
    --band-risk: #cf4a4a;
    --band-unknown: var(--text-muted);
}

.excellent { --band: var(--band-excellent); }
.solid     { --band: var(--band-solid); }
.watch     { --band: var(--band-watch); }
.risk      { --band: var(--band-risk); }
.unknown   { --band: var(--band-unknown); }

.performance-header {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

/* The ring is the score itself: a conic sweep of --ring-angle over a track.
   Drawing it in CSS keeps it correct in every theme with no image to swap. */
.performance-ring {
    position: relative;
    width: 104px;
    height: 104px;
    flex: 0 0 auto;
    border-radius: 50%;
    background:
        conic-gradient(var(--band) var(--ring-angle, 0deg), var(--border-color) 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.performance-ring::after {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--background-white);
}

.performance-ring .ring-value {
    position: relative;
    z-index: 1;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--band);
}

.performance-headline h2 {
    margin: 0 0 4px;
    font-size: 1.3rem;
    color: var(--heading-color);
}

.performance-band {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: var(--band);
}

.performance-window-row {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.performance-window {
    padding: 4px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.performance-window:hover { background: var(--background-light); }

.performance-window.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* Narrow enough that all four pillars sit on one row when the panel allows
   it — four across reads as one scorecard, three-plus-one reads as an
   afterthought. */
.performance-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.performance-pillar {
    background: var(--background-light);
    border-radius: var(--border-radius);
    padding: 12px 14px;
}

.pillar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.pillar-label {
    font-size: 0.85rem;
    font-weight: 600;
}

.pillar-score {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--band);
}

.pillar-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--border-color);
    margin: 8px 0 7px;
    overflow: hidden;
}

.pillar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--band);
    transition: width 0.4s ease;
}

.pillar-detail {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.performance-notes {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
}

.performance-notes .note {
    position: relative;
    padding: 6px 0 6px 26px;
    font-size: 0.83rem;
    line-height: 1.45;
    border-bottom: 1px solid var(--border-color);
}

.performance-notes .note:last-child { border-bottom: none; }

.performance-notes .note::before {
    position: absolute;
    left: 4px;
    top: 6px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.8rem;
}

.performance-notes .note.good::before {
    content: '\f058';                 /* check-circle */
    color: var(--success-color);
}

.performance-notes .note.bad::before {
    content: '\f071';                 /* exclamation-triangle */
    color: var(--warning-color);
}

.performance-caveat {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 16px;
}

/* The class table can outgrow a narrow panel, so it scrolls on its own
   rather than pushing the dashboard sideways. */
.performance-table-wrap {
    overflow-x: auto;
    margin-top: 12px;
}

.performance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.performance-table th {
    text-align: left;
    padding: 8px 10px;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.performance-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.performance-table tbody tr:last-child td { border-bottom: none; }

/* A class nobody has touched in the period — the point of the whole table. */
.performance-table tr.is-quiet td {
    color: var(--danger-color);
}

.performance-table tr.is-quiet td:first-child {
    box-shadow: inset 3px 0 0 var(--danger-color);
}

.performance-overdue {
    list-style: none;
    padding: 0;
    margin: 0;
}

.performance-overdue li {
    padding: 7px 0;
    border-bottom: 1px solid var(--border-color);
}

.performance-overdue li:last-child { border-bottom: none; }

.performance-overdue .overdue-title {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
}

.performance-overdue .overdue-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .performance-header { gap: 16px; }
    .performance-ring { width: 84px; height: 84px; }
    .performance-ring .ring-value { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pillar-fill { transition: none; }
}
/* ===== Απουσίες on the student's lesson card =====
   Absences over held lessons, from the register. Three or more stands out. */
.lesson-attendance { color: var(--text-muted); }
.lesson-attendance.is-many { color: #c62828; font-weight: 600; }
[data-theme="dark"] .lesson-attendance.is-many { color: #f87171; }

/* ===== Attendance in the student's analysis =====
   The verdict the nightly analysis gives the student's lesson attendance. */
.att-verdict.is-ok        { color: #2e7d32; }
.att-verdict.is-watch     { color: #b26a00; }
.att-verdict.is-too_many  { color: #c62828; font-weight: 700; }
.att-verdict.is-too_early { color: var(--text-muted); }
[data-theme="dark"] .att-verdict.is-ok       { color: #4ade80; }
[data-theme="dark"] .att-verdict.is-watch    { color: #fbbf24; }
[data-theme="dark"] .att-verdict.is-too_many { color: #f87171; }

/* ===== Teacher scorecard: what came with the lesson register =====
   The AI's reading, the students who started weak, and the register itself.
   Status colours are fixed rather than themed: good/bad must read the same in
   every theme. */
.teacher-ai-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.teacher-ai-head .section-title { margin: 0; }

.ai-run { display: flex; align-items: center; gap: 10px; }
.ai-run-status { font-size: 0.8rem; color: var(--text-muted); }

.ai-run-now {
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: var(--primary-color);
    color: #fff;
    cursor: pointer;
    font-size: 0.88rem;
    transition: background-color var(--transition-speed, 0.3s) ease;
}
.ai-run-now:hover    { background: var(--secondary-color); }
.ai-run-now:disabled { opacity: 0.6; cursor: progress; }

.ai-verdict,
.progress-verdict {
    display: inline-block;
    margin: 14px 0 8px;
    padding: 5px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    color: #fff;
    background: var(--text-muted);
}
.ai-verdict.is-productive        { background: #2e7d32; }
.ai-verdict.is-mostly_productive { background: #558b2f; }
.ai-verdict.is-needs_attention   { background: #b26a00; }
.ai-verdict.is-not_productive    { background: #c62828; }
.progress-verdict.is-good        { background: #2e7d32; }
.progress-verdict.is-mixed       { background: #b26a00; }
.progress-verdict.is-bad         { background: #c62828; }

.ai-summary { margin: 4px 0 16px; font-size: 1rem; line-height: 1.55; color: var(--text-color); }

/* Four sections, always two by two: at three across, the fourth — the
   students, the one that matters most — was left on a row of its own. */
.ai-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width: 640px) {
    .ai-sections { grid-template-columns: 1fr; }
}

.ai-section {
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--background-light);
}
.ai-section h4 { margin: 0 0 6px; font-size: 0.9rem; color: var(--heading-color); }
.ai-section h4 i { margin-right: 6px; color: var(--accent-color-2); }
.ai-section p  { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-color); }

.ai-quality {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid currentColor;
    cursor: help;
}
.ai-quality.is-substantive { color: #2e7d32; }
.ai-quality.is-adequate    { color: #558b2f; }
.ai-quality.is-thin        { color: #c62828; }
.ai-quality.is-none        { color: var(--text-muted); }

.ai-lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.ai-list h4 { margin: 0 0 6px; font-size: 0.88rem; }
.ai-list ul { margin: 0; padding-left: 18px; font-size: 0.88rem; line-height: 1.5; }
.ai-list.is-good h4 { color: #2e7d32; }
.ai-list.is-bad h4  { color: #c62828; }
.ai-list.is-next h4 { color: var(--heading-color); }

[data-theme="dark"] .ai-quality.is-substantive,
[data-theme="dark"] .ai-list.is-good h4 { color: #4ade80; }
[data-theme="dark"] .ai-quality.is-adequate { color: #a3e635; }
[data-theme="dark"] .ai-quality.is-thin,
[data-theme="dark"] .ai-list.is-bad h4 { color: #f87171; }

.progress-line { margin: 4px 0 12px; font-size: 0.92rem; color: var(--text-color); }
.progress-line .is-up   { color: #2e7d32; }
.progress-line .is-down { color: #c62828; }
.progress-change        { font-weight: 700; text-align: right; }
.progress-change.is-up   { color: #2e7d32; }
.progress-change.is-down { color: #c62828; }
.progress-change.is-flat { color: var(--text-muted); }
[data-theme="dark"] .progress-line .is-up,
[data-theme="dark"] .progress-change.is-up { color: #4ade80; }
[data-theme="dark"] .progress-line .is-down,
[data-theme="dark"] .progress-change.is-down { color: #f87171; }

.register-notes,
.register-missing {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.register-notes li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    margin-bottom: 6px;
    border-left: 3px solid var(--accent-color-2);
    border-radius: 0 8px 8px 0;
    background: var(--background-light);
}
.register-note-when { font-size: 0.78rem; color: var(--text-muted); }
.register-note-text { font-size: 0.9rem; color: var(--text-color); white-space: pre-line; }

.register-missing li {
    padding: 5px 0;
    font-size: 0.88rem;
    color: var(--text-color);
    border-bottom: 1px dashed var(--border-color);
}

/* ===== The student as a whole, on the office's student card =====
   From the nightly analysis: the level and why, the staff's paragraph, and
   what the student reads about themselves. */
.overview-level {
    display: inline-block;
    margin: 4px 0 10px;
    padding: 5px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    color: #fff;
    background: var(--text-muted);
}
.overview-level.is-excelling { background: #2e7d32; }
.overview-level.is-on-track  { background: #558b2f; }
.overview-level.is-support   { background: #b26a00; }
.overview-level.is-risk      { background: #c62828; }

.overview-reasons { margin: 0 0 12px; padding-left: 20px; font-size: 0.9rem; color: var(--text-color); }
.overview-staff   { margin: 0 0 12px; font-size: 1rem; line-height: 1.55; color: var(--text-color); }

.overview-voice {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-left: 3px solid var(--accent-color-2);
    border-radius: 0 8px 8px 0;
    background: var(--background-light);
}
.overview-voice span { font-size: 0.78rem; color: var(--text-muted); }
.overview-voice p    { margin: 4px 0 0; font-size: 0.92rem; font-style: italic; color: var(--text-color); }

/* One or two sentences on how the class is going, above its figures. */
.analysis-summary {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--background-light);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-color);
}

/* Work past its deadline, in the overview table: said in red, like absences. */
.student-overview-card td.negative { color: #c62828; font-weight: 700; }
[data-theme="dark"] .student-overview-card td.negative { color: #f87171; }