/* HotLeadz Custom Brand Theme */
/* Following brand-guide.md specifications for Tailwind + DaisyUI */

/* Import Inter font family as specified in brand guide */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

/* Higher specificity theme override for HotLeadz */
:root,
[data-theme],
[data-theme="hotleadz"] {
  /* Brand color mapping to DaisyUI variables - using !important for override */
  --primary: #313999 !important;          /* Blue - Primary brand color */
  --primary-focus: #1E235C !important;    /* Blue Dark - for hover/focus states */
  --primary-content: #FEFFFE !important;  /* White text on primary */
  
  --secondary: #36A9AE !important;        /* Green - Secondary brand color */
  --secondary-focus: #26797D !important;  /* Green Dark - for hover/focus states */
  --secondary-content: #FEFFFE !important; /* White text on secondary */
  
  --accent: #565FC8 !important;           /* Blue Light - Accent color */
  --accent-focus: #313999 !important;     /* Blue - for accent hover/focus */
  --accent-content: #FEFFFE !important;   /* White text on accent */
  
  --neutral: #8D818C !important;          /* Toupe Grey - Neutral color */
  --neutral-focus: #6B5D69 !important;    /* Darker neutral for hover states */
  --neutral-content: #FEFFFE !important;  /* White text on neutral */
  
  /* Base colors - page structure following brand hierarchy */
  --base-100: #FEFFFE !important;         /* Primary background (White) */
  --base-200: #E9EBF8 !important;         /* Secondary background (Lavender) */
  --base-300: #D4D8F0 !important;         /* Borders and subtle elements */
  --base-content: #313999 !important;     /* Default text color (Blue) */
  
  /* Status colors - semantic colors for alerts and states */
  --info: #73CFD4 !important;             /* Green Light for info messages */
  --info-content: #FEFFFE !important;     /* White text on info */
  
  --success: #36A9AE !important;          /* Green for success states */
  --success-content: #FEFFFE !important;  /* White text on success */
  
  --warning: #F59E0B !important;          /* Standard orange for warnings */
  --warning-content: #FEFFFE !important;  /* White text on warning */
  
  --error: #EF4444 !important;            /* Standard red for errors */
  --error-content: #FEFFFE !important;    /* White text on error */
}

/* Apply HotLeadz theme */
[data-theme="hotleadz"] {
  color-scheme: light;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
}

/* Force light background for body */
html[data-theme="hotleadz"],
body {
  background-color: var(--base-200) !important;
  color: var(--base-content) !important;
}

/* Hero section (login page) background fix */
.hero {
  background-color: var(--base-200) !important;
}

.hero-content {
  color: var(--base-content) !important;
}

