/* ===== TEACHER HUB — Design System ===== */

/* ── Birthday Banner (shared with dashboard) ────────────────── */
.dash-birthday-banner { margin:0 0 20px; border-radius:16px; background:linear-gradient(135deg,#fef3c7 0%,#fde68a 30%,#fbbf24 60%,#f59e0b 100%); overflow:hidden; position:relative; box-shadow:0 4px 20px rgba(245,158,11,.25); }
.dash-birthday-inner { position:relative; padding:28px 24px; text-align:center; }
.dash-birthday-content { position:relative; z-index:2; }
.dash-birthday-cake { font-size:48px; margin-bottom:8px; animation:bdayCakeBounce 1.5s ease infinite; }
@keyframes bdayCakeBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.dash-birthday-content h2 { margin:0 0 8px; font-size:22px; font-weight:800; color:#78350f; }
.dash-birthday-content p { margin:0 auto; font-size:14px; line-height:1.6; color:#92400e; max-width:520px; }
.dash-birthday-close { position:absolute; top:12px; right:14px; background:none; border:none; font-size:22px; color:#92400e; cursor:pointer; opacity:.6; z-index:3; line-height:1; }
.dash-birthday-close:hover { opacity:1; }
.dash-birthday-confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.dash-birthday-confetti span { position:absolute; width:8px; height:8px; border-radius:2px; opacity:.7; animation:bdayConfettiFall 3s linear infinite; }
.dash-birthday-confetti span:nth-child(1){left:8%;background:#dc2626;animation-delay:0s;animation-duration:2.8s}
.dash-birthday-confetti span:nth-child(2){left:18%;background:#2563eb;animation-delay:.4s;animation-duration:3.2s}
.dash-birthday-confetti span:nth-child(3){left:32%;background:#16a34a;animation-delay:.8s;animation-duration:2.5s}
.dash-birthday-confetti span:nth-child(4){left:45%;background:#9333ea;animation-delay:1.2s;animation-duration:3.5s}
.dash-birthday-confetti span:nth-child(5){left:58%;background:#ea580c;animation-delay:.2s;animation-duration:2.9s}
.dash-birthday-confetti span:nth-child(6){left:68%;background:#0891b2;animation-delay:1s;animation-duration:3.1s}
.dash-birthday-confetti span:nth-child(7){left:78%;background:#dc2626;animation-delay:.6s;animation-duration:2.7s}
.dash-birthday-confetti span:nth-child(8){left:85%;background:#ca8a04;animation-delay:1.4s;animation-duration:3.3s}
.dash-birthday-confetti span:nth-child(9){left:92%;background:#16a34a;animation-delay:.3s;animation-duration:2.6s}
.dash-birthday-confetti span:nth-child(10){left:50%;background:#9333ea;animation-delay:.9s;animation-duration:3s}
@keyframes bdayConfettiFall { 0%{top:-10%;transform:rotate(0) scale(1);opacity:.8} 100%{top:110%;transform:rotate(720deg) scale(.5);opacity:0} }

/* ── Full-width container override (like admin pages) ────────── */
.main-content--teacher {
    max-width: none;
    padding: 0;
    margin: 0;
}

/* ── Layout ─────────────────────────────────────────────────── */
.teacher-hub-layout {
    display: flex;
    min-height: calc(100vh - 60px);
}

.teacher-sidebar {
    width: 220px;
    background: #fff;
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.teacher-sidebar::-webkit-scrollbar {
    display: none;
}

.teacher-main {
    flex: 1;
    min-width: 0;
    background: var(--gray-50);
    overflow-x: auto;
}

/* ── Sidebar Profile Card ───────────────────────────────────── */
.teacher-sidebar-profile {
    padding: 24px 20px;
    text-align: center;
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(180deg, var(--primary-50) 0%, #fff 100%);
}

.teacher-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.teacher-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary);
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.2);
}

.teacher-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: #fff;
    font-weight: 700;
    font-size: 28px;
}

.teacher-avatar--sm {
    width: 40px;
    height: 40px;
    font-size: 16px;
    border-width: 2px;
}

.teacher-profile-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 2px;
}

.teacher-profile-email {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 4px;
    word-break: break-all;
}

.teacher-profile-location {
    font-size: 12px;
    color: var(--gray-400);
    margin-bottom: 8px;
}

.teacher-profile-link {
    display: inline-block;
    font-size: 13px;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition);
}
.teacher-profile-link:hover {
    color: var(--primary-hover);
}

/* ── Sidebar Navigation ─────────────────────────────────────── */
.teacher-nav {
    flex: 1;
    padding: 8px 0;
}

.teacher-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    color: var(--gray-600);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
    border-left: 3px solid transparent;
}
.teacher-nav-item:hover {
    background: var(--gray-50);
    color: var(--navy);
}
.teacher-nav-item.active {
    background: var(--primary-50);
    color: var(--primary);
    font-weight: 600;
    border-left-color: var(--primary);
}

.teacher-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex-shrink: 0;
}

.teacher-sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--gray-200);
}
.teacher-sidebar-footer a {
    color: var(--gray-400);
    text-decoration: none;
    font-size: 13px;
    transition: color var(--transition);
}
.teacher-sidebar-footer a:hover { color: var(--navy); }

/* ── Page Content ───────────────────────────────────────────── */
.teacher-page {
    padding: 32px 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.teacher-page-header {
    margin-bottom: 28px;
}
.teacher-page-header h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 4px;
}
.teacher-page-header .text-muted {
    color: var(--gray-500);
    font-size: 14px;
}

/* ── Stats Grid ─────────────────────────────────────────────── */
.teacher-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
.teacher-stats-grid--compact {
    grid-template-columns: repeat(2, 1fr);
    max-width: 400px;
}

.teacher-stat-card {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
    border: 1px solid var(--gray-100);
    position: relative;
    overflow: hidden;
}
.teacher-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 40%, #b91c1c 70%, #991b1b 100%);
}
.teacher-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.teacher-stat-icon {
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}
.teacher-stat-icon--hours   { background: #dbeafe; color: #1d4ed8; }
.teacher-stat-icon--lessons { background: #d1fae5; color: #065f46; }
.teacher-stat-icon--students{ background: #fef3c7; color: #92400e; }
.teacher-stat-icon--coins   { background: #fee2e2; color: #991b1b; }

.teacher-stat-number {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.2;
}

.teacher-stat-label {
    font-size: 0.7rem;
    color: var(--gray-500);
    margin-top: 4px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.teacher-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.2;
}

/* ── Sections ───────────────────────────────────────────────── */
.teacher-section {
    margin-bottom: 32px;
}

.teacher-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.teacher-section-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
}
.teacher-section-link {
    font-size: 13px;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
.teacher-section-link:hover {
    color: var(--primary-hover);
}

/* ── Today's Schedule ───────────────────────────────────────── */
.teacher-schedule-list {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
}

.teacher-schedule-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--gray-100);
}
.teacher-schedule-item:last-child { border-bottom: none; }

.teacher-schedule-time {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    min-width: 80px;
}
.teacher-schedule-info {
    flex: 1;
}
.teacher-schedule-info strong {
    display: block;
    font-size: 14px;
    color: var(--navy);
}
.teacher-schedule-info span {
    font-size: 13px;
    color: var(--gray-700);
    font-weight: 500;
}

/* ── Announcements ──────────────────────────────────────────── */
.teacher-announcements-list {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
}

.teacher-announcement-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-100);
    transition: background var(--transition-fast);
}
.teacher-announcement-card:last-child { border-bottom: none; }
.teacher-announcement-card:hover { background: var(--gray-50); }

.teacher-announcement--new {
    border-left: 3px solid var(--primary);
}

.teacher-announcement-content h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.teacher-announcement-content p {
    font-size: 13px;
    color: var(--gray-500);
    line-height: 1.5;
}

.badge-new {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.teacher-announcement-date {
    font-size: 12px;
    color: var(--gray-400);
    white-space: nowrap;
    margin-left: 16px;
    flex-shrink: 0;
}

/* ── Lesson Cards ───────────────────────────────────────────── */
.teacher-lessons-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.teacher-lesson-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
    text-decoration: none;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}
.teacher-lesson-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.teacher-lesson-avatar {
    flex-shrink: 0;
}
.teacher-lesson-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.teacher-lesson-avatar-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gradient-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

.teacher-lesson-info {
    flex: 1;
    min-width: 0;
}
.teacher-lesson-student {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
}
.teacher-lesson-summary {
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-lesson-meta {
    text-align: right;
    flex-shrink: 0;
}
.teacher-lesson-level {
    font-size: 12px;
    color: var(--gray-600);
    font-weight: 600;
}
.teacher-lesson-date {
    font-size: 12px;
    color: var(--gray-400);
    margin-top: 2px;
}
.teacher-lesson-rating {
    margin-top: 4px;
}
.teacher-lesson-rating .star--filled { color: #f59e0b; }
.teacher-lesson-rating .star--empty { color: var(--gray-300); }

/* ── Feedback Cards ─────────────────────────────────────────── */
.teacher-feedback-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.teacher-feedback-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
}

.teacher-feedback-student {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 4px;
}

.teacher-feedback-content {
    font-size: 14px;
    color: var(--success);
    line-height: 1.5;
    margin-bottom: 6px;
}

.teacher-feedback-rating .star--filled { color: #f59e0b; font-size: 16px; }
.teacher-feedback-rating .star--empty { color: var(--gray-300); font-size: 16px; }

/* ── Quick Actions Grid ─────────────────────────────────────── */
.teacher-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.teacher-action-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 20px 16px;
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
    text-decoration: none;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition);
}
.teacher-action-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-200);
}

.teacher-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--primary-50);
    color: var(--primary);
    margin: 0 auto 10px;
}
.teacher-action-card span {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

/* ── Table ──────────────────────────────────────────────────── */
.teacher-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    align-items: center;
}
.teacher-filters .form-input {
    flex: 1;
    max-width: 400px;
    padding: 8px 14px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 14px;
    transition: border-color var(--transition);
}
.teacher-filters .form-input:focus {
    outline: none;
    border-color: var(--primary);
}

.teacher-table-wrap {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
    overflow: auto;
}

.teacher-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.teacher-table th {
    text-align: left;
    padding: 12px 16px;
    background: var(--gray-50);
    color: var(--gray-600);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--gray-200);
}
.teacher-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-800);
}
.teacher-table tr:last-child td { border-bottom: none; }
.teacher-table tr:hover td { background: var(--primary-50); }

.teacher-table-student {
    font-weight: 600;
    color: var(--navy);
}

.badge-level {
    display: inline-block;
    background: var(--info-light);
    color: var(--info);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--radius-full);
}

.teacher-stars-sm { font-size: 13px; }
.teacher-stars-sm .star--filled { color: #f59e0b; }
.teacher-stars-sm .star--empty { color: var(--gray-300); }

/* ── Badges ─────────────────────────────────────────────────── */
.teacher-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.badge-success { background: var(--success-light); color: #065f46; }
.badge-warning { background: var(--warning-light); color: #92400e; }
.badge-danger { background: var(--error-light); color: #991b1b; }
.badge-default { background: var(--gray-100); color: var(--gray-600); }

/* ── Pagination ─────────────────────────────────────────────── */
.teacher-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 16px 0;
}
.teacher-pagination-info {
    font-size: 13px;
    color: var(--gray-500);
}

/* ── Students Grid ──────────────────────────────────────────── */
.teacher-students-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.teacher-student-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}
.teacher-student-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.teacher-student-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.teacher-student-card-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0;
}

.teacher-student-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.teacher-student-card-stats {
    display: flex;
    gap: 4px;
    border-top: 1px solid var(--gray-100);
    padding-top: 12px;
}

.teacher-student-stat {
    flex: 1;
    text-align: center;
}
.teacher-student-stat-val {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
}
.teacher-student-stat-label {
    font-size: 11px;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.teacher-student-card-actions {
    margin-top: 12px;
    text-align: right;
}

/* ── Empty State ────────────────────────────────────────────── */
.teacher-empty {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-100);
}
.teacher-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    background: var(--primary-50);
    color: var(--primary);
    margin-bottom: 16px;
}
.teacher-empty h3 {
    color: var(--navy);
    margin-bottom: 8px;
}
.teacher-empty p {
    color: var(--gray-500);
    font-size: 14px;
}

/* ── Star rating shared ────────────────────────────────────── */
.star--filled { color: #f59e0b; }
.star--empty { color: var(--gray-300); }

/* ── Helper classes ─────────────────────────────────────────── */
.text-sm { font-size: 13px; }

/* ===== RESPONSIVE ===== */

@media (max-width: 1024px) {
    .teacher-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .teacher-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* Sidebar mobile styles handled by slide-in toggle section below */

    .teacher-page {
        padding: 20px 16px;
    }

    .teacher-page-header h1 {
        font-size: 20px;
    }

    .teacher-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .teacher-stat-card { padding: 16px 12px; }
    .teacher-stat-number { font-size: 24px; }
    .teacher-stat-icon { width: 36px; height: 36px; }

    .teacher-lesson-card {
        flex-wrap: wrap;
    }
    .teacher-lesson-summary {
        white-space: normal;
    }
    .teacher-lesson-meta {
        text-align: left;
        width: 100%;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--gray-100);
    }

    .teacher-announcement-card {
        flex-direction: column;
    }
    .teacher-announcement-date {
        margin-left: 0;
        margin-top: 8px;
    }

    .teacher-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .teacher-table {
        font-size: 13px;
    }
    .teacher-table th,
    .teacher-table td {
        padding: 10px 12px;
    }
}

@media (max-width: 480px) {
    .teacher-stats-grid--compact {
        grid-template-columns: 1fr;
    }
    .teacher-actions-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════
   STUDENT DETAIL PAGE
   ═══════════════════════════════════════════════════ */

/* Header */
.sd-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--gray-500);
    text-decoration: none;
    margin-bottom: 16px;
    font-weight: 500;
}
.sd-back:hover { color: var(--navy); }

.sd-header {
    margin-bottom: 28px;
}

.sd-profile {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
}

.sd-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--navy);
}
.sd-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--navy), #2d5986);
    color: #fff;
    font-size: 26px;
    font-weight: 700;
}

.sd-info h1 {
    font-size: 20px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 2px;
}
.sd-email {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 8px;
}
.sd-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sd-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: right;
}
.sd-meta-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 13px;
    color: var(--navy);
}
.sd-meta-label {
    font-size: 11px;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Courses */
.sd-courses {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sd-course-item {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
}

.sd-course-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.sd-course-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
}

.sd-course-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.sd-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.sd-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #dc2626);
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}
.sd-progress-label {
    font-size: 12px;
    color: var(--gray-500);
    white-space: nowrap;
}
.sd-course-enrolled {
    font-size: 12px;
    color: var(--gray-400);
}

/* Lessons */
.sd-lessons {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
}

.sd-lesson-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--gray-100);
}
.sd-lesson-item:last-child { border-bottom: none; }

.sd-lesson-date {
    min-width: 90px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}
.sd-lesson-time {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--gray-400);
}
.sd-lesson-body {
    flex: 1;
    min-width: 0;
}
.sd-lesson-summary {
    font-size: 13px;
    color: var(--gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-lesson-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.sd-lesson-duration {
    font-size: 12px;
    color: var(--gray-400);
}

/* Activity timeline */
.sd-activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
}

.sd-activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--gray-100);
}
.sd-activity-item:last-child { border-bottom: none; }

