/* =====================================================================
   شاشة حضور المستفيدين — ملف تصميم مستقل للشرح والتعليم
   sa-page: جسم الشاشة واتجاه RTL وخط Cairo
   sa-controls: شبكة اختيار الفرع والتاريخ
   sa-stats: بطاقات إحصائية بخمسة أعمدة تتحول تلقائيًا على الهاتف
   sa-status-group: أزرار لمس كبيرة؛ selected يوضح الاختيار الحالي
   sa-savebar: شريط تثبيت للحفظ أسفل الكشف أثناء التمرير
   @media: استجابة الواجهة لشاشات التابلت والموبايل
   ===================================================================== */
.sa-page{direction:rtl;min-height:100vh;padding:28px clamp(14px,4vw,52px);background:#f5f8f5;font-family:'Cairo',Tahoma,sans-serif;color:#173e32}
.sa-page *{box-sizing:border-box}
.sa-header{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:22px}
.sa-header h1{margin:5px 0;font-weight:850;font-size:clamp(23px,3vw,34px)}
.sa-header p{font-size:13px;color:#71887d;margin:0}
.sa-breadcrumb{font-size:12px;color:#789486}.sa-breadcrumb a{color:#237b57;text-decoration:none}
.sa-nav{display:flex;gap:9px;flex-wrap:wrap}
.sa-panel{background:white;border:1px solid #e3ebe4;box-shadow:0 5px 22px rgba(29,71,51,.045);border-radius:18px;padding:22px;margin:16px 0}
.sa-controls{display:grid;grid-template-columns:minmax(200px,2fr) minmax(165px,1fr) auto;align-items:end;gap:15px}
.sa-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.sa-field label{font-weight:750;font-size:13px}
.sa-required{color:#b95148}
.sa-field select,.sa-field input,.sa-date{font-family:inherit;background:#f9fcfa;border:1px solid #cedbd2;border-radius:10px;padding:12px;min-height:48px;font-size:14px;width:100%;color:#244d3a}
.sa-field select:focus,.sa-field input:focus,.sa-date:focus,.sa-notes:focus{outline:2px solid #9bccaf;outline-offset:1px}
.sa-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:47px;padding:9px 17px;border-radius:10px;text-decoration:none;font:750 13px 'Cairo',Tahoma,sans-serif;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.sa-btn-primary{background:#167451;color:white}.sa-btn-primary:hover{background:#0d5c41}
.sa-btn-outline{border-color:#bfd8c8;color:#205a40;background:white}.sa-btn-outline:hover{background:#f2f9f4}
.sa-btn-soft{background:#e7f4e8;color:#146044;border-color:#d0e6d5}
.sa-btn:disabled,.sa-status:disabled{opacity:.5;cursor:default}
.sa-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:18px}
.sa-stat{background:white;border:1px solid #e7ece7;border-radius:14px;padding:16px 18px;display:flex;justify-content:space-between;flex-direction:column;gap:5px;border-top:4px solid #93ac98}
.sa-stat small{color:#667e73;font-size:12px}.sa-stat strong{font-size:30px;line-height:1.5}
.sa-stat-present{border-top-color:#1e966d}.sa-stat-present strong{color:#1e966d}
.sa-stat-absent{border-top-color:#cf6259}.sa-stat-absent strong{color:#bf5149}
.sa-stat-excused{border-top-color:#c89a44}.sa-stat-excused strong{color:#ac822f}
.sa-stat-pending{border-top-color:#79939e}.sa-stat-pending strong{color:#647983}
.sa-alert{border-radius:12px;padding:12px 16px;font-weight:650;font-size:13px;margin:14px 0;line-height:2}
.sa-alert-success{color:#175e42;background:#eaf6ed;border:1px solid #c4e5d1}
.sa-alert-error{color:#9b3f39;background:#fff0ee;border:1px solid #ecc4c0}
.sa-list-title{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sa-list-title h2{margin:0;font-size:20px}.sa-list-title p{color:#839388;margin:5px 0;font-size:12px}
.sa-progress{font-size:12px;background:#eef7f0;color:#176947;border-radius:40px;padding:9px 15px}
.sa-toolbar{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:20px 0;flex-wrap:wrap}
.sa-search{width:min(100%,380px)}
.sa-table-wrap{max-width:100%;overflow-x:auto}
.sa-table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;min-width:770px}
.sa-table thead{background:#f1f7f1}.sa-table th{font-size:12px;color:#476d58;text-align:right;padding:15px 13px}
.sa-table tbody tr:nth-child(even){background:#fafcf9}
.sa-table td{border-bottom:1px solid #ecf2ec;padding:13px;vertical-align:middle}
.sa-name{min-width:180px}.sa-name b{display:block;font-size:13px}.sa-name small{display:block;color:#9aa8a0;margin-top:3px}
.sa-status-group{display:flex;gap:6px;flex-wrap:nowrap}
.sa-status{border:1px solid #d6e3d9;background:#fff;color:#60796b;border-radius:10px;cursor:pointer;min-height:42px;padding:8px 13px;font:750 12px 'Cairo',Tahoma,sans-serif}
.sa-status.selected.present{background:#187d58;color:white;border-color:#187d58}
.sa-status.selected.absent{background:#ba504a;color:white;border-color:#ba504a}
.sa-status.selected.excused{background:#af8438;color:white;border-color:#af8438}
.sa-notes{max-width:215px;min-width:135px;padding:10px;border:1px solid #dae6dc;border-radius:9px;font-family:inherit}
.sa-savebar{position:sticky;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#e9f4ec;border:1px solid #cde0d0;border-radius:14px;padding:14px 17px;margin-top:18px;box-shadow:0 8px 22px rgba(31,82,48,.11);flex-wrap:wrap;z-index:3}
.sa-save-note{font-size:12px;color:#38644e;font-weight:750}.sa-save-actions{display:flex;gap:9px;flex-wrap:wrap}
.sa-empty{text-align:center;padding:34px;color:#73897b}
.sa-welcome{text-align:center;padding:60px 25px}.sa-welcome-icon{font-size:44px}.sa-welcome h2{margin:10px 0}.sa-welcome p{color:#7d9685}
.sa-security{font-size:11px;color:#839488;margin:23px 0}
@media(max-width:1000px){.sa-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.sa-controls{grid-template-columns:1fr 1fr}.sa-load{grid-column:1 / -1}}
@media(max-width:600px){.sa-page{padding:16px 12px}.sa-panel{padding:15px}.sa-controls{grid-template-columns:1fr}.sa-load{grid-column:auto}.sa-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.sa-save-actions{width:100%}.sa-save-actions .sa-btn{flex:1}.sa-toolbar{align-items:stretch}.sa-search{width:100%}.sa-header h1{font-size:23px}}