:root{
    --logo-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23063F60'/%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='%230786AD' stroke-width='4'/%3E%3Cpath d='M50 26 L84 43 L50 60 L16 43 Z' fill='%23ffffff'/%3E%3Cpath d='M28 49 L28 65 Q50 76 72 65 L72 49' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='84' cy='43' r='3.5' fill='%230786AD'/%3E%3Cline x1='84' y1='43' x2='84' y2='62' stroke='%230786AD' stroke-width='3'/%3E%3C/svg%3E");
    --navy:#062B4A; --navy-deep:#031C34; --cyan:#20B7D9; --blue-mid:#175B8C; --orange:#20B7D9;
    --bg:#EDF3F7; --bg-soft:#EDF3F7; --card:#fff; --text:#0B3350; --text-muted:#5A7288; --border:#D8E2EA;
    --radius:12px; --shadow:0 10px 26px -14px rgba(6,63,96,.25);
    --green:#1E9E6B; --red:#D9463B; --amber:#D9A72B;
    --gold:#E8AD3F; --gold-soft:#F3C56B;
    --font-head:'IBM Plex Sans Arabic', sans-serif; --font-body:'Tajawal', sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  ::selection{background:var(--cyan); color:#fff;}
  ::-moz-selection{background:var(--cyan); color:#fff;}
  html{scrollbar-color:var(--navy) var(--bg-soft); scrollbar-width:thin; overflow-x:hidden;}
  ::-webkit-scrollbar{width:11px; height:11px;}
  ::-webkit-scrollbar-track{background:var(--bg-soft);}
  ::-webkit-scrollbar-thumb{background:var(--navy); border-radius:20px; border:2px solid var(--bg-soft);}
  ::-webkit-scrollbar-thumb:hover{background:var(--navy-deep);}
  body{background:var(--bg); color:var(--text); font-family:var(--font-body); direction:rtl;}
  h1,h2,h3{font-family:var(--font-head); font-weight:800;}
  button{font-family:inherit; cursor:pointer;}
  input,select{font-family:inherit;}
  #app{min-height:100vh;}

  /* ---------- shared ---------- */
  .center-screen{position:relative;isolation:isolate;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px;background:linear-gradient(145deg,#041E31 0%,#073A57 58%,#0A5B78 100%);overflow:hidden;}
  .center-screen::before,.center-screen::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(2px);}
  .center-screen::before{width:520px;height:520px;top:-250px;right:-150px;background:radial-gradient(circle,rgba(53,195,227,.24),transparent 68%);}
  .center-screen::after{width:440px;height:440px;bottom:-250px;left:-100px;background:radial-gradient(circle,rgba(232,173,63,.15),transparent 68%);}
  .auth-card{position:relative;background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.58);border-radius:24px;padding:34px 34px 28px;width:100%;max-width:430px;box-shadow:0 32px 80px -32px rgba(0,0,0,.65);overflow:hidden;}
  .auth-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--cyan),#0D82A8,var(--gold));}
  .auth-logo{display:flex;align-items:center;gap:10px;justify-content:center;min-height:66px;margin-bottom:13px;}
  .auth-logo img{max-width:185px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(3,41,63,.12));}
  .logo-badge{width:36px; height:36px; border-radius:50%; background-image:var(--logo-img); background-size:cover; background-position:center;}
  .auth-kicker{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:6px;color:#087E9F;font-size:11px;font-weight:800;letter-spacing:.02em;}
  .auth-kicker::before,.auth-kicker::after{content:"";width:22px;height:1px;background:#BBDCE5;}
  .auth-title{font-size:21px;font-weight:800;color:var(--navy);text-align:center;margin-bottom:6px;}
  .auth-sub{max-width:320px;margin:0 auto 24px;font-size:13px;color:var(--text-muted);text-align:center;line-height:1.7;}
  .auth-card form{padding-top:2px;}
  .field{margin-bottom:15px;}
  .field label{display:block;font-size:12.5px;font-weight:800;color:var(--navy);margin-bottom:7px;}
  .field input, .field select, .field textarea{width:100%;min-height:46px;border:1.5px solid #D7E2E9;border-radius:11px;padding:11px 14px;font-size:14px;font-family:inherit;background:#FBFDFE;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
  .field textarea{resize:vertical;}
  .field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--cyan);background:#fff;box-shadow:0 0 0 4px rgba(53,195,227,.12);}
  .password-wrap{position:relative;}
  .password-wrap input{padding-left:54px;}
  .password-toggle{position:absolute;top:50%;left:7px;transform:translateY(-50%);min-width:40px;height:34px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:#527083;font-size:11px;font-weight:800;cursor:pointer;}
  .password-toggle:hover{background:#EAF5F8;color:var(--navy);}
  .auth-security-note{display:flex;align-items:flex-start;justify-content:center;gap:7px;margin-top:15px;padding:10px 12px;border-radius:10px;background:#F3F8FA;color:#5B7484;font-size:11px;line-height:1.6;}
  .auth-back{display:flex;justify-content:center;margin-top:17px;padding-top:15px;border-top:1px solid #EDF2F5;}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:9px; font-weight:700; font-size:14px; border:none; transition:.2s;}
  .btn-block{width:100%;}
  .btn-navy{background:var(--navy); color:#fff;}
  .btn-navy:hover{background:var(--navy-deep);}
  .btn-orange{background:var(--orange); color:#fff;}
  .btn-orange:hover{background:#175B8C;}
  .btn-outline{background:#fff; border:1.5px solid var(--navy); color:var(--navy);}
  .btn-outline:hover{background:var(--navy); color:#fff;}
  .btn-ghost{background:transparent; color:var(--text-muted); font-weight:600;}
  .btn-sm{padding:7px 13px; font-size:12.5px; border-radius:7px;}
  .btn-danger{background:#FDEEEC; color:var(--red);}
  .btn-danger:hover{background:var(--red); color:#fff;}
  .link-btn{background:none; border:none; color:var(--cyan); font-weight:700; font-size:13px;}
  .error-box{background:#FDEEEC; color:var(--red); font-size:13px; padding:10px 14px; border-radius:8px; margin-bottom:14px;}
  .success-box{background:#E9F8F1; color:var(--green); font-size:13px; padding:10px 14px; border-radius:8px; margin-bottom:14px;}
  .role-pick{display:flex; flex-direction:column; gap:14px; margin-top:10px;}
  .role-option{border:1.5px solid var(--border); border-radius:12px; padding:18px 20px; text-align:right; display:flex; align-items:center; gap:14px; background:#fff;}
  .role-option:hover{border-color:var(--cyan); box-shadow:var(--shadow);}
  .role-option .ic{width:42px; height:42px; border-radius:10px; background:var(--bg); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .role-option b{display:block; font-size:14.5px; color:var(--navy);}
  .role-option span{font-size:12.5px; color:var(--text-muted);}
  .disclaimer{background:#FFF7E8; border:1px solid #F0D89B; color:#8A6417; font-size:11.5px; padding:10px 14px; border-radius:8px; margin-top:18px; line-height:1.6;}
  @media(max-width:520px){
    .center-screen{align-items:flex-start;padding:18px 12px;overflow-y:auto;}
    .auth-card{margin:auto 0;padding:27px 20px 22px;border-radius:20px;}
    .auth-logo{min-height:57px;margin-bottom:9px;}
    .auth-title{font-size:19px;}
  }

  /* ---------- gateway (اختيار القسم بعد دخول الأدمن) ----------
     الشاشة دي كانت مبنية بـ inline styles جوه renderAdminGateway، ومعاها
     onmouseover/onmouseout لكل كارت. نقلناها لـ classes: التحويم بقى CSS خالص
     (أخف وبيشتغل مع لوحة المفاتيح كمان)، والأيقونات بقت SVG بلون الهوية بدل
     إيموجي. الألوان كلها من متغيرات الهوية الموجودة. */
  .gw-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;position:relative;overflow:hidden;background:var(--navy-deep);}
  /* توهج محيطي بلوني الهوية — أعمق بصريًا من تدرّج مسطح */
  .gw-screen::before,.gw-screen::after{content:"";position:absolute;width:620px;height:620px;border-radius:50%;pointer-events:none;}
  .gw-screen::before{background:radial-gradient(circle,rgba(32,183,217,.20),transparent 65%);top:-250px;inset-inline-end:-190px;}
  .gw-screen::after{background:radial-gradient(circle,rgba(232,173,63,.14),transparent 65%);bottom:-270px;inset-inline-start:-200px;}
  .gw-wrap{position:relative;z-index:1;width:100%;max-width:760px;}

  .gw-head{text-align:center;margin-bottom:34px;}
  .gw-head img{height:56px;width:auto;margin-bottom:16px;}
  .gw-greet{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#9DBECE;font-size:12.5px;font-weight:700;margin-bottom:14px;}
  .gw-greet i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(30,158,107,.18);}
  .gw-title{color:#fff;font-size:26px;font-weight:800;font-family:var(--font-head);line-height:1.35;margin:0;}
  .gw-sub{color:#8FA4B8;font-size:14px;margin-top:8px;}

  .gw-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  .gw-card{position:relative;display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:26px 24px 20px;color:#fff;text-align:start;cursor:pointer;font-family:var(--font-body);overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
  /* شريط لوني رفيع فوق الكارت بيتمدد عند التحويم */
  .gw-card::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--gw-accent);transform:scaleX(0);transform-origin:right center;transition:transform .3s ease;}
  .gw-card:hover,.gw-card:focus-visible{transform:translateY(-4px);border-color:var(--gw-edge);box-shadow:0 24px 50px -24px rgba(0,0,0,.7);outline:none;}
  .gw-card:hover::before,.gw-card:focus-visible::before{transform:scaleX(1);}
  .gw-card:focus-visible{box-shadow:0 0 0 3px var(--gw-tint),0 24px 50px -24px rgba(0,0,0,.7);}
  .gw-card:active{transform:translateY(-1px);}
  /* التدرّج اللوني لكل قسم — rgba صريحة مش color-mix عشان تشتغل في أي متصفح */
  .gw-card.is-site{--gw-accent:#20B7D9;--gw-tint:rgba(32,183,217,.14);--gw-edge:rgba(32,183,217,.45);}
  .gw-card.is-mkt{--gw-accent:#E8AD3F;--gw-tint:rgba(232,173,63,.14);--gw-edge:rgba(232,173,63,.45);}

  .gw-ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px;background:var(--gw-tint);border:1px solid var(--gw-edge);}
  .gw-ico svg{width:25px;height:25px;stroke:var(--gw-accent);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
  .gw-card h3{font-size:18px;font-weight:800;font-family:var(--font-head);margin:0 0 6px;color:#fff;}
  .gw-card p{font-size:13px;color:#8FA4B8;line-height:1.7;margin:0 0 15px;}
  .gw-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
  .gw-chips span{font-size:11px;font-weight:700;color:#A9C2D2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:4px 8px;}
  .gw-go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid rgba(255,255,255,.07);font-size:13px;font-weight:800;color:var(--gw-accent);}
  .gw-go svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease;}
  .gw-card:hover .gw-go svg{transform:translateX(-5px);}

  .gw-foot{text-align:center;margin-top:26px;}
  .gw-logout{background:none;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:9px 18px;color:#8FA4B8;font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:color .2s ease,border-color .2s ease;}
  .gw-logout:hover{color:#fff;border-color:rgba(255,255,255,.28);}

  @media(max-width:700px){
    .gw-screen{padding:28px 16px;align-items:flex-start;}
    .gw-grid{grid-template-columns:1fr;gap:14px;}
    .gw-title{font-size:22px;}
    .gw-head{margin-bottom:26px;}
    .gw-card{padding:22px 20px 18px;}
  }
  @media(prefers-reduced-motion:reduce){
    .gw-card,.gw-card::before,.gw-go svg{transition:none;}
    .gw-card:hover,.gw-card:focus-visible{transform:none;}
  }

  /* ---------- dashboard layout ---------- */
  .dash{display:flex; min-height:100vh;}
  .sidebar{width:250px; background:var(--navy-deep); color:#B9CBDA; flex-shrink:0; display:flex; flex-direction:column; padding:22px 0;}
  .sidebar-logo{display:flex; align-items:center; gap:10px; padding:0 20px 22px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:14px;}
  .sidebar-logo b{color:#fff; font-size:14px; display:block;}
  .sidebar-logo span{font-size:11px; color:#8FA4B8;}
  .side-link{display:flex; align-items:center; gap:12px; padding:12px 20px; font-size:14px; font-weight:600; color:#B9CBDA;}
  .side-link:hover{background:rgba(255,255,255,.06);}
  .side-link.active{background:rgba(14,165,212,.15); color:#fff;}
  .side-bottom{margin-top:auto; padding:14px 20px; border-top:1px solid rgba(255,255,255,.12);}
  .side-user{font-size:12.5px; color:#8FA4B8; margin-bottom:10px;}
  .main{flex:1; padding:30px 36px; max-width:100%; overflow-x:hidden;}
  .page-title{font-size:24px; font-weight:800; color:var(--navy); margin-bottom:4px;}
  .page-sub{font-size:13.5px; color:var(--text-muted); margin-bottom:26px;}

  .stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:30px;}
  .stat-box{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);}
  .stat-box b{display:block; font-family:var(--font-head); font-size:24px; color:var(--navy);}
  .stat-box span{font-size:12.5px; color:var(--text-muted);}

  .panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:24px;}
  .panel-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); flex-wrap:wrap; gap:10px;}
  .panel-head h3{font-size:16px; color:var(--navy);}
  table{width:100%; border-collapse:collapse;}
  th{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); text-align:right; padding:12px 22px; background:var(--bg); border-bottom:1px solid var(--border);}
  td{padding:14px 22px; border-bottom:1px solid var(--border); font-size:13.5px; vertical-align:middle;}
  tr:last-child td{border-bottom:none;}
  .badge{display:inline-block; padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700;}
  .badge-pending{background:#FFF6E5; color:var(--amber);}
  .badge-approved{background:#E9F8F1; color:var(--green);}
  .badge-rejected{background:#FDEEEC; color:var(--red);}
  .badge-cert{background:var(--bg-soft); color:var(--navy); font-family:var(--font-head); border:1px solid var(--border);}
  .row-actions{display:flex; gap:8px; flex-wrap:wrap;}
  .empty-state{padding:40px 22px; text-align:center; color:var(--text-muted); font-size:13.5px;}

  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:20px 22px;}
  .form-grid .full{grid-column:1/-1;}
  .modal-backdrop{position:fixed; inset:0; background:rgba(8,20,35,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;}
  .modal{background:#fff; border-radius:14px; width:100%; max-width:620px; max-height:88vh; overflow-y:auto;}
  .modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border);}
  .modal-head h3{font-size:16px; color:var(--navy);}
  .modal-close{background:none; border:none; font-size:20px; color:var(--text-muted); line-height:1;}
  .modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--border);}

  .programs-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
  .avail-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow);}
  .avail-card .code{font-size:11px; color:var(--cyan); font-weight:700; margin-bottom:6px;}
  .avail-card h3{font-size:15.5px; color:var(--navy); margin-bottom:10px;}
  .avail-card .tags{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap;}
  .avail-card .tag{background:var(--bg); color:var(--navy); font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px;}

  /* ---------- محاضرات بوابة المتدرب ---------- */
  .lecture-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
  .lecture-card{background:#F8FBFC; border:1px solid var(--border); border-radius:14px; padding:16px 16px 0; overflow:hidden; display:flex; flex-direction:column;}
  .lecture-card-info{padding-bottom:14px;}
  .lecture-card-info b{display:block; color:var(--navy); font-size:15px; margin-bottom:5px; line-height:1.4;}
  .lecture-card-info p{margin:0; font-size:12.5px; color:var(--text-muted); line-height:1.75;}
  .lecture-video{margin:0 -16px; margin-top:auto;}
  .lecture-video video{display:block; width:100%; aspect-ratio:16/9; background:#000;}
  @media (max-width:900px){ .lecture-list{grid-template-columns:1fr;} }

  .toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--navy-deep); color:#fff; padding:12px 22px; border-radius:999px; font-size:13.5px; box-shadow:0 14px 30px -10px rgba(0,0,0,.4); z-index:200;}

  .confirm-dialog-backdrop{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:20px;background:rgba(2,20,33,.62);backdrop-filter:blur(4px);animation:confirmFade .16s ease both;}
  .confirm-dialog{width:min(430px,100%);overflow:hidden;border:1px solid rgba(255,255,255,.5);border-radius:18px;background:#fff;box-shadow:0 30px 80px -32px rgba(0,0,0,.72);animation:confirmPop .2s ease both;}
  .confirm-dialog-body{display:flex;gap:14px;padding:24px 24px 18px;}
  .confirm-dialog-icon{width:46px;height:46px;display:grid;place-items:center;flex:0 0 46px;border-radius:14px;background:#FFF2F0;color:#C83D35;font-size:22px;}
  .confirm-dialog-copy{min-width:0;}
  .confirm-dialog-copy h3{margin:1px 0 7px;color:var(--navy);font-size:16px;}
  .confirm-dialog-copy p{margin:0;color:var(--text-muted);font-size:13px;line-height:1.8;}
  .confirm-dialog-actions{display:flex;justify-content:flex-end;gap:9px;padding:14px 24px 20px;border-top:1px solid var(--border);background:#FBFDFE;}
  @keyframes confirmFade{from{opacity:0}to{opacity:1}}
  @keyframes confirmPop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

  .burger-mobile{display:none;}
  .side-links-mobile-toggle{display:none;}
  .mobile-dashboard-header,.mobile-menu-backdrop,.sidebar-mobile-close{display:none;}
  @media (max-width:900px){
    .dash{flex-direction:column;}
    .sidebar{width:100%; flex-direction:column; padding:0; overflow:visible;}
    .sidebar-logo{padding:14px 18px; margin-bottom:0; border-bottom:1px solid rgba(255,255,255,.12);}
    .side-links-mobile-toggle{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; font-weight:700; font-size:14px; color:#fff; cursor:pointer; background:rgba(255,255,255,.04);}
    .side-links-wrap{display:none; flex-direction:column; max-height:60vh; overflow-y:auto; border-top:1px solid rgba(255,255,255,.1);}
    .side-links-wrap.open{display:flex;}
    .side-link{border-radius:0; padding:13px 20px;}
    .side-link.active{background:rgba(255,255,255,.08); border-inline-end:3px solid var(--cyan);}
    .side-bottom{margin-top:0; border-top:1px solid rgba(255,255,255,.12); padding:14px 20px;}
    .main{padding:22px 16px;}
    .stat-grid, .programs-cards{grid-template-columns:1fr 1fr;}
    .form-grid{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .stat-grid, .programs-cards{grid-template-columns:1fr;}
    table, thead, tbody, th, td, tr{display:block;}
    thead{display:none;}
    tr{border-bottom:1px solid var(--border); padding:10px 0;}
    td{border-bottom:none; padding:4px 22px;}
  }
.btn-spinner{display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:btnSpin .7s linear infinite; vertical-align:middle;}
@keyframes btnSpin{ to{transform:rotate(360deg);} }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .btn:focus-visible, .side-link:focus-visible{
  outline:2.5px solid var(--cyan); outline-offset:2px; border-radius:4px;
}


  /* ==========================================================
     Dashboard Professional Upgrade — 2026
     ========================================================== */
  :root{
    --dash-sidebar:292px;
    --dash-header-h:64px;
    --dash-ring:0 0 0 4px rgba(32,183,217,.14);
  }
  body{min-width:320px; overflow-x:hidden;}
  button,a,[onclick]{-webkit-tap-highlight-color:transparent;}
  .center-screen{position:relative; overflow:hidden; isolation:isolate;}
  .center-screen::before,.center-screen::after{content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:-1; filter:blur(1px);}
  .center-screen::before{width:520px; height:520px; top:-240px; right:-170px; background:radial-gradient(circle,rgba(32,183,217,.26),transparent 66%);}
  .center-screen::after{width:440px; height:440px; bottom:-250px; left:-140px; background:radial-gradient(circle,rgba(232,173,63,.16),transparent 66%);}
  .auth-card{position:relative; border:1px solid rgba(255,255,255,.65); box-shadow:0 30px 80px -28px rgba(0,0,0,.65); overflow:hidden;}
  .auth-card::before{content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--cyan),var(--gold));}
  .auth-logo img{max-width:210px; object-fit:contain;}
  .role-option{cursor:pointer; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
  .role-option:hover{transform:translateY(-2px);}
  .role-option:active{transform:scale(.985);}
  .field input,.field select,.field textarea{background:#fff; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
  .field input:hover,.field select:hover,.field textarea:hover{border-color:#B7C8D5;}
  .field input:focus,.field select:focus,.field textarea:focus{box-shadow:var(--dash-ring);}
  .field input:disabled{background:#F5F8FA; color:#607689; cursor:not-allowed;}
  .btn{min-height:40px; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;}
  .btn:hover{box-shadow:0 10px 24px -14px rgba(6,43,74,.55);}
  .btn:active{transform:scale(.975);}
  .btn:disabled{cursor:not-allowed; box-shadow:none;}

  .dash{display:flex; background:linear-gradient(180deg,#F4F8FA 0%,#EDF3F7 100%); min-height:100vh; align-items:flex-start;}
  .sidebar{width:var(--dash-sidebar); position:sticky; top:0; height:100vh; overflow:hidden; box-shadow:-12px 0 36px -28px rgba(0,0,0,.7); z-index:30;}
  .sidebar::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 90% 0,rgba(32,183,217,.16),transparent 38%);}
  .sidebar-logo{position:relative; min-height:76px;}
  .sidebar-logo img{max-width:150px; object-fit:contain; filter:drop-shadow(0 4px 12px rgba(0,0,0,.18));}
  .side-links-wrap{display:flex; flex-direction:column; flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent;}
  .side-link{position:relative; cursor:pointer; border-inline-end:3px solid transparent; transition:background .18s ease,color .18s ease,border-color .18s ease,padding .18s ease; user-select:none;}
  .side-link:hover{padding-inline-start:24px; color:#fff;}
  .side-link.active{background:linear-gradient(90deg,rgba(32,183,217,.16),rgba(32,183,217,.06)); border-inline-end-color:var(--cyan);}
  .side-bottom{background:rgba(0,0,0,.08);}
  .side-user{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

  .main{min-width:0; padding:0 34px 42px;}
  /* ── Affiliate extension: missing base classes ── */
  .btn-primary{background:var(--cyan); color:#fff; border:none;}
  .btn-primary:hover{background:var(--blue-mid); color:#fff; box-shadow:0 10px 24px -14px rgba(6,43,74,.55);}
  .btn-primary:active{transform:scale(.975);}
  .inp-sm{display:block; border:1.5px solid var(--border); border-radius:8px; padding:8px 12px; font-size:13px; font-family:inherit; background:#fff; outline:none; transition:border-color .18s ease,box-shadow .18s ease;}
  .inp-sm:focus{border-color:var(--cyan); box-shadow:var(--dash-ring);}
  .inp-sm:hover{border-color:#B7C8D5;}
  .stat-box.warn{background:#FFF7ED; border-color:#F8D48A;}
  .stat-box.warn b{color:#B45309;}
  .dash-topbar{height:var(--dash-header-h); margin:0 -34px 28px; padding:0 34px; display:flex; align-items:center; justify-content:space-between; gap:18px; background:rgba(255,255,255,.88); border-bottom:1px solid rgba(216,226,234,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); position:sticky; top:0; z-index:20;}
  .dash-topbar-title{display:flex; align-items:center; gap:10px; min-width:0; font-weight:800; color:var(--navy); font-family:var(--font-head);}
  .dash-topbar-title .dot{width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(30,158,107,.12); flex-shrink:0;}
  .dash-topbar-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .maintenance-admin-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-12px 0 22px;padding:13px 16px;border:1px solid #F0C969;border-radius:13px;background:linear-gradient(90deg,#FFF8E5,#FFFDF5);color:#7B5711;box-shadow:0 10px 28px -24px rgba(86,56,0,.6);}
  .maintenance-admin-banner strong{display:block;margin-bottom:2px;color:#684605;font-size:13px;}
  .maintenance-admin-banner span{font-size:11.5px;line-height:1.55;}
  .maintenance-control{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:16px;padding:20px 22px;}
  .maintenance-control-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:#EAF7FA;color:#087C9D;font-size:25px;}
  .maintenance-control.is-on .maintenance-control-icon{background:#FFF3D6;color:#A46C00;}
  .maintenance-control-copy b{display:block;margin-bottom:4px;color:var(--navy);font-size:14.5px;}
  .maintenance-control-copy p{margin:0;color:var(--text-muted);font-size:12px;line-height:1.7;}
  .maintenance-state{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-size:11.5px;font-weight:800;}
  .maintenance-state i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(30,158,107,.12);}
  .maintenance-control.is-on .maintenance-state{color:#946000;}.maintenance-control.is-on .maintenance-state i{background:#E2A21C;box-shadow:0 0 0 4px rgba(226,162,28,.14);}
  .dash-date{font-size:12px; color:var(--text-muted); white-space:nowrap;}
  .dash-view-site{display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--navy); font-size:12.5px; font-weight:700; text-decoration:none;}
  .dash-view-site:hover{border-color:var(--cyan); color:var(--blue-mid);}

  .page-title{font-size:clamp(22px,2.2vw,30px); line-height:1.35; letter-spacing:-.02em;}
  .page-sub{font-size:14px; max-width:760px;}
  .stat-grid{gap:14px;}
  .stat-box{position:relative; overflow:hidden; min-height:118px; display:flex; flex-direction:column; justify-content:center; border-color:#DDE7ED; box-shadow:0 12px 34px -24px rgba(6,43,74,.55); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
  .stat-box::after{content:""; position:absolute; width:78px; height:78px; border-radius:50%; inset:-28px -26px auto auto; background:rgba(32,183,217,.08);}
  .stat-box:hover{transform:translateY(-3px); border-color:#C5D6E0; box-shadow:0 18px 38px -26px rgba(6,43,74,.65);}
  .stat-box b{font-size:30px; line-height:1.2;}
  .stat-box span{margin-top:6px;}

  .panel{border-color:#DDE7ED; box-shadow:0 14px 36px -28px rgba(6,43,74,.6);}
  .panel-head{background:linear-gradient(180deg,#fff,#FBFDFE); min-height:62px;}
  .panel-head h3{font-size:17px;}
  .table-scroll{width:100%; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#AFC1CE #EFF4F7;}
  .table-scroll table{min-width:760px;}
  th{position:sticky; top:0; z-index:1; background:#F4F8FA; font-weight:800; color:#516A7F;}
  tbody tr{transition:background .16s ease;}
  tbody tr:hover{background:#F8FBFC;}
  td{line-height:1.55;}
  .row-actions{align-items:center;}
  .badge{border:1px solid transparent; white-space:nowrap;}
  .badge-approved{border-color:rgba(30,158,107,.16);}
  .badge-pending{border-color:rgba(217,167,43,.2);}
  .badge-rejected{border-color:rgba(217,70,59,.16);}
  .programs-cards{grid-template-columns:repeat(3,minmax(0,1fr));}
  .avail-card{position:relative; overflow:hidden; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
  .avail-card::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--cyan),var(--gold)); opacity:.9;}
  .avail-card:hover{transform:translateY(-4px); border-color:#C7D8E2; box-shadow:0 18px 40px -28px rgba(6,43,74,.65);}
  .avail-card h3{min-height:48px;}

  .modal-backdrop{backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:dashFade .18s ease;}
  .modal{box-shadow:0 34px 90px -28px rgba(0,0,0,.65); animation:dashModal .22s ease;}
  .modal-head{position:sticky; top:0; z-index:3; background:#fff;}
  .modal-foot{position:sticky; bottom:0; z-index:3; background:#fff;}
  @keyframes dashFade{from{opacity:0}to{opacity:1}}
  @keyframes dashModal{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
  .toast{max-width:min(90vw,560px); text-align:center; animation:toastIn .25s ease;}
  @keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
  .empty-state{min-height:140px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;}
  .empty-state::before{content:"◇"; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--bg-soft); color:var(--cyan); font-size:24px; font-weight:800;}
  .network-progress{position:fixed; top:0; right:0; left:0; height:3px; z-index:9999; pointer-events:none; opacity:0; transition:opacity .18s ease;}
  .network-progress::before{content:""; display:block; height:100%; width:34%; background:linear-gradient(90deg,var(--cyan),var(--gold)); animation:networkMove 1s ease-in-out infinite;}
  .network-progress.active{opacity:1;}
  @keyframes networkMove{from{transform:translateX(210%)}to{transform:translateX(-340%)}}

  @media (max-width:1180px){
    .programs-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media (max-width:900px){
    .dash{display:block;}
    .sidebar{width:100%; height:auto; position:static; overflow:visible; z-index:50; box-shadow:0 8px 24px -18px rgba(0,0,0,.8);}
    .sidebar-logo{min-height:62px;}
    .side-links-wrap{max-height:min(58vh,460px); overflow-y:auto;}
    .side-links-mobile-toggle{display:flex;}
    .main{width:100%; padding:0 18px 34px;}
    .dash-topbar{height:auto; min-height:54px; margin:0 -18px 22px; padding:10px 18px; top:0; flex-wrap:wrap; row-gap:8px;}
    .dash-date{display:none;}
    .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .table-scroll{border-top:1px solid var(--border);}

    .admin-dash{min-height:100vh;padding-top:62px;}
    .admin-dash .mobile-dashboard-header{position:fixed;inset:0 0 auto 0;z-index:85;height:62px;display:flex;align-items:center;gap:12px;padding:0 14px;background:linear-gradient(100deg,#082F49,#063852);color:#fff;box-shadow:0 10px 28px -20px rgba(0,0,0,.8);}
    .admin-dash .mobile-menu-trigger{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;}
    .admin-dash .mobile-menu-trigger-lines{width:20px;display:grid;gap:4px;}
    .admin-dash .mobile-menu-trigger-lines i{display:block;height:2px;border-radius:99px;background:currentColor;}
    .admin-dash .mobile-header-copy{min-width:0;display:flex;flex-direction:column;gap:2px;}
    .admin-dash .mobile-header-copy b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .admin-dash .mobile-header-copy span{color:#9FC0D1;font-size:10.5px;}
    .admin-dash .mobile-menu-backdrop{position:fixed;inset:0;z-index:89;display:block;border:0;background:rgba(2,18,29,.62);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;backdrop-filter:blur(2px);}
    /* كان overflow:hidden — لو المحتوى بقى أطول من الشاشة لأي سبب (قوايم منسدلة
       مفتوحة، شاشة قصيرة، خط أكبر) الزيادة كانت بتتقص ومفيش طريقة توصلها.
       overflow-y:auto بيخلي الشريط نفسه يسكرول كخط دفاع أخير، حتى لو الحاوية
       الداخلية حسبت ارتفاعها غلط. overscroll-behavior بيمنع التمرير إنه يسرّب
       للصفحة اللي ورا الدرج. */
    .admin-dash .sidebar{position:fixed;inset:0 0 0 auto;z-index:90;width:min(88vw,360px);height:100dvh;padding-top:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transform:translateX(105%);transition:transform .25s ease;box-shadow:-24px 0 50px -28px rgba(0,0,0,.9);}
    body.admin-menu-open{overflow:hidden;}
    body.admin-menu-open .admin-dash .sidebar{transform:translateX(0);}
    body.admin-menu-open .admin-dash .mobile-menu-backdrop{opacity:1;visibility:visible;}
    .admin-dash .sidebar-logo{min-height:68px;padding-inline:16px 58px;}
    .admin-dash .sidebar-mobile-close{position:absolute;top:13px;left:14px;z-index:3;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:11px;background:rgba(255,255,255,.07);color:#fff;font-size:22px;cursor:pointer;}
    .admin-dash .side-links-mobile-toggle{display:none;}
    /* كان height:calc(100dvh - 68px) — رقم ثابت بيفترض إن رأس الشريط 68px بالظبط.
       لكن .sidebar-logo عليها min-height مش height، وفوق القائمة كمان مبدّل
       التبويبات، فالحاوية كانت بتمتد تحت حافة الشاشة و overflow:hidden اللي على
       .sidebar بيقص الباقي — يعني آخر عناصر القائمة مستحيل توصلها.
       flex:1 + min-height:0 بتخلي القائمة تاخد المساحة الفاضلة فعلياً مهما كان
       ارتفاع الرأس، وهي نفس الطريقة المستخدمة في نسخة سطح المكتب فوق. */
    .admin-dash .side-links-wrap{display:flex;max-height:none;height:auto;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(14px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.08);}
    .admin-dash .main{padding-top:0;}
    .admin-dash .dash-topbar{position:relative;top:auto;height:auto;min-height:58px;flex-wrap:wrap;padding-block:10px;}
    .admin-dash .dash-topbar-title{display:none;}
    .admin-dash .dash-topbar-actions{width:100%;justify-content:flex-end;flex-wrap:wrap;}
  }
  @media (max-width:620px){
    .auth-card{padding:32px 22px; border-radius:16px;}
    .main{padding-inline:12px;}
    .dash-topbar{margin-inline:-12px; padding-inline:12px;}
    .dash-topbar-title{font-size:13px;}
    .dash-view-site{padding:7px 9px; font-size:11.5px;}
    .page-title{font-size:23px;}
    .page-sub{margin-bottom:20px;}
    .stat-grid{grid-template-columns:1fr 1fr; gap:10px;}
    .stat-box{min-height:96px; padding:15px;}
    .stat-box b{font-size:24px;}
    .stat-box span{font-size:11.5px;}
    .programs-cards{grid-template-columns:1fr;}
    .panel-head{padding:15px 16px;}
    .panel-head>div,.panel-head>span{max-width:100%;}
    .row-actions{gap:6px;}
    .row-actions .btn{flex:1 1 auto;}
    .form-grid{padding:16px;}
    .modal-backdrop{padding:0; align-items:flex-end;}
    .modal{max-height:92vh; max-width:none!important; border-radius:18px 18px 0 0;}
    .modal-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom));}
    .toast{bottom:calc(18px + env(safe-area-inset-bottom)); border-radius:12px;}

    .table-scroll{overflow:visible; border-top:0;}
    .table-scroll table{min-width:0; display:block;}
    .table-scroll thead{display:none;}
    .table-scroll tbody{display:grid; gap:12px; padding:12px;}
    .table-scroll tr{display:block; background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 0; box-shadow:0 8px 24px -22px rgba(6,43,74,.7);}
    .table-scroll td{display:grid; grid-template-columns:minmax(94px,34%) 1fr; gap:12px; align-items:start; border:0; padding:8px 14px; text-align:right!important; word-break:break-word;}
    .table-scroll td::before{content:attr(data-label); color:var(--text-muted); font-size:11.5px; font-weight:700;}
    .table-scroll td:empty::after{content:"—"; color:var(--text-muted);}
    .confirm-dialog-backdrop{align-items:end;padding:0;}
    .confirm-dialog{width:100%;border-radius:20px 20px 0 0;}
    .confirm-dialog-body{padding:22px 18px 17px;}
    .confirm-dialog-actions{padding:13px 18px calc(16px + env(safe-area-inset-bottom));}
    .confirm-dialog-actions .btn{flex:1;}
    .maintenance-admin-banner{align-items:flex-start;flex-direction:column;margin-top:-8px;}
    .maintenance-control{grid-template-columns:50px 1fr;padding:17px 16px;}
    .maintenance-control-icon{width:48px;height:48px;}
    .maintenance-control .btn{grid-column:1/-1;width:100%;}
  }
  @media (max-width:390px){
    .stat-grid{grid-template-columns:1fr;}
    .dash-topbar-actions .dash-view-site span{display:none;}
  }
  /* ── Section Toggle Switch ── */
  .side-section-switch{display:flex; gap:6px; margin:0 12px 10px; padding:5px; background:rgba(0,0,0,.25); border-radius:12px; border:1px solid rgba(255,255,255,.08);}
  .side-section-switch button{flex:1; padding:7px 8px; border-radius:8px; border:none; background:transparent; color:#8FA4B8; font-size:12px; font-weight:700; font-family:var(--font-body); cursor:pointer; transition:background .18s,color .18s; white-space:nowrap;}
  .side-section-switch button.on{background:linear-gradient(135deg,var(--cyan),#0E8BB0); color:#fff; box-shadow:0 4px 14px -6px rgba(14,139,176,.6);}
  .side-section-switch button:not(.on):hover{background:rgba(255,255,255,.08); color:#C8DCE8;}

  /* شغل اليوم — مثبّت فوق القائمة في القسمين، بلون مميّز عشان يبان إنه مش
     مجموعة عادية. الشغل اليومي كان موزّع على القسمين ومدفون في المجموعات. */
  .side-daily{margin:0 10px 12px; padding:7px 6px 6px; border-radius:13px;
    background:linear-gradient(160deg,rgba(232,173,63,.13),rgba(232,173,63,.05));
    border:1px solid rgba(232,173,63,.24);}
  .side-daily-head{font-size:10.5px; font-weight:800; letter-spacing:.03em; color:var(--gold,#E8AD3F);
    padding:2px 8px 7px; opacity:.95;}
  .side-daily .side-link{margin-bottom:2px;}
  .side-daily .side-link:last-child{margin-bottom:0;}

  /* ── Sidebar user block ── */
  .side-admin-block{display:flex; align-items:center; gap:10px; padding:0 16px 14px;}
  .side-admin-avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--gold)); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff; flex-shrink:0;}
  .side-admin-info{min-width:0;}
  .side-admin-name{font-size:13px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .side-admin-role{font-size:10.5px; color:#8FA4B8; margin-top:1px;}
  .side-logout-btn{display:flex; align-items:center; justify-content:center; gap:6px; width:calc(100% - 24px); margin:0 12px; padding:9px; border-radius:10px; background:rgba(217,70,59,.12); border:1px solid rgba(217,70,59,.2); color:#E86B63; font-size:12.5px; font-weight:700; cursor:pointer; font-family:var(--font-body); transition:background .18s,border-color .18s;}
  .side-logout-btn:hover{background:rgba(217,70,59,.22); border-color:rgba(217,70,59,.35);}

  /* ── KPI stat cards ── */
  .kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px;}
  .kpi-card{background:var(--card); border:1px solid #DDE7ED; border-radius:14px; padding:20px 18px; box-shadow:0 8px 28px -20px rgba(6,43,74,.45); position:relative; overflow:hidden; transition:transform .2s,box-shadow .2s,border-color .2s;}
  .kpi-card:hover{transform:translateY(-3px); border-color:#C5D6E0; box-shadow:0 16px 36px -22px rgba(6,43,74,.6);}
  .kpi-card::after{content:""; position:absolute; width:80px; height:80px; border-radius:50%; inset:-24px -22px auto auto; background:rgba(32,183,217,.07); pointer-events:none;}
  .kpi-icon{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px;}
  .kpi-icon.blue{background:rgba(32,183,217,.12);}
  .kpi-icon.amber{background:rgba(232,173,63,.12);}
  .kpi-icon.green{background:rgba(30,158,107,.12);}
  .kpi-icon.red{background:rgba(217,70,59,.12);}
  .kpi-value{font-size:28px; font-weight:800; color:var(--navy); font-family:var(--font-head); line-height:1;}
  .kpi-label{font-size:12px; color:var(--text-muted); margin-top:6px;}
  .kpi-trend{font-size:11px; font-weight:700; margin-top:8px; display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px;}
  .kpi-trend.warn{background:#FFF6E5; color:var(--amber);}
  .kpi-trend.good{background:#E9F8F1; color:var(--green);}
  @media (max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.kpi-grid{grid-template-columns:1fr 1fr; gap:10px;} .kpi-value{font-size:24px;}}

  /* ── Table data improvements ── */
  tbody tr:hover td{background:rgba(32,183,217,.03);}
  td .text-muted{color:var(--text-muted); font-size:12px;}
  .data-avatar{width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,rgba(32,183,217,.2),rgba(14,93,169,.2)); display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--navy); flex-shrink:0;}
  .td-with-avatar{display:flex; align-items:center; gap:10px;}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important;}
  }



  /* ---------- Certificate management v2: multi-code results + bulk file-only upload ---------- */
  .cert-type-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
  .cert-type-card{border:1.5px solid var(--border);border-radius:12px;padding:13px;background:#fff;cursor:pointer;transition:.18s}
  .cert-type-card:hover{border-color:var(--cyan)}
  .cert-type-card.active{border-color:var(--cyan);background:#F1FBFD;box-shadow:var(--dash-ring)}
  .cert-type-card b{display:block;color:var(--navy);font-size:13.5px;margin-bottom:3px}
  .cert-type-card span{display:block;color:var(--text-muted);font-size:11.5px;line-height:1.6}
  .cert-type-card input{width:auto;margin-left:7px}
  .bulk-drop{border:2px dashed #BFCFDA;border-radius:14px;padding:22px;text-align:center;background:#F8FBFC;transition:.2s}
  .bulk-drop:hover{border-color:var(--cyan);background:#F2FBFD}
  .bulk-file-list{display:grid;gap:8px;margin-top:14px;max-height:310px;overflow:auto;padding-left:3px}
  .bulk-file-row{display:grid;grid-template-columns:minmax(130px,.8fr) minmax(180px,1.5fr) minmax(100px,.65fr) auto;gap:10px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:#fff;font-size:12px}
  .bulk-file-row code{direction:ltr;text-align:left;color:var(--navy);font-weight:800;word-break:break-all}
  .bulk-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted)}
  .bulk-status{font-weight:700;font-size:11.5px}
  .bulk-status.ready{color:var(--blue-mid)} .bulk-status.uploading{color:var(--amber)} .bulk-status.success{color:var(--green)} .bulk-status.failed,.bulk-status.invalid,.bulk-status.duplicate{color:var(--red)}
  .cert-kind-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
  .cert-kind-badge.full{background:#EAF4FA;color:var(--blue-mid)}
  .cert-kind-badge.file_only{background:#FFF5DF;color:#916813}
  .cert-code-stack{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .cert-center-note{font-size:11px;color:var(--text-muted);margin-top:3px}
  @media(max-width:620px){
    .cert-type-picker{grid-template-columns:1fr}
    .bulk-file-row{grid-template-columns:1fr auto}
    .bulk-file-row .bulk-file-name,.bulk-file-row .bulk-status{grid-column:1/-1}
  }



  /* ==========================================================
     Dashboard Compact Data Upgrade — 2026-08
     ========================================================== */
  :root{
    --data-font:12.5px;
    --data-pad-y:9px;
    --data-pad-x:13px;
    --compact-radius:10px;
  }
  .dash-density-toggle{
    min-height:34px;padding:6px 10px;border:1px solid var(--border);border-radius:9px;
    background:#fff;color:var(--navy);font-size:11.5px;font-weight:800;white-space:nowrap;
  }
  .dash-density-toggle:hover{border-color:var(--cyan);background:#F4FBFD}
  .data-toolbar{
    display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:12px 15px;
    border-bottom:1px solid var(--border);background:#FBFDFE;
  }
  .data-toolbar .toolbar-search{flex:1 1 260px;min-width:210px;position:relative}
  .data-toolbar input,.data-toolbar select{
    min-height:40px;border:1px solid var(--border);border-radius:9px;background:#fff;
    padding:8px 11px;color:var(--text);font-size:12.5px;font-family:inherit;outline:none;
  }
  .data-toolbar input{width:100%}
  .data-toolbar select{flex:0 1 185px;max-width:240px}
  .data-toolbar input:focus,.data-toolbar select:focus{border-color:var(--cyan);box-shadow:var(--dash-ring)}
  .toolbar-count{margin-inline-start:auto;padding:6px 10px;border-radius:999px;background:#EAF5F9;color:var(--blue-mid);font-size:11px;font-weight:800;white-space:nowrap}
  .compact-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
  .compact-stats .stat-box{min-height:84px;padding:13px 15px;border-radius:11px}
  .compact-stats .stat-box b{font-size:23px}
  .compact-stats .stat-box span{font-size:10.8px;line-height:1.4}
  .compact-panel{margin-bottom:16px;border-radius:12px}
  .compact-panel .panel-head{min-height:52px;padding:12px 15px}
  .bulk-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 15px;border-bottom:1px solid var(--border);background:#F8FBFC;font-size:12px;}
  .bulk-select-all{display:flex;align-items:center;gap:7px;color:var(--navy);font-weight:700;cursor:pointer;}
  .bulk-select-all input{width:16px;height:16px;cursor:pointer;}
  .bulk-count{padding:5px 10px;border-radius:999px;background:#EAF5F9;color:var(--blue-mid);font-weight:800;}
  .compact-table .row-check{width:34px;text-align:center;}
  .compact-table .row-check input{width:16px;height:16px;cursor:pointer;}
  .crm-stage-select{min-height:32px;padding:5px 8px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--navy);font-size:11.5px;font-weight:700;font-family:inherit;cursor:pointer;}
  .crm-stage-select:focus{border-color:var(--cyan);}
  .crm-stage-card{min-height:84px;transition:transform .15s ease,box-shadow .15s ease;}
  .crm-stage-card:hover{transform:translateY(-2px);}
  .side-group{border-bottom:1px solid rgba(255,255,255,.06);}
  .side-group>summary{list-style:none;cursor:pointer;padding:12px 20px;font-size:11.5px;font-weight:800;color:#7E93A3;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;justify-content:space-between;user-select:none;}
  .side-quick-label{padding:10px 20px 6px;font-size:10.5px;font-weight:800;color:#5A7288;text-transform:uppercase;letter-spacing:.04em;}
  .side-quick-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 16px 12px;}
  @media(max-width:900px){ .side-quick-label,.side-quick-row{display:none;} }
  .side-quick-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;padding:9px 6px;border-radius:10px;background:rgba(255,255,255,.06);color:#CFE0EA;font-size:11px;font-weight:700;cursor:pointer;text-align:center;transition:background .15s ease;}
  .side-quick-btn:hover{background:rgba(255,255,255,.12);}
  .side-quick-btn.active{background:linear-gradient(90deg,var(--cyan,#35C3E3),var(--blue-mid,#2C7BE5));color:#fff;}
  .side-quick-badge{position:absolute;top:-5px;left:-5px;min-width:16px;height:16px;padding:0 3px;border-radius:999px;background:var(--red,#E14C4C);color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;}
  .side-group>summary::-webkit-details-marker{display:none;}
  .side-group>summary::after{content:"▾";font-size:10px;transition:transform .2s ease;color:#5A7288;}
  .side-group[open]>summary::after{transform:rotate(180deg);}
  .side-group>summary:hover{color:#B9CBDA;}
  .side-group-links{display:flex;flex-direction:column;}
  .side-group-links .side-link{padding-inline-start:28px;}
  /* .side-links-wrap حاوية flex عمودية بارتفاع محدود، وأبناؤها flex-shrink:1
     افتراضيًا. لما المحتوى يزيد عن الارتفاع، الفلكس بيضغط المجموعات نفسها بدل
     ما يخلّي الحاوية تعمل scroll — و .side-group عليها overflow:hidden فكل
     مجموعة بتقص عناصرها جواها. قِسناها: المجموعة بترسم 70px وارتفاعها الطبيعي
     173px، و 6 من 6 مجموعات كانت مقصوصة، و scrollHeight بيساوي clientHeight
     فشريط التمرير عمره ما يظهر — يعني العناصر المخفية مستحيل توصلها.
     flex-shrink:0 بيخلي كل عنصر ياخد ارتفاعه الطبيعي، فالمحتوى بيزيد فعلًا
     وشريط التمرير بيظهر (قِسناه: 1150 مقابل 524). */
  .side-links-wrap > *{flex-shrink:0;}

  /* Clearer dashboard navigation */
  .sidebar{width:292px;background:linear-gradient(180deg,#082F49 0%,#06263B 58%,#041D2E 100%);padding:16px 0 0;}
  .sidebar-logo{margin:0 14px 12px;padding:10px 12px 17px;min-height:68px;border-bottom-color:rgba(255,255,255,.1);}
  .sidebar-logo b{font-size:15px;letter-spacing:.02em;}
  .sidebar-logo span{display:block;margin-top:3px;font-size:11.5px;color:#9DB4C5;}
  .side-section-switch{margin:0 14px 14px;padding:6px;border-radius:14px;background:rgba(2,18,29,.52);}
  .side-section-switch button{min-height:38px;font-size:12.5px;border-radius:10px;}
  .side-section-switch button.on{background:linear-gradient(135deg,#149DC5,#087B98);box-shadow:0 7px 20px -11px rgba(53,195,227,.95);}
  .side-group{margin:5px 10px;border:1px solid rgba(255,255,255,.06);border-radius:13px;overflow:hidden;background:rgba(255,255,255,.018);}
  .side-group>summary{min-height:44px;padding:11px 13px;font-size:12.5px;font-weight:800;color:#BFD1DD;text-transform:none;letter-spacing:0;background:rgba(255,255,255,.025);}
  .side-group[open]>summary{color:#fff;background:rgba(53,195,227,.08);}
  .side-group>summary::after{width:20px;height:20px;display:grid;place-items:center;border-radius:6px;background:rgba(255,255,255,.055);color:#91AABD;}
  .side-group-links{padding:5px 0 7px;}
  .side-link,.side-group-links .side-link{width:calc(100% - 20px);min-height:43px;margin:2px 10px;padding:7px 10px;border:0;border-radius:11px;background:transparent;font-family:var(--font-body);font-size:13px;font-weight:700;text-align:right;color:#B7CAD7;gap:10px;}
  .side-link:hover,.side-group-links .side-link:hover{padding-inline-start:10px;background:rgba(255,255,255,.065);color:#fff;}
  .side-link.active{background:linear-gradient(90deg,rgba(53,195,227,.22),rgba(53,195,227,.08));border-inline-end-color:#35C3E3;color:#fff;box-shadow:inset 0 0 0 1px rgba(53,195,227,.12);}
  .side-link-icon{width:29px;height:29px;display:grid;place-items:center;flex:0 0 29px;border-radius:9px;background:rgba(255,255,255,.065);font-size:14px;line-height:1;}
  .side-link.active .side-link-icon{background:#0D8EB1;box-shadow:0 6px 16px -9px rgba(53,195,227,.95);}
  .side-link-text{min-width:0;flex:1;line-height:1.45;white-space:normal;}
  .side-nav-badge{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#D94A43;color:#fff;font-size:10px;font-weight:900;display:grid;place-items:center;box-shadow:0 5px 12px -8px #000;}
  .side-bottom{margin-top:10px;padding-top:16px!important;background:rgba(0,0,0,.12);}
  .side-logout-btn{min-height:40px;}
  @media(max-width:900px){
    .sidebar{width:100%;padding-top:0;}
    .sidebar-logo{margin:0;padding:12px 18px;}
    .side-section-switch{margin-top:12px;}
    .side-link,.side-group-links .side-link{min-height:46px;}
  }
  .report-bar-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
  .report-bar-label{flex:0 0 140px;font-size:12.5px;font-weight:700;color:var(--navy);}
  .report-bar-track{flex:1;height:12px;border-radius:999px;background:var(--bg-soft);overflow:hidden;}
  .report-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--blue-mid));transition:width .4s ease;}
  .report-bar-fill.gold{background:linear-gradient(90deg,var(--gold),#f2c063);}
  .report-bar-value{flex:0 0 30px;text-align:left;font-weight:800;color:var(--navy);font-size:13px;}
  .report-money-box{padding:16px;border:1px solid var(--border);border-radius:12px;background:#fff;text-align:center;}
  .report-money-box span{display:block;color:var(--text-muted);font-size:11.5px;margin-bottom:6px;}
  .report-money-box b{display:block;font-size:19px;color:var(--navy);font-family:var(--font-head);}
  .report-money-box.good b{color:var(--green);}
  .report-money-box.warn b{color:var(--amber);}
  @media(max-width:620px){
    .report-bar-label{flex-basis:90px;font-size:11px;}
  }
  .marketer-link-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:13px 14px;border:1px solid var(--border);border-radius:12px;margin-bottom:10px;background:#fff;}
  .marketer-link-info{flex:1;min-width:200px;}
  .marketer-link-info b{display:block;font-size:13.5px;color:var(--navy);margin-bottom:3px;}
  .marketer-link-url{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;}
  .marketer-link-stats{display:flex;gap:12px;font-size:11.5px;font-weight:700;color:var(--blue-mid);flex-wrap:wrap;}
  .marketer-link-actions{display:flex;gap:8px;flex-shrink:0;}
  .notif-bell-wrap{position:relative;}
  .global-search-wrap{position:relative;flex:1;min-width:180px;max-width:340px;}
  .global-search-input{width:100%;min-height:38px;border:1px solid var(--border);border-radius:10px;padding:0 12px;font-size:12.5px;font-family:inherit;background:#fff;}
  .global-search-input:focus{border-color:var(--cyan);outline:none;}
  .gsearch-dropdown{position:absolute;top:calc(100% + 8px);right:0;left:0;min-width:320px;max-height:70vh;overflow-y:auto;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 60px -30px rgba(3,28,52,.4);z-index:210;}
  .gsearch-section{border-bottom:1px solid var(--border);}
  .gsearch-section:last-child{border-bottom:none;}
  .gsearch-section-title{padding:9px 16px;font-size:11px;font-weight:800;color:var(--text-muted);background:var(--bg-soft,#F7FAFB);}
  .gsearch-item{padding:10px 16px;cursor:pointer;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid rgba(0,0,0,.03);}
  .gsearch-item:hover{background:#F1FBFD;}
  .gsearch-item b{font-size:12.5px;color:var(--navy);}
  .gsearch-item span{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  @media(max-width:900px){
    .global-search-wrap{order:10;flex-basis:100%;max-width:100%;margin-top:8px;}
  }
  .notif-bell-btn{position:relative;min-height:38px;min-width:38px;border:1px solid var(--border);border-radius:10px;background:#fff;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .notif-bell-btn:hover{border-color:var(--cyan);}
  .notif-badge{position:absolute;top:-6px;left:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;}
  .notif-dropdown{position:absolute;top:calc(100% + 8px);left:0;width:340px;max-width:88vw;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 60px -30px rgba(3,28,52,.4);z-index:200;overflow:hidden;}
  .upload-hint{font-size:11.5px;color:var(--blue-mid);background:var(--cyan-soft,#EAF5F9);border-radius:8px;padding:7px 10px;margin:6px 0 10px;display:inline-block;}
  .upload-hint b{color:var(--navy);}
  .notif-dropdown-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);}
  .notif-dropdown-head b{font-size:13.5px;color:var(--navy);}
  .notif-dropdown-list{max-height:360px;overflow-y:auto;}
  .notif-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;}
  .notif-item:hover{background:var(--bg-soft);}
  .notif-item.unread{background:#F1FBFD;}
  .notif-item-icon{font-size:18px;flex-shrink:0;}
  .notif-item-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .notif-item-body b{font-size:12.5px;color:var(--navy);}
  .notif-item-body span{font-size:11.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .notif-item-body time{font-size:10px;color:var(--text-muted);}
  @media(max-width:620px){
    .notif-dropdown{left:auto;right:0;}
  }
  .crm-stage-grid{grid-template-columns:repeat(7,minmax(0,1fr));}
  @media(max-width:1180px){ .crm-stage-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }
  @media(max-width:620px){ .crm-stage-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
  .pagination-bar{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 15px;border-top:1px solid var(--border);flex-wrap:wrap;}
  .page-numbers{display:flex;align-items:center;gap:5px;}
  .page-btn{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--navy);font-size:12px;font-weight:700;cursor:pointer;}
  .page-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}
  .page-btn:hover:not(.active){border-color:var(--cyan);background:#F4FBFD;}
  .page-dots{color:var(--text-muted);padding:0 3px;font-size:12px;}
  .page-nav{min-height:32px;padding:6px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--navy);font-size:12px;font-weight:700;cursor:pointer;}
  .page-nav:hover:not(:disabled){border-color:var(--cyan);background:#F4FBFD;}
  .page-nav:disabled{opacity:.4;cursor:not-allowed;}
  .compact-panel .panel-head h3{font-size:14px}
  .compact-table{table-layout:auto;min-width:900px!important}
  /* جدول "مقبول من غير شهادة" أضيق من الباقي. كان مكتوب inline بـ
     style="min-width:680px!important" — و inline !important بيغلب أي
     !important في الاستايل شيت، فقاعدة الموبايل .compact-table{min-width:0}
     ماكانتش بتوصله وكان بيخرج 680px في شاشة 375 ويتقص. */
  .compact-table.compact-table-narrow{min-width:680px!important}
  .compact-table th{padding:9px var(--data-pad-x);font-size:10.5px;line-height:1.35;white-space:nowrap}
  .compact-table td{padding:var(--data-pad-y) var(--data-pad-x);font-size:var(--data-font);line-height:1.45;vertical-align:middle}
  .compact-table tbody tr{height:58px}
  .compact-table .cell-primary{display:block;color:var(--navy);font-weight:800;line-height:1.45}
  .compact-table .cell-sub{display:block;margin-top:2px;color:var(--text-muted);font-size:10.5px;line-height:1.35}
  .compact-table .cell-contact{direction:ltr;text-align:right;unicode-bidi:plaintext;max-width:245px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .compact-table .cell-program{max-width:270px;line-height:1.45}
  .compact-table .date-cell{white-space:nowrap;font-size:11.5px;color:#45657A}
  .compact-table .badge{padding:4px 8px;font-size:10.5px}
  .compact-table .cert-kind-badge{font-size:10px;padding:4px 7px}
  .compact-table .row-actions{gap:5px}
  .row-menu{display:inline-block;min-width:92px;position:relative}
  .row-menu>summary{
    list-style:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
    min-width:88px;min-height:34px;padding:6px 10px;border:1px solid #BFCEDA;border-radius:9px;
    background:#fff;color:var(--navy);font-size:11px;font-weight:800;cursor:pointer;user-select:none;
  }
  .row-menu>summary::-webkit-details-marker{display:none}
  .row-menu>summary::after{content:"⌄";font-size:12px;color:var(--text-muted);transition:transform .18s ease}
  .row-menu[open]>summary{border-color:var(--cyan);background:#F1FBFD;color:var(--blue-mid)}
  .row-menu[open]>summary::after{transform:rotate(180deg)}
  .row-menu-popover{
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:min(320px,72vw);margin-top:7px;
    padding:8px;border:1px solid var(--border);border-radius:10px;background:#F8FBFC;
    box-shadow:0 14px 28px -24px rgba(6,43,74,.8)
  }
  .row-menu-popover .btn{min-height:32px;padding:5px 9px;font-size:10.5px;border-radius:8px;flex:0 0 auto}
  .row-menu-popover .btn-danger{margin-inline-start:auto}
  .status-summary{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
  .certificate-state{font-size:10px;color:var(--text-muted);white-space:nowrap}
  .inbox-list{display:flex;flex-direction:column;}
  .inbox-row{display:flex;align-items:center;gap:12px;padding:13px 22px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s ease;}
  .inbox-row:hover{background:var(--bg-soft,#F7FAFB);}
  .inbox-row.unread{background:#F7FBFD;}
  .inbox-row.unread .inbox-sender,.inbox-row.unread .inbox-subject{font-weight:800;color:var(--navy);}
  .inbox-row-check{width:16px;height:16px;flex-shrink:0;cursor:pointer;}
  .inbox-unread-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:transparent;}
  .inbox-row.unread .inbox-unread-dot{background:var(--cyan,#35C3E3);}
  .inbox-sender{flex:0 0 150px;font-size:13px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .inbox-subject{flex:0 0 200px;font-size:13px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .inbox-snippet{flex:1;min-width:0;font-size:12.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .inbox-date{flex-shrink:0;font-size:11px;color:var(--text-muted);}
  @media(max-width:760px){
    .inbox-row{flex-wrap:wrap;padding:12px 16px;}
    .inbox-sender{flex:1 1 auto;font-size:12.5px;}
    .inbox-subject{flex:1 1 100%;order:3;font-size:12px;}
    .inbox-snippet{display:none;}
    .inbox-date{font-size:10px;}
  }
  .message-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .message-card{
    position:relative;min-width:0;padding:16px;border:1px solid var(--border);border-radius:13px;
    background:#fff;box-shadow:0 10px 28px -24px rgba(6,43,74,.65);overflow:hidden;
  }
  .message-card.unread{border-inline-start:4px solid var(--cyan)}
  .message-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .message-person{min-width:0}
  .message-name-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .message-name{color:var(--navy);font-size:13.5px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .message-date{color:var(--text-muted);font-size:10.5px;white-space:nowrap}
  .message-contact{margin-top:4px;color:var(--text-muted);font-size:10.5px;direction:ltr;text-align:right;unicode-bidi:plaintext;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .message-subject{margin-top:10px;color:var(--navy);font-size:12px;font-weight:800;line-height:1.5}
  .message-preview{margin-top:7px;color:#3A5A70;font-size:12px;line-height:1.75;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:42px}
  .message-details{margin-top:8px}
  .message-details>summary{width:max-content;color:var(--blue-mid);font-size:11px;font-weight:800;cursor:pointer;list-style:none}
  .message-details>summary::-webkit-details-marker{display:none}
  .message-details>summary::after{content:" +"}
  .message-details[open]>summary::after{content:" −"}
  .message-full{margin-top:8px;padding:10px;border-radius:9px;background:#F4F8FA;color:var(--text);font-size:12px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
  .message-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid #EDF2F5}
  .message-actions .btn{min-height:32px;padding:5px 9px;font-size:10.5px}
  .message-actions .btn-danger{margin-inline-start:auto}
  .data-empty{grid-column:1/-1}
  .filters-reset-mini{min-height:40px;padding:8px 11px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--navy);font-size:11px;font-weight:800}
  .filters-reset-mini:hover{background:var(--navy);color:#fff}

  body.density-comfortable{--data-font:13.5px;--data-pad-y:13px;--data-pad-x:18px}
  body.density-comfortable .compact-table tbody tr{height:70px}
  body.density-comfortable .compact-stats .stat-box{min-height:100px;padding:18px}

  @media(max-width:1120px){
    .message-grid{grid-template-columns:1fr}
    .compact-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media(max-width:620px){
    .dash-density-toggle{padding:6px 8px}.dash-density-toggle span{display:none}
    .data-toolbar{padding:10px;gap:7px}.data-toolbar .toolbar-search{flex-basis:100%;min-width:0}
    .data-toolbar select{flex:1 1 calc(50% - 5px);max-width:none;min-width:0}
    .toolbar-count{order:-1;margin:0 0 0 auto}
    .compact-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .compact-stats .stat-box{min-height:76px;padding:11px}
    .compact-stats .stat-box b{font-size:21px}
    .compact-panel .panel-head{padding:11px 12px}
    .compact-table, .compact-table.compact-table-narrow{min-width:0!important}
    .compact-table tbody tr{height:auto}
    .compact-table .cell-contact{max-width:none;white-space:normal;overflow-wrap:anywhere}
    .compact-table .date-cell{white-space:normal}
    .row-menu{display:block;width:100%}.row-menu>summary{width:100%}
    .row-menu-popover{width:100%}.row-menu-popover .btn{flex:1 1 auto}
    .message-card{padding:13px}.message-head{gap:8px}.message-date{font-size:9.5px}
  }

  /* ============================================================
     طبقة توحيد التصميم والمساحة — 2026-08-15

     ليه طبقة في الآخر مش تعديل في مكانه: الـCSS فوق ٦٨ كيلوبايت ومتراكم
     على مراحل، فيه ٣٠ مقاس خط و٢٢ نصف قطر و٣٦ ظل مختلفين. تتبّعهم واحد
     واحد كان هيلمس مئات القواعد بمخاطرة كسر شاشات مالهاش علاقة. البلوك
     ده بيفرض السلّم الموحّد على غلاف لوحة الأدمن بس (.admin-dash)، فباقي
     الشاشات (دخول، بوابة المتدرب) ما تتأثرش — ولو حبيت ترجع القديم امسح
     البلوك ده وخلاص.

     الهدف الأساسي: البيانات تبان أول ما تفتح الصفحة. كان بيضيع ٣٢١-٧٣٧
     بكسل في الترويسة والأرقام والفلاتر قبل أول صف.
     ============================================================ */
  :root{
    /* سلّم الخطوط — ٧ درجات بدل ٣٠ مقاس عشوائي */
    --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:13.5px;
    --fs-base:15px; --fs-lg:17px; --fs-xl:21px; --fs-2xl:26px;
    /* الزوايا — ٤ درجات بدل ٢٢ */
    --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
    /* الظلال — ٣ مستويات بدل ٣٦ */
    --sh-1:0 1px 3px rgba(6,43,74,.07);
    --sh-2:0 6px 18px -10px rgba(6,43,74,.30);
    --sh-3:0 18px 44px -26px rgba(6,43,74,.50);
    /* المسافات */
    --gap-1:6px; --gap-2:10px; --gap-3:14px; --gap-4:20px;
  }

  /* ---- الترويسة: عنوان الصفحة كان مكتوب مرتين ----
     الشريط العلوي الثابت بيعرض اسم التبويب، وكل صفحة بتعيد كتابته في
     .page-title تحته على طول. سطر مكرر بياخد ٤٠ بكسل من كل شاشة. */
  .admin-dash .main > .page-title,
  .admin-dash .main > div > .page-title{display:none;}
  .admin-dash .page-sub{font-size:var(--fs-md); margin-bottom:var(--gap-3); max-width:70ch;}
  .admin-dash .dash-topbar{margin-bottom:var(--gap-3);}

  /* ---- كروت الأرقام: من شبكة كروت ضخمة لشريط مضغوط ----
     صفحة العملاء كان فيها ٢٠ كارت بارتفاع ١١٨ بكسل للواحد = شاشة كاملة
     قبل الجدول. بقوا شريط بيلف في سطرين تلاتة. */
  .admin-dash .stat-grid,
  .admin-dash .compact-stats{
    display:flex; flex-wrap:wrap; gap:var(--gap-1);
    grid-template-columns:none; margin-bottom:var(--gap-3);
  }
  .admin-dash .stat-box,
  .admin-dash .compact-stats .stat-box{
    flex:1 1 130px; min-width:118px; min-height:0;
    display:flex; flex-direction:row-reverse; align-items:baseline;
    justify-content:flex-end; gap:var(--gap-1);
    padding:8px 13px; border-radius:var(--r-sm);
    box-shadow:var(--sh-1); border-color:var(--border);
  }
  .admin-dash .stat-box b,
  .admin-dash .compact-stats .stat-box b{font-size:var(--fs-lg); line-height:1.2;}
  .admin-dash .stat-box span,
  .admin-dash .compact-stats .stat-box span{
    font-size:var(--fs-sm); line-height:1.3; color:var(--text-muted); white-space:nowrap;
  }
  .admin-dash .stat-box:hover{transform:none; box-shadow:var(--sh-2);}

  /* ---- الألواح: مسافات أقل وسلّم ظلال موحّد ---- */
  .admin-dash .panel{
    margin-bottom:var(--gap-3); border-radius:var(--r-md); box-shadow:var(--sh-2);
  }
  .admin-dash .panel-head,
  .admin-dash .compact-panel .panel-head{min-height:44px; padding:9px 15px;}
  .admin-dash .panel-head h3{font-size:var(--fs-base);}

  /* لوح فاضي كان بياخد نفس مساحة اللوح المليان (٢١٨ بكسل عشان جملة واحدة) */
  .admin-dash .empty-state{padding:16px 18px; font-size:var(--fs-md);}

  /* ---- الفلاتر: صف واحد مضغوط بدل ثلاث صفوف ---- */
  .admin-dash .data-toolbar{padding:8px 10px; gap:var(--gap-1); border-radius:var(--r-md);}
  .admin-dash .data-toolbar select,
  .admin-dash .data-toolbar input[type="search"],
  .admin-dash .data-toolbar input[type="date"]{
    min-height:34px; font-size:var(--fs-sm); padding:6px 10px; border-radius:var(--r-sm);
  }
  .admin-dash .toolbar-count{font-size:var(--fs-xs); padding:5px 9px;}

  /* ---- السلّم مطبّق على النصوص المتكررة ---- */
  .admin-dash{font-size:var(--fs-base);}
  .admin-dash .compact-table{font-size:var(--fs-md);}
  .admin-dash .cell-primary{font-size:var(--fs-md);}
  .admin-dash .cell-sub{font-size:var(--fs-xs);}
  .admin-dash .badge{font-size:var(--fs-xs); border-radius:var(--r-pill);}
  .admin-dash .btn{border-radius:var(--r-sm);}
  .admin-dash .btn-sm{font-size:var(--fs-sm);}
  .admin-dash .side-link{font-size:var(--fs-md);}

  /* الأرقام في الجداول تبقى بأرقام إنجليزية بعرض ثابت عشان الأعمدة تتحاذى */
  .admin-dash .compact-table td{font-variant-numeric:tabular-nums;}

  /* ---- ترويسة الصفحة: الاسم + سطر بيقول الصفحة دي بتعمل إيه ----
     مكان السطر الثابت اللي كان بيتكرر في كل شاشة ("إدارة الموقع
     والأكاديمية") ومايقولش حاجة عن الصفحة اللي انت فيها. */
  .admin-dash .dash-topbar{height:auto; min-height:58px; padding-block:9px;}
  .admin-dash .dash-topbar-copy{display:flex; flex-direction:column; gap:1px; min-width:0;}
  .admin-dash .dash-topbar-copy b{
    font-family:var(--font-head); font-size:var(--fs-lg); font-weight:800;
    color:var(--navy); line-height:1.25; white-space:nowrap;
  }
  .admin-dash .dash-topbar-copy i{
    font-style:normal; font-size:var(--fs-sm); font-weight:500;
    color:var(--text-muted); line-height:1.3;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  @media (max-width:1100px){ .admin-dash .dash-topbar-copy i{display:none;} }

  /* ============================================================
     الاتجاه البصري: أهدأ وأنظف
     الفكرة إن العناصر تتفصل عن بعض بحدود رفيعة مش بظلال منتشرة. الظل
     بيقول "الحاجة دي طايرة فوق الصفحة" — وده مناسب لعنصر أو اتنين مهمين،
     لكن لما كل كارت وكل لوح وكل جدول ليه ظل، الشاشة بتبقى ضوضاء بصرية
     ومفيش حاجة بتبان أهم من التانية. الحدود الرفيعة بتفصل بنفس الوضوح
     وبتسيب العين ترتاح على المحتوى.
     ============================================================ */
  .admin-dash{ --line:#E3EAF0; --line-strong:#D2DDE6; }
  body:has(.admin-dash){background:#F7F9FB;}
  .admin-dash{background:#F7F9FB;}

  /* الألواح والكروت: حد رفيع بدل الظل */
  /* الوزن الزيادة في المُحدِّد مقصود: eatm-unified.css بيتحمّل **بعد**
     البلوك ده وفيه قاعدة body[data-eatm-page="dashboard"] .panel بترجّع
     الظل. .dash.admin-dash بتدّي وزن أعلى من غير ما نلجأ لـ!important. */
  .dash.admin-dash .panel,
  .dash.admin-dash .stat-box,
  .dash.admin-dash .compact-stats .stat-box,
  .dash.admin-dash .data-toolbar{
    box-shadow:none; background:#fff; border:1px solid var(--line);
  }
  .dash.admin-dash .stat-box:hover{box-shadow:none; border-color:var(--line-strong);}

  /* رأس اللوح: أبيض مسطّح بدل التدرّج، والفاصل هو اللي بيحدده */
  .dash.admin-dash .panel-head,
  .dash.admin-dash .compact-panel .panel-head{
    background:#fff; border-bottom:1px solid var(--line);
  }

  /* ألوان الحالة كانت باهتة كنص: الأخضر ٣.١ والكهرماني ٢.١ والمطلوب ٤.٥.
     مستخدمين كنص في الشارات ومربعات التقارير، وكخلفية في ٣ نقط صغيرة بس
     — فتغميقهم بيصلّح القراءة من غير ما يبوّظ حاجة. */
  .admin-dash{ --green:#14795A; --amber:#8A6612; --red:#B0342A; }

  /* الجداول: صفوف بخطوط فاصلة خفيفة بدل كروت منفصلة */
  .admin-dash .panel table{border-collapse:collapse; width:100%;}
  .admin-dash .panel table thead th{
    background:#FAFCFD; border-bottom:1px solid var(--line-strong);
    color:var(--text-muted); font-weight:700; font-size:var(--fs-sm);
    padding:9px 12px; text-align:start; white-space:nowrap;
  }
  .admin-dash .panel table tbody td{
    border-bottom:1px solid var(--line); padding:10px 12px; vertical-align:middle;
  }
  .admin-dash .panel table tbody tr:last-child td{border-bottom:0;}
  .admin-dash .panel table tbody tr:hover{background:#FAFCFD;}

  /* الأزرار: مسطّحة، والحد هو اللي بيعرّفها */
  .admin-dash .btn{box-shadow:none;}
  .admin-dash .btn-outline{border-width:1px; border-color:var(--line-strong);}
  .admin-dash .btn-outline:hover{border-color:var(--navy);}

  /* الشارات: أهدأ في اللون — كانت بتشد العين أكتر من البيانات نفسها */
  .admin-dash .badge{font-weight:700; padding:3px 9px; border:1px solid transparent;}
  .admin-dash .badge-cert{background:#F3F7FA; border-color:var(--line);}

  /* النص: تباين أعلى شوية — النص الثانوي كان باهت على خلفية فاتحة */
  .admin-dash{ --text-muted:#54687C; }

  /* ---- شارة الشغل المعلّق على اسم المجموعة ----
     بتختفي لما المجموعة تتفتح: الشارات على الروابط نفسها بتبان وقتها،
     ورقمين لنفس الحاجة في نفس الشاشة تشويش مش معلومة. */
  .admin-dash .side-group > summary{display:flex; align-items:center; gap:8px;}
  .admin-dash .side-group-badge{
    margin-inline-start:auto; margin-inline-end:6px;
    min-width:20px; padding:1px 7px; border-radius:var(--r-pill);
    background:var(--gold); color:#3A2A05;
    font-size:var(--fs-xs); font-weight:800; line-height:1.6; text-align:center;
  }
  .admin-dash .side-group[open] > summary .side-group-badge{display:none;}

  /* ---- زرار التبديل بين القسمين ---- */
  .admin-dash .side-section-switch{display:flex; gap:5px; margin-bottom:12px;}
  .admin-dash .side-section-switch button{
    flex:1; min-height:38px; padding:7px 8px; cursor:pointer;
    border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm);
    background:rgba(255,255,255,.05); color:#B9CBDA;
    font-family:var(--font-body); font-size:var(--fs-xs); font-weight:700;
    line-height:1.3; transition:background .18s ease, color .18s ease;
  }
  .admin-dash .side-section-switch button:hover{background:rgba(255,255,255,.1); color:#fff;}
  .admin-dash .side-section-switch button.on{
    background:var(--cyan); border-color:var(--cyan); color:#04283C;
  }

  /* ---- أزرار الصف ظاهرة على طول ----
     بدل قائمة "إجراءات" اللي بتحتاج ضغطتين لكل إجراء. تلات أزرار قصيرة
     بتاخد مساحة أقل من الفتح والقفل كل مرة.
     الحذف ظاهر برضه — محمي بنافذة تأكيد في bulkDeleteSingle، ومتبعد شوية
     عن التانيين عشان ماينضغطش بالغلط. */
  .admin-dash .row-actions{display:flex; gap:5px; flex-wrap:nowrap; justify-content:flex-start;}
  .admin-dash .row-actions .btn{padding:5px 11px; min-height:30px; white-space:nowrap;}
  .admin-dash .row-actions .btn-danger{margin-inline-start:5px;}
  /* قايمة "···" للإجراءات الإضافية جنب الأزرار الظاهرة */
  .admin-dash .row-actions > .row-menu{margin:0;}
  .admin-dash .row-actions > .row-menu > summary{
    min-height:30px; padding:5px 11px; border-radius:var(--r-sm);
    border:1px solid var(--line-strong); background:#fff; color:var(--navy);
    font-size:var(--fs-sm); font-weight:700; cursor:pointer; list-style:none;
  }
  .admin-dash .row-actions > .row-menu > summary::-webkit-details-marker{display:none;}
  .admin-dash .row-actions > .row-menu > summary:hover{border-color:var(--navy);}
  @media (max-width:900px){
    .admin-dash .row-actions{flex-wrap:wrap;}
    .admin-dash .row-actions .btn{flex:1 1 auto;}
  }

  /* ---- اسم العميل كزرار يفتح كل التفاصيل ----
     الجدول مايسعش الـ٢٠ حقل بتاع العميل، وحشرهم في أعمدة ضيقة بيخلي كل
     عمود مقروء بالعافية. الأعمدة بقت أهم ٥ حاجات، والباقي في نافذة
     بتتفتح بضغطة على الاسم. */
  .admin-dash .client-name-btn{
    display:block; width:100%; padding:0; border:0; background:none;
    text-align:start; cursor:pointer; font-family:inherit; color:inherit;
    border-radius:var(--r-sm);
  }
  .admin-dash .client-name-btn .cell-primary{
    color:var(--blue-mid); text-decoration:underline; text-decoration-color:transparent;
    text-underline-offset:3px; transition:text-decoration-color .15s ease;
  }
  .admin-dash .client-name-btn:hover .cell-primary{text-decoration-color:currentColor;}
  .admin-dash .client-name-btn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}

  /* ---- مؤشّر "الباقي لسه بيتحمّل" ----
     الشاشة بقت تترندر قبل ما كل البيانات توصل، فلازم يبان إن اللي قدامك
     مش نهائي — من غيره جدول لسه فاضي ممكن يتقري على إنه "مفيش بيانات". */
  .admin-dash .bg-loading-note{
    display:flex; align-items:center; gap:8px;
    margin-bottom:var(--gap-2); padding:7px 13px;
    border-radius:var(--r-sm); background:#EAF5F9; border:1px solid #CDE7F0;
    color:var(--blue-mid); font-size:var(--fs-sm); font-weight:600;
  }
  .admin-dash .bg-loading-dot{
    width:8px; height:8px; border-radius:50%; background:var(--cyan); flex-shrink:0;
    animation:bgLoadPulse 1.1s ease-in-out infinite;
  }
  @keyframes bgLoadPulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
  @media (prefers-reduced-motion:reduce){ .admin-dash .bg-loading-dot{animation:none;opacity:.9} }

  /* ---- تحذير "في بيانات ما وصلتش" ---- */
  .admin-dash .load-failure-banner{
    display:flex; align-items:center; justify-content:space-between; gap:var(--gap-3);
    flex-wrap:wrap; margin-bottom:var(--gap-3);
    padding:11px 15px; border-radius:var(--r-md);
    background:#FDEEEC; border:1px solid #F3C9C4; color:#8E2B22;
  }
  .admin-dash .load-failure-banner strong{display:block; font-size:var(--fs-md); margin-bottom:2px;}
  .admin-dash .load-failure-banner span{font-size:var(--fs-sm); opacity:.9;}
  .admin-dash .load-failure-banner .btn{background:#fff; border-color:#C4574B; color:#8E2B22;}

  /* ---- الفلاتر المطويّة (الـJS بيبني الشكل ده بعد كل رندر) ---- */
  .admin-dash .toolbar-filter-toggle{
    display:inline-flex; align-items:center; gap:5px;
    min-height:34px; padding:6px 12px; cursor:pointer;
    border:1px solid var(--border); border-radius:var(--r-sm);
    background:#fff; color:var(--navy);
    font-family:var(--font-body); font-size:var(--fs-sm); font-weight:700;
  }
  .admin-dash .toolbar-filter-toggle:hover{border-color:var(--cyan); color:var(--blue-mid);}
  .admin-dash .toolbar-filter-toggle.open{background:var(--navy); border-color:var(--navy); color:#fff;}
  /* لون مختلف لما يكون في فلتر شغّال — عشان ماتقراش نتيجة ناقصة على إنها الكل */
  .admin-dash .toolbar-filter-toggle.has-active{
    background:#EAF5F9; border-color:var(--cyan); color:var(--blue-mid);
  }
  .admin-dash .toolbar-filters{
    display:none; flex-basis:100%; flex-wrap:wrap; gap:var(--gap-1);
    margin-top:8px; padding-top:9px; border-top:1px dashed var(--border);
  }
  .admin-dash .toolbar-filters.open{display:flex;}

  @media (max-width:640px){
    .admin-dash .stat-box,
    .admin-dash .compact-stats .stat-box{flex:1 1 calc(50% - var(--gap-1)); min-width:0;}
    .admin-dash .page-sub{margin-bottom:var(--gap-2);}
    .admin-dash .toolbar-filters select,
    .admin-dash .toolbar-filters input{flex:1 1 100%;}
  }

  /* ============================================================
     Final layout organization — 2026-08-16
     Keeps the dashboard dense enough for work while restoring a
     clear grid, consistent spacing and predictable responsive flow.
     ============================================================ */
  :root{
    --dash-sidebar:272px;
    --dash-content-gap:clamp(14px,2vw,24px);
    --dash-surface:#FFFFFF;
    --dash-page:#F5F8FA;
  }

  .dash.admin-dash{background:var(--dash-page);}
  .dash.admin-dash .sidebar{
    width:var(--dash-sidebar);
    border-inline-end:1px solid rgba(255,255,255,.07);
  }
  .dash.admin-dash .main{
    min-width:0;
    padding-inline:var(--dash-content-gap);
    padding-bottom:32px;
  }

  .dash.admin-dash .dash-topbar{
    margin-inline:calc(var(--dash-content-gap) * -1);
    margin-bottom:18px;
    padding-inline:var(--dash-content-gap);
    gap:14px;
  }
  .dash.admin-dash .dash-topbar-actions{min-width:0;}
  .dash.admin-dash .global-search-wrap{
    min-width:min(300px,100%);
    max-width:460px;
  }

  /* A real grid keeps the KPI rows aligned; flex produced ragged card widths. */
  .dash.admin-dash .stat-grid,
  .dash.admin-dash .compact-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:10px;
  }
  .dash.admin-dash .stat-box,
  .dash.admin-dash .compact-stats .stat-box{
    min-width:0;
    min-height:86px;
    padding:13px 15px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:4px;
    border-radius:12px;
    background:var(--dash-surface);
  }
  .dash.admin-dash .stat-box::after{width:62px;height:62px;opacity:.75;}
  .dash.admin-dash .stat-box b,
  .dash.admin-dash .compact-stats .stat-box b{
    font-size:22px;
    line-height:1.1;
    font-variant-numeric:tabular-nums;
  }
  .dash.admin-dash .stat-box span,
  .dash.admin-dash .compact-stats .stat-box span{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .dash.admin-dash .panel{margin-bottom:18px;border-radius:14px;}
  .dash.admin-dash .panel-head,
  .dash.admin-dash .compact-panel .panel-head{
    min-height:52px;
    padding:11px 16px;
    gap:12px;
  }
  .dash.admin-dash .data-toolbar{
    align-items:center;
    margin-bottom:14px;
    padding:10px;
    gap:8px;
  }
  .dash.admin-dash .table-scroll{overscroll-behavior-inline:contain;}
  .dash.admin-dash .panel table thead th{height:42px;}
  .dash.admin-dash .panel table tbody td{line-height:1.55;}

  @media (max-width:1180px) and (min-width:901px){
    .dash.admin-dash .dash-topbar{align-items:flex-start;flex-wrap:wrap;padding-block:10px;}
    .dash.admin-dash .dash-topbar-actions{width:100%;}
    .dash.admin-dash .global-search-wrap{flex:1 1 320px;max-width:none;}
  }

  @media (max-width:900px){
    .dash.admin-dash .sidebar{width:min(88vw,340px);}
    .dash.admin-dash .main{padding-inline:14px;}
    .dash.admin-dash .dash-topbar{
      margin-inline:-14px;
      padding-inline:14px;
      margin-bottom:14px;
    }
    .dash.admin-dash .dash-topbar-actions{justify-content:stretch;gap:8px;}
    .dash.admin-dash .global-search-wrap{flex:1 1 100%;max-width:none;margin:0;}
  }

  @media (max-width:640px){
    .dash.admin-dash .stat-grid,
    .dash.admin-dash .compact-stats{
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
    }
    .dash.admin-dash .stat-box,
    .dash.admin-dash .compact-stats .stat-box{
      min-height:78px;
      padding:11px 12px;
    }
    .dash.admin-dash .stat-box b,
    .dash.admin-dash .compact-stats .stat-box b{font-size:20px;}
    .dash.admin-dash .panel-head,
    .dash.admin-dash .compact-panel .panel-head{align-items:flex-start;padding:11px 12px;}
    .dash.admin-dash .panel-head .row-actions{width:100%;}
    .dash.admin-dash .data-toolbar > *{min-width:0;}
  }

  @media (max-width:380px){
    .dash.admin-dash .stat-grid,
    .dash.admin-dash .compact-stats{grid-template-columns:1fr;}
  }


/* ── تصحيح: overflow-x:hidden كان بيكسر position:sticky ──
   أي عنصر أب بـoverflow غير visible بيبقى هو "حاوية التمرير"، فالعناصر
   اللي جواه بـposition:sticky بتلزق بالنسبة له مش بالنسبة للشاشة — وده
   اللي كان بيخلي القائمة الجانبية في لوحة التحكم تمشي مع السكرول بدل ما
   تفضل ثابتة. (overflow-x:hidden بيجبر overflow-y على auto ضمنيًا.)
   overflow-x:clip بيقص المحتوى الزايد بنفس الشكل بالظبط لكن **مايعملش**
   حاوية تمرير، فالـsticky يشتغل. القاعدة جوه @supports فالمتصفحات
   القديمة بتفضل على hidden زي ما هي (سلوك النهاردة). */
@supports (overflow-x: clip){
  html{overflow-x:clip;}
  body{overflow-x:clip;}
}