/* نظام تكاتف — تصميم زجاجي فاخر v2 (عمق + فخامة · RTL) */
:root{
  --green:#1FA45C; --green2:#34C77A; --greenDeep:#136B3A; --greenGlow:rgba(31,164,92,.45);
  --gold:#E6C25A; --gold2:#F4D77E; --goldSoft:rgba(230,194,90,.12); --goldLine:rgba(230,194,90,.4);
  --red:#F0685A; --redSoft:rgba(240,104,90,.14);
  --yellow:#EBC04A; --yellowSoft:rgba(235,192,74,.15);
  --blue:#5BB0EE; --blueSoft:rgba(91,176,238,.14);
  --text:#F5F3EC; --textDim:#AEB6B3; --textMuted:#6A726E;
  --glass:rgba(255,255,255,.05); --glass2:rgba(255,255,255,.08); --glassHi:rgba(255,255,255,.14);
  --glassBorder:rgba(255,255,255,.09); --glassBorder2:rgba(255,255,255,.16);
  --blur:saturate(160%) blur(22px);
  --sh1:0 2px 8px rgba(0,0,0,.25);
  --sh2:0 12px 40px rgba(0,0,0,.35);
  --sh3:0 20px 60px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);
  font-family:'Tajawal','Cairo',system-ui,'Segoe UI',sans-serif;font-size:14px;min-height:100vh;
  background:
    radial-gradient(1100px 700px at 8% -8%, rgba(31,164,92,.22), transparent 55%),
    radial-gradient(900px 700px at 100% 8%, rgba(52,199,122,.12), transparent 50%),
    radial-gradient(1000px 800px at 95% 108%, rgba(230,194,90,.13), transparent 55%),
    radial-gradient(700px 500px at 50% 50%, rgba(255,255,255,.015), transparent 60%),
    linear-gradient(165deg, #0C1611 0%, #090C0B 50%, #0A0F0C 100%);
  background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);background-size:3px 3px;opacity:.5}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--glass2),var(--glass));border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--glassHi)}

.layout{display:flex;min-height:100vh;position:relative;z-index:1}

/* السايدبار */
.sidebar{width:258px;position:fixed;top:0;right:0;bottom:0;overflow-y:auto;z-index:10;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-left:1px solid var(--glassBorder);box-shadow:-8px 0 40px rgba(0,0,0,.25);padding:0 0 30px}
.brand{padding:22px 20px 18px;display:flex;align-items:center;gap:13px;
  border-bottom:1px solid var(--glassBorder);margin-bottom:6px;position:relative}
.brand::after{content:"";position:absolute;bottom:-1px;right:20px;left:20px;height:1px;
  background:linear-gradient(90deg,transparent,var(--goldLine),transparent)}
.brand .logo{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-weight:900;color:#0B130F;font-size:21px;background:linear-gradient(135deg,var(--gold2),var(--gold));
  box-shadow:0 10px 26px rgba(230,194,90,.4),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 6px rgba(0,0,0,.15)}
.brand .t1{font-weight:900;font-size:18px;letter-spacing:.5px}
.brand .t2{font-size:11px;color:var(--gold);font-weight:700;letter-spacing:.3px}
.nav-group{padding:12px 12px 0}
.nav-group .gt{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;
  cursor:pointer;font-family:inherit;font-size:10px;color:var(--textMuted);letter-spacing:1.5px;
  padding:6px 12px 8px;text-transform:uppercase;font-weight:800;text-align:right}
.nav-group .gt:hover{color:var(--textDim)}
.nav-group .gt .chev{margin-inline-start:auto;font-size:12px;transition:transform .22s ease;opacity:.7}
.nav-group.collapsed .gt .chev{transform:rotate(-90deg)}
.nav-group .nav-items{overflow:hidden;max-height:520px;transition:max-height .26s ease}
.nav-group.collapsed .nav-items{max-height:0}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:12px;
  color:var(--textDim);font-size:13.5px;font-weight:600;margin-bottom:3px;transition:.18s;
  border:1px solid transparent;white-space:nowrap;overflow:hidden;position:relative}
