:root {
    /* Theme: Default Dark (Midnight) */
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --secondary: #06b6d4;
    --accent: #f43f5e;
    --bg-dark: #0f172a;
    --bg-sidebar: #1e293b;
    --bg-card: rgba(30, 41, 59, 0.7);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --radius: 16px;
    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    --z-top: 9999;
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse-ring { 0% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }


/* Theme Variants */
.theme-light {
    --primary: #4f46e5;
    --bg-dark: #f1f5f9;
    --bg-sidebar: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.9);
    --text-main: #1e293b;
    --text-muted: #64748b;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.theme-emerald {
    --primary: #10b981;
    --bg-dark: #064e3b;
    --bg-sidebar: #065f46;
    --bg-card: rgba(6, 95, 70, 0.7);
    --text-main: #ecfdf5;
}

.theme-royal {
    --primary: #8b5cf6;
    --bg-dark: #2e1065;
    --bg-sidebar: #4c1d95;
    --bg-card: rgba(91, 33, 182, 0.7);
    --text-main: #f5f3ff;
}

.theme-sunset {
    --primary: #f59e0b;
    --bg-dark: #451a03;
    --bg-sidebar: #78350f;
    --bg-card: rgba(146, 64, 14, 0.7);
    --text-main: #fff7ed;
}

/* Macaron Gradient Themes */
.theme-macaron-pink {
    --primary: #fb7185;
    --bg-dark: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    --bg-sidebar: rgba(255, 255, 255, 0.4);
    --bg-card: rgba(255, 255, 255, 0.6);
    --text-main: #be123c;
    --text-muted: #e11d48;
}

.theme-macaron-blue {
    --primary: #38bdf8;
    --bg-dark: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    --bg-sidebar: rgba(255, 255, 255, 0.4);
    --bg-card: rgba(255, 255, 255, 0.6);
    --text-main: #0369a1;
    --text-muted: #0284c7;
}

.theme-macaron-green {
    --primary: #34d399;
    --bg-dark: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    --bg-sidebar: rgba(255, 255, 255, 0.4);
    --bg-card: rgba(255, 255, 255, 0.6);
    --text-main: #047857;
    --text-muted: #059669;
}

.theme-macaron-purple {
    --primary: #c084fc;
    --bg-dark: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    --bg-sidebar: rgba(255, 255, 255, 0.4);
    --bg-card: rgba(255, 255, 255, 0.6);
    --text-main: #6b21a8;
    --text-muted: #7e22ce;
}

.theme-macaron-yellow {
    --primary: #fbbf24;
    --bg-dark: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --bg-sidebar: rgba(255, 255, 255, 0.4);
    --bg-card: rgba(255, 255, 255, 0.6);
    --text-main: #b45309;
    --text-muted: #d97706;
}

.theme-macaron-mint {
    --primary: #4ade80;
    --bg-dark: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    --bg-sidebar: rgba(255, 255, 255, 0.4);
    --bg-card: rgba(255, 255, 255, 0.6);
    --text-main: #166534;
    --text-muted: #15803d;
}

.theme-macaron-peach {
    --primary: #fb923c;
    --bg-dark: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    --bg-sidebar: rgba(255, 255, 255, 0.4);
    --bg-card: rgba(255, 255, 255, 0.6);
    --text-main: #9a3412;
    --text-muted: #c2410c;
}

.theme-macaron-lavender {
    --primary: #a180ff;
    --bg-dark: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    --bg-sidebar: rgba(255, 255, 255, 0.4);
    --bg-card: rgba(255, 255, 255, 0.6);
    --text-main: #5b21b6;
    --text-muted: #6d28d9;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', 'Noto Sans TC', sans-serif;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    height: 100vh;
    overflow: hidden;
    transition: background-color 0.4s, color 0.4s;
}

.app-container {
    display: flex;
    height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 270px;
    background-color: var(--bg-sidebar);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 4px 0 10px rgba(0,0,0,0.1);
    z-index: 100;
    overflow-y: auto;
    transition: width 0.3s ease, padding 0.3s ease;
}

