@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@700&family=Tajawal:wght@400;500;700;900&display=swap');
:root{
  --green:#4A6350; --green-dark:#3D5240; --green-tint:#EEF3EC;
  --gold:#C9A227; --gold-soft:#F6EAD0; --cream:#FDFBF7; --ink:#2A2D26; --ink-soft:#6B7166;
  --line:#E7E2D4; --white:#FFFFFF; --danger:#B3492E; --radius:16px;
  --shadow:0 4px 16px rgba(61,82,64,0.06);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Tajawal',sans-serif;background:var(--cream);color:var(--ink);line-height:1.6;}
.display{font-family:'Amiri',serif;}
header.top{background:var(--white);border-bottom:1px solid var(--line);padding:16px 28px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:34px;}
.brand .ar{font-family:'Amiri',serif;font-weight:700;font-size:19px;color:var(--gold);}
.brand .en{font-size:10px;letter-spacing:2px;color:var(--green);font-weight:700;display:block;}
main{max-width:960px;margin:0 auto;padding:32px 20px 60px;}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:18px;box-shadow:var(--shadow);}
h1.page-title{font-family:'Amiri',serif;font-size:28px;color:var(--green-dark);margin-bottom:20px;}
label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:6px;margin-top:14px;}
input,select,textarea{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px;background:var(--white);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);}
.btn{display:inline-block;background:var(--green);color:var(--white);border:none;padding:12px 24px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;margin-top:16px;transition:transform .15s;text-decoration:none;}
.btn:hover{background:var(--green-dark);transform:translateY(-1px);}
.btn.gold{background:var(--gold);}
.btn.gold:hover{background:#B08F1F;}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);}
.msg{font-size:13.5px;padding:10px 14px;border-radius:10px;margin-top:14px;}
.msg.err{background:#FBEAE4;color:var(--danger);}
.msg.ok{background:var(--green-tint);color:var(--green);}
table{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin-top:10px;}
th,td{padding:12px 14px;text-align:right;font-size:13.5px;}
th{background:var(--green-tint);color:var(--green-dark);}
tbody tr:not(:last-child) td{border-bottom:1px solid var(--line);}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;}
.badge.ready{background:var(--green-tint);color:var(--green);}
.badge.notready{background:var(--gold-soft);color:#96721A;}
.badge.pending{background:#F1EFE8;color:var(--ink-soft);}
.tabs{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid var(--line);}
.tabs button{background:none;border:none;padding:12px 18px;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink-soft);cursor:pointer;border-bottom:3px solid transparent;}
.tabs button.active{color:var(--green-dark);border-bottom-color:var(--gold);}

/* ---------- شجرة تتبع المراحل ---------- */
.timeline{display:flex;flex-direction:column;}
.tl-item{display:flex;gap:12px;padding:8px 0 8px 0;position:relative;padding-right:4px;}
.tl-item:not(:last-child)::before{content:'';position:absolute;right:9px;top:24px;bottom:-2px;width:2px;background:var(--line);}
.tl-dot{width:14px;height:14px;border-radius:50%;background:var(--line);margin-top:3px;flex-shrink:0;border:2px solid var(--white);box-shadow:0 0 0 1px var(--line);}
.tl-item.done .tl-dot{background:var(--green);box-shadow:0 0 0 1px var(--green);}
.tl-item.active .tl-dot{background:var(--gold);box-shadow:0 0 0 1px var(--gold);}
.tl-text{font-size:13px;}
.tl-date{font-size:11px;color:var(--ink-soft);}
.tl-item.done .tl-text strong{color:var(--green-dark);}

/* ---------- تجاوب الجوال ---------- */
@media(max-width:600px){
  header.top{padding:12px 16px;flex-wrap:wrap;gap:10px;}
  main{padding:20px 14px 40px;}
  .card{padding:18px;}
  h1.page-title{font-size:22px;}
  table{display:block;overflow-x:auto;white-space:nowrap;}
  .tabs{overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;}
  main .card .btn:not(.ghost){width:100%;text-align:center;}
}