/* ========================================
   نظام الألوان الموحد - ResvBAR
   تطبيق شامل على جميع العناصر
======================================== */

:root {
    /* الألوان الأساسية الجديدة */
    --primary-blue: #01305F;
    --secondary-blue: #0089BF;
    --accent-orange: #FEA31A;
    --light-bg: #F4F7FA;
    --text-dark: #333333;
    --text-muted: #718096;
    --white: #ffffff;
    
    /* تدرجات الألوان */
    --gradient-primary: linear-gradient(135deg, #01305F 0%, #0089BF 100%);
    --gradient-secondary: linear-gradient(135deg, #0089BF 0%, #FEA31A 100%);
    
    /* ألوان الحالات */
    --success: #17c653;
    --warning: #FEA31A;
    --danger: #e53e3e;
    --info: #0089BF;
    
    /* الحدود والظلال */
    --border-color: #e2e8f0;
    --shadow-sm: 0 2px 4px rgba(1, 48, 95, 0.08);
    --shadow-md: 0 4px 12px rgba(1, 48, 95, 0.12);
    --shadow-lg: 0 8px 24px rgba(1, 48, 95, 0.16);
}

/* الأزرار */
.btn-primary, .btn-gradient {
    background: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
    color: var(--white) !important;
}

.btn-primary:hover, .btn-gradient:hover {
    background: var(--secondary-blue) !important;
    border-color: var(--secondary-blue) !important;
}

.btn-outline-primary {
    border-color: #0089BF !important;
    color: #0089BF !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background: #0089BF !important;
    border-color: #0089BF !important;
    color: var(--white) !important;
}

.btn-custom-blue {
    background-color: var(--primary-blue) !important;
    color: var(--white) !important;
}

.btn-custom-blue:hover {
    background-color: var(--secondary-blue) !important;
}

/* الروابط */
.link-primary, a.link-primary {
    color: var(--secondary-blue) !important;
}

.link-primary:hover, a.link-primary:hover {
    color: var(--primary-blue) !important;
}

/* النماذج */
.form-control:focus, .form-select:focus {
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 0.2rem rgba(1, 48, 95, 0.15) !important;
}

.form-check-input:checked {
    background-color: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
}

/* البطاقات */
.card {
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background-color: var(--light-bg);
    border-bottom-color: var(--border-color);
}

/* الشريط الجانبي */
.sidebar-custom {
    background-color: #bebebe14 !important;
}

.sidebar-custom .nav-link.active {
    background-color: var(--primary-blue) !important;
    color: var(--white) !important;
}

.sidebar-custom .nav-link:hover {
    background-color: rgba(1, 48, 95, 0.1) !important;
}

/* الشارات */
.badge.bg-primary {
    background-color: var(--primary-blue) !important;
}

.badge.bg-info {
    background-color: var(--secondary-blue) !important;
}

.badge.bg-warning {
    background-color: var(--accent-orange) !important;
}

.badge.bg-thun {
    background-color: rgba(254, 163, 26, 0.1) !important;
    color: var(--accent-orange) !important;
}

/* النصوص */
.text-primary {
    color: #0089BF !important;
}

.text-secondary {
    color: var(--text-muted) !important;
}

.text-info {
    color: var(--secondary-blue) !important;
}

.text-warning {
    color: var(--accent-orange) !important;
}

/* الخلفيات */
.bg-primary {
    background-color: var(--primary-blue) !important;
}

.bg-light {
    background-color: var(--light-bg) !important;
}

.bg-thun {
    background-color: rgba(254, 163, 26, 0.1) !important;
}

/* أزرار التنقل السريع */
.nav-link-custom {
    border-color: var(--border-color);
    color: var(--text-muted);
}

.nav-link-custom:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    box-shadow: 0 4px 12px rgba(1, 48, 95, 0.15);
}

.nav-link-custom.active {
    background: var(--gradient-primary) !important;
    border-color: var(--primary-blue);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(1, 48, 95, 0.3);
}

/* العداد التنازلي */
.countdown-box {
    background-color: rgba(0, 137, 191, 0.1);
}

.countdown-number, .countdown-text {
    color: var(--secondary-blue);
}

/* بطاقات الطرق */
.method-card {
    border-color: var(--border-color);
}

.method-card:hover {
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-md);
}

.method-icon.google, .method-icon.email {
    background: linear-gradient(135deg, rgba(1, 48, 95, 0.1) 0%, rgba(0, 137, 191, 0.1) 100%);
}

/* الحالات */
.text-green, .bg-green {
    color: var(--success) !important;
    background-color: var(--success) !important;
}

.balance-header {
    background-color: rgba(1, 48, 95, 0.1) !important;
    color: var(--primary-blue) !important;
}

