/* --- General Body Styles --- */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; background-color: #f8f9fa; color: #333; line-height: 1.6; transition: all 0.3s ease; }
body.rtl { direction: rtl; font-family: 'Noto Nastaliq Urdu', serif; }
body.rtl .logo, body.rtl h1, body.rtl h2, body.rtl h3 { font-family: 'Noto Nastaliq Urdu', serif; }
body.rtl nav ul li { margin-left: 0; margin-right: 25px; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
/* --- Header and Navigation --- */
header { background-color: #ffffff; padding: 15px 0; border-bottom: 1px solid #dee2e6; position: sticky; top: 0; z-index: 1000; }
nav { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.5em; font-weight: bold; color: #006400; }
.nav-links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.nav-links li { margin-left: 25px; }
.nav-links li a { text-decoration: none; color: #555; font-weight: 500; transition: color 0.3s ease; }
.nav-links li a:hover { color: #006400; }
.nav-links li a.active { color: #006400; font-weight: bold; }
.cta-button { background-color: #006400; color: #fff !important; padding: 10px 20px; border-radius: 5px; transition: background-color 0.3s ease; }
.cta-button:hover { background-color: #004d00; }
.cta-button.sign-out { background-color: #dc3545; }
.cta-button.sign-out:hover { background-color: #c82333; }
/* --- Language Switcher --- */
.lang-switcher button { background: #f1f1f1; border: 1px solid #ccc; padding: 8px 12px; cursor: pointer; margin-left: 5px; border-radius: 5px; }
.lang-switcher button.active { background-color: #006400; color: white; border-color: #006400; }
/* --- Helper Classes --- */
.hidden { display: none !important; }
.loader { border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #3498db; width: 20px; height: 20px; animation: spin 2s linear infinite; margin: 20px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* --- Public Website Sections --- */
.hero { background-color: #e9ecef; text-align: center; padding: 8px 20px; }
.hero h1 { font-size: 3em; margin-bottom: 10px; color: #333; }
.prayer-times { padding: 60px 0; background-color: #ffffff; text-align: center; }
#date-container { text-align: center; margin-top: -10px; margin-bottom: 30px; font-size: 1.1em; color: #555; line-height: 1.5; }
.prayer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-top: 20px; }
.prayer-item { background-color: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #dee2e6; }
.prayer-item h3 { margin: 0 0 10px 0; color: #006400; }
.announcements { padding: 60px 0; background-color: #f8f9fa; }
.announcement-item { background-color: #ffffff; padding: 20px; border-radius: 8px; border: 1px solid #dee2e6; margin-bottom: 20px; }
.announcement-item h3 { margin-top: 0; }
/* --- Admin Dashboard Section --- */
#admin-dashboard { padding: 20px 0; }
.section-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #dee2e6; padding-bottom: 10px; margin-bottom: 20px; }
#admin-dashboard h1 { font-size: 2.5em; margin: 0; border: none; }
.dashboard-section .section-header { border-bottom: 1px solid #ccc; }
.dashboard-section h2 { font-size: 2em; color: #006400; margin: 0; }
.add-button { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 0.9em; }
.add-button:hover { background-color: #0056b3; }
.counts-container { display: flex; gap: 10px; }
.count-badge { background-color: #e9ecef; color: #495057; padding: 5px 10px; border-radius: 15px; font-size: 0.7em; font-weight: bold; }
.count-badge.dropout { background-color: #f8d7da; color: #721c24; }
/* --- Dashboard Navigation --- */
.dashboard-nav { margin-bottom: 20px; border-bottom: 1px solid #dee2e6; }
.dash-nav-btn { background: none; border: none; padding: 15px 20px; cursor: pointer; font-size: 1em; color: #555; border-bottom: 3px solid transparent; }
.dash-nav-btn.active { color: #006400; border-bottom-color: #006400; font-weight: bold; }
/* --- Tables --- */
.table-container { overflow-x: auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border: 1px solid #dee2e6; text-align: left; vertical-align: middle; }
th { background-color: #f8f9fa; }
tbody tr:nth-child(even) { background-color: #f8f9fa; }
.student-name-clickable { color: #007bff; cursor: pointer; font-weight: bold; }
.student-name-clickable:hover { text-decoration: underline; }
/* --- Student Form Grid Layout --- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid .full-width { grid-column: 1 / -1; }
.student-form label { margin-bottom: 5px; font-weight: bold; display: block; }
.student-form input, .student-form select, .student-form textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 1em; box-sizing: border-box; }
.student-form .form-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 15px; gap: 15px; }
.student-form button { padding: 12px 20px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; }
.student-form button.full-width { width: 100%; }
#edit-student-button { background-color: #006400; color: white; flex-grow: 1; }
#edit-student-button:hover { background-color: #004d00; }
#remove-student-btn { background-color: #dc3545; color: white; }
#remove-student-btn:hover { background-color: #c82333; }
#add-student-button { background-color: #006400; color: white; }
#add-student-button:hover { background-color: #004d00; }
.checkbox-group > label { margin-bottom: 10px; }
.checkbox-group div { display: flex; align-items: center; margin-bottom: 5px; }
.checkbox-group input[type="checkbox"] { width: auto; margin-right: 10px; }
.checkbox-group label { font-weight: normal; margin-bottom: 0; }
/* --- Progress Tracker Specific Styles --- */
#progress-table th, #progress-table td, #dropout-table th, #dropout-table td { text-align: center; }
#progress-table td:first-child, #dropout-table td:first-child { text-align: left; min-width: 150px; }
.progress-cell { cursor: pointer; min-width: 150px; height: auto; position: relative; text-align: left; vertical-align: top; }
.progress-cell:hover { background-color: #e9ecef; }
.progress-summary { font-size: 0.85em; color: #333; white-space: pre-wrap; word-wrap: break-word; }
.progress-summary strong { color: #006400; }
.progress-cell.has-data::after { content: '✓'; color: #28a745; font-weight: bold; position: absolute; top: 2px; right: 4px; font-size: 1.2em; }
body.rtl .progress-cell.has-data::after { right: auto; left: 4px; }
/* --- Progress Logging Modal --- */
.progress-input-group { margin-bottom: 15px; }
.progress-input-group label { margin-bottom: 5px; font-weight: bold; display: block; }
#log-progress-form .form-actions { display: flex; gap: 15px; margin-top: 15px; }
#log-progress-form button { flex-grow: 1; padding: 12px 20px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; }
#save-progress-button { background-color: #006400; color: white; }
#save-progress-button:hover { background-color: #004d00; }
#clear-progress-button { background-color: #6c757d; color: white; }
#clear-progress-button:hover { background-color: #5a6268; }
/* --- Footer & Modal --- */
footer { background-color: #343a40; color: #fff; text-align: center; padding: 40px 20px; }
.modal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }
.modal-content { background-color: #fefefe; margin: 10% auto; padding: 30px; border: 1px solid #888; width: 80%; max-width: 400px; border-radius: 10px; animation: fadeIn 0.3s; }
.modal-content.large { max-width: 700px; margin: 5% auto; max-height: 80vh; overflow-y: auto; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.close-btn { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
body.rtl .close-btn { float: left; }
.modal-content h2, .modal-content h3 { margin-top: 0; }
#login-modal form { display: flex; flex-direction: column; margin-top: 20px; }
#login-modal form label { margin-bottom: 8px; font-weight: bold; }
#login-modal form input { padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; font-size: 1em; }
#login-modal form button { background-color: #006400; color: white; padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
#login-modal form button:hover { background-color: #004d00; }

/* --- Responsive Styles --- */
@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    nav { flex-direction: column; gap: 15px; }
    .nav-links { order: 2; flex-wrap: wrap; justify-content: center; gap: 5px 10px; width: 100%; }
    .lang-switcher { order: 1; }
    .nav-links li { margin-left: 10px; margin-right: 10px; }
    .nav-links li:last-child { width: 100%; text-align: center; }
    .nav-links .cta-button { margin-top: 20px; display: inline-block; width: 80%; }
    #admin-dashboard h1 { font-size: 2em; }
    .prayer-grid { display: flex; flex-wrap: wrap; justify-content: center; }
    .prayer-item { flex-basis: 40%; }
}