:root { 
    --primary: #2e7d32; 
    --primary-light: #60ad5e;
    --primary-dark: #1b5e20;
    --accent: #ef6c00;
    --success: #2e7d32; 
    --danger: #d32f2f; 
    --warning: #ef6c00; 
    --bg: #fdfdfd; 
    --card: rgba(255, 255, 255, 0.85); 
    --text: #333333; 
    --text-secondary: #666666;
    --border: rgba(0, 0, 0, 0.08); 
    --input-bg: rgba(241, 248, 233, 0.5); 
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.02);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.06);
    --shadow-lg: 0 20px 40px rgba(46, 125, 50, 0.15);
    --radius: 20px;
    --gradient-mesh: radial-gradient(at 0% 0%, rgba(46, 125, 50, 0.10) 0px, transparent 50%), 
                     radial-gradient(at 100% 100%, rgba(239, 108, 0, 0.08) 0px, transparent 50%);
}

body.dark-mode { 
    --primary: #60ad5e; 
    --primary-dark: #2e7d32;
    --primary-light: #81c784;
    --accent: #ff9800;
    --bg: #121212; 
    --card: rgba(30, 30, 30, 0.85); 
    --text: #e0e0e0; 
    --text-secondary: #aaaaaa;
    --border: rgba(255, 255, 255, 0.1); 
    --input-bg: rgba(255, 255, 255, 0.05); 
    --shadow-sm: none;
    --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
    --gradient-mesh: radial-gradient(at 0% 0%, rgba(46, 125, 50, 0.18) 0px, transparent 50%), 
                     radial-gradient(at 100% 100%, rgba(239, 108, 0, 0.12) 0px, transparent 50%);
}

* { box-sizing: border-box; font-family: 'Tajawal', sans-serif; -webkit-tap-highlight-color: transparent; outline: none; }
body { 
    margin: 0; padding: 0; background-color: var(--bg); color: var(--text); padding-bottom: 120px; 
    transition: background 0.3s, color 0.3s; 
    background-image: var(--gradient-mesh);
    background-attachment: fixed;
}

/* Icons Style */
.icon { width: 1.2em; height: 1.2em; vertical-align: middle; fill: currentColor; }
.btn .icon { margin-left: 5px; }

