/*
===============================================================================
 JobHub Branding System – Overview
===============================================================================

1. PURPOSE
   This system provides consistent theming across JobHub while allowing 
   contractors to customize branding for their portals. 
   - JobHub's defaults are hardcoded here in CSS as CSS variables.
   - Contractors can override defaults through Firestore settings.
   - A Cloud Function resolves contractor choices into "final" color values.
   - Frontend always consumes only CSS variables (via final values when present).

-------------------------------------------------------------------------------
2. DEFAULTS
   - Hardcoded here in CSS (:root) for fallback and offline use.
   - Example variables:
       --header-color
       --header-text-color
       --main-background-color
   - These represent JobHub's official colors and never change unless the 
     platform itself is redeployed with new defaults.

-------------------------------------------------------------------------------
3. FIRESTORE STRUCTURE
   contractorUid/
     branding/
       company
         • primaryColor: "#hex"
         • secondaryColor: "#hex"
       customization
         • customBrandingEnabled: true|false
         • fields:
             headerColor: { source: "jobhubDefault|companyPrimary|companySecondary|custom", custom: "#hex" }
             headerTextColor: { ... }
             mainBackgroundColor: { ... }
       final
         • finalHeaderColor: "#hex"
         • finalHeaderTextColor: "#hex"
         • finalMainBackgroundColor: "#hex"

-------------------------------------------------------------------------------
4. NARROWING LOGIC (pseudocode)
   If customBrandingEnabled == false → always use JobHub default from CSS.

   Else for each field:
     - If source == "custom" and a custom hex is set → use that.
     - If source == "companyPrimary" → use contractor.primaryColor (else fallback to default).
     - If source == "companySecondary" → use contractor.secondaryColor (else fallback to default).
     - If source == "jobhubDefault" or anything missing → fallback to JobHub default.

   The result is always written into the "final" document as final{Field}Color.

-------------------------------------------------------------------------------
5. CLOUD FUNCTIONS
   - Trigger on changes to:
       contractors/{contractorUid}/branding/company
       contractors/{contractorUid}/branding/customization
   - Run recompute logic → update contractors/{contractorUid}/branding/final.

-------------------------------------------------------------------------------
6. FRONTEND INTEGRATION
   - branding.js subscribes only to contractors/{contractorUid}/branding/final.
   - Maps each final value to its CSS variable:
       finalHeaderColor        → --header-color
       finalHeaderTextColor    → --header-text-color
       finalMainBackgroundColor→ --main-background-color
   - Applies with document.documentElement.style.setProperty().
   - If Firestore doc is missing or incomplete, CSS defaults remain in effect.

-------------------------------------------------------------------------------
7. COMPONENT USAGE
   Always use CSS variables in components, never hardcoded colors.
   Example:
     <header style="background-color: var(--header-color);
                    color: var(--header-text-color)">
     <main   style="background-color: var(--main-background-color)">

-------------------------------------------------------------------------------
SUMMARY
   - Hardcoded CSS variables = permanent JobHub defaults (fallbacks).
   - Firestore = contractor-specific overrides only.
   - Cloud Function = resolves to final values.
   - Frontend = always uses CSS variables, no business logic.
===============================================================================
*/

:root {
  /* Current customizable fields */
  --header-color: #ffffff;
  --header-text-color: #1d4ed8;
  --main-background-color: #ffffff;
  
  /* Additional UI color variables (future customization) */
  /* Button colors */
  --button-primary-color: #3B82F6; /* Blue-500 */
  --button-secondary-color: #6B7280; /* Gray-500 */
  --button-text-color: #FFFFFF; /* White */
  
  /* Text colors */
  --heading-text-color: #111827; /* Gray-900 - very dark for headings */
  --body-text-color: #374151; /* Gray-700 - readable gray for body text */
  --link-color: #2563EB; /* Blue-600 - classic link blue */
  
  /* UI element colors */
  --border-color: #D1D5DB; /* Gray-300 - subtle borders */
  --input-background-color: #FFFFFF; /* White input backgrounds */
  --input-border-color: #D1D5DB; /* Gray-300 - subtle input borders */
  
  /* Status colors */
  --success-color: #10B981; /* Emerald-500 - clear success green */
  --warning-color: #F59E0B; /* Amber-500 - attention-grabbing orange */
  --error-color: #EF4444; /* Red-500 - clear error red */
  
  /* System Colors - Never affected by company branding */
  --dropdown-background: #FFFFFF;
  --dropdown-text: #374151;
  --dropdown-hover: #3B82F6;
  --logout-button-color: #EF4444;
  --logout-button-hover-color: #DC2626;
  
  /* Additional variables used by client pages */
  --dashboard-background: #f9fafb; /* Gray-50 - light background for dashboards */
  --primary-button-color: #3B82F6; /* Blue-500 - same as button-primary-color */
  --secondary-button-color: #6B7280; /* Gray-500 - same as button-secondary-color */
  --divider-border-color: #D1D5DB; /* Gray-300 - same as border-color */
  
  /* Login page specific variables */
  --primary-color: #3B82F6; /* Blue-500 - for primary elements */
  --primary-color-light: rgba(59, 130, 246, 0.1); /* Blue-500 with opacity for focus states */
  --hover-color: #2563EB; /* Blue-600 - for hover states */
  --shadow-color: rgba(0, 0, 0, 0.1); /* Subtle shadow color */
}