/* Custom gradient utilities using brand colors */
.gradient-primary {
  background: linear-gradient(135deg, #313999 0%, #36A9AE 100%);
}

.gradient-secondary {
  background: linear-gradient(135deg, #565FC8 0%, #1E235C 100%);
}

.gradient-accent {
  background: linear-gradient(135deg, #73CFD4 0%, #26797D 100%);
}

/* Enhanced component styles for better brand alignment */

/* Card enhancements */
.card-branded {
  border: 1px solid rgba(49, 57, 153, 0.1);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.card-branded:hover {
  box-shadow: 0 8px 25px rgba(49, 57, 153, 0.1);
  border-color: rgba(49, 57, 153, 0.2);
}

/* Default card styling to match dashboard */
.card {
  background-color: var(--base-100) !important;
}

/* Prose styling for consistent text colors */
.prose h3 {
  color: var(--base-content) !important;
}

.prose p {
  color: var(--base-content) !important;
}

/* Button enhancements for better accessibility */
.btn-primary {
  font-weight: 600;
  letter-spacing: 0.025em;
}

.btn-secondary {
  font-weight: 600;
  letter-spacing: 0.025em;
}

/* Navigation active state enhancement */
.menu li > a.active {
  background-color: var(--primary);
  color: var(--primary-content);
  font-weight: 600;
}

.menu li > a:hover {
  background-color: var(--base-200);
  color: var(--base-content);
}

/* Form focus states using brand colors */
.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(49, 57, 153, 0.1);
}

/* Status badge refinements */
.badge-active {
  background-color: var(--success);
  color: var(--success-content);
}

.badge-inactive {
  background-color: var(--neutral);
  color: var(--neutral-content);
}

.badge-pending {
  background-color: var(--warning);
  color: var(--warning-content);
}

.badge-risk-low {
  background-color: var(--info);
  color: var(--info-content);
}

.badge-risk-medium {
  background-color: var(--warning);
  color: var(--warning-content);
}

.badge-risk-high {
  background-color: var(--error);
  color: var(--error-content);
}

.badge-risk-critical {
  background-color: var(--error);
  color: var(--error-content);
  font-weight: 700;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Table enhancements */
.table-branded th {
  background-color: var(--base-200);
  color: var(--base-content);
  font-weight: 600;
  border-bottom: 2px solid var(--primary);
}

.table-branded tr:hover {
  background-color: rgba(233, 235, 248, 0.5);
}

/* Standard table hover states */
.table tbody tr:hover {
  background-color: rgba(233, 235, 248, 0.5) !important;
}

/* Ensure table headers have correct styling */
.table thead th {
  background-color: var(--base-200) !important;
  color: var(--base-content) !important;
  font-weight: 600 !important;
}

/* Alert enhancements with better contrast */
.alert-success {
  background-color: rgba(54, 169, 174, 0.1);
  border-left: 4px solid var(--success);
  color: var(--success-focus);
}

.alert-error {
  background-color: rgba(239, 68, 68, 0.1);
  border-left: 4px solid var(--error);
  color: #dc2626;
}

.alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-left: 4px solid var(--warning);
  color: #d97706;
}

.alert-info {
  background-color: rgba(115, 207, 212, 0.1);
  border-left: 4px solid var(--info);
  color: var(--secondary-focus);
}

/* Typography enhancements */
.heading-primary {
  color: var(--primary);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.heading-secondary {
  color: var(--base-content);
  font-weight: 600;
}

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

/* Loading states with brand colors */
.loading-primary {
  color: var(--primary);
}

.loading-secondary {
  color: var(--secondary);
}

/* Enhanced shadows for depth */
.shadow-brand {
  box-shadow: 0 4px 14px 0 rgba(49, 57, 153, 0.1);
}

.shadow-brand-lg {
  box-shadow: 0 10px 25px 0 rgba(49, 57, 153, 0.15);
}

/* Responsive navigation enhancements */
@media (max-width: 768px) {
  .navbar-brand {
    flex: 1;
  }
  
  .menu-horizontal {
    flex-direction: column;
    width: 100%;
  }
}

/* Enhanced user dropdown styling */
.navbar details summary {
  color: var(--base-content);
}

.navbar details summary:hover {
  background-color: var(--base-200) !important;
  color: var(--primary) !important;
}

.navbar details[open] summary {
  background-color: var(--primary) !important;
  color: var(--primary-content) !important;
}

.navbar details ul {
  background-color: var(--base-100) !important;
  border: 1px solid var(--base-300) !important;
  box-shadow: 0 4px 6px -1px rgba(49, 57, 153, 0.1) !important;
}

.navbar details ul li a {
  color: var(--base-content) !important;
}

.navbar details ul li a:hover {
  background-color: var(--base-200) !important;
  color: var(--primary) !important;
}

/* Enhanced footer styling */
.footer {
  background-color: var(--base-100) !important;
  border-top: 1px solid var(--base-300) !important;
}

.footer p {
  color: var(--base-content) !important;
  transition: color 0.2s ease;
}

.footer:hover p {
  color: var(--primary);
}

/* Tab styling for vendor profile and similar pages */
.tabs-bordered {
  border-bottom-color: var(--base-300) !important;
}

.tab {
  color: var(--base-content) !important;
}

.tab:hover {
  background-color: var(--base-200) !important;
}

.tab-active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
  font-weight: 600;
}

/* Divider styling */
.divider {
  color: var(--base-content/30) !important;
}

.divider:before,
.divider:after {
  background-color: var(--base-300) !important;
}

/* Ensure all base elements use light backgrounds */
.bg-base-200 {
  background-color: var(--base-200) !important;
}

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

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

/* Ensure text colors are correct */
.text-base-content {
  color: var(--base-content) !important;
}

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

/* Print styles for professional documents */
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-accent {
    background: var(--base-100) !important;
    color: var(--base-content) !important;
  }
  
  .btn {
    border: 1px solid var(--base-content) !important;
    background: transparent !important;
    color: var(--base-content) !important;
  }
  
  .footer {
    border-top: 1px solid var(--base-content) !important;
    background: var(--base-100) !important;
  }
}