.sd-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sd-dot--green  { background: #22c55e; }
.sd-dot--blue   { background: #3b82f6; }
.sd-dot--gray   { background: var(--gray-300); }

.sd-activity-body {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}
.sd-activity-type {
    font-weight: 600;
    color: var(--navy);
}
.sd-activity-score {
    font-size: 12px;
    color: var(--gray-500);
}

/* Notes */
.sd-note-form {
    margin-bottom: 20px;
}
.sd-note-textarea {
    width: 100%;
    resize: vertical;
    font-size: 14px;
}
.sd-notes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sd-note-item {
    background: #fffbeb;
    border: 1px solid #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: var(--radius);
    padding: 14px 16px;
}
.sd-note-date {
    font-size: 11px;
    color: var(--gray-400);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.sd-note-text {
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.6;
}

/* Badge sm override */
.badge-sm {
    font-size: 10px !important;
    padding: 2px 7px !important;
}

/* ═══════════════════════════════════════════════════
   SCHEDULE PAGE
   ═══════════════════════════════════════════════════ */

.schedule-page .teacher-page-header {
    margin-bottom: 20px;
}

.schedule-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.schedule-week-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.schedule-week-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    min-width: 180px;
    text-align: center;
}

.schedule-week-stats {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 20px;
}
.schedule-stat-dot {
    display: flex;
    align-items: center;
    gap: 5px;
}
.schedule-stat-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.schedule-stat-dot--confirmed::before { background: #3b82f6; }
.schedule-stat-dot--completed::before { background: #22c55e; }

/* 7-column grid */
.schedule-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.schedule-day {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    min-height: 180px;
    overflow: hidden;
    transition: box-shadow var(--transition);
}
.schedule-day--today {
    border-color: var(--navy);
    box-shadow: 0 0 0 2px rgba(29,53,87,0.12);
}
.schedule-day:hover { box-shadow: var(--shadow); }

.schedule-day-header {
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--gray-100);
    text-align: center;
    background: var(--gray-50);
}
.schedule-day-name {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--gray-400);
}
.schedule-day-num {
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.2;
}
.schedule-day-num--today {
    background: var(--navy);
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    margin: 2px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.schedule-day-body {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.schedule-empty {
    text-align: center;
    color: var(--gray-300);
    font-size: 18px;
    padding: 24px 0;
}

.schedule-booking {
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    border-left: 3px solid;
    cursor: default;
}
.schedule-booking--confirmed {
    background: #eff6ff;
    border-left-color: #3b82f6;
}
.schedule-booking--completed {
    background: #f0fdf4;
    border-left-color: #22c55e;
}
.schedule-booking--rescheduled {
    background: #fffbeb;
    border-left-color: #f59e0b;
}
.schedule-booking--cancelled {
    background: var(--gray-100);
    border-left-color: var(--gray-300);
    opacity: 0.7;
}

.schedule-booking-time {
    font-weight: 700;
    color: var(--navy);
    font-size: 13px;
}
.schedule-booking-ampm {
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-700);
    margin-left: 2px;
}
.schedule-booking-student {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-700);
    margin: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
}
.schedule-tz-warn {
    display: inline-flex;
    cursor: help;
    flex-shrink: 0;
    opacity: .85;
}
.schedule-tz-warn:hover { opacity: 1; }
.schedule-booking-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}
.schedule-booking-dur {
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-600);
}
.schedule-status-pill {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: var(--radius-full);
    letter-spacing: .4px;
}
.schedule-status-pill--confirmed  { background: #dbeafe; color: #1d4ed8; }
.schedule-status-pill--completed  { background: #dcfce7; color: #166534; }
.schedule-status-pill--rescheduled{ background: #fef3c7; color: #92400e; }
.schedule-status-pill--cancelled  { background: var(--gray-200); color: var(--gray-500); }

/* Legend */
.schedule-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--gray-700);
    font-weight: 500;
}
.schedule-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.schedule-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.schedule-dot--confirmed  { background: #3b82f6; }
.schedule-dot--completed  { background: #22c55e; }
.schedule-dot--rescheduled{ background: #f59e0b; }
.schedule-dot--cancelled  { background: var(--gray-300); }

/* ── View Toggle ── */
.schedule-view-toggle {
    display: flex;
    gap: 3px;
    background: var(--gray-100, #f3f4f6);
    border-radius: 10px;
    padding: 3px;
}
.schedule-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--gray-500, #6b7280);
    transition: all .15s;
}
.schedule-view-btn.active {
    background: #fff;
    color: var(--navy, #1D3557);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    font-weight: 600;
}
.schedule-view-btn:hover:not(.active) { color: var(--navy, #1D3557); }
.schedule-nav-row { margin-bottom: 4px; }
.schedule-today-btn {
    font-size: 13px;
    font-weight: 600;
    color: #dc2626;
    text-decoration: none;
    margin-left: 8px;
}
.schedule-today-btn:hover { text-decoration: underline; }

/* ── Month Grid ── */
.schedule-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--gray-200, #e5e7eb);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}
.schedule-month-header {
    background: var(--gray-50, #f9fafb);
    padding: 10px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--gray-400, #9ca3af);
}
.schedule-month-cell {
    background: #fff;
    min-height: 90px;
    padding: 6px;
    transition: background .15s;
}
.schedule-month-cell:hover { background: var(--gray-50, #f9fafb); }
.schedule-month-cell--today { background: #eff6ff; }
.schedule-month-cell--outside { background: var(--gray-50, #f9fafb); opacity: .45; }
.schedule-month-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy, #1D3557);
    margin-bottom: 4px;
}
.schedule-month-date--today {
    background: var(--navy, #1D3557);
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.schedule-month-dots { display: flex; flex-direction: column; gap: 2px; }
.schedule-month-dot {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
    transition: filter .15s;
    overflow: hidden;
}
.schedule-month-dot:hover { filter: brightness(.92); }
.schedule-month-dot--confirmed   { background: #dbeafe; color: #1d4ed8; }
.schedule-month-dot--completed   { background: #dcfce7; color: #166534; }
.schedule-month-dot--rescheduled { background: #fef3c7; color: #92400e; }
.schedule-month-dot--cancelled   { background: var(--gray-100, #f3f4f6); color: var(--gray-400, #9ca3af); text-decoration: line-through; }
.schedule-month-dot-time { font-weight: 700; white-space: nowrap; }
.schedule-month-dot-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schedule-month-more { font-size: 11px; color: var(--gray-400, #9ca3af); padding: 1px 6px; }

/* ── Booking Detail Modal ── */
.schedule-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.schedule-modal-overlay.active { display: flex; }
.schedule-modal {
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 25px 80px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.1);
    overflow: hidden;
    animation: scheduleModalIn .25s cubic-bezier(.32,.72,0,1);
}
@keyframes scheduleModalIn {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.schedule-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
}
.schedule-modal-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--navy, #1D3557);
}
.schedule-modal-close {
    border: none;
    background: none;
    font-size: 24px;
    color: var(--gray-400, #9ca3af);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.schedule-modal-close:hover { color: var(--navy, #1D3557); }
.schedule-modal-body { padding: 28px; }
.schedule-modal-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 28px;
    border-top: 1px solid var(--gray-100, #f3f4f6);
    background: var(--gray-50, #f9fafb);
}
.schedule-modal-footer #modalStartLesson {
    width: 100%;
}
.schedule-modal-footer .schedule-modal-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.schedule-modal-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
}
}
.schedule-modal-student {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--gray-50, #f8fafc);
    border-radius: 12px;
    border: 1px solid var(--gray-100, #f1f5f9);
}
.schedule-modal-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid var(--gray-200, #e5e7eb);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.schedule-modal-name { font-size: 18px; font-weight: 700; color: var(--navy, #1D3557); }
.schedule-modal-level {
    font-size: 12px;
    color: #fff;
    background: var(--primary, #E63946);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-block;
    margin-top: 4px;
}
.schedule-modal-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1px solid var(--gray-100, #f1f5f9);
    border-radius: 12px;
    padding: 4px 16px;
}
.schedule-modal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-50, #f8fafc);
}
.schedule-modal-row:last-child { border-bottom: none; }
.schedule-modal-label { font-size: 13px; color: var(--gray-400, #9ca3af); font-weight: 500; }
.schedule-modal-value { font-size: 14px; font-weight: 600; color: var(--navy, #1D3557); }
.btn-danger {
    background: #dc2626;
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .15s;
}
.btn-danger:hover { background: #b91c1c; }

/* Responsive overrides */
@media (max-width: 900px) {
    .schedule-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .schedule-month-cell { min-height: 70px; }
}
@media (max-width: 640px) {
    .schedule-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sd-profile {
        grid-template-columns: auto 1fr;
    }
    .sd-meta {
        grid-column: 1 / -1;
        text-align: left;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }
    .sd-meta-item { text-align: left; }
    .schedule-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .schedule-month-cell { min-height: 55px; padding: 4px; }
    .schedule-month-dot-name { display: none; }
    .schedule-month-date { font-size: 11px; }
    .schedule-month-dot { padding: 2px 4px; font-size: 10px; }
    .schedule-modal { max-width: 100%; border-radius: 12px; }
}
@media (max-width: 480px) {
    .schedule-grid { grid-template-columns: 1fr !important; gap: 4px; }
    .schedule-day-header { font-size: 12px; }
    .schedule-booking { padding: 8px; font-size: 12px; min-height: 44px; }
    .schedule-title-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .schedule-view-btn { min-height: 44px; padding: 10px 14px; }
}

/* ═══════════════════════════════════════════════════
   RED GRADIENT DESIGN SYSTEM
   ═══════════════════════════════════════════════════ */

/* ── Design tokens (teacher-scoped) ─────────────────────────── */
.teacher-hub-layout {
    --tc-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 40%, #b91c1c 70%, #991b1b 100%);
    --tc-shadow-red: 0 8px 24px rgba(220,38,38,0.25);
    --tc-card-radius: 24px;
    --tc-btn-radius: 16px;
    --tc-border-red: rgba(220,38,38,0.12);
}

/* ── Gradient text ──────────────────────────────────────────── */
.gradient-text {
    background: var(--tc-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Dashboard hero ─────────────────────────────────────────── */
.teacher-dashboard-hero {
    background: var(--tc-gradient);
    border-radius: 20px;
    padding: 32px 36px;
    margin-bottom: 32px;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.teacher-dashboard-hero::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}
.teacher-hero-text h1 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 4px;
    color: #fff;
}
.teacher-hero-text p {
    opacity: 0.85;
    font-size: 14px;
    color: #fff;
    margin: 0;
}
.teacher-hero-schedule {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 16px;
    padding: 16px 24px;
    text-align: center;
    min-width: 140px;
    flex-shrink: 0;
    color: #fff;
}
.teacher-hero-schedule-count {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}
.teacher-hero-schedule-label {
    font-size: 13px;
    opacity: 0.85;
    margin-top: 4px;
}

/* ── Salary hero ─────────────────────────────────────────────── */
.teacher-salary-hero {
    background: var(--tc-gradient);
    border-radius: 20px;
    padding: 32px 36px;
    margin-bottom: 32px;
    color: #fff;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.teacher-salary-hero::before {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}
.teacher-salary-hero-title {
    flex: 1;
    min-width: 180px;
}
.teacher-salary-hero-title h1 {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}
.teacher-salary-hero-title p {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    margin: 0;
}
.teacher-salary-hero-glass {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 16px;
    padding: 20px 28px;
    text-align: center;
    min-width: 160px;
    color: #fff;
}
.teacher-salary-hero-glass .amount {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}
.teacher-salary-hero-glass .label {
    font-size: 13px;
    opacity: 0.8;
    margin-top: 6px;
}
.salary-glass-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    color: #fff;
}
.salary-glass-icon--hours {
    background: rgba(255,255,255,0.18);
}

/* ── Student last-seen pill ─────────────────────────────────── */
.teacher-student-last-seen {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 3px 10px;
    border-radius: 999px;
    margin-top: 8px;
}

/* ── Hero responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .teacher-dashboard-hero,
    .teacher-salary-hero {
        padding: 24px 20px;
        flex-direction: column;
        align-items: flex-start;
    }
    .teacher-hero-schedule,
    .teacher-salary-hero-glass {
        width: 100%;
    }
    .teacher-hero-text h1 {
        font-size: 20px;
    }
}

/* ═══════════════════════════════════════════════════
   NEW TEACHER ELEMENTS (tch-* prefix)
   ═══════════════════════════════════════════════════ */

/* ── Today's Schedule — Empty Day State ──────────── */
.tch-empty-day {
    background: #fff;
    border: 2px dashed var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 32px 20px;
    text-align: center;
}
.tch-empty-day-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--gray-100);
    color: var(--gray-400);
    margin-bottom: 12px;
}
.tch-empty-day p {
    font-size: 14px;
    color: var(--gray-500);
    margin-bottom: 8px;
}
.tch-empty-day a {
    font-size: 13px;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
.tch-empty-day a:hover {
    color: var(--primary-hover);
}

/* ── Schedule Action Buttons ─────────────────────── */
.tch-schedule-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Assessment Stat Icon ────────────────────────── */
.tch-stat-icon--assess {
    background: #fce7f3;
    color: #be185d;
}

/* ── Student Search Bar ──────────────────────────── */
.tch-search-bar {
    margin-bottom: 20px;
}
.tch-search-bar .form-input {
    width: 100%;
    max-width: 400px;
    padding: 10px 14px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 14px;
    transition: border-color var(--transition);
}
.tch-search-bar .form-input:focus {
    outline: none;
    border-color: var(--primary);
}

/* ── Salary Summary Cards ────────────────────────── */
.tch-salary-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.tch-salary-stat {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
}
.tch-salary-stat-label {
    font-size: 12px;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 6px;
}
.tch-salary-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--navy);
}
.tch-salary-currency {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-400);
}
.tch-salary-stat--paid .tch-salary-stat-value { color: #059669; }
.tch-salary-stat--pending .tch-salary-stat-value { color: #d97706; }

@media (max-width: 768px) {
    .tch-salary-summary {
        grid-template-columns: 1fr;
    }
}

/* ── Dashboard Payment Summary ─────────────────────────────── */
.tch-payment-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}
.tch-payment-card {
    border-radius: 10px;
    padding: .85rem 1.25rem;
    flex: 1;
    min-width: 160px;
}
.tch-payment-card--earned {
    background: #f0fdf4;
    border: 1px solid #86efac;
}
.tch-payment-card--last {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.tch-payment-value {
    font-size: 1.25rem;
    font-weight: 700;
}
.tch-payment-card--earned .tch-payment-value { color: #14532d; }
.tch-payment-card--last .tch-payment-value { color: #1e293b; }
.tch-payment-currency {
    font-size: .75rem;
    font-weight: 600;
}
.tch-payment-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-top: .15rem;
}
.tch-payment-card--earned .tch-payment-label { color: #166534; }
.tch-payment-card--last .tch-payment-label { color: #64748b; }

/* ── Announcement Modal ────────────────────────────────────── */
.ann-clickable { cursor: pointer; }
.ann-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.ann-modal-content {
    background: #fff;
    border-radius: 16px;
    max-width: 560px;
    width: 100%;
    padding: 28px 28px 24px;
    position: relative;
    max-height: 88vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.ann-modal-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 24px;
    color: var(--gray-400);
    line-height: 1;
    padding: 0;
}
.ann-modal-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.ann-modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 5px;
    padding-right: 24px;
    line-height: 1.4;
}
.ann-modal-date {
    font-size: 12.5px;
    color: var(--gray-400);
    margin-bottom: 20px;
}
.ann-modal-body {
    font-size: 14.5px;
    color: var(--gray-700);
    line-height: 1.75;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* Announcement bodies are often a full HTML email with fixed-width tables
   (e.g. <table width="680">). Force that content to reflow to the modal
   width instead of forcing a sideways scroll. */
.ann-modal-body table {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
}
.ann-modal-body td,
.ann-modal-body th { word-break: break-word; }
.ann-modal-body img,
.ann-modal-body video,
.ann-modal-body iframe {
    max-width: 100% !important;
    height: auto;
}
.ann-modal-cta-wrap {
    margin-top: 22px;
    display: none;
}
.ann-modal-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--primary);
    color: #fff;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.tch-empty-text { padding: 16px 0; }

/* ── Level Color Coding ─────────────────────────────────────── */
.badge-level--beginner { background: #fef2f2; color: #991b1b; }
.badge-level--a1       { background: #fef2f2; color: #dc2626; }
.badge-level--a2       { background: #fff7ed; color: #c2410c; }
.badge-level--b1       { background: #fefce8; color: #a16207; }
.badge-level--b2       { background: #f0fdf4; color: #15803d; }
.badge-level--c1       { background: #eff6ff; color: #1d4ed8; }
.badge-level--c2       { background: #f5f3ff; color: #6d28d9; }
.badge-level--native   { background: #f0fdfa; color: #0f766e; }
.badge-level--default  { background: #f3f4f6; color: #4b5563; }

/* ── Lesson ID ──────────────────────────────────────────────── */
.tch-lesson-id {
    font-family: monospace;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

/* ── Announcement Meta & Like ───────────────────────────────── */
.ann-subtitle {
    color: #6b7280;
    font-size: 13px;
    margin: 2px 0 6px;
}
.ann-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}
.ann-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #9ca3af;
}
.ann-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #9ca3af;
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-full);
    padding: 3px 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.ann-like-btn:hover {
    background: #f3f4f6;
    color: #6b7280;
}
.ann-like-btn--active {
    color: var(--primary);
    border-color: var(--primary);
    background: #fef2f2;
}
.ann-like-btn--active:hover {
    background: #fee2e2;
}
.ann-like-btn--modal {
    font-size: 13px;
    padding: 5px 14px;
}
.ann-modal-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}
.ann-modal-view-count {
    font-size: 12px;
    color: #9ca3af;
}

/* ── Teacher Level Badge (hero) ─────────────────────────────── */
.tch-teacher-level {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255,255,255,0.2);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-top: 6px;
}

/* ── Student Cards (redesigned) ───────────────────────────── */
.tch-scard {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.15s;
}
.tch-scard:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.tch-scard--inactive { opacity: 0.65; }
.tch-scard-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tch-scard-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
}
.tch-scard-info {
    flex: 1;
    min-width: 0;
}
.tch-scard-info h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tch-scard-id {
    font-size: 12px;
    color: #9ca3af;
}
.tch-scard-status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    flex-shrink: 0;
}
.tch-scard-status--active {
    background: #d1fae5;
    color: #065f46;
}
.tch-scard-status--away {
    background: #f3f4f6;
    color: #9ca3af;
}
.tch-scard-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
}
.tch-scard-stats {
    display: flex;
    gap: 0;
    border-top: 1px solid #f3f4f6;
    padding-top: 10px;
}
.tch-scard-stat {
    flex: 1;
    text-align: center;
}
.tch-scard-stat-val {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
}
.tch-scard-stat-lbl {
    display: block;
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.tch-scard-link {
    display: block;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    padding: 8px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    transition: all 0.15s;
}
.tch-scard-link:hover {
    background: var(--primary);
    color: #fff;
}

/* ── Earnings / Payments utility classes ───────────────────── */
.tch-col-right { text-align: right; }
.tch-text-red { color: #dc2626; }
.tch-text-bold { font-weight: 600; }
.tch-nowrap { white-space: nowrap; }
.tch-pay-date { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.tch-year-selector { margin-bottom: 1.5rem; }
.tch-year-select { max-width: 140px; }

/* ── Teacher Forms Grid ────────────────────────────────────── */
.tch-forms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.tch-form-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tch-form-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.tch-form-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--primary-50, #fef2f2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
}
.tch-form-card-body {
    flex: 1;
    min-width: 0;
}
.tch-form-card-body h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 2px;
}
.tch-form-card-body p {
    font-size: 13px;
    color: var(--gray-500);
    margin: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.tch-form-card-arrow {
    color: var(--gray-400);
    font-size: 18px;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.tch-form-card:hover .tch-form-card-arrow {
    transform: translateX(3px);
    color: var(--primary);
}
.tch-form-auto-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-top: 4px;
}

/* ── Student Detail — Learning Profile cards ───────────────── */
.sd-section-title-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sd-lp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.sd-lp-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.sd-lp-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sd-lp-icon--blue   { background: #eff6ff; }
.sd-lp-icon--purple { background: #f5f3ff; }
.sd-lp-icon--amber  { background: #fffbeb; }
.sd-lp-icon--green  { background: #ecfdf5; }
.sd-lp-label {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
}
.sd-lp-value {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}
.sd-lp-sub {
    font-size: 12px;
    margin-top: 4px;
}
.sd-lp-sub--blue   { color: #3b82f6; }
.sd-lp-sub--purple { color: #8b5cf6; }
.sd-lp-sub--amber  { color: #f59e0b; }
.sd-lp-sub--green  { color: #10b981; }

/* ── Student Detail — Recently Mastered ────────────────────── */
.sd-mastered-section { margin-top: 8px; }
.sd-mastered-title {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
}
.sd-mastered-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sd-mastered-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #f3f4f6;
}
.sd-mastered-word {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
}
.sd-mastered-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
}
.sd-mastered-badge--vocab   { background: #dbeafe; color: #1e40af; }
.sd-mastered-badge--grammar { background: #ede9fe; color: #5b21b6; }
.sd-mastered-date {
    margin-left: auto;
    font-size: 12px;
    color: #9ca3af;
}

/* ── Student Detail — utility classes (moved from inline) ──── */
.sd-empty-pad { padding: 32px; }
.sd-inline-icon { display: inline-flex; align-items: center; gap: 4px; }
.sd-save-note-btn { margin-top: 8px; }
.sd-notes-empty { padding: 12px 0; font-size: 14px; }

/* ── Student Detail: Quick Action Buttons ─────────────────── */
.sd-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
    border: 1.5px solid;
}
.sd-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
    text-decoration: none;
}
.sd-action-btn--warn {
    color: #dc2626;
    border-color: #fca5a5;
    background: #fef2f2;
}
.sd-action-btn--warn:hover { color: #b91c1c; background: #fee2e2; }
.sd-action-btn--handoff {
    color: #d97706;
    border-color: #fcd34d;
    background: #fffbeb;
}
.sd-action-btn--handoff:hover { color: #b45309; background: #fef3c7; }

/* ── Student Card: Bàn Giao icon ──────────────────────────── */
.tch-scard-bangiao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #d97706;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}
.tch-scard-bangiao:hover {
    background: #fef3c7;
    transform: scale(1.1);
    color: #b45309;
}

/* ── Student Detail: Handoff Cards (Bàn Giao) ────────────── */
.sd-handoff-card {
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
}
.sd-handoff-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.sd-handoff-teacher { font-weight: 700; font-size: 13px; color: #92400e; }
.sd-handoff-date { font-size: 11px; color: #a16207; }
.sd-handoff-body {
    display: grid;
    gap: 8px;
    font-size: 13px;
    color: #1e293b;
}
.sd-handoff-body strong { color: #92400e; }
.sd-handoff-status { margin-top: 10px; }
.sd-handoff-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    border: 1px solid;
}
.sd-handoff-badge--pending { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.sd-handoff-badge--assigned { background: #dcfce7; color: #166534; border-color: #86efac; }
@media (max-width: 480px) {
    .sd-handoff-card { padding: 12px 14px; }
    .sd-handoff-header { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ── Schedule — utility (moved from inline) ────────────────── */
.schedule-title-icon { display: inline-flex; align-items: center; gap: 8px; }

/* ── Responsive: Forms grid + Learning Profile ─────────────── */
@media (max-width: 768px) {
    .tch-forms-grid {
        grid-template-columns: 1fr;
    }
    .sd-lp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .sd-lp-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════
   MOBILE SIDEBAR TOGGLE
   ═══════════════════════════════════════════════════ */
.tch-sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1001;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    box-shadow: 0 4px 16px rgba(220,38,38,0.3);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.tch-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
}
.tch-sidebar-overlay--visible {
    display: block;
}

@media (max-width: 768px) {
    .tch-sidebar-toggle {
        display: flex;
    }
    .teacher-hub-layout .teacher-sidebar {
        position: fixed;
        top: 0;
        left: -260px;
        width: 240px;
        height: 100vh;
        z-index: 1000;
        transition: left 0.25s ease;
        border-right: 1px solid var(--gray-200);
        border-bottom: none;
        overflow-y: auto;
        flex-direction: column;
    }
    .teacher-hub-layout .teacher-sidebar.tch-sidebar--open {
        left: 0;
    }
    .teacher-hub-layout .teacher-sidebar .teacher-sidebar-footer {
        display: block;
    }
    .teacher-hub-layout .teacher-sidebar .teacher-nav {
        display: flex;
        flex-direction: column;
        overflow-x: visible;
    }
    .teacher-hub-layout .teacher-sidebar .teacher-nav-item {
        border-bottom: none;
        border-left: 3px solid transparent;
    }
    .teacher-hub-layout .teacher-sidebar .teacher-nav-item.active {
        border-bottom-color: transparent;
        border-left-color: var(--primary);
    }
}

@media (max-width: 480px) {
    .teacher-hub-layout .teacher-sidebar {
        width: min(240px, 85vw);
        left: calc(-1 * min(260px, calc(85vw + 20px)));
    }
}

/* ── Student Balance Enhancements (added 2026-03) ── */

/* Summary bar above student roster */
.tch-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 10px 16px;
    margin-bottom: 12px;
    font-size: .875rem;
    color: var(--gray-600);
}
.tch-summary-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tch-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    white-space: nowrap;
    text-decoration: none;
}
.tch-summary-pill strong {
    font-weight: 700;
    color: var(--navy);
}
.tch-summary-pill--alert {
    cursor: pointer;
    border-color: #fecaca;
    background: #fff5f5;
    transition: background var(--transition);
}
.tch-summary-pill--alert:hover { background: #fee2e2; }
.tch-summary-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tch-summary-dot--green { background: #10b981; }

/* Level filter pills */
.tch-level-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.tch-filter-pill {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: all .15s;
}
.tch-filter-pill:hover { border-color: #d1d5db; background: #f9fafb; }
.tch-filter-pill--active {
    background: #1D3557;
    color: #fff;
    border-color: #1D3557;
}

.tch-summary-total {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.tch-alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
    border-radius: var(--radius-full);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition);
}
.tch-alert-badge:hover { background: #fee2e2; }

/* Low-balance alert inside student card */
.tch-scard-low-alert {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fef2f2;
    color: #ef4444;
    font-size: .78rem;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--radius);
    margin: 6px 0;
}

/* Stat value color variants */
.tch-scard-stat-val--danger  { color: #ef4444; font-weight: 700; }
.tch-scard-stat-val--success { color: #10b981; font-weight: 700; }

/* Subtle ring on low-balance cards */
.tch-scard--low-balance {
    border-color: #fecaca;
}

/* Teacher dashboard low-balance alert card */
.tch-low-balance-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    margin-bottom: 1.25rem;
}
.tch-low-balance-alert-icon {
    flex-shrink: 0;
    color: #ef4444;
    display: flex;
    align-items: center;
}
.tch-low-balance-alert-body { flex: 1; }
.tch-low-balance-alert-title {
    font-weight: 700;
    color: #dc2626;
    font-size: .9rem;
}
.tch-low-balance-alert-sub {
    font-size: .8rem;
    color: #ef4444;
    margin-top: 2px;
}
.tch-low-balance-alert-link {
    flex-shrink: 0;
    font-size: .82rem;
    font-weight: 600;
    color: #dc2626;
    text-decoration: none;
    white-space: nowrap;
}
.tch-low-balance-alert-link:hover { text-decoration: underline; }

/* Clickable stat card */
.teacher-stat-card--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow var(--transition), transform var(--transition);
}
.teacher-stat-card--link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* Student detail lesson balance */
.sd-balance-section { }
.sd-balance-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: 14px;
}
.sd-balance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.sd-balance-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #f9fafb;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-100);
}
.sd-balance-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sd-balance-icon--blue   { background: #eff6ff; }
.sd-balance-icon--green  { background: #f0fdf4; }
.sd-balance-icon--red    { background: #fef2f2; }
.sd-balance-val { font-size: 1.25rem; font-weight: 700; color: var(--navy); }
.sd-balance-val--danger  { color: #ef4444; }
.sd-balance-val--info    { color: #3b82f6; }
.sd-balance-lbl { font-size: .78rem; color: var(--gray-500); font-weight: 500; margin-top: 2px; }
.sd-balance-sub { font-size: .72rem; color: var(--gray-400); margin-top: 1px; }

@media (max-width: 600px) {
    .sd-balance-grid { grid-template-columns: 1fr; }
    .tch-summary-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
    .tch-summary-stats { gap: 6px; }
    .tch-summary-pill { font-size: 11px; padding: 3px 10px; }
}

/* ─── Mobile touch-target & readability fixes ────────────────── */
@media (max-width: 768px) {
    .schedule-month-more { font-size: 12px; }
    .schedule-month-dot { font-size: 12px; }
    .teacher-avatar { font-size: 12px; }
}
@media (max-width: 640px) {
    .schedule-month-date { font-size: 12px; }
    .schedule-month-dot { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — Teacher Module
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Sidebar — unique overrides (base sidebar rules in style.css) ── */
[data-theme="dark"] .teacher-sidebar-profile {
    background: linear-gradient(180deg, rgba(220,38,38,0.12) 0%, #1e293b 100%);
    border-bottom-color: #334155;
}
[data-theme="dark"] .teacher-profile-name {
    color: #e2e8f0;
}
[data-theme="dark"] .teacher-profile-email {
    color: #94a3b8;
}
[data-theme="dark"] .teacher-profile-location {
    color: #64748b;
}
[data-theme="dark"] .teacher-sidebar-footer {
    border-top-color: #334155;
}
[data-theme="dark"] .teacher-sidebar-footer a {
    color: #64748b;
}
[data-theme="dark"] .teacher-sidebar-footer a:hover {
    color: #e2e8f0;
}

/* ── 3. Stat cards — unique overrides (base in style.css) ─── */
[data-theme="dark"] .teacher-stat-icon--hours   { background: rgba(29,78,216,0.2); color: #60a5fa; }
[data-theme="dark"] .teacher-stat-icon--lessons  { background: rgba(6,95,70,0.2);  color: #34d399; }
[data-theme="dark"] .teacher-stat-icon--students { background: rgba(146,64,14,0.2); color: #fbbf24; }
[data-theme="dark"] .teacher-stat-icon--coins    { background: rgba(153,27,27,0.2); color: #f87171; }
[data-theme="dark"] .tch-stat-icon--assess       { background: rgba(190,24,93,0.2); color: #f472b6; }

/* ── 4. Lesson cards & list ────────────────────────────────── */
[data-theme="dark"] .teacher-lesson-card {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .teacher-lesson-student {
    color: #e2e8f0;
}
[data-theme="dark"] .teacher-lesson-summary {
    color: #94a3b8;
}
[data-theme="dark"] .teacher-lesson-level {
    color: #cbd5e1;
}
[data-theme="dark"] .teacher-lesson-date {
    color: #64748b;
}
[data-theme="dark"] .teacher-lesson-rating .star--empty {
    color: #475569;
}
[data-theme="dark"] .teacher-lesson-avatar-placeholder {
    background: linear-gradient(135deg, #334155, #475569);
}

/* ── 5. Student cards & grid ───────────────────────────────── */
[data-theme="dark"] .teacher-student-card {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .teacher-student-card-header h3 {
    color: #e2e8f0;
}
[data-theme="dark"] .teacher-student-card-stats {
    border-top-color: #334155;
}
[data-theme="dark"] .teacher-student-stat-val {
    color: #e2e8f0;
}
[data-theme="dark"] .teacher-student-stat-label {
    color: #94a3b8;
}
[data-theme="dark"] .teacher-student-last-seen {
    color: #94a3b8;
    background: #334155;
}

/* ── 6. Feedback cards ─────────────────────────────────────── */
[data-theme="dark"] .teacher-feedback-card {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .teacher-feedback-student {
    color: #e2e8f0;
}
[data-theme="dark"] .teacher-feedback-rating .star--empty {
    color: #475569;
}

/* ── 7. Sections & headers ─────────────────────────────────── */
[data-theme="dark"] .teacher-section-header h2 {
    color: #e2e8f0;
}
[data-theme="dark"] .teacher-page-header h1 {
    color: #e2e8f0;
}
[data-theme="dark"] .teacher-page-header .text-muted {
    color: #94a3b8;
}

/* ── 8. Table ──────────────────────────────────────────────── */
[data-theme="dark"] .teacher-table-wrap {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .teacher-table th {
    background: #0f172a;
    color: #94a3b8;
    border-bottom-color: #334155;
}
[data-theme="dark"] .teacher-table td {
    border-bottom-color: #334155;
    color: #cbd5e1;
}
[data-theme="dark"] .teacher-table tr:hover td {
    background: rgba(220,38,38,0.08);
}
[data-theme="dark"] .teacher-table-student {
    color: #e2e8f0;
}

/* ── 9. Salary hero & glass ────────────────────────────────── */
/* Hero gradients stay as-is (already dark). Adjust glass contrast. */
[data-theme="dark"] .teacher-salary-hero-glass {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .salary-glass-icon {
    background: rgba(255,255,255,0.12);
}

/* ── 10. Dashboard hero ────────────────────────────────────── */
/* Hero gradient stays as-is. Glass pill contrast. */
[data-theme="dark"] .teacher-hero-schedule {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
}

/* ── 11. Filters & pagination ──────────────────────────────── */
[data-theme="dark"] .teacher-filters .form-input {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
[data-theme="dark"] .teacher-pagination-info {
    color: #94a3b8;
}

/* ── 12. Badges ────────────────────────────────────────────── */
[data-theme="dark"] .badge-success { background: rgba(6,95,70,0.2);  color: #34d399; }
[data-theme="dark"] .badge-warning { background: rgba(146,64,14,0.2); color: #fbbf24; }
[data-theme="dark"] .badge-danger  { background: rgba(153,27,27,0.2); color: #f87171; }
[data-theme="dark"] .badge-default { background: #334155; color: #94a3b8; }
[data-theme="dark"] .badge-level   { background: rgba(59,130,246,0.15); color: #60a5fa; }

[data-theme="dark"] .badge-level--beginner { background: rgba(153,27,27,0.2);  color: #f87171; }
[data-theme="dark"] .badge-level--a1       { background: rgba(220,38,38,0.2);  color: #f87171; }
[data-theme="dark"] .badge-level--a2       { background: rgba(194,65,12,0.2);  color: #fb923c; }
[data-theme="dark"] .badge-level--b1       { background: rgba(161,98,7,0.2);   color: #fbbf24; }
[data-theme="dark"] .badge-level--b2       { background: rgba(21,128,61,0.2);  color: #34d399; }
[data-theme="dark"] .badge-level--c1       { background: rgba(29,78,216,0.2);  color: #60a5fa; }
[data-theme="dark"] .badge-level--c2       { background: rgba(109,40,217,0.2); color: #a78bfa; }
[data-theme="dark"] .badge-level--native   { background: rgba(15,118,110,0.2); color: #2dd4bf; }
[data-theme="dark"] .badge-level--default  { background: #334155; color: #94a3b8; }

/* ── 13. Empty state ───────────────────────────────────────── */
[data-theme="dark"] .teacher-empty {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .teacher-empty h3 {
    color: #e2e8f0;
}
[data-theme="dark"] .teacher-empty p {
    color: #94a3b8;
}
[data-theme="dark"] .teacher-empty-icon {
    background: rgba(220,38,38,0.15);
}

/* ── 14. Schedule (booking calendar) ───────────────────────── */
[data-theme="dark"] .teacher-schedule-list {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .teacher-schedule-item {
    border-bottom-color: #334155;
}
[data-theme="dark"] .teacher-schedule-info strong {
    color: #e2e8f0;
}
[data-theme="dark"] .teacher-schedule-info span {
    color: #94a3b8;
}
[data-theme="dark"] .schedule-day {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .schedule-day--today {
    border-color: #e2e8f0;
    box-shadow: 0 0 0 2px rgba(226,232,240,0.12);
}
[data-theme="dark"] .schedule-day-header {
    background: #0f172a;
    border-bottom-color: #334155;
}
[data-theme="dark"] .schedule-day-name {
    color: #64748b;
}
[data-theme="dark"] .schedule-day-num {
    color: #e2e8f0;
}
[data-theme="dark"] .schedule-empty {
    color: #475569;
}
[data-theme="dark"] .schedule-week-label {
    color: #e2e8f0;
}
[data-theme="dark"] .schedule-week-stats {
    color: #94a3b8;
}

/* Schedule booking cards */
[data-theme="dark"] .schedule-booking--confirmed {
    background: rgba(59,130,246,0.12);
}
[data-theme="dark"] .schedule-booking--completed {
    background: rgba(34,197,94,0.12);
}
[data-theme="dark"] .schedule-booking--rescheduled {
    background: rgba(245,158,11,0.12);
}
[data-theme="dark"] .schedule-booking--cancelled {
    background: #334155;
}
[data-theme="dark"] .schedule-booking-time {
    color: #e2e8f0;
}
[data-theme="dark"] .schedule-booking-ampm {
    color: #94a3b8;
}
[data-theme="dark"] .schedule-booking-student {
    color: #cbd5e1;
}
[data-theme="dark"] .schedule-booking-dur {
    color: #64748b;
}

/* Schedule status pills */
[data-theme="dark"] .schedule-status-pill--confirmed  { background: rgba(29,78,216,0.2);  color: #60a5fa; }
[data-theme="dark"] .schedule-status-pill--completed  { background: rgba(22,101,52,0.2);  color: #34d399; }
[data-theme="dark"] .schedule-status-pill--rescheduled{ background: rgba(146,64,14,0.2);  color: #fbbf24; }
[data-theme="dark"] .schedule-status-pill--cancelled  { background: #334155; color: #94a3b8; }

/* Schedule view toggle */
[data-theme="dark"] .schedule-view-toggle {
    background: #334155;
}
[data-theme="dark"] .schedule-view-btn {
    color: #94a3b8;
}
[data-theme="dark"] .schedule-view-btn.active {
    background: #1e293b;
    color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
[data-theme="dark"] .schedule-view-btn:hover:not(.active) {
    color: #e2e8f0;
}

/* Schedule month grid */
[data-theme="dark"] .schedule-month-grid {
    background: #334155;
    border-color: #334155;
}
[data-theme="dark"] .schedule-month-header {
    background: #0f172a;
    color: #64748b;
}
[data-theme="dark"] .schedule-month-cell {
    background: #1e293b;
}
[data-theme="dark"] .schedule-month-cell:hover {
    background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .schedule-month-cell--today {
    background: rgba(59,130,246,0.12);
}
[data-theme="dark"] .schedule-month-cell--outside {
    background: #0f172a;
}
[data-theme="dark"] .schedule-month-date {
    color: #e2e8f0;
}
[data-theme="dark"] .schedule-month-dot--confirmed   { background: rgba(29,78,216,0.2);  color: #60a5fa; }
[data-theme="dark"] .schedule-month-dot--completed   { background: rgba(22,101,52,0.2);  color: #34d399; }
[data-theme="dark"] .schedule-month-dot--rescheduled { background: rgba(146,64,14,0.2);  color: #fbbf24; }
[data-theme="dark"] .schedule-month-dot--cancelled   { background: #334155; color: #64748b; }
[data-theme="dark"] .schedule-month-more {
    color: #64748b;
}
[data-theme="dark"] .schedule-legend {
    color: #94a3b8;
}

/* Schedule modal */
[data-theme="dark"] .schedule-modal-footer { background: #0f172a; border-color: #1e293b; }
[data-theme="dark"] .schedule-modal-student { background: #0f172a; border-color: #1e293b; }
[data-theme="dark"] .schedule-modal-details { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .schedule-modal-level { background: #dc2626; }
[data-theme="dark"] .schedule-modal-row { border-color: #0f172a; }
[data-theme="dark"] .schedule-modal {
    background: #1e293b;
}
[data-theme="dark"] .schedule-modal-header {
    border-bottom-color: #334155;
}
[data-theme="dark"] .schedule-modal-header h2 {
    color: #e2e8f0;
}
[data-theme="dark"] .schedule-modal-close {
    color: #64748b;
}
[data-theme="dark"] .schedule-modal-close:hover {
    color: #e2e8f0;
}
[data-theme="dark"] .schedule-modal-footer {
    border-top-color: #334155;
}
[data-theme="dark"] .schedule-modal-student {
    border-bottom-color: #334155;
}
[data-theme="dark"] .schedule-modal-avatar {
    border-color: #334155;
}
[data-theme="dark"] .schedule-modal-name {
    color: #e2e8f0;
}
[data-theme="dark"] .schedule-modal-level {
    color: #64748b;
}
[data-theme="dark"] .schedule-modal-row {
    border-bottom-color: #334155;
}
[data-theme="dark"] .schedule-modal-label {
    color: #64748b;
}
[data-theme="dark"] .schedule-modal-value {
    color: #e2e8f0;
}

/* ── 15. Student detail & balance ──────────────────────────── */
[data-theme="dark"] .sd-profile {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .sd-info h1 {
    color: #e2e8f0;
}
[data-theme="dark"] .sd-email {
    color: #94a3b8;
}
[data-theme="dark"] .sd-meta-item {
    color: #e2e8f0;
}
[data-theme="dark"] .sd-meta-label {
    color: #94a3b8;
}
[data-theme="dark"] .sd-course-item {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .sd-course-name {
    color: #e2e8f0;
}
[data-theme="dark"] .sd-progress-bar {
    background: #334155;
}
[data-theme="dark"] .sd-progress-label {
    color: #94a3b8;
}
[data-theme="dark"] .sd-course-enrolled {
    color: #94a3b8;
}
[data-theme="dark"] .sd-lessons {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .sd-lesson-item {
    border-bottom-color: #334155;
}
[data-theme="dark"] .sd-lesson-date {
    color: #e2e8f0;
}
[data-theme="dark"] .sd-lesson-time {
    color: #94a3b8;
}
[data-theme="dark"] .sd-lesson-summary {
    color: #cbd5e1;
}
[data-theme="dark"] .sd-lesson-duration {
    color: #94a3b8;
}
[data-theme="dark"] .sd-activity-timeline {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .sd-activity-item {
    border-bottom-color: #334155;
}
[data-theme="dark"] .sd-activity-type {
    color: #e2e8f0;
}
[data-theme="dark"] .sd-activity-score {
    color: #94a3b8;
}
[data-theme="dark"] .sd-dot--gray {
    background: #475569;
}
[data-theme="dark"] .sd-note-item {
    background: rgba(245,158,11,0.08);
    border-color: rgba(245,158,11,0.2);
    border-left-color: #f59e0b;
}
[data-theme="dark"] .sd-note-date {
    color: #94a3b8;
}
[data-theme="dark"] .sd-note-text {
    color: #cbd5e1;
}

/* Balance grid */
[data-theme="dark"] .sd-balance-grid {
    color: #e2e8f0;
}
[data-theme="dark"] .sd-balance-stat {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .sd-balance-icon--blue  { background: rgba(59,130,246,0.15); }
[data-theme="dark"] .sd-balance-icon--green { background: rgba(34,197,94,0.15); }
[data-theme="dark"] .sd-balance-icon--red   { background: rgba(239,68,68,0.15); }
[data-theme="dark"] .sd-balance-val {
    color: #e2e8f0;
}
[data-theme="dark"] .sd-balance-lbl {
    color: #94a3b8;
}
[data-theme="dark"] .sd-balance-sub {
    color: #94a3b8;
}
[data-theme="dark"] .sd-balance-alert {
    background: rgba(220,38,38,0.12);
    border-color: rgba(220,38,38,0.25);
    color: #f87171;
}
[data-theme="dark"] .sd-back {
    color: #94a3b8;
}
[data-theme="dark"] .sd-back:hover {
    color: #e2e8f0;
}

/* Learning profile cards */
[data-theme="dark"] .sd-lp-card {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .sd-lp-icon--blue   { background: rgba(59,130,246,0.15); }
[data-theme="dark"] .sd-lp-icon--purple { background: rgba(139,92,246,0.15); }
[data-theme="dark"] .sd-lp-icon--amber  { background: rgba(245,158,11,0.15); }
[data-theme="dark"] .sd-lp-icon--green  { background: rgba(16,185,129,0.15); }
[data-theme="dark"] .sd-lp-label {
    color: #94a3b8;
}
[data-theme="dark"] .sd-lp-value {
    color: #e2e8f0;
}

/* Mastered section */
[data-theme="dark"] .sd-mastered-title {
    color: #cbd5e1;
}
[data-theme="dark"] .sd-mastered-item {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .sd-mastered-word {
    color: #e2e8f0;
}
[data-theme="dark"] .sd-mastered-badge--vocab   { background: rgba(30,64,175,0.2);  color: #60a5fa; }
[data-theme="dark"] .sd-mastered-badge--grammar { background: rgba(91,33,182,0.2);  color: #a78bfa; }
[data-theme="dark"] .sd-mastered-date {
    color: #94a3b8;
}

/* ── 16. Announcement modal ────────────────────────────────── */
[data-theme="dark"] .ann-modal-content {
    background: #1e293b;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
[data-theme="dark"] .ann-modal-title {
    color: #e2e8f0;
}
[data-theme="dark"] .ann-modal-date {
    color: #64748b;
}
[data-theme="dark"] .ann-modal-body {
    color: #cbd5e1;
}
[data-theme="dark"] .ann-modal-close-btn {
    color: #64748b;
}
[data-theme="dark"] .ann-modal-actions {
    border-top-color: #334155;
}
[data-theme="dark"] .ann-modal-view-count {
    color: #64748b;
}
[data-theme="dark"] .ann-subtitle {
    color: #94a3b8;
}
[data-theme="dark"] .ann-meta-item {
    color: #64748b;
}
[data-theme="dark"] .ann-like-btn {
    color: #64748b;
    border-color: #334155;
}
[data-theme="dark"] .ann-like-btn:hover {
    background: rgba(255,255,255,0.05);
    color: #94a3b8;
}
[data-theme="dark"] .ann-like-btn--active {
    background: rgba(220,38,38,0.15);
    border-color: var(--primary);
}
[data-theme="dark"] .ann-like-btn--active:hover {
    background: rgba(220,38,38,0.25);
}

/* Announcement cards */
[data-theme="dark"] .teacher-announcements-list {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .teacher-announcement-card {
    border-bottom-color: #334155;
}
[data-theme="dark"] .teacher-announcement-card:hover {
    background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .teacher-announcement-content h3 {
    color: #e2e8f0;
}
[data-theme="dark"] .teacher-announcement-content p {
    color: #94a3b8;
}
[data-theme="dark"] .teacher-announcement-date {
    color: #64748b;
}

/* ── 17. Lessons page (inline styles in PHP) ───────────────── */
[data-theme="dark"] .lessons-stat-card {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .lessons-stat-number {
    color: #e2e8f0;
}
[data-theme="dark"] .lessons-stat-label {
    color: #94a3b8;
}
[data-theme="dark"] .lessons-stat-icon--total    { background: rgba(29,53,87,0.3);   color: #94a3b8; }
[data-theme="dark"] .lessons-stat-icon--period   { background: rgba(230,57,70,0.2);  color: #f87171; }
[data-theme="dark"] .lessons-stat-icon--students { background: rgba(42,157,143,0.2); color: #2dd4bf; }
[data-theme="dark"] .lessons-stat-icon--rating   { background: rgba(184,134,11,0.2); color: #fbbf24; }
[data-theme="dark"] .lessons-stat-icon--hours    { background: rgba(69,123,157,0.2); color: #60a5fa; }

[data-theme="dark"] .lessons-filter-bar {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .lessons-filter-sep {
    background: #334155;
}
[data-theme="dark"] .lessons-period-pill {
    color: #94a3b8;
    background: #334155;
}
[data-theme="dark"] .lessons-period-pill:hover {
    color: #e2e8f0;
    background: rgba(255,255,255,0.1);
}
[data-theme="dark"] .lessons-period-pill.active {
    color: #fff;
    background: #E63946;
}
[data-theme="dark"] .lessons-search-input {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
[data-theme="dark"] .lessons-search-input::placeholder {
    color: #64748b;
}
[data-theme="dark"] .lessons-search-input:focus {
    background: #1e293b;
}
[data-theme="dark"] .lessons-summary-text {
    color: #94a3b8;
}
[data-theme="dark"] .lessons-stars-inline .star--empty {
    color: #475569;
}
[data-theme="dark"] .lessons-duration {
    background: rgba(29,53,87,0.3);
    color: #94a3b8;
}

/* AI icons */
[data-theme="dark"] .lessons-ai-icon--report   { background: rgba(124,58,237,0.2); color: #a78bfa; }
[data-theme="dark"] .lessons-ai-icon--flash    { background: rgba(217,119,6,0.2);  color: #fbbf24; }
[data-theme="dark"] .lessons-ai-icon--quiz     { background: rgba(37,99,235,0.2);  color: #60a5fa; }
[data-theme="dark"] .lessons-ai-icon--inactive { background: #334155; color: #475569; }

/* AI score badges */
[data-theme="dark"] .lessons-ai-badge--green  { background: rgba(22,163,74,0.15);  color: #34d399; border-color: rgba(34,197,94,0.3); }
[data-theme="dark"] .lessons-ai-badge--yellow { background: rgba(202,138,4,0.15);  color: #fbbf24; border-color: rgba(253,230,138,0.3); }
[data-theme="dark"] .lessons-ai-badge--red    { background: rgba(220,38,38,0.15);  color: #f87171; border-color: rgba(254,202,202,0.3); }
[data-theme="dark"] .lessons-ai-badge--none   { background: #1e293b; color: #64748b; border-color: #334155; }
[data-theme="dark"] .lessons-date-relative {
    color: #64748b;
}

/* ── 18. Assessment classes ────────────────────────────────── */
[data-theme="dark"] .assess-stat-card {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .assess-stat-num {
    color: #e2e8f0;
}
[data-theme="dark"] .assess-stat-label {
    color: #94a3b8;
}
[data-theme="dark"] .assess-tabs {
    border-bottom-color: #334155;
}
[data-theme="dark"] .assess-tab {
    color: #94a3b8;
}
[data-theme="dark"] .assess-tab:hover {
    color: #e2e8f0;
}
[data-theme="dark"] .assess-tab.active {
    color: var(--primary);
}
[data-theme="dark"] .assess-card {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .assess-card-header {
    color: #e2e8f0;
}
[data-theme="dark"] .assess-submission-text {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}
[data-theme="dark"] .assess-feedback-section {
    background: #0f172a;
}
[data-theme="dark"] .assess-feedback-section strong {
    color: #94a3b8;
}
[data-theme="dark"] .assess-feedback-section p {
    color: #cbd5e1;
}
[data-theme="dark"] .assess-feedback-details {
    border-top-color: #334155;
}
[data-theme="dark"] .assess-score-sm {
    color: #e2e8f0;
}
[data-theme="dark"] .assess-score-lg {
    background: rgba(22,163,74,0.12);
}
[data-theme="dark"] .assess-criterion {
    color: #cbd5e1;
}
[data-theme="dark"] .assess-criterion-bar {
    background: #334155;
}
[data-theme="dark"] .assess-criterion-row > span:first-child {
    color: #cbd5e1;
}
[data-theme="dark"] .assess-filters {
    color: #cbd5e1;
}
[data-theme="dark"] .assess-meta-grid {
    color: #cbd5e1;
}
[data-theme="dark"] .assess-meta-grid > div > span:first-child {
    color: #94a3b8;
}
[data-theme="dark"] .assess-text-display {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}

/* ── 19. Month nav, legacy badge ───────────────────────────── */
[data-theme="dark"] .tch-month-arrow {
    border-color: #334155;
    color: #94a3b8;
}
[data-theme="dark"] .tch-month-arrow:hover {
    background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .tch-month-lbl {
    color: #e2e8f0;
}
[data-theme="dark"] .tch-legacy-badge {
    background: rgba(146,64,14,0.2);
    color: #fbbf24;
}

/* ── Quick actions ─────────────────────────────────────────── */
[data-theme="dark"] .teacher-action-card {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .teacher-action-card:hover {
    border-color: rgba(220,38,38,0.3);
}
[data-theme="dark"] .teacher-action-icon {
    background: rgba(220,38,38,0.15);
}
[data-theme="dark"] .teacher-action-card span {
    color: #e2e8f0;
}

/* ── Today's schedule empty ────────────────────────────────── */
[data-theme="dark"] .tch-empty-day {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .tch-empty-day-icon {
    background: #334155;
    color: #64748b;
}
[data-theme="dark"] .tch-empty-day p {
    color: #94a3b8;
}

/* ── Salary summary cards ──────────────────────────────────── */
[data-theme="dark"] .tch-salary-stat {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .tch-salary-stat-label {
    color: #94a3b8;
}
[data-theme="dark"] .tch-salary-stat-value {
    color: #e2e8f0;
}
[data-theme="dark"] .tch-salary-currency {
    color: #64748b;
}

/* ── Payment cards ─────────────────────────────────────────── */
[data-theme="dark"] .tch-payment-card--earned {
    background: rgba(34,197,94,0.1);
    border-color: rgba(134,239,172,0.2);
}
[data-theme="dark"] .tch-payment-card--last {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .tch-payment-card--earned .tch-payment-value { color: #34d399; }
[data-theme="dark"] .tch-payment-card--last .tch-payment-value   { color: #e2e8f0; }
[data-theme="dark"] .tch-payment-card--earned .tch-payment-label { color: #34d399; }
[data-theme="dark"] .tch-payment-card--last .tch-payment-label   { color: #64748b; }

/* ── Summary bar ───────────────────────────────────────────── */
[data-theme="dark"] .tch-summary-bar {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}
[data-theme="dark"] .tch-summary-pill {
    background: #334155;
    border-color: #475569;
    color: #94a3b8;
}
[data-theme="dark"] .tch-summary-pill strong { color: #e2e8f0; }
[data-theme="dark"] .tch-summary-pill--alert {
    background: rgba(239,68,68,0.15);
    border-color: rgba(254,202,202,0.2);
}
[data-theme="dark"] .tch-summary-pill--alert:hover { background: rgba(239,68,68,0.25); }
[data-theme="dark"] .tch-filter-pill {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}
[data-theme="dark"] .tch-filter-pill:hover { background: #334155; border-color: #475569; }
[data-theme="dark"] .tch-filter-pill--active {
    background: #1e3a5f;
    border-color: #2563eb;
    color: #93c5fd;
}
[data-theme="dark"] .tch-alert-badge {
    background: rgba(239,68,68,0.15);
    border-color: rgba(254,202,202,0.2);
}
[data-theme="dark"] .tch-alert-badge:hover {
    background: rgba(239,68,68,0.25);
}

/* ── Low balance alerts ────────────────────────────────────── */
[data-theme="dark"] .tch-scard-low-alert {
    background: rgba(239,68,68,0.12);
    color: #f87171;
}
[data-theme="dark"] .tch-low-balance-alert {
    background: rgba(220,38,38,0.12);
    border-color: rgba(254,202,202,0.2);
}
[data-theme="dark"] .tch-low-balance-alert-title {
    color: #f87171;
}
[data-theme="dark"] .tch-low-balance-alert-sub {
    color: #f87171;
}

/* ── Student cards (tch-scard) ─────────────────────────────── */
[data-theme="dark"] .tch-scard {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .tch-scard:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
[data-theme="dark"] .tch-scard-info h3 {
    color: #e2e8f0;
}
[data-theme="dark"] .tch-scard-id {
    color: #64748b;
}
[data-theme="dark"] .tch-scard-status--active {
    background: rgba(6,95,70,0.2);
    color: #34d399;
}
[data-theme="dark"] .tch-scard-status--away {
    background: #334155;
    color: #64748b;
}
[data-theme="dark"] .tch-scard-stats {
    border-top-color: #334155;
}
[data-theme="dark"] .tch-scard-stat-val {
    color: #e2e8f0;
}
[data-theme="dark"] .tch-scard-stat-lbl {
    color: #64748b;
}
[data-theme="dark"] .tch-scard-link {
    border-color: var(--primary);
}
[data-theme="dark"] .tch-scard-link:hover {
    background: var(--primary);
    color: #fff;
}
[data-theme="dark"] .tch-scard--low-balance {
    border-color: rgba(254,202,202,0.3);
}

/* ── Form cards ────────────────────────────────────────────── */
[data-theme="dark"] .tch-form-card {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .tch-form-card:hover {
    border-color: var(--primary);
}
[data-theme="dark"] .tch-form-card-icon {
    background: rgba(220,38,38,0.15);
}
[data-theme="dark"] .tch-form-card-body h3 {
    color: #e2e8f0;
}
[data-theme="dark"] .tch-form-card-body p {
    color: #94a3b8;
}
[data-theme="dark"] .tch-form-card-arrow {
    color: #64748b;
}
[data-theme="dark"] .tch-form-card:hover .tch-form-card-arrow {
    color: var(--primary);
}
[data-theme="dark"] .tch-form-auto-badge {
    background: rgba(5,150,105,0.15);
    color: #34d399;
}

/* ── Year selector & utility ───────────────────────────────── */
[data-theme="dark"] .tch-lesson-id {
    color: #64748b;
}
[data-theme="dark"] .tch-pay-date {
    color: #64748b;
}
[data-theme="dark"] .tch-search-bar .form-input {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

/* ── Shared star overrides ─────────────────────────────────── */
[data-theme="dark"] .star--empty {
    color: #475569;
}
[data-theme="dark"] .teacher-stars-sm .star--empty {
    color: #475569;
}

/* ── Clickable stat card ───────────────────────────────────── */
[data-theme="dark"] .teacher-stat-card--link:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

/* ── Mobile sidebar overlay ────────────────────────────────── */
[data-theme="dark"] .tch-sidebar-overlay--visible {
    background: rgba(0,0,0,0.6);
}

/* ── Note textarea ─────────────────────────────────────────── */
[data-theme="dark"] .sd-note-textarea {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

/* ══════════════════════════════════════════════════════════════
   Lesson Prep Page (tch-prep-*)
   ══════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────── */
.tch-prep-hero {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 40%, #5b21b6 70%, #4c1d95 100%);
    border-radius: 20px;
    padding: 32px 36px;
    margin-bottom: 32px;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tch-prep-hero::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}

/* ── Hero badge ────────────────────────────────────────────── */
.tch-prep-hero-badge {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 10px 18px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ── Back link ─────────────────────────────────────────────── */
.tch-prep-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 13px;
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.15s;
}
.tch-prep-back:hover {
    color: #1D3557;
}

/* ── Student card ──────────────────────────────────────────── */
.tch-prep-student-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: 24px;
}

/* ── Student avatar ────────────────────────────────────────── */
.tch-prep-student-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid #7c3aed;
    object-fit: cover;
    flex-shrink: 0;
}

/* ── Stat grid ─────────────────────────────────────────────── */
.tch-prep-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

/* ── Individual stat card ──────────────────────────────────── */
.tch-prep-stat {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.tch-prep-stat-number {
    font-size: 24px;
    font-weight: 800;
    color: #1D3557;
    line-height: 1.2;
}
.tch-prep-stat-label {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* ── Lesson card ───────────────────────────────────────────── */
.tch-prep-lesson-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.15s;
    text-decoration: none;
    color: inherit;
}
.tch-prep-lesson-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ── Lesson date column ────────────────────────────────────── */
.tch-prep-lesson-date {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    min-width: 90px;
    flex-shrink: 0;
}

/* ── Lesson summary ────────────────────────────────────────── */
.tch-prep-lesson-summary {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── AI score badge ────────────────────────────────────────── */
.tch-prep-ai-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.tch-prep-ai-badge--good {
    background: #dcfce7;
    color: #16a34a;
}
.tch-prep-ai-badge--mid {
    background: #fef9c3;
    color: #ca8a04;
}
.tch-prep-ai-badge--low {
    background: #fee2e2;
    color: #dc2626;
}

/* ── Vocabulary table ──────────────────────────────────────── */
.tch-prep-vocab-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.tch-prep-vocab-table th {
    background: #f9fafb;
    padding: 10px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    border-bottom: 2px solid #e5e7eb;
    text-align: left;
    font-weight: 600;
}
.tch-prep-vocab-table td {
    padding: 10px 14px;
    font-size: 13px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}
.tch-prep-srs-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.tch-prep-srs-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5e7eb;
    display: inline-block;
}
.tch-prep-srs-dots span.filled {
    background: #7c3aed;
}

/* ── Progress bar ──────────────────────────────────────────── */
.tch-prep-progress-bar {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}
.tch-prep-progress-fill {
    background: #7c3aed;
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* ── Teacher note card ─────────────────────────────────────── */
.tch-prep-note {
    padding: 12px 16px;
    background: #f9fafb;
    border-left: 3px solid #7c3aed;
    border-radius: 0 8px 8px 0;
    margin-bottom: 8px;
}
.tch-prep-note-date {
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 4px;
}

/* ── Action bar ────────────────────────────────────────────── */
.tch-prep-actions {
    display: flex;
    gap: 12px;
    padding: 20px 0;
    flex-wrap: wrap;
}
.tch-prep-btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s;
}
.tch-prep-btn--primary {
    background: #7c3aed;
    color: #fff;
}
.tch-prep-btn--primary:hover {
    background: #6d28d9;
}
.tch-prep-btn--secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}
.tch-prep-btn--secondary:hover {
    background: #e5e7eb;
}

/* ── Section wrapper ───────────────────────────────────────── */
.tch-prep-section {
    margin-bottom: 24px;
}

/* ── Section title ─────────────────────────────────────────── */
.tch-prep-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #1D3557;
    margin-bottom: 12px;
    padding-left: 12px;
    border-left: 3px solid #7c3aed;
}

/* ── Empty state ───────────────────────────────────────────── */
.tch-prep-empty {
    padding: 24px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
}

/* ── Responsive: Lesson Prep ───────────────────────────────── */
@media (max-width: 768px) {
    .tch-prep-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .tch-prep-hero { padding: 20px; }
    .tch-prep-student-card { flex-direction: column; text-align: center; }
    .tch-prep-actions { flex-direction: column; }
    .tch-prep-btn { width: 100%; text-align: center; }
}
@media (max-width: 480px) {
    .tch-prep-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE UX IMPROVEMENTS — Teacher Dashboard (Apr 2026)
   ═══════════════════════════════════════════════════════════════ */

/* ── Touch-friendly buttons ──────────────────────────────────── */
@media (max-width: 768px) {
    .btn-sm {
        padding: 10px 16px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }
}

/* ── Forms grid: bigger cards on mobile ──────────────────────── */
@media (max-width: 768px) {
    .tch-form-card {
        padding: 16px;
        min-height: 72px;
        gap: 12px;
    }
    .tch-form-card-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }
    .tch-form-card-body h3 {
        font-size: 15px;
        margin-bottom: 4px;
    }
    .tch-form-card-body p {
        font-size: 13px;
        white-space: normal;
        overflow: visible;
        -webkit-line-clamp: unset;
    }
    .tch-form-auto-badge {
        font-size: 11px;
        margin-top: 6px;
    }
    .tch-form-card-arrow {
        font-size: 22px;
        padding: 4px;
    }
}

/* ── Schedule items: stack on phones ─────────────────────────── */
@media (max-width: 480px) {
    .teacher-schedule-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
    }
    .tch-schedule-actions {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }
    .tch-schedule-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Stat cards: single column on small phones ───────────────── */
@media (max-width: 480px) {
    .teacher-stats-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .teacher-stat-card {
        padding: 14px;
    }
    .teacher-stat-number {
        font-size: 22px;
    }
}

/* ── Quick actions: stack earlier ─────────────────────────────── */
@media (max-width: 768px) {
    .teacher-actions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}
@media (max-width: 480px) {
    .teacher-actions-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .teacher-action-card {
        padding: 14px;
        min-height: 56px;
    }
}

/* ── Hero section: tighter on mobile ─────────────────────────── */
@media (max-width: 480px) {
    .teacher-dashboard-hero {
        padding: 18px 14px;
    }
    .teacher-dashboard-hero h1 {
        font-size: 18px;
    }
}

/* ── Tables: smaller text on phones ──────────────────────────── */
@media (max-width: 480px) {
    .teacher-table {
        font-size: 12px;
    }
    .teacher-table th,
    .teacher-table td {
        padding: 8px 10px;
    }
}

/* ── Form inputs: prevent iOS zoom ───────────────────────────── */
@media (max-width: 768px) {
    .form-group input,
    .form-group select,
    .form-group textarea,
    .form-input,
    .form-textarea,
    .form-select {
        font-size: 16px;
    }
}

/* ── Teacher page header: tighter on mobile ──────────────────── */
@media (max-width: 480px) {
    .teacher-page-header h1 {
        font-size: 20px;
    }
    .teacher-page-header .text-muted {
        font-size: 13px;
    }
    .teacher-page {
        padding: 16px 12px;
    }
}

/* ── Sidebar toggle: move up on small phones ─────────────────── */
@media (max-width: 480px) {
    .tch-sidebar-toggle {
        bottom: 80px;
    }
}

/* ── Lesson prep: single col stats on phones ─────────────────── */
@media (max-width: 480px) {
    .tch-prep-lp-grid {
        grid-template-columns: 1fr;
    }
    .tch-prep-hero {
        padding: 16px 14px 14px;
        margin: -12px -12px 12px;
    }
    .tch-prep-hero h1 {
        font-size: 18px;
    }
    .tch-prep-section {
        padding: 14px;
    }
    .tch-prep-profile-right {
        gap: 8px;
    }
    .tch-prep-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }
}

/* ── Recent submissions table: readable on mobile ────────────── */
@media (max-width: 480px) {
    .teacher-section .teacher-table-wrap {
        margin: 0 -12px;
        padding: 0 12px;
    }
}

/* ── Schedule grid: single column on small phones ────────────── */
@media (max-width: 480px) {
    .schedule-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .schedule-day-header {
        font-size: 13px;
    }
}

/* ── Prep stat grid: single column on phones ─────────────────── */
@media (max-width: 480px) {
    .tch-prep-stat-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ── Schedule view buttons: larger touch targets ─────────────── */
@media (max-width: 768px) {
    .schedule-view-btn {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 13px;
    }
    .schedule-month-dot {
        font-size: 12px;
        min-width: 28px;
        min-height: 28px;
    }
    .schedule-booking {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* ── Student cards: prevent overflow on small phones ─────────── */
@media (max-width: 480px) {
    .teacher-students-grid {
        gap: 10px;
    }
    .teacher-student-card {
        padding: 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM TAB BAR — Teacher Hub (Apr 2026)
   Hidden on desktop. 5 key nav items for one-thumb navigation.
   ═══════════════════════════════════════════════════════════════ */

.tch-mobile-tabs {
    display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
    .tch-mobile-tabs {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 997;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid #e5e7eb;
        padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
        justify-content: space-around;
        align-items: stretch;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    }
    .tch-mobile-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex: 1;
        padding: 6px 2px 4px;
        text-decoration: none;
        color: #9ca3af;
        font-size: 10px;
        font-weight: 500;
        transition: color .15s;
        -webkit-tap-highlight-color: transparent;
        min-height: 48px;
    }
    .tch-mobile-tab svg {
        transition: color .15s, transform .15s;
    }
    .tch-mobile-tab--active {
        color: #dc2626;
        font-weight: 700;
    }
    .tch-mobile-tab--active svg {
        transform: scale(1.1);
    }

    /* Add bottom padding to main content so tab bar doesn't cover content */
    .teacher-main {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Hide the hamburger toggle — bottom tabs replace it */
    .tch-sidebar-toggle {
        display: none !important;
    }

    /* Dark mode */
    [data-theme="dark"] .tch-mobile-tabs {
        background: rgba(15, 23, 42, 0.96);
        border-top-color: rgba(255,255,255,0.06);
    }
    [data-theme="dark"] .tch-mobile-tab {
        color: #64748b;
    }
    [data-theme="dark"] .tch-mobile-tab--active {
        color: #f87171;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE CALENDAR — Compact list view on phones (Apr 2026)
   Hides the 7-col grid, shows only days with bookings as a list.
   ═══════════════════════════════════════════════════════════════ */

.tch-cal-mobile-list {
    display: none; /* hidden on desktop/tablet */
}

@media (max-width: 640px) {
    /* Hide the grid calendar on phones */
    .tch-cal-grid {
        display: none !important;
    }
    /* Show the mobile list instead */
    .tch-cal-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        overflow: hidden;
    }
    .tch-cal-mday {
        padding: 10px 14px;
        border-bottom: 1px solid #f3f4f6;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .tch-cal-mday:last-child {
        border-bottom: none;
    }
    .tch-cal-mday-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .tch-cal-mday-date {
        font-size: 13px;
        font-weight: 700;
        color: #1D3557;
    }
    .tch-cal-mday-date--today {
        color: #dc2626;
    }
    .tch-cal-mday-count {
        font-size: 11px;
        color: #9ca3af;
        font-weight: 500;
    }
    .tch-cal-mday-bookings {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .tch-cal-mbooking {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        background: #f9fafb;
        border-radius: 8px;
        text-decoration: none;
        color: inherit;
        min-height: 40px;
    }
    .tch-cal-mbooking:active {
        background: #f3f4f6;
    }
    .tch-cal-mtime {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
        min-width: 52px;
    }
    .tch-cal-mname {
        font-size: 13px;
        color: #6b7280;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tch-cal-mstatus {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .tch-cal-empty-month {
        padding: 24px 16px;
        text-align: center;
        color: #9ca3af;
        font-size: 13px;
    }

    /* Dark mode */
    [data-theme="dark"] .tch-cal-mobile-list {
        background: #1e293b;
        border-color: #334155;
    }
    [data-theme="dark"] .tch-cal-mday {
        border-bottom-color: #334155;
    }
    [data-theme="dark"] .tch-cal-mday-date {
        color: #f1f5f9;
    }
    [data-theme="dark"] .tch-cal-mbooking {
        background: #0f172a;
    }
    [data-theme="dark"] .tch-cal-mtime {
        color: #e2e8f0;
    }
    [data-theme="dark"] .tch-cal-mname {
        color: #94a3b8;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SCHEDULE ITEMS — Stack at 768px instead of 480px (Apr 2026)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .teacher-schedule-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 16px;
    }
    .tch-schedule-actions {
        width: 100%;
        display: flex;
        gap: 8px;
    }
    .tch-schedule-actions .btn {
        flex: 1;
        justify-content: center;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PAYMENT CARDS — Full-width stack on mobile (Apr 2026)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .tch-payment-row {
        flex-direction: column;
        gap: 8px;
    }
    .tch-payment-card {
        min-width: 0;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM-SHEET MODALS — GCal + Announcements on mobile (Apr 2026)
   Desktop untouched. On mobile: slide up from bottom.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Announcement modal → bottom sheet */
    .ann-modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .ann-modal-content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 85vh;
        border-radius: 20px 20px 0 0 !important;
        animation: tch-sheet-up .3s ease !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Sheet handle indicator */
    .ann-modal-content::before {
        content: '';
        display: block;
        width: 40px;
        height: 5px;
        background: #d1d5db;
        border-radius: 3px;
        margin: 12px auto 8px;
    }

    /* GCal modal → bottom sheet */
    #gcal-modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    #gcal-modal > div {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 90vh;
        overflow-y: auto;
        animation: tch-sheet-up .3s ease !important;
    }

    /* Dark mode */
    [data-theme="dark"] .ann-modal-content::before {
        background: #475569;
    }
}

@keyframes tch-sheet-up {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   QUICK ACTIONS — Compact horizontal layout on mobile (Apr 2026)
   Icon + label inline, 2-col grid, equal sizing.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .teacher-actions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .teacher-action-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        gap: 10px;
        padding: 12px 14px !important;
        text-align: left !important;
    }
    .teacher-action-icon {
        margin: 0 !important;
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0;
    }
    .teacher-action-card span {
        font-size: 12px;
    }
}
@media (max-width: 380px) {
    .teacher-actions-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ALERT BANNERS — Tighter on mobile (Apr 2026)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Low balance alert */
    .tch-low-balance-alert {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px;
    }
    .tch-low-balance-alert-link {
        width: 100%;
        text-align: center;
        padding: 10px 16px;
        background: #fef2f2;
        border-radius: 8px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* GCal inline banner — stack button below text */
    .tch-gcal-alert {
        flex-wrap: wrap !important;
        padding: 12px 14px !important;
        gap: 8px !important;
    }
    .tch-gcal-alert-btn {
        width: 100% !important;
        text-align: center !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }

    /* Weekly availability encouragement — tighter */
    .tch-avail-alert {
        padding: 12px 14px !important;
        gap: 8px !important;
    }

    /* Ranking card — stack score and rank vertically */
    .tch-ranking-widget {
        padding: 16px !important;
        border-radius: 14px !important;
    }
    .tch-ranking-top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    /* Challenges widget — stack progress bar below text */
    .tch-challenges-widget {
        padding: 16px !important;
        border-radius: 14px !important;
    }
    .tch-challenges-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .tch-challenges-progress {
        width: 100% !important;
    }
    .tch-challenges-bar {
        flex: 1 !important;
        width: auto !important;
    }

    /* Next lesson banner — stack prep button below info */
    .tch-next-lesson-banner {
        padding: 14px !important;
        gap: 10px !important;
    }
    .tch-nl-prep-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 16px !important;
        min-height: 44px !important;
        border-radius: 10px !important;
    }

    /* Payment summary cards — full width stack */
    .tch-payment-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .tch-payment-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Stat value (earnings card) — style the missing class */
    .teacher-stat-value {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--navy, #1D3557);
        line-height: 1.2;
    }

    /* Schedule items: improve touch targets between 481-768px */
    .teacher-schedule-item {
        padding: 12px 14px;
        gap: 10px;
    }
    .tch-schedule-actions {
        flex-wrap: wrap;
        gap: 6px;
    }
    .tch-schedule-actions .btn {
        min-height: 44px;
        padding: 10px 14px;
    }

    /* Disable hover lift effects on mobile — they don't make sense for touch */
    .teacher-stat-card:hover,
    .teacher-lesson-card:hover,
    .teacher-action-card:hover {
        transform: none !important;
    }

    /* GCal modal — bottom sheet style on mobile */
    #gcal-modal > div {
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        margin-top: auto !important;
        max-height: 90vh;
        overflow-y: auto;
    }
    #gcal-modal {
        align-items: flex-end !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — Extra small phones (≤480px) — Apr 2026
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    /* Ranking card — compact score display */
    .tch-ranking-widget {
        padding: 14px !important;
    }
    .tch-ranking-left {
        gap: 10px !important;
    }
    .tch-ranking-icon {
        width: 40px !important;
        height: 40px !important;
    }

    /* Challenges widget — compact */
    .tch-challenges-widget {
        padding: 14px !important;
    }

    /* Next lesson banner — fully stacked */
    .tch-next-lesson-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 12px !important;
    }

    /* GCal alert — fully stacked */
    .tch-gcal-alert {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .tch-gcal-alert > span {
        text-align: center;
    }

    /* Stats grid: compact 2-col with tighter gaps */
    .teacher-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .teacher-stat-card {
        padding: 12px 10px !important;
    }
    .teacher-stat-number {
        font-size: 20px !important;
    }
    .teacher-stat-value {
        font-size: 1.25rem !important;
    }
    .teacher-stat-label {
        font-size: 0.65rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   STUDENT DETAIL — Mobile Responsive (Apr 2026)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .sd-profile { grid-template-columns: 1fr !important; text-align: center; gap: 12px; padding: 16px; }
    .sd-avatar { margin: 0 auto; }
    .sd-meta { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
    .sd-meta-item { text-align: center; }
    .sd-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap !important; gap: 4px; }
    .sd-tabs::-webkit-scrollbar { display: none; }
    .sd-tab { white-space: nowrap; min-height: 44px; padding: 10px 16px; font-size: 13px; flex-shrink: 0; }
    .sd-info-grid { grid-template-columns: 1fr !important; }
    .sd-lesson-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
    .sd-lesson-card:hover { transform: none; }
    .sd-notes-list { gap: 8px; }
}

@media (max-width: 480px) {
    .sd-profile { padding: 14px 12px; }
    .sd-avatar { width: 56px !important; height: 56px !important; }
    .sd-tab { padding: 8px 12px; font-size: 12px; }
    .sd-lesson-card { padding: 12px; }
}

/* =================================================================
   TEACHER DASHBOARD -- Mobile Touch Target & Sizing Fixes (Apr 2026)
   Additive only -- no existing rules modified
   ================================================================= */

/* 1. Availability alert link: full-width touch button on mobile */
@media (max-width: 768px) {
    .tch-avail-alert {
        flex-wrap: wrap !important;
    }
    .tch-avail-alert a {
        display: flex !important;
        width: 100% !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 16px !important;
        background: #fffbeb !important;
        border: 1px solid #f59e0b !important;
        border-radius: 8px !important;
        margin-top: 4px !important;
    }
}

/* 2. Announcement like button: meet 44px touch target */
@media (max-width: 768px) {
    .ann-like-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 8px 12px !important;
    }
}

/* 3. GCal "Remind me later" button: meet 44px touch target */
@media (max-width: 768px) {
    #gcal-modal button[onclick*="display"] {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* 4. Quick actions: last orphan item spans full width */
@media (max-width: 768px) {
    .teacher-action-card:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }
}

/* 5. Student name overflow in lesson cards */
@media (max-width: 768px) {
    .teacher-lesson-student {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* 6. Hero badge overflow on small phones */
@media (max-width: 480px) {
    .tch-teacher-level {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* 7. Tighter spacing on small phones */
@media (max-width: 480px) {
    .teacher-dashboard-hero {
        margin-bottom: 16px !important;
    }
    .teacher-stats-grid {
        margin-bottom: 20px !important;
    }
    .teacher-section {
        margin-bottom: 20px !important;
    }
}

/* =================================================================
   MOBILE "MORE" BOTTOM SHEET — Teacher Hub (Apr 2026)
   Reveals all nav items not in the 4-tab bottom bar.
   Desktop: hidden. Mobile: slides up from bottom.
   ================================================================= */

.tch-more-overlay,
.tch-more-sheet {
    display: none;
}

/* Style the More tab button to match other tabs */
#tch-more-tab {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

@media (max-width: 768px) {
    .tch-more-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.3);
        z-index: 1000;
    }
    .tch-more-overlay--visible {
        display: block;
    }
    .tch-more-sheet {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1001;
        background: #fff;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
        transform: translateY(100%);
        transition: transform .3s ease;
        padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tch-more-sheet--open {
        transform: translateY(0);
    }
    .tch-more-sheet-handle {
        width: 40px;
        height: 5px;
        background: #d1d5db;
        border-radius: 3px;
        margin: 4px auto 12px;
    }
    .tch-more-sheet-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    .tch-more-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 12px 4px;
        border-radius: 12px;
        text-decoration: none;
        color: #374151;
        transition: background .15s;
        -webkit-tap-highlight-color: transparent;
        min-height: 72px;
        justify-content: center;
    }
    .tch-more-item:active {
        background: #f3f4f6;
    }
    .tch-more-item--active {
        background: #fef2f2;
    }
    .tch-more-item--active .tch-more-item-label {
        color: #dc2626;
        font-weight: 700;
    }
    .tch-more-item-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tch-more-item-label {
        font-size: 11px;
        font-weight: 500;
        text-align: center;
        line-height: 1.2;
    }

    /* Dark mode */
    [data-theme="dark"] .tch-more-sheet {
        background: #1e293b;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
    }
    [data-theme="dark"] .tch-more-sheet-handle {
        background: #475569;
    }
    [data-theme="dark"] .tch-more-item {
        color: #e2e8f0;
    }
    [data-theme="dark"] .tch-more-item:active {
        background: #334155;
    }
    [data-theme="dark"] .tch-more-item--active {
        background: rgba(220,38,38,0.1);
    }
}

/* =================================================================
   LESSONS TABLE → CARD LAYOUT on mobile (Apr 2026)
   Hides the 8-column table, shows stacked lesson cards instead.
   ================================================================= */

@media (max-width: 768px) {
    /* Hide the table header row on mobile */
    .teacher-page .teacher-table thead {
        display: none;
    }
    /* Each table row becomes a card */
    .teacher-page .teacher-table,
    .teacher-page .teacher-table tbody {
        display: block;
    }
    .teacher-page .teacher-table tr {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
        padding: 14px;
        border-bottom: 1px solid #f3f4f6;
        align-items: center;
    }
    .teacher-page .teacher-table tr:last-child {
        border-bottom: none;
    }
    .teacher-page .teacher-table td {
        display: block;
        padding: 0;
        border: none;
        font-size: 13px;
    }
    /* Date column: full width, bold */
    .teacher-page .teacher-table td:first-child {
        width: 100%;
        font-weight: 600;
        color: #1D3557;
        font-size: 13px;
        margin-bottom: 2px;
    }
    /* Summary column: full width */
    .teacher-page .teacher-table td .lessons-summary-text {
        max-width: 100%;
        -webkit-line-clamp: 2;
    }
    /* Actions column: full width */
    .teacher-page .teacher-table td:last-child {
        width: 100%;
        margin-top: 4px;
    }
    .teacher-page .teacher-table td:last-child .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* =================================================================
   SALARY PAGE — Mobile fixes (Apr 2026)
   ================================================================= */

/* Salary summary stats: stack on mobile (overrides display:grid from base rule) */
@media (max-width: 768px) {
    .tch-salary-summary {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .tch-salary-stat {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Salary table: card layout on phones */
@media (max-width: 640px) {
    .teacher-page .teacher-table-wrap .teacher-table thead {
        display: none;
    }
    .teacher-page .teacher-table-wrap .teacher-table,
    .teacher-page .teacher-table-wrap .teacher-table tbody {
        display: block;
    }
    .teacher-page .teacher-table-wrap .teacher-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
        padding: 14px;
        border-bottom: 1px solid #f3f4f6;
        background: #fff;
        border-radius: 10px;
        margin-bottom: 6px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .teacher-page .teacher-table-wrap .teacher-table td {
        display: block;
        padding: 0;
        border: none;
        font-size: 13px;
    }
    .teacher-page .teacher-table-wrap .teacher-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        color: #9ca3af;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        margin-bottom: 2px;
    }
    /* Period spans full width */
    .teacher-page .teacher-table-wrap .teacher-table td:first-child {
        grid-column: 1 / -1;
        font-weight: 700;
        color: #1D3557;
        font-size: 14px;
    }
    /* Status badge spans full width */
    .teacher-page .teacher-table-wrap .teacher-table td:last-child {
        grid-column: 1 / -1;
    }
    /* Remove horizontal scroll wrapper styling */
    .teacher-page .teacher-table-wrap {
        overflow-x: visible;
    }
}

/* =================================================================
   LESSON FILTER PILLS — 44px touch targets (Apr 2026)
   ================================================================= */

@media (max-width: 768px) {
    .lessons-period-pill {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 8px 16px !important;
    }
    .lessons-search-input {
        min-height: 44px !important;
        font-size: 16px !important;
    }
    .lessons-search-form .btn {
        min-height: 44px !important;
    }
}

/* =================================================================
   PAYROLL TABLES — Responsive card layout on mobile (Apr 2026)
   ================================================================= */

@media (max-width: 640px) {
    .tp-breakdown-table {
        display: block;
    }
    .tp-breakdown-table tr {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 8px;
        padding: 8px 0;
        border-bottom: 1px solid #f3f4f6;
    }
    .tp-breakdown-table td {
        display: block;
        padding: 0;
    }
    .tp-breakdown-table td:first-child {
        flex: 1;
        min-width: 0;
        font-size: 13px;
    }
    .tp-breakdown-table td.text-right {
        flex-shrink: 0;
        text-align: right;
        font-size: 13px;
        font-weight: 600;
    }
}

/* =================================================================
   TEACHER PAGES — Additional Mobile Fixes (Apr 2026 audit)
   Additive only — no existing rules modified.
   ================================================================= */

/* ── Payments: fix white-space and max-width overflow on mobile ── */
@media (max-width: 640px) {
    .teacher-table td {
        white-space: normal !important;
        word-break: break-word;
    }
    td[style*="max-width:320px"] {
        max-width: 100% !important;
    }
    /* Lesson log tables: readable on phones */
    .tch-lesson-log-table {
        font-size: 12px;
    }
    .tch-lesson-log-table th,
    .tch-lesson-log-table td {
        padding: 8px 6px !important;
        white-space: normal !important;
    }
}

/* ── Quality dashboard: chart container overflow on small screens ── */
@media (max-width: 480px) {
    .tq-chart-wrap {
        min-width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Student detail: course grid stack on very small screens ── */
@media (max-width: 360px) {
    .sd-courses {
        grid-template-columns: 1fr !important;
    }
}

/* ── Assessments: preserve 44px touch targets at 480px ── */
@media (max-width: 480px) {
    .assess-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }
    .assess-tabs::-webkit-scrollbar {
        display: none;
    }
    .assess-tab {
        min-height: 44px !important;
        padding: 10px 14px !important;
        flex-shrink: 0;
    }
}

/* ── Courses: tighter grid for small phones ── */
@media (max-width: 480px) {
    .tch-courses-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
        gap: 8px !important;
    }
}

/* =================================================================
   CRITICAL + HIGH PRIORITY MOBILE FIXES (Apr 2026 — Round 2)
   All additive. No existing rules modified.
   ================================================================= */

/* ── #1 CRITICAL: Earnings chart — horizontal scroll on mobile ── */
@media (max-width: 640px) {
    .tch-earnings-chart {
        padding: 16px 12px !important;
    }
    .tch-earnings-chart > div[style*="display:flex"][style*="height:120px"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-width: 0;
        padding-bottom: 28px !important;
    }
    .tch-earnings-chart h3 {
        font-size: 14px !important;
    }
}

/* ── #3 HIGH: Payments Tasks column inline max-width override ── */
@media (max-width: 640px) {
    td[style*="max-width:320px"] {
        max-width: 100% !important;
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 12px !important;
    }
}

/* ── #6 HIGH: Lesson stats — stack icon above text on tiny phones ── */
@media (max-width: 400px) {
    .lessons-stat-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
    .lessons-stat-icon {
        width: 32px !important;
        height: 32px !important;
    }
}

/* =================================================================
   TEACHER PAGES — Simplify top navbar on mobile (Apr 2026)
   Bottom tab bar handles all teacher navigation, so hide the
   top hamburger menu on teacher pages. Keep logo + profile avatar.
   ================================================================= */

@media (max-width: 768px) {
    /* Hide the top hamburger toggle on teacher pages — bottom tabs replace it */
    .main-content--teacher ~ .tch-mobile-tabs ~ .nav-toggle,
    .teacher-hub-layout ~ .tch-mobile-tabs ~ .nav-toggle {
        display: none !important;
    }
}

/* Direct approach: hide hamburger when teacher bottom tabs are present */
@media (max-width: 768px) {
    body:has(.tch-mobile-tabs) .nav-toggle {
        display: none !important;
    }
    body:has(.tch-mobile-tabs) .nav-backdrop {
        display: none !important;
    }
    body:has(.tch-mobile-tabs) .nav-menu {
        display: none !important;
    }
    /* Ensure the profile avatar stays visible in the top bar */
    body:has(.tch-mobile-tabs) .nav-mobile-profile-btn {
        display: flex !important;
    }
    /* Keep notifications visible in top bar */
    body:has(.tch-mobile-tabs) .navbar .nav-notif-li {
        display: flex !important;
    }
}

/* =================================================================
   TEACHER DASHBOARD — Mobile Fixes (Apr 2026 — Round 3)
   All additive. No existing rules modified.
   ================================================================= */

/* ── #1 CRITICAL: Bottom padding for fixed mobile tab bar ──────── */
@media (max-width: 768px) {
    .teacher-page {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── #2 Student Activity grid: stack on phones ─────────────────── */
@media (max-width: 640px) {
    .teacher-section div[style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* ── #3 Dashboard stat cards: 3-col on tablets, 2-col on phones ── */
@media (max-width: 768px) {
    .teacher-stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    /* Ensure .teacher-stat-value matches .teacher-stat-number styling */
    .teacher-stat-value {
        font-size: 24px !important;
        font-weight: 800 !important;
        color: var(--navy, #1D3557) !important;
    }
}
@media (max-width: 480px) {
    .teacher-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── #4 Upcoming lessons: stack actions on narrow phones ────────── */
@media (max-width: 480px) {
    .teacher-section div[style*="display:flex"][style*="border-left:4px"] {
        flex-wrap: wrap !important;
    }
}

/* ── #5 Action reminders: stack on narrow phones ───────────────── */
@media (max-width: 480px) {
    .tch-section div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] > a[style*="flex:1"] {
        flex: 1 0 100% !important;
        min-width: 0 !important;
    }
}

/* ── #6 Challenges widget: wrap progress on narrow phones ──────── */
@media (max-width: 480px) {
    .tch-challenges-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .tch-challenges-progress {
        width: 100% !important;
    }
    .tch-challenges-bar {
        flex: 1 !important;
        width: auto !important;
    }
}

/* ── #7 Ranking widget: stack on narrow phones ─────────────────── */
@media (max-width: 480px) {
    .tch-ranking-top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
}

/* ── #8 Calendar legend: wrap on narrow screens ────────────────── */
@media (max-width: 400px) {
    .tch-cal-legend {
        flex-wrap: wrap !important;
        gap: 8px 12px !important;
    }
}

/* ── #9 Next lesson banner: stack on phones ────────────────────── */
@media (max-width: 480px) {
    .tch-next-lesson-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .tch-nl-prep-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── #10 GCal alert: stack button on phones ────────────────────── */
@media (max-width: 480px) {
    .tch-gcal-alert {
        flex-wrap: wrap !important;
    }
    .tch-gcal-alert-btn {
        width: 100% !important;
        text-align: center !important;
        margin-top: 8px !important;
    }
}

/* ── #11 Payment cards: stack on phones ────────────────────────── */
@media (max-width: 480px) {
    .tch-payment-row {
        flex-direction: column !important;
    }
    .tch-payment-card {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ── #12 Schedule list items: wrap actions on phones ───────────── */
@media (max-width: 480px) {
    .teacher-schedule-item {
        flex-wrap: wrap !important;
    }
    .tch-schedule-actions {
        width: 100% !important;
        display: flex !important;
        gap: 6px !important;
    }
    .tch-schedule-actions .btn {
        flex: 1 !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* =================================================================
   TEACHER STUDENT-DETAIL — Mobile Fixes (Apr 2026)
   All additive. No existing rules modified.
   ================================================================= */

/* Course cards: stack to single column on narrow phones */
@media (max-width: 540px) {
    .sd-courses {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* Handoff notes grid: stack on phones */
@media (max-width: 480px) {
    .sd-handoff-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Note form: stack textarea and button vertically on phones */
@media (max-width: 480px) {
    .sd-note-form {
        flex-direction: column !important;
    }
    .sd-note-form textarea {
        width: 100% !important;
    }
    .sd-note-form button {
        width: 100% !important;
    }
}

/* Fix sidebar mobile conflicts — Apr 2026 */
@media (max-width: 768px) {
    .teacher-hub-layout .teacher-sidebar {
        top: 60px !important;
        left: -260px !important;
        width: 240px !important;
        height: calc(100vh - 60px) !important;
        z-index: 1000 !important;
        overflow-y: auto !important;
    }
    .teacher-hub-layout .teacher-sidebar.tch-sidebar--open {
        left: 0 !important;
    }
}

/* Schedule grid tablet fix — Apr 2026 */
@media (max-width: 768px) {
    .schedule-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }
    .schedule-day-name {
        font-size: 12px !important;
    }
    .schedule-day-num {
        font-size: 14px !important;
    }
    .schedule-month-cell {
        min-height: 65px !important;
        padding: 5px !important;
    }
    .schedule-month-dot {
        font-size: 10px !important;
        padding: 2px 4px !important;
    }
}

/* =================================================================
   TEACHER DASHBOARD — Dark Mode (Apr 2026)
   All additive. No existing rules modified.
   ================================================================= */

/* Main layout */
[data-theme="dark"] .teacher-main { background: #0f172a !important; }
[data-theme="dark"] .teacher-page { color: #e2e8f0; }

/* Lesson prep page */
[data-theme="dark"] .tch-prep-student-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .tch-prep-stat { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .tch-prep-stat-number { color: #f1f5f9; }
[data-theme="dark"] .tch-prep-stat-label { color: #94a3b8; }
[data-theme="dark"] .tch-prep-lesson-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .tch-prep-lesson-date { color: #cbd5e1; }
[data-theme="dark"] .tch-prep-lesson-summary { color: #94a3b8; }
[data-theme="dark"] .tch-prep-vocab-table { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .tch-prep-vocab-table th { background: #1e293b; color: #94a3b8; border-color: #334155; }
[data-theme="dark"] .tch-prep-vocab-table td { color: #e2e8f0; border-color: #334155; }
[data-theme="dark"] .tch-prep-progress-bar { background: #334155; }
[data-theme="dark"] .tch-prep-note { background: #0f172a; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .tch-prep-note-date { color: #64748b; }
[data-theme="dark"] .tch-prep-section-title { color: #f1f5f9; }
[data-theme="dark"] .tch-prep-empty { color: #64748b; }
[data-theme="dark"] .tch-prep-btn--secondary { background: #1e293b; border-color: #475569; color: #cbd5e1; }
[data-theme="dark"] .tch-prep-back { color: #94a3b8; }
[data-theme="dark"] .tch-prep-srs-dots span { background: #334155; }

/* Student manager — summary bar, filters */
[data-theme="dark"] .tch-summary-bar { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .tch-summary-pill { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .tch-summary-pill strong { color: #f1f5f9; }
[data-theme="dark"] .tch-filter-pill { background: #1e293b; border-color: #475569; color: #cbd5e1; }
[data-theme="dark"] .tch-filter-pill--active { background: #334155; color: #f1f5f9; border-color: #475569; }

/* Alerts and badges */
[data-theme="dark"] .tch-alert-badge { background: rgba(220,38,38,.15); color: #fca5a5; }
[data-theme="dark"] .tch-scard-low-alert { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.2); }
[data-theme="dark"] .tch-low-balance-alert { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.2); }
[data-theme="dark"] .tch-low-balance-alert-title { color: #fca5a5; }

/* Handoff / Bàn giao system */
[data-theme="dark"] .tch-scard-bangiao { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.2); }
[data-theme="dark"] .sd-handoff-card { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.2); }
[data-theme="dark"] .sd-handoff-teacher { color: #fcd34d; }
[data-theme="dark"] .sd-handoff-date { color: #fbbf24; }
[data-theme="dark"] .sd-handoff-body { color: #e2e8f0; }
[data-theme="dark"] .sd-handoff-badge--pending { background: rgba(245,158,11,.15); color: #fcd34d; }
[data-theme="dark"] .sd-handoff-badge--assigned { background: rgba(34,197,94,.15); color: #86efac; }

/* Action buttons */
[data-theme="dark"] .sd-action-btn { border-color: #475569; color: #cbd5e1; }
[data-theme="dark"] .sd-action-btn--warn { color: #fca5a5; background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.3); }
[data-theme="dark"] .sd-action-btn--handoff { color: #fcd34d; background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); }

/* Form cards */
[data-theme="dark"] .tch-form-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .tch-form-card-icon { background: rgba(220,38,38,.1); }
[data-theme="dark"] .tch-form-card-body h3 { color: #f1f5f9; }
[data-theme="dark"] .tch-form-card-body p { color: #94a3b8; }
[data-theme="dark"] .tch-form-auto-badge { background: rgba(16,185,129,.15) !important; color: #6ee7b7 !important; }

/* Learning profile cards */
[data-theme="dark"] .sd-lp-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .sd-lp-icon--blue { background: rgba(59,130,246,.15); }
[data-theme="dark"] .sd-lp-icon--purple { background: rgba(124,58,237,.15); }
[data-theme="dark"] .sd-lp-icon--amber { background: rgba(245,158,11,.15); }
[data-theme="dark"] .sd-lp-icon--green { background: rgba(16,185,129,.15); }
[data-theme="dark"] .sd-lp-label { color: #94a3b8; }
[data-theme="dark"] .sd-lp-value { color: #f1f5f9; }

/* Recently mastered */
[data-theme="dark"] .sd-mastered-title { color: #e2e8f0; }
[data-theme="dark"] .sd-mastered-item { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .sd-mastered-word { color: #f1f5f9; }
[data-theme="dark"] .sd-mastered-badge--vocab { background: rgba(59,130,246,.15); color: #93c5fd; }
[data-theme="dark"] .sd-mastered-badge--grammar { background: rgba(124,58,237,.15); color: #c4b5fd; }
[data-theme="dark"] .sd-mastered-date { color: #94a3b8; }

/* Balance section in student detail */
[data-theme="dark"] .sd-balance-alert { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.2); }
[data-theme="dark"] .sd-balance-stat { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .sd-balance-icon--blue { background: rgba(59,130,246,.15); }
[data-theme="dark"] .sd-balance-icon--green { background: rgba(16,185,129,.15); }
[data-theme="dark"] .sd-balance-icon--red { background: rgba(220,38,38,.15); }
[data-theme="dark"] .sd-balance-val { color: #f1f5f9; }
[data-theme="dark"] .sd-balance-lbl { color: #94a3b8; }
[data-theme="dark"] .sd-balance-sub { color: #94a3b8; }

/* Month navigation */
[data-theme="dark"] .tch-month-lbl { color: #f1f5f9; }
[data-theme="dark"] .tch-month-arrow { color: #94a3b8; }
[data-theme="dark"] .tch-month-arrow:hover { color: #f1f5f9; }

/* =================================================================
   TEACHER DASHBOARD — Mobile + Dark Mode Final Pass (Apr 2026)
   All additive. No existing rules modified.
   ================================================================= */

/* ── Mobile: Student activity cards stack on small phones ── */
@media (max-width: 480px) {
    .teacher-section div[style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* ── Mobile: Calendar booking touch target 44px ── */
.tch-cal-mbooking { min-height: 44px; }

/* ── Dark Mode: Dashboard hero & stats ── */
[data-theme="dark"] .teacher-dashboard-hero { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-color: #334155; }
[data-theme="dark"] .teacher-hero-text h1,
[data-theme="dark"] .teacher-hero-text h2 { color: #f1f5f9; }
[data-theme="dark"] .teacher-hero-text p { color: #94a3b8; }
[data-theme="dark"] .teacher-hero-schedule { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.2); }
[data-theme="dark"] .teacher-hero-schedule-count { color: #fca5a5; }
[data-theme="dark"] .teacher-hero-schedule-label { color: #94a3b8; }
[data-theme="dark"] .teacher-stat-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .teacher-stat-number { color: #f1f5f9 !important; }
[data-theme="dark"] .teacher-stat-label { color: #94a3b8 !important; }
[data-theme="dark"] .teacher-stat-value { color: #f1f5f9 !important; }

/* ── Dark Mode: Next lesson banner ── */
[data-theme="dark"] .tch-next-lesson-banner { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .tch-nl-title { color: #f1f5f9; }
[data-theme="dark"] .tch-nl-meta { color: #94a3b8; }

/* ── Dark Mode: Section headers ── */
[data-theme="dark"] .teacher-section { color: #e2e8f0; }
[data-theme="dark"] .teacher-section-header h2 { color: #f1f5f9; }
[data-theme="dark"] .teacher-section-link { color: #94a3b8; }

/* ── Dark Mode: Schedule list ── */
[data-theme="dark"] .teacher-schedule-list { background: #1e293b !important; border-color: #334155; }
[data-theme="dark"] .teacher-schedule-item { border-color: #334155; }
[data-theme="dark"] .teacher-schedule-time { color: #cbd5e1; }
[data-theme="dark"] .teacher-schedule-info strong { color: #f1f5f9; }
[data-theme="dark"] .teacher-schedule-info span { color: #94a3b8; }
[data-theme="dark"] .tch-empty-day { background: #1e293b !important; border-color: #334155; }
[data-theme="dark"] .tch-empty-day p,
[data-theme="dark"] .tch-empty-text { color: #64748b; }

/* ── Dark Mode: Calendar widget ── */
[data-theme="dark"] .tch-cal-grid { background: #334155; border-color: #334155; }
[data-theme="dark"] .tch-cal-dow { background: #1e293b; color: #94a3b8; }
[data-theme="dark"] .tch-cal-cell { background: #0f172a; }
[data-theme="dark"] .tch-cal-cell--empty { background: #0f172a; opacity: .5; }
[data-theme="dark"] .tch-cal-cell--wknd { background: rgba(15,23,42,.8); }
[data-theme="dark"] .tch-cal-cell--today { background: rgba(220,38,38,.08) !important; }
[data-theme="dark"] .tch-cal-day-num { color: #cbd5e1; }
[data-theme="dark"] .tch-cal-cell--today .tch-cal-day-num { color: #fca5a5; }
[data-theme="dark"] .tch-cal-booking:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .tch-cal-time { color: #94a3b8; }
[data-theme="dark"] .tch-cal-name { color: #e2e8f0; }
[data-theme="dark"] .tch-cal-more { color: #64748b; }
[data-theme="dark"] .tch-cal-legend { color: #94a3b8; }

/* ── Dark Mode: Calendar mobile list ── */
[data-theme="dark"] .tch-cal-mobile-list { color: #e2e8f0; }
[data-theme="dark"] .tch-cal-mday { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .tch-cal-mday-header { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .tch-cal-mday-date { color: #cbd5e1; }
[data-theme="dark"] .tch-cal-mday-date--today { color: #fca5a5; }
[data-theme="dark"] .tch-cal-mday-count { color: #94a3b8; }
[data-theme="dark"] .tch-cal-mbooking { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .tch-cal-mbooking:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .tch-cal-mtime { color: #94a3b8; }
[data-theme="dark"] .tch-cal-mname { color: #e2e8f0; }
[data-theme="dark"] .tch-cal-empty-month { color: #64748b; }

/* ── Dark Mode: Announcement cards ── */
[data-theme="dark"] .teacher-announcement-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .teacher-announcement-card:hover { background: #253348 !important; }
[data-theme="dark"] .teacher-announcement-content h3 { color: #f1f5f9; }
[data-theme="dark"] .teacher-announcement-content p { color: #94a3b8; }
[data-theme="dark"] .teacher-announcement-date { color: #64748b; }

/* ── Dark Mode: Lesson history cards ── */
[data-theme="dark"] .teacher-lesson-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .teacher-lesson-card:hover { background: #253348 !important; }
[data-theme="dark"] .teacher-lesson-student { color: #f1f5f9; }
[data-theme="dark"] .teacher-lesson-summary { color: #94a3b8; }
[data-theme="dark"] .teacher-lesson-meta { color: #64748b; }
[data-theme="dark"] .teacher-lesson-date { color: #64748b; }
[data-theme="dark"] .teacher-lesson-rating .star--empty { color: #475569; }

/* ── Dark Mode: Quick action cards ── */
[data-theme="dark"] .teacher-action-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .teacher-action-card:hover { background: #253348 !important; border-color: #475569 !important; }
[data-theme="dark"] .teacher-action-card span { color: #cbd5e1; }

/* ── Dark Mode: Feedback cards ── */
[data-theme="dark"] .teacher-feedback-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .teacher-feedback-student { color: #f1f5f9; }
[data-theme="dark"] .teacher-feedback-content { color: #94a3b8; }
[data-theme="dark"] .teacher-feedback-rating .star--empty { color: #475569; }

/* ── Dark Mode: Ranking & challenges widgets ── */
[data-theme="dark"] .tch-ranking-widget { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .tch-challenges-widget { background: linear-gradient(135deg, rgba(220,38,38,.08) 0%, #1e293b 100%) !important; border-color: #334155 !important; }
[data-theme="dark"] .tch-avail-alert { background: rgba(245,158,11,.08) !important; border-color: rgba(245,158,11,.2) !important; }

/* ── Dark Mode: Upcoming lesson cards ── */
[data-theme="dark"] .tch-upcoming-card { background: #1e293b !important; border-color: #334155 !important; }

/* ── Dark Mode: Payment rows ── */
[data-theme="dark"] .tch-payment-row { border-color: #334155; }
[data-theme="dark"] .tch-payment-label { color: #94a3b8; }
[data-theme="dark"] .tch-payment-value { color: #f1f5f9; }
[data-theme="dark"] .tch-payment-currency { color: #64748b; }

/* ── Dark Mode: Google Calendar modal ── */
[data-theme="dark"] .tch-gcal-modal { background: #1e293b !important; border-color: #334155 !important; }

/* ── Dark Mode: Birthday banner ── */
[data-theme="dark"] .dash-birthday-banner { background: linear-gradient(135deg, #78350f 0%, #92400e 30%, #b45309 60%, #a16207 100%); box-shadow: 0 4px 20px rgba(245,158,11,.15); }
[data-theme="dark"] .dash-birthday-content h2 { color: #fbbf24; }
[data-theme="dark"] .dash-birthday-content p { color: #fcd34d; }
[data-theme="dark"] .dash-birthday-close { color: #fcd34d; }
[data-theme="dark"] .dash-birthday-close:hover { opacity: 1; }

/* ── Dark Mode: Star ratings (filled) ── */
[data-theme="dark"] .star--filled { color: #fbbf24; }
[data-theme="dark"] .teacher-lesson-rating .star--filled { color: #fbbf24; }
[data-theme="dark"] .teacher-feedback-rating .star--filled { color: #fbbf24; }
[data-theme="dark"] .teacher-stars-sm .star--filled { color: #fbbf24; }
[data-theme="dark"] .lessons-stars-inline .star--filled { color: #fbbf24; }

/* ══════════════════════════════════════════════════════════════
   COMPREHENSIVE DARK MODE — Teacher Dashboard Pages
   ══════════════════════════════════════════════════════════════ */

/* ── Layout: sidebar + main ─────────────────────────────────── */
[data-theme="dark"] .teacher-sidebar { background: #0f172a !important; box-shadow: 2px 0 12px rgba(0,0,0,.3); }
[data-theme="dark"] .teacher-sidebar-profile { background: linear-gradient(180deg, rgba(220,38,38,.08) 0%, #0f172a 100%) !important; border-bottom-color: #334155 !important; }
[data-theme="dark"] .teacher-nav-item { color: #94a3b8; }
[data-theme="dark"] .teacher-nav-item:hover { background: #1e293b; color: #e2e8f0; }
[data-theme="dark"] .teacher-nav-item.active { color: #f87171; background: rgba(220,38,38,.08); border-left-color: #f87171; }
[data-theme="dark"] .teacher-sidebar-footer { border-top-color: #334155 !important; }
[data-theme="dark"] .teacher-sidebar-footer a { color: #64748b; }
[data-theme="dark"] .tch-sidebar-toggle { border-color: #475569; background: #1e293b; color: #e2e8f0; }

/* ── Dashboard: hero, banners, alerts ──────────────────────── */
[data-theme="dark"] .tch-next-lesson-banner { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .tch-gcal-modal { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .tch-gcal-modal h2 { color: #f1f5f9 !important; }
[data-theme="dark"] .tch-gcal-modal p { color: #94a3b8 !important; }

/* ── Dashboard: calendar widget ──────────────────────────── */
[data-theme="dark"] .tch-cal-grid { border-color: #334155; }
[data-theme="dark"] .tch-cal-dow { background: #0f172a; color: #64748b; border-color: #334155; }
[data-theme="dark"] .tch-cal-cell { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .tch-cal-cell--empty { background: #0f172a; }
[data-theme="dark"] .tch-cal-cell--wknd { background: rgba(15,23,42,.6); }
[data-theme="dark"] .tch-cal-cell--today { background: rgba(220,38,38,.08); box-shadow: inset 0 0 0 2px #dc2626; }
[data-theme="dark"] .tch-cal-day-num { color: #94a3b8; }
[data-theme="dark"] .tch-cal-cell--today .tch-cal-day-num { color: #f87171; }
[data-theme="dark"] .tch-cal-booking { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); }
[data-theme="dark"] .tch-cal-time { color: #94a3b8; }
[data-theme="dark"] .tch-cal-name { color: #e2e8f0; }
[data-theme="dark"] .tch-cal-mobile-list { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .tch-cal-mday { border-color: #334155; }
[data-theme="dark"] .tch-cal-mday-header { background: #0f172a; }
[data-theme="dark"] .tch-cal-mday-date { color: #94a3b8; }
[data-theme="dark"] .tch-cal-mday-date--today { color: #f87171; }
[data-theme="dark"] .tch-cal-mbooking { background: #0f172a; border-color: #334155; }

/* ── Dashboard: action cards ───────────────────────────────── */
[data-theme="dark"] .teacher-action-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .teacher-action-card:hover { border-color: #475569 !important; }
[data-theme="dark"] .teacher-action-icon { opacity: .8; }

/* ── Dashboard: challenge & availability alerts ────────────── */
[data-theme="dark"] .tch-avail-alert { background: rgba(245,158,11,.06) !important; border-color: rgba(245,158,11,.15) !important; }
[data-theme="dark"] .tch-avail-alert, [data-theme="dark"] .tch-avail-alert * { color: #fbbf24 !important; }

/* ── Lessons page ─────────────────────────────────────────── */
[data-theme="dark"] .lessons-stat-card { background: #1e293b !important; border-color: #334155 !important; box-shadow: 0 1px 4px rgba(0,0,0,.2) !important; }
[data-theme="dark"] .lessons-stat-card .lessons-stat-label { color: #94a3b8 !important; }
[data-theme="dark"] .lessons-stat-card .lessons-stat-value { color: #f1f5f9 !important; }
[data-theme="dark"] .lessons-stat-icon--total { background: rgba(96,165,250,.12) !important; color: #60a5fa !important; }
[data-theme="dark"] .lessons-stat-icon--period { background: rgba(248,113,113,.12) !important; color: #f87171 !important; }
[data-theme="dark"] .lessons-stat-icon--students { background: rgba(52,211,153,.12) !important; color: #34d399 !important; }
[data-theme="dark"] .lessons-stat-icon--rating { background: rgba(251,191,36,.12) !important; color: #fbbf24 !important; }
[data-theme="dark"] .lessons-stat-icon--hours { background: rgba(96,165,250,.12) !important; color: #60a5fa !important; }
[data-theme="dark"] .lessons-search-input { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .lessons-search-input:focus { border-color: #f87171 !important; background: #1e293b !important; }
[data-theme="dark"] .lessons-filter-bar { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .lessons-period-pill { color: #94a3b8 !important; background: #0f172a !important; }
[data-theme="dark"] .lessons-period-pill.active { color: #fff !important; background: #dc2626 !important; }

/* ── Student detail ───────────────────────────────────────── */
[data-theme="dark"] .sd-course-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .sd-course-name { color: #e2e8f0 !important; }
[data-theme="dark"] .sd-course-enrolled { color: #94a3b8 !important; }
[data-theme="dark"] .sd-handoff-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .sd-handoff-badge--pending { background: rgba(245,158,11,.12) !important; color: #fbbf24 !important; }
[data-theme="dark"] .sd-handoff-badge--assigned { background: rgba(52,211,153,.12) !important; color: #34d399 !important; }

/* ── Student detail: inline-styled elements — dark mode ──── */
/* Course enrollment cards (override inline color/bg) */
[data-theme="dark"] .sd-course-title { color: #e2e8f0 !important; }
[data-theme="dark"] .sd-course-pct { color: #94a3b8 !important; }
[data-theme="dark"] .sd-course-info { color: #94a3b8 !important; }
[data-theme="dark"] .sd-course-progress-track { background: #334155 !important; }
[data-theme="dark"] .sd-show-all-btn { background: #1e293b !important; border-color: #475569 !important; color: #94a3b8 !important; }
/* Notes section */
[data-theme="dark"] .sd-note-form textarea { background: #0f172a !important; color: #e2e8f0 !important; border-color: #475569 !important; }
[data-theme="dark"] .sd-note-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .sd-note-date-text { color: #94a3b8 !important; }
[data-theme="dark"] .sd-note-content { color: #e2e8f0 !important; }
[data-theme="dark"] .sd-notes-empty { color: #94a3b8 !important; }
[data-theme="dark"] .sd-notes-private { color: #94a3b8 !important; }
/* Handoff cards (formal) */
[data-theme="dark"] .sd-handoff-card-wrap { background: #1e293b !important; border-color: #475569 !important; }
[data-theme="dark"] .sd-handoff-teacher-name { color: #e2e8f0 !important; }
[data-theme="dark"] .sd-handoff-date-text { color: #94a3b8 !important; }
[data-theme="dark"] .sd-handoff-field { background: #0f172a !important; border-color: #334155 !important; }
[data-theme="dark"] .sd-handoff-field-lbl { color: #94a3b8 !important; }
[data-theme="dark"] .sd-handoff-field-val { color: #e2e8f0 !important; }
[data-theme="dark"] .sd-handoff-status--pending { background: rgba(245,158,11,.12) !important; color: #fbbf24 !important; }
[data-theme="dark"] .sd-handoff-status--assigned { background: rgba(52,211,153,.12) !important; color: #34d399 !important; }
/* Handoff warning (informal — no formal handoff exists) */
[data-theme="dark"] .sd-handoff-warning { background: rgba(245,158,11,.08) !important; border-color: rgba(245,158,11,.2) !important; }
[data-theme="dark"] .sd-handoff-warning-title { color: #fbbf24 !important; }
[data-theme="dark"] .sd-handoff-warning-desc { color: #fcd34d !important; }
[data-theme="dark"] .sd-prev-teacher { background: #1e293b !important; border-color: rgba(245,158,11,.2) !important; }
[data-theme="dark"] .sd-prev-teacher-name { color: #e2e8f0 !important; }
[data-theme="dark"] .sd-prev-teacher-count { color: #94a3b8 !important; }
[data-theme="dark"] .sd-prev-teacher-last { color: #94a3b8 !important; }
[data-theme="dark"] .sd-prev-lessons-title { color: #fbbf24 !important; }
[data-theme="dark"] .sd-prev-lesson-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .sd-prev-lesson-header { color: #e2e8f0 !important; }
[data-theme="dark"] .sd-prev-lesson-summary { color: #cbd5e1 !important; }
[data-theme="dark"] .sd-prev-lesson-feedback { color: #94a3b8 !important; }
[data-theme="dark"] .sd-handoff-none { background: #1e293b !important; color: #94a3b8 !important; }
/* Handoff previous teacher avatar placeholder */
[data-theme="dark"] .sd-handoff-avatar-ph { background: rgba(245,158,11,.15) !important; color: #fbbf24 !important; }
[data-theme="dark"] .sd-prev-lessons-border { border-color: rgba(245,158,11,.2) !important; }

/* ── Assessments page ──────────────────────────────────────── */
[data-theme="dark"] .assess-tab { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; }
[data-theme="dark"] .assess-tab.active { background: #dc2626 !important; color: #fff !important; border-color: #dc2626 !important; }
[data-theme="dark"] .assess-search { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .assess-loading { color: #64748b !important; }
[data-theme="dark"] .assess-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .assess-card-meta { color: #64748b !important; }
[data-theme="dark"] .assess-card-preview { background: #0f172a !important; color: #94a3b8 !important; }
[data-theme="dark"] .assess-btn-view { background: #334155 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .assess-btn-view:hover { background: #475569 !important; }
[data-theme="dark"] .assess-card-score { color: #34d399 !important; }
[data-theme="dark"] .assess-ai-summary { background: rgba(59,130,246,.08) !important; border-left-color: #60a5fa !important; color: #94a3b8 !important; }
[data-theme="dark"] .assess-modal { background: #1e293b !important; color: #e2e8f0 !important; }
[data-theme="dark"] .assess-modal-header { border-bottom-color: #334155 !important; }
[data-theme="dark"] .assess-modal-close { background: #334155 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .assess-modal-text { background: #0f172a !important; color: #94a3b8 !important; }
[data-theme="dark"] .assess-type-writing { background: rgba(251,191,36,.12) !important; color: #fbbf24 !important; }
[data-theme="dark"] .assess-type-speaking { background: rgba(96,165,250,.12) !important; color: #60a5fa !important; }
[data-theme="dark"] .assess-type-grammar { background: rgba(167,139,250,.12) !important; color: #a78bfa !important; }
[data-theme="dark"] .assess-status-graded { background: rgba(52,211,153,.12) !important; color: #34d399 !important; }
[data-theme="dark"] .assess-status-pending { background: rgba(251,191,36,.12) !important; color: #fbbf24 !important; }
[data-theme="dark"] .assess-status-draft { background: rgba(148,163,184,.12) !important; color: #94a3b8 !important; }

/* ── Student notes ────────────────────────────────────────── */
[data-theme="dark"] .sn-header h1 { color: #e2e8f0 !important; }
[data-theme="dark"] .sn-selector label { color: #94a3b8 !important; }
[data-theme="dark"] .sn-selector select { background: #1e293b !important; color: #e2e8f0 !important; border-color: #475569 !important; }
[data-theme="dark"] .sn-student-header { background: linear-gradient(135deg, rgba(220,38,38,.06) 0%, #1e293b 100%) !important; border-color: #334155 !important; }
[data-theme="dark"] .sn-student-info h2 { color: #e2e8f0 !important; }
[data-theme="dark"] .sn-student-info p { color: #64748b !important; }
[data-theme="dark"] .sn-filter-pill { background: #1e293b !important; border-color: #475569 !important; color: #94a3b8 !important; }
[data-theme="dark"] .sn-filter-pill.active { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }
[data-theme="dark"] .sn-note-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .sn-note-card h3 { color: #e2e8f0 !important; }
[data-theme="dark"] .sn-note-card .sn-note-date { color: #64748b !important; }
[data-theme="dark"] .sn-note-content { color: #94a3b8 !important; }
[data-theme="dark"] .sn-note-ai { background: rgba(59,130,246,.08) !important; color: #60a5fa !important; }
[data-theme="dark"] .sn-credit-notice { background: rgba(22,163,74,.06) !important; border-color: rgba(22,163,74,.2) !important; color: #34d399 !important; }

/* ── Challenges page ──────────────────────────────────────── */
[data-theme="dark"] .ch-intro-card { background: rgba(59,130,246,.08) !important; border-color: rgba(59,130,246,.2) !important; }
[data-theme="dark"] .ch-intro-card p { color: #60a5fa !important; }
[data-theme="dark"] .ch-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .ch-card-header { color: #e2e8f0 !important; }
[data-theme="dark"] .ch-card-body { color: #94a3b8 !important; }
[data-theme="dark"] .ch-card.unlocked { background: rgba(220,38,38,.06) !important; border-color: rgba(220,38,38,.3) !important; }
[data-theme="dark"] .ch-card--completed { background: rgba(220,38,38,.04) !important; }
[data-theme="dark"] .ch-card--completed .ch-card-icon { background: rgba(52,211,153,.12) !important; }
[data-theme="dark"] .ch-card-title { color: #e2e8f0 !important; }
[data-theme="dark"] .ch-card-desc { color: #94a3b8 !important; }
[data-theme="dark"] .ch-reward-pill { background: #334155 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .ch-completed { background: rgba(52,211,153,.12) !important; color: #34d399 !important; }

/* ── Forms page ──────────────────────────────────────────── */
[data-theme="dark"] .tch-form-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .tch-form-card-body h3 { color: #e2e8f0 !important; }
[data-theme="dark"] .tch-form-card-body p { color: #94a3b8 !important; }
[data-theme="dark"] .tch-form-auto-badge { background: rgba(52,211,153,.12) !important; color: #34d399 !important; }

/* ── Quiz dashboard ──────────────────────────────────────── */
[data-theme="dark"] .tqd-title { color: #e2e8f0 !important; }
[data-theme="dark"] .tqd-stat { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .tqd-stat-num { color: #f1f5f9 !important; }
[data-theme="dark"] .tqd-stat-label { color: #64748b !important; }
[data-theme="dark"] .tqd-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .tqd-card h3 { color: #e2e8f0 !important; }
[data-theme="dark"] .tqd-table th { color: #64748b !important; border-bottom-color: #334155 !important; }
[data-theme="dark"] .tqd-table td { color: #94a3b8 !important; border-bottom-color: #1e293b !important; }
[data-theme="dark"] .tqd-level { background: #334155 !important; color: #94a3b8 !important; }

/* ── Schedule / booking ──────────────────────────────────── */
[data-theme="dark"] .schedule-modal-header h3 { color: #e2e8f0 !important; }
[data-theme="dark"] .schedule-modal-body p { color: #94a3b8 !important; }

/* ── Lesson prep ──────────────────────────────────────────── */
[data-theme="dark"] .tch-prep-profile-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .tch-prep-profile-name { color: #e2e8f0 !important; }
[data-theme="dark"] .tch-prep-stat-pill { background: #334155 !important; color: #94a3b8 !important; }
[data-theme="dark"] .tch-prep-section { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .tch-prep-section-header h2 { color: #e2e8f0 !important; }
[data-theme="dark"] .tch-prep-subtitle { color: #64748b !important; }
[data-theme="dark"] .tch-prep-lesson-item { background: #0f172a !important; border-color: #334155 !important; }
[data-theme="dark"] .tch-prep-lesson-date { color: #64748b !important; }
[data-theme="dark"] .tch-prep-lesson-summary { color: #94a3b8 !important; }
[data-theme="dark"] .tch-prep-lp-card { background: #0f172a !important; border-color: #334155 !important; }
[data-theme="dark"] .tch-prep-lp-value { color: #e2e8f0 !important; }
[data-theme="dark"] .tch-prep-vocab-table th { color: #64748b !important; }
[data-theme="dark"] .tch-prep-vocab-table td { color: #94a3b8 !important; border-bottom-color: #334155 !important; }
[data-theme="dark"] .tch-prep-srs-dot { background: #475569 !important; }
[data-theme="dark"] .tch-prep-note-item { background: #0f172a !important; border-color: #334155 !important; color: #94a3b8 !important; }
[data-theme="dark"] .tch-prep-btn--outline { background: #1e293b !important; border-color: #475569 !important; color: #94a3b8 !important; }

/* ── Error page ──────────────────────────────────────────── */
[data-theme="dark"] .tch-error-code { color: #f87171 !important; }
[data-theme="dark"] .tch-error-message { color: #94a3b8 !important; }

/* ── Generic dark mode helpers for inline styles ────────── */
[data-theme="dark"] .teacher-page .teacher-table { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .teacher-page .teacher-table th { background: #0f172a !important; color: #94a3b8 !important; border-color: #334155 !important; }
[data-theme="dark"] .teacher-page .teacher-table td { color: #e2e8f0 !important; border-color: #334155 !important; }
[data-theme="dark"] .teacher-page .teacher-table tr:hover td { background: rgba(30,41,59,.5) !important; }
[data-theme="dark"] .teacher-table-wrap { background: #1e293b !important; border-color: #334155 !important; }

/* ── Teacher Timezone Warning Badge ────────────────────────── */
.tch-tz-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 10px;
    padding: 12px 16px;
    margin: -8px 0 16px;
    font-size: .82rem;
    line-height: 1.45;
    color: #78350f;
}
.tch-tz-warning-icon {
    flex-shrink: 0;
    color: #d97706;
    margin-top: 1px;
}
.tch-tz-warning-text strong { color: #92400e; }
.tch-tz-warning-text em { font-style: normal; background: #fff7ed; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
[data-theme="dark"] .tch-tz-warning { background: #422006; border-color: #92400e; color: #fef3c7; }
[data-theme="dark"] .tch-tz-warning-text strong { color: #fbbf24; }
[data-theme="dark"] .tch-tz-warning-text em { background: #78350f; color: #fef3c7; }

/* ════════════════════════════════════════════════════════════════ */
/* Dashboard 2-column grid: main flow + sticky announcements rail   */
/* ════════════════════════════════════════════════════════════════ */
.teacher-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas: "main rail";
    gap: 24px;
    align-items: start;
}
.teacher-dash-main { grid-area: main; min-width: 0; }
.teacher-dash-rail { grid-area: rail; min-width: 0; }

.teacher-dash-rail-inner {
    position: sticky;
    top: 80px;
}

.teacher-dash-rail-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--gray-100, #f3f4f6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.teacher-dash-rail-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-bottom: 1px solid #fecaca;
    color: #991b1b;
}
.teacher-dash-rail-header svg { color: #dc2626; flex-shrink: 0; }
.teacher-dash-rail-header h3 {
    flex: 1;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #991b1b;
}
.teacher-dash-rail-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.teacher-dash-rail-list {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    scrollbar-width: thin;
}
.teacher-dash-rail-list::-webkit-scrollbar { width: 6px; }
.teacher-dash-rail-list::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }

.teacher-dash-rail-item {
    position: relative;
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background .15s, transform .15s;
    outline-offset: -2px;
}
.teacher-dash-rail-item:last-child { border-bottom: none; }
.teacher-dash-rail-item:hover { background: #fef2f2; }
.teacher-dash-rail-item:focus-visible { outline: 2px solid #dc2626; background: #fef2f2; }

.teacher-dash-rail-item--new {
    border-left: 3px solid #dc2626;
    padding-left: 13px;
}
.teacher-dash-rail-item--new .badge-new {
    margin-bottom: 6px;
    margin-right: 0;
}
.teacher-dash-rail-item .badge-new {
    display: inline-block;
    margin-bottom: 6px;
}

.teacher-dash-rail-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1D3557;
    line-height: 1.35;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.teacher-dash-rail-preview {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.teacher-dash-rail-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}
.teacher-dash-rail-meta-views {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.teacher-dash-rail-empty {
    text-align: center;
    padding: 28px 16px;
    color: #9ca3af;
}
.teacher-dash-rail-empty svg { color: #d1d5db; margin-bottom: 8px; }
.teacher-dash-rail-empty p { margin: 0; font-size: 13px; font-weight: 500; }

/* Tablet: collapse to single column with rail above main content */
@media (max-width: 1024px) {
    .teacher-dash-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "rail" "main";
        gap: 16px;
    }
    .teacher-dash-rail-inner { position: static; }
    .teacher-dash-rail-list { max-height: none; }
}

/* Mobile: keep rail above schedule, slightly smaller padding */
@media (max-width: 640px) {
    .teacher-dash-grid { gap: 14px; }
    .teacher-dash-rail-card { border-radius: 14px; }
    .teacher-dash-rail-header { padding: 12px 14px; }
    .teacher-dash-rail-item { padding: 12px 14px; }
    .teacher-dash-rail-item--new { padding-left: 11px; }
}

/* Dark theme support */
[data-theme="dark"] .teacher-dash-rail-card {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .teacher-dash-rail-header {
    background: linear-gradient(135deg, #4c1d24 0%, #3f1115 100%);
    border-bottom-color: #5a1a20;
    color: #fecaca;
}
[data-theme="dark"] .teacher-dash-rail-header h3 { color: #fecaca; }
[data-theme="dark"] .teacher-dash-rail-item { border-bottom-color: #374151; }
[data-theme="dark"] .teacher-dash-rail-item:hover { background: #2a1518; }
[data-theme="dark"] .teacher-dash-rail-title { color: #f3f4f6; }
[data-theme="dark"] .teacher-dash-rail-preview { color: #9ca3af; }
[data-theme="dark"] .teacher-dash-rail-meta { color: #6b7280; }
[data-theme="dark"] .teacher-dash-rail-empty { color: #6b7280; }

/* ── Unread announcements toast ─────────────────────────────── */
.ann-unread-toast {
    position: fixed;
    top: 76px;
    left: 50%;
    transform: translate(-50%, -16px);
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #991b1b;
    padding: 12px 14px 12px 12px;
    border-radius: 999px;
    border: 1px solid #fecaca;
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 9000;
    font-size: 13.5px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
    max-width: calc(100vw - 32px);
}
.ann-unread-toast--in {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}
.ann-unread-toast--out {
    opacity: 0;
    transform: translate(-50%, -16px);
}
.ann-unread-toast-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fee2e2;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ann-unread-toast-text { white-space: nowrap; }
.ann-unread-toast-text strong { color: #dc2626; font-weight: 700; }
.ann-unread-toast-close {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background .15s;
}
.ann-unread-toast-close:hover { background: #f3f4f6; color: #374151; }

@media (max-width: 640px) {
    .ann-unread-toast {
        font-size: 12.5px;
        padding: 10px 12px 10px 10px;
        top: 70px;
    }
    .ann-unread-toast-icon { width: 24px; height: 24px; }
    .ann-unread-toast-icon svg { width: 14px; height: 14px; }
    .ann-unread-toast-text { white-space: normal; }
}

[data-theme="dark"] .ann-unread-toast {
    background: #1f2937;
    border-color: #5a1a20;
    color: #fecaca;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .ann-unread-toast-icon { background: #4c1d24; color: #fca5a5; }
[data-theme="dark"] .ann-unread-toast-text strong { color: #fca5a5; }
[data-theme="dark"] .ann-unread-toast-close { color: #6b7280; }
[data-theme="dark"] .ann-unread-toast-close:hover { background: #374151; color: #d1d5db; }

/* =====================================================================
   TEACHER DASHBOARD — VISUAL POLISH LAYER
   Additive only. Do NOT modify rules above.
   Adds: navy token, section rhythm, header polish, card utility,
   hero refinement, group labels, alert family, mobile + dark variants.
   ===================================================================== */

/* 1. New token — SVFF navy (used 16x in dashboard, missing from design system) */
:root {
    --navy-svff: #1D3557;
}
[data-theme="dark"] {
    --navy-svff: #cbd5e1;
}

/* 2. Section rhythm — tighter top margin + scroll anchor offset */
.teacher-page .teacher-section {
    margin-top: 28px;
    scroll-margin-top: 96px;
}

/* 3. Section header — flex row with subtle underline separator */
.teacher-page .teacher-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: 16px;
}
[data-theme="dark"] .teacher-page .teacher-section-header {
    border-bottom-color: var(--gray-700);
}

/* 4. Section header h2 — navy + icon slot */
.teacher-page .teacher-section-header h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy-svff);
    letter-spacing: 0.01em;
    text-transform: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.teacher-page .teacher-section-header h2 svg {
    width: 18px;
    height: 18px;
    color: var(--primary);
    flex-shrink: 0;
    opacity: 0.85;
}

/* 5. Section header link — small pill */
.teacher-page .teacher-section-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}
.teacher-page .teacher-section-link:hover {
    background: var(--primary-50);
    border-color: var(--primary-50);
    text-decoration: none;
}
[data-theme="dark"] .teacher-page .teacher-section-link {
    color: #fca5a5;
}
[data-theme="dark"] .teacher-page .teacher-section-link:hover {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.25);
}

/* 6. Card utility — opt-in, not retrofitted */
.tch-card {
    background: #fff;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-100);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: box-shadow var(--transition), transform var(--transition);
}
.tch-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .tch-card {
    background: #1f2937;
    border-color: var(--gray-700, #374151);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .tch-card:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.4);
}

/* 7. Main column — relative for layering, hairline divider on desktop */
.teacher-page .teacher-dash-main {
    position: relative;
}
@media (min-width: 1024px) {
    .teacher-page .teacher-dash-grid > .teacher-dash-main {
        border-right: 1px solid rgba(0, 0, 0, 0.04);
        padding-right: 24px;
    }
    [data-theme="dark"] .teacher-page .teacher-dash-grid > .teacher-dash-main {
        border-right-color: rgba(255, 255, 255, 0.05);
    }
}

/* 8. Hero polish — generous radius + subtle inner highlight + decorative pattern */
.teacher-page .teacher-dashboard-hero {
    border-radius: 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 24px rgba(220, 38, 38, 0.18);
    padding: 24px 28px;
    position: relative;
    overflow: hidden;
}
.teacher-page .teacher-dashboard-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 15% 85%, rgba(255, 255, 255, 0.06) 0%, transparent 35%);
    z-index: 0;
}
.teacher-page .teacher-dashboard-hero > * {
    position: relative;
    z-index: 1;
}
@media (max-width: 640px) {
    .teacher-page .teacher-dashboard-hero {
        padding: 20px;
    }
}

/* 9. Group label — subtle category divider between sections */
.tch-group-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-500);
    padding: 24px 0 12px;
    border-top: 1px dashed var(--gray-200);
    margin-top: 8px;
}
.tch-group-label:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
[data-theme="dark"] .tch-group-label {
    color: var(--gray-400, #9ca3af);
    border-top-color: var(--gray-700, #374151);
}

/* 10. Stats grid items — hover lift + stronger shadow */
.teacher-page .teacher-stats-grid > * {
    transition: transform var(--transition), box-shadow var(--transition);
}
.teacher-page .teacher-stats-grid > *:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .teacher-page .teacher-stats-grid > *:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* 11. Action card — slight scale on hover */
.teacher-page .teacher-action-card {
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.teacher-page .teacher-action-card:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .teacher-page .teacher-action-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* 12. Alert family — generic, opt-in */
.tch-alert {
    padding: 14px 16px;
    border-radius: 12px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
}
.tch-alert--warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}
.tch-alert--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}
.tch-alert--danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}
.tch-alert--success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}
[data-theme="dark"] .tch-alert--warning {
    background: rgba(146, 64, 14, 0.15);
    border-color: rgba(253, 230, 138, 0.3);
    color: #fde68a;
}
[data-theme="dark"] .tch-alert--info {
    background: rgba(30, 64, 175, 0.18);
    border-color: rgba(191, 219, 254, 0.3);
    color: #bfdbfe;
}
[data-theme="dark"] .tch-alert--danger {
    background: rgba(153, 27, 27, 0.18);
    border-color: rgba(254, 202, 202, 0.3);
    color: #fecaca;
}
[data-theme="dark"] .tch-alert--success {
    background: rgba(22, 101, 52, 0.18);
    border-color: rgba(187, 247, 208, 0.3);
    color: #bbf7d0;
}

/* 13. Mobile rhythm tightening */
@media (max-width: 640px) {
    .teacher-page .teacher-section {
        margin-top: 24px;
        margin-bottom: 24px;
    }
    .teacher-page .teacher-section-header h2 {
        font-size: 15px;
    }
    .tch-group-label {
        font-size: 10px;
        padding: 20px 0 10px;
    }
    .tch-alert {
        padding: 12px 14px;
        font-size: 13px;
    }
}

/* 14. Smooth scroll — only when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ════════════════════════════════════════════════════════════════ */
/* Cert quiz CTA bar — contrast / lighting fix                       */
/* The "Sẵn sàng kiểm tra kiến thức?" / "Làm bài kiểm tra" intro     */
/* bar at /teacher/certification/{module_key} was rendering with     */
/* low-contrast button states on dark theme and a washed-out         */
/* primary button on light theme. This replaces the inline-template  */
/* styles with explicit contrast-safe gradients + dark variants.     */
/* ════════════════════════════════════════════════════════════════ */

.tcmod-cta-actions .btn-primary {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.30);
    border: none;
}
.tcmod-cta-actions .btn-primary:hover {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.40);
}

[data-theme="dark"] .tcmod-quiz-cta {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border: 1px solid #374151;
}
[data-theme="dark"] .tcmod-quiz-cta p {
    color: #d1d5db;
}
[data-theme="dark"] .tcmod-cta-actions .btn-outline {
    background: rgba(255, 255, 255, 0.05);
    border-color: #4b5563;
    color: #e5e7eb;
}
[data-theme="dark"] .tcmod-cta-actions .btn-outline:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: #64748b;
    color: #f3f4f6;
}
[data-theme="dark"] .tcmod-cta-actions .btn-primary {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.50);
}
[data-theme="dark"] .tcmod-cta-actions .btn-primary:hover {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.60);
}

/* ── "Your Teaching Progress" card ─────────────────────────── */
.tch-progress-section {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04);
}
.tch-progress-header {
    flex-wrap: wrap;
    gap: 12px;
    row-gap: 10px;
}
.tch-progress-header h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tch-progress-period-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
}
.tch-progress-filter {
    display: inline-flex;
    align-items: center;
}
.tch-progress-filter .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.tch-progress-filter select {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 32px 8px 14px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") right 10px center / 12px no-repeat;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.tch-progress-filter select:hover {
    border-color: #dc2626;
}
.tch-progress-filter select:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,.15);
}

.tch-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.tch-progress-tile {
    background: #fafbfc;
    border: 1px solid #f3f4f6;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tch-progress-tile:hover {
    transform: translateY(-2px);
    border-color: #fee2e2;
    box-shadow: 0 4px 12px rgba(220,38,38,.08);
}
.tch-progress-tile-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tch-progress-tile-icon--hours    { background: #dbeafe; color: #1d4ed8; }
.tch-progress-tile-icon--lessons  { background: #d1fae5; color: #065f46; }
.tch-progress-tile-icon--students { background: #fef3c7; color: #92400e; }
.tch-progress-tile-icon--rating   { background: #fef9c3; color: #a16207; }
.tch-progress-tile-icon--earnings { background: #fee2e2; color: #991b1b; }

.tch-progress-tile-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1D3557;
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    gap: 2px;
}
.tch-progress-tile-unit {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7280;
    margin-left: 2px;
}
.tch-progress-tile-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    line-height: 1.3;
}
.tch-progress-tile-sublabel {
    font-weight: 500;
    color: #9ca3af;
}
.tch-progress-tile-delta {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    display: inline-block;
    align-self: flex-start;
    margin-top: 2px;
}
.tch-progress-tile-delta--up {
    background: #ecfdf5;
    color: #047857;
}
.tch-progress-tile-delta--down {
    background: #fef2f2;
    color: #b91c1c;
}

.tch-progress-encourage {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #fef2f2 0%, #fff 100%);
    border: 1px solid #fee2e2;
    border-radius: 10px;
    color: #991b1b;
    font-size: 13px;
    font-weight: 600;
}
.tch-progress-encourage svg {
    flex-shrink: 0;
}

.tch-progress-empty {
    background: #fafbfc;
    border: 1px dashed #e5e7eb;
    border-radius: 12px;
    padding: 28px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #6b7280;
}
.tch-progress-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #f3f4f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    flex-shrink: 0;
}
.tch-progress-empty p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .tch-progress-section {
        padding: 16px;
    }
    .tch-progress-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .tch-progress-tile {
        padding: 12px;
    }
    .tch-progress-tile-value {
        font-size: 1.35rem;
    }
    .tch-progress-tile-icon {
        width: 32px;
        height: 32px;
    }
}
@media (max-width: 380px) {
    .tch-progress-grid {
        grid-template-columns: 1fr;
    }
}

[data-theme="dark"] .tch-progress-section {
    background: #1f2937;
    border-color: #374151;
}
[data-theme="dark"] .tch-progress-period-label {
    background: #374151;
    color: #d1d5db;
}
[data-theme="dark"] .tch-progress-filter select {
    background-color: #111827;
    border-color: #374151;
    color: #e5e7eb;
}
[data-theme="dark"] .tch-progress-tile {
    background: #111827;
    border-color: #374151;
}
[data-theme="dark"] .tch-progress-tile-value { color: #f3f4f6; }
[data-theme="dark"] .tch-progress-tile-label { color: #9ca3af; }
[data-theme="dark"] .tch-progress-tile-icon--hours    { background: rgba(29,78,216,0.2); color: #60a5fa; }
[data-theme="dark"] .tch-progress-tile-icon--lessons  { background: rgba(6,95,70,0.2);   color: #34d399; }
[data-theme="dark"] .tch-progress-tile-icon--students { background: rgba(146,64,14,0.2); color: #fbbf24; }
[data-theme="dark"] .tch-progress-tile-icon--rating   { background: rgba(161,98,7,0.2);  color: #fde047; }
[data-theme="dark"] .tch-progress-tile-icon--earnings { background: rgba(153,27,27,0.2); color: #fca5a5; }
[data-theme="dark"] .tch-progress-encourage {
    background: linear-gradient(135deg, rgba(220,38,38,.15) 0%, transparent 100%);
    border-color: rgba(220,38,38,.3);
    color: #fca5a5;
}
[data-theme="dark"] .tch-progress-empty {
    background: #111827;
    border-color: #374151;
    color: #9ca3af;
}
[data-theme="dark"] .tch-progress-empty-icon {
    background: #1f2937;
    border-color: #374151;
}

/* ── Lessons table: wide-table affordance (desktop) ──────────────────────────
   The lessons table is wider than the content column on most desktops. It already
   scrolls inside .teacher-table-wrap (so the page never shifts), but the View
   action and the row's identity (Lesson) were getting clipped off the edges with
   no visible cue. Pin the first (Lesson) and last (View) columns so they stay in
   view while the middle scrolls, and keep a visible scrollbar as the affordance.
   Desktop-only — on ≤768px the table reflows into cards (see the mobile block). */
@media (min-width: 769px) {
    #tl-lessons-wrap { scrollbar-width: thin; }
    #tl-lessons-wrap::-webkit-scrollbar { height: 9px; }
    #tl-lessons-wrap::-webkit-scrollbar-track { background: #f8fafc; border-radius: 0 0 12px 12px; }
    #tl-lessons-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
    #tl-lessons-wrap::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    /* Pin the View (last) column at the right — always reachable without scrolling */
    #tl-lessons-wrap .teacher-table th:last-child,
    #tl-lessons-wrap .teacher-table td:last-child {
        position: sticky;
        right: 0;
        z-index: 2;
        background: #fff;
        box-shadow: -10px 0 8px -8px rgba(15, 23, 42, .15);
    }
    #tl-lessons-wrap .teacher-table thead th:last-child { background: var(--gray-50); z-index: 3; }
    #tl-lessons-wrap .teacher-table tr:hover td:last-child { background: var(--primary-50); }

    /* Pin the Lesson (first) column at the left — row identity stays visible */
    #tl-lessons-wrap .teacher-table th:first-child,
    #tl-lessons-wrap .teacher-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: #fff;
        box-shadow: 10px 0 8px -8px rgba(15, 23, 42, .15);
    }
    #tl-lessons-wrap .teacher-table thead th:first-child { background: var(--gray-50); z-index: 3; }
    #tl-lessons-wrap .teacher-table tr:hover td:first-child { background: var(--primary-50); }

    /* Dark theme: pinned cells must stay opaque to cover scrolled-under content */
    [data-theme="dark"] #tl-lessons-wrap .teacher-table td:first-child,
    [data-theme="dark"] #tl-lessons-wrap .teacher-table td:last-child { background: #0f172a; }
    [data-theme="dark"] #tl-lessons-wrap .teacher-table thead th:first-child,
    [data-theme="dark"] #tl-lessons-wrap .teacher-table thead th:last-child { background: #162032; }
    [data-theme="dark"] #tl-lessons-wrap .teacher-table tr:hover td:first-child,
    [data-theme="dark"] #tl-lessons-wrap .teacher-table tr:hover td:last-child { background: #162032; }
}


/* ── Student Birthdays (dashboard widget + roster chips + detail card) ── */
.tch-bday-list {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.tch-bday-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--gray-100);
    transition: background .15s ease;
}
.tch-bday-row:last-child { border-bottom: none; }
.tch-bday-row:hover { background: #fef2f2; }
.tch-bday-row--today { background: #fff7ed; }
.tch-bday-row--today:hover { background: #ffedd5; }
.tch-bday-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.tch-bday-avatar--ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fee2e2;
    color: #dc2626;
    font-weight: 700;
    font-size: 13px;
}
.tch-bday-name {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tch-bday-date {
    font-size: 12.5px;
    font-weight: 700;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.tch-bday-badge {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}
.tch-bday-badge--today {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
}
.tch-bday-empty {
    padding: 12px 16px;
    font-size: 12.5px;
    color: #9ca3af;
    font-style: italic;
}
.tch-bday-footer { margin-top: 10px; font-size: 12.5px; }
.tch-bday-footer a { color: #6b7280; text-decoration: none; }
.tch-bday-footer a:hover { color: #dc2626; text-decoration: underline; }

/* Roster card chip */
.tch-bday-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}
.tch-bday-chip--today {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    border-color: transparent;
    color: #fff;
}
.tch-bday-chip--add {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #9ca3af;
}
.tch-bday-chip--add:hover {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

/* Student-detail birthday card + inline edit form */
.tch-bday-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.tch-bday-card-current {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 14px;
    color: #1e293b;
}
.tch-bday-card-date {
    font-weight: 700;
    color: var(--navy);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}
.tch-bday-card-empty { font-size: 13px; color: #9ca3af; }
.tch-bday-provenance { font-size: 11.5px; color: #9ca3af; }
.tch-bday-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.tch-bday-form input[type="date"] {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13.5px;
    font-family: inherit;
    background: #f9fafb;
    color: #1e293b;
    transition: border-color .15s, box-shadow .15s;
}
.tch-bday-form input[type="date"]:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .08);
    background: #fff;
}
.tch-bday-form button {
    padding: 9px 18px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(220, 38, 38, .2);
    transition: transform .1s;
}
.tch-bday-form button:hover { transform: translateY(-1px); }
.tch-bday-form button:active { transform: scale(.97); }
.tch-bday-flash {
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}
.tch-bday-flash--success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}
.tch-bday-flash--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

/* Dark theme */
[data-theme="dark"] .tch-bday-list { background: #111827; border-color: #1f2937; }
[data-theme="dark"] .tch-bday-row { border-bottom-color: #1f2937; }
[data-theme="dark"] .tch-bday-row:hover { background: #1f2937; }
[data-theme="dark"] .tch-bday-row--today { background: #2a1c0a; }
[data-theme="dark"] .tch-bday-row--today:hover { background: #3b2a0a; }
[data-theme="dark"] .tch-bday-name { color: #f9fafb; }
[data-theme="dark"] .tch-bday-date { color: #9ca3af; }
[data-theme="dark"] .tch-bday-badge { background: #1f2937; color: #9ca3af; }
[data-theme="dark"] .tch-bday-badge--today { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; }
[data-theme="dark"] .tch-bday-avatar--ph { background: #3f1d1d; color: #fca5a5; }
[data-theme="dark"] .tch-bday-empty { color: #6b7280; }
[data-theme="dark"] .tch-bday-footer a { color: #9ca3af; }
[data-theme="dark"] .tch-bday-footer a:hover { color: #fca5a5; }
[data-theme="dark"] .tch-bday-chip { background: #3f1d1d; border-color: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .tch-bday-chip--today { background: linear-gradient(135deg, #f59e0b, #ef4444); border-color: transparent; color: #fff; }
[data-theme="dark"] .tch-bday-chip--add { background: #1f2937; border-color: #374151; color: #6b7280; }
[data-theme="dark"] .tch-bday-chip--add:hover { color: #fca5a5; border-color: #7f1d1d; background: #3f1d1d; }
[data-theme="dark"] .tch-bday-card { background: #111827; border-color: #1f2937; }
[data-theme="dark"] .tch-bday-card-current { color: #e5e7eb; }
[data-theme="dark"] .tch-bday-card-date { color: #f9fafb; }
[data-theme="dark"] .tch-bday-card-empty { color: #6b7280; }
[data-theme="dark"] .tch-bday-provenance { color: #6b7280; }
[data-theme="dark"] .tch-bday-form input[type="date"] { background: #1f2937; border-color: #374151; color: #f9fafb; }
[data-theme="dark"] .tch-bday-form input[type="date"]:focus { background: #111827; border-color: #ef4444; }
[data-theme="dark"] .tch-bday-flash--success { background: #052e16; border-color: #166534; color: #86efac; }
[data-theme="dark"] .tch-bday-flash--error { background: #3f1d1d; border-color: #7f1d1d; color: #fca5a5; }

/* Menu filter is type="search" for password-manager suppression (see
   admin.css note). Hide WebKit's built-in clear button — this input already
   has its own #tchNavClear button and two X's would be confusing. */
.teacher-nav-search input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}
.teacher-nav-search input[type="search"]::-webkit-search-decoration,
.teacher-nav-search input[type="search"]::-webkit-search-cancel-button,
.teacher-nav-search input[type="search"]::-webkit-search-results-button,
.teacher-nav-search input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}