/* =====================================================
   نظام الجودة والتدريب — معهد الفضيلة العالي للتدريب
   ملف الأنماط الرئيسي (الإصدار 6.1 — Sidebar احترافي)
   ===================================================== */

/* ============= المتغيرات ============= */
:root{
  --em:#0e2560;
  --em-d:#081a4a;
  --em-l:#1d4db3;
  --em-l2:#3a6dd9;
  --em2:#d0ddf5;
  --em1:#e8eefb;
  --au:#cf2333;
  --au-d:#a01f2c;
  --au1:#fcebec;
  --gold:#d4af37;
  --gold-d:#b8941f;
  --gold1:#fbf6e7;
  --ink:#1b2735;
  --ink-l:#3d4d63;
  --mut:#647181;
  --mut-l:#8a97b5;
  --ln:#e3e7ef;
  --ln-l:#eef1f7;
  --bg:#f4f6fa;
  --bg-2:#fbfcfe;
  --bg-3:#f8fafd;
  --red:#b3202e;
  --red1:#fcebec;
  --grn:#1e8e5a;
  --grn-d:#177a4c;
  --grn1:#e3f5ec;
  --amb:#d98a0b;
  --amb-d:#a96e08;
  --amb1:#fdf3e0;

  /* أبعاد الـ Sidebar */
  --sidebar-w: 270px;
  --header-h: 64px;

  /* ظلال */
  --shadow-xs: 0 1px 2px -1px rgba(14,37,96,.06), 0 1px 3px -1px rgba(14,37,96,.08);
  --shadow-sm: 0 2px 4px -1px rgba(14,37,96,.05), 0 4px 10px -3px rgba(14,37,96,.1);
  --shadow-md: 0 4px 8px -2px rgba(14,37,96,.06), 0 10px 24px -8px rgba(14,37,96,.15);
  --shadow-lg: 0 10px 20px -5px rgba(14,37,96,.08), 0 20px 50px -16px rgba(14,37,96,.25);
  --shadow-xl: 0 20px 40px -10px rgba(14,37,96,.12), 0 30px 70px -20px rgba(14,37,96,.35);

  /* أنصاف أقطار */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-full: 99px;

  /* حركات */
  --t-fast: .15s cubic-bezier(.4,0,.2,1);
  --t: .25s cubic-bezier(.4,0,.2,1);
  --t-slow: .35s cubic-bezier(.4,0,.2,1);

  /* طبقات */
  --z-header: 70;
  --z-sidebar: 80;
  --z-notif: 90;
  --z-modal: 100;
  --z-toast: 300;
}

/* ============= إعادة الضبط ============= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'IBM Plex Sans Arabic',sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  overflow-x:hidden;
}
button{font-family:inherit;cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}
input,select,textarea{font-family:inherit;color:inherit}
img,svg{display:block;max-width:100%}
ul,ol{list-style:none}

.hid{display:none!important}
.eng{font-size:9px;letter-spacing:2px;color:var(--mut-l);direction:ltr;text-align:center;font-weight:600}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c3cbdd;border-radius:9px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#a8b3cf}

#errBar{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  background:#7a141f;color:#fff;padding:10px;font-size:13px;
  font-weight:700;text-align:center;animation:slideDown .3s ease;
}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* ============= شاشة الدخول ============= */
#login{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(1200px 600px at 85% -10%,rgba(29,77,179,.45),transparent 60%),
    radial-gradient(900px 500px at 8% 110%,rgba(207,35,51,.22),transparent 60%),
    linear-gradient(135deg,#0a1c49,#0e2560 50%,#081a4a);
  position:relative;overflow:hidden;
}
#login::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1.5px,transparent 1.5px),
    linear-gradient(45deg,transparent 49%,rgba(255,255,255,.02) 50%,transparent 51%);
  background-size:24px 24px,60px 60px;
  pointer-events:none;
}

.lc{
  width:min(480px,100%);background:#fff;
  border-radius:var(--r-2xl);padding:90px 32px 28px;
  box-shadow:0 50px 100px -25px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1);
  position:relative;z-index:1;
  animation:fadeUp .5s cubic-bezier(.4,0,.2,1);
}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.lb{
  position:absolute;top:-70px;right:50%;transform:translateX(50%);
  width:140px;height:140px;border-radius:var(--r-xl);
  background:#fff;border:5px solid var(--au1);
  display:grid;place-items:center;padding:14px;
  box-shadow:0 22px 45px -12px rgba(0,0,0,.4);
}
.lb img{max-width:100%;max-height:100%;object-fit:contain}

.lc h1{font-size:22px;text-align:center;color:var(--em-d);margin-top:4px;font-weight:700;letter-spacing:-.3px}
.ls{font-size:12.5px;color:var(--mut);text-align:center;margin:6px 0 16px;line-height:1.7}

.le{
  background:var(--red1);border:1px solid #f2c5ca;color:#8f1c26;
  border-radius:var(--r-md);padding:10px 12px;font-size:12.5px;
  font-weight:700;margin-bottom:10px;display:none;animation:shake .3s;
}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.ip{position:relative;margin-bottom:10px}
.ip input{
  width:100%;border:1.5px solid var(--ln);border-radius:var(--r-md);
  padding:12px 40px;font-family:inherit;font-size:13.5px;
  background:var(--bg-2);transition:var(--t);
}
.ip input:focus{outline:none;border-color:var(--au);box-shadow:0 0 0 3px rgba(207,35,51,.08)}
.ip b{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-weight:400;font-size:15px;color:var(--mut)}

.acc{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;border:1.5px solid var(--ln);border-radius:var(--r-md);
  background:var(--bg-2);cursor:pointer;text-align:right;
  margin-bottom:6px;transition:var(--t);
}
.acc:hover{border-color:var(--au);background:var(--au1);transform:translateX(-2px);box-shadow:var(--shadow-sm)}
.acc b{font-size:12.5px}
.acc small{font-size:10px;color:var(--mut)}
.acc i{
  font-style:normal;margin-inline-start:auto;
  font-size:10.5px;background:var(--em1);color:var(--em);
  padding:3px 8px;border-radius:var(--r-sm);font-weight:700;
}

.at{
  font-size:11px;font-weight:700;color:var(--au);
  margin:14px 0 8px;border-top:1px dashed var(--ln);padding-top:10px;
}

