/* =====================================================================
   components.css — المكونات المشتركة لصفحات الأنظمة: الأزرار والبطاقات والشارات (شكل واحد لكل الأنظمة).

   ترتيب <head>: ds.css ← hub-shell.css ← components.css ← <style> الصفحة.
   القاعدة: زر ممتلئ واحد فقط في الشاشة (الأساسي). الباقي أزرار هادئة.
   الأزرار:
     .btn              زر أساسي ممتلئ بلون الهوية (و .btn-primary اسم مرادف له)
     .btn-ghost        زر ثانوي بإطار رمادي
     .btn-soft         زر هادئ بخلفية كحلية خفيفة
     .btn-sm           حجم صغير (يُضاف مع أي نوع)
     .btn-danger       زر حذف: خلفية حمراء خفيفة وكتابة حمراء (و .btn-red اسم مرادف له)
     .btn-danger-solid زر حذف ممتلئ — داخل رسالة تأكيد الحذف فقط
     .btn-green        (اسم قديم) صار مثل الزر الأساسي؛ و .btn-ok اسم مرادف له
   الشارات (حالة): .st + واحد من .st-ok .st-bad .st-warn .st-info .st-neutral
   الصفحة تضيف أنواعها الخاصة فوق .btn (مثل أحجام إضافية) دون إعادة تعريف الشكل الأساسي.
   ===================================================================== */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;font-size:14px;font-weight:700;line-height:1.2;padding:10px 16px;border-radius:10px;border:1.5px solid transparent;background:var(--brand);color:var(--on-brand);cursor:pointer;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{background:var(--brand-dark)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-dark)}

.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--hover);border-color:var(--control);color:var(--ink)}

.btn-soft{background:var(--brand-soft);color:var(--brand-strong)}
.btn-soft:hover{background:var(--brand-soft-hover)}

/* لون الحذف ثابت في كل الأنظمة */
.btn-danger,.btn-red{background:var(--bad-soft);color:var(--bad-text);border-color:var(--bad-line)}
.btn-danger:hover,.btn-red:hover{background:var(--bad-bg);border-color:var(--bad)}
.btn-danger-solid{background:var(--danger-solid);color:var(--on-danger)}
.btn-danger-solid:hover{background:var(--danger-solid);filter:brightness(1.08)}

/* ألوان أقل: زر «تأكيد» الأخضر صار هو الزر الأساسي الكحلي */
.btn-green,.btn-ok{background:var(--brand);color:var(--on-brand)}
.btn-green:hover,.btn-ok:hover{background:var(--brand-dark)}

.btn-sm{padding:7px 12px;font-size:13px;border-radius:8px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-card)}

/* شارة حالة: لون خفيف + نص واضح (أضف أيقونة قبل النص إن أمكن) */
.st{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap}
.st-ok{background:var(--ok-bg);color:var(--ok-text)}
.st-bad{background:var(--bad-bg);color:var(--bad-text)}
.st-warn{background:var(--warn-bg);color:var(--warn-text)}
.st-info{background:var(--info-bg);color:var(--info-text)}
.st-neutral{background:var(--neutral-bg);color:var(--neutral-text)}