/* Header Styling */
header { 
    background: linear-gradient(135deg, var(--primary-dark), var(--primary)); 
    color: white; 
    padding: 15px 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 4px 20px rgba(46, 125, 50, 0.3); 
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.header-title { text-align: center; flex-grow: 1; }
#app-title { font-weight: 800; font-size: 1.1rem; letter-spacing: 0.5px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;}

/* ستايل زر الخطة في الهيدر */
.btn-plan-header {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    transition: all 0.2s;
    text-decoration: none;
    backdrop-filter: blur(5px);
}
.btn-plan-header:active { transform: scale(0.95); background: rgba(255,255,255,0.3); }

.header-links {
    display: flex;
    gap: 8px;
}
.header-links a {
    color: white;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 12px;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}
.header-links a:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.container { padding: 20px; max-width: 600px; margin: 0 auto; }

/* Animation Classes */
.fade-in-up { animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: translateY(15px); }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* Cards Styling */
.card { 
    background: var(--card); 
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius); 
    padding: 20px; 
    margin-bottom: 16px; 
    box-shadow: var(--shadow-md); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border: 1px solid var(--border); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:active { transform: scale(0.98); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }

/* Buttons Styling */
.btn { 
    border: none; cursor: pointer; border-radius: 14px; 
    font-weight: 700; padding: 14px 20px; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    text-align: center; font-size: 1rem; 
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: var(--shadow-sm); 
}
.btn:active { transform: scale(0.95); }

.btn-primary { 
    background: linear-gradient(135deg, var(--primary), var(--primary-light)); 
    color: white; width: 100%; 
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(46, 125, 50, 0.4); }

.btn-outline { 
    background: transparent; border: 2px solid var(--border); 
    color: var(--text-secondary); 
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: rgba(46, 125, 50, 0.05); }

.btn-danger { 
    background: rgba(211, 47, 47, 0.08); 
    color: var(--danger); 
    border: 1px solid rgba(211, 47, 47, 0.2); 
}

.btn-icon { 
    background: rgba(255,255,255,0.2); 
    border: none; color: white; 
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; 
    border-radius: 50%; backdrop-filter: blur(5px); 
    transition: transform 0.2s;
}
.btn-icon:active { transform: rotate(15deg); }

/* Floating Button */
#fab-lottery-btn { 
    display: none; 
    position: fixed; bottom: 30px; left: 20px; 
    width: 65px; height: 65px; 
    background: linear-gradient(135deg, #ff9800, #e65100); 
    color: white; border-radius: 50%; 
    justify-content: center; align-items: center; 
    font-size: 1.8rem; 
    box-shadow: 0 15px 30px rgba(230, 81, 0, 0.4); 
    z-index: 2000; cursor: pointer; 
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
#fab-lottery-btn:active { transform: scale(0.8) rotate(15deg); }

/* Groups Button */
#fab-groups-btn {
    display: none;
    position: fixed; bottom: 30px; left: 100px;
    width: 65px; height: 65px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    color: white; border-radius: 50%;
    justify-content: center; align-items: center;
    font-size: 1.5rem;
    box-shadow: 0 15px 30px rgba(46, 125, 50, 0.4);
    z-index: 2000; cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#fab-groups-btn:active { transform: scale(0.8) rotate(-15deg); }

/* Student Card Grid & Layout */
.student-card { 
    display: flex; flex-direction: column; gap: 12px; 
    background: var(--card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 16px; 
    border-radius: var(--radius); margin-bottom: 14px; 
    border-right: 6px solid var(--success); 
    border: 1px solid var(--border); border-right-width: 6px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    position: relative; overflow: hidden;
}
.student-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.student-card.absent { 
    border-right-color: var(--danger) !important; 
    background-color: rgba(211, 47, 47, 0.02) !important;
    opacity: 0.95;
}

@keyframes shake-card {
    0% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}
.shake-animation { animation: shake-card 0.4s ease-in-out; }

.student-header { display: flex; justify-content: space-between; align-items: center; }
.student-name { font-size: 1.15rem; font-weight: 700; color: var(--text); cursor: pointer; border-bottom: 1px dotted var(--text-secondary); }
.student-name:active { opacity: 0.6; }

.group-select {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2px 5px;
    font-size: 0.8rem;
    margin-right: 8px;
    width: 60px;
    cursor: pointer;
    color: var(--primary);
    font-weight: bold;
}

/* Points Control */
.points-control { 
    display: flex; align-items: center; gap: 8px; 
    background: var(--input-bg); padding: 4px 6px; border-radius: 30px; 
}
.btn-point { 
    width: 32px; height: 32px; border-radius: 50%; border: none; 
    font-weight: bold; cursor: pointer; display: flex; 
    justify-content: center; align-items: center; font-size: 1.1rem;
    transition: transform 0.1s;
}
.btn-point:active { transform: scale(1.2); }
.btn-point.plus { background: var(--success); color: white; box-shadow: 0 4px 10px rgba(46, 125, 50, 0.2); }
.btn-point.minus { background: var(--danger); color: white; box-shadow: 0 4px 10px rgba(211, 47, 47, 0.2); }
.points-value { font-weight: 800; min-width: 25px; text-align: center; color: var(--text); font-size: 1.1rem; }

.actions { display: flex; gap: 8px; width: 100%; }
.btn-status { flex: 2; padding: 12px; color: white; border-radius: 12px; border: none; font-size: 0.9rem; font-weight: bold; cursor: pointer; transition: background 0.3s; display: flex; justify-content: center; align-items: center; gap:5px; }
.status-present { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.status-absent { background: linear-gradient(135deg, #ef4444, #dc2626); }
.btn-behavior { flex: 1; padding: 12px; background-color: rgba(239, 108, 0, 0.1); color: var(--warning); border-radius: 12px; border: 1px solid rgba(239, 108, 0, 0.3); font-weight: bold; cursor: pointer;}
.btn-report { flex: 1; padding: 12px; background-color: var(--primary-light); color: white; border-radius: 12px; border: none; cursor: pointer; }

.grades-area { display: flex; gap: 10px; margin-bottom: 5px; background: var(--input-bg); padding: 10px; border-radius: 12px; }
.grade-input { width: 100%; padding: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 8px; text-align: center; font-weight: bold; font-size: 1rem; }

/* Inputs & Modals */
input, textarea, select { width: 100%; padding: 16px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); border-radius: 14px; margin-bottom: 12px; font-size: 1rem; transition: all 0.2s; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.1); }

select option { background-color: var(--bg); color: var(--text); font-weight: bold; }

.modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 3000; justify-content: center; align-items: center; padding: 20px; backdrop-filter: blur(8px); }
.modal-content { background: var(--card); color: var(--text); padding: 25px; border-radius: 24px; width: 100%; max-width: 450px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); border: 1px solid var(--border); animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.hidden { display: none; }
#lottery-modal .modal-content { text-align: center; }
#lottery-result { font-size: 3rem; font-weight: 800; color: var(--primary); margin: 20px 0; min-height: 80px; text-shadow: 0 4px 20px rgba(46, 125, 50, 0.3); }
#lottery-status { font-size: 1rem; color: var(--text-secondary); margin-top: 10px; }

/* Groups Modal Style */
.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; text-align: right; }
.group-box { background: var(--input-bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.group-title { font-weight: bold; color: var(--primary); border-bottom: 2px solid var(--border); margin-bottom: 8px; padding-bottom: 5px; text-align: center; }
.group-member { font-size: 0.9rem; padding: 3px 0; border-bottom: 1px dashed #e5e7eb; }

.upload-options { display: flex; gap: 10px; margin-bottom: 15px; }
.upload-btn-wrapper { flex: 1; position: relative; overflow: hidden; }
.upload-btn-wrapper input[type=file] { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

#db-debug { position: fixed; bottom: 0; left: 0; right: 0; background: #0f172a; color: #94a3b8; font-size: 0.75rem; padding: 8px; text-align: center; z-index: 3000; direction: rtl; }
.designer-credit { text-align: center; margin-top: 30px; padding: 15px; font-size: 0.9rem; color: var(--primary); opacity: 0.8; font-weight: bold; border-top: 1px dashed var(--border); }

/* Install Banner */
#install-banner {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: white; padding: 20px; text-align: center;
    z-index: 4000; box-shadow: 0 -10px 40px rgba(0,0,0,0.3);
    border-top: 1px solid rgba(255,255,255,0.1);
    animation: slideUpBanner 0.5s ease-out;
    border-top-left-radius: 20px; border-top-right-radius: 20px;
}
@keyframes slideUpBanner { from { transform: translateY(100%); } to { transform: translateY(0); } }
.install-step { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; background: rgba(255,255,255,0.1); padding: 12px; border-radius: 12px; text-align: right; }
.install-icon { font-size: 1.4rem; min-width: 30px; text-align: center; }

/* ستايل صورة الخطة */
.plan-image-container {
    width: 100%;
    height: 60vh;
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
    border-radius: 16px;
    border: 2px solid var(--border);
    margin: 10px 0;
    background: var(--input-bg);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}
.plan-img { width: 100%; height: auto; display: block; transform-origin: 0 0; transition: width 0.1s ease-out; }

/* Custom Toast Notification */
.custom-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: var(--card);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: var(--text);
    padding: 12px 24px;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid var(--border);
    border-bottom: 3px solid var(--primary);
    font-weight: bold;
    min-width: 250px;
}
.custom-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.custom-toast.success { border-bottom-color: var(--success); }
.custom-toast.error { border-bottom-color: var(--danger); }
.custom-toast.warning { border-bottom-color: var(--warning); }
.custom-toast.info { border-bottom-color: #2196F3; }

/* Custom Confirm Modal */
.custom-confirm-content { text-align: center; max-width: 320px !important; }
.confirm-icon { font-size: 3.5rem; margin-bottom: 15px; }
.confirm-actions { display: flex; gap: 10px; margin-top: 10px; }
.confirm-actions .btn { flex: 1; margin: 0; }

/* --- Tablet & Desktop Grid Layout --- */
@media (min-width: 768px) {
    .container { max-width: 95%; padding-top: 30px; }
    #students-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
    .student-card { height: 100%; justify-content: space-between; margin-bottom: 0; }
    .header-title { text-align: right; padding-right: 20px; }
    #view-students > div:nth-child(2), #view-students > div:nth-child(3) { display: flex; gap: 15px; }
}

@media print {
    header, .container, #db-debug, .modal, .upload-options, button, #fab-lottery-btn, #fab-groups-btn, .designer-credit, #install-banner, #custom-toast { display: none !important; }
    #printable-area { display: block !important; position: relative; width: 100%; margin: 0; padding: 0; background: white; direction: rtl; color: black; }
    body, html { margin: 0; padding: 0; background: white; height: auto; width: 100%; overflow: visible; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; }
    .print-header { text-align: center; margin-bottom: 20px; border-bottom: 2px solid #333; padding-bottom: 10px; }
    .print-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12pt; }
    .print-table th { background-color: #eee !important; font-weight: bold; color: black; border: 1px solid #000; padding: 10px; }
    .print-table td { border: 1px solid #000; padding: 8px; text-align: center; color: black; }
    tr { page-break-inside: avoid; }
    .print-footer { margin-top: 50px; display: flex; justify-content: space-between; padding: 0 50px; }
}