/* Basic styling classes that use CSS variables */
.header-styled {
  background-color: var(--header-color) !important;
  color: var(--header-text-color) !important;
}

/* More specific selector for header to override any Tailwind classes */
header.header-styled {
  background-color: var(--header-color) !important;
  color: var(--header-text-color) !important;
}

/* Even more specific in case Tailwind has higher specificity */
#mainHeader.header-styled {
  background-color: var(--header-color) !important;
  color: var(--header-text-color) !important;
}

.main-background {
  background-color: var(--main-background-color) !important;
}

/* Debug: Add a visible indicator when branding is applied */
.branding-applied .main-background {
  border: 3px solid #10b981 !important; /* Green border to show branding is working */
}

/* Debug: Fix layout issues */
.branding-applied .max-w-7xl {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 80rem !important; /* 7xl = 80rem */
}

.branding-applied .mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure content is centered and properly sized */
.branding-applied #mainContent,
.branding-applied #dashboardContent,
.branding-applied #loadingState,
.branding-applied #errorState {
  width: 100% !important;
  max-width: 80rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Button styling using CSS variables */
.btn-primary {
  background-color: var(--button-primary-color) !important;
  color: var(--button-text-color) !important;
  border-color: var(--button-primary-color) !important;
}

.btn-primary:hover {
  background-color: var(--button-primary-color) !important;
  opacity: 0.9;
}

.btn-secondary {
  background-color: var(--button-secondary-color) !important;
  color: var(--button-text-color) !important;
  border-color: var(--button-secondary-color) !important;
}

.btn-secondary:hover {
  background-color: var(--button-secondary-color) !important;
  opacity: 0.9;
}

/* Login page button classes */
.brand-primary-button {
  background-color: var(--primary-button-color) !important;
  color: var(--button-text-color) !important;
  border-color: var(--primary-button-color) !important;
  transition: all 0.2s ease-in-out;
}

.brand-primary-button:hover {
  background-color: var(--hover-color) !important;
  transform: translateY(-1px);
}

.brand-primary-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-color-light) !important;
}

/* Brand gradient for logos */
.brand-gradient {
  background: linear-gradient(135deg, var(--primary-button-color), var(--hover-color));
}

/* Text color utilities for login pages */
.text-brand-primary {
  color: var(--primary-button-color) !important;
}

.text-brand-primary:hover {
  color: var(--hover-color) !important;
}

/* Hover state for buttons */
.hover\:brand-primary-hover:hover {
  background-color: var(--hover-color) !important;
}

/* Text styling using CSS variables */
.text-heading {
  color: var(--heading-text-color) !important;
}

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

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

.text-link:hover {
  color: var(--link-color) !important;
  opacity: 0.8;
}

/* Form element styling using CSS variables */
.form-input {
  background-color: var(--input-background-color) !important;
  border-color: var(--input-border-color) !important;
  color: var(--body-text-color) !important;
}

