:root{--primary:#6cb499;--secondary:#2f7e99;--accent:#f39c12;--sidebar-bg:#1a1a2e;--body-bg:#f0f2f5;--card-bg:#fff;--n950:#1a1a2e;--n900:#243447;--n800:#2f4a5e;--n700:#2f7e99;--n500:#3d9ab8;--m600:#6cb499;--m500:#6cb499;--m400:#8dc9af;--m300:#a8d9c2;--m100:#e8f5ef;--m50:#f0f9f4;--sf:#f0f2f5;--card:#FFF;--tx:#333;--tx2:#5A6E80;--tx3:#7f8c8d;--bd:#e0e0e0;--bdl:#EFF3F8;--ok:#27ae60;--okb:#ECFDF5;--wr:#f39c12;--wrb:#FFFBEB;--dn:#e74c3c;--dnb:#FEF2F2;--inf:#3B82F6;--infb:#EFF6FF;--pur:#8B5CF6;--purb:#F5F3FF;--shadow:0 4px 20px rgba(0,0,0,0.08);--radius:16px;--font:'IBM Plex Sans Arabic',sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;overflow-x:hidden}
body{font-family:var(--font);background:var(--sf);color:var(--tx);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;font-size:0.9rem;line-height:1.6}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:#c0cdd8;border-radius:10px}
/* Header */
.hdr{position:sticky;top:0;z-index:999;height:60px;background:var(--n950);display:flex;align-items:center;justify-content:space-between;padding:0 24px;box-shadow:0 4px 24px rgba(0,0,0,.2)}
.hdr-logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--primary),var(--m400));display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(108,180,153,.3)}
.logo-txt{font-family:'Tajawal';font-weight:900;font-size:17px;color:#fff;line-height:1.2}
.logo-sub{font-size:8px;color:var(--m400);letter-spacing:1.5px}
.hdr-nav{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none}
.hdr-nav::-webkit-scrollbar{display:none}
.nav-link{position:relative;padding:18px 12px;color:rgba(255,255,255,.4);font-size:11.5px;font-weight:500;white-space:nowrap;transition:color .2s;display:flex;align-items:center;gap:4px}
.nav-link:hover{color:rgba(255,255,255,.8)}
.nav-link.active{color:#fff;font-weight:600}
.nav-link.active::after{content:'';position:absolute;bottom:0;right:4px;left:4px;height:2.5px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--primary),var(--m400))}
.nav-badge{background:var(--dn);color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:10px;margin-right:3px}
.hdr-right{display:flex;align-items:center;gap:8px}
.hdr-bell{width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;color:rgba(255,255,255,.5);transition:.2s}
.hdr-bell:hover{background:rgba(255,255,255,.1)}
.bell-dot{position:absolute;top:5px;left:5px;width:7px;height:7px;border-radius:50%;background:var(--dn);border:2px solid var(--n950)}
.hdr-user{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:4px 10px 4px 4px}
.avatar{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;flex-shrink:0}
.av-admin,.av-manager{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}
.av-coach{background:linear-gradient(135deg,var(--n700),var(--n500));color:#fff}
.av-beneficiary{background:linear-gradient(135deg,var(--primary),var(--m300));color:var(--n950)}
.hdr-uname{color:#fff;font-size:11px;font-weight:500}
.hdr-out{padding:6px 10px;border-radius:7px;border:1px solid rgba(255,255,255,.08);font-size:10px;color:rgba(255,255,255,.35);display:flex;align-items:center;gap:4px;transition:.2s}
.hdr-out:hover{background:rgba(239,68,68,.08);color:#FCA5A5}
.hdr-menu{display:none;background:none;border:none;cursor:pointer;padding:6px}
.btn-mint{padding:8px 20px;border-radius:8px;font-family:inherit;font-size:12px;font-weight:600;background:linear-gradient(135deg,var(--primary),var(--m400));color:#fff;display:inline-block}
/* Sidebar */
.admin-layout{display:flex;min-height:100vh}
.sidebar{width:280px;background:var(--sidebar-bg);color:#fff;position:fixed;right:0;top:0;height:100vh;overflow-y:auto;z-index:100;transition:0.3s}
.sidebar-header{padding:25px 20px;border-bottom:1px solid rgba(255,255,255,0.1);text-align:center}
.sidebar-header img{max-height:50px;margin-bottom:10px}
.sidebar-header h3{color:var(--primary);font-size:1.2rem}
.sidebar-menu{list-style:none;padding:15px 0}
.sidebar-menu li a{display:flex;align-items:center;gap:15px;padding:14px 25px;color:rgba(255,255,255,0.7);transition:0.3s;border-right:4px solid transparent;font-size:0.88rem}
.sidebar-menu li a:hover,.sidebar-menu li a.active{background:rgba(108,180,153,0.15);color:var(--primary);border-right-color:var(--primary)}
.sidebar-menu li a i{width:22px;text-align:center;font-size:1rem}
.sidebar-menu .badge{background:var(--dn);color:#fff;padding:3px 10px;border-radius:12px;font-size:0.75rem;margin-right:auto}
.sidebar-footer{padding:20px;border-top:1px solid rgba(255,255,255,0.1)}
.sidebar-footer .user-info{display:flex;align-items:center;gap:12px}
.sidebar-footer .s-avatar{width:45px;height:45px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:1.1rem}
.main-content{flex:1;margin-right:280px;padding:24px clamp(16px,2.5vw,40px);overflow-x:hidden;width:calc(100vw - 280px);max-width:calc(100vw - 280px);box-sizing:border-box}
.sidebar-toggle{display:none;position:fixed;top:15px;right:15px;z-index:200;width:45px;height:45px;border:none;border-radius:12px;background:var(--sidebar-bg);color:white;font-size:1.2rem;cursor:pointer;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,0.3)}
.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);z-index:90;display:none}
/* Page — V14.10: Fluid container that fills the viewport without gaps when zoomed out */
.page{width:100%;max-width:none;margin:0;padding:24px clamp(16px,2.5vw,40px);box-sizing:border-box}
@media (min-width:1900px){.page{padding:28px clamp(24px,2.8vw,48px)}}
@media (min-width:2400px){.page{padding:32px clamp(32px,3vw,56px)}}
/* Footer */
.ft{background:#2c3345;color:rgba(255,255,255,0.8);margin-top:40px;width:100%}
.ft-inner{max-width:100%;margin:0 auto;padding:50px clamp(30px,5vw,80px) 20px;display:grid;grid-template-columns:1.2fr 1fr 0.8fr;gap:40px}
.ft-logo{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.ft-name{font-family:'Tajawal';font-weight:800;font-size:1.2rem;color:#fff;display:block}
.ft-en{font-size:9px;color:var(--m400);letter-spacing:2px;display:block;margin-top:-3px}
.ft-desc{font-size:0.9rem;color:rgba(255,255,255,0.7);line-height:1.8}
.ft-col h4{font-size:1.05rem;color:#fff;margin-bottom:18px}
.ft-col p,.ft-col a{display:block;font-size:0.92rem;color:rgba(255,255,255,0.7);margin-bottom:7px;transition:0.3s}
.ft-col a:hover{color:var(--m400)}
.ft-copy{max-width:100%;margin:0 auto;border-top:1px solid rgba(255,255,255,0.1);margin-top:25px;padding:18px clamp(30px,5vw,80px);text-align:center;font-size:0.85rem;color:rgba(255,255,255,0.5)}
.social-icon{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;color:#fff;transition:0.3s}
.social-icon:hover{background:rgba(255,255,255,0.2)}
.wa-btn{position:fixed;bottom:25px;left:25px;z-index:900;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,.35);transition:transform .2s}
.wa-btn:hover{transform:scale(1.1)}
/* Toast */
.toast{position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:10000;padding:11px 22px;border-radius:10px;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.25);animation:slideD .3s}
.toast-ok{background:var(--n950);color:#fff}
.toast-err{background:var(--dn);color:#fff}
@keyframes slideD{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
/* Cards */
.card{background:var(--card-bg);border-radius:var(--radius);padding:25px;margin-bottom:20px;box-shadow:var(--shadow)}
.card-h{display:flex;justify-content:space-between;align-items:center;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid var(--bd);flex-wrap:wrap;gap:8px}
.card-t{font-size:0.95rem;font-weight:700;display:flex;align-items:center;gap:8px}
.card-t i{color:var(--primary)}
.card-body{padding:0}
/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:20px}
.stat-card{background:var(--card-bg);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:0.3s;border-right:3px solid transparent;display:flex;align-items:center;gap:10px}
.stat-card:hover{transform:translateY(-2px)}
.stat-card .icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.95rem;flex-shrink:0}
.stat-card .icon.blue{background:rgba(52,152,219,0.15);color:#3498db}
.stat-card .icon.green{background:rgba(39,174,96,0.15);color:#27ae60}
.stat-card .icon.orange{background:rgba(230,126,34,0.15);color:#e67e22}
.stat-card .icon.red{background:rgba(231,76,60,0.15);color:#e74c3c}
.stat-card .icon.purple{background:rgba(155,89,182,0.15);color:#9b59b6}
.stat-card .icon.teal{background:rgba(26,188,156,0.15);color:#1abc9c}
.stat-card.blue-card{border-right-color:#3498db}
.stat-card.green-card{border-right-color:#27ae60}
.stat-card.orange-card{border-right-color:#e67e22}
.stat-card.red-card{border-right-color:#e74c3c}
.stat-card.purple-card{border-right-color:#9b59b6}
.stat-card.teal-card{border-right-color:#1abc9c}
.stat-card h3{font-size:1.15rem;margin:0;line-height:1}
.stat-card p{color:var(--tx3);font-size:0.72rem;margin:0}
.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.sc{background:var(--card-bg);border-radius:var(--radius);padding:18px;border:1px solid var(--bdl);box-shadow:0 1px 3px rgba(0,0,0,.03);position:relative;overflow:hidden;transition:all .25s}
.sc:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);transform:translateY(-2px)}
.sc .bar{position:absolute;top:0;right:0;left:0;height:3px}
.bar-g{background:linear-gradient(90deg,var(--ok),#86EFAC)}
.bar-m{background:linear-gradient(90deg,var(--primary),var(--m300))}
.bar-n{background:linear-gradient(90deg,var(--n700),var(--n500))}
.bar-w{background:linear-gradient(90deg,var(--wr),#FCD34D)}
.bar-d{background:linear-gradient(90deg,var(--dn),#FCA5A5)}
.bar-p{background:linear-gradient(90deg,var(--pur),#C4B5FD)}
.bar-i{background:linear-gradient(90deg,var(--inf),#93C5FD)}
.sc-lb{font-size:11px;color:var(--tx2);margin-bottom:4px}
.sc-val{font-family:'Tajawal';font-size:24px;font-weight:800;color:var(--n900);line-height:1}
.sc-sub{font-size:10px;color:var(--tx3);margin-top:4px}
/* Glass */
.glass{background:linear-gradient(135deg,var(--n950),var(--n700));border-radius:var(--radius);padding:22px 24px;color:#fff;position:relative;overflow:hidden;margin-bottom:20px}
.glass::before{content:'';position:absolute;top:-80px;left:-80px;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(108,180,153,.08),transparent 70%)}
.glass>*{position:relative;z-index:1}
/* Tables */
table{width:100%;border-collapse:collapse}
th{text-align:right;padding:14px 15px;font-size:0.82rem;font-weight:600;color:var(--tx3);border-bottom:2px solid var(--bd);background:var(--sf);white-space:nowrap}
td{padding:14px 15px;font-size:0.9rem;border-bottom:1px solid var(--bdl)}
tr:hover td{background:#FAFCFE}
.bold{font-weight:600}
.c-ok{color:var(--ok)}
.c-dn{color:var(--dn)}
.c-wr{color:var(--wr)}
.c-m{color:var(--tx3);font-size:11px}
/* Badges */
.b{display:inline-flex;padding:3px 10px;border-radius:14px;font-size:10px;font-weight:600;white-space:nowrap}
.b-g{background:var(--okb);color:#16A34A}
.b-ok{background:#D1FAE5;color:#059669}
.b-w{background:var(--wrb);color:#D97706}
.b-d{background:var(--dnb);color:#DC2626}
.b-i{background:var(--infb);color:#2563EB}
.b-mu{background:#F0F2F5;color:#6B7280}
.b-mi{background:var(--m100);color:var(--n700)}
.b-p{background:var(--purb);color:#7C3AED}
.status{padding:6px 14px;border-radius:20px;font-size:0.82rem;font-weight:600;white-space:nowrap}
/* Buttons */
.btn{padding:10px 20px;border:none;border-radius:10px;font-family:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:0.3s;font-size:0.88rem;white-space:nowrap}
.btn-primary,.btn-p{background:linear-gradient(135deg,var(--primary),var(--secondary));color:white}
.btn-primary:hover,.btn-p:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(47,126,153,0.3)}
.btn-success{background:var(--ok);color:white}
.btn-danger,.btn-red{background:var(--dn);color:white}
.btn-warning{background:var(--wr);color:white}
.btn-secondary,.btn-o{background:transparent;border:1.5px solid var(--bd);color:var(--tx2)}
.btn-o:hover{border-color:var(--primary);color:var(--n700);background:var(--m50)}
.btn-dk{background:linear-gradient(135deg,var(--n800),var(--n700));color:#fff}
.btn-sm{padding:6px 14px;font-size:0.82rem;border-radius:8px}
.btn-full{width:100%;justify-content:center;padding:12px;font-size:14px}
.btn-grp{display:flex;gap:4px}
.btn:hover{transform:translateY(-2px)}
/* Forms */
.form-group,.fg{margin-bottom:18px}
.form-group label,.fg label{display:block;margin-bottom:8px;font-weight:600;font-size:0.9rem}
.form-input,.fi{width:100%;padding:14px 18px;border:2px solid var(--bd);border-radius:12px;font-family:inherit;font-size:0.95rem;transition:0.3s;background:var(--card-bg);outline:none}
.form-input:focus,.fi:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(108,180,153,.1)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
textarea.form-input,textarea.fi{min-height:80px;resize:vertical}
select.form-input,select.fi{appearance:auto}
/* Progress */
.prog{height:8px;background:var(--bd);border-radius:10px;overflow:hidden}
.prog-f{height:100%;border-radius:10px;transition:width .6s ease}
.prog-m{background:linear-gradient(90deg,var(--primary),var(--m300))}
.prog-ok{background:linear-gradient(90deg,var(--ok),#86EFAC)}
.prog-wr{background:linear-gradient(90deg,var(--wr),#FCD34D)}
.prog-dn{background:linear-gradient(90deg,var(--dn),#FCA5A5)}
/* Quick Actions */
.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.qa-item{text-decoration:none;background:var(--card-bg);border-radius:var(--radius);padding:20px;display:flex;align-items:center;gap:14px;border:1px solid var(--bdl);transition:all .2s;cursor:pointer;box-shadow:var(--shadow)}
.qa-item:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.qa-icon{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;color:#fff}
.qa-label{font-weight:700;font-size:13px;color:var(--tx)}
.qa-desc{font-size:11px;color:var(--tx3);margin-top:2px}
/* Alerts */
.alr{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:10px;margin-bottom:8px;border:1px solid transparent;font-size:12px}
.alr-d{background:var(--dnb);border-color:#FECACA}
.alr-w{background:var(--wrb);border-color:#FDE68A}
.alr-i{background:var(--infb);border-color:#BFDBFE}
.alr-ok{background:var(--okb);border-color:#BBF7D0}
.alert{padding:18px 25px;border-radius:12px;margin-bottom:25px;display:flex;align-items:flex-start;gap:12px}
.alert-success{background:#d4edda;color:#155724;border-right:4px solid var(--ok)}
.alert-warning{background:#fff3cd;color:#856404;border-right:4px solid var(--wr)}
.alert-error{background:#fde8e8;color:#c0392b;border-right:4px solid var(--dn)}
/* Modal */
.mod-ov{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px}
.mod-ov.on{display:flex}
.mod{background:var(--card-bg);border-radius:20px;padding:28px;width:480px;max-width:90vw;max-height:85vh;overflow-y:auto;position:relative;animation:modIn .2s;box-shadow:0 25px 60px rgba(0,0,0,0.3)}
.mod-lg{width:700px}
.mod-x{position:absolute;top:12px;left:12px;width:28px;height:28px;border-radius:7px;border:none;background:var(--sf);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--tx3)}
.mod-x:hover{background:var(--dnb);color:var(--dn)}
.mod-t{font-family:'Tajawal';font-size:17px;font-weight:800;color:var(--n900);margin-bottom:16px}
@keyframes modIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
/* Grids */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* Tabs */
.tabs{display:flex;gap:4px;margin-bottom:20px;flex-wrap:wrap;border-bottom:2px solid var(--bdl)}
.tab{padding:10px 18px;font-size:12px;font-weight:600;color:var(--tx3);border-bottom:2px solid transparent;margin-bottom:-2px;transition:.2s;cursor:pointer;border-radius:8px 8px 0 0}
.tab:hover{color:var(--tx);background:var(--sf)}
.tab.active{color:var(--primary);border-bottom-color:var(--primary);background:var(--m50)}
/* Phase */
.phase-track{display:flex;align-items:center;padding:5px 0}
.phase-step{text-align:center;flex:1;min-width:60px}
.phase-dot{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px;font-size:0.9rem}
.phase-dot.done{background:var(--ok);color:white}
.phase-dot.current{background:var(--secondary);color:white;animation:pulse 2s infinite}
.phase-dot.pending{background:var(--bd);color:var(--tx3)}
.phase-line{flex:0 0 auto;width:30px;height:3px;margin-bottom:25px}
.phase-line.done{background:var(--ok)}
.phase-line.pending{background:var(--bd)}
.phase-label{font-size:0.72rem;font-weight:600}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(47,126,153,0.4)}50%{box-shadow:0 0 0 8px rgba(47,126,153,0)}}
/* Timeline */
.timeline{position:relative;padding-right:24px}
.timeline::before{content:'';position:absolute;top:0;right:10px;bottom:0;width:2px;background:var(--bdl)}
.tl-item{position:relative;padding-bottom:20px;padding-right:28px}
.tl-item::before{content:'';position:absolute;right:-3px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--primary);border:2px solid var(--card-bg)}
/* Login */
.login-pg{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--secondary));padding:20px}
.login-box{background:var(--card-bg);border-radius:20px;padding:40px;width:400px;max-width:90vw;box-shadow:0 25px 80px rgba(0,0,0,0.3)}
.login-logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--m400));display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.login-h{font-family:'Tajawal';font-size:20px;font-weight:800;text-align:center;margin-bottom:4px}
.login-d{font-size:12px;color:var(--tx2);text-align:center;margin-bottom:20px}
.login-err{background:var(--dnb);color:var(--dn);font-size:12px;padding:8px;border-radius:8px;margin-bottom:12px;text-align:center}
/* Upload */
.upload-z{border:2px dashed var(--bd);border-radius:14px;padding:32px 20px;text-align:center;cursor:pointer;transition:all .2s}
.upload-z:hover{border-color:var(--primary);background:var(--m50)}
/* Pagination */
.pag{display:flex;justify-content:center;gap:4px;margin-top:16px}
.pag a{padding:6px 12px;border-radius:6px;font-size:12px;color:var(--tx2);border:1px solid var(--bd);transition:.15s}
.pag a:hover{border-color:var(--primary)}
.pag-active{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}
/* Page header */
.page-header,.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:15px}
.page-title{font-size:1.5rem;display:flex;align-items:center;gap:12px}
.page-title i{color:var(--primary)}
.page-actions{display:flex;gap:10px;flex-wrap:wrap}
.page-t{font-family:'Tajawal';font-size:20px;font-weight:800;color:var(--n900);margin-bottom:4px}
.page-d{font-size:13px;color:var(--tx2);margin-bottom:18px}
/* Filters */
.filters{display:flex;gap:10px;margin-bottom:25px;flex-wrap:wrap}
.filter-btn{padding:10px 20px;border-radius:25px;border:2px solid var(--bd);background:var(--card-bg);cursor:pointer;transition:0.3s;font-family:inherit;font-size:0.88rem}
.filter-btn:hover,.filter-btn.active{border-color:var(--primary);background:var(--primary);color:#fff}
.filter-input{padding:10px 18px;border:2px solid var(--bd);border-radius:10px;background:var(--card-bg);font-family:inherit;font-size:0.88rem}
.filter-input:focus{outline:none;border-color:var(--primary)}
/* Empty */
.empty{text-align:center;padding:48px 20px;color:var(--tx3)}
.empty-icon{font-size:48px;margin-bottom:12px;opacity:.5}
.empty-text{font-size:14px;margin-bottom:8px}
/* Coach/KPI */
.coach-card{background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--bdl);overflow:hidden;transition:.2s;box-shadow:var(--shadow)}
.coach-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)}
.coach-head{padding:18px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--bdl)}
.coach-av{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff;flex-shrink:0}
.coach-stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;padding:12px}
.coach-stat{padding:8px}
.coach-stat .num{font-family:'Tajawal';font-size:20px;font-weight:800}
.coach-stat .lbl{font-size:10px;color:var(--tx3);margin-top:2px}
.kpi{background:var(--card-bg);border-radius:var(--radius);padding:20px;border:1px solid var(--bdl);overflow:hidden}
.kpi-val{font-family:'Tajawal';font-size:28px;font-weight:900;line-height:1}
.kpi-label{font-size:11px;color:var(--tx2);margin-top:4px}
/* Achievement */
.ach{display:flex;align-items:center;gap:14px;padding:14px;background:var(--card-bg);border-radius:12px;border:1px solid var(--bdl);margin-bottom:8px}
.ach.locked{opacity:.4}
.ach-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.ach-name{font-weight:700;font-size:13px}
.ach-desc{font-size:11px;color:var(--tx3);margin-top:2px}
/* Knowledge */
.kb-card{background:var(--card-bg);border:1px solid var(--bdl);border-radius:14px;padding:20px;cursor:pointer;transition:all .2s;box-shadow:var(--shadow)}
.kb-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);border-color:var(--m400);transform:translateY(-2px)}
/* Profile */
.p-tabs{display:flex;gap:6px;margin-bottom:20px;overflow-x:auto}
.p-tab{padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;color:var(--tx3);background:var(--sf);border:1px solid var(--bdl);white-space:nowrap;cursor:pointer;transition:.2s}
.p-tab:hover{color:var(--tx);border-color:var(--bd)}
.p-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
/* Calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-header{background:linear-gradient(135deg,var(--primary),var(--secondary));color:white;padding:12px;text-align:center;font-weight:600;font-size:0.85rem}
.cal-day{background:var(--card-bg);min-height:80px;padding:8px;border:1px solid var(--bd);font-size:0.82rem;cursor:pointer;transition:.2s}
.cal-day:hover{border-color:var(--primary)}
.cal-day.today{border:2px solid var(--primary);background:rgba(108,180,153,0.03)}
/* Dark Mode */
/* Landing */
.page-landing{padding:0 0 24px 0!important;max-width:100%!important}
/* Responsive */
@media(max-width:1024px){.main-content .stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
    .sidebar{transform:translateX(100%);width:85%;max-width:280px}.sidebar.open{transform:translateX(0)}
    .sidebar-toggle{display:flex}.sidebar-overlay.show{display:block}
    .main-content{margin-right:0;padding:15px;padding-top:70px;max-width:100vw}
    .stats-grid{grid-template-columns:repeat(2,1fr)}.form-row{grid-template-columns:1fr}
    .g2,.g3,.g4,.qa-grid{grid-template-columns:1fr 1fr}
    .hdr-nav{display:none;position:absolute;top:60px;right:0;left:0;background:var(--n950);flex-direction:column;padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.3)}.hdr-nav.show{display:flex}.nav-link{padding:12px 16px}.hdr-menu{display:block}
    .ft-inner{grid-template-columns:1fr!important}
    .hdr-uname{display:none}
    .card{padding:15px;margin-bottom:15px}
}
@media(max-width:480px){.stats-grid,.sg,.qa-grid{grid-template-columns:1fr!important}.g2{grid-template-columns:1fr}.page-t{font-size:1rem}}
/* ═══════════════════════════════════════════════════════════════════
   V7 Polish — تحسينات بسيطة على الهوية الحالية
   ═══════════════════════════════════════════════════════════════════ */
/* Smoother transitions everywhere */
.btn,.card,.stat-card,.fp-tab,.msg-thread,.fi,a{transition:all .2s ease}
/* Better hover for cards */
.card:hover{box-shadow:0 6px 28px rgba(0,0,0,.07)}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
/* Better focus states for accessibility */
.fi:focus,select.fi:focus,textarea.fi:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(108,180,153,.12);outline:none}
/* Refined buttons */
.btn-primary,.btn-p{box-shadow:0 4px 14px rgba(108,180,153,.25)}
.btn-primary:hover,.btn-p:hover{box-shadow:0 6px 18px rgba(108,180,153,.35);transform:translateY(-1px)}
/* Better notification/badge animation */
/* Badge animation removed for cleaner UX */
/* Refined modal animation */
.mod-ov.on .mod{animation:mod-in .25s ease-out}
@keyframes mod-in{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Sidebar item — smoother active state */
.sidebar-link.active{box-shadow:inset 4px 0 0 var(--primary)}
/* Soft shadow for dropdowns and selects */
select.fi{cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237f8c8d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 12px center;padding-left:34px;appearance:none;-webkit-appearance:none}
/* Subtle table row hover */
table tbody tr{transition:background .15s}
table tbody tr:hover{background:#F8FAF9!important}
/* Polished progress bars */
.gauge,.progress-bar{position:relative;overflow:hidden}
.gauge::after,.progress-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2.5s infinite;pointer-events:none}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
/* Smart analyzer badges */
.smart-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:11px;font-weight:700;background:linear-gradient(135deg,#EFF6FF,#DBEAFE);color:#1E40AF;border:1px solid #BFDBFE}
/* PDF report toolbar (when present) — keep clear from sidebar on mobile */
@media(max-width:768px){
.fp-tabs{padding:4px;gap:3px}
.fp-tab{padding:8px 12px;font-size:11px}
.msg-wrap{height:calc(100vh - 140px)}
}
/* Dark mode adjustments for new components */
/* Notification indicator */
.notif-dot{position:absolute;top:6px;left:6px;width:8px;height:8px;border-radius:50%;background:#DC2626;border:2px solid #fff}
/* Sidebar Groups */
.sidebar-group{padding:12px 25px 6px;font-size:0.7rem;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-top:6px;border-top:1px solid rgba(255,255,255,0.05)}
.sidebar-menu li:first-child .sidebar-group{border-top:none;margin-top:0}
/* Loading states — canonical (consolidated; see also line ~496 and ~663 — kept minimal)
   FIX: previously 3 conflicting rules; this is now the authoritative one. */
.btn.loading,
button.loading{
    pointer-events:none;
    opacity:.75;
    position:relative;
    cursor:wait;
}
.btn.loading::after,
button.loading::after{
    content:'';
    display:inline-block;
    width:14px;
    height:14px;
    border:2px solid transparent;
    border-top-color:currentColor;
    border-radius:50%;
    animation:spin .6s linear infinite;
    margin-right:6px;
    vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* Toast close button */
.toast{display:flex;align-items:center;gap:8px}
/* Dark mode — fix inline color overrides */
/* Confirmation dialog */
.confirm-dialog{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:20px}
.confirm-dialog.show{display:flex}
.confirm-box{background:var(--card-bg);border-radius:16px;padding:24px;max-width:380px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.confirm-title{font-family:'Tajawal';font-size:16px;font-weight:700;margin-bottom:8px}
.confirm-msg{font-size:13px;color:var(--tx2);margin-bottom:20px}
.confirm-actions{display:flex;gap:8px;justify-content:center}
/* Print Styles */
@media print{
    .sidebar,.sidebar-toggle,.sidebar-overlay,.hdr,.ft,.wa-btn,.btn,.mod-ov,.toast,.pag,.page-actions,.qa-grid,.hdr-right,.hdr-menu,
    form button,a.btn,.filters,.tabs-row,.page-head>div:last-child{display:none!important}
    .main-content{margin-right:0!important;padding:10px!important;max-width:100%!important}
    .admin-layout{display:block!important}
    body{background:#fff!important;color:#000!important;font-size:12px}
    .card{box-shadow:none!important;border:1px solid #ddd!important;break-inside:avoid;padding:12px!important}
    .stat-card,.sc{border:1px solid #ddd!important;box-shadow:none!important}
    table{font-size:11px}th,td{padding:6px 8px!important}
    .page-t{font-size:16px!important}
    .prog{print-color-adjust:exact;-webkit-print-color-adjust:exact}
    .b{border:1px solid #999!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
    .print-only{display:block!important}
    canvas{max-height:200px!important}
    .g2,.g3,.g4{gap:8px!important}
}
.print-only{display:none}
.print-btn{cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;font-size:12px;background:transparent;border:1.5px solid var(--bd);color:var(--tx2);font-family:inherit;transition:.2s}
.print-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--m50)}
/* Mobile improvements */
@media(max-width:480px){
    .page-head{flex-direction:column;align-items:flex-start;gap:8px}
    .page-t{font-size:1.1rem!important}
    .card{padding:12px!important}
    .card-h{flex-direction:column;align-items:flex-start;gap:6px}
    .form-row{grid-template-columns:1fr!important}
    .mod{padding:16px!important;max-width:95vw!important}
    .mod-lg{width:95vw!important}
    table{font-size:11px!important}
    th,td{padding:8px 6px!important}
    .btn{padding:8px 14px!important;font-size:12px!important}
    .btn-sm{padding:5px 10px!important;font-size:11px!important}
    .sc-val{font-size:20px!important}
}
/* Touch-friendly */
@media(hover:none){
    .btn,.qa-item,.nav-link,.sidebar-menu li a{min-height:44px}
    .fi{min-height:44px;font-size:16px!important}
}
/* Smooth scrolling */
html{scroll-behavior:smooth}
/* Better table on mobile */
@media(max-width:768px){
    .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* Announcement banner */
.ann-banner{margin:0 0 8px;padding:10px 16px;border-radius:10px;display:flex;align-items:center;gap:10px;font-size:12px}
/* Accessibility focus */
a:focus-visible,.btn:focus-visible,.fi:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* Selection color */
::selection{background:rgba(108,180,153,0.2)}
/* Better scrollbar */
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:4px}
/* Skip link for accessibility */
.skip-link{position:absolute;top:-200px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:8px 16px;border-radius:0 0 8px 8px;z-index:99999;font-size:13px;opacity:0;pointer-events:none;transition:top .2s,opacity .2s}
.skip-link:focus{top:0;opacity:1;pointer-events:auto}
/* Compact icon-only action buttons (V10) */
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--bdl);background:var(--sf);color:var(--tx2);cursor:pointer;font-size:13px;transition:all .2s;text-decoration:none;padding:0}
.btn-icon:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.btn-icon-edit{color:var(--n700);border-color:rgba(47,126,153,.25);background:rgba(47,126,153,.08)}
.btn-icon-edit:hover{background:rgba(47,126,153,.15);border-color:var(--n700)}
.btn-icon-delete{color:var(--dn);border-color:rgba(239,68,68,.25);background:rgba(239,68,68,.08)}
.btn-icon-delete:hover{background:var(--dn);color:#fff;border-color:var(--dn)}
.btn-icon-view{color:var(--inf);border-color:rgba(59,130,246,.25);background:rgba(59,130,246,.08)}
.btn-icon-view:hover{background:rgba(59,130,246,.15);border-color:var(--inf)}
.btn-icon-success{color:var(--ok);border-color:rgba(34,197,94,.25);background:rgba(34,197,94,.08)}
.btn-icon-success:hover{background:rgba(34,197,94,.15);border-color:var(--ok)}
/* Dark mode for icon buttons */
/* ═══ V10 — Comprehensive Dark Mode ═══ */
html.dark-pre, html.dark-pre body { background:#0f1115 !important; color:#e5e7eb !important; }
/* Cards & containers */
/* Tables */
/* Forms */
/* Buttons (preserve red/green/etc backgrounds) */
/* Badges - keep their colors but adjust contrast */
/* Dashboard hero & landing sections */
/* Modals */
/* Alerts/flash messages */
/* Override common inline styles that don't adapt */
/* Coach Avatar / circles preserved */
/* Hover states */
/* Charts and data viz backgrounds */
/* ════════════════════════════════════════════════════════
   COMPREHENSIVE DARK MODE OVERRIDES — V10.1
   These take precedence over any page-level inline styles
   ════════════════════════════════════════════════════════ */
/* Messages template (used by admin/coach/beneficiary) */
/* Family profile cards/tabs */
/* Notifications page */
/* Knowledge bank cards */
/* Achievement cards */
/* Coach cards */
/* Generic fallback for any element with hardcoded white bg */
/* Generic fallback for hardcoded dark text */
/* Fix borders */
/* Header dropdowns / popovers */
/* Login page demo box */
/* Empty states */
/* Calendar / date picker */
/* Print buttons */
/* Survey/form sections */
/* Stat boxes inside dashboards */
/* Make sure all <hr> are dark-mode aware */
/* Pagination */
/* Tooltips */
/* Code blocks */
/* ════════════════════════════════════════════════════════
   UNIFIED BUTTON SYSTEM — V10.2
   Consistent, modern button design across all pages
   ════════════════════════════════════════════════════════ */
/* Base button - improved consistency */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
    font-size: 0.88rem;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.2;
    user-select: none;
}
/* Hover effect for all buttons (consistent lift) */
.btn:hover:not(:disabled):not(.loading) {
    transform: translateY(-1px);
}
.btn:active:not(:disabled) {
    transform: translateY(0);
}
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}
/* Primary button (gradient brand colors) */
.btn-primary, .btn-p {
    background: linear-gradient(135deg, var(--primary, #6cb499), var(--secondary, #2f7e99));
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(47, 126, 153, 0.2);
}
.btn-primary:hover, .btn-p:hover {
    box-shadow: 0 5px 15px rgba(47, 126, 153, 0.35);
}
/* Outline/Secondary button (subtle, refined) */
.btn-secondary, .btn-o {
    background: var(--card, #fff);
    border: 1.5px solid var(--bdl, #d1d5db);
    color: var(--tx2, #4b5563);
}
.btn-secondary:hover, .btn-o:hover {
    border-color: var(--primary, #6cb499);
    color: var(--secondary, #2f7e99);
    background: var(--m50, #f0fdf4);
    box-shadow: 0 2px 6px rgba(108, 180, 153, 0.1);
}
/* Red/Danger button */
.btn-danger, .btn-red {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.2);
}
.btn-danger:hover, .btn-red:hover {
    box-shadow: 0 5px 15px rgba(220, 38, 38, 0.35);
}
/* Success button */
.btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.2);
}
.btn-success:hover {
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.35);
}
/* Warning button */
.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.2);
}
.btn-warning:hover {
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.35);
}
/* Dark button */
.btn-dk {
    background: linear-gradient(135deg, #1f2937, #374151);
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
.btn-dk:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}
/* Mint/light primary */
.btn-mint {
    background: rgba(108, 180, 153, 0.12);
    color: var(--secondary, #2f7e99);
    border: 1px solid rgba(108, 180, 153, 0.3);
}
.btn-mint:hover {
    background: rgba(108, 180, 153, 0.2);
    border-color: var(--primary, #6cb499);
}
/* Sizes */
.btn-sm {
    padding: 6px 14px;
    font-size: 0.78rem;
    border-radius: 8px;
    gap: 6px;
}
.btn-xs {
    padding: 4px 10px;
    font-size: 0.72rem;
    border-radius: 6px;
    gap: 4px;
}
.btn-lg {
    padding: 14px 28px;
    font-size: 0.95rem;
    border-radius: 12px;
}
.btn-full {
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: 0.92rem;
}
/* Button group (segmented) */
.btn-grp {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}
.btn-grp .btn-sm {
    padding: 6px 12px;
}
/* Icon button (square, for actions in cards/tables) */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--bdl, #e5e7eb);
    background: var(--card, #fff);
    color: var(--tx2, #4b5563);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    text-decoration: none;
    padding: 0;
}
.btn-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.btn-icon-edit {
    color: var(--secondary, #2f7e99);
    border-color: rgba(47, 126, 153, 0.25);
    background: rgba(47, 126, 153, 0.08);
}
.btn-icon-edit:hover {
    background: var(--secondary, #2f7e99);
    color: #fff;
    border-color: var(--secondary, #2f7e99);
}
.btn-icon-delete {
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.08);
}
.btn-icon-delete:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.btn-icon-view {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.25);
    background: rgba(59, 130, 246, 0.08);
}
.btn-icon-view:hover {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}
.btn-icon-success {
    color: #10b981;
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.08);
}
.btn-icon-success:hover {
    background: #10b981;
    color: #fff;
    border-color: #10b981;
}
/* (removed duplicate .btn.loading rule — canonical version is defined at top of file) */
/* Print button (consistent with system) */
.print-btn {
    padding: 8px 16px;
    border-radius: 9px;
    border: 1px solid var(--bdl, #e5e7eb);
    background: var(--card, #fff);
    color: var(--tx2, #4b5563);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    transition: all 0.2s;
    text-decoration: none;
}
.print-btn:hover {
    border-color: var(--primary, #6cb499);
    color: var(--secondary, #2f7e99);
    background: var(--m50, #f0fdf4);
}
@media print {
    .print-btn { display: none !important; }
}
/* Focus accessibility */
.btn:focus-visible,
.btn-icon:focus-visible,
.print-btn:focus-visible {
    outline: 2px solid var(--primary, #6cb499);
    outline-offset: 2px;
}
/* Dark mode adjustments for buttons */
/* ═══════════════════════════════════════════════════════════════
   V11 — إصلاحات شاملة
   ═══════════════════════════════════════════════════════════════ */
/* === Print button redesign === */
.print-btn {
    padding: 9px 18px !important;
    border-radius: 10px !important;
    border: 1px solid var(--bdl, #e5e7eb) !important;
    background: var(--sf, #f8f9fa) !important;
    color: var(--tx2, #4b5563) !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}
.print-btn:hover {
    border-color: var(--primary, #6cb499) !important;
    color: var(--primary, #6cb499) !important;
    background: rgba(108,180,153,.08) !important;
    transform: translateY(-1px);
}
/* === Action buttons (edit/delete) global fix === */
.btn-icon-edit,
.btn-icon-delete,
.btn-icon-view {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    border: 1px solid !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}
.btn-icon-edit {
    color: var(--secondary, #2f7e99) !important;
    border-color: rgba(47,126,153,.25) !important;
    background: rgba(47,126,153,.08) !important;
}
.btn-icon-edit:hover {
    background: var(--secondary, #2f7e99) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.btn-icon-delete {
    color: #dc2626 !important;
    border-color: rgba(239,68,68,.25) !important;
    background: rgba(239,68,68,.08) !important;
}
.btn-icon-delete:hover {
    background: #dc2626 !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.btn-icon-view {
    color: #3B82F6 !important;
    border-color: rgba(59,130,246,.25) !important;
    background: rgba(59,130,246,.08) !important;
}
.btn-icon-view:hover {
    background: #3B82F6 !important;
    color: #fff !important;
    transform: translateY(-1px);
}
/* === Dark mode comprehensive fixes === */
/* Dark mode: page backgrounds */
/* Dark mode: alerts */
/* Dark mode: form groups */
/* Dark mode: stat cards  */
/* Dark mode: page header text */
/* Dark mode: footer */
/* Dark mode: page actions area */
/* Dark mode: breadcrumb */
/* Dark mode: tabs */
/* Dark mode: coach cards (ensure consistency) */
/* Dark mode: action buttons */
/* Dark mode: quick action items */
/* Dark mode: analysis page tables */
/* Dark mode: inline backgrounds fix */
/* Dark mode: text on card surfaces */
/* === Performance: pagination improvements === */
.pag {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin: 20px 0;
    flex-wrap: wrap;
}
.pag a {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--bdl, #e5e7eb);
    color: var(--tx2);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}
.pag a:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(108,180,153,.08);
}
.pag .pag-active,
.pag a.pag-active {
    background: linear-gradient(135deg, #6cb499, #2f7e99) !important;
    color: #fff !important;
    border-color: transparent !important;
}
/* === Coach card responsive improvement === */
@media (max-width: 768px) {
    .coach-grid {
        grid-template-columns: 1fr !important;
    }
}
@media (min-width: 769px) and (max-width: 1100px) {
    .coach-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* === V11 Dark mode: Analysis page === */
body.dark-mode [style*="background:linear-gradient(135deg,#ECFDF5"],
body.dark-mode [style*="background: linear-gradient(135deg,#ECFDF5"] {
    background: rgba(22,163,74,.1) !important;
    border-color: rgba(22,163,74,.3) !important;
}
/* === Dark mode: header top-nav === */
/* === Dark mode: modal overlay === */
/* === Dark mode: glass and special cards === */
/* === Dark mode: toast notifications === */
/* === Dark mode: help/support page === */
/* === Dark mode: login pages === */
/* === Dark mode: WhatsApp floating button === */
/* === Coaches page: improved card spacing === */
.coach-card-v2 .coach-card-header {
    padding: 18px 18px 14px !important;
}
.coach-card-v2 .coach-actions {
    gap: 6px !important;
}
.coach-card-v2 .action-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}
/* ═══ V11.1 — Selection & highlight fixes ═══ */
/* Text selection colors */
::selection {
    background: rgba(108,180,153,.35);
    color: inherit;
}
::-moz-selection {
    background: rgba(108,180,153,.35);
    color: inherit;
}
/* Dark mode: table row hover/selected - prevent white flash */
/* Dark mode: highlighted/active items */
/* Dark mode: focus on inputs */
/* Dark mode: badges inside tables */
/* Dark mode: knowledge bank cards */
/* Dark mode: top nav active indicator */
/* Dark mode: filter/tab buttons */
/* Dark mode: general link colors */
/* Dark mode: progress bars backgrounds */
/* ═══ V11.1 — Landing page responsive fix ═══ */
@media (max-width: 768px) {
    /* Hero section overflow fix */
    .page-landing section:first-of-type {
        margin: -24px -16px 0 !important;
        width: calc(100% + 32px) !important;
        padding: 24px 16px !important;
    }
    
    /* Header on mobile */
    .hdr {
        padding: 0 12px !important;
    }
    .hdr-logo {
        gap: 6px !important;
    }
    .logo-txt {
        font-size: 13px !important;
    }
    .logo-sub {
        display: none !important;
    }
    .hdr-uname {
        display: none !important;
    }
    .hdr-out span {
        display: none !important;
    }
    
    /* Hero title */
    .page-landing h1 {
        font-size: 24px !important;
    }
    
    /* Hero buttons - stack vertically */
    .page-landing [style*="display:flex"][style*="justify-content:center"] {
        flex-direction: column !important;
        align-items: center !important;
    }
    .page-landing [style*="display:inline-flex"][style*="flex-wrap:wrap"] {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    .page-landing [style*="display:inline-flex"][style*="flex-wrap:wrap"] a {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}
/* Stats grid responsive */
@media (max-width: 600px) {
    [style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    [style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
    }
}
@media (min-width: 601px) and (max-width: 900px) {
    [style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* Fix hero circles overflow */
.page-landing section [style*="position:absolute"][style*="border-radius:50%"] {
    display: none;
}
@media (min-width: 769px) {
    .page-landing section [style*="position:absolute"][style*="border-radius:50%"] {
        display: block;
    }
}
/* Nav scroll on mobile */
@media (max-width: 768px) {
    .hdr-nav {
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
    .hdr-nav a {
        font-size: 13px !important;
        padding: 10px 16px !important;
    }
}
/* ═══════════════════════════════════════════════════════════════
   V11 — نظام استجابة شامل لجميع الأجهزة
   Mobile (<576px) | Tablet (577-1024px) | Desktop (>1024px)
   ═══════════════════════════════════════════════════════════════ */
/* === Base: ensure no horizontal overflow === */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}
*, *::before, *::after {
    max-width: 100%;
}
img, video, iframe, canvas, svg {
    max-width: 100%;
    height: auto;
}
/* === Data tables: horizontal scroll on small screens === */
.data-table {
    width: 100%;
    border-collapse: collapse;
}
@media (max-width: 900px) {
    .table-wrap,
    [style*="overflow-x:auto"],
    .data-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .data-table {
        min-width: 600px;
    }
    /* Wrap tables automatically */
    table.data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* === Modals: full width on mobile === */
@media (max-width: 576px) {
    .mod {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: 5vh auto !important;
        border-radius: 16px !important;
    }
    .mod-t {
        padding: 14px 16px !important;
        font-size: 14px !important;
    }
    .mod form {
        padding: 14px !important;
    }
    .fg {
        margin-bottom: 12px !important;
    }
}
/* === Admin sidebar layout === */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(100%) !important;
        position: fixed !important;
        z-index: 1001 !important;
    }
    .sidebar.open {
        transform: translateX(0) !important;
    }
    .main-content {
        margin-right: 0 !important;
        width: 100% !important;
    }
    .sidebar-toggle {
        display: flex !important;
    }
}
@media (min-width: 1025px) {
    .sidebar-toggle {
        display: none !important;
    }
}
/* === Page header: stack on mobile === */
@media (max-width: 576px) {
    .page-head,
    .page-header,
    [class*="page-head"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .page-actions {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .page-actions .btn,
    .page-actions .print-btn,
    .page-actions a {
        flex: 1 !important;
        min-width: 0 !important;
        justify-content: center !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
    .page-t {
        font-size: 18px !important;
    }
    .page-d {
        font-size: 12px !important;
    }
}
/* === Stats grid (KPI cards) === */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .stat-card {
        padding: 12px !important;
    }
    .stat-card h3 {
        font-size: 18px !important;
    }
    .stat-card p {
        font-size: 11px !important;
    }
    .stat-card .icon {
        width: 36px !important;
        height: 36px !important;
    }
    .stat-card .icon i {
        font-size: 14px !important;
    }
}
/* === Quick actions grid === */
@media (max-width: 576px) {
    .qa-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .qa-item {
        padding: 12px !important;
        flex-direction: column !important;
        text-align: center !important;
    }
    .qa-icon {
        width: 36px !important;
        height: 36px !important;
        margin: 0 auto 8px !important;
    }
    .qa-label {
        font-size: 12px !important;
    }
    .qa-desc {
        font-size: 10px !important;
    }
}
/* === Two-column layout (.g2) === */
.g2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}
@media (max-width: 700px) {
    .g2 {
        grid-template-columns: 1fr !important;
    }
}
/* === Cards === */
@media (max-width: 576px) {
    .card {
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }
    .card-h {
        padding: 12px 14px !important;
    }
    .card-body,
    .card-b {
        padding: 12px 14px !important;
    }
    .card-t {
        font-size: 14px !important;
    }
}
/* === Forms === */
@media (max-width: 576px) {
    .fi {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }
    label {
        font-size: 12px !important;
    }
    .btn, .btn-p, .btn-full {
        font-size: 13px !important;
        padding: 10px 16px !important;
    }
    /* Stack form rows */
    [style*="display:flex"][style*="gap"] form,
    form[style*="display:flex"] {
        flex-direction: column !important;
    }
    form [style*="flex:1"],
    form [style*="min-width:200px"] {
        min-width: 0 !important;
        width: 100% !important;
    }
}
/* === Top navigation (beneficiary/coach) === */
@media (max-width: 768px) {
    .hdr {
        height: auto !important;
        min-height: 56px !important;
        padding: 8px 12px !important;
        flex-wrap: wrap !important;
    }
    .hdr-logo {
        gap: 6px !important;
    }
    .hdr-logo img {
        height: 28px !important;
    }
    .logo-txt {
        font-size: 12px !important;
    }
    .logo-sub {
        display: none !important;
    }
    .hdr-uname {
        display: none !important;
    }
    .hdr-out {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    .hdr-bell {
        width: 30px !important;
        height: 30px !important;
    }
    .hdr-user {
        padding: 3px 6px 3px 3px !important;
    }
    .avatar {
        width: 24px !important;
        height: 24px !important;
        font-size: 9px !important;
    }
    /* Nav becomes scrollable horizontal */
    .hdr-nav {
        order: 3 !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 4px 0 !important;
        gap: 0 !important;
        justify-content: flex-start !important;
    }
    .hdr-nav::-webkit-scrollbar {
        display: none !important;
    }
    .nav-link {
        padding: 8px 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .nav-link i {
        font-size: 12px !important;
        margin-left: 3px !important;
    }
    .hdr-menu {
        display: none !important;
    }
    .hdr-right {
        gap: 4px !important;
    }
}
/* === Beneficiary dashboard === */
@media (max-width: 576px) {
    /* Score cards */
    .sc {
        padding: 10px !important;
        border-radius: 10px !important;
    }
    .sc-val {
        font-size: 20px !important;
    }
    .sc-lb {
        font-size: 11px !important;
    }
    /* Progress bar */
    .prog {
        height: 8px !important;
    }
}
/* === Coach cards === */
@media (max-width: 576px) {
    .coach-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .coach-card-header {
        padding: 14px !important;
    }
    .coach-avatar {
        width: 44px !important;
        height: 44px !important;
        font-size: 15px !important;
    }
    .coach-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* === Alerts === */
@media (max-width: 576px) {
    .alr {
        padding: 10px 12px !important;
        font-size: 12px !important;
        gap: 8px !important;
        flex-direction: row !important;
    }
    .alr i {
        font-size: 16px !important;
    }
}
/* === Pagination === */
@media (max-width: 576px) {
    .pag a {
        min-width: 30px !important;
        height: 30px !important;
        font-size: 11px !important;
    }
}
/* === Toast notifications === */
@media (max-width: 576px) {
    .toast {
        left: 10px !important;
        right: 10px !important;
        max-width: none !important;
        font-size: 12px !important;
    }
}
/* === Print: hide non-essential on print === */
@media print {
    .sidebar, .sidebar-toggle, .sidebar-overlay,
    .hdr, .ft, .wa-btn, .btn, .mod-ov, .toast,
    .pag, .page-actions, .qa-grid, .hdr-right,
    .hdr-menu, .print-btn, .no-print {
        display: none !important;
    }
    .main-content {
        margin: 0 !important;
        padding: 10px !important;
    }
    body, .page {
        background: #fff !important;
        color: #000 !important;
    }
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}
/* === Chart containers === */
@media (max-width: 576px) {
    canvas {
        max-height: 250px !important;
    }
}
/* === Tabs (filter buttons) === */
@media (max-width: 576px) {
    [style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"],
    .tabs {
        gap: 4px !important;
    }
    [style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] a,
    .tab {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
}
/* === Footer === */
@media (max-width: 576px) {
    .ft-inner {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        text-align: center !important;
    }
    .ft-col {
        text-align: center !important;
    }
    .ft {
        padding: 24px 16px !important;
    }
}
/* === Calendar view === */
@media (max-width: 576px) {
    [style*="grid-template-columns:repeat(7"] {
        font-size: 10px !important;
    }
}
/* === Messages layout === */
@media (max-width: 768px) {
    .msg-layout {
        grid-template-columns: 1fr !important;
    }
    .msg-side {
        max-height: 300px !important;
    }
}
/* === Breadcrumb === */
@media (max-width: 576px) {
    nav[style*="font-size:12px"] {
        font-size: 10px !important;
        margin-bottom: 10px !important;
    }
}
/* === General inline style overrides for mobile === */
@media (max-width: 576px) {
    [style*="font-size:42px"],
    [style*="font-size:clamp(28px"] {
        font-size: 22px !important;
    }
    [style*="font-size:32px"] {
        font-size: 22px !important;
    }
    [style*="font-size:28px"] {
        font-size: 20px !important;
    }
    [style*="font-size:24px"] {
        font-size: 18px !important;
    }
    [style*="padding:70px"],
    [style*="padding:50px"],
    [style*="padding:60px"] {
        padding: 24px 16px !important;
    }
    [style*="padding:40px"] {
        padding: 20px 14px !important;
    }
    /* Make any flex row wrap on mobile */
    [style*="display:flex"][style*="gap"]:not([style*="flex-direction:column"]):not(.hdr):not(.hdr-right):not(.alr) {
        flex-wrap: wrap !important;
    }
}
/* === Tablet adjustments === */
@media (min-width: 577px) and (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .qa-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .page-t {
        font-size: 20px !important;
    }
}
/* === Large desktop (>1400px) === */
@media (min-width: 1400px) {
    /* No max-width — full width by default */
}
/* === Landscape phone fix === */
@media (max-height: 500px) and (orientation: landscape) {
    .mod {
        max-height: 85vh !important;
        overflow-y: auto !important;
    }
    .hdr {
        height: 48px !important;
        min-height: 48px !important;
    }
}
/* === Touch-friendly: larger tap targets on mobile === */
@media (max-width: 768px) {
    .btn, .btn-p, .btn-o, a.btn,
    .action-btn, .btn-icon-edit, .btn-icon-delete, .btn-icon-view {
        min-height: 40px !important;
        min-width: 40px !important;
    }
    /* Checkbox/radio sizing */
    input[type="checkbox"],
    input[type="radio"] {
        width: 18px !important;
        height: 18px !important;
    }
}
/* === Data tables scroll wrapper === */
.data-table {
    display: table !important;
    width: 100% !important;
}
@media (max-width: 768px) {
    [style*="overflow-x:auto"] {
        margin: 0 -4px;
        padding: 0 4px;
    }
    .data-table th,
    .data-table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }
    .data-table th:first-child,
    .data-table td:first-child {
        position: sticky;
        right: 0;
        z-index: 1;
        background: inherit;
    }
}
/* === Fix main content padding on mobile === */
@media (max-width: 576px) {
    .main-content {
        padding: 12px !important;
    }
    .page {
        padding: 12px !important;
    }
    main.page {
        padding: 60px 12px 12px !important;
    }
}
/* ═══ Hero section — full width fix ═══ */
.hero-section {
    margin: 0 !important;
    width: 100% !important;
}
@media (max-width: 768px) {
    .hero-section {
        margin: 0 !important;
        width: 100% !important;
        padding: 30px 16px !important;
    }
    .hero-section h1 {
        font-size: 22px !important;
        line-height: 1.5 !important;
    }
    .hero-section p {
        font-size: 13px !important;
    }
    .hero-section a {
        padding: 10px 18px !important;
        font-size: 12px !important;
    }
    /* Hide decorative circles on mobile */
    .hero-section > div[style*="position:absolute"][style*="border-radius:50%"] {
        display: none !important;
    }
    /* Stats cards smaller */
    .hero-section [style*="font-size:32px"] {
        font-size: 24px !important;
    }
    .hero-section [style*="padding:20px"] {
        padding: 12px !important;
    }
}
/* Landing page — hero fills full width */
/* ═══════════════════════════════════════════════════════════════
   V11 — إصلاح شامل للنصوص في الوضع الليلي
   يغطي جميع الألوان الداكنة المكتوبة inline في PHP
   ═══════════════════════════════════════════════════════════════ */
/* Dark text colors → light in dark mode */
/* Medium-dark text → lighter */
/* Dark green text → light green */
/* Dark blue text → light blue */
/* Dark red text → light red */
/* Dark amber/brown text → light amber */
/* Dark purple text → light purple */
/* Light backgrounds → dark backgrounds */
body.dark-mode [style*="background:#ECFDF5"],
body.dark-mode [style*="background:#ecfdf5"],
body.dark-mode [style*="background:linear-gradient(135deg,#ECFDF5"],
body.dark-mode [style*="background:#D1FAE5"],
body.dark-mode [style*="background:#d1fae5"] {
    background: rgba(22,163,74,.1) !important;
}
body.dark-mode [style*="background:#EFF6FF"],
body.dark-mode [style*="background:#eff6ff"],
body.dark-mode [style*="background:linear-gradient(135deg,#EFF6FF"],
body.dark-mode [style*="background:#DBEAFE"],
body.dark-mode [style*="background:#dbeafe"] {
    background: rgba(59,130,246,.1) !important;
}
body.dark-mode [style*="background:#F5F3FF"],
body.dark-mode [style*="background:#f5f3ff"],
body.dark-mode [style*="background:linear-gradient(135deg,#F5F3FF"],
body.dark-mode [style*="background:#EDE9FE"],
body.dark-mode [style*="background:#ede9fe"] {
    background: rgba(139,92,246,.1) !important;
}
body.dark-mode [style*="background:#FFFBEB"],
body.dark-mode [style*="background:#fffbeb"],
body.dark-mode [style*="background:linear-gradient(135deg,#FFFBEB"],
body.dark-mode [style*="background:#FEF3C7"],
body.dark-mode [style*="background:#fef3c7"] {
    background: rgba(245,158,11,.1) !important;
}
body.dark-mode [style*="background:#FEF2F2"],
body.dark-mode [style*="background:#fef2f2"],
body.dark-mode [style*="background:linear-gradient(135deg,#FEF2F2"],
body.dark-mode [style*="background:#FEE2E2"],
body.dark-mode [style*="background:#fee2e2"] {
    background: rgba(239,68,68,.1) !important;
}
/* Light borders → dark borders */
/* Notifications page */
/* General: any white-bg element text */
/* ═══════════════════════════════════════════════════════════════ */
/* V13.2 — Dark Mode إصلاحات الإحصائيات الشاملة */
/* ═══════════════════════════════════════════════════════════════ */
/* بطاقات الإحصائيات الصغيرة */
/* بطاقات الإحصائيات الكبيرة */
/* تبويبات الإحصائيات */
/* حاوية التبويبات */
/* صفوف التوزيع */
/* أشرطة KPI */
/* بطاقات أداء المرشدين */
/* البطاقات الفرعية في stats */
/* النصوص داخل الـ inline styles المكتوبة */
/* الـ before/after comparison cards (stats efficiency tab) */
/* بطاقات بنوع linear-gradient الفاتح في exercises tab */
body.dark-mode div[style*="background:linear-gradient(135deg,"][style*="15,"][style*="05)"]{
    background:#1F2937 !important;
    border-color:#374151 !important;
}
/* الجداول داخل stats */
/* البطاقات في tabs التي تستخدم خلفية فاتحة */
/* card-title icons */
/* الرسوم البيانية - الخلفية تحت الأعمدة */
/* الرسائل التحذيرية النصية */
/* النصوص داخل الـ inline في exercises tab */
/* ═══════════════════════════════════════════════════════════════ */
/* V13.2 — Comprehensive inline color safety net for dark mode */
/* ═══════════════════════════════════════════════════════════════ */
/* notifications.php and analysis.php hardcoded #1A2E38 */
/* family_profile.php fp-* classes */
/* General hardcoded #333 text */
/* Certificates page - skip dark mode override (it's for printing) */
/* analytics, family_profile, charts text */
/* Insights and recommendation cards */
/* gradient labels with .15 / .12 transparency on light bg */
body.dark-mode div[style*="background:linear-gradient(135deg,#ECFDF5"]{background:#0a2e1f !important;color:#a7f3d0 !important}
body.dark-mode div[style*="background:linear-gradient(135deg,#FFFBEB"]{background:#3a2e0a !important;color:#fde68a !important}
body.dark-mode div[style*="background:linear-gradient(135deg,#EFF6FF"]{background:#1e3a5f !important;color:#bfdbfe !important}
body.dark-mode div[style*="background:linear-gradient(135deg,#F5F3FF"]{background:#2e1065 !important;color:#ddd6fe !important}
/* ═══════════════════════════════════════════════════════════════ */
/* V13.2 — Danger Zone — Dark Mode */
/* ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════ */
/* V14.6 — Print Styles — لطباعة التقارير والملفات الشخصية         */
/* ═══════════════════════════════════════════════════════════════ */
@media print {
    /* أساسيات الطباعة */
    *, *::before, *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    body {
        font-family: 'Tajawal', 'Arial', sans-serif;
        line-height: 1.5;
        font-size: 11pt;
    }
    
    /* إخفاء العناصر التفاعلية */
    .nav, .sidebar, .topbar, .breadcrumb,
    .btn, .btn-grp, button:not(.print-show),
    .mod, .mod-ov, .modal,
    .page-head a, .page-head button,
    nav, .navigation, .menu,
    .empty, .pagination,
    form input[type="search"], .search-bar,
    .notif-actions, .quick-actions,
    [onclick], [data-toggle] {
        display: none !important;
    }
    
    /* الكروت بدون ظل */
    .card, .glass {
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
        margin-bottom: 12pt;
    }
    
    /* الجداول */
    table {
        border-collapse: collapse;
        width: 100%;
        page-break-inside: avoid;
    }
    table th, table td {
        border: 1px solid #999 !important;
        padding: 6pt 8pt !important;
    }
    table th {
        background: #eee !important;
        font-weight: bold;
    }
    
    /* روابط مع URL */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #666 !important;
    }
    a[href^="#"]:after, a[href^="javascript:"]:after {
        content: "";
    }
    
    /* العناوين تبدأ صفحة جديدة */
    h1 { page-break-before: always; }
    h1:first-child { page-break-before: avoid; }
    h2, h3 { page-break-after: avoid; }
    
    /* الأشرطة الملوّنة في الإحصائيات */
    .prog, .prog-f { 
        border: 1px solid #999 !important; 
    }
    
    /* الإيقونات */
    .fas, .far, .fab { 
        display: none !important; 
    }
}
/* ═══════════════════════════════════════════════════════════════ */
/* V14.6 — Accessibility — تحسين سهولة الوصول                      */
/* ═══════════════════════════════════════════════════════════════ */
/* حركة منخفضة للمستخدمين الذين يفضّلونها */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* تحسين focus للوحة المفاتيح */
*:focus-visible {
    outline: 3px solid #2f7e99 !important;
    outline-offset: 2px;
}
/* skip link للقارئات الشاشة */
.skip-link {
    position: absolute;
    top: -40px;
    right: 0;
    background: #2f7e99;
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    font-weight: 700;
}
.skip-link:focus {
    top: 0;
}
/* visually-hidden للنصوص الخاصة بالـ screen readers */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* تحسين contrast للنصوص الصغيرة */
.c-m, small, .small-text {
    color: #4a5e6e;
}
/* high-contrast mode support */
@media (prefers-contrast: high) {
    .btn { border-width: 2px !important; }
    .card { border: 2px solid currentColor !important; }
    a { text-decoration: underline; }
}
/* ═══════════════════════════════════════════════════════════════════
   V14.7 — إصلاحات شاملة (Sticky Header + Zoom + Dark Mode)
   ═══════════════════════════════════════════════════════════════════ */
/* === 1. الشريط العلوي ثابت 100% (sticky قوي) === */
.hdr {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* تأكد إن body ما يخفي الـ overflow الذي يكسر sticky */
html { overflow-y: auto !important; }
body { overflow-x: hidden; overflow-y: visible; }
/* === 2. منع الأقسام من الاختفاء عند zoom === */
/* نخفض زاوية تحول القائمة لـ 1100px بدل 768 — يغطي زوم 110-130% */
@media (max-width: 1100px) {
    .hdr-nav {
        display: none !important;
        position: fixed !important;
        top: 60px !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        background: var(--n950, #0F172A) !important;
        flex-direction: column !important;
        padding: 16px !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 60px) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.3) !important;
        gap: 4px !important;
        z-index: 9998 !important;
    }
    .hdr-nav.show {
        display: flex !important;
    }
    .hdr-nav .nav-link {
        padding: 14px 18px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        width: 100% !important;
        color: rgba(255,255,255,0.85) !important;
    }
    .hdr-nav .nav-link:hover {
        background: rgba(255,255,255,0.08) !important;
    }
    .hdr-nav .nav-link.active {
        background: linear-gradient(135deg, var(--primary, #6cb499), var(--secondary, #2f7e99)) !important;
        color: #fff !important;
    }
    .hdr-nav .nav-link.active::after {
        display: none !important;
    }
    .hdr-menu {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 9px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.15) !important;
        cursor: pointer;
    }
    .hdr-menu:hover {
        background: rgba(255,255,255,0.15);
    }
}
/* === 3. تحسين الـ hamburger في الديسكتوب أيضاً === */
.hdr-menu {
    background: rgba(255,255,255,0.08) !important;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    align-items: center;
    justify-content: center;
}
/* === 4. body padding للجوال — تأكد إن الشريط ما يغطي المحتوى === */
@media (max-width: 1100px) {
    .page {
        padding-top: 16px;
    }
}
/* === 5. تحسينات الـ Dark Mode الشاملة === */
/* النصوص الأساسية */
/* العناوين */
/* النصوص الفرعية */
/* الكروت */
/* الجداول */
/* الحقول النصية */
/* checkbox + radio */
/* الأزرار */
/* الخطوط الفاصلة */
/* بادج والتنبيهات */
/* breadcrumb */
/* dropdown قائمة */
/* tooltip */
/* الـ alerts */
/* النصوص الملوّنة الفاتحة في dark mode (مشكلة الاختفاء) */
/* خلفيات فاتحة في dark mode */
/* إصلاح الحدود الفاتحة */
/* === 6. زر تبديل الوضع الليلي — منقول للهيدر (V14.8) === */
.hdr-theme {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    transition: all 0.25s ease;
}
.hdr-theme:hover {
    background: rgba(255,255,255,0.18) !important;
    transform: translateY(-1px);
}
.hdr-theme i {
    color: #fbbf24;
}
/* احتفاظ بالـ theme-toggle (legacy) لو استخدم في صفحة معيّنة */
.theme-toggle { display: none !important; }
/* === 7. تثبيت الكروت الكبيرة لتطبق dark mode === */
/* === 8. منع zoom من تكسير layout === */
@media (max-width: 1400px) and (min-width: 1101px) {
    .hdr-nav {
        gap: 0 !important;
    }
    .hdr-nav .nav-link {
        padding: 18px 8px !important;
        font-size: 11px !important;
    }
    .hdr-nav .nav-link i {
        margin-left: 3px !important;
    }
}
/* === 9. fallback لو nav معطّل bug === */
.hdr-nav {
    flex-wrap: nowrap;
}
/* === V14.7: dark mode للحاسبات === */
/* Calculator results في dark mode */
/* النصوص الذهبية والفاتحة في dark mode */
/* بطاقات النتائج الفاتحة */
/* ============================================================
   V14.8: تحسينات الوضع الليلي للصفحات الجديدة
   (admin/coach calculators + ask)
   ============================================================ */
/* أزرار الأسئلة (ask-btn) و عناصر الاسئلة (ask-item) */
/* صف الميزانية (bud-row) */
/* خلفية cardSoft الافتراضية */
/* خلفيات بهتة على واجهات الإدارة (بنفسجي/سماوي/أخضر مع 15-30% شفافية) */
/* Tables داخل الكروت الإداريّة الجديدة */
/* الجداول العادية */
/* تأكيد ظهور أيقونة الوضع الليلي في الهيدر بشكل واضح */
.hdr-bell.hdr-theme {
    transition: all 0.2s ease;
}
.hdr-bell.hdr-theme:hover {
    background: rgba(255,255,255,0.15);
}
.hdr-bell.hdr-theme i.dark-icon {
    color: #fbbf24;
}
/* === V14.8: إصلاح النصوص داخل الكروت الملوّنة في الوضع الليلي === */
/* الكروت ذات خلفيّة فاتحة (#dcfce7, #fef3c7, #fee2e2 ...) */
/* النصوص الداكنة جدّاً في كروت ملوّنة → نصوص فاتحة */
/* === V14.8: إصلاح Sticky header للنصوص الكبيرة (لا يختفي عند zoom) === */
.hdr {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}
.hdr-nav {
    position: relative;
    z-index: 9998;
}
/* تعويض إذا كان الزوم متغيّر — منع أي تكسير في layout */
@media (max-width: 1400px) {
    .hdr {
        flex-wrap: nowrap !important;
    }
}
/* ============================================================
   V14.9: متغيّرات CSS عامّة تتكيّف مع الوضع الليلي
   حلّ شامل لمشكلة الكروت البيضاء في الوضع الليلي
   ============================================================ */
:root {
    --cardSoft: #f8fafc;       /* خلفيّة كرت داخلي ناعم (في الوضع النهاري) */
    --answerBg: #f8fafc;       /* خلفيّة بلوك الإجابات */
    --softBg: #f1f5f9;         /* خلفيّة بديلة (sections, alerts) */
    --proseBg: #fefefe;        /* خلفيّة قسم النص الطويل */
    --hoverBg: #f3f4f6;        /* خلفيّة الـ hover */
}
/* تطبيق المتغيّرات على الكلاسات المستخدمة */
.answer-block, .answer-prose {
    background: var(--answerBg);
    color: var(--tx);
    line-height: 2;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 0.95rem;
}
/* Layout helper للأسئلة (g2-ask, g2-stats) — متجاوب */
.g2-ask {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 16px;
}
.g2-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 900px) {
    .g2-ask, .g2-stats {
        grid-template-columns: 1fr;
    }
}
/* === V14.9: شامل — أي خلفيّة بيضاء أو فاتحة في الوضع الليلي تتحوّل === */
/* النصوص الداكنة العامة #333, #1e293b, #111 → فاتحة */
/* قواعد عامّة للجداول في الوضع الليلي (كل جدول في كل صفحة) */
/* بلوكات النص (content-box) في كل أنحاء النظام */
/* البنرات والإشعارات في الوضع الليلي */
/* عناصر الفورم في الوضع الليلي — ضمان كامل */
/* Settings page tabs (set-tab) في الوضع الليلي */
/* Toast messages في الوضع الليلي */
/* صفحة الإعدادات بالكامل في الوضع الليلي */
/* رسالة النجاح فوق نموذج الإعدادات (V14.9 — bullet-proof) */
.settings-banner {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideDown .4s ease;
}
.settings-banner-ok {
    background: linear-gradient(135deg, rgba(22,163,74,0.15), rgba(22,163,74,0.05));
    border-right: 4px solid #16a34a;
    color: #166534;
}
.settings-banner-err {
    background: linear-gradient(135deg, rgba(220,38,38,0.15), rgba(220,38,38,0.05));
    border-right: 4px solid #dc2626;
    color: #991b1b;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ═══════════════════════════════════════════════════════════════
   V14.10 — Scrollable Top Navigation + Zoom/Layout Polish
   ═══════════════════════════════════════════════════════════ */
/* Wrap header so we can position scroll arrows */
.hdr{gap:8px}
.hdr-nav-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:center;height:60px;overflow:hidden}
.hdr-nav-wrap::before,.hdr-nav-wrap::after{content:'';position:absolute;top:0;bottom:0;width:34px;pointer-events:none;z-index:2;opacity:0;transition:opacity .25s}
.hdr-nav-wrap::before{right:0;background:linear-gradient(to left,var(--n950) 30%,transparent)}
.hdr-nav-wrap::after{left:0;background:linear-gradient(to right,var(--n950) 30%,transparent)}
.hdr-nav-wrap.scroll-r::before{opacity:1}
.hdr-nav-wrap.scroll-l::after{opacity:1}
/* Make nav scroll horizontally with snap and momentum */
.hdr-nav{flex:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;min-width:0;padding-bottom:0;height:60px;align-items:center;cursor:grab}
.hdr-nav.dragging{cursor:grabbing;scroll-behavior:auto}
.hdr-nav::-webkit-scrollbar{display:none}
/* Nav arrow buttons — visible on hover/scroll */
.hdr-nav-arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    width:32px;height:32px;border-radius:50%;
    background:rgba(108,180,153,0.95);color:#fff;border:none;
    cursor:pointer;z-index:5;
    display:flex !important;align-items:center;justify-content:center;
    font-size:13px;
    box-shadow:0 4px 14px rgba(0,0,0,0.4);
    opacity:0;pointer-events:none;
    transition:opacity .25s, transform .2s, background .2s;
}
.hdr-nav-arrow:hover{background:var(--primary,#6cb499);transform:translateY(-50%) scale(1.12)}
.hdr-nav-arrow:active{transform:translateY(-50%) scale(.95)}
.hdr-nav-arrow.right{right:6px}
.hdr-nav-arrow.left{left:6px}
/* When wrap can scroll, show the arrows */
.hdr-nav-wrap.scroll-r .hdr-nav-arrow.right,
.hdr-nav-wrap.scroll-l .hdr-nav-arrow.left{opacity:1;pointer-events:auto}
/* Make nav links display correctly inside the scrollable container */
.hdr-nav .nav-link{flex-shrink:0;height:60px;display:flex;align-items:center;padding:0 14px;font-size:11.5px}
/* Mobile / tablet: hide arrows + collapse nav */
@media (max-width:768px){
  .hdr-nav-arrow{display:none !important}
  .hdr-nav-wrap{display:none}
  .hdr-nav-wrap.show{display:flex}
}
/* When window narrows but desktop, give nav more room */
@media (min-width:769px) and (max-width:1280px){
  .hdr{padding:0 12px}
  .hdr-uname{display:none}
  .logo-sub{display:none}
  .hdr-out span{display:none}
}
/* Avoid horizontal overflow at any zoom */
html,body{max-width:100vw;overflow-x:hidden}
/* V14.12: Pages inside admin layout — padding applied on .page only */
.main-content{padding:0!important;max-width:calc(100vw - 280px);overflow-x:hidden}
@media (max-width:1024px){.main-content{margin-right:0;max-width:100vw;width:100vw}}
/* Stat / section grids: smarter min-widths so they don't leave gaps */
.stats-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.sg{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* Larger viewports — let cards stretch nicely */
@media (min-width:1600px){
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .sg{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}
/* Dark mode adjustments for the new nav arrows */
/* Print: hide arrows */
@media print{.hdr-nav-arrow,.hdr-nav-wrap::before,.hdr-nav-wrap::after{display:none!important}}
/* ═══════════════════════════════════════════════════════════
   V14.12 — إصلاحات الوضع الليلي للعناصر بـ inline gradients
   ═══════════════════════════════════════════════════════════ */
/* Risk/alert cards with light pink/orange backgrounds */
/* Specific overrides for risk/priority dashboards */
/* Light pink/red banners (e.g. 'أعلى 5 أولويات اليوم', 'خطر عالٍ — تدخل عاجل') */
/* Force readable text on any inline-styled element with white-ish background */
/* ═══════════════════════════════════════════════════════════
   V14.13 — Card Header Variants (light + dark mode aware)
   ═══════════════════════════════════════════════════════════ */
.card-h-priority{background:linear-gradient(90deg,#fef2f2,#fffbeb)!important;border-bottom:1px solid #fecaca}
.card-h-danger{background:linear-gradient(90deg,#fef2f2,#fee2e2)!important;border-bottom:1px solid #fca5a5}
.card-h-priority .card-t,.card-h-danger .card-t{color:#7f1d1d}
/* قاعدة شاملة لأي card-h فيها inline gradient فاتح */
/* ═══════════════════════════════════════════════════════════
   V14.13 — قوة قاطعة على عرض الصفحة (يلغي أي تضارب سابق)
   ═══════════════════════════════════════════════════════════ */
html, body { max-width: 100vw !important; overflow-x: hidden !important; margin: 0 !important; padding: 0 !important; }
/* للـ admin: .main-content يأخذ كل العرض (margin-right للـ sidebar فقط) */
.admin-layout { display: flex !important; min-height: 100vh !important; }
.admin-layout .main-content {
    flex: 1 1 auto !important;
    width: calc(100vw - 280px) !important;
    max-width: calc(100vw - 280px) !important;
    margin-right: 280px !important;
    margin-left: 0 !important;
    padding: 24px clamp(16px, 2.5vw, 40px) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}
@media (max-width: 1024px) {
    .admin-layout .main-content {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-right: 0 !important;
        padding: 16px clamp(12px, 2vw, 24px) !important;
    }
}
/* للبوابات الأخرى: .page تأخذ كل العرض */
main.page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px clamp(16px, 2.5vw, 40px) !important;
    box-sizing: border-box !important;
    flex: none !important;
}
main.page-landing {
    padding: 0 !important;
    max-width: 100% !important;
}
/* أي عناصر داخلية بـ inline max-width تُلغى */
.page > .card, .page > div:not(.page-head):not(.page-header),
.main-content > .card, .main-content > div {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* في صفحات المستفيد، grids تستفيد من العرض الكامل */
.stats-grid, .sg, .qa-grid {
    width: 100% !important;
    max-width: 100% !important;
}
/* ═══════════ V15: إصلاحات شاملة للوضع الليلي ═══════════ */
/* النصوص ذات الألوان الداكنة الصريحة — تُعكس في الوضع الليلي */
/* الخلفيات الفاتحة الصريحة */
/* sc-lb + sc-val visibility */
/* coach daily_focus session cards */
/* risk prediction info box */
/* empty-text visibility */
/* ═══════════ V15.1: استقرار التخطيط عند الزوم ═══════════ */
/* الصفحة دائماً 100% من العرض، بدون انضغاط */
html, body { width: 100%; min-width: 320px; }
/* قاعدة عامة: الصفحات الداخلية لا تُحاصر */
.page, .main-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
/* عند sidebar فقط: الـ main-content يطرح عرض السايدبار */
body.has-sidebar .main-content {
    width: calc(100% - 280px) !important;
    max-width: calc(100% - 280px) !important;
}
/* التخطيط الافتراضي للسايدبار يظل فعّالاً */
.sidebar + .main-content,
aside + .main-content {
    width: calc(100vw - 280px) !important;
    max-width: calc(100vw - 280px) !important;
}
/* في حالة الـ TopNav، الصفحة تملأ كامل العرض */
.hdr ~ .page,
.hdr ~ main.page {
    width: 100% !important;
    max-width: 100% !important;
}
/* الـ Cards بداخل الـ page تملأ الفراغ المتاح */
.page > .card,
main.page > .card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
/* الـ grid لا يفجّر التخطيط على شاشات عريضة */
.stats-grid, .sg, .qa-grid {
    width: 100%;
    max-width: 100%;
}
/* ═══════════ V15.1: إصلاحات إضافية للوضع الليلي ═══════════ */
/* السايدبار - بطاقة المستخدم النشط في الوضع الليلي */
/* بطاقات الكروت ذات خلفيات خضراء/زرقاء فاتحة */
/* بطاقات WhatsApp وغيرها على خلفيات خضراء */
/* خلفية بطاقات الإعدادات في الوضع الليلي */
/* بطاقات اللون الأخضر مع نصوص خضراء داكنة */
/* إصلاح الأيقونات على الخلفيات الخضراء في الوضع الليلي */
/* ═══════════ V15.2: ضمان ملء الشاشة بالكامل (يمين/يسار) ═══════════ */
/* أعلى أولوية — تطغى على أيّ قاعدة سابقة */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}
body {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 100vh;
}
/* الهيدر دائماً يملأ كامل العرض */
.hdr, header.hdr {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
}
/* main + .page دائماً يملآن العرض */
main, main.page, .page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box;
}
/* محتوى الإدارة (الذي فيه sidebar position:fixed) — يطرح عرض السايدبار */
.admin-layout {
    width: 100%;
    min-height: 100vh;
}
/* السايدبار في الإدارة position:fixed — لذا main-content يحتاج margin-right:280px ليتجنّب التداخل */
.admin-layout > .main-content,
aside.sidebar ~ .main-content {
    flex: 1 1 auto !important;
    width: calc(100% - 280px) !important;
    max-width: calc(100% - 280px) !important;
    margin-right: 280px !important;
    min-width: 0 !important;
    box-sizing: border-box;
}
/* في حال لم يكن داخل admin-layout، main-content بدوره يملأ كامل العرض */
body:not(.has-sidebar) > .main-content:not(.admin-layout *) {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}
/* الكروت داخل الصفحة لا تتقلّص */
.page > *, main.page > *, .main-content > * {
    max-width: 100%;
    box-sizing: border-box;
}
/* صفحة الرسائل: msg-wrap دائماً يملأ كامل عرض الصفحة */
.msg-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
/* الفوتر يملأ العرض */
.ft, footer.ft {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* جوّال: السايدبار يصير drawer — main-content يصير full width */
@media (max-width: 768px) {
    .admin-layout > .main-content,
    aside.sidebar ~ .main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
    }
}
/* تصحيح للإصدارات الأقدم — body عند admin-layout */
body.has-sidebar .admin-layout > .main-content {
    width: calc(100% - 280px) !important;
    max-width: calc(100% - 280px) !important;
    margin-right: 280px !important;
}
/* ═══════════════════════════════════════════════════════════════
   V15.3 — حل قاطع نهائي لمشكلة الفراغات في الصفحات
   ═══════════════════════════════════════════════════════════════
   هذا الـ block في نهاية الملف ليتغلب على أي قاعدة سابقة.
   *كل* الصفحات (مستفيد، مرشد، إدارة) يجب أن تملأ كامل العرض. */
/* HTML/Body: العرض الكامل قسراً */
html {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}
body {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}
/* main: في كل الحالات يأخذ 100vw، إلا إذا كان داخل admin-layout */
body > main,
body > main.page {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    align-self: auto !important;
}
/* Header دائماً 100% */
body > header.hdr,
body > .hdr {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
/* Footer دائماً 100% */
body > footer,
body > footer.ft,
body > .ft {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
/* Admin layout: container 100% — ابن .main-content يأخذ كل ما تبقى بعد السايدبار */
body > .admin-layout {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important; /* إلغاء flex لأن sidebar position:fixed */
}
/* في admin، sidebar position:fixed، main-content يأخذ العرض - 280px */
.admin-layout > .main-content {
    width: calc(100vw - 280px) !important;
    max-width: calc(100vw - 280px) !important;
    min-width: calc(100vw - 280px) !important;
    margin-right: 280px !important;
    margin-left: 0 !important;
    padding: 24px clamp(16px, 2.5vw, 40px) !important;
    box-sizing: border-box !important;
}
/* Mobile: السايدبار drawer، main-content full */
@media (max-width: 768px) {
    .admin-layout > .main-content {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin-right: 0 !important;
        padding: 16px clamp(10px, 2vw, 20px) !important;
        padding-top: 70px !important;
    }
}
/* الكروت داخل .page تأخذ العرض الكامل (مع padding من main) */
main.page > .card,
main.page > div,
.main-content > .card,
.main-content > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* skip-link لا يؤثر على layout */
.skip-link {
    position: absolute !important;
    pointer-events: auto !important;
}
/* في حالة مشاركة admin-layout مع main خارجي (لا ينطبق عملياً، لكن للحماية) */
body > main:not(.admin-layout *) {
    flex: 0 0 auto;
}
/* V16.0 — تحسينات الوضع الليلي الشاملة */
/* للحقول داخل الكروت */
/* النصوص ذات الخلفية البيضاء */
/* رسائل التنبيه */
/* ─── Admin Tabs (extracted from inline styles V19.10.2) ─── */
.admin-tabs{display:flex;gap:8px;background:var(--card,#fff);border-radius:16px;padding:8px;margin-bottom:22px;border:1px solid var(--bd,#e0e8ec);box-shadow:0 1px 3px rgba(0,0,0,.04);overflow-x:auto}
.admin-tabs a{flex:1;text-align:center;padding:12px 18px;border-radius:12px;font-weight:600;font-size:0.88rem;color:var(--tx2,#5a6e80);text-decoration:none;transition:all .25s ease;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;min-width:max-content}
.admin-tabs a i,.admin-tabs a .fa,.admin-tabs a .fas,.admin-tabs a .fa-solid,.coach-tabs a i,.coach-tabs a .fa,.coach-tabs a .fas,.coach-tabs a .fa-solid{font-family:"Font Awesome 6 Free","Font Awesome 5 Free","FontAwesome" !important;font-weight:900 !important;font-style:normal !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:1rem;opacity:.7;transition:opacity .25s}
.admin-tabs a:hover{background:var(--sf,#f5f7fa);color:var(--tx,#1a2e38)}
.admin-tabs a:hover i{opacity:1}
.admin-tabs a.active{background:linear-gradient(135deg,var(--secondary,#2f7e99),var(--primary,#6cb499));color:#fff;box-shadow:0 4px 12px rgba(47,126,153,.25)}
.admin-tabs a.active i{opacity:1}
/* ─── Coach Tabs (extracted from inline styles V19.10.2) ─── */
.coach-tabs{display:flex;gap:6px;background:var(--card,#fff);border-radius:14px;padding:6px;margin-bottom:20px;border:1px solid var(--bd,#e0e8ec);overflow-x:auto;flex-wrap:nowrap}
.coach-tabs a{flex:1;min-width:130px;text-align:center;padding:11px 16px;border-radius:10px;font-weight:600;font-size:0.9rem;color:var(--tx2,#5a6e80);text-decoration:none;transition:.2s;white-space:nowrap}
.coach-tabs a:hover{background:var(--sf,#f5f7fa);color:var(--tx,#1a2e38)}
.coach-tabs a.active{background:linear-gradient(135deg,#2f7e99,#1a4d6b);color:#fff;box-shadow:0 4px 14px rgba(47,126,153,.3)}
/* ─── Beneficiary Tabs Bar (extracted V19.10.2) ─── */
.tabs-bar{display:flex;gap:6px;background:var(--card,#fff);border-radius:14px;padding:6px;margin-bottom:20px;border:1px solid var(--bd,#e0e8ec);overflow-x:auto;flex-wrap:nowrap}
.tabs-bar a{flex:1;min-width:130px;text-align:center;padding:11px 16px;border-radius:10px;font-weight:600;font-size:0.9rem;color:var(--tx2,#5a6e80);text-decoration:none;transition:.2s;white-space:nowrap}
.tabs-bar a:hover{background:var(--sf,#f5f7fa);color:var(--tx,#1a2e38)}
.tabs-bar a.active{background:linear-gradient(135deg,#6cb499,#2f7e99);color:#fff;box-shadow:0 4px 14px rgba(108,180,153,.3)}
/* ═══════════════════════════════════════════════════════════════════
   V19.10.2 — Unified Font & Responsive System
   ═══════════════════════════════════════════════════════════════════ */
/* ─── Unified Font Stack ─── */
body, input, select, textarea, button, .fi, .btn {
    font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, h5, h6, .page-t, .card-t, .mod-t, .bp-name, .sc-val, .kpi-card h3 {
    font-family: 'Tajawal', sans-serif;
    font-weight: 800;
}
code, pre, .monospace, input[type="tel"], input[dir="ltr"] {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
}
/* ─── Touch-friendly sizing ─── */
@media (hover: none) and (pointer: coarse) {
    .btn, .fi, select, .bp-tab, .admin-tabs a, .coach-tabs a, .tabs-bar a {
        min-height: 44px;
    }
    .btn-sm { min-height: 38px; padding: 8px 14px; }
    td, th { padding: 10px 8px; }
}
/* ─── Mobile (≤480px) ─── */
@media (max-width: 480px) {
    body { font-size: 0.85rem; }
    .page { padding: 12px !important; }
    .page-t { font-size: 1rem !important; }
    .page-d { font-size: 12px; }
    .card { border-radius: 12px; }
    .card-body { padding: 12px; }
    .g2, .s-2col { grid-template-columns: 1fr !important; }
    .bp-tabs, .admin-tabs, .coach-tabs, .tabs-bar { 
        gap: 4px; padding: 4px; 
    }
    .bp-tab, .admin-tabs a, .coach-tabs a, .tabs-bar a { 
        min-width: 90px; padding: 9px 10px; font-size: 12px; 
    }
    .bp-hero { padding: 16px; border-radius: 14px; }
    .bp-hero-content { gap: 12px; }
    .bp-avatar { width: 60px; height: 60px; font-size: 26px; border-radius: 16px; }
    .bp-name { font-size: 1.2rem; }
    .bp-meta { font-size: 11px; gap: 8px; }
    .bp-stat-v { font-size: 1.3rem; }
    .mod { padding: 20px; width: 95vw; }
    .hdr { padding: 0 12px; }
    table { font-size: 12px; }
    .btn { padding: 8px 14px; font-size: 0.82rem; }
    .kpi-card { padding: 12px; }
    .kpi-card h3 { font-size: 1.3rem; }
    .sc-val { font-size: 20px; }
    .ft-inner { grid-template-columns: 1fr; gap: 20px; padding: 30px 16px 10px; }
    .login-box { padding: 24px; }
}
/* ─── Tablet (481px–768px) ─── */
@media (min-width: 481px) and (max-width: 768px) {
    .page { padding: 16px !important; }
    .g2 { grid-template-columns: 1fr 1fr; }
    .bp-tabs, .admin-tabs, .coach-tabs, .tabs-bar { gap: 4px; }
    .ft-inner { grid-template-columns: 1fr 1fr; }
}
/* ─── Sidebar collapse on small screens ─── */
@media (max-width: 768px) {
    .sb { 
        position: fixed; z-index: 1000; right: -280px; 
        transition: right 0.3s ease; width: 260px; 
        box-shadow: -5px 0 25px rgba(0,0,0,0.15);
    }
    .sb.open { right: 0; }
    .main { margin-right: 0 !important; }
    .hdr-menu { display: flex !important; }
    
    /* Grid responsive */
    [style*="grid-template-columns: repeat(5"] { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
    [style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    }
}
/* ─── Print optimization ─── */
@media print {
    .sb, .hdr, .ft, .btn, .bp-tabs, .admin-tabs, .coach-tabs, .tabs-bar,
    .hdr-menu, .mod-ov { display: none !important; }
    .main { margin: 0 !important; }
    .page { padding: 0 !important; }
    body { font-size: 12pt; color: #000; background: #fff; }
    .card { border: 1px solid #ddd; box-shadow: none; page-break-inside: avoid; }
}
/* ─── Large screens (≥1440px) ─── */
@media (min-width: 1440px) {
    .page { max-width: 1400px; margin: 0 auto; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   إصلاح شامل للوضع الليليّ — معالجة الخلفيّات الفاتحة inline
   هذه القواعد تتعامل مع 86+ inline-style منثورة في PHP files
   ═══════════════════════════════════════════════════════════════════════════ */
/* خلفيّات الـchips والـbadges الفاتحة في الوضع الليليّ */
/* نصوص داكنة على خلفيّات فاتحة inline — تُفتَّح لتُقرأ في الوضع الليليّ */
/* حقول disabled في النماذج — تكون واضحة في الوضع الليليّ */
/* gradient backgrounds في cards (مثل بطاقة "بياناتك الشخصية") */
body.dark-mode [style*="linear-gradient(135deg,#F0FDF4"],
body.dark-mode [style*="linear-gradient(135deg,#f0fdf4"]{ background:linear-gradient(135deg,#0f2e1f,#0a1f15) !important; border-color:#1a3a2a !important; }
/* badges/chips inline في عرض extra_data والـUI الرئيسيّ */
/* qa-btn (أزرار سريعة في بطاقة الأسرة) */
/* filter pills */
/* announcements في الـheader */
/* ─── toast-info: نمط هادئ للرسائل الإعلامية (ليس خطأ، ليس نجاح) ─── */
.toast-info{ background:#1e40af;color:#fff }