/* التأثيرات */
.glass-effect {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

/* الأيقونات الملونة */
.bi-star-fill {
    color: var(--accent-orange) !important;
}

.text-primary i,
.text-primary .bi {
    color: #0089BF !important;
}

/* تحسينات إضافية */
.border {
    border-color: var(--border-color) !important;
}

.horzontal-line {
    border-top-color: var(--border-color);
}

/* تأثيرات التمرير */
.btn-primary:hover, .btn-gradient:hover,
.nav-link-custom:hover, .method-card:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* الأزرار الإضافية */
.btn-info {
    background-color: var(--secondary-blue) !important;
    border-color: var(--secondary-blue) !important;
    color: var(--white) !important;
}

.btn-info:hover {
    background-color: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
}

.btn-warning {
    background-color: var(--accent-orange) !important;
    border-color: var(--accent-orange) !important;
    color: var(--white) !important;
}

.btn-warning:hover {
    background-color: #e59315 !important;
    filter: brightness(0.95);
}

.btn-outline-info {
    border-color: var(--secondary-blue) !important;
    color: var(--secondary-blue) !important;
}

.btn-outline-info:hover {
    background-color: var(--secondary-blue) !important;
    color: var(--white) !important;
}

.btn-light:hover {
    background-color: var(--light-bg) !important;
    border-color: var(--primary-blue) !important;
}

/* الروابط والنصوص */
a {
    color: var(--secondary-blue);
    transition: all 0.3s ease;
}

a:hover {
    color: var(--primary-blue);
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-dark {
    color: var(--text-dark) !important;
}

/* الأيقونات */
.bi, .fa, .fas, .far, .fab {
    transition: all 0.3s ease;
}

.nav-link:hover .bi,
.nav-link:hover .fa {
    transform: scale(1.1);
}

.nav-link.active .bi,
.nav-link.active .fa {
    color: var(--white) !important;
}

/* البطاقات والحاويات */
.card:hover {
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.card-header {
    background-color: var(--light-bg) !important;
    border-bottom: 1px solid var(--border-color);
}

/* النماذج المتقدمة */
.form-control, .form-select {
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.form-control:hover, .form-select:hover {
    border-color: var(--secondary-blue);
}

.input-group-text {
    background-color: var(--light-bg);
    border-color: var(--border-color);
    color: var(--text-dark);
}

/* Dropdown */
.dropdown-menu {
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.dropdown-item:hover {
    background-color: rgba(1, 48, 95, 0.05);
    color: var(--primary-blue);
}

.dropdown-item.active {
    background-color: var(--primary-blue);
    color: var(--white);
}

/* Tabs */
.nav-tabs .nav-link {
    color: var(--text-muted);
    border-color: transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--primary-blue);
    border-color: var(--border-color);
}

.nav-tabs .nav-link.active {
    color: var(--primary-blue);
    border-color: var(--border-color) var(--border-color) var(--white);
    background-color: var(--white);
}

.nav-pills .nav-link {
    color: var(--text-dark);
}

.nav-pills .nav-link:hover {
    background-color: rgba(1, 48, 95, 0.05);
    color: var(--primary-blue);
}

.nav-pills .nav-link.active {
    background-color: var(--primary-blue);
    color: var(--white);
}

/* Alerts */
.alert-info {
    background-color: rgba(0, 137, 191, 0.1);
    border-color: var(--secondary-blue);
    color: var(--primary-blue);
}

.alert-warning {
    background-color: rgba(254, 163, 26, 0.1);
    border-color: var(--accent-orange);
    color: #c77d0a;
}

.alert-success {
    background-color: rgba(23, 198, 83, 0.1);
    border-color: var(--success);
    color: #0f8042;
}

/* Progress Bar */
.progress {
    background-color: var(--light-bg);
}

.progress-bar {
    background-color: var(--primary-blue);
}

/* Pagination */
.pagination .page-link {
    color: var(--primary-blue);
    border-color: var(--border-color);
}

.pagination .page-link:hover {
    background-color: var(--light-bg);
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

/* Modal */
.modal-header {
    background-color: var(--light-bg);
    border-bottom-color: var(--border-color);
}

.modal-footer {
    border-top-color: var(--border-color);
}

/* Offcanvas */
.offcanvas {
    background-color: var(--white);
}

.offcanvas-header {
    border-bottom: 1px solid var(--border-color);
}

/* List Group */
.list-group-item {
    border-color: var(--border-color);
}

.list-group-item:hover {
    background-color: var(--light-bg);
}

.list-group-item.active {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

/* Breadcrumb */
.breadcrumb-item.active {
    color: var(--primary-blue);
}

.breadcrumb-item a {
    color: var(--secondary-blue);
}

.breadcrumb-item a:hover {
    color: var(--primary-blue);
}

/* Spinner */
.spinner-border {
    color: var(--primary-blue);
}

/* Toast */
.toast {
    border: 1px solid var(--border-color);
}

.toast-header {
    background-color: var(--light-bg);
    border-bottom-color: var(--border-color);
}

/* Switch/Toggle */
.form-switch .form-check-input:checked {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

/* Range */
.form-range::-webkit-slider-thumb {
    background-color: var(--primary-blue);
}

.form-range::-moz-range-thumb {
    background-color: var(--primary-blue);
}

/* Accordion */
.accordion-button {
    color: var(--text-dark);
}

.accordion-button:not(.collapsed) {
    background-color: rgba(1, 48, 95, 0.05);
    color: var(--primary-blue);
}

.accordion-button:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.25rem rgba(1, 48, 95, 0.15);
}

/* Table */
.table {
    border-color: var(--border-color);
}

.table thead {
    background-color: var(--light-bg);
    color: var(--text-dark);
}

.table-hover tbody tr:hover {
    background-color: rgba(1, 48, 95, 0.03);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(244, 247, 250, 0.5);
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
    color: var(--white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--light-bg) !important;
    border-color: var(--primary-blue) !important;
    color: var(--primary-blue) !important;
}

/* Custom Classes */
.bg-gradient-primary {
    background: var(--gradient-primary) !important;
}

.bg-gradient-secondary {
    background: var(--gradient-secondary) !important;
}

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Focus States */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--light-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-blue);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-blue);
}

/* Selection */
::selection {
    background-color: var(--primary-blue);
    color: var(--white);
}

::-moz-selection {
    background-color: var(--primary-blue);
    color: var(--white);
}