.sidebar.collapsed { width: 80px; padding: 1rem 0.5rem; }
.sidebar.collapsed .logo span, .sidebar.collapsed .nav-links span, .sidebar.collapsed .sidebar-footer span, .sidebar.collapsed .class-selector { display: none; }
.sidebar.collapsed .logo { justify-content: center !important; margin-bottom: 2rem;}
.sidebar.collapsed .logo i { font-size: 1.8rem; }
.sidebar.collapsed .nav-links li { justify-content: center; padding: 1rem; }
.sidebar.collapsed #btn-toggle-sidebar { margin: 0 auto; margin-bottom: 1rem; display: block; }

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--primary);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(0,0,0,0.1);
    padding: 0.75rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    position: relative;
}

.class-selector {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 12px;
}

.class-selector label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.custom-select {
    padding: 0.5rem;
    background: var(--bg-dark);
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    width: 100%;
}

/* Fix: date selector always readable regardless of theme */
#global-date-select {
    background: rgba(0,0,0,0.45) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    font-weight: bold;
    width: auto;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    cursor: pointer;
}

select.custom-select option {
    background-color: #1e293b;
    color: #f8fafc;
}

.btn-sm { padding: 0.4rem; justify-content: center; }

/* Compact icon-only button for blackboard controls */
.btn-icon-sm {
    padding: 0.3rem 0.45rem;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 8px;
}
.btn-icon-sm i { width: 14px; height: 14px; flex-shrink: 0; }
/* Short text label inside icon button - only for toggles */
.btn-icon-label { font-size: 0.72rem; white-space: nowrap; }

.user-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    right: 5px;
}
.user-status-dot.online { background: var(--success); }
.user-status-dot.offline { background: var(--danger); }

.btn-auth {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.nav-links {
    list-style: none;
    flex-grow: 1;
}

.nav-links li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 0.4rem;
    border-radius: 12px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
}

.nav-links li.active {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.btn-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

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

.footer-actions button {
    background: rgba(255,255,255,0.05);
    border: none;
    color: var(--text-muted);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
}

/* Main Content */
.main-content {
    flex-grow: 1;
    padding: 1rem 2rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.time-container {
    display: flex;
    gap: 1rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

#current-time {
    font-weight: 700;
    color: var(--primary);
}

.header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.timer-widget {
    background: var(--bg-card);
    padding: 0.5rem 1rem;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.1);
}

.timer-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#global-timer-display {
    font-size: 1.4rem;
    font-weight: 700;
    min-width: 70px;
    text-align: center;
}

.timer-controls button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}

.btn-primary, .btn-special {
    background: var(--primary);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-special {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
}

.btn-secondary {
    background: rgba(255,255,255,0.05);
    color: var(--text-main);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    cursor: pointer;
}
.btn-danger { background: var(--danger); color: white; border: none; padding: 0.8rem 1.2rem; border-radius: 12px; cursor: pointer; }

/* Tabs */
.tab-content { display: none; }
.tab-content.active { display: block; animation: slideUp 0.3s ease-out; }

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

/* Common cards */
.card { background: var(--bg-card); padding: 1.5rem; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); }
.dashboard-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.teaching-progress textarea { width: 100%; min-height: 100px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); color: white; padding: 1rem; border-radius: 12px; resize: vertical; margin-top: 10px; font-size: 1rem; }

/* Student Cards */
.student-toolbar { display: flex; justify-content: space-between; margin-bottom: 1.5rem; align-items: center; }
.search-box { position: relative; width: 250px; }
.search-box i { position: absolute; left: 10px; top: 12px; color: var(--text-muted); }
.search-box input { width: 100%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); padding: 10px 10px 10px 35px; border-radius: 12px; color: white; }
.action-buttons { display: flex; gap: 0.5rem; }

.student-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.6rem;
}

.student-card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 0.6rem;
    border: 1px solid rgba(255,255,255,0.05);
    transition: transform 0.2s;
    text-align: center;
}

.student-card:hover { transform: translateY(-3px); border-color: var(--primary); }

