/**
 * theme-wazfa.css – لوحة ألوان موقع التوظيف
 * Primary #1F2933 | Background #F5F7FA | Secondary UI #D1D5DB
 * CTA #16A34A | Accent #2563EB | Text Secondary #6B7280
 */

:root {
  --color-primary: #1F2933;
  --color-background: #F5F7FA;
  --color-secondary-ui: #D1D5DB;
  --color-cta: #16A34A;
  --color-cta-hover: #15803d;
  --color-accent: #2563EB;
  --color-accent-hover: #1d4ed8;
  --color-text-secondary: #6B7280;
}

/* ---- Override عناصر all.css ---- */
.progress-bar {
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover)) !important;
}

.floating-shape-1 { background: var(--color-primary) !important; }
.floating-shape-2 { background: var(--color-accent) !important; }
.floating-shape-3 { background: var(--color-cta) !important; }
.floating-shape-4 { background: var(--color-secondary-ui) !important; }
.floating-shape-5 { background: var(--color-primary) !important; }

.sidebar {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent) 50%, var(--color-accent-hover)) !important;
}
.sidebar::-webkit-scrollbar-thumb {
  background: var(--color-accent) !important;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-hover) !important;
}
.sidebar {
  scrollbar-color: var(--color-accent) hsla(0,0%,100%,.06) !important;
}

/* Footer gradient (يُستخدم مع كلاس footer-theme في الـ Blade) */
footer.footer-theme,
footer.bg-gradient-to-r.from-\[\#21a8ee\].to-\[\#2563eb\],
footer[class*="from-[#21a8ee"] {
  background: linear-gradient(to left, var(--color-primary), var(--color-accent)) !important;
}
footer .text-blue-300,
footer .text-blue-200 {
  color: rgba(255,255,255,.85) !important;
}
footer .border-blue-400 {
  border-color: rgba(255,255,255,.25) !important;
}
footer .social-icon.bg-blue-500,
footer .social-icon.bg-blue-400 {
  background-color: var(--color-accent) !important;
}
footer .social-icon:hover {
  background-color: var(--color-accent-hover) !important;
}

/* ---- كلاسات مساعدة للـ Blade ---- */
body.bg-site-bg,
.bg-site-bg { background-color: var(--color-background) !important; }
.text-site-primary { color: var(--color-primary); }
.text-site-secondary { color: var(--color-text-secondary); }
.border-site-ui { border-color: var(--color-secondary-ui); }

.bg-site-cta {
  background-color: var(--color-cta) !important;
  color: #fff !important;
}
a.bg-site-cta,
button.bg-site-cta {
  background-color: var(--color-cta) !important;
  color: #fff !important;
}
nav .bg-site-cta,
nav a.bg-site-cta {
  background-color: var(--color-cta) !important;
  color: #fff !important;
}
.bg-site-cta:hover,
.hover\:bg-site-cta:hover,
nav a.bg-site-cta:hover {
  background-color: var(--color-cta-hover) !important;
  color: #fff !important;
}

.text-site-accent { color: var(--color-accent); }
.text-site-accent:hover,
.hover\:text-site-accent:hover { color: var(--color-accent-hover); }
.bg-site-accent { background-color: var(--color-accent); }

/* خلفية ثانوية للنافبار hover */
.bg-site-ui { background-color: var(--color-secondary-ui); }
.hover\:bg-site-ui:hover { background-color: rgba(209, 213, 219, 0.5) !important; }

/* Focus للـ inputs */
.focus\:ring-site-accent:focus { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25) !important; outline: none !important; }
.focus\:border-site-accent:focus { border-color: var(--color-accent) !important; }

/* Footer theme class when Blade uses it */
.footer-theme {
  background: linear-gradient(to left, var(--color-primary), var(--color-accent)) !important;
}

/* Hero / search box gradient (home page) */
.hero-theme,
.hero-theme.rounded-2xl,
.hero-theme.rounded-xl,
.bg-gradient-to-r.from-\[\#21a8ee\].to-\[\#2563eb\],
[class*="from-[#21a8ee]"][class*="to-[#2563eb]"] {
  background: linear-gradient(to left, var(--color-primary), var(--color-accent)) !important;
}

/* ---- Override ألوان الصفحات الداخلية في all.css ---- */
.home-page .page-title,
.search-page .search-page-title,
.list-page .list-page-title,
.job-page .job-page-title,
.article-page .page-title,
.apply-page .apply-page-title,
.login-page .login-page-title,
.register-page .regi-page-title {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-accent) !important;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.home-page .content-box,
.search-page .search-content-box,
.list-page .list-content-box,
.job-page .job-content-box,
.article-page .content-box,
.apply-page .apply-content-box {
  border-color: var(--color-secondary-ui) !important;
}

.search-page .search-job-card:hover .search-job-title,
.list-page .list-job-card:hover .list-job-title,
.job-page .job-card-item:hover .job-title-main,
.article-page .job-card:hover .job-title {
  color: var(--color-accent) !important;
}

.search-page .search-search-header,
.list-page .list-search-header,
.job-page .job-search-header,
.article-page .search-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
}

.search-page .search-form-control:focus,
.list-page .list-form-control:focus,
.job-page .job-form-control:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .15) !important;
}