.form-input:focus {
  border-color: var(--button-primary-color) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Status styling using CSS variables */
.text-success {
  color: var(--success-color) !important;
}

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

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

.bg-success {
  background-color: var(--success-color) !important;
  color: white !important;
}

.bg-warning {
  background-color: var(--warning-color) !important;
  color: white !important;
}

.bg-error {
  background-color: var(--error-color) !important;
  color: white !important;
}

/* Border styling using CSS variables */
.border-theme {
  border-color: var(--border-color) !important;
}

/* Header Navigation Links - Use neutral colors for readability */
.header-nav-link {
  color: #374151 !important; /* Default dark gray */
  transition: color 0.2s ease-in-out;
}

/* Header nav links turn blue on hover regardless of header color */
.header-nav-link:hover {
  color: #2563eb !important; /* Blue-600 */
}

/* Header nav icons also use neutral colors and blue on hover */
.header-nav-link svg {
  color: #374151 !important; /* Dark gray */
  stroke: #374151 !important;
  transition: color 0.2s ease-in-out, stroke 0.2s ease-in-out;
}

.header-nav-link:hover svg {
  color: #2563eb !important; /* Blue-600 */
  stroke: #2563eb !important;
}

/* When header is dark, make nav links white for contrast */
.header-dark .header-nav-link {
  color: #ffffff !important;
}

.header-dark .header-nav-link svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Hover states remain blue regardless of header color */
.header-dark .header-nav-link:hover,
.header-dark .header-nav-link:hover svg {
  color: #60a5fa !important; /* Lighter blue for dark backgrounds */
  stroke: #60a5fa !important;
}

/* Special styling for logout link - soft red default, darker red on hover */
.header-nav-link.logout-link {
  color: #fca5a5 !important; /* Soft pastel red (Red-300) */
}

.header-nav-link.logout-link svg {
  color: #fca5a5 !important; /* Soft pastel red */
  stroke: #fca5a5 !important;
}

.header-nav-link.logout-link:hover {
  color: #dc2626 !important; /* Darker red on hover (Red-600) */
}

.header-nav-link.logout-link:hover svg {
  color: #dc2626 !important; /* Darker red on hover */
  stroke: #dc2626 !important;
}

/* Logout link on dark headers - keep the same soft red for consistency */
.header-dark .header-nav-link.logout-link {
  color: #fca5a5 !important; /* Same soft red on dark backgrounds */
}

.header-dark .header-nav-link.logout-link svg {
  color: #fca5a5 !important;
  stroke: #fca5a5 !important;
}

/* Hover state for logout on dark headers - should be the same dark red */
.header-dark .header-nav-link.logout-link:hover {
  color: #dc2626 !important; /* Dark red on hover */
}

.header-dark .header-nav-link.logout-link:hover svg {
  color: #dc2626 !important; /* Dark red on hover */
  stroke: #dc2626 !important;
}

/* Header company name and subtitle should use header text color */
#headerCompanyName,
#companyName,
.header-company-name {
  color: var(--header-text-color) !important;
}

#companySubtitle,
.header-company-subtitle {
  color: var(--header-text-color) !important;
  opacity: 0.8; /* Slightly faded for subtitle effect */
}

/* Mobile menu button should use neutral colors for readability */
.mobile-menu-btn,
.mobile-menu-button,
#mobileMenuToggle {
  color: #374151 !important; /* Dark gray by default */
  transition: color 0.2s ease-in-out;
}

.mobile-menu-btn svg,
.mobile-menu-button svg,
#mobileMenuToggle svg {
  stroke: #374151 !important;
  transition: stroke 0.2s ease-in-out;
}

/* Mobile menu button hover */
.mobile-menu-btn:hover,
.mobile-menu-button:hover,
#mobileMenuToggle:hover {
  color: #2563eb !important;
}

.mobile-menu-btn:hover svg,
.mobile-menu-button:hover svg,
#mobileMenuToggle:hover svg {
  stroke: #2563eb !important;
}

/* White mobile menu button on dark headers */
.header-dark .mobile-menu-btn,
.header-dark .mobile-menu-button,
.header-dark #mobileMenuToggle {
  color: #ffffff !important;
}

.header-dark .mobile-menu-btn svg,
.header-dark .mobile-menu-button svg,
.header-dark #mobileMenuToggle svg {
  stroke: #ffffff !important;
}

.header-dark .mobile-menu-btn:hover,
.header-dark .mobile-menu-button:hover,
.header-dark #mobileMenuToggle:hover {
  color: #60a5fa !important; /* Lighter blue for dark backgrounds */
}

.header-dark .mobile-menu-btn:hover svg,
.header-dark .mobile-menu-button:hover svg,
.header-dark #mobileMenuToggle:hover svg {
  stroke: #60a5fa !important;
}

/* Ensure dropdown menu text is always dark gray for visibility */
/* These rules override smart navigation colors for dropdown content ONLY */
.group-hover\:opacity-100 a,
.group-hover\:opacity-100 span,
.group-hover\:opacity-100 div,
.absolute.bg-white a,
.absolute.bg-white span,
.absolute.bg-white div {
  color: var(--dropdown-text) !important;
}

/* Dropdown items should not inherit header navigation colors */
.header-dark .group-hover\:opacity-100 a,
.header-dark .group-hover\:opacity-100 span,
.header-dark .group-hover\:opacity-100 div,
.header-dark .absolute.bg-white a,
.header-dark .absolute.bg-white span,
.header-dark .absolute.bg-white div,
.header-light .group-hover\:opacity-100 a,
.header-light .group-hover\:opacity-100 span,
.header-light .group-hover\:opacity-100 div,
.header-light .absolute.bg-white a,
.header-light .absolute.bg-white span,
.header-light .absolute.bg-white div {
  color: var(--dropdown-text) !important;
}