.avatar {
    width: 35px;
    height: 35px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    margin: 0 auto 0.4rem;
}
.student-card h4 { font-size: 1rem; margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.student-card .seat-no { font-size: 0.75rem; color: var(--text-muted); }

/* Modern Tables */
.student-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
}

.student-table th, .student-table td {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.student-table th {
    background: rgba(0, 0, 0, 0.2);
    font-weight: 600;
    color: var(--secondary);
}

.student-table tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--bg-sidebar);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 3rem;
    border-radius: 24px;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
}

.close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-muted);
}
.close:hover { color: white; }

.l-text {
    font-size: 6rem;
    font-weight: 800;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

/* Theme Selector */
.theme-selector {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.theme-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid white;
    cursor: pointer;
}
.theme-btn.default { background: #1e293b; }
.theme-btn.light { background: #f1f5f9; }
.theme-btn.emerald { background: #065f46; }
.theme-btn.royal { background: #4c1d95; }
.theme-btn.sunset { background: #78350f; }

/* Tools */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.tool-card {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: var(--radius);
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    border: 1px solid rgba(255,255,255,0.05);
}

.tool-card:hover { background: rgba(99, 102, 241, 0.2); border-color: var(--primary); transform: translateY(-5px); }
.tool-icon { font-size: 2rem; margin-bottom: 1rem; color: var(--primary); }

/* Groups */
.tool-header { display: flex; gap: 1rem; margin-bottom: 2rem; align-items: center; }
.input-group label { margin-right: 0.5rem; }
.input-group input { width: 60px; padding: 0.5rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; border-radius: 8px;}
#groups-tab { overflow: auto; padding-bottom: 5rem; }
.groups-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; transition: transform 0.3s; padding: 2rem; width: 100%; min-height: 50vh; }
.group-box { background: rgba(255,255,255,0.05); padding: 1.25rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); }
.group-box h4 { margin-bottom: 1.2rem; color: var(--secondary); border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.8rem; line-height: 1.4; display: flex; flex-direction: column; gap: 0.3rem; }
.group-member { margin-bottom: 0.6rem; padding: 0.6rem 0.8rem; background: rgba(0,0,0,0.25); border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.group-member-drag { cursor: grab; }

/* Homework */
.homework-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.large-textarea { width: 100%; height: 400px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); color: white; padding: 1.5rem; border-radius: 12px; font-size: 1.2rem; resize: none; margin-bottom: 1rem; line-height: 1.5; }
.homework-text { white-space: pre-wrap; font-size: 1.2rem; line-height: 1.8; min-height: 400px; }

/* Footer */
.bottom-footer { margin-top: auto; padding: 2rem 0 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.stat-card { background: var(--bg-card); padding: 1.5rem; border-radius: 20px; display: flex; align-items: center; gap: 1rem; border: 1px solid rgba(255,255,255,0.05);}
.stat-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.stat-icon.purple { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
.stat-icon.green { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.stat-icon.orange { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .sidebar { width: 80px; padding: 1rem 0.5rem; }
    .sidebar .logo span, .sidebar .nav-links span, .sidebar .sidebar-footer span { display: none; }
    .sidebar .nav-links li { justify-content: center; padding: 1rem; }
    .main-content { padding: 1rem; }
    .homework-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    #btn-mobile-menu { display: block !important; }
    
    .sidebar { 
        position: fixed; 
        top: 0; 
        left: -300px; 
        width: 270px; 
        height: 100vh; 
        flex-direction: column; 
        padding: 1.5rem; 
        border-right: 1px solid rgba(255,255,255,0.1); 
        z-index: 10000; 
        overflow-y: auto; 
        background: var(--bg-sidebar); 
        transition: left 0.3s ease; 
        box-shadow: 10px 0 15px rgba(0,0,0,0.5);
    }
    
    .sidebar.mobile-show { left: 0; }
    
    .sidebar .logo, .sidebar .class-selector, .sidebar .sidebar-footer { display: flex; }
    
    .sidebar .nav-links { flex-direction: column; width: 100%; height: auto; justify-content: flex-start; padding: 0; margin: 0; }
    .sidebar .nav-links li { flex: none; margin-bottom: 0.5rem; justify-content: flex-start; align-items: center; padding: 1rem; border-radius: 12px; font-size: 1rem; }
    .sidebar .nav-links i { margin: 0; margin-right: 1rem; }
    
    .app-container { flex-direction: column; }
    .main-content { padding-bottom: 2rem; height: 100vh; overflow-y: auto; }
    
    .stats-grid { grid-template-columns: 1fr; gap: 0.8rem; }
    .stat-card { padding: 1rem; }
    .header-actions { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    
    .student-toolbar { flex-direction: column; gap: 1rem; }
    .student-toolbar .action-buttons { flex-wrap: wrap; justify-content: center; }
    
    .buzzer-columns { flex-direction: column; }
    
    /* Make QR code larger on mobile too if possible, but keep constraints */
    #buzzer-qrcode img, #global-qrcode img { max-width: 100%; height: auto; margin: 0 auto; }
}

/* Overlay for mobile sidebar */
.mobile-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: none;
    backdrop-filter: blur(2px);
}
.mobile-overlay.show { display: block; }


/* Communication Book Layout */
/* Tab-level header: title + date/time on the right */
.comm-tab-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.6rem;
}
.comm-tab-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--secondary);
    margin: 0;
    white-space: nowrap;
}
.comm-datetime-block {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-left: 0.5rem;
}
.comm-date {
    font-size: 0.9rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.comm-time {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
    min-width: 60px;
}

.communication-layout {
    display: flex;
    gap: 1.5rem;
    height: calc(100vh - 90px);
}

.blackboard-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* No header; frame takes all height */
}

.blackboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.blackboard-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary);
}

.blackboard-controls {
    display: flex;
    gap: 0.5rem;
}

.blackboard-frame {
    flex: 1;
    background: linear-gradient(135deg, #a16b4a 0%, #8d5538 100%); /* Lighter brown gradient */
    padding: 20px;
    border-radius: 12px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3);
    position: relative;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.blackboard {
    flex: 1;
    background: #1b3022; /* Blackboard green */
    border-radius: 4px;
    padding: 40px;
    color: #ffffff !important;
    font-size: 1.8rem;
    line-height: 2;
    overflow: auto;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
    /* Chalk texture effect */
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02) 0%, transparent 80%),
        url("https://www.transparenttextures.com/patterns/black-paper.png");
}

/* Blackboard chalk text style */
.blackboard {
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
}

/* Vertical writing: upright = ALL chars (incl. Latin/digits) display upright */
.blackboard.vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    height: 100%;
    padding: 40px 20px;
    letter-spacing: 0.5em;
    line-height: 1.5;
}

