/**\n * مكونات CSS - Components\n * أنماط المكونات الأساسية المستخدمة في التطبيق\n */\n\n/* ==================== الأزرار ==================== */\n.btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--spacing-sm);\n    height: var(--button-height-md);\n    padding: 0 var(--button-padding-x-md);\n    font-size: var(--font-size-base);\n    font-weight: var(--font-weight-medium);\n    border: var(--border-width) solid transparent;\n    border-radius: var(--border-radius-md);\n    cursor: pointer;\n    transition: var(--transition-property-colors) var(--transition-base);\n    text-decoration: none;\n    white-space: nowrap;\n    user-select: none;\n    -webkit-user-select: none;\n}\n\n.btn:disabled {\n    opacity: 0.65;\n    cursor: not-allowed;\n}\n\n.btn:focus-visible {\n    outline: 2px solid var(--color-primary);\n    outline-offset: 2px;\n}\n\n/* أحجام الأزرار */\n.btn-sm {\n    height: var(--button-height-sm);\n    padding: 0 var(--button-padding-x-sm);\n    font-size: var(--font-size-sm);\n}\n\n.btn-lg {\n    height: var(--button-height-lg);\n    padding: 0 var(--button-padding-x-lg);\n    font-size: var(--font-size-lg);\n}\n\n/* أنماط الأزرار */\n.btn-primary {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-text-light);\n}\n\n.btn-primary:hover:not(:disabled) {\n    background-color: var(--color-primary-dark);\n    border-color: var(--color-primary-dark);\n}\n\n.btn-secondary {\n    background-color: var(--color-secondary);\n    border-color: var(--color-secondary);\n    color: var(--color-text-light);\n}\n\n.btn-secondary:hover:not(:disabled) {\n    background-color: var(--color-secondary-dark);\n    border-color: var(--color-secondary-dark);\n}\n\n.btn-success {\n    background-color: var(--color-success);\n    border-color: var(--color-success);\n    color: var(--color-text-light);\n}\n\n.btn-success:hover:not(:disabled) {\n    background-color: var(--color-success-dark);\n    border-color: var(--color-success-dark);\n}\n\n.btn-danger {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-text-light);\n}\n\n.btn-danger:hover:not(:disabled) {\n    background-color: var(--color-danger-dark);\n    border-color: var(--color-danger-dark);\n}\n\n.btn-outline-primary {\n    background-color: transparent;\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n}\n\n.btn-outline-primary:hover:not(:disabled) {\n    background-color: var(--color-primary);\n    color: var(--color-text-light);\n}\n\n/* ==================== الحقول ==================== */\n.form-control,\n.form-select {\n    display: block;\n    width: 100%;\n    height: var(--input-height);\n    padding: var(--input-padding-y) var(--input-padding-x);\n    font-size: var(--font-size-base);\n    font-family: var(--font-family-arabic);\n    line-height: 1.5;\n    color: var(--color-text-primary);\n    background-color: var(--color-bg-primary);\n    border: var(--border-width) solid var(--color-border);\n    border-radius: var(--input-border-radius);\n    transition: border-color var(--transition-base), box-shadow var(--transition-base);\n}\n\n.form-control:focus,\n.form-select:focus {\n    outline: none;\n    border-color: var(--color-primary);\n    box-shadow: 0 0 0 3px var(--color-primary-light);\n}\n\n.form-control:disabled,\n.form-select:disabled {\n    background-color: var(--color-bg-secondary);\n    opacity: 0.65;\n    cursor: not-allowed;\n}\n\n.form-control::placeholder {\n    color: var(--color-text-muted);\n    opacity: 1;\n}\n\n/* ==================== التسميات ==================== */\n.form-label {\n    display: block;\n    margin-bottom: var(--spacing-sm);\n    font-size: var(--font-size-base);\n    font-weight: var(--font-weight-medium);\n    color: var(--color-text-primary);\n}\n\n.form-label.required::after {\n    content: \" *\";\n    color: var(--color-danger);\n}\n\n/* ==================== رسائل الخطأ ==================== */\n.form-error {\n    display: block;\n    margin-top: var(--spacing-xs);\n    font-size: var(--font-size-sm);\n    color: var(--color-danger);\n}\n\n.form-control.is-invalid {\n    border-color: var(--color-danger);\n}\n\n.form-control.is-invalid:focus {\n    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);\n}\n\n/* ==================== البطاقات ==================== */\n.card {\n    background-color: var(--color-bg-primary);\n    border: var(--border-width) solid var(--color-border);\n    border-radius: var(--border-radius-lg);\n    overflow: hidden;\n    box-shadow: var(--shadow-sm);\n    transition: box-shadow var(--transition-base), transform var(--transition-base);\n}\n\n.card:hover {\n    box-shadow: var(--shadow-md);\n    transform: translateY(-2px);\n}\n\n.card-header {\n    padding: var(--spacing-lg);\n    background-color: var(--color-bg-secondary);\n    border-bottom: var(--border-width) solid var(--color-border);\n}\n\n.card-body {\n    padding: var(--spacing-lg);\n}\n\n.card-footer {\n    padding: var(--spacing-lg);\n    background-color: var(--color-bg-secondary);\n    border-top: var(--border-width) solid var(--color-border);\n}\n\n/* ==================== الشارات ==================== */\n.badge {\n    display: inline-block;\n    padding: var(--spacing-xs) var(--spacing-sm);\n    font-size: var(--font-size-xs);\n    font-weight: var(--font-weight-semibold);\n    line-height: 1;\n    text-align: center;\n    white-space: nowrap;\n    border-radius: var(--border-radius-full);\n}\n\n.badge-primary {\n    background-color: var(--color-primary);\n    color: var(--color-text-light);\n}\n\n.badge-success {\n    background-color: var(--color-success);\n    color: var(--color-text-light);\n}\n\n.badge-danger {\n    background-color: var(--color-danger);\n    color: var(--color-text-light);\n}\n\n.badge-warning {\n    background-color: var(--color-warning);\n    color: var(--color-text-primary);\n}\n\n.badge-info {\n    background-color: var(--color-info);\n    color: var(--color-text-light);\n}\n\n/* ==================== الإشعارات (Alerts) ==================== */\n.alert {\n    padding: var(--spacing-lg);\n    margin-bottom: var(--spacing-lg);\n    border: var(--border-width) solid transparent;\n    border-radius: var(--border-radius-lg);\n    display: flex;\n    gap: var(--spacing-md);\n    align-items: flex-start;\n}\n\n.alert-primary {\n    background-color: var(--color-primary-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary-dark);\n}\n\n.alert-success {\n    background-color: var(--color-success-light);\n    border-color: var(--color-success);\n    color: var(--color-success-dark);\n}\n\n.alert-danger {\n    background-color: var(--color-danger-light);\n    border-color: var(--color-danger);\n    color: var(--color-danger-dark);\n}\n\n.alert-warning {\n    background-color: var(--color-warning-light);\n    border-color: var(--color-warning);\n    color: var(--color-warning-dark);\n}\n\n.alert-info {\n    background-color: var(--color-info-light);\n    border-color: var(--color-info);\n    color: var(--color-info-dark);\n}\n\n.alert-close {\n    background: none;\n    border: none;\n    cursor: pointer;\n    font-size: 1.5rem;\n    line-height: 1;\n    color: inherit;\n    opacity: 0.5;\n    transition: opacity var(--transition-base);\n}\n\n.alert-close:hover {\n    opacity: 0.75;\n}\n\n/* ==================== الجداول ==================== */\n.table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: var(--font-size-base);\n}\n\n.table th {\n    background-color: var(--color-bg-secondary);\n    font-weight: var(--font-weight-semibold);\n    text-align: var(--text-align-start);\n    padding: var(--spacing-md);\n    border-bottom: var(--border-width-2) solid var(--color-border);\n}\n\n.table td {\n    padding: var(--spacing-md);\n    border-bottom: var(--border-width) solid var(--color-border);\n}\n\n.table tbody tr:hover {\n    background-color: var(--color-bg-secondary);\n}\n\n/* ==================== قوائم التنقل ==================== */\n.nav {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing-md);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.nav-link {\n    color: var(--color-text-secondary);\n    text-decoration: none;\n    padding: var(--spacing-sm) var(--spacing-md);\n    border-radius: var(--border-radius-md);\n    transition: color var(--transition-base), background-color var(--transition-base);\n}\n\n.nav-link:hover {\n    color: var(--color-primary);\n    background-color: var(--color-bg-secondary);\n}\n\n.nav-link.active {\n    color: var(--color-primary);\n    font-weight: var(--font-weight-semibold);\n    background-color: var(--color-primary-light);\n}\n\n/* ==================== الحاويات ==================== */\n.container {\n    width: 100%;\n    margin-left: auto;\n    margin-right: auto;\n    padding-left: var(--container-padding);\n    padding-right: var(--container-padding);\n    max-width: var(--container-max-width);\n}\n\n.container-fluid {\n    width: 100%;\n    padding-left: var(--container-padding);\n    padding-right: var(--container-padding);\n    margin-left: auto;\n    margin-right: auto;\n}\n\n/* ==================== الشبكات ==================== */\n.row {\n    display: flex;\n    flex-wrap: wrap;\n    margin-left: calc(var(--spacing-md) * -0.5);\n    margin-right: calc(var(--spacing-md) * -0.5);\n}\n\n.col {\n    flex: 1 0 0%;\n    padding-left: calc(var(--spacing-md) * 0.5);\n    padding-right: calc(var(--spacing-md) * 0.5);\n}\n\n/* ==================== الحركات والانتقالات ==================== */\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@keyframes slideIn {\n    from {\n        transform: translateY(10px);\n        opacity: 0;\n    }\n    to {\n        transform: translateY(0);\n        opacity: 1;\n    }\n}\n\n@keyframes spin {\n    from {\n        transform: rotate(0deg);\n    }\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n.fade-in {\n    animation: fadeIn var(--animation-duration-base) ease-in-out;\n}\n\n.slide-in {\n    animation: slideIn var(--animation-duration-base) ease-in-out;\n}\n\n.spin {\n    animation: spin 1s linear infinite;\n}\n\n/* ==================== الحالات ==================== */\n.disabled,\n[disabled] {\n    opacity: 0.65;\n    cursor: not-allowed;\n}\n\n.hidden {\n    display: none !important;\n}\n\n.invisible {\n    visibility: hidden;\n}\n\n.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n}\n