/* style.css - Shared external stylesheet for Joto app (responsive) */ 
:root{ --primary-1: #6366f1; --primary-2: #8b5cf6; --accent: #fde68a; --muted: #6b7280; --bg: #f3f4f6;}
*{box-sizing:border-box} body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);margin:0;color:#111827;}
.container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem;}
.card{background:#fff;max-width:980px;width:100%;border-radius:12px;overflow:hidden;box-shadow:0 10px 20px rgba(2,6,23,0.08);}
.header{background:linear-gradient(90deg,var(--primary-1),var(--primary-2));color:white;text-align:center;padding:28px;}
.form{padding:24px;}label{display:block;margin-bottom:8px;font-weight:600;color:#111827;font-size:14px;}input,select,textarea{width:100%;padding:10px 12px;margin-bottom:16px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px;background:white;color:#111827;}
.button{display:inline-block;padding:10px 16px;border-radius:8px;background:linear-gradient(90deg,var(--primary-1),var(--primary-2));color:white;border:none;font-weight:700;cursor:pointer;text-decoration:none;}
.button.ghost{background:transparent;color:var(--primary-1);border:1px solid rgba(99,102,241,0.12);} 
.text-center{text-align:center}.text-link{color:var(--primary-1);text-decoration:none;font-weight:600}
nav.appbar{background:linear-gradient(90deg,var(--primary-1),var(--primary-2));color:white;padding:12px 18px;display:flex;align-items:center;justify-content:space-between}
nav.appbar .menu{display:flex;gap:8px;align-items:center}
nav.appbar .menu a{color:white;text-decoration:none;padding:8px 16px;border-radius:8px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);transition:all 0.2s ease;font-weight:500;font-size:14px}
nav.appbar .menu a:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
nav.appbar .menu a.active{background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.4);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
/* Student-specific hover highlight: only show strong box on hover */
nav.appbar.student .menu a{background:transparent;border-color:transparent;box-shadow:none}
nav.appbar.student .menu a:hover{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.32);box-shadow:0 0 0 2px rgba(255,255,255,0.12) inset, 0 6px 16px rgba(0,0,0,0.18)}
nav.appbar.student .menu a.active{background:transparent;border-color:transparent;box-shadow:none;text-decoration:underline}
.page-content{padding:24px}.grid{display:grid;gap:16px}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.card-panel{background:white;padding:18px;border-radius:10px;box-shadow:0 6px 14px rgba(2,6,23,0.04)}.list{list-style:none;padding:0;margin:0}.list li{display:flex;align-items:center;justify-content:space-between;padding:10px 8px;border-bottom:1px solid #f3f4f6}.kv{color:var(--muted);font-size:13px}.badge{display:inline-block;padding:6px 10px;background:#f3f4f6;border-radius:999px;font-weight:700;color:var(--muted);font-size:13px}

/* Teacher Dashboard Specific Styles */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.course-info {
    flex: 1;
    margin-right: 16px;
}

.course-info strong {
    display: block;
    font-size: 16px;
    color: #111827;
    margin-bottom: 4px;
}

.course-info .kv {
    margin-bottom: 2px;
    line-height: 1.4;
}

.course-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.button.start-class {
    background: linear-gradient(90deg, #10b981, #059669);
    color: white;
    padding: 12px 20px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.button.start-class:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

.status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status.upcoming {
    background: #dbeafe;
    color: #1d4ed8;
}

.status.past {
    background: #f3f4f6;
    color: #6b7280;
}

.status.scheduled {
    background: #dcfce7;
    color: #166534;
}

.status.unscheduled {
    background: #fef3c7;
    color: #92400e;
}

/* Course Assignments List Styles */
.list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.2s ease;
}

.list li:hover {
    background-color: #f9fafb;
}

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

.course-info {
    flex: 1;
    margin-right: 16px;
}

.course-info strong {
    display: block;
    font-size: 16px;
    color: #111827;
    margin-bottom: 8px;
    line-height: 1.4;
}

.course-info .kv {
    margin-bottom: 6px;
    line-height: 1.4;
    color: #374151;
}

.course-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 120px;
}

/* Edit Form Overlay Styles */
.edit-form-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.edit-form {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.edit-form h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #111827;
    font-size: 18px;
    font-weight: 600;
}

.edit-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #374151;
    font-size: 14px;
}

.edit-form select {
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    color: #111827;
    margin-bottom: 16px;
}

.edit-form select:focus {
    outline: none;
    border-color: var(--primary-1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.edit-form .button {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
}

.edit-form .button.ghost {
    background: transparent;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

.edit-form .button.ghost:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.no-link {
    color: #ef4444;
    font-size: 13px;
    font-weight: 500;
}

.zoom-link {
    color: #10b981;
    font-size: 13px;
    font-weight: 500;
}

/* Checkbox Styles */
.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    background: white;
    position: relative;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background: var(--primary-1);
    border-color: var(--primary-1);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label:hover .checkmark {
    border-color: var(--primary-1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

@media(max-width:900px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}.card{margin:12px}nav.appbar{flex-direction:column;gap:10px;align-items:flex-start;padding:14px}nav.appbar .menu{flex-wrap:wrap;gap:6px}nav.appbar .menu a{padding:6px 12px;font-size:13px}

/* Tablet responsive for teacher dashboard */
.dashboard-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}
}
@media(max-width:640px){.grid.cols-3{grid-template-columns:1fr}.container{padding:0.5rem;min-height:auto}.card{border-radius:10px;box-shadow:0 6px 12px rgba(2,6,23,0.06)}.header{padding:16px}.form{padding:16px}.button{width:100%;display:block;text-align:center}nav.appbar .menu{justify-content:center;width:100%}nav.appbar .menu a{flex:1;text-align:center;min-width:80px}

/* Mobile responsive for teacher dashboard */
.dashboard-grid {
    grid-template-columns: 1fr;
    gap: 16px;
}

.list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.course-actions {
    align-items: flex-start;
    width: 100%;
}

.button.start-class {
    width: 100%;
    text-align: center;
}

/* Mobile responsive for checkboxes */
.checkbox-label {
    width: 100%;
    justify-content: flex-start;
}

.checkmark {
    width: 24px;
    height: 24px;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    left: 8px;
    top: 3px;
    width: 7px;
    height: 12px;
}

/* Mobile responsive for edit form */
@media (max-width: 640px) {
    .edit-form-overlay {
        padding: 16px;
    }
    
    .edit-form {
        padding: 20px;
        border-radius: 8px;
    }
    
    .edit-form h3 {
        font-size: 16px;
        margin-bottom: 16px;
    }
    
    .edit-form .button {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .course-actions {
        min-width: auto;
        width: 100%;
        align-items: stretch;
    }
    
    .course-actions .button {
        width: 100%;
        text-align: center;
    }
}
}