.nav-item:hover{background:var(--glass2);color:var(--text);transform:translateX(-2px)}
.nav-item.active{background:linear-gradient(90deg,rgba(230,194,90,.18),rgba(255,255,255,.03));
  color:#fff;border:1px solid var(--goldLine);box-shadow:0 6px 18px rgba(0,0,0,.25),inset 0 1px 0 var(--glassHi)}
.nav-item.active::before{content:"";position:absolute;right:0;top:18%;bottom:18%;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--gold2),var(--gold));box-shadow:0 0 10px var(--gold)}
.nav-item .ic{font-size:14px;width:18px;text-align:center;color:var(--gold)}
.nav-item .lbl{transition:opacity .15s ease}
.nav-item .badge{margin-inline-start:auto;background:var(--redSoft);color:var(--red);
  font-size:10px;font-weight:800;padding:1px 8px;border-radius:20px}

/* المحتوى */
.main{flex:1;margin-right:258px;min-width:0;transition:width .26s ease,margin .26s ease}
.topbar{height:70px;display:flex;align-items:center;padding:0 30px;gap:18px;position:sticky;top:0;z-index:5;
  background:linear-gradient(180deg,rgba(20,28,23,.82),rgba(20,28,23,.55));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--glassBorder);box-shadow:0 6px 24px rgba(0,0,0,.18)}
.menu-btn{background:var(--glass2);color:var(--text);border:1px solid var(--glassBorder2);
  width:40px;height:40px;border-radius:12px;font-size:16px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;backdrop-filter:var(--blur);transition:.15s;box-shadow:var(--sh1)}
