/**
 * TRA Complete Style - Professional Government Website Theme
 * Based on https://www.tra.go.tz/ design
 * Applies TRA-style professional appearance without changing structure
 */

/* ============================================
   TRA COLOR SCHEME
   ============================================ */
:root {
  --tra-blue: #1e40af;
  --tra-blue-light: #3b82f6;
  --tra-blue-dark: #1e3a8a;
  --tra-yellow: #F9E50F;
  --tra-yellow-dark: #d4c00d;
  --tra-white: #ffffff;
  --tra-gray-light: #f5f7fa;
  --tra-gray: #e5e7eb;
  --tra-gray-dark: #6b7280;
  --tra-black: #000000;
}

/* ============================================
   GLOBAL STYLES - Clean Professional Look
   ============================================ */
body {
  background: #ffffff !important;
  color: #1e293b !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  line-height: 1.6 !important;
}

/* Top section - Pure white background only */
body > div:first-child,
body > div:first-of-type,
html > body > div:first-child {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/* ============================================
   TOP BAR - Pure White Background Only
   ============================================ */
.max-w-7xl.mx-auto.px-6.py-4 {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #1e293b !important;
  padding: 0.75rem 1.5rem !important;
  border-bottom: 2px solid #F9E50F !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Remove any gradient backgrounds and blue colors */
.max-w-7xl.mx-auto.px-6.py-4,
.max-w-7xl.mx-auto.px-6.py-4::before,
.max-w-7xl.mx-auto.px-6.py-4::after {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Force white background - override any blue */
div.max-w-7xl.mx-auto.px-6.py-4 {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Remove blue background from head element and any parent */
head {
  background: transparent !important;
  background-color: transparent !important;
}

head > div,
head div {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Ensure no blue background on header or parent elements (except navigation) */
header:not(nav),
.header:not(nav),
[class*="header"]:not(nav) {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Top section - Pure white, no colors */
body > div.max-w-7xl:first-child,
body > div:first-child:not(nav),
body > div:first-of-type:not(nav) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Ensure all top elements are white except navigation */
body > *:not(nav):first-child {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.max-w-7xl.mx-auto.px-6.py-4 * {
  color: #1e293b !important;
}

.max-w-7xl.mx-auto.px-6.py-4 a {
  color: #1e40af !important;
}

.max-w-7xl.mx-auto.px-6.py-4 a:hover {
  color: #F9E50F !important;
}

/* Remove white background from CEO card */
.max-w-7xl.mx-auto.px-6.py-4 .bg-white\/80,
.max-w-7xl.mx-auto.px-6.py-4 .backdrop-blur-sm,
.max-w-7xl.mx-auto.px-6.py-4 div.flex.items-center.space-x-3 {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Tagline - Professional Blue Gradient */
.max-w-7xl .bg-gradient-to-r.from-purple-400.via-pink-500.to-red-500.bg-clip-text {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #1e40af !important;
  font-weight: 700 !important;
}

/* Fallback for browsers that don't support gradient text */
@supports not (-webkit-background-clip: text) {
  .max-w-7xl .bg-gradient-to-r.from-purple-400.via-pink-500.to-red-500.bg-clip-text {
    color: #F9E50F !important;
    background: none !important;
  }
}

/* ============================================
   NAVIGATION - Professional Clean Nav
   ============================================ */
nav.bg-white {
  background: #ffffff !important;
  border-bottom: 3px solid #F9E50F !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

nav .text-indigo-600,
nav .text-purple-600 {
  color: #1e40af !important;
  font-weight: 600 !important;
}

/* PrimoSoftware logo text - Black color */
nav .text-2xl.font-extrabold,
nav .text-2xl.font-extrabold.bg-clip-text,
nav .text-2xl.font-extrabold.bg-gradient-to-r,
nav span.text-2xl.font-extrabold,
nav .text-black.text-2xl.font-extrabold {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: #000000 !important;
  font-weight: 800 !important;
  transition: color 0.3s ease !important;
}

nav .text-2xl.font-extrabold:hover,
nav span.text-2xl.font-extrabold:hover,
nav .text-black.text-2xl.font-extrabold:hover {
  color: #1f2937 !important;
}

nav a:hover {
  color: #F9E50F !important;
  background: rgba(249, 229, 15, 0.1) !important;
}

/* ============================================
   HERO SECTIONS - Professional Banners
   ============================================ */
.bg-gradient-to-br.from-blue-50.via-indigo-50.to-purple-50,
.bg-gradient-to-r.from-yellow-100.via-white.to-yellow-100 {
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 50%, #f5f7fa 100%) !important;
}

/* ============================================
   CARDS - Clean White Cards
   ============================================ */
.bg-white,
.bg-white\/80,
.bg-white\/90 {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.5rem !important;
}

.bg-white:hover,
.bg-white\/80:hover,
.bg-white\/90:hover {
  box-shadow: 0 4px 16px rgba(30, 64, 175, 0.15) !important;
  border-color: #3b82f6 !important;
  transform: translateY(-2px) !important;
  transition: all 0.3s ease !important;
}

/* ============================================
   BUTTONS - Professional Blue & Yellow
   ============================================ */
.bg-gradient-to-r.from-green-500.to-green-600,
.bg-gradient-to-r.from-green-500.to-emerald-500 {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
  color: white !important;
  border: none !important;
  font-weight: 600 !important;
}

.bg-gradient-to-r.from-green-500.to-green-600:hover,
.bg-gradient-to-r.from-green-500.to-emerald-500:hover {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3) !important;
}

.bg-gradient-to-r.from-indigo-600.to-purple-600 {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
  color: white !important;
}

.bg-gradient-to-r.from-indigo-600.to-purple-600:hover {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
}

/* Yellow Accent Buttons */
.bg-yellow-400,
.bg-yellow-500 {
  background: #F9E50F !important;
  color: #000000 !important;
  font-weight: 600 !important;
}

.bg-yellow-400:hover,
.bg-yellow-500:hover {
  background: #d4c00d !important;
}

/* ============================================
   TEXT COLORS - Professional Colors
   ============================================ */
.text-indigo-600,
.text-purple-600,
.text-blue-600 {
  color: #1e40af !important;
}

.text-indigo-500,
.text-purple-500,
.text-blue-500 {
  color: #3b82f6 !important;
}

.text-yellow-400,
.text-yellow-500,
.text-yellow-600 {
  color: #F9E50F !important;
}

.text-gray-600,
.text-gray-700 {
  color: #4b5563 !important;
}

.text-gray-400 {
  color: #9ca3af !important;
}

/* ============================================
   HEADINGS - Professional Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  color: #1e293b !important;
  font-weight: 700 !important;
}

h1 {
  font-size: 2.5rem !important;
  line-height: 1.2 !important;
}

h2 {
  font-size: 2rem !important;
  line-height: 1.3 !important;
}

h3 {
  font-size: 1.5rem !important;
  line-height: 1.4 !important;
}

/* ============================================
   SECTIONS - Clean Spacing
   ============================================ */
section {
  padding: 3rem 0 !important;
}

@media (min-width: 768px) {
  section {
    padding: 4rem 0 !important;
  }
}

/* ============================================
   SERVICE CARDS - Professional Cards
   ============================================ */
.service-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
}

.service-card:hover {
  box-shadow: 0 8px 24px rgba(30, 64, 175, 0.15) !important;
  border-color: #3b82f6 !important;
  transform: translateY(-4px) !important;
}

/* ============================================
   STATISTICS CARDS - Professional Stats
   ============================================ */
.bg-white.rounded-lg.shadow-lg {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(30, 64, 175, 0.2) !important;
}

.bg-white.rounded-lg.shadow-lg:hover {
  background: #ffffff !important;
  border-color: #3b82f6 !important;
}

/* ============================================
   FOOTER - Professional Dark Footer
   ============================================ */
footer.bg-gray-800,
footer.bg-gray-900 {
  background: #1e293b !important;
  border-top: 3px solid #F9E50F !important;
}

footer .text-gray-400 {
  color: #cbd5e1 !important;
}

footer a:hover {
  color: #F9E50F !important;
}

footer p.text-gray-400 {
  color: #cbd5e1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* ============================================
   FORMS - Professional Form Styles
   ============================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  border: 2px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  transition: all 0.3s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  outline: none !important;
}

/* ============================================
   BADGES & LABELS - Professional Badges
   ============================================ */
.bg-indigo-100,
.bg-purple-100,
.bg-blue-100 {
  background: #dbeafe !important;
  color: #1e40af !important;
}

.bg-indigo-500,
.bg-purple-500,
.bg-blue-500 {
  background: #3b82f6 !important;
  color: white !important;
}

.bg-indigo-600,
.bg-purple-600,
.bg-blue-600 {
  background: #1e40af !important;
  color: white !important;
}

/* ============================================
   LINKS - Professional Link Styles
   ============================================ */
a {
  color: #1e40af !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

a:hover {
  color: #F9E50F !important;
  text-decoration: underline !important;
}

/* ============================================
   SCROLLBAR - Professional Scrollbar
   ============================================ */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: #3b82f6;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #1e40af;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
  .bg-white,
  .bg-white\/80 {
    padding: 1rem !important;
  }
  
  h1 {
    font-size: 2rem !important;
  }
  
  h2 {
    font-size: 1.75rem !important;
  }
  
  h3 {
    font-size: 1.25rem !important;
  }
}

/* ============================================
   ANIMATIONS - Subtle Professional Animations
   ============================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeIn 0.6s ease-out !important;
}

/* ============================================
   UTILITY CLASSES - Professional Utilities
   ============================================ */
.tra-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.tra-shadow-lg {
  box-shadow: 0 8px 24px rgba(30, 64, 175, 0.15) !important;
}

.tra-border-blue {
  border-color: #3b82f6 !important;
}

.tra-text-blue {
  color: #1e40af !important;
}

.tra-bg-blue {
  background-color: #1e40af !important;
}

.tra-bg-yellow {
  background-color: #F9E50F !important;
}