/* In vertical mode, .tcy wraps short alphanumeric strings for combined-upright */
/* With text-orientation: upright, individual chars are already upright,
   .tcy only needed for 2+ char groupings like "P.5" to keep them together */
.blackboard.vertical .tcy {
    text-combine-upright: all;
}

.blackboard.horizontal {
    writing-mode: horizontal-tb;
    letter-spacing: 0.5em;
    line-height: 1.5;
}

/* Individual character box styling when toggled */
.blackboard.char-boxed .char-box,
.blackboard.char-boxed ruby {
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.3em;
    height: 1.3em;
    border-radius: 4px;
    box-sizing: border-box;
}

/* In horizontal mode, to ensure it centers align cleanly */
.blackboard.horizontal.char-boxed .char-box,
.blackboard.horizontal.char-boxed ruby {
    margin: 0 0.1em;
}

/* In vertical mode */
.blackboard.vertical.char-boxed .char-box,
.blackboard.vertical.char-boxed ruby {
    margin: 0.1em 0;
}

/* For upright combined alphanumeric text (horizontal mode or short groups) */
.tcy {
    text-combine-upright: all;
}
/* In horizontal mode tcy is no-op visually, only active in vertical */
.blackboard.horizontal .tcy {
    text-combine-upright: none;
}

/* Ruby / Zhuyin styles */
ruby {
    ruby-position: over;
    ruby-align: center;
}

rt {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    user-select: none;
}

.blackboard.vertical rt {
    ruby-position: right;
    margin-right: 0.2em;
}