.srv-row{
  display:flex;align-items:center;gap:8px;margin-top:12px;
  padding:10px;background:var(--bg);border-radius:var(--r-md);
}
.srv-toggle{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;color:var(--em);
  cursor:pointer;white-space:nowrap;
}
.srv-toggle input{margin:0;width:14px;height:14px;accent-color:var(--em)}
.srv-url{
  flex:1;border:1px solid var(--ln);border-radius:var(--r-sm);
  padding:6px 8px;font-size:10.5px;direction:ltr;text-align:left;background:#fff;min-width:0;
}
.srv-url:focus{outline:none;border-color:var(--em)}

/* ============= تخطيط التطبيق الجديد ============= */
.app-layout{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:100vh;
}

/* === Sidebar الجانبي === */
.sidebar{
  background:linear-gradient(180deg,var(--em-d) 0%,var(--em) 60%,var(--em-d) 100%);
  color:#fff;
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  z-index:var(--z-sidebar);
  box-shadow:4px 0 24px -8px rgba(14,37,96,.3);
  border-left:3px solid var(--au);
}

.sidebar-header{
  padding:18px 16px;
  display:flex;align-items:center;gap:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.15);
}
.sidebar-logo img{
  height:48px;width:auto;object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));
  background:#fff;padding:4px 8px;border-radius:var(--r-sm);
}
.sidebar-title{flex:1;min-width:0}
.sidebar-title b{font-size:14px;display:block;line-height:1.3;font-weight:700}
.sidebar-title span{font-size:11px;color:#a9c0ee;display:block}

.sidebar-nav{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:12px 8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.15) transparent;
}
.sidebar-nav::-webkit-scrollbar{width:5px}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:5px}

/* قسم في الـ Sidebar */
.nav-section{
  margin-bottom:10px;
}
.nav-section-title{
  font-size:9.5px;color:#7d8a9e;font-weight:800;
  padding:8px 12px 4px;letter-spacing:1.2px;text-transform:uppercase;
  text-align:right;
}

/* زر تنقل في الـ Sidebar */
.np{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:10px 12px;
  background:none;color:#cfdaf3;
  font-size:12.5px;font-weight:600;
  border-radius:var(--r-sm);
  cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
  text-align:right;margin-bottom:2px;
  position:relative;overflow:hidden;
}
.np::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:3px;
  background:var(--au);transform:scaleY(0);transform-origin:top;
  transition:transform var(--t-slow);
}
.np:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateX(-3px)}
.np:hover::before{transform:scaleY(1)}
.np.on{
  background:linear-gradient(90deg,rgba(207,35,51,.3),rgba(207,35,51,.15));
  color:#fff;
  box-shadow:inset 3px 0 0 var(--au), 0 4px 10px -3px rgba(207,35,51,.3);
  transform:translateX(-2px);
}
.np.on::before{transform:scaleY(1)}
.np:active{transform:translateX(0) scale(.98)}
.np .nav-icon{font-size:15px;flex:none;width:20px;text-align:center;transition:transform var(--t-slow)}
.np:hover .nav-icon{transform:scale(1.2)}
.np .nav-label{flex:1;overflow:hidden;text-overflow:ellipsis}
.np .badge-new{
  font-size:8px;background:var(--au);color:#fff;
  padding:1px 5px;border-radius:var(--r-full);
  font-weight:800;
  box-shadow:0 2px 4px -1px rgba(207,35,51,.5);
  animation:badgePulse 2s infinite;
}
@keyframes badgePulse{
  0%,100%{box-shadow:0 2px 4px -1px rgba(207,35,51,.5)}
  50%{box-shadow:0 2px 4px -1px rgba(207,35,51,.5),0 0 0 3px rgba(207,35,51,.2)}
}
.np .badge-num{
  font-size:9px;background:rgba(255,255,255,.15);color:#fff;
  padding:1px 6px;border-radius:var(--r-full);font-weight:700;
}

