/*
 * aq-design-system.css — أفكار القدرات
 * الطبقة الأساسية المشتركة لكل صفحات الإضافة (Design Tokens +
 * المكوّنات العامة القابلة لإعادة الاستخدام). أي صفحة تستدعي
 * aq_enqueue_design_system() يمكنها استخدام أصناف aq-ds-* مباشرة
 * دون إعادة تعريفها محليًا.
 *
 * لا شيء هنا خاص بصفحة معيّنة — هذا شرط أساسي: أي تعديل هنا يجب أن
 * يبقى صالحًا لأي صفحة أخرى تستخدمه لاحقًا (المراجعة، البحث،
 * أخطائي...)، لا لجدولي الذكي فقط.
 *
 * المرحلة الحالية (١): Button، Card، Input، Chip فقط.
 * مؤجَّل عمدًا للمرحلة القادمة: Badge، Checkbox المخصص، Tab.
 */

:root {
    /* ── الألوان — ثلاث طبقات دلالية ──────────────────────────────
       أساسي (Primary): للعناصر النشطة/الفعل الرئيسي فقط.
       ثانوي (Secondary): للأدوات المساعدة — أزرق سماوي مُصفّى، بعيد
       عمدًا عن الأخضر الدلالي (مكتمل) على عجلة الألوان لفصل هرمي واضح.
       دلالي (Success/Warning): لا يتغيّر أبدًا، ثابت لحالات المحتوى. */
    --aq-ds-color-primary:        #6C5CE7;
    --aq-ds-color-primary-deep:   #5B4FCF;
    --aq-ds-color-primary-soft:   #F5F3FE;
    --aq-ds-color-primary-border: #DCD6FA;

    --aq-ds-color-secondary:        #2E8FD6;
    --aq-ds-color-secondary-deep:   #1F6FAE;
    --aq-ds-color-secondary-soft:   #EAF4FC;
    --aq-ds-color-secondary-border: #C7E2F5;

    --aq-ds-color-success:        #16A34A;
    --aq-ds-color-success-deep:   #15803D;
    --aq-ds-color-success-soft:   #F0FBF4;
    --aq-ds-color-success-border: #C8ECD3;

    --aq-ds-color-warning:        #C2760D;
    --aq-ds-color-warning-deep:   #9A5B08;
    --aq-ds-color-warning-soft:   #FEF8EC;
    --aq-ds-color-warning-border: #F3DFAF;

    --aq-ds-ink:        #16182B;
    --aq-ds-ink-soft:   #5B5F73;
    --aq-ds-ink-muted:  #9498A8;
    --aq-ds-line:       #E9EAF1;
    --aq-ds-surface:    #FFFFFF;
    --aq-ds-surface-2:  #F8F9FC;

    /* ── نصف الأقطار — أربع قيم فقط في كل النظام، لا أكثر ──────────── */
    --aq-ds-radius-sm:   8px;
    --aq-ds-radius-md:   12px;
    --aq-ds-radius-lg:   16px;
    --aq-ds-radius-pill: 999px;

    /* ── المسافات — سلّم 4px موحّد ─────────────────────────────────── */
    --aq-ds-space-1: 4px;
    --aq-ds-space-2: 8px;
    --aq-ds-space-3: 12px;
    --aq-ds-space-4: 16px;
    --aq-ds-space-5: 20px;
    --aq-ds-space-6: 24px;
    --aq-ds-space-8: 32px;

    /* ── الظلال — وصفة واحدة محايدة، ووصفتان ملوّنتان حسب الدور ──── */
    --aq-ds-shadow-card:      0 1px 2px rgba(22,24,43,.05);
    --aq-ds-shadow-primary:   0 4px 12px rgba(108,92,231,.28);
    --aq-ds-shadow-secondary: 0 4px 12px rgba(46,143,214,.24);

    /* ── الحركة ──────────────────────────────────────────────────── */
    --aq-ds-ease: cubic-bezier(.4,0,.2,1);
    --aq-ds-transition-fast: .12s;
    --aq-ds-transition-base: .18s;

    --aq-ds-font: 'Tajawal', sans-serif;
}

