:root{
  --navy:#1f3a5f; --navy-dark:#16293f; --navy-light:#2d5183;
  --bg:#f5f5f2; --surface:#ffffff; --surface-alt:#fafaf8;
  --border:#e2e0d9; --border-strong:#c9c6bc;
  --text:#22221f; --text-2:#5f5e5a; --text-3:#8a8880;
  --ok-bg:#e1f5ee; --ok-fg:#0f6e56;
  --warn-bg:#faeeda; --warn-fg:#854f0b;
  --err-bg:#fceaea; --err-fg:#a32d2d;
  --info-bg:#e6f1fb; --info-fg:#185fa5;
  --radius:8px;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:'Segoe UI',Tahoma,Arial,sans-serif;
  background:var(--bg); color:var(--text); direction:rtl; font-size:14px; line-height:1.7;
}
a{color:var(--navy); text-decoration:none;}
h1,h2,h3{font-weight:600; margin:0 0 12px;}
h1{font-size:20px;} h2{font-size:17px;} h3{font-size:15px;}

/* ---------- التخطيط ---------- */
.topbar{
  background:var(--navy); color:#fff; padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  position:sticky; top:0; z-index:50;
}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:600;}
.topbar .brand small{opacity:.75;font-weight:400;font-size:12px;}
.topbar nav{display:flex;gap:6px;flex-wrap:wrap;}
.topbar nav a{
  color:#e8eef6; padding:6px 12px; border-radius:var(--radius); font-size:13px;
}
.topbar nav a:hover,.topbar nav a.active{background:rgba(255,255,255,.15);}
.container{max-width:1200px;margin:0 auto;padding:20px;}
.page-head{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;margin-bottom:18px;}

/* ---------- البطاقات ---------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:16px 18px; margin-bottom:16px;
}
.grid{display:grid;gap:14px;}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}

.project-card{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:16px; cursor:pointer; transition:border-color .15s, transform .15s;
  display:flex; flex-direction:column; gap:6px;
}
.project-card:hover{border-color:var(--navy); transform:translateY(-2px);}
.project-card .code{font-size:11px;color:var(--text-3);letter-spacing:.5px;}
.project-card .name{font-size:15px;font-weight:600;}
.project-card .meta{font-size:12px;color:var(--text-2);}
.project-card .foot{
  border-top:1px solid var(--border); padding-top:8px; margin-top:6px;
  display:flex; justify-content:space-between; align-items:center; font-size:12px;
}

.stat{background:var(--surface-alt);border-radius:var(--radius);padding:12px 14px;}
.stat .label{font-size:12px;color:var(--text-2);}
.stat .value{font-size:22px;font-weight:600;margin-top:2px;}

/* ---------- الشارات ---------- */
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:600;}
.b-ok{background:var(--ok-bg);color:var(--ok-fg);}
.b-warn{background:var(--warn-bg);color:var(--warn-fg);}
.b-err{background:var(--err-bg);color:var(--err-fg);}
.b-info{background:var(--info-bg);color:var(--info-fg);}
.b-mute{background:#eeeee9;color:var(--text-2);}

/* ---------- النماذج ---------- */
label{display:block;font-size:12px;color:var(--text-2);margin-bottom:4px;}
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],select,textarea{
  width:100%; padding:8px 10px; border:1px solid var(--border-strong);
  border-radius:var(--radius); font-family:inherit; font-size:14px;
  background:#fff; color:var(--text);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 2px rgba(31,58,95,.12);
}
textarea{min-height:90px;resize:vertical;}
.field{margin-bottom:12px;}
.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}

