/* ============================================
   نظام الأزرار الموحدة - متوافق مع جميع الثيمات
   Unified Buttons System - Theme Compatible
   ============================================ */

/* متغيرات الأزرار الأساسية */
:root {
    /* ألوان الأزرار */
    --btn-primary-bg: var(--primary-color, #5600a4);
    --btn-primary-hover: var(--primary-hover, #4a228b);
    --btn-primary-text: #fff;

    --btn-secondary-bg: transparent;
    --btn-secondary-border: var(--primary-color, #5600a4);
    --btn-secondary-text: var(--primary-color, #5600a4);
    --btn-secondary-hover-bg: var(--primary-color, #5600a4);
    --btn-secondary-hover-text: #fff;

    --btn-success-bg: var(--secondary-color, #6e49b1);
    --btn-success-hover: var(--primary-color, #5600a4);
    --btn-success-text: #fff;

    --btn-danger-bg: #dc3545;
    --btn-danger-hover: #c82333;
    --btn-danger-text: #fff;

    /* أحجام الأزرار */
    --btn-font-size: 0.85rem;
    --btn-padding: 0.5rem 1rem;
    --btn-border-radius: 1.5rem;
    --btn-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* الظلال والتأثيرات */
    --btn-shadow: 0 2px 4px rgba(0,0,0,0.1);
    --btn-shadow-hover: 0 4px 12px rgba(0,0,0,0.15);
    --btn-transform-hover: translateY(-2px);
}

/* ============================================
   الأزرار الأساسية الموحدة
   ============================================ */

/* زر الحفظ الأساسي */
.btn-form-primary {
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border: 2px solid var(--btn-primary-bg) !important;
    padding: 0.5rem 1.5rem;
    border-radius: var(--btn-border-radius);
    font-weight: 600;
    font-size: var(--btn-font-size);
    transition: var(--btn-transition);
    box-shadow: var(--btn-shadow);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none !important;
    cursor: pointer;
    min-width: 80px;
    white-space: nowrap;
    justify-content: center;
}

.btn-form-primary:hover,
.btn-form-primary:focus {
    background: var(--btn-primary-hover) !important;
    color: var(--btn-primary-text) !important;
    border-color: var(--btn-primary-hover) !important;
    box-shadow: var(--btn-shadow-hover);
    transform: var(--btn-transform-hover);
    text-decoration: none !important;
}

.btn-form-primary:active {
    transform: translateY(0);
    box-shadow: var(--btn-shadow);
}

/* زر العودة الأساسي */
.btn-form-secondary {
    background: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    border: 2px solid var(--btn-secondary-border) !important;
    padding: 0.5rem 1.5rem;
    border-radius: var(--btn-border-radius);
    font-weight: 600;
    font-size: var(--btn-font-size);
    transition: var(--btn-transition);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none !important;
    cursor: pointer;
    min-width: 80px;
    white-space: nowrap;
    justify-content: center;
}

.btn-form-secondary:hover,
.btn-form-secondary:focus {
    background: var(--btn-secondary-hover-bg) !important;
    color: var(--btn-secondary-hover-text) !important;
    border-color: var(--btn-secondary-hover-bg) !important;
    box-shadow: var(--btn-shadow-hover);
    transform: var(--btn-transform-hover);
    text-decoration: none !important;
}

.btn-form-secondary:active {
    transform: translateY(0);
}

/* زر الإضافة */
.btn-form-success {
    background: var(--btn-success-bg) !important;
    color: var(--btn-success-text) !important;
    border: 2px solid var(--btn-success-bg) !important;
    padding: 0.5rem 1.5rem;
    border-radius: var(--btn-border-radius);
    font-weight: 600;
    font-size: var(--btn-font-size);
    transition: var(--btn-transition);
    box-shadow: var(--btn-shadow);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none !important;
    cursor: pointer;
    min-width: 80px;
    white-space: nowrap;
    justify-content: center;
}

.btn-form-success:hover,
.btn-form-success:focus {
    background: var(--btn-success-hover) !important;
    color: var(--btn-success-text) !important;
    border-color: var(--btn-success-hover) !important;
    box-shadow: var(--btn-shadow-hover);
    transform: var(--btn-transform-hover);
    text-decoration: none !important;
}

.btn-form-success:active {
    transform: translateY(0);
    box-shadow: var(--btn-shadow);
}

/* زر الحذف */
.btn-form-danger {
    background: var(--btn-danger-bg) !important;
    color: var(--btn-danger-text) !important;
    border: 2px solid var(--btn-danger-bg) !important;
    padding: 0.5rem 1.5rem;
    border-radius: var(--btn-border-radius);
    font-weight: 600;
    font-size: var(--btn-font-size);
    transition: var(--btn-transition);
    box-shadow: var(--btn-shadow);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none !important;
    cursor: pointer;
    min-width: 80px;
    white-space: nowrap;
    justify-content: center;
}

.btn-form-danger:hover,
.btn-form-danger:focus {
    background: var(--btn-danger-hover) !important;
    color: var(--btn-danger-text) !important;
    border-color: var(--btn-danger-hover) !important;
    box-shadow: var(--btn-shadow-hover);
    transform: var(--btn-transform-hover);
    text-decoration: none !important;
}

.btn-form-danger:active {
    transform: translateY(0);
    box-shadow: var(--btn-shadow);
}

/* ============================================
   أيقونات الأزرار الموحدة
   ============================================ */

/* أيقونة الحفظ */
.btn-form-primary .fa-save,
.btn-form-primary .fas.fa-save {
    color: var(--btn-primary-text) !important;
    font-size: 0.9em;
}

/* أيقونة العودة */
.btn-form-secondary .fa-arrow-left,
.btn-form-secondary .fas.fa-arrow-left {
    color: var(--btn-secondary-text) !important;
    font-size: 0.9em;
}

.btn-form-secondary:hover .fa-arrow-left,
.btn-form-secondary:hover .fas.fa-arrow-left,
.btn-form-secondary:focus .fa-arrow-left,
.btn-form-secondary:focus .fas.fa-arrow-left {
    color: var(--btn-secondary-hover-text) !important;
}

/* أيقونة الإضافة */
.btn-form-success .fa-plus,
.btn-form-success .fas.fa-plus {
    color: var(--btn-success-text) !important;
    font-size: 0.9em;
}

/* أيقونة الحذف */
.btn-form-danger .fa-trash,
.btn-form-danger .fas.fa-trash,
.btn-form-danger .fa-times,
.btn-form-danger .fas.fa-times {
    color: var(--btn-danger-text) !important;
    font-size: 0.9em;
}

/* ============================================
   دعم الثيمات المختلفة
   ============================================ */

/* ثيم مظلم */
[data-theme="dark"] {
    --btn-shadow: 0 2px 4px rgba(255,255,255,0.1);
    --btn-shadow-hover: 0 4px 12px rgba(255,255,255,0.2);
}

/* ثيم بنفسجي */
[data-theme="purple"] {
    --btn-primary-bg: #6f42c1;
    --btn-primary-hover: #5a32a3;
    --btn-success-bg: #e83e8c;
    --btn-success-hover: #d63384;
}

/* ثيم أبيض - إزالة اللون الرمادي */
[data-theme="white"] {
    --btn-primary-bg: var(--primary-color, #5600a4);
    --btn-primary-hover: var(--primary-hover, #4a228b);
    --btn-success-bg: var(--secondary-color, #6e49b1);
    --btn-success-hover: var(--primary-color, #5600a4);
}

/* ============================================
   أزرار خاصة بالنماذج
   ============================================ */

/* شريط أزرار النموذج */
.form-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, #dee2e6);
}

/* أزرار النماذج الصغيرة */
.btn-form-sm {
    --btn-font-size: 0.75rem;
    --btn-padding: 0.4rem 0.8rem;
}

/* أزرار النماذج الكبيرة */
.btn-form-lg {
    --btn-font-size: 1rem;
    --btn-padding: 0.6rem 1.2rem;
}

/* ============================================
   تأثيرات خاصة
   ============================================ */

/* تأثير النبض للأزرار المهمة */
.btn-pulse {
    animation: btnPulse 2s infinite;
}

@keyframes btnPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* تأثير التحميل */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: btnSpin 1s linear infinite;
}

@keyframes btnSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   دعم الشاشات الصغيرة
   ============================================ */

@media (max-width: 576px) {
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-form-primary,
    .btn-form-secondary,
    .btn-form-success,
    .btn-form-danger {
        width: 100%;
        justify-content: center;
        margin-bottom: 0.5rem;
    }

    .btn-form-sm {
        --btn-font-size: 0.8rem;
        --btn-padding: 0.5rem 1rem;
    }
}

/* ============================================
   إزالة التأثيرات الافتراضية
   ============================================ */

.btn-form-primary:focus,
.btn-form-secondary:focus,
.btn-form-success:focus,
.btn-form-danger:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

/* منع التأثيرات المزدوجة */
.btn-form-primary:not(:hover):not(:focus),
.btn-form-secondary:not(:hover):not(:focus),
.btn-form-success:not(:hover):not(:focus),
.btn-form-danger:not(:hover):not(:focus) {
    transform: none !important;
}