/* Communication Attendance Grid */
.attendance-grid-container {
    width: 320px;
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
}

.attendance-grid-container h3 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: var(--secondary);
    text-align: center;
}

.comm-attendance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    overflow-y: auto;
}

.comm-student-box {
    aspect-ratio: 1;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.4) !important;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.comm-student-box:hover {
    background: rgba(255,255,255,0.1);
    transform: scale(1.05);
}

.comm-student-box.arrived {
    background: var(--success);
    border-color: #059669;
    color: white;
}

.comm-student-box.absent {
    background: var(--danger);
    border-color: #dc2626;
    color: white;
}

/* F11 note below the attendance grid */
.comm-f11-note {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.3;
    opacity: 0.8;
    padding: 0 0.2rem;
}

.comm-student-box .seat-no {
    font-size: 0.68rem;
    opacity: 0.75;
    line-height: 1;
}

.comm-student-box .name {
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    word-break: break-all;
    padding: 0 2px;
    display: block;
    max-width: 100%;
}

/* Bopomofo / CJK Font Classes */
.blackboard.font-huninn {
    font-family: 'Huninn', 'Noto Sans TC', sans-serif;
}
.blackboard.font-kaiti {
    /* Standard Kai (BiauKai on Mac, DFKai-SB on Windows) */
    font-family: 'BiauKai', 'DFKai-SB', '標楷體', 'DFKai-SB', serif;
}

/* Polyphone character highlighting in zhuyin mode */
.blackboard .polyphone-char:hover {
    background: rgba(255, 200, 0, 0.15);
    border-radius: 4px;
}

/* Override rt to show custom zhuyin */
.blackboard ruby rt:not(:empty) {
    font-size: 0.55em;
    color: rgba(255, 230, 100, 0.9);
    font-family: 'Noto Sans TC', sans-serif;
}

/* History Tab Layout */
.history-toolbar {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}

#history-display-area {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 1200px) {
    .communication-layout {
        flex-direction: column;
        height: auto;
    }
    
    .attendance-grid-container {
        width: 100%;
        margin-top: 2rem;
    }
    
    .comm-attendance-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }
}

/* Dynamic Border Visibility Fix for Light/Macaron Themes */
body {
    --border-color: rgba(255, 255, 255, 0.08); /* Default for dark mode */
}

body.theme-light, 
body[class*="theme-macaron-"] {
    --border-color: rgba(0, 0, 0, 0.15); /* Stronger border for light/macaron modes */
}

/* Strengthen contrast for macaron completely */
body[class*="theme-macaron-"] {
    --text-main: #111827;
    --text-muted: #374151;
}

/* Ensure strong borders on light themes for student boxes */
body.theme-light .comm-student-box,
body[class*="theme-macaron-"] .comm-student-box {
    border: 2px solid rgba(0,0,0,0.5) !important;
}

/* Override hardcoded whites to text-main in macaron */
body[class*="theme-macaron-"] *:not(.btn-primary):not(.btn-special):not(.btn-danger):not(.stat-icon):not(.badge):not(.avatar):not(.comm-student-box.arrived):not(.comm-student-box.absent) {
    color: inherit; /* This will make many hardcoded inline colors cascade correctly if they use classes, but we better target specific selectors if we need to. Let's just set the root variables strongly to map down. */
}

/* Apply new border color to all card-like elements */
.tool-card, 
.student-card, 
.stat-card, 
.card, 
.history-toolbar, 
.attendance-grid-container {
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.tool-card:hover, 
.student-card:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Student card action buttons - add borders for visibility */
.student-card .actions button,
.student-card .score-line button {
    border: 1.5px solid rgba(255,255,255,0.3) !important;
}
.student-card .actions button:hover,
.student-card .score-line button:hover {
    border-color: rgba(255,255,255,0.7) !important;
}
/* Light/macaron theme: darker borders for student buttons */
body.theme-light .student-card .actions button,
body.theme-light .student-card .score-line button,
body[class*="theme-macaron-"] .student-card .actions button,
body[class*="theme-macaron-"] .student-card .score-line button {
    border: 1.5px solid rgba(0,0,0,0.25) !important;
}