/* Ensure dropdown icons use stroke for outline appearance */
.group-hover\:opacity-100 svg,
.absolute.bg-white svg {
  stroke: var(--dropdown-text) !important;
  color: var(--dropdown-text) !important;
}

/* Dropdown SVG icons should not inherit header navigation colors */
.header-dark .group-hover\:opacity-100 svg,
.header-dark .absolute.bg-white svg,
.header-light .group-hover\:opacity-100 svg,
.header-light .absolute.bg-white svg {
  stroke: var(--dropdown-text) !important;
  color: var(--dropdown-text) !important;
}

/* Remove CSS hover effects - let JavaScript handle them */
/* This prevents CSS from overriding JavaScript hover handlers */

/* Ensure dropdown backgrounds are always white */
.group-hover\:opacity-100,
.absolute.bg-white,
.group-hover\:visible,
[class*="dropdown"],
[class*="menu"] {
  background-color: var(--dropdown-background) !important;
  background: var(--dropdown-background) !important;
}

/* Ensure body background is applied correctly */
html, body {
  background-color: var(--main-background-color) !important;
  min-height: 100vh !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Ensure content containers are properly positioned */
.container, .max-w-7xl, .mx-auto {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Force layout fixes for common issues */
.max-w-7xl {
  max-width: 80rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure main content areas are properly sized and centered */
#mainContent,
#dashboardContent,
#loadingState,
#errorState {
  width: 100% !important;
  max-width: 80rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  box-sizing: border-box !important;
}

/* Action Cards - Special styling that should not be overridden by branding */
.action-card {
  background-color: #FFFFFF !important;
  color: inherit !important;
  transition: background-color 0.2s ease-in-out;
}
.action-card:hover { background-color: #F9FAFB !important; }
.action-card h3 { color: #1F2937 !important; }
.action-card p { color: #6B7280 !important; }

.action-card .bg-blue-100 { background-color: rgba(37, 99, 235, 0.15) !important; }
.action-card .text-blue-600 { color: #2563EB !important; }
.action-card .bg-green-100 { background-color: rgba(5, 150, 105, 0.15) !important; }
.action-card .text-green-600 { color: #059669 !important; }
.action-card .bg-purple-100 { background-color: rgba(124, 58, 237, 0.15) !important; }
.action-card .text-purple-600 { color: #7C3AED !important; }
.action-card .bg-yellow-100 { background-color: rgba(217, 119, 6, 0.15) !important; }
.action-card .text-yellow-600 { color: #D97706 !important; }

/* Fixed CSS selector - added * for partial matching */
.action-card div[class*="bg-"]:not(.bg-blue-100):not(.bg-green-100):not(.bg-purple-100):not(.bg-yellow-100) {
  background-color: inherit !important;
}
.action-card div[class*="text-"]:not(.text-blue-600):not(.text-green-600):not(.text-purple-600):not(.text-yellow-600) {
  color: inherit !important;
}

/* Loading States */
.loading {
  opacity: 0.5;
  pointer-events: none;
}

/* Branding Applied State - Use CSS variables for styling */
.branding-applied {
  /* Styling is now handled via CSS variables updated by JavaScript */
  transition: all 0.2s ease-in-out;
}

/* Branding Preview Styles */
#customizationPreview {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
#customizationPreview * {
  box-sizing: border-box;
}

.color-preview {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid #e5e7eb;
  cursor: pointer;
}
.image-preview {
  max-width: 200px;
  max-height: 200px;
  object-fit: cover;
  border-radius: 8px;
}





/* Responsive Design */
@media (max-width: 640px) {
  .header-nav-link { padding: 8px 0; }
  .action-card { margin-bottom: 1rem; }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --main-background-color: #111827;
    --header-color: #1e40af;
  }
}

/* Print Styles */
@media print {
  .action-card {
    box-shadow: none !important;
    border: 1px solid #e5e7eb !important;
  }
}

/* Animation and Transition Classes */
.brand-transition { transition: all 0.2s ease-in-out; }
.brand-fade-in { animation: brandFadeIn 0.3s ease-in-out; }

/* Fallback layout fixes for when branding system fails */
.max-w-7xl {
  max-width: 80rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure content is always centered */
#mainContent,
#dashboardContent,
#loadingState,
#errorState {
  width: 100% !important;
  max-width: 80rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

@keyframes brandFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.brand-focus:focus {
  outline: 2px solid var(--header-color);
  outline-offset: 2px;
}

/* Improved form field styling */
.form-field-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.form-field-success {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --header-color: #000000;
    --header-text-color: #ffffff;
  }
  .action-card { border: 2px solid #000000 !important; }
}

/* Hide logo containers by default to prevent flash of wrong logo */
#companyLogo, .company-logo {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}