.sidebar-footer{
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.2);
}
.sidebar-visit{
  font-size:10.5px;color:#c9d7f2;
  padding:8px 10px;background:rgba(255,255,255,.06);
  border-radius:var(--r-sm);
  margin-bottom:6px;
}
.sidebar-visit b{color:#ff9aa4;display:block;font-size:11px}
.sidebar-version{font-size:9px;color:#7d8a9e;text-align:center}

/* === المنطقة الرئيسية === */
.main-area{
  display:flex;flex-direction:column;
  min-height:100vh;
  background:var(--bg);
}

/* الهيدر */
.tb{
  position:sticky;top:0;z-index:var(--z-header);
  display:flex;align-items:center;gap:12px;
  padding:0 22px;
  background:#fff;
  border-bottom:1px solid var(--ln);
  height:var(--header-h);
  box-shadow:0 1px 3px rgba(14,37,96,.05);
}
.menu-btn{display:none}
.tb-title{
  flex:1;font-size:18px;font-weight:700;color:var(--em-d);
  letter-spacing:-.3px;
}
.hdr-actions{display:flex;align-items:center;gap:8px}
.ib{
  width:38px;height:38px;border-radius:var(--r-sm);
  background:var(--bg);color:var(--ink-l);
  display:grid;place-items:center;cursor:pointer;
  font-size:15px;position:relative;transition:var(--t);
  border:1px solid var(--ln);
}
.ib:hover{background:var(--em);color:#fff;border-color:var(--em);box-shadow:var(--shadow-sm)}

.bbn{
  position:absolute;top:-4px;left:-4px;
  background:var(--au);color:#fff;
  min-width:18px;height:18px;border-radius:var(--r-full);
  font-size:9px;font-weight:800;display:none;
  place-items:center;padding:0 4px;
  box-shadow:0 2px 6px -1px rgba(207,35,51,.6);
  border:1.5px solid #fff;
}

.sync-ind{
  width:9px;height:9px;border-radius:50%;
  background:#9aa5bb;display:inline-block;
  transition:var(--t);cursor:help;
}
.sync-ind.on{background:#5fdc7a;box-shadow:0 0 0 3px rgba(95,220,122,.2)}
.sync-ind.off{background:#ff9aa4;box-shadow:0 0 0 3px rgba(255,154,164,.2)}
.sync-ind.sync{background:#ffd166;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.tu{
  display:flex;align-items:center;gap:8px;
  padding:4px 12px 4px 4px;border-radius:var(--r-full);
  background:var(--bg);border:1px solid var(--ln);
}
.tu-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--em-l),var(--em));
  display:grid;place-items:center;
  font-weight:800;font-size:11px;color:#fff;
}
.tu-info{display:flex;flex-direction:column;line-height:1.2}
.tu-info b{font-size:12px;color:var(--ink)}
.tu-info span{font-size:9.5px;color:var(--mut)}

/* ============= المحتوى ============= */
.cw{
  padding:22px 24px 44px;
  max-width:1480px;margin:0 auto;width:100%;
  flex:1;
}

.cd{
  background:#fff;border:1px solid var(--ln);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:18px;transition:transform var(--t),box-shadow var(--t);
}
.cd:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}

.ct{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;
  margin-bottom:14px;color:var(--ink);
}
.ct:before{
  content:'';width:7px;height:7px;border-radius:2px;
  background:var(--au);transform:rotate(45deg);flex:none;
  box-shadow:0 2px 4px -1px rgba(207,35,51,.4);
}

.cr{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;margin-bottom:14px;flex-wrap:wrap;
}
.cr .ct{margin:0}

.ph{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:14px;margin-bottom:20px;flex-wrap:wrap;
}
.kk{
  font-size:10.5px;font-weight:700;color:var(--au);
  letter-spacing:1.2px;text-transform:uppercase;
}
.ph h2{font-size:22px;margin-top:4px;color:var(--ink);font-weight:700;letter-spacing:-.3px}
.pd{font-size:12.5px;color:var(--mut);margin-top:5px;line-height:1.7}

/* ============= الأزرار ============= */
.bn{
  display:inline-flex;align-items:center;gap:6px;
  border:none;cursor:pointer;
  font-size:12.5px;font-weight:700;
  padding:9px 16px;border-radius:var(--r-full);
  transition:transform var(--t-fast),box-shadow var(--t),background var(--t),color var(--t);
  white-space:nowrap;position:relative;overflow:hidden;
}
.bn::before{
  content:'';position:absolute;top:50%;left:50%;
  width:0;height:0;border-radius:50%;
  background:rgba(255,255,255,.3);
  transform:translate(-50%,-50%);
  transition:width .5s,height .5s;
  pointer-events:none;
}
.bn:hover::before{width:300px;height:300px}
.bn:active{transform:scale(.94)}
.bn:disabled{opacity:.5;cursor:not-allowed}
.bn:disabled:hover::before{display:none}

.be{background:linear-gradient(135deg,var(--em-l),var(--em));color:#fff;box-shadow:0 2px 6px -2px rgba(22,51,126,.4)}
.be:hover{background:linear-gradient(135deg,var(--em),var(--em-d));box-shadow:0 6px 18px -4px rgba(22,51,126,.6);transform:translateY(-2px)}
.be:active{transform:translateY(0) scale(.96)}

.ba{background:linear-gradient(135deg,#e03445,#b3202e);color:#fff;box-shadow:0 2px 6px -2px rgba(207,35,51,.4)}
.ba:hover{background:linear-gradient(135deg,#e03445,#a01f2c);box-shadow:0 6px 18px -4px rgba(207,35,51,.6);transform:translateY(-2px)}
.ba:active{transform:translateY(0) scale(.96)}

.bo{background:#fff;border:1.5px solid var(--ln);color:var(--em)}
.bo:hover{border-color:var(--em);background:var(--em1);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.bo:active{transform:translateY(0) scale(.96)}

.bd2{background:var(--red1);color:var(--red);border:1.5px solid #f2c5ca}
.bd2:hover{background:#f9d8db;box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.bd2:active{transform:translateY(0) scale(.96)}

.bg2{background:linear-gradient(135deg,var(--grn),var(--grn-d));color:#fff;box-shadow:0 2px 6px -2px rgba(30,142,90,.4)}
.bg2:hover{box-shadow:0 6px 18px -4px rgba(30,142,90,.6);transform:translateY(-2px)}
.bg2:active{transform:translateY(0) scale(.96)}

.bgold{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#fff;box-shadow:0 2px 6px -2px rgba(212,175,55,.4)}
.bgold:hover{box-shadow:0 6px 18px -4px rgba(212,175,55,.6);transform:translateY(-2px)}
.bgold:active{transform:translateY(0) scale(.96)}

.bs{padding:6px 12px;font-size:11.5px}

/* أيقونات صغيرة تفاعلية */
.ic2{
  width:30px;height:30px;border-radius:var(--r-sm);
  border:1.5px solid var(--ln);background:#fff;
  display:inline-grid;place-items:center;
  cursor:pointer;font-size:13px;transition:var(--t);
  position:relative;overflow:hidden;
}
.ic2::before{
  content:'';position:absolute;top:50%;left:50%;
  width:0;height:0;border-radius:50%;
  background:var(--em1);
  transform:translate(-50%,-50%);
  transition:width .4s,height .4s;
  pointer-events:none;z-index:0;
}
.ic2:hover::before{width:80px;height:80px}
.ic2:hover{border-color:var(--em);transform:translateY(-2px) rotate(-3deg);box-shadow:var(--shadow-sm)}
.ic2:active{transform:translateY(0) scale(.92)}
.ic2>*{position:relative;z-index:1}
.ic2.x:hover{border-color:var(--red)}
.ic2.x::before{background:var(--red1)}
.ic2.g:hover{border-color:var(--grn)}
.ic2.g::before{background:var(--grn1)}

/* زر رفع الملفات */
.bn-file{
  display:inline-flex;align-items:center;gap:6px;
  border:1.5px dashed var(--em);background:var(--em1);
  color:var(--em);padding:8px 14px;border-radius:var(--r-full);
  cursor:pointer;font-weight:700;font-size:12px;
  transition:var(--t);position:relative;overflow:hidden;
}
.bn-file:hover{background:var(--em);color:#fff;border-style:solid;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.bn-file:active{transform:translateY(0) scale(.96)}
.bn-file input{position:absolute;inset:0;opacity:0;cursor:pointer}

.rx{display:flex;gap:4px;justify-content:flex-end;align-items:center;flex-wrap:wrap}

/* ============= الشارات ============= */
.pl{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:var(--r-full);
  font-size:11px;font-weight:700;white-space:nowrap;
}
.pl:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.pg{background:var(--grn1);color:var(--grn-d)}
.pa2{background:var(--amb1);color:var(--amb-d)}
.pr{background:var(--red1);color:var(--red)}
.pk{background:#edf0f5;color:#5b6b81}
.pe{background:var(--em1);color:var(--em)}
.pu{background:var(--au1);color:var(--au-d)}
.pgold{background:var(--gold1);color:var(--gold-d)}

/* ============= الجداول ============= */
.tw{overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--ln-l)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{
  text-align:right;padding:11px 12px;
  font-size:10.5px;font-weight:800;color:var(--mut);
  border-bottom:2px solid var(--em2);
  white-space:nowrap;background:linear-gradient(180deg,#f8fafd,#f1f4fa);
  position:sticky;top:0;z-index:1;letter-spacing:.3px;
}
td{padding:10px 12px;border-bottom:1px solid var(--ln-l);vertical-align:middle}
tbody tr{transition:background var(--t-fast),transform var(--t-fast);animation:rowFadeIn .3s ease both}
@keyframes rowFadeIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
tbody tr:nth-child(1){animation-delay:0s}
tbody tr:nth-child(2){animation-delay:.05s}
tbody tr:nth-child(3){animation-delay:.1s}
tbody tr:nth-child(4){animation-delay:.15s}
tbody tr:nth-child(5){animation-delay:.2s}
tbody tr:hover{background:#f7f9fd;transform:translateX(-2px)}
tbody tr:last-child td{border-bottom:none}
.ep{text-align:center;color:#9aa5bb;padding:24px!important}

/* ============= أشرطة التقدم ============= */
.pb2{
  height:7px;background:#e6eaf3;
  border-radius:var(--r-full);overflow:hidden;
  min-width:75px;position:relative;
}
.pb2 i{
  display:block;height:100%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--em-l),var(--em-d));
  transition:width .4s ease;position:relative;
}
.pb2 i::after{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(255,255,255,.3),transparent);
  border-radius:var(--r-full);
}
.pr2{height:8px;background:#e8ecf5;border-radius:var(--r-full);overflow:hidden;margin:10px 0 3px}
.pr2 i{display:block;height:100%;background:var(--em);width:0;transition:width .3s}

/* ============= النصوص ============= */
.su{font-size:11px;color:#7d8a9e;line-height:1.5}
.sx{font-size:12px;color:#4a5a70;line-height:1.6}

.ch{display:flex;gap:7px;flex-wrap:wrap}
.cp{
  padding:6px 13px;border-radius:var(--r-full);
  border:1.5px solid var(--ln);background:#fff;
  font-weight:700;font-size:11.5px;color:var(--mut);
  cursor:pointer;transition:var(--t);
}
.cp:hover{border-color:var(--em);color:var(--em)}
.cp.on{background:var(--em);border-color:var(--em);color:#fff;box-shadow:0 2px 8px -2px rgba(22,51,126,.4)}

/* التنبيهات */
.nt{
  padding:11px 14px;border-radius:var(--r-md);
  font-size:12.5px;line-height:1.7;margin-bottom:12px;
  border:1px solid;display:flex;align-items:flex-start;gap:8px;
}
.ne{background:var(--em1);border-color:#ccd9f3;color:#12326e}
.na{background:var(--au1);border-color:#f2c5ca;color:#8f1c26}
.ng{background:var(--grn1);border-color:#bfe5cf;color:#14683f}
.nr{background:var(--red1);border-color:#f2c5ca;color:#8f1c26}
.empty-hint{color:var(--mut);font-size:12px;font-style:italic;padding:8px 0}

/* ============= التبويبات الداخلية ============= */
.tb2{
  display:flex;gap:3px;border-bottom:2px solid var(--ln);
  margin-bottom:16px;overflow-x:auto;scrollbar-width:thin;
}
.tbi{
  padding:10px 14px;background:none;
  font-weight:700;font-size:12.5px;color:var(--mut);
  cursor:pointer;border-bottom:2.5px solid transparent;
  margin-bottom:-2px;white-space:nowrap;transition:var(--t);
}
.tbi:hover{color:var(--em)}
.tbi.on{color:var(--em);border-color:var(--au)}

/* ============= الحقول ============= */
.fl{margin-bottom:12px}
.fl label{display:block;font-size:12px;font-weight:700;color:var(--ink-l);margin-bottom:5px}
.fl input,.fl select,.fl textarea{
  width:100%;border:1.5px solid var(--ln);
  border-radius:var(--r-md);padding:10px 12px;
  font-family:inherit;font-size:13px;
  background:var(--bg-2);color:var(--ink);transition:var(--t);
}
.fl input:focus,.fl select:focus,.fl textarea:focus{
  outline:none;border-color:var(--au);
  box-shadow:0 0 0 3px rgba(207,35,51,.08);background:#fff;
}
.fl textarea{resize:vertical;min-height:60px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.f4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;align-items:start}

/* ============= بانر البطل ============= */
.hr2{
  background:linear-gradient(125deg,var(--em-d),var(--em) 50%,var(--em-l));
  color:#fff;border-radius:var(--r-xl);padding:24px 26px;
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  margin-bottom:16px;position:relative;overflow:hidden;
  box-shadow:0 16px 36px -10px rgba(14,37,96,.4);
}
.hr2:before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1.5px,transparent 1.5px);
  background-size:22px 22px;
}
.hi2{flex:1;min-width:240px;position:relative;z-index:1}
.hi2 .kk{color:#ff9aa4}
.hr2 h3{font-size:19px;margin:6px 0;font-weight:700;letter-spacing:-.3px;position:relative;z-index:1}
.hr2 p{color:#c9d7f2;font-size:12.5px;line-height:1.7;position:relative;z-index:1}
.rr{color:#ff9aa4;font-weight:700}
.hc{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;position:relative;z-index:1}
.hc span{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  padding:5px 12px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:600;backdrop-filter:blur(4px);
}
.ring-wrap{
  display:flex;align-items:center;justify-content:center;
  flex:none;position:relative;z-index:1;
  padding:10px;background:rgba(0,0,0,.12);
  border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.08);
}

/* ============= البطاقات الإحصائية ============= */
.tl{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;margin-bottom:14px;
}
.ti2{
  background:#fff;border:1px solid var(--ln);
  border-radius:var(--r-lg);padding:14px;
  position:relative;overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  cursor:default;
}
.ti2:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-md);border-color:var(--em)}
.ti2:active{transform:translateY(-2px) scale(1)}
.ti2:before{
  content:'';position:absolute;left:-20px;bottom:-20px;
  width:80px;height:80px;border-radius:50%;
  background:var(--t,#eef1f7);opacity:.5;
  transition:transform var(--t-slow);
}
.ti2:hover:before{transform:scale(1.4)}
.ti2 .e2{
  width:40px;height:40px;border-radius:var(--r-sm);
  display:grid;place-items:center;
  margin-bottom:8px;position:relative;z-index:1;font-size:18px;
  transition:transform var(--t-slow);
}
.ti2:hover .e2{transform:rotate(-10deg) scale(1.1)}
.t1 .e2{background:var(--em1)}
.t2 .e2{background:var(--au1)}
.t3 .e2{background:var(--grn1)}
.t4 .e2{background:var(--red1)}
.t5 .e2{background:var(--amb1)}
.t6 .e2{background:#ede7ff}
.t1{--t:var(--em1)}.t2{--t:var(--au1)}.t3{--t:var(--grn1)}
.t4{--t:var(--red1)}.t5{--t:var(--amb1)}.t6{--t:#ede7ff}
.ti2 b{font-size:22px;display:block;position:relative;z-index:1;line-height:1.2;font-weight:700;color:var(--ink);letter-spacing:-.5px;transition:color var(--t)}
.ti2:hover b{color:var(--em)}
.ti2 span{font-size:11px;color:var(--mut);font-weight:600;position:relative;z-index:1}

/* ============= شبكة الإجراءات ============= */
.qg{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:10px}
.qa2{
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px;
  border:1.5px dashed #c9cfdc;border-radius:var(--r-md);background:var(--bg-2);
  font-weight:700;font-size:11.5px;cursor:pointer;color:var(--ink);
  text-align:right;
  transition:transform var(--t),border-color var(--t),background var(--t),box-shadow var(--t);
  position:relative;overflow:hidden;
}
.qa2::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--au);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-slow);
}
.qa2:hover{border-color:var(--au);border-style:solid;background:var(--au1);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.qa2:hover::before{transform:scaleX(1)}
.qa2:active{transform:translateY(-1px) scale(.97)}
.qa2 span{font-size:11.5px;position:relative;z-index:1}
.qa2 span:first-child{font-size:24px;margin-bottom:4px;transition:transform var(--t-slow)}
.qa2:hover span:first-child{transform:scale(1.2) rotate(-5deg)}

/* ============= عناصر القوائم ============= */
.sv{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;padding:12px 4px;border-bottom:1px dashed #e8ecf4;flex-wrap:wrap;
}
.sv:last-child{border-bottom:none}
.st{font-size:12.5px;font-weight:600;flex:1;min-width:200px;line-height:1.6}
.so{display:flex;gap:6px}
.so input{display:none}
.so span{
  width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--ln);display:grid;place-items:center;
  font-weight:700;font-size:12.5px;color:var(--mut);cursor:pointer;transition:var(--t-fast);
}
.so input:checked+span{background:var(--em);border-color:var(--em);color:#fff;transform:scale(1.08)}

/* ============= النوافذ المنبثقة ============= */
.mb3{
  position:fixed;inset:0;background:rgba(8,18,48,.6);
  backdrop-filter:blur(3px);display:grid;place-items:center;
  z-index:var(--z-modal);padding:16px;animation:fadeIn .2s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.md{
  background:#fff;border-radius:var(--r-xl);
  width:100%;max-width:600px;max-height:92vh;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-xl);overflow:hidden;
  animation:scaleIn .3s cubic-bezier(.4,0,.2,1);
}
@keyframes scaleIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.md.w{max-width:920px}
.md.xl{max-width:1100px}
.mh2{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--ln);
  background:linear-gradient(180deg,#f8fafd,#f1f4fa);
}
.mh2 h3{font-size:15px;color:var(--em-d);font-weight:700}
.mby{padding:16px 18px;overflow-y:auto}
.mf2{padding:12px 18px;border-top:1px solid var(--ln);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;background:linear-gradient(0deg,#f8fafd,#fbfcfe)}
body.ns{overflow:hidden}

/* ============= التنبيهات ============= */
#to{
  position:fixed;bottom:20px;right:20px;z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.to{
  background:#fff;border:1px solid var(--ln);border-right:4px solid var(--em);
  padding:11px 16px;border-radius:var(--r-md);
  font-size:12.5px;font-weight:600;box-shadow:var(--shadow-lg);
  max-width:340px;animation:slideIn .3s;pointer-events:auto;
}
@keyframes slideIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
.to.er{border-right-color:var(--red)}
.to.sc{border-right-color:var(--grn)}

/* ============= الفوتر ============= */
.ft2{padding:14px;text-align:center;font-size:10.5px;color:#9aa5bb;border-top:1px solid var(--ln);background:#fff}

/* ============= رقائق الملفات ============= */
.fc{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--em1);border:1px solid var(--em2);
  border-radius:var(--r-sm);padding:6px 10px;
  font-size:11.5px;font-weight:700;color:var(--em);flex-wrap:wrap;
}
.fc button{border:none;background:none;cursor:pointer;font-size:12px;padding:2px}

.dz{
  border:2px dashed #c2cbdf;border-radius:var(--r-md);
  padding:14px;text-align:center;font-size:12px;
  color:#7d8a9e;background:var(--bg-2);
  cursor:pointer;display:block;transition:var(--t);
}
.dz:hover{border-color:var(--au);background:#fef7f8}
.dz.dragover{border-color:var(--em);background:var(--em1)}

.lk{
  display:flex;gap:6px;align-items:center;
  background:#f7f9fc;border:1.5px dashed #c2cbdf;
  border-radius:var(--r-sm);padding:8px 10px;
}
.lk input{flex:1;border:none;background:none;font-size:10.5px;color:#4a5a70;direction:ltr;text-align:left;min-width:90px}

.ca{
  width:100%;min-height:64px;border:1.5px solid var(--ln);
  border-radius:var(--r-md);padding:10px;
  font-family:monospace;font-size:10.5px;
  direction:ltr;text-align:left;background:var(--bg-2);resize:vertical;
}

.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.sb2{
  display:flex;flex-direction:column;gap:5px;align-items:center;padding:12px;
  border:1.5px solid var(--ln);border-radius:var(--r-md);
  background:#fff;cursor:pointer;font-weight:700;font-size:12px;
  color:var(--em);text-align:center;transition:var(--t);
}
.sb2:hover{border-color:var(--au);background:var(--au1);transform:translateY(-2px)}

.av2{
  width:42px;height:42px;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--em-l),var(--em));
  color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:14px;flex:none;
  box-shadow:0 4px 10px -2px rgba(22,51,126,.3);
}

.qq{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:#4a5a70}
.qq b{color:var(--em)}

.zm{
  display:flex;justify-content:space-between;align-items:center;
  gap:8px;border-top:1px dashed var(--ln);
  padding-top:10px;margin-top:auto;flex-wrap:wrap;
}

.stp{display:flex;gap:5px;margin-bottom:12px;flex-wrap:wrap}
.stp span{
  padding:6px 12px;border-radius:var(--r-full);
  background:#edf0f5;color:#8b95a8;font-size:11px;font-weight:800;
}
.stp span.on{background:var(--em);color:#fff;box-shadow:0 2px 6px -1px rgba(22,51,126,.4)}

/* ============= النموذج العام ============= */
#pub{
  min-height:100vh;background:linear-gradient(150deg,var(--em-d),#0a1c49);
  padding:22px 14px;display:grid;place-items:start center;
}
.pw{
  width:min(640px,100%);background:#fff;border-radius:var(--r-xl);
  padding:28px 24px;box-shadow:0 40px 90px -20px rgba(0,0,0,.5);
  border-top:6px solid var(--au);
}

/* ============= مؤشر خط الزيارة ============= */
.visit-timeline{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;background:linear-gradient(95deg,var(--em1) 0%,#fff 100%);
  border-radius:var(--r-md);border:1px solid var(--em2);
  margin-bottom:16px;position:relative;overflow:hidden;
}
.visit-timeline::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--em-l),var(--au));
}
.vt-day{font-size:30px;font-weight:800;color:var(--em);min-width:70px;text-align:center;line-height:1;letter-spacing:-1px}
.vt-day.urgent{color:var(--red);animation:beat 1.5s infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.vt-info{display:flex;flex-direction:column;gap:2px}
.vt-label{font-size:11px;color:var(--mut);font-weight:600}
.vt-progress{flex:1;height:6px;background:#e6eaf3;border-radius:var(--r-full);overflow:hidden;min-width:60px}
.vt-progress i{display:block;height:100%;border-radius:var(--r-full);transition:width .5s}

/* ============= بطاقات الشهادات ============= */
.cert-card{
  background:linear-gradient(135deg,#fefcf5,#fbf6e7);
  border:2px solid var(--gold);border-radius:var(--r-lg);
  padding:24px;position:relative;overflow:hidden;transition:var(--t);
}
.cert-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -8px rgba(212,175,55,.35)}
.cert-card:before{
  content:'';position:absolute;top:0;right:0;width:120px;height:120px;
  background:radial-gradient(circle,rgba(212,175,55,.2),transparent 70%);
}
.cert-seal{
  position:absolute;top:14px;left:14px;width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-d));
  display:grid;place-items:center;font-size:22px;color:#fff;
  box-shadow:0 6px 14px -4px rgba(212,175,55,.5);
}
.cert-card h4{font-size:16px;color:var(--em-d);margin-bottom:4px;font-weight:700}
.cert-name{font-size:14px;font-weight:700;color:var(--ink);margin:8px 0 4px}
.cert-meta{font-size:11px;color:var(--mut);line-height:1.6}
.cert-qr{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--gold)}
.cert-qr canvas,.cert-qr img{border-radius:var(--r-xs);background:#fff;padding:4px}

/* ============= بطاقة الاجتماع ============= */
.meet-card{
  background:#fff;border:1px solid var(--ln);border-radius:var(--r-md);
  padding:14px;position:relative;border-right:4px solid var(--em);transition:var(--t);
}
.meet-card:hover{box-shadow:var(--shadow-md);transform:translateX(-2px)}
.meet-card.urgent{border-right-color:var(--red)}
.meet-card.done{border-right-color:var(--grn);opacity:.85}
.meet-date{
  position:absolute;top:10px;left:10px;
  background:var(--em1);color:var(--em);
  font-size:10px;font-weight:700;padding:4px 10px;border-radius:var(--r-full);
}
.meet-card h4{font-size:14px;color:var(--ink);margin:8px 0 10px;padding-left:70px;font-weight:700;line-height:1.4}
.meet-meta{font-size:11px;color:var(--mut);line-height:1.7}
.meet-decisions{margin-top:8px;padding-top:8px;border-top:1px dashed var(--ln)}
.decision-item{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;padding:4px 0}
.di-check{
  width:18px;height:18px;border-radius:5px;border:1.5px solid var(--ln);
  display:grid;place-items:center;cursor:pointer;flex:none;font-size:10px;color:#fff;transition:var(--t);
}
.decision-item.done .di-check{background:var(--grn);border-color:var(--grn)}
.decision-item.done .di-text{text-decoration:line-through;color:var(--mut)}

/* ============= لوحة الرسوم البيانية ============= */
.chart-card{background:#fff;border:1px solid var(--ln);border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-sm)}
.chart-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.chart-title:before{content:'';width:4px;height:14px;background:var(--au);border-radius:2px}
.chart-container{position:relative;height:240px}
.chart-container canvas{max-width:100%}

.bar-chart{display:flex;align-items:flex-end;gap:10px;height:200px;padding:14px 0 26px;border-bottom:2px solid var(--ln);position:relative}
.bar{flex:1;background:linear-gradient(180deg,var(--em-l),var(--em-d));border-radius:6px 6px 0 0;position:relative;min-height:4px;transition:var(--t);cursor:pointer}
.bar:hover{background:linear-gradient(180deg,#e03445,#b3202e);transform:translateY(-2px)}
.bar .bar-label{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--mut);font-weight:700;white-space:nowrap}
.bar .bar-value{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--ink);font-weight:700;white-space:nowrap}
.bar.urgent{background:linear-gradient(180deg,#e03445,#b3202e)}
.bar.warn{background:linear-gradient(180deg,var(--amb),var(--amb-d))}

.pie-chart{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.pie-chart svg{flex:none}
.pie-legend{display:flex;flex-direction:column;gap:6px}
.pl-item{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600}
.pl-dot{width:12px;height:12px;border-radius:3px;flex:none}

/* ============= صفحة التقارير ============= */
.report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:14px}
.report-kpi{
  background:linear-gradient(135deg,var(--em-d),var(--em));
  color:#fff;border-radius:var(--r-md);padding:18px;position:relative;overflow:hidden;
}
.report-kpi:before{content:'';position:absolute;top:-30px;left:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.05)}
.rk-label{font-size:11px;color:#a9c0ee;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.rk-value{font-size:28px;font-weight:800;margin:5px 0 3px;letter-spacing:-.5px}
.rk-trend{font-size:11px;display:flex;align-items:center;gap:4px}
.rk-trend.up{color:#5fdc7a}
.rk-trend.down{color:#ff9aa4}

.accreditation-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-full);font-size:12px;font-weight:700}
.accreditation-badge.high{background:var(--grn1);color:var(--grn-d);border:1px solid #bfe5cf}
.accreditation-badge.mid{background:var(--amb1);color:var(--amb-d);border:1px solid #f0d9a0}
.accreditation-badge.low{background:var(--red1);color:var(--red);border:1px solid #f2c5ca}

/* ============= أدوات مساعدة ============= */
.flex{display:flex}.flex-col{flex-direction:column}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.text-center{text-align:center}
.text-mut{color:var(--mut)}.text-em{color:var(--em)}.text-au{color:var(--au)}
.text-grn{color:var(--grn)}.text-red{color:var(--red)}
.fw-700{font-weight:700}
.fs-sm{font-size:11px}.fs-md{font-size:13px}.fs-lg{font-size:16px}.fs-xl{font-size:20px}

/* =====================================================
   جديد 6.1 — ميزات زيارة الاعتماد
   ===================================================== */

/* === مؤشر العد التنازلي للاعتماد === */
.countdown-banner{
  background:linear-gradient(95deg,var(--em-d),var(--em-l));
  color:#fff;border-radius:var(--r-lg);padding:18px 22px;
  margin-bottom:16px;display:flex;align-items:center;gap:18px;
  flex-wrap:wrap;position:relative;overflow:hidden;
  box-shadow:0 10px 24px -8px rgba(14,37,96,.4);
}
.countdown-banner::before{
  content:'';position:absolute;top:-50%;right:-10%;width:50%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  transform:rotate(-25deg);pointer-events:none;
}
.cd-icon{
  width:60px;height:60px;border-radius:var(--r-md);
  background:rgba(255,255,255,.1);
  display:grid;place-items:center;font-size:28px;
  border:1px solid rgba(255,255,255,.2);
  flex:none;position:relative;z-index:1;
}
.cd-info{flex:1;min-width:200px;position:relative;z-index:1}
.cd-info .kk{color:#ff9aa4}
.cd-info h3{font-size:16px;margin:4px 0;font-weight:700}
.cd-info p{font-size:12px;color:#c9d7f2;line-height:1.6}
.cd-days{
  display:flex;flex-direction:column;align-items:center;
  padding:8px 16px;background:rgba(0,0,0,.2);
  border-radius:var(--r-md);min-width:90px;
  border:1px solid rgba(255,255,255,.15);
  position:relative;z-index:1;
}
.cd-days.urgent{background:rgba(207,35,51,.3);border-color:rgba(255,154,164,.4)}
.cd-days b{font-size:32px;font-weight:800;line-height:1;color:#ff9aa4;letter-spacing:-1px}
.cd-days span{font-size:10px;color:#c9d7f2;margin-top:2px}

/* === قائمة التدقيق قبل الزيارة === */
.checklist-card{
  background:#fff;border:1px solid var(--ln);border-radius:var(--r-md);
  padding:14px;margin-bottom:10px;position:relative;
  border-right:4px solid var(--em);transition:var(--t);
}
.checklist-card.urgent{border-right-color:var(--red)}
.checklist-card.done{border-right-color:var(--grn);background:linear-gradient(95deg,var(--grn1) 0%,#fff 50%)}
.checklist-card h4{
  font-size:13.5px;color:var(--ink);font-weight:700;
  margin-bottom:6px;display:flex;align-items:center;gap:8px;
}
.checklist-card .cl-time{
  font-size:10px;color:var(--mut);font-weight:700;
  background:var(--bg);padding:3px 8px;border-radius:var(--r-full);
  margin-inline-start:auto;
}
.checklist-card.urgent .cl-time{background:var(--red1);color:var(--red)}
.checklist-card.done .cl-time{background:var(--grn1);color:var(--grn-d)}
.cl-items{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.cl-item{
  display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--ink-l);
  cursor:pointer;padding:4px 6px;border-radius:var(--r-sm);transition:var(--t-fast);
}
.cl-item:hover{background:var(--bg)}
.cl-item.done{color:var(--grn-d)}
.cl-item.done .cl-text{text-decoration:line-through}
.cl-check{
  width:18px;height:18px;border-radius:5px;border:1.5px solid var(--ln);
  display:grid;place-items:center;flex:none;font-size:11px;color:#fff;
  transition:var(--t-fast);background:#fff;
}
.cl-item.done .cl-check{background:var(--grn);border-color:var(--grn)}

/* === بطاقة محاكاة المقابلة === */
.interview-card{
  background:linear-gradient(135deg,#fff,var(--bg-3));
  border:1px solid var(--ln);border-radius:var(--r-md);
  padding:16px;transition:var(--t);position:relative;overflow:hidden;
}
.interview-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.interview-card::before{
  content:'';position:absolute;top:0;right:0;width:60px;height:60px;
  background:radial-gradient(circle at 70% 30%,var(--em1),transparent 70%);
}
.interview-card .iv-icon{
  width:42px;height:42px;border-radius:var(--r-md);
  background:var(--em1);color:var(--em);
  display:grid;place-items:center;font-size:20px;margin-bottom:8px;
  position:relative;z-index:1;
}
.interview-card h4{font-size:14px;color:var(--ink);font-weight:700;margin-bottom:6px;position:relative;z-index:1}
.interview-card p{font-size:11.5px;color:var(--mut);line-height:1.6;position:relative;z-index:1}
.interview-card .iv-questions{
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--ln);
  position:relative;z-index:1;
}
.iv-q{
  font-size:11.5px;color:var(--ink-l);padding:4px 0;
  display:flex;align-items:flex-start;gap:6px;line-height:1.6;
}
.iv-q:before{content:'•';color:var(--au);font-weight:800;margin-top:1px}

/* === شريط الجاهزية المرئي === */
.readiness-meter{
  background:#fff;border:1px solid var(--ln);border-radius:var(--r-md);
  padding:16px;margin-bottom:14px;
}
.readiness-meter .rm-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;flex-wrap:wrap;gap:8px;
}
.readiness-meter .rm-title{font-size:13px;font-weight:700;color:var(--ink)}
.readiness-meter .rm-percent{font-size:24px;font-weight:800;color:var(--em);letter-spacing:-.5px}
.readiness-bar{
  height:24px;background:var(--bg);border-radius:var(--r-full);
  overflow:hidden;position:relative;border:1px solid var(--ln);
}
.readiness-bar .rb-fill{
  height:100%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--red) 0%,var(--amb) 50%,var(--grn) 100%);
  transition:width .8s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;
}
.readiness-bar .rb-fill::after{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(255,255,255,.25),transparent);
}
.readiness-bar .rb-marker{
  position:absolute;top:0;bottom:0;width:2px;background:var(--ink);
  opacity:.4;
}
.readiness-bar .rb-labels{
  display:flex;justify-content:space-between;
  font-size:9px;color:var(--mut);margin-top:4px;
}

/* === مؤشر مراحل الزيارة === */
.visit-stages{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;margin-bottom:14px;
}
.vs-card{
  background:#fff;border:1px solid var(--ln);border-radius:var(--r-md);
  padding:12px;position:relative;transition:var(--t);cursor:pointer;
}
.vs-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px);border-color:var(--em)}
.vs-card.active{background:linear-gradient(135deg,var(--em1),#fff);border-color:var(--em)}
.vs-card .vs-num{
  width:30px;height:30px;border-radius:50%;
  background:var(--bg);color:var(--mut);
  display:grid;place-items:center;font-weight:800;font-size:13px;
  margin-bottom:8px;
}
.vs-card.active .vs-num{background:var(--em);color:#fff}
.vs-card.done .vs-num{background:var(--grn);color:#fff}
.vs-card h5{font-size:12.5px;color:var(--ink);font-weight:700;margin-bottom:3px}
.vs-card p{font-size:10.5px;color:var(--mut);line-height:1.5}

/* === لوحة الإجراءات العاجلة === */
.urgent-actions{
  background:linear-gradient(95deg,var(--au1),#fff 60%);
  border:1px solid #f2c5ca;border-right:4px solid var(--au);
  border-radius:var(--r-md);padding:14px;margin-bottom:14px;
}
.urgent-actions h4{
  font-size:13px;color:var(--au-d);font-weight:700;
  margin-bottom:10px;display:flex;align-items:center;gap:6px;
}
.ua-item{
  display:flex;align-items:flex-start;gap:8px;
  padding:6px 0;font-size:12px;color:var(--ink);
  border-bottom:1px dashed rgba(242,197,202,.5);
}
.ua-item:last-child{border-bottom:none}
.ua-item .ua-icon{color:var(--au);font-size:14px;margin-top:1px}
.ua-item .ua-text{flex:1;line-height:1.6}
.ua-item .ua-action{
  font-size:10.5px;background:var(--au);color:#fff;
  padding:3px 10px;border-radius:var(--r-full);font-weight:700;
  text-decoration:none;transition:var(--t);flex:none;
}
.ua-item .ua-action:hover{background:var(--au-d)}

/* ============= التجاوب ============= */
#sidebarBackdrop{
  position:fixed;inset:0;background:rgba(8,18,48,.5);
  z-index:79;animation:fadeIn .2s;
}

@media(max-width:1100px){
  .app-layout{grid-template-columns:1fr}
  .sidebar{
    position:fixed;top:0;right:0;bottom:0;
    width:280px;transform:translateX(100%);
    transition:transform var(--t);
    border-left:none;border-right:3px solid var(--au);
  }
  .sidebar.open{transform:translateX(0)}
  .menu-btn{display:grid}
  .main-area{width:100%}
}

@media(max-width:900px){
  .tu-info{display:none}
  .hdr-actions{margin-inline-start:auto}
  .ring-wrap{display:none}
  .tb-title{font-size:16px}
}

@media(max-width:700px){
  .f2,.f3,.f4,.g2,.g3{grid-template-columns:1fr}
  .cw{padding:14px 14px 30px}
  .ph h2{font-size:17px}
  .hr2{padding:18px}
  .ti2 b{font-size:18px}
  .report-kpi .rk-value{font-size:22px}
  .qg{grid-template-columns:repeat(2,1fr)}
  .visit-timeline{flex-wrap:wrap}
  .vt-progress{flex-basis:100%;order:3}
  .tb-title{font-size:14px}
  .hdr-actions{gap:4px}
  .ib{width:32px;height:32px;font-size:13px}
  .countdown-banner{padding:14px}
  .cd-icon{width:48px;height:48px;font-size:22px}
  .cd-days b{font-size:26px}
  .visit-stages{grid-template-columns:1fr 1fr}
}

/* ============= الطباعة ============= */
@media print{
  body{background:#fff}
  .sidebar,.ft2,#to,#nd,#mroot,.menu-btn,.hdr-actions,#sidebarBackdrop{display:none!important}
  .app-layout{display:block}
  .cw{padding:0;max-width:100%}
  .cd{box-shadow:none;border:1px solid #ccc;page-break-inside:avoid}
  .main-area{display:block}
}

/* أنماط الطباعة ل PDF */
.print-doc{font-family:'IBM Plex Sans Arabic',sans-serif;color:#1b2735;font-size:12px;line-height:1.7}
.print-doc h1{font-size:18px;color:var(--em-d);margin:0 0 4px}
.print-doc h2{font-size:14px;color:var(--em);margin:14px 0 6px;border-right:4px solid var(--au);padding-right:8px}
.print-doc table{width:100%;border-collapse:collapse;margin:6px 0}
.print-doc th,.print-doc td{border:1px solid #b9c4d8;padding:6px 8px;text-align:right;font-size:11px}
.print-doc th{background:#e8eefb;color:var(--em-d)}
.print-doc .print-header{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--em);padding-bottom:10px;margin-bottom:14px}
.print-doc .print-footer{margin-top:30px;display:flex;gap:35px;border-top:2px solid var(--em);padding-top:8px}
.print-doc .sign-box{border-top:1.5px dotted #555;padding-top:5px;font-size:11px;min-width:140px;text-align:center}