.search-page .search-btn-primary,
.list-page .list-btn-primary,
.job-page .job-btn-primary,
.article-page .btn-primary {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)) !important;
}
.search-page .search-btn-primary:hover,
.list-page .list-btn-primary:hover,
.job-page .job-btn-primary:hover,
.article-page .btn-primary:hover {
  background: linear-gradient(135deg, var(--color-accent-hover), var(--color-primary)) !important;
}

/* CTA للأزرار الرئيسية (قدم الآن، تسجيل، إرسال) */
.apply-page .apply-btn-submit {
  background: linear-gradient(135deg, var(--color-cta), var(--color-cta-hover)) !important;
  box-shadow: 0 4px 6px -1px rgba(22, 163, 74, .3) !important;
}
.apply-page .apply-btn-submit:hover {
  background: linear-gradient(135deg, var(--color-cta-hover), #166534) !important;
}

.login-page .login-btn-primary,
.register-page .regi-btn-primary {
  background: linear-gradient(135deg, var(--color-cta), var(--color-cta-hover)) !important;
  box-shadow: 0 4px 6px -1px rgba(22, 163, 74, .3) !important;
}
.login-page .login-btn-primary:hover,
.register-page .regi-btn-primary:hover {
  background: linear-gradient(135deg, var(--color-cta-hover), #166534) !important;
}

.search-page .search-page-item.active .search-page-link,
.search-page .search-page-link:hover,
.list-page .list-page-item.active .list-page-link,
.list-page .list-page-link:hover,
.job-page .job-page-item.active .job-page-link,
.job-page .job-page-link:hover,
.article-page .page-item.active .page-link,
.article-page .page-link:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

.blog-page .blog-sidebar { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important; }
.blog-page .blog-article-image { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)) !important; }
.blog-page .blog-newsletter { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)) !important; }
.blog-page .blog-newsletter-button { color: var(--color-accent) !important; }
.blog-page .blog-tag { background: var(--color-accent) !important; }
.blog-page .blog-page-link.active,
.blog-page .blog-page-link:hover { background: var(--color-accent) !important; border-color: var(--color-accent) !important; }
.blog-page .blog-job-card:hover { border-color: var(--color-accent) !important; }
.blog-page .blog-sidebar-title i { color: var(--color-accent) !important; }
.blog-page .blog-category-item:hover { color: var(--color-accent) !important; }
.blog-page .blog-search-input:focus,
.blog-page .blog-search-select:focus { border-color: var(--color-accent) !important; }

.company-page .gradient-bg-company,
.seekers-gradient-bg,
.seeker-show-page .seeker-gradient-bg {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
}

.seekers-view-profile-btn,
.seekers-btn-primary {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)) !important;
}
.seekers-view-profile-btn:hover,
.seekers-btn-primary:hover {
  background: linear-gradient(135deg, var(--color-accent-hover), var(--color-primary)) !important;
}

.seekers-search-header { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important; }
.seekers-form-control:focus { border-color: var(--color-accent) !important; }
.seekers-page-item.active .seekers-page-link,
.seekers-page-link:hover { background: var(--color-accent) !important; border-color: var(--color-accent) !important; }
.seekers-skill-bar { background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover)) !important; }

.report-page .report-page-container { background-color: var(--color-background) !important; }
.report-page .report-main-card { border-color: var(--color-secondary-ui) !important; }
.report-page .report-form-input:focus { border-color: var(--color-accent) !important; }
.report-page .report-alert-icon { color: var(--color-accent) !important; }
.report-page .report-submit-btn { background: var(--color-cta) !important; }
.report-page .report-submit-btn:hover { background: var(--color-cta-hover) !important; }

.login-page .login-nav-tabs li.active a,
.register-page .regi-nav-tabs li.active a {
  color: var(--color-accent) !important;
  border-bottom-color: var(--color-accent) !important;
}
.login-page .login-links a,
.register-page .regi-checkbox-group a { color: var(--color-accent) !important; }
.login-page .login-links a:hover { color: var(--color-accent-hover) !important; }
.login-page .login-form-control:focus,
.register-page .regi-form-control:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1) !important;
}

.job-page .job-details-title { border-right-color: var(--color-accent) !important; }
.job-page .job-details-title:before { background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover)) !important; }
.job-page .job-details-title:hover { border-color: var(--color-accent) !important; }
.job-page .job-article-content h2 { border-bottom-color: var(--color-accent) !important; }
.job-page .job-highlight-box { border-right-color: var(--color-accent) !important; }

.apply-page .apply-btn-primary { background: linear-gradient(135deg, var(--color-cta), var(--color-cta-hover)) !important; }
.apply-page .apply-btn-primary:hover { background: linear-gradient(135deg, var(--color-cta-hover), #166534) !important; }
.apply-page .apply-alert-default { border-right-color: var(--color-accent) !important; }
.apply-page .apply-form-control:focus { border-color: var(--color-accent) !important; }
.apply-page .apply-page-title { border-bottom-color: var(--color-accent) !important; }

.article-page .article-content h2 { border-bottom-color: var(--color-accent) !important; }
.article-page .highlight-box { border-right-color: var(--color-accent) !important; }

/* apply-page floating shapes */
.apply-page .apply-floating-shape-1 { background: var(--color-primary) !important; }
.apply-page .apply-floating-shape-2 { background: var(--color-accent) !important; }
.apply-page .apply-floating-shape-3 { background: var(--color-cta) !important; }
.apply-page .apply-floating-shape-4 { background: var(--color-secondary-ui) !important; }
.apply-page .apply-floating-shape-5 { background: var(--color-primary) !important; }