@media (prefers-reduced-motion: reduce) {
    .aq-ds-btn, .aq-ds-chip, .aq-ds-card, .aq-ds-input {
        transition-duration: .01ms !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   Button — ثلاث درجات فقط: Primary / Secondary / Ghost
   ══════════════════════════════════════════════════════════════ */
.aq-ds-btn:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 7px;
    border: none;
    border-radius: var(--aq-ds-radius-sm);
    font-family: var(--aq-ds-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
    padding: 10px 16px;
    text-decoration: none;
    transition: background var(--aq-ds-transition-base) var(--aq-ds-ease),
                box-shadow var(--aq-ds-transition-base) var(--aq-ds-ease),
                color var(--aq-ds-transition-base) var(--aq-ds-ease),
                transform var(--aq-ds-transition-fast) var(--aq-ds-ease);
}
.aq-ds-btn:active { transform: scale(.98); }
.aq-ds-btn:focus-visible {
    outline: 2px solid var(--aq-ds-color-primary-deep);
    outline-offset: 2px;
}
.aq-ds-btn-block { width: 100%; }
.aq-ds-btn-pill  { border-radius: var(--aq-ds-radius-pill); }
.aq-ds-btn-sm    { padding: 6px 13px; font-size: 13px; }

.aq-ds-btn-primary {
    background: var(--aq-ds-color-primary);
    color: #fff !important;
    box-shadow: var(--aq-ds-shadow-primary);
}
.aq-ds-btn-primary:hover {
    background: var(--aq-ds-color-primary-deep);
    color: #fff !important;
}
.aq-ds-btn-primary:disabled {
    opacity: .55;
    cursor: default;
    box-shadow: none;
}

.aq-ds-btn-secondary {
    background: var(--aq-ds-color-secondary-soft);
    color: var(--aq-ds-color-secondary-deep) !important;
}
.aq-ds-btn-secondary:hover {
    background: var(--aq-ds-color-secondary-border);
    color: var(--aq-ds-color-secondary-deep) !important;
}
.aq-ds-btn-secondary:disabled {
    opacity: .55;
    cursor: default;
}

.aq-ds-btn-ghost {
    background: transparent;
    color: var(--aq-ds-ink-soft) !important;
    border: 1px solid var(--aq-ds-line);
}
.aq-ds-btn-ghost:hover {
    background: var(--aq-ds-surface-2);
    color: var(--aq-ds-ink) !important;
}

/* ══════════════════════════════════════════════════════════════
   Card — وصفة واحدة (حد + نصف قطر + ظل)، تُطبَّق دائمًا، لا عند
   hover فقط. الحالات الدلالية (اليوم/متأخر/مكتمل...) تبقى مسؤولية
   الصفحة نفسها كطبقة إضافية فوق هذه الوصفة.
   ══════════════════════════════════════════════════════════════ */
.aq-ds-card {
    background: var(--aq-ds-surface);
    border: 1px solid var(--aq-ds-line);
    border-radius: var(--aq-ds-radius-lg);
    box-shadow: var(--aq-ds-shadow-card);
    box-sizing: border-box;
    transition: border-color var(--aq-ds-transition-base) var(--aq-ds-ease),
                box-shadow var(--aq-ds-transition-base) var(--aq-ds-ease),
                background var(--aq-ds-transition-base) var(--aq-ds-ease);
}
.aq-ds-card-sm { border-radius: var(--aq-ds-radius-md); }

/* ══════════════════════════════════════════════════════════════
   Input — نص/تاريخ/أي حقل إدخال قياسي بنفس هوية الكبسولات تمامًا
   ══════════════════════════════════════════════════════════════ */
.aq-ds-input {
    font-family: var(--aq-ds-font);
    font-size: 13px;
    color: var(--aq-ds-ink);
    background: var(--aq-ds-surface);
    border: 1px solid var(--aq-ds-line);
    border-radius: var(--aq-ds-radius-sm);
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--aq-ds-transition-base) var(--aq-ds-ease),
                box-shadow var(--aq-ds-transition-base) var(--aq-ds-ease);
}
.aq-ds-input:hover { border-color: #D8DBE5; }
.aq-ds-input:focus-visible {
    outline: none;
    border-color: var(--aq-ds-color-primary);
    box-shadow: 0 0 0 3px var(--aq-ds-color-primary-soft);
}

/* ══════════════════════════════════════════════════════════════
   Chip — عنصر اختيار نصي (Radio/Checkbox مموَّه) بحالتين فقط:
   عادي ومفعّل. التفعيل عبر :has(input:checked) مع فallback صنف
   .is-checked يُبدّله JS للمتصفحات القديمة.
   ══════════════════════════════════════════════════════════════ */
.aq-ds-chip:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border-radius: var(--aq-ds-radius-pill);
    border: 1px solid var(--aq-ds-line);
    font-family: var(--aq-ds-font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--aq-ds-ink-soft) !important;
    cursor: pointer;
    box-sizing: border-box;
    transition: background var(--aq-ds-transition-base) var(--aq-ds-ease),
                border-color var(--aq-ds-transition-base) var(--aq-ds-ease),
                color var(--aq-ds-transition-base) var(--aq-ds-ease);
}
.aq-ds-chip:hover {
    background: var(--aq-ds-surface-2);
    color: var(--aq-ds-ink) !important;
}
.aq-ds-chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.aq-ds-chip:has(input:checked),
.aq-ds-chip.is-checked {
    background: var(--aq-ds-color-primary-soft);
    border-color: var(--aq-ds-color-primary-border);
    color: var(--aq-ds-color-primary-deep) !important;
    font-weight: 700;
}
.aq-ds-chip:focus-within {
    outline: 2px solid var(--aq-ds-color-primary);
    outline-offset: 1px;
}
.aq-ds-chip-block {
    width: 100%;
    justify-content: center;
}