button,.btn{
  padding:8px 18px; border-radius:var(--radius); border:1px solid var(--border-strong);
  background:#fff; color:var(--text); font-family:inherit; font-size:14px;
  cursor:pointer; transition:background .15s;
}
button:hover,.btn:hover{background:var(--surface-alt);}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn-primary:hover{background:var(--navy-dark);}
.btn-ok{background:var(--ok-fg);color:#fff;border-color:var(--ok-fg);}
.btn-err{background:var(--err-fg);color:#fff;border-color:var(--err-fg);}
.btn-sm{padding:4px 12px;font-size:12px;}
button:disabled{opacity:.5;cursor:not-allowed;}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;}

/* ---------- الجداول ---------- */
table.data{width:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
table.data th,table.data td{padding:9px 12px;text-align:right;
  border-bottom:1px solid var(--border);font-size:13px;}
table.data th{background:var(--surface-alt);font-weight:600;color:var(--text-2);font-size:12px;}
table.data tr:last-child td{border-bottom:none;}
table.data tbody tr:hover{background:var(--surface-alt);}
.table-wrap{overflow-x:auto;}

/* ---------- الشجرة ---------- */
.tree{list-style:none;padding:0;margin:0;}
.tree ul{list-style:none;margin:0;padding-right:18px;border-right:1px solid var(--border);}
.tree li{margin:0;}
.tree-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:6px;}
.tree-row:hover{background:var(--surface-alt);}
.tree-row .name{flex:1;font-size:13px;}
.tree-row .caret{cursor:pointer;width:16px;text-align:center;color:var(--text-3);
  user-select:none;font-size:11px;}
.tree-row .acts{display:flex;gap:4px;opacity:0;transition:opacity .15s;}
.tree-row:hover .acts{opacity:1;}

/* ---------- السجل الزمني ---------- */
.cycle-head{background:var(--surface-alt);border-right:3px solid var(--navy);
  padding:6px 12px;margin:16px 0 8px;font-weight:600;font-size:13px;border-radius:0 6px 6px 0;}
.hist{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.hist:last-child{border-bottom:none;}
.hist .dot{width:10px;height:10px;border-radius:50%;margin-top:7px;flex-shrink:0;}
.hist .body{flex:1;}
.hist .who{font-size:13px;font-weight:600;}
.hist .meta{font-size:11px;color:var(--text-3);}
.hist .note{font-size:13px;margin-top:4px;white-space:pre-wrap;
  background:var(--surface-alt);padding:8px 10px;border-radius:6px;}

/* ---------- الخطوات ---------- */
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;}
.step{flex:1;min-width:120px;padding:8px 10px;border:1px solid var(--border);
  border-radius:var(--radius);font-size:12px;background:var(--surface-alt);}
.step.done{background:var(--ok-bg);border-color:var(--ok-fg);color:var(--ok-fg);}
.step.current{background:var(--warn-bg);border-color:var(--warn-fg);color:var(--warn-fg);
  font-weight:600;}

/* ---------- متفرقات ---------- */
.msg{padding:10px 14px;border-radius:var(--radius);margin-bottom:12px;font-size:13px;}
.msg-ok{background:var(--ok-bg);color:var(--ok-fg);}
.msg-err{background:var(--err-bg);color:var(--err-fg);}
.msg-info{background:var(--info-bg);color:var(--info-fg);}
.msg-warn{background:var(--warn-bg);color:var(--warn-fg);}
.empty{text-align:center;padding:40px 20px;color:var(--text-3);font-size:13px;}
.muted{color:var(--text-3);font-size:12px;}
.hidden{display:none !important;}
.spinner{border:3px solid var(--border);border-top-color:var(--navy);border-radius:50%;
  width:26px;height:26px;animation:spin .8s linear infinite;margin:24px auto;}
@keyframes spin{to{transform:rotate(360deg);}}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;
  align-items:center;justify-content:center;z-index:100;padding:16px;}
.modal{background:var(--surface);border-radius:12px;padding:20px;
  max-width:640px;width:100%;max-height:90vh;overflow:auto;}
.modal h3{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);}

.perm-group{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;
  background:var(--surface);}
.perm-group>header{display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;cursor:pointer;background:var(--surface-alt);}
.perm-group>header .title{font-weight:600;font-size:13px;}
.perm-item{display:flex;justify-content:space-between;align-items:center;
  padding:8px 14px;border-top:1px dashed var(--border);flex-wrap:wrap;gap:8px;}
.perm-item .label{font-size:13px;flex:1;min-width:160px;}
.perm-actions{display:flex;gap:10px;flex-wrap:wrap;}
.perm-actions label{display:flex;align-items:center;gap:4px;font-size:12px;
  margin:0;color:var(--text);cursor:pointer;}

@media (max-width:640px){
  .container{padding:12px;}
  .topbar{padding:10px 12px;flex-wrap:wrap;}
  .card{padding:12px;}
}