.menu-btn:hover{background:var(--glassHi);transform:translateY(-1px)}
.topbar .pt{font-size:20px;font-weight:900;letter-spacing:.3px;
  background:linear-gradient(180deg,#fff,#d7ddd8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.topbar .right{margin-inline-start:auto;display:flex;align-items:center;gap:14px}
.avatar{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-weight:900;color:#fff;font-size:14px;box-shadow:0 6px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.content{padding:28px 30px;max-width:1500px}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{position:relative;overflow:hidden;border-radius:20px;padding:22px 24px;
  background:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glassBorder2);box-shadow:var(--sh2),inset 0 1px 0 var(--glassHi);transition:.22s}
.kpi:hover{transform:translateY(-4px);box-shadow:var(--sh3),inset 0 1px 0 var(--glassHi)}
.kpi::after{content:"";position:absolute;top:-40%;left:-10%;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,var(--greenGlow),transparent 70%);opacity:.6;filter:blur(6px)}
.kpi.gold::after{background:radial-gradient(circle,rgba(230,194,90,.4),transparent 70%)}
.kpi.red::after{background:radial-gradient(circle,rgba(240,104,90,.38),transparent 70%)}
.kpi.blue::after{background:radial-gradient(circle,rgba(91,176,238,.38),transparent 70%)}
.kpi .label{font-size:12px;color:var(--textDim);margin-bottom:10px;font-weight:600;position:relative}
.kpi .val{font-size:29px;font-weight:900;letter-spacing:.4px;position:relative;
  background:linear-gradient(180deg,#fff,#cfd6d1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kpi .unit{font-size:12px;color:var(--gold);font-weight:800;-webkit-text-fill-color:var(--gold)}

/* البطاقات */
.card{border-radius:20px;padding:22px 24px;margin-bottom:22px;position:relative;
  background:linear-gradient(155deg,rgba(255,255,255,.058),rgba(255,255,255,.028));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glassBorder);box-shadow:var(--sh2),inset 0 1px 0 rgba(255,255,255,.06)}
.card .ct{font-size:15px;font-weight:800;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.card .ct::before{content:"";width:4px;height:18px;border-radius:4px;
  background:linear-gradient(180deg,var(--gold2),var(--gold));box-shadow:0 0 10px rgba(230,194,90,.5)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* الجداول */
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
table.tbl th{text-align:right;color:var(--gold);font-weight:800;font-size:11px;padding:13px 14px;
  letter-spacing:.4px;text-transform:uppercase;background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--goldLine)}
table.tbl th:first-child{border-radius:0 10px 0 0}
table.tbl th:last-child{border-radius:10px 0 0 0}
table.tbl td{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
table.tbl tbody tr{transition:.14s}
table.tbl tbody tr:hover td{background:rgba(230,194,90,.06)}
table.tbl tbody tr:hover td:last-child{box-shadow:inset 3px 0 0 var(--gold)}
table.tbl tr:last-child td{border-bottom:none}
.badge{display:inline-block;padding:3px 11px;border-radius:20px;font-size:11px;font-weight:800;
  border:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.b-green{background:linear-gradient(135deg,rgba(52,199,122,.2),rgba(52,199,122,.08));color:#5FD896;border-color:rgba(52,199,122,.35)}
.b-red{background:linear-gradient(135deg,rgba(240,104,90,.2),rgba(240,104,90,.08));color:#F58a7d;border-color:rgba(240,104,90,.35)}
.b-gold{background:linear-gradient(135deg,rgba(230,194,90,.2),rgba(230,194,90,.08));color:var(--gold2);border-color:var(--goldLine)}
.b-blue{background:linear-gradient(135deg,rgba(91,176,238,.2),rgba(91,176,238,.08));color:#86C4F2;border-color:rgba(91,176,238,.35)}
.b-yellow{background:var(--yellowSoft);color:var(--yellow);border-color:rgba(235,192,74,.35)}
.b-mute{background:rgba(255,255,255,.06);color:var(--textDim);border-color:rgba(255,255,255,.1)}

.bar{height:8px;background:rgba(255,255,255,.08);border-radius:8px;overflow:hidden;min-width:90px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.bar>span{display:block;height:100%;border-radius:8px;
  background:linear-gradient(90deg,var(--greenDeep),var(--green2));box-shadow:0 0 12px var(--greenGlow)}

.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:12px;padding:10px 18px;
  font-weight:800;font-size:13px;cursor:pointer;font-family:inherit;color:#0B130F;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  box-shadow:0 8px 20px rgba(230,194,90,.32),inset 0 1px 0 rgba(255,255,255,.5);transition:.16s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(230,194,90,.42),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.ghost{background:var(--glass2);color:var(--text);border:1px solid var(--glassBorder2);box-shadow:var(--sh1);backdrop-filter:var(--blur)}
.btn.ghost:hover{background:var(--glassHi)}

.filters{display:flex;gap:10px;flex-wrap:wrap}
.filters input,.filters select{background:var(--glass);border:1px solid var(--glassBorder2);color:var(--text);
  border-radius:12px;padding:10px 14px;font-family:inherit;font-size:13px;min-width:150px;
  backdrop-filter:var(--blur);box-shadow:var(--sh1)}
.filters input::placeholder{color:var(--textMuted)}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--goldLine);box-shadow:0 0 0 3px var(--goldSoft)}
.filters option{background:#0E1512;color:var(--text)}

.ph{display:flex;align-items:center;justify-content:center;height:64vh;text-align:center}
.ph .ic{font-size:70px;margin-bottom:18px;color:var(--gold);opacity:.7;filter:drop-shadow(0 8px 22px rgba(230,194,90,.35))}
.ph .t{font-size:22px;font-weight:900;margin-bottom:8px}
.ph .d{font-size:13px;color:var(--textDim);max-width:380px;line-height:1.9;margin:auto}

/* الدخول */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1}
.login-card{width:404px;border-radius:26px;padding:44px 38px;
  background:linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glassBorder2);box-shadow:var(--sh3),inset 0 1px 0 var(--glassHi)}
.login-card .logo{width:68px;height:68px;border-radius:19px;margin:0 auto 20px;
  background:linear-gradient(135deg,var(--gold2),var(--gold));display:flex;align-items:center;
  justify-content:center;font-weight:900;color:#0B130F;font-size:30px;
  box-shadow:0 14px 32px rgba(230,194,90,.45),inset 0 1px 0 rgba(255,255,255,.6)}
.login-card h1{text-align:center;font-size:24px;margin:0 0 4px}
.login-card .sub{text-align:center;color:var(--gold);font-size:12px;margin-bottom:30px;font-weight:700}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;color:var(--textDim);margin-bottom:7px;font-weight:600}
.field input{width:100%;background:var(--glass);border:1px solid var(--glassBorder2);color:var(--text);
  border-radius:13px;padding:13px 15px;font-family:inherit;font-size:14px;backdrop-filter:var(--blur)}
.field input:focus{outline:none;border-color:var(--goldLine);box-shadow:0 0 0 3px var(--goldSoft)}
.alert{background:var(--redSoft);color:#F58a7d;border:1px solid rgba(240,104,90,.3);border-radius:12px;padding:11px 14px;font-size:12.5px;margin-bottom:14px}
.msg{border-radius:12px;padding:11px 15px;font-size:13px;margin-bottom:12px;border:1px solid var(--glassBorder);
  background:var(--glass2);backdrop-filter:var(--blur);box-shadow:var(--sh1)}
.msg.success{color:#5FD896;border-color:rgba(52,199,122,.3)} .msg.error{color:#F58a7d;border-color:rgba(240,104,90,.3)}
.msg.info{color:#86C4F2} .msg.warning{color:var(--yellow)}
.muted{color:var(--textDim)} .gold{color:var(--gold);font-weight:700} .gold:hover{color:var(--gold2)}
.up{color:#F58a7d;font-weight:700} .down{color:#5FD896;font-weight:700}

/* السايدبار المطوي */
.sb-collapsed .sidebar{width:78px}
.sb-collapsed .main{margin-right:78px}
.sb-collapsed .sidebar .brand{justify-content:center;padding-inline:0}
.sb-collapsed .sidebar .brand-txt{display:none}
.sb-collapsed .sidebar .nav-group .gt{opacity:0;height:0;padding:0;overflow:hidden}
.sb-collapsed .sidebar .nav-group{padding-top:8px}
.sb-collapsed .sidebar .nav-group .nav-items{max-height:none !important}
.sb-collapsed .sidebar .nav-group .gt .chev{display:none}
.sb-collapsed .sidebar .nav-item{justify-content:center;padding-inline:0}
.sb-collapsed .sidebar .nav-item .lbl{opacity:0;width:0;display:none}
.sb-collapsed .sidebar .nav-item .badge{display:none}
@media(max-width:760px){.hide-sm{display:none}}

/* نماذج */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:680px){.form-grid{grid-template-columns:1fr}}
.form-grid .field{margin-bottom:0}
.form-grid input[type=text],.form-grid input[type=number],.form-grid input[type=date],
.form-grid input[type=password],.form-grid input[type=email],.form-grid select,.form-grid textarea{
  width:100%;background:var(--glass);border:1px solid var(--glassBorder2);color:var(--text);
  border-radius:12px;padding:11px 13px;font-family:inherit;font-size:13.5px;backdrop-filter:var(--blur)}
.form-grid textarea{min-height:80px;resize:vertical}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:none;border-color:var(--goldLine);box-shadow:0 0 0 3px var(--goldSoft)}
.form-grid select option{background:#0E1512;color:var(--text)}
.row-actions{display:flex;gap:10px;justify-content:flex-start}
.row-actions a{font-size:12px;color:var(--textDim);font-weight:700;transition:.14s}
.row-actions a:hover{color:var(--gold)} .row-actions a.del:hover{color:var(--red)}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.sections-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.sec-item{display:flex;align-items:center;gap:8px;flex-direction:row-reverse;justify-content:flex-end;
  background:var(--glass);border:1px solid var(--glassBorder);border-radius:10px;padding:8px 11px;
  font-size:12.5px;cursor:pointer;backdrop-filter:var(--blur)}
.sec-item:hover{border-color:var(--goldLine)}

/* مراحل قابلة للطي + مهامها */
details.phase{border:1px solid var(--glassBorder);border-radius:14px;margin-bottom:10px;
  background:var(--glass);overflow:hidden}
details.phase>summary{list-style:none;cursor:pointer;padding:13px 16px;display:flex;align-items:center;gap:12px;transition:.15s}
details.phase>summary::-webkit-details-marker{display:none}
details.phase>summary::before{content:"▸";color:var(--gold);font-size:12px;transition:transform .2s}
details.phase[open]>summary::before{transform:rotate(90deg)}
details.phase>summary:hover{background:rgba(255,255,255,.03)}
details.phase[open]>summary{border-bottom:1px solid var(--glassBorder)}
.phase-body{padding:14px 16px}

/* بورتال العميل — هيرو فاخر */
.portal-hero{text-align:center;padding:50px 20px 30px;position:relative}
.portal-hero h1{font-size:38px;font-weight:900;margin:6px 0 22px;
  background:linear-gradient(180deg,#fff,#d7ddd8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.portal-progress{max-width:520px;margin:0 auto 10px;display:flex;align-items:center;gap:18px}
.pp-track{flex:1;height:14px;border-radius:10px;background:rgba(255,255,255,.08);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.pp-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--greenDeep),var(--green2));box-shadow:0 0 16px var(--greenGlow)}
.pp-num{font-size:34px;font-weight:900;background:linear-gradient(180deg,var(--gold2),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pp-num span{font-size:16px}