/**
 * UBL System Theme
 * الألوان والخطوط الرسمية للنظام
 */

:root {
    /* الألوان الأساسية */
    --ubl-primary: #2563eb;
    --ubl-primary-dark: #1e40af;
    --ubl-primary-light: #3b82f6;
    
    --ubl-secondary: #64748b;
    --ubl-secondary-dark: #475569;
    --ubl-secondary-light: #94a3b8;
    
    --ubl-success: #10b981;
    --ubl-success-dark: #059669;
    
    --ubl-danger: #ef4444;
    --ubl-danger-dark: #dc2626;
    
    --ubl-warning: #f59e0b;
    --ubl-warning-dark: #d97706;
    
    --ubl-info: #3b82f6;
    --ubl-info-dark: #2563eb;
    
    /* الألوان المحايدة */
    --ubl-gray-50: #f9fafb;
    --ubl-gray-100: #f3f4f6;
    --ubl-gray-200: #e5e7eb;
    --ubl-gray-300: #d1d5db;
    --ubl-gray-400: #9ca3af;
    --ubl-gray-500: #6b7280;
    --ubl-gray-600: #4b5563;
    --ubl-gray-700: #374151;
    --ubl-gray-800: #1f2937;
    --ubl-gray-900: #111827;
    
    /* الخطوط */
    --ubl-font-family: 'Cairo', 'Tahoma', 'Arial', sans-serif;
    --ubl-font-size-base: 16px;
    --ubl-font-size-sm: 14px;
    --ubl-font-size-lg: 18px;
    --ubl-font-size-xl: 20px;
    
    /* المسافات */
    --ubl-spacing-xs: 0.25rem;
    --ubl-spacing-sm: 0.5rem;
    --ubl-spacing-md: 1rem;
    --ubl-spacing-lg: 1.5rem;
    --ubl-spacing-xl: 2rem;
    
    /* الحدود */
    --ubl-border-radius: 0.5rem;
    --ubl-border-radius-sm: 0.25rem;
    --ubl-border-radius-lg: 0.75rem;
}

/* تطبيق الخطوط */
body {
    font-family: var(--ubl-font-family);
    font-size: var(--ubl-font-size-base);
    direction: rtl;
    text-align: right;
}

/* فئات الألوان */
.ubl-bg-primary {
    background-color: var(--ubl-primary);
}

.ubl-bg-success {
    background-color: var(--ubl-success);
}

.ubl-bg-danger {
    background-color: var(--ubl-danger);
}

.ubl-bg-warning {
    background-color: var(--ubl-warning);
}

.ubl-text-primary {
    color: var(--ubl-primary);
}

.ubl-text-success {
    color: var(--ubl-success);
}

.ubl-text-danger {
    color: var(--ubl-danger);
}

/* بطاقات */
.ubl-card {
    background: white;
    border-radius: var(--ubl-border-radius);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    padding: var(--ubl-spacing-lg);
    margin-bottom: var(--ubl-spacing-md);
}

/* الأزرار */
.ubl-btn {
    display: inline-block;
    padding: var(--ubl-spacing-sm) var(--ubl-spacing-md);
    border-radius: var(--ubl-border-radius);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.ubl-btn-primary {
    background-color: var(--ubl-primary);
    color: white;
}

.ubl-btn-primary:hover {
    background-color: var(--ubl-primary-dark);
}

.ubl-btn-success {
    background-color: var(--ubl-success);
    color: white;
}

.ubl-btn-danger {
    background-color: var(--ubl-danger);
    color: white;
}

/* الحالات */
.ubl-status-active {
    background-color: var(--ubl-success);
    color: white;
    padding: var(--ubl-spacing-xs) var(--ubl-spacing-sm);
    border-radius: var(--ubl-border-radius-sm);
    font-size: var(--ubl-font-size-sm);
}

.ubl-status-inactive {
    background-color: var(--ubl-secondary);
    color: white;
    padding: var(--ubl-spacing-xs) var(--ubl-spacing-sm);
    border-radius: var(--ubl-border-radius-sm);
    font-size: var(--ubl-font-size-sm);
}

.ubl-status-open {
    background-color: var(--ubl-warning);
    color: white;
    padding: var(--ubl-spacing-xs) var(--ubl-spacing-sm);
    border-radius: var(--ubl-border-radius-sm);
    font-size: var(--ubl-font-size-sm);
}

.ubl-status-closed {
    background-color: var(--ubl-success);
    color: white;
    padding: var(--ubl-spacing-xs) var(--ubl-spacing-sm);
    border-radius: var(--ubl-border-radius-sm);
    font-size: var(--ubl-font-size-sm);
}

/* Select Dropdown Alignment - RTL Support */
select {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.5;
    min-height: 2.5rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    text-align: right;
    direction: rtl;
}

select option {
    padding: 0.5rem;
    line-height: 1.5;
    text-align: right;
    direction: rtl;
}

/* RTL Select Dropdown Arrow Position */
[dir="rtl"] select,
html[dir="rtl"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: left 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-left: 2.5rem;
    padding-right: 0.75rem;
}