:root{
  --g:#0f8a6b; --g-dark:#0a6b53; --g-soft:#e6f4ef;
  --navy:#1e3a5f; --gold:#bc9d59;
  --ink:#0f172a; --mut:#64748b; --line:#e2e8f0; --bg:#f6f8f7; --card:#ffffff;
  --danger:#b91c1c; --warn:#b45309; --ok:#15803d;
  --r:14px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{
  font-family:Arial,Tahoma,sans-serif; font-size:15px; line-height:1.7;
  color:var(--ink); background:var(--bg);
  display:flex; flex-direction:column; min-height:100dvh;
}
.top{
  background:linear-gradient(135deg,var(--g-dark),var(--navy));
  color:#fff; padding:18px 5vw; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:14px}
.logo{height:52px; width:auto; background:#fff; border-radius:10px; padding:6px}
.top h1{margin:0; font-size:22px; font-weight:800}
.top .sub{margin:2px 0 0; opacity:.85; font-size:13px}
.clock{font-variant-numeric:tabular-nums; font-size:14px; opacity:.9; white-space:nowrap}
main{flex:1; width:min(1180px,92vw); margin:0 auto; padding:26px 0 40px}
.intro p{margin:0 0 18px; color:var(--mut)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px 16px 14px;
  text-decoration:none; color:inherit; position:relative; min-height:150px; display:flex; flex-direction:column; gap:8px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(15,23,42,.08); border-color:var(--g)}
.card.disabled{opacity:.62; cursor:not-allowed}
.card.disabled:hover{transform:none; box-shadow:none; border-color:var(--line)}
.icon{width:46px; height:46px; border-radius:12px; background:var(--g-soft); color:var(--g); display:grid; place-items:center; font-size:22px}
.card h2{margin:0; font-size:16px; font-weight:800}
.card p{margin:0; color:var(--mut); font-size:13px; flex:1}
.badge{position:absolute; top:12px; left:12px; font-size:11px; padding:2px 9px; border-radius:99px; border:1px solid var(--line); background:#f8fafc; color:var(--mut)}
.badge.live{background:#ecfdf5; color:var(--ok); border-color:#bbf7d0}
.badge.soon{background:#fffbeb; color:var(--warn); border-color:#fde68a}
.badge.off{background:#fef2f2; color:var(--danger); border-color:#fecaca}
.host{font-size:11px; color:#94a3b8; direction:ltr; text-align:left; font-family:Arial,Tahoma,sans-serif}
.note{margin-top:22px; background:#fffbeb; border-right:4px solid var(--gold); padding:10px 14px; border-radius:8px; color:#78350f; font-size:14px}
.tools-bar{margin-top:28px; padding-top:18px; border-top:1px dashed var(--line); display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:center}
.tool-chip{display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:inherit; padding:8px 14px; border-radius:12px; border:1px solid transparent; transition:background .12s ease, border-color .12s ease}
.tool-chip:hover{background:var(--g-soft); border-color:var(--line)}
.tool-chip .icon{width:32px; height:32px; border-radius:9px; font-size:16px}
.tool-chip h2{margin:0; font-size:12px; font-weight:600; color:var(--mut)}
footer{border-top:1px solid var(--line); background:#fff; color:var(--mut); font-size:12.5px; padding:12px 5vw; display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.sep{opacity:.5}
@media (max-width:640px){
  .top{flex-direction:column; align-items:flex-start}
  .clock{display:none}
  .grid{grid-template-columns:1fr 1fr}
  .card{min-height:130px}
}
@media (max-width:420px){ .grid{grid-template-columns:1fr} }

/* ---- gateway additions ---- */
.user{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px}
.user .who{opacity:.95}
.user .no{font-variant-numeric:tabular-nums; opacity:.75; margin-inline-start:4px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:10px; padding:9px 16px; font:inherit; font-weight:700; cursor:pointer; text-decoration:none}
.btn:hover{border-color:var(--g)}
.btn.primary{background:var(--g); border-color:var(--g); color:#fff}
.btn.primary:hover{background:var(--g-dark)}
.btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.45); padding:6px 12px; font-size:13px}
.btn.small{padding:4px 10px; font-size:12.5px}
.btn.danger{color:var(--danger); border-color:#fecaca}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn.block{width:100%}
.auth{flex:1; display:grid; place-items:center; padding:30px 16px}
.panel{background:#fff; border:1px solid var(--line); border-radius:18px; width:min(440px,100%); padding:28px 26px; box-shadow:0 12px 32px rgba(15,23,42,.06)}
.panel h2{margin:0 0 4px; font-size:20px; color:var(--navy)}
.panel .lead{margin:0 0 18px; color:var(--mut); font-size:14px}
.digits{display:flex; gap:10px; justify-content:center; direction:ltr; margin:8px 0 14px}
.digits input{width:56px; height:62px; text-align:center; font-size:28px; font-weight:800; border:2px solid var(--line); border-radius:12px;
  font-family:Arial,Tahoma,sans-serif; color:var(--navy); background:#fbfdfc; outline:none}
.digits input:focus{border-color:var(--g); box-shadow:0 0 0 4px var(--g-soft)}
.digits.six input{width:46px; height:56px; font-size:24px}
.who-card{background:var(--g-soft); border:1px solid #c5e6db; border-radius:12px; padding:12px 14px; margin-bottom:14px}
.who-card b{display:block; font-size:16px; color:var(--navy)}
.who-card span{display:block; font-size:13px; color:var(--mut); direction:ltr; text-align:right}
.or{display:flex; align-items:center; gap:10px; color:var(--mut); font-size:13px; margin:18px 0}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--line)}
.err{background:#fef2f2; color:var(--danger); border:1px solid #fecaca; border-radius:10px; padding:8px 12px; font-size:13.5px; margin:0 0 12px}
.ok{background:#ecfdf5; color:var(--ok); border:1px solid #bbf7d0; border-radius:10px; padding:8px 12px; font-size:13.5px; margin:0 0 12px}
.muted{color:var(--mut); font-size:13px}
.center{text-align:center}
.greet{font-size:22px; font-weight:800; color:var(--navy); margin:0}
.greet small{display:block; font-size:14px; font-weight:400; color:var(--gold); margin-bottom:4px}
.resend{margin-top:14px; display:flex; justify-content:space-between; align-items:center; font-size:13px}
.linkbtn{background:none; border:0; color:var(--g); font:inherit; cursor:pointer; padding:0; text-decoration:underline}
.linkbtn:disabled{color:var(--mut); text-decoration:none; cursor:default}
.gicon{width:18px; height:18px}
/* admin */
.tabs{display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:16px}
.tabs button{border:0; background:none; padding:10px 14px; font:inherit; font-weight:700; color:var(--mut); cursor:pointer; border-bottom:3px solid transparent}
.tabs button.on{color:var(--g); border-bottom-color:var(--g)}
.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.toolbar input,.toolbar select,.form input,.form select,table input,table select{font:inherit; font-size:13px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:#fff}
.form{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:12px}
.form label{display:flex; flex-direction:column; font-size:12px; color:var(--mut); gap:3px}
.tablewrap{overflow:auto; background:#fff; border:1px solid var(--line); border-radius:12px}
table.dense{border-collapse:collapse; width:100%; font-size:13px}
table.dense th,table.dense td{padding:6px 8px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap}
table.dense th{background:#f8fafc; color:var(--navy); position:sticky; top:0}
table.dense td.ltr{direction:ltr; text-align:left}
table.dense input{width:100%; min-width:70px}
.pill{font-size:11px; padding:1px 8px; border-radius:99px; border:1px solid var(--line)}
.pill.on{background:#ecfdf5; color:var(--ok); border-color:#bbf7d0}
.pill.off{background:#fef2f2; color:var(--danger); border-color:#fecaca}
.cell{display:flex; gap:8px; justify-content:center; font-size:11.5px}
textarea{width:100%; min-height:120px; font:13px Arial,Tahoma,sans-serif; border:1px solid var(--line); border-radius:8px; padding:8px; direction:ltr}
.toast{position:fixed; bottom:18px; left:18px; background:var(--navy); color:#fff; padding:10px 16px; border-radius:10px; font-size:14px; box-shadow:0 8px 22px rgba(0,0,0,.18)}
.toast.bad{background:var(--danger)}
@media (max-width:640px){ .digits input{width:48px; height:56px} .digits.six input{width:40px; height:50px; font-size:20px} }

/* header shield (admins only) */
.btn.shield{gap:6px}
.btn.shield svg{flex:none}
/* permissions tree */
.toolbar label.inline{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--mut)}
.toolbar .spacer{flex:1}
.pill.warn{background:#fffbeb; color:var(--warn); border-color:#fde68a}
.pill.warn.on{background:#ecfdf5; color:var(--ok); border-color:#bbf7d0}
.pill.kind{background:#f1f5f9; color:var(--mut)}
.muted.small{font-size:11.5px}
.tree{display:grid; gap:12px}
.psys{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 14px}
.psys h3{margin:0 0 6px; font-size:15px; color:var(--navy)}
.pgroup{margin:2px 0}
.prow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:4px 6px; border-radius:8px}
.prow:hover,.pleaf:hover{background:#f8fafc}
.ptoggle{border:0; background:none; color:var(--mut); font:inherit; font-size:12px; cursor:pointer; padding:0 2px; transition:transform .12s; transform:rotate(90deg)}
.pgroup.closed > .prow .ptoggle{transform:none}
.pkids{margin-inline-start:22px; border-inline-start:2px solid var(--line); padding-inline-start:10px}
.pleaf{padding:3px 6px; border-radius:8px}
.pnode{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; cursor:pointer}
.pnode input{width:16px; height:16px; accent-color:var(--g); margin:0}
.pnode input:disabled{cursor:not-allowed}
.plabel{font-weight:700}
.kind-system .plabel{color:var(--navy)}
.kind-action .plabel{font-weight:600}
.pdesc{color:var(--mut); font-size:12px; flex-basis:100%; margin-inline-start:24px}
.pbranch{display:inline-flex; gap:6px; margin-inline-start:auto}
.tree [hidden]{display:none}
@media (max-width:640px){ .pbranch{margin-inline-start:0; flex-basis:100%} }

/* ===== «المعلومات التقنية» (admin #infra) ===== */
.subtabs{display:inline-flex; gap:4px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:3px}
.subtabs button{border:0; background:none; font:inherit; font-size:13px; padding:6px 12px; border-radius:8px; cursor:pointer; color:var(--mut)}
.subtabs button.on{background:var(--g-soft); color:var(--g-dark); font-weight:700}
.infra{display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:14px; align-items:start}
.infra.full{grid-template-columns:1fr}
.infra.full .ipanel{display:none}
.imain{min-width:0}
.ipanel{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; position:sticky; top:12px; max-height:calc(100dvh - 24px); overflow:auto; font-size:13.5px}
.ipanel h3{margin:0; font-size:15px; color:var(--navy); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
.ipanel h4{margin:14px 0 6px; font-size:13px; color:var(--g-dark); border-bottom:1px solid var(--line); padding-bottom:3px}
.ihead{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.ihead .spacer{flex:1}
.idot{display:inline-block; width:10px; height:10px; border-radius:50%; background:#94a3b8; flex:none; box-shadow:0 0 0 2px #fff}
.idot.up{background:#16a34a} .idot.down{background:#dc2626} .idot.unknown{background:#94a3b8}
.inode{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; border:0; background:none; font:inherit; cursor:pointer; padding:3px 6px; border-radius:8px; text-align:right}
.inode:hover{background:#f8fafc} .inode.sel{background:var(--g-soft); outline:1px solid #bbe7d6}
.iicon{font-size:14px}
.ialerts{margin:0 0 8px; padding:0; list-style:none; display:grid; gap:4px}
.ialerts li{padding:5px 10px; border-radius:8px; font-size:12.5px; background:#fffbeb; color:#78350f; border-right:3px solid var(--warn)}
.ialerts li.danger{background:#fef2f2; color:#7f1d1d; border-right-color:var(--danger)}
.iinfo{margin:0; display:grid; gap:4px}
.ikv{display:grid; grid-template-columns:110px 1fr; gap:8px; align-items:start}
.ikv dt{color:var(--mut); font-size:12px; margin:0} .ikv dd{margin:0; min-width:0; word-break:break-word}
.ikv dd.ltr,.ltr{direction:ltr; text-align:left; unicode-bidi:isolate}
.ibar{position:relative; height:14px; background:#f1f5f9; border-radius:99px; overflow:hidden; min-width:120px}
.ibar-fill{height:100%; background:#16a34a; border-radius:99px; transition:width .3s}
.ibar.warn .ibar-fill{background:#d97706} .ibar.bad .ibar-fill{background:#dc2626}
.ibar-txt{position:absolute; inset:0; display:grid; place-items:center; font-size:10.5px; color:var(--ink); mix-blend-mode:multiply}
.ires-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px}
.icard{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:13.5px}
.icard.off{opacity:.6}
.icard h3{margin:0; font-size:15px; color:var(--navy)}
.icard h4.small{margin:12px 0 4px; font-size:12px; color:var(--mut); font-weight:600}
.ispark-wrap{background:#f8fafc; border-radius:8px; padding:4px}
.ispark{display:block; width:100%; height:auto}
.qlm-overlay{position:fixed; inset:0; background:rgba(15,23,42,.55); display:grid; place-items:center; z-index:80; padding:3vh 3vw}
.qlm-box{background:#fff; width:min(1600px,97vw); height:95vh; border-radius:16px; border:3px solid var(--gold); box-shadow:0 24px 70px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:hidden}
.qlm-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px; background:var(--g-soft); border-bottom:1px solid var(--line)}
.qlm-head b{color:var(--navy); font-size:15px}
.qlm-frame{flex:1; width:100%; border:0}
.idisks{display:grid; gap:6px}
.idisk{display:grid; grid-template-columns:90px 1fr auto; gap:8px; align-items:center; font-size:12.5px}
.isvcs{display:flex; flex-wrap:wrap; gap:4px; direction:ltr}
.isvcs .pill{font-family:Arial,Tahoma,sans-serif; font-size:10.5px}
.ilist{margin:0; padding:0 14px 0 0; display:grid; gap:4px}
.ilist.small{font-size:12px; color:var(--mut)}
button.link{border:0; background:none; font:inherit; color:var(--g-dark); cursor:pointer; padding:0; text-decoration:underline dotted}
/* map */
.imap-wrap{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px}
.imap-scroll{overflow:auto; direction:ltr}
.imap{max-width:100%; height:auto; font-family:inherit}
.imap .in rect{fill:#f8fafc; stroke:#cbd5e1; stroke-width:1.2; transition:stroke .12s}
.imap .in:hover rect,.imap .in:focus rect{stroke:var(--g); stroke-width:2; outline:none}
.imap .in.sel rect{fill:var(--g-soft); stroke:var(--g); stroke-width:2}
.imap .in.ext rect{stroke-dasharray:4 3; fill:#fafafa}
.imap .in{cursor:pointer}
.imap .iname{font-size:12.5px; font-weight:700; fill:var(--ink); direction:rtl}
.imap .ikind{font-size:10.5px; fill:var(--mut); direction:rtl}
.imap .idot-svg{fill:#94a3b8} .imap .in.up .idot-svg{fill:#16a34a} .imap .in.down .idot-svg{fill:#dc2626}
.imap .ialert{fill:#dc2626} .imap .ialert.warn{fill:#d97706} .imap .ialert-n{font-size:10px; font-weight:700; fill:#fff}
.imap .ilbl{font-size:10px; fill:var(--mut); direction:rtl; paint-order:stroke; stroke:#fff; stroke-width:3px}
.ilegend{display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; font-size:12px; color:var(--mut); align-items:center}
.ilegend span{display:inline-flex; align-items:center; gap:6px}
.iline{display:inline-block; width:26px; border-top:2px solid #0f8a6b}
/* modal */
.ioverlay{position:fixed; inset:0; background:rgba(15,23,42,.45); display:grid; place-items:center; z-index:50; padding:16px}
.imodal{background:#fff; border-radius:14px; width:min(520px,100%); max-height:92dvh; overflow:auto; padding:14px 16px; box-shadow:0 20px 50px rgba(0,0,0,.25)}
.imodal.wide{width:min(860px,100%)}
.imodal-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.imodal-head h3{margin:0; font-size:16px; color:var(--navy)}
.iform{margin-bottom:0}
.iform .span2{grid-column:1 / -1}
.iform textarea{min-height:64px}
.iform label.inline{flex-direction:row; align-items:center; gap:6px}
.isecret .istep{margin-top:10px}
.isecret .digits{display:flex; gap:8px; justify-content:center; direction:ltr; margin:10px 0}
.isecret .digits input{width:52px; height:58px; text-align:center; font-size:24px; border:1px solid var(--line); border-radius:10px}
.isecret .err{color:var(--danger); font-size:13px}
.ireveal{display:grid; gap:10px}
.ivalue{display:inline-block; background:#0f172a; color:#e2e8f0; padding:6px 10px; border-radius:8px; font-size:14px; word-break:break-all; max-width:100%; user-select:all}
@media (max-width:900px){ .infra{grid-template-columns:1fr} .ipanel{position:static; max-height:none} .ikv{grid-template-columns:90px 1fr} }

/* بطاقة صغيرة قليلة البروز (الروابط السريعة) */
.card.compact{padding:12px 14px;opacity:.85;border-style:dashed}.card.compact .icon{font-size:22px;width:40px;height:40px}.card.compact h2{font-size:15px}.card.compact p{display:none}.card.compact:hover{opacity:1}

/* شريط التاريخ والتوقيتات */
.datebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 18px;padding:12px 16px;border:1px solid var(--line,#e5e7eb);border-radius:14px;background:var(--panel,#fff)}
.datebar .today{font-weight:600;font-size:15px}
.datebar .zones{display:flex;flex-wrap:wrap;gap:8px}
.datebar .zone{font-variant-numeric:tabular-nums;font-size:13px;padding:6px 10px;border-radius:999px;background:#f1f5f4;color:#334155}
.datebar .zone.mine{background:#0f8a6b;color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(15,138,107,.25)}

/* صورة الموظف وشارات الجلسة */
.who{display:flex;align-items:center;gap:10px}
.who .avatar{width:38px;height:38px;border-radius:50%;background:#0f8a6b;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;overflow:hidden;flex:none}
.who .avatar img{width:100%;height:100%;object-fit:cover}
.who .who-text{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.who .badges{display:flex;flex-wrap:wrap;gap:6px}
.who .badge-time{font-size:11px;padding:2px 8px;border-radius:999px;background:#eef6f3;color:#0f6b55;font-variant-numeric:tabular-nums}
/* الخط الموحد: Arial في كل الأجزاء */
html,body,button,input,select,textarea{font-family:Arial,Tahoma,sans-serif}

/* اسم الموظف بخط مميز */
.who b#uname{font-size:18px;font-weight:800;color:#c8a24a;letter-spacing:.2px;text-shadow:0 1px 0 rgba(0,0,0,.08)}
.who .no{color:rgba(255,255,255,.72);font-size:12px}

/* ---- أزرار الرأس (placement = header، مثل «بوابتي») ---- */
.headlinks{display:inline-flex; gap:6px; align-items:center}
.btn.ghost.headlink{padding:5px 10px; gap:6px; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.45)}
.btn.ghost.headlink:hover{background:rgba(255,255,255,.18); border-color:var(--gold)}
.btn.ghost.headlink .hl-icon{font-size:16px; line-height:1}
.btn.ghost.headlink .hl-text{font-size:12.5px; font-weight:700}
@media (max-width:640px){ .btn.ghost.headlink .hl-text{display:none} .btn.ghost.headlink{padding:5px 8px} }

/* AI Monitoring Stats and Charts */
.stats-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:12px 0}
.stat-card{background:linear-gradient(135deg,#f8fafc 0%,#fff 100%); border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:8px; text-align:center}
.stat-card .stat-label{font-size:12px; color:var(--mut); font-weight:600; text-transform:capitalize}
.stat-card .stat-value{font-size:28px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums}
.stat-card .stat-value.on{color:var(--ok)}
.stat-card .stat-value.off{color:var(--danger)}
.stat-card .stat-value.warn{color:var(--warn)}
.trend-chart{background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; margin:12px 0}
.trend-chart h4{margin:0 0 12px}
.chart-bars{display:flex; align-items:flex-end; justify-content:space-between; gap:4px; height:160px; background:#f8fafc; padding:12px 8px; border-radius:8px}
.chart-bar-group{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; flex:1; min-width:0}
.chart-bar{width:100%; background:linear-gradient(180deg,var(--g) 0%,var(--g-dark) 100%); border-radius:4px 4px 0 0; min-height:2px; transition:background .2s; position:relative}
.chart-bar:hover{background:linear-gradient(180deg,var(--g-dark) 0%,var(--navy) 100%); box-shadow:0 2px 6px rgba(15,138,107,.15)}
.chart-label{font-size:11px; color:var(--mut); text-align:center; white-space:nowrap; width:100%; overflow:hidden; text-overflow:ellipsis; direction:ltr}
.monitoring-detail{background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; margin:12px 0}
.scard{transition:all .12s} .scard.disabled{opacity:.5}
.span2{grid-column:1 / -1}

/* ---- مركز الإشعارات: الجرس في الرأس، القائمة المنسدلة، شارات البطاقات ---- */
.bell-wrap{position:relative}
.btn.bell{position:relative; padding:6px 10px}
.bell-badge{position:absolute; top:-6px; inset-inline-start:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--danger); color:#fff; font-size:11px; font-weight:800; line-height:18px; text-align:center; font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.bell-menu{position:absolute; top:calc(100% + 8px); inset-inline-start:0; width:min(360px,92vw); background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:14px; box-shadow:0 14px 36px rgba(15,23,42,.18); z-index:50; overflow:hidden; text-align:start}
.bell-head{display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); font-size:14px}
.bell-list{max-height:min(420px,60vh); overflow:auto}
.bell-list .muted,.bell-list .err{padding:14px; margin:0}
.bell-item{display:flex; flex-direction:column; gap:3px; padding:10px 14px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; font-size:13px; border-inline-start:3px solid transparent}
.bell-item:hover{background:#f8fafc}
.bell-item.unread{background:#f3faf7; border-inline-start-color:var(--g)}
.bell-item.sev-warn.unread{border-inline-start-color:var(--warn)}
.bell-item.sev-urgent.unread{border-inline-start-color:var(--danger)}
.bell-item b{font-size:13.5px}
.bell-item small{color:var(--mut); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.bell-top{display:flex; justify-content:space-between; font-size:11.5px; color:var(--mut)}
.bell-all{display:block; text-align:center; padding:10px; font-weight:700; color:var(--g); text-decoration:none; background:#f8fafc}
.bell-all:hover{background:var(--g-soft)}
.tile-badge{position:absolute; top:-8px; inset-inline-start:-8px; min-width:24px; height:24px; padding:0 7px; border-radius:99px; background:var(--danger); color:#fff; font-size:12px; font-weight:800; line-height:24px; text-align:center; font-variant-numeric:tabular-nums; box-shadow:0 2px 8px rgba(185,28,28,.35)}
.pill.sev.warn{background:#fffbeb; color:var(--warn); border-color:#fde68a}
.pill.sev.urgent{background:#fef2f2; color:var(--danger); border-color:#fecaca}
.pill.sev.info{background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe}
.pill.exp-ok{background:#ecfdf5; color:var(--ok); border-color:#bbf7d0}
.pill.exp-expiring{background:#fffbeb; color:var(--warn); border-color:#fde68a}
.pill.exp-expired{background:#fef2f2; color:var(--danger); border-color:#fecaca}
.pill.exp-none{background:#f1f5f9; color:var(--mut)}
.linkbtn{border:0; background:none; color:var(--g); font:inherit; font-size:13px; font-weight:700; cursor:pointer; padding:0}

/* ---- صفحة الإشعارات ---- */
.nwrap{max-width:900px; margin:0 auto}
.nday{margin:18px 0 8px; font-size:15px; color:var(--navy); font-weight:800; display:flex; align-items:center; gap:10px}
.nday::after{content:""; flex:1; height:1px; background:var(--line)}
.nitem{display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px; cursor:pointer; border-inline-start:4px solid var(--line)}
.nitem:hover{border-color:var(--g)}
.nitem.unread{background:#f3faf7; border-inline-start-color:var(--g)}
.nitem.sev-warn{border-inline-start-color:#fde68a}
.nitem.sev-warn.unread{border-inline-start-color:var(--warn)}
.nitem.sev-urgent{border-inline-start-color:#fecaca}
.nitem.sev-urgent.unread{border-inline-start-color:var(--danger)}
.nitem .nicon{width:38px; height:38px; border-radius:10px; background:var(--g-soft); display:grid; place-items:center; font-size:18px; flex:none}
.nitem .nbody{flex:1; min-width:0}
.nitem .nbody b{display:block; font-size:14.5px}
.nitem .nbody p{margin:2px 0 0; color:var(--mut); font-size:13px; line-height:1.6}
.nitem .nmeta{display:flex; gap:8px; flex-wrap:wrap; font-size:11.5px; color:var(--mut); margin-top:4px; align-items:center}
.nitem .ndot{width:9px; height:9px; border-radius:50%; background:var(--g); flex:none; margin-top:6px}
.nitem:not(.unread) .ndot{visibility:hidden}

/* ---- بيانات المنشأة ---- */
.cwrap{max-width:1180px; margin:0 auto}
.calerts{background:#fff7ed; border:1px solid #fed7aa; border-radius:12px; padding:10px 14px; margin-bottom:14px; font-size:13.5px}
.calerts ul{margin:6px 0 0; padding-inline-start:18px}
.cgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
.ccard{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px}
.ccard h3{margin:0 0 8px; font-size:15px; color:var(--navy)}
.ckv{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:13.5px; margin:0}
.ckv dt{color:var(--mut); white-space:nowrap}
.ckv dd{margin:0; word-break:break-word}
.ckv dd.ltr{direction:ltr; text-align:left; font-family:Arial,Tahoma,sans-serif; font-size:13px}
.ckv dd.empty{color:#cbd5e1}
.chead{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.chead .spacer{flex:1}
.csharebar{display:flex; height:22px; border-radius:99px; overflow:hidden; background:#f1f5f9; border:1px solid var(--line); margin:8px 0 14px}
.csharebar span{display:grid; place-items:center; font-size:11px; color:#fff; font-weight:700; white-space:nowrap; overflow:hidden}
.cform{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; background:#fff; border:1px dashed var(--g); border-radius:14px; padding:14px; margin-bottom:14px}
.cform label{display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--mut)}
.cform input,.cform select,.cform textarea{font:inherit; font-size:13px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:#fff}
.cform textarea{min-height:70px; direction:rtl; font-family:inherit}
.cform .span2{grid-column:1/-1}
.cform .acts{grid-column:1/-1; display:flex; gap:8px; justify-content:flex-start}
.cform h4{grid-column:1/-1; margin:4px 0 0; font-size:13.5px; color:var(--navy)}
table.dense td.wrap{white-space:normal; min-width:160px}
.cver{background:#f8fafc}
.cver td{padding:0 !important}
.cver table{font-size:12.5px; margin:0}
.cver table td,.cver table th{padding:5px 10px}
.cdoc-title{display:flex; align-items:center; gap:8px}
.cempty{padding:20px; text-align:center; color:var(--mut)}
@media (max-width:640px){ .bell-menu{inset-inline-start:auto; inset-inline-end:-40px} }

/* ---- الروابط السريعة: بطاقات مصنّفة، أيقونة الموقع، إحصاءات، أيقونات الإدارة عند التحويم ---- */
.ql-wrap{max-width:1180px; margin:0 auto}
.ql-toolbar input[type=search]{flex:1; min-width:220px; padding:9px 12px; border-radius:10px}
.ql-top{background:linear-gradient(135deg,#f3faf7,#fff); border:1px solid #cfe9df; border-radius:14px; padding:12px 16px; margin-bottom:14px}
.ql-top h2{margin:0 0 8px; font-size:15px; color:var(--g-dark)}
.ql-toplist{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.ql-toplist li{display:grid; grid-template-columns:minmax(220px,1fr) minmax(80px,2fr) auto; align-items:center; gap:12px; font-size:13.5px}
.ql-toplist a{display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; min-width:0}
.ql-toplist a:hover b{color:var(--g)}
.ql-rank{width:20px; height:20px; border-radius:50%; background:var(--gold); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; flex:none}
.ql-topname{display:flex; flex-direction:column; min-width:0; line-height:1.3}
.ql-topname small{color:var(--mut); font-size:11px}
.ql-topbar{height:8px; background:#e8f0ec; border-radius:99px; overflow:hidden}
.ql-topbar span{display:block; height:100%; background:linear-gradient(90deg,var(--g),var(--gold)); border-radius:99px}
.ql-topn{font-variant-numeric:tabular-nums; color:var(--g-dark); white-space:nowrap; font-size:12.5px}
.ql-cat{margin:0 0 18px}
.ql-cathead{display:flex; align-items:center; gap:10px; width:100%; border:0; background:none; padding:6px 2px; cursor:pointer; font:inherit; color:inherit; text-align:start; border-bottom:2px solid var(--g-soft); margin-bottom:10px}
.ql-cathead h2{margin:0; font-size:16px; font-weight:800; color:var(--g-dark)}
.ql-cathead:hover h2{color:var(--g)}
.ql-catn{min-width:22px; height:22px; padding:0 7px; border-radius:99px; background:var(--g-soft); color:var(--g-dark); font-size:12px; font-weight:800; display:grid; place-items:center; font-variant-numeric:tabular-nums}
.ql-chev{color:var(--mut); font-size:13px; transition:transform .15s}
.ql-cat.closed .ql-chev{transform:rotate(-90deg)}
.ql-cat.closed .ql-grid{display:none}
.ql-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px}
.ql-card{position:relative; display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto; gap:4px 12px; padding:14px 14px 10px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); text-decoration:none; color:inherit; transition:transform .12s, box-shadow .12s, border-color .12s}
.ql-card:hover{transform:translateY(-2px); border-color:var(--g); box-shadow:0 8px 22px rgba(15,23,42,.08)}
.ql-card.pinned{border-color:#e7d7b0; background:linear-gradient(180deg,#fffdf6,#fff)}
.ql-ico{width:40px; height:40px; border-radius:10px; background:var(--g-soft); display:grid; place-items:center; overflow:hidden; grid-row:1}
.ql-ico img{width:28px; height:28px; object-fit:contain}
.ql-ico b{color:var(--g); font-size:18px}
.ql-body{display:flex; flex-direction:column; gap:2px; min-width:0; grid-column:2}
.ql-body b{font-size:14.5px; line-height:1.4}
.ql-card:hover .ql-body b{color:var(--g)}
.ql-host{direction:ltr; text-align:left; font-size:11px; color:#94a3b8; font-family:Arial,Tahoma,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ql-notes{color:var(--mut); font-size:12px; line-height:1.5}
.ql-pin{position:absolute; top:8px; inset-inline-start:10px; color:var(--gold); font-size:15px}
.ql-stats{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11.5px; color:var(--mut); border-top:1px dashed var(--line); padding-top:7px; margin-top:4px; font-variant-numeric:tabular-nums}
.ql-stats b{color:var(--g-dark)}
.ql-acts{position:absolute; top:8px; inset-inline-end:8px; display:flex; gap:4px; opacity:0; transition:opacity .12s}
.ql-card:hover .ql-acts,.ql-card:focus-within .ql-acts{opacity:1}
.ql-ib{width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:14px; display:grid; place-items:center; color:var(--navy); padding:0}
.ql-ib:hover{border-color:var(--g); color:var(--g)}
.ql-ib.danger:hover{border-color:#fecaca; color:var(--danger)}
.ql-check{justify-content:flex-end}
.ql-check span{display:inline-flex; align-items:center; gap:6px; color:var(--ink); font-size:13px}
.ql-overlay{position:fixed; inset:0; background:rgba(15,23,42,.45); display:grid; place-items:center; z-index:60; padding:16px}
.ql-modal{background:#fff; border-radius:16px; width:min(720px,100%); max-height:85vh; overflow:auto; padding:16px 18px; box-shadow:0 20px 50px rgba(0,0,0,.25)}
.ql-modal-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px}
.ql-modal-head h3{margin:0; font-size:16px; color:var(--navy)}
@media (max-width:640px){ .ql-toplist li{grid-template-columns:1fr auto} .ql-topbar{display:none} .ql-acts{opacity:1} }

/* ---- «إعدادات النظام» (/settings): شبكة أقسام بأيقونات، مسار، نماذج ---- */
.swrap{max-width:1180px; margin:0 auto}
.sbread{display:flex; align-items:center; gap:8px; margin:0 0 14px; font-size:14px; color:var(--mut)}
.sbread a{color:var(--g); text-decoration:none; font-weight:700}
.sbread b{color:var(--navy)}
.sgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px}
.scard{position:relative; display:flex; flex-direction:column; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px 16px 14px; min-height:150px; text-decoration:none; color:inherit; transition:transform .12s, box-shadow .12s, border-color .12s}
.scard:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(15,23,42,.08); border-color:var(--g)}
.scard.disabled{opacity:.6; cursor:not-allowed}
.scard.disabled:hover{transform:none; box-shadow:none; border-color:var(--line)}
.scard .sicon{width:46px; height:46px; border-radius:12px; background:var(--g-soft); color:var(--g); display:grid; place-items:center; font-size:22px}
.scard h2{margin:0; font-size:16px; font-weight:800; color:var(--navy)}
.scard p{margin:0; color:var(--mut); font-size:13px; flex:1}
.scard .pill{align-self:flex-start}
.stitle{margin:18px 0 8px; font-size:15px; color:var(--navy)}
.form .span2{grid-column:1/-1}
.form label.inline{flex-direction:row; align-items:center; gap:6px; font-size:13px; color:var(--ink)}
.form textarea{direction:ltr; min-height:64px; font-family:Arial,Tahoma,sans-serif}
.form .toolbar{margin:0}
.colorpair{display:flex; gap:6px; align-items:center}
.colorpair input[type=color]{width:36px; height:30px; padding:0; border:1px solid var(--line); border-radius:8px; background:#fff}
.bprev{display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:12px; color:#fff; background:linear-gradient(135deg,var(--pn,#1e3a5f),var(--pg,#0f8a6b))}
.bprev img{height:44px; background:#fff; border-radius:8px; padding:5px}
.bprev b{display:block; font-size:17px}
.bprev small{opacity:.85; color:var(--po,#bc9d59)}
table.dense td.center{text-align:center}
code.ltr{direction:ltr; unicode-bidi:isolate; font-family:Arial,Tahoma,sans-serif; font-size:12px; background:#f1f5f9; padding:1px 6px; border-radius:6px}
.imodal h4{margin:14px 0 6px; font-size:13.5px; color:var(--g-dark)}
@media (max-width:640px){ .sgrid{grid-template-columns:1fr 1fr} .scard{min-height:130px} }

/* ---- الروابط السريعة: قائمة بأعمدة لكل تصنيف (Arial 13px، صفوف 40px، رأس ثابت، تظليل متناوب) ---- */
.ql-tablewrap{border-radius:12px; overflow:auto; max-height:70vh}
table.ql-table{font-family:Arial,'Segoe UI',Tahoma,sans-serif; font-size:13px; width:100%}
table.ql-table th{position:sticky; top:0; z-index:1; background:#f1f5f4; color:var(--navy); font-weight:800; padding:8px 10px; border-bottom:2px solid #d9e6e0; white-space:nowrap}
table.ql-table td{padding:2px 10px; height:40px; vertical-align:middle; border-bottom:1px solid #eef2f0; white-space:nowrap}
table.ql-table tbody tr:nth-child(even){background:#fafcfb}
table.ql-table tbody tr:hover{background:#f0f8f5}
table.ql-table tbody tr.pinned{background:#fffdf4}
table.ql-table tbody tr.pinned:hover{background:#fff8e1}
table.ql-table tbody tr.pri-critical td.ql-c-link{box-shadow:inset 4px 0 0 var(--danger)}
table.ql-table tbody tr.pri-important td.ql-c-link{box-shadow:inset 4px 0 0 var(--gold)}
.ql-title{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:inherit; max-width:360px}
.ql-title:hover b{color:var(--g)}
.ql-title .ql-ico{width:26px; height:26px; border-radius:7px; background:var(--g-soft); display:grid; place-items:center; overflow:hidden; flex:none}
.ql-title .ql-ico img{width:18px; height:18px; object-fit:contain}
.ql-title .ql-ico b{color:var(--g); font-size:13px}
.ql-tt{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.ql-tt b{font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:300px}
.ql-tt .ql-host{font-size:10.5px}
.ql-title .ql-pin{position:static; font-size:14px; color:var(--gold)}
.ql-c-notes{white-space:normal !important; max-width:260px; min-width:140px; color:#334155; font-size:12.5px}
.ql-notes2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; max-height:34px}
.ql-who{display:inline-flex; align-items:baseline; gap:6px; line-height:1.2; white-space:nowrap}
.ql-who b{font-weight:700; font-size:12.5px}
.ql-who small{color:var(--mut); font-size:11px}
.ql-c-n{text-align:center !important}
.ql-count{display:inline-block; min-width:28px; padding:2px 8px; border-radius:99px; background:var(--g-soft); color:var(--g-dark); font-weight:800; font-variant-numeric:tabular-nums; font-size:12px}
.ql-c-acts .ql-acts{position:static; opacity:1; display:inline-flex; gap:3px}
.ql-ib{width:26px; height:26px; font-size:13px; text-decoration:none; line-height:1}
.ql-ib.on{color:var(--gold); border-color:#e7d7b0}
.ql-ib:disabled{opacity:.35; cursor:not-allowed}
.pill.pri-normal{background:#f1f5f9; color:var(--mut)}
.pill.pri-important{background:#fffbeb; color:var(--warn); border-color:#fde68a}
.pill.pri-critical{background:#fef2f2; color:var(--danger); border-color:#fecaca}
.ql-form{margin:0; border:0; padding:0}
.ql-form .span2{grid-column:1/-1}
.ql-form .span2 label{display:flex}
@media (max-width:900px){ table.ql-table td.ql-c-notes{max-width:160px} .ql-title{max-width:220px} .ql-tt b{max-width:180px} }

/* بيانات المنشأة: معاينة ملف المستند (صورة / PDF) */
.cfile{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap}
.cfile a{text-decoration:none}
.cpreview{position:fixed; inset:0; background:rgba(15,23,42,.6); display:flex; align-items:center; justify-content:center; padding:16px; z-index:60}
.cpreview-box{background:#fff; border-radius:14px; width:min(1100px,100%); height:min(92dvh,900px); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.3)}
.cpreview-head{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line); font-size:13.5px}
.cpreview-box iframe{flex:1; border:0; width:100%; background:#525659}
.cpreview-box img{flex:1; min-height:0; object-fit:contain; width:100%; background:#f8fafc}
.cform input[type=file]{padding:6px}
.who-card{text-align:center}
.who-card span{text-align:center}

/* فوتر البوابة: التوقيتات + حقوق النشر */
.pfoot{position:fixed; bottom:0; inset-inline:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:6px 18px; min-height:38px; background:#fff; border-top:1px solid #dfe7e4; font-size:12px; color:#64748b}
.pfoot .zones{display:flex; gap:6px; flex-wrap:wrap; margin:0; padding:0}
.pfoot .zone{font-size:12px; padding:2px 9px; border-radius:999px; background:#f1f5f4; color:#334155; box-shadow:none; font-variant-numeric:tabular-nums}
.pfoot .zone.mine{background:#0f8a6b; color:#fff; font-weight:700; box-shadow:none}
.pfoot .legal{display:flex; gap:10px; align-items:center}
.pfoot .ver{color:#94a3b8}
body[data-page="portal"] main{padding-bottom:56px}
@media (max-width:640px){.pfoot{justify-content:center}.pfoot .legal{font-size:11px}}
.cnotes{white-space:normal; max-width:520px; min-width:260px; line-height:1.55; margin-top:3px}
.cdoc-title{flex-wrap:wrap}