/* ============================================================
   حضور — ورقة الأنماط
   ============================================================ */

:root{
  --ink:#101B2A;
  --slate:#20344A;
  --steel:#3A5470;
  --line:#DCE2EA;
  --bg:#F0F3F7;
  --white:#FFFFFF;
  --muted:#78899E;
  --gold:#EDA02C;
  --gold-dark:#D88E1E;
  --green:#1A9A67;
  --green-soft:#E6F5EE;
  --red:#C1443B;
  --red-soft:#FAEAE9;
  --amber-soft:#FDF3E3;

  --mono:"SF Mono","Cascadia Mono","Roboto Mono",Consolas,monospace;
  --sans:"Segoe UI","Noto Sans Arabic","Helvetica Neue",Tahoma,sans-serif;

  --r:12px;
  --r-lg:16px;
  --shadow:0 1px 2px rgba(16,27,42,.05);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit}
button,input,select,textarea{font-family:inherit;font-size:1rem;color:inherit}
button{cursor:pointer;border:none;background:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ------------------------------------------------------ التخطيط */

.container{max-width:1000px;margin:0 auto;padding:0 22px}
.narrow{max-width:470px}
.page{padding:30px 0 70px}

.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row-tight{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap}

/* ------------------------------------------------------ الشريط */

.topbar{background:var(--ink);color:#fff}
.topbar .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;
}
.topbar .brand{font-weight:800;font-size:1.05rem;line-height:1.2}
.topbar .brand small{
  display:block;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);font-weight:700;
}
.nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.nav a{color:#A0B1C5;font-size:.88rem;text-decoration:none;transition:.15s}
.nav a:hover,.nav a.on{color:#fff}
.nav a.on{border-bottom:2px solid var(--gold);padding-bottom:2px}

/* ------------------------------------------------------ النصوص */

.eyebrow{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}
h1{font-size:1.55rem;font-weight:800;letter-spacing:-.02em;margin-top:6px}
h2{font-size:1.08rem;font-weight:800;margin-bottom:12px}
h3{font-size:.95rem;font-weight:800}
.sub{color:var(--muted);font-size:.9rem;margin-top:5px}
.page-head{margin-bottom:24px}

/* ------------------------------------------------------ البطاقات */

.card{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow);
}
.card-flat{padding:0;overflow:hidden}
.card-dark{
  background:var(--ink);color:#fff;border:none;
  border-radius:var(--r-lg);padding:22px;
}
.card-dark .eyebrow{color:var(--gold)}
.card-dark b{display:block;font-size:1.25rem;font-weight:800;margin-top:7px}
.card-dark small{color:#93A5BA;font-size:.83rem}

/* ------------------------------------------------------ الأزرار */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:#fff;border-radius:var(--r);
  padding:13px 22px;font-weight:700;font-size:.95rem;
  text-decoration:none;transition:.15s;white-space:nowrap;
}
.btn:hover{background:var(--slate)}
.btn:disabled{background:#B7C1CD;cursor:not-allowed}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-dark)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--bg)}
.btn-danger{background:transparent;color:var(--red);border:1px solid #EBC9C6}
.btn-danger:hover{background:var(--red-soft)}
.btn-sm{padding:9px 15px;font-size:.85rem;border-radius:9px}
.btn-block{width:100%}

/* ------------------------------------------------------ الحقول */

.field{margin-bottom:16px}
.field:last-of-type{margin-bottom:0}
.field label{
  display:block;font-size:.79rem;font-weight:700;
  color:var(--slate);margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--white);
}
.field input:focus,.field select:focus{border-color:var(--ink);outline:none}
.field .help{font-size:.78rem;color:var(--muted);margin-top:5px}
.grow{flex:1;min-width:200px;margin-bottom:0}

/* ------------------------------------------------------ التنبيهات */

.alert{
  padding:12px 16px;border-radius:var(--r);font-size:.9rem;
  font-weight:600;margin-bottom:16px;
}
.alert-error{background:var(--red-soft);color:var(--red);border:1px solid #EDCECB}
.alert-ok{background:var(--green-soft);color:#127453;border:1px solid #BFE5D4}
.alert-warn{background:var(--amber-soft);color:#8A5C0B;border:1px solid #F1DDB3}

/* ------------------------------------------------------ الجداول */

table{
  width:100%;border-collapse:collapse;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
th,td{padding:12px 16px;text-align:right;font-size:.9rem;
  border-bottom:1px solid var(--line)}
th{
  background:var(--bg);font-size:.71rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);font-weight:700;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FAFBFC}
.num{font-family:var(--mono);font-size:.85rem}
.table-wrap{overflow-x:auto;border-radius:var(--r-lg)}

/* ------------------------------------------------------ عناصر */

.pill{
  display:inline-block;padding:3px 10px;border-radius:20px;
  font-size:.74rem;font-weight:700;
}
.pill-green{background:var(--green-soft);color:#127453}
.pill-red{background:var(--red-soft);color:var(--red)}
.pill-gold{background:var(--amber-soft);color:#8A5C0B}
.pill-grey{background:var(--bg);color:var(--muted)}

.dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#4ADE80;margin-left:7px;animation:pulse 2s infinite;
}
@keyframes pulse{50%{opacity:.3}}

.empty{
  padding:30px;text-align:center;color:var(--muted);font-size:.9rem;
  border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--white);
}

.stat{display:flex;align-items:baseline;gap:12px}
.stat b{font-size:3rem;font-weight:800;line-height:1;letter-spacing:-.03em}
.stat span{color:var(--muted);font-size:.9rem}

.bar{height:7px;background:var(--line);border-radius:4px;overflow:hidden;
  min-width:90px}
.bar i{display:block;height:100%;background:var(--green);border-radius:4px}
.bar.low i{background:var(--red)}
.bar.mid i{background:var(--gold)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.grid-2{grid-template-columns:1fr}}

hr{border:none;border-top:1px solid var(--line);margin:22px 0}

/* ------------------------------------------------------ الحركة */

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}