/* ═══════════════════════════════════════════════════════════════
   Anti-FOUC V2 — منع الفلاش الأزرق (الحل الجذري)
   ═══════════════════════════════════════════════════════════════ */

/* الحل #1: إخفاء الـ HTML بالكامل لجزء من الثانية */
html {
    visibility: hidden;
    opacity: 0;
}

html.o2z-loaded,
html:has(body) {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

/* الحل #2: إجبار CSS Variables بأقصى قوة */
:root,
html,
html body,
html #auth,
html #app {
    --bs-primary: #FFC72C !important;
    --bs-primary-rgb: 255, 199, 44 !important;
    --bs-info: #FFC72C !important;
    --bs-info-rgb: 255, 199, 44 !important;
    --primary: #FFC72C !important;
    --primary-color: #FFC72C !important;
    --bs-link-color: #E5A800 !important;
}

/* الحل #3: إجبار كل أزرار primary بأقصى أولوية */
html body .btn-primary,
html body button.btn-primary,
html body input[type="submit"].btn-primary,
html body a.btn-primary {
    background: linear-gradient(135deg, #FFC72C 0%, #E5A800 100%) !important;
    background-color: #FFC72C !important;
    color: #0A1F3E !important;
    border: none !important;
}

html body .btn-info,
html body button.btn-info {
    background: linear-gradient(135deg, #FFC72C 0%, #E5A800 100%) !important;
    background-color: #FFC72C !important;
    color: #0A1F3E !important;
    border: none !important;
}

/* ═══════════════════════════════════════════════════════════════ *//* ═══════════════════════════════════════════════════════════════
   O2Z.AI WhatsApp Platform — Master CSS V7.0
   Brand: Navy #0A1F3E + Gold #FFC72C
   Date: May 2026
   ═══════════════════════════════════════════════════════════════ */

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PART 1: Anti-FOUC (يجي أول شي — منع الفلاش الأزرق)         ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* إجبار CSS Variables من اللحظة الأولى */
:root,
html,
body {
    --bs-primary: #FFC72C !important;
    --bs-primary-rgb: 255, 199, 44 !important;
    --bs-info: #FFC72C !important;
    --bs-info-rgb: 255, 199, 44 !important;
    --bs-link-color: #E5A800 !important;
    --bs-link-hover-color: #FFC72C !important;
    --primary: #FFC72C !important;
    --primary-color: #FFC72C !important;
}

/* منع ظهور الأزرار الزرقاء من اللحظة الأولى */
.btn-primary,
button.btn-primary {
    background: linear-gradient(135deg, #FFC72C 0%, #E5A800 100%) !important;
    background-color: #FFC72C !important;
    color: #0A1F3E !important;
    border: none !important;
}

/* Fade-in ناعم للصفحة */
body {
    animation: o2zFadeIn 0.3s ease-out !important;
}

@keyframes o2zFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PART 2: Font Family العام                                  ║
   ╚═══════════════════════════════════════════════════════════════╝ */

body, 
.app-content, 
.content-wrapper, 
.main-wrapper, 
.header-navbar, 
.main-menu {
    font-family: 'Cairo', 'Tajawal', 'Poppins', sans-serif !important;
}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PART 3: Sidebar                                             ║
   ╚═══════════════════════════════════════════════════════════════╝ */

.main-menu .navigation li.active a, 
.main-menu .navigation li.open a,
.navigation li.active {
    background: rgba(255, 199, 44, 0.12) !important;
    color: #0A1F3E !important;
    border-right: 3px solid #FFC72C !important;
    border-left: none !important;
    font-weight: 600 !important;
}

.main-menu .navigation li.active a i,
.main-menu .navigation li.open a i {
    color: #FFC72C !important;
}

.main-menu .navigation li a:hover {
    color: #FFC72C !important;
    background: rgba(255, 199, 44, 0.05) !important;
}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PART 4: Buttons (الأزرار العامة)                            ║
   ╚═══════════════════════════════════════════════════════════════╝ */

.btn-primary,
.btn-info {
    background: linear-gradient(135deg, #FFC72C 0%, #E5A800 100%) !important;
    border: none !important;
    color: #0A1F3E !important;
    font-weight: 700 !important;
    font-family: 'Cairo', 'Poppins', sans-serif !important;
    box-shadow: 0 2px 8px rgba(255, 199, 44, 0.25) !important;
    transition: all 0.2s ease !important;
}

.btn-primary:hover,
.btn-info:hover {
    background: linear-gradient(135deg, #FFD64A 0%, #FFC72C 100%) !important;
    color: #0A1F3E !important;
    box-shadow: 0 3px 10px rgba(255, 199, 44, 0.4) !important;
    filter: brightness(1.05) !important;
    transform: none !important;
}

.btn-outline-primary {
    background: transparent !important;
    border: 1.5px solid #FFC72C !important;
    color: #E5A800 !important;
    font-weight: 600 !important;
}

.btn-outline-primary:hover {
    background: #FFC72C !important;
    color: #0A1F3E !important;
}

/* إلغاء الحركة الكبيرة على الـ hover */
.btn,
.btn-primary,
.btn-info,
.btn-success,
.btn-warning,
.btn-danger,
.btn-secondary,
.btn-outline-primary,
.btn-light,
button[type="submit"] {
    transition: all 0.2s ease !important;
}

.btn:hover {
    transform: none !important;
}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PART 5: Cards Hover                                        ║
   ╚═══════════════════════════════════════════════════════════════╝ */

.card {
    transition: all 0.2s ease !important;
}

.card:hover {
    transform: none !important;
    border-color: rgba(255, 199, 44, 0.3) !important;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08) !important;
}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PART 6: Form Inputs                                        ║
   ╚═══════════════════════════════════════════════════════════════╝ */

.form-control:focus, 
input:focus, 
textarea:focus, 
select:focus {
    border-color: #FFC72C !important;
    box-shadow: 0 0 0 3px rgba(255, 199, 44, 0.15) !important;
}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PART 7: Tabs & Pagination                                  ║
   ╚═══════════════════════════════════════════════════════════════╝ */

.nav-tabs .nav-link.active {
    color: #0A1F3E !important;
    border-bottom: 3px solid #FFC72C !important;
    font-weight: 700 !important;
}

.nav-tabs .nav-link:hover {
    color: #FFC72C !important;
}

.pagination .page-item.active .page-link {
    background-color: #FFC72C !important;
    border-color: #FFC72C !important;
    color: #0A1F3E !important;
    font-weight: 700 !important;
}

.pagination .page-link:hover {
    color: #FFC72C !important;
    background-color: rgba(255, 199, 44, 0.1) !important;
}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PART 8: Badges & Misc                                      ║
   ╚═══════════════════════════════════════════════════════════════╝ */

.badge-primary {
    background-color: #FFC72C !important;
    color: #0A1F3E !important;
    font-weight: 700 !important;
}

a {
    color: #E5A800 !important;
}

a:hover {
    color: #FFC72C !important;
}

.main-menu a,
.sidebar a {
    color: inherit !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', 'Poppins', sans-serif !important;
    color: #0A1F3E !important;
}

.text-primary {
    color: #E5A800 !important;
}

::selection { background: #FFC72C; color: #0A1F3E; }
::-moz-selection { background: #FFC72C; color: #0A1F3E; }

.spinner-border.text-primary {
    color: #FFC72C !important;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 199, 44, 0.5);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: #FFC72C; }