@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800&family=Syne:wght@700;800&family=Inter:wght@400;500;600;700&display=swap');

/* Typography Override */
body, p, span, label, td, input, select, textarea, button, th {
  font-family: 'Inter', sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .logo, .brand-name, .logo-block .logo {
  font-family: 'Syne', 'Outfit', sans-serif !important;
}

/* Background & Glow spots */
body {
  background-color: #060609 !important;
  background: #060609 !important;
  color: #F3F4F6 !important;
  position: relative !important;
}

body::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

body::after {
  content: '';
  position: absolute;
  bottom: -10%;
  right: -10%;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, rgba(212, 255, 61, 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Header & Navigation Bar Upgrades */
header {
  background: rgba(6, 6, 9, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 18px 40px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  z-index: 100 !important;
}

header nav a {
  color: #9CA3AF !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 8px 16px !important;
  border-radius: 30px !important;
  transition: all 0.3s ease !important;
  border: 1px solid transparent !important;
  margin: 0 3px !important;
  text-decoration: none !important;
  display: inline-block !important;
}

header nav a:hover, header nav a.active {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

header nav a.active {
  border-color: #D4FF3D !important;
  color: #D4FF3D !important;
  background: rgba(212, 255, 61, 0.05) !important;
}

.btn-logout {
  border: 1px solid rgba(248, 113, 113, 0.2) !important;
  color: #f87171 !important;
  background: transparent !important;
}

.btn-logout:hover {
  background: rgba(248, 113, 113, 0.08) !important;
  border-color: #f87171 !important;
  color: #f87171 !important;
}

/* Glassmorphic Cards & Layout Containers */
.card, .leads-card, .invoice-preview, .config-card, .leads-table-container, .chart-card, .accounting-panel, .pricing-grid > div, .settings-panel, .invoice-form-card {
  background-color: #0E0E14 !important;
  background: #0E0E14 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 24px !important;
  padding: 30px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card:hover {
  border-color: rgba(212, 255, 61, 0.15) !important;
}

/* Inputs & Forms Styling */
input, select, textarea {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  padding: 12px 16px !important;
  transition: all 0.3s ease !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #D4FF3D !important;
  outline: none !important;
  box-shadow: 0 0 12px rgba(212, 255, 61, 0.15) !important;
}

/* Action Buttons */
.btn-submit, .btn-both, .btn-register, .btn-primary, .btn-add, .submit-btn, button[type="submit"], .btn-save {
  background: #D4FF3D !important;
  color: #060609 !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  box-shadow: 0 0 15px rgba(212, 255, 61, 0.2) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.btn-submit:hover, .btn-both:hover, .btn-register:hover, .btn-primary:hover, .btn-add:hover, button[type="submit"]:hover, .btn-save:hover {
  background: #9CCB1F !important;
  box-shadow: 0 0 25px rgba(212, 255, 61, 0.4) !important;
  transform: translateY(-2px) !important;
}

.btn-secondary, .btn-pdf, .btn-whatsapp, .btn-cancel {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.btn-secondary:hover, .btn-pdf:hover, .btn-whatsapp:hover, .btn-cancel:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Table Enhancements */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  background: transparent !important;
}

th {
  background-color: rgba(255, 255, 255, 0.02) !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 14px 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
}

td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  padding: 14px 16px !important;
  color: #E5E7EB !important;
  font-size: 13.5px !important;
  background: transparent !important;
}

tr:hover td {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Alert Styling */
.alert.success, .status-alert.success {
  background: rgba(52, 211, 153, 0.08) !important;
  border: 1px solid rgba(52, 211, 153, 0.15) !important;
  color: #34d399 !important;
}

.alert.error, .status-alert.error {
  background: rgba(248, 113, 113, 0.08) !important;
  border: 1px solid rgba(248, 113, 113, 0.15) !important;
  color: #f87171 !important;
}

/* Active badges */
.badge {
  border-radius: 30px !important;
  padding: 4px 12px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Sidebar & General Layout Container margins */
.container {
  max-width: 1300px !important;
  margin: 40px auto !important;
  padding: 0 20px !important;
  position: relative !important;
  z-index: 10 !important;
}