/* HALA LUXURY LATTE & MOCHA THEME — front-only recolor
   Loaded AFTER recruitops-rebrand.css to win the cascade on shared classes.
   Scope: front-facing pages only (home/catalog/booking/track/services/contact/about/worker-profile/booking-success/standby/terms/privacy).
   Do NOT include this file in admin/print layouts. */

:root {
  --mocha: #6B5142;
  --mocha-dark: #4A3526;
  --latte: #8C7560;
  --gold: #A8824F;
  --gold-dark: #8C6A3F;
  --gold-light: #C2A06B;
  --gold-pale: #F3E8D8;
  --gold-tint: #EFE1CC;
  --cream: #F8F3ED;
  --offwhite: #F1E8DB;
  --beige: #E7D8C9;
  --beige2: #CBB7A3;
  --gray-800: #2C1F15;
  --font-display: 'El Messiri', serif;
  --font-body: 'Cairo', 'Tajawal', sans-serif;
}

body, .front-page-main, main { font-family: var(--font-body); }
h1, h2, h3, .logo-text, .footer-brand, .hero-title { font-family: var(--font-display) !important; }

/* RecruitOPS rebrand overrides — NAVY + ORANGE solid (no gradients) */
:root {
  --recruitops-navy: #6B5142;
  --recruitops-navy-dark: #4A3526;
  --recruitops-navy-light: #8C7560;
  --recruitops-navy-soft: #F1E8DB;      /* very light navy tint */
  --recruitops-navy-tint: #E7D8C9;      /* mid-light navy tint */
  --recruitops-orange: #A8824F;
  --recruitops-orange-dark: #8C6A3F;
  --recruitops-orange-light: #C2A06B;
  --recruitops-orange-soft: #F3E8D8;    /* very light orange tint */
  --recruitops-orange-tint: #EFE1CC;    /* mid-light orange tint */

  --primary-gold: #6B5142 !important;
  --gold-gradient: #6B5142 !important;
  --mixed-gradient: #6B5142 !important;
  --shadow-gold: 0 4px 20px rgba(107, 81, 66, 0.25) !important;
}

/* Hero gradient-text fix */
.hero-title span, [class*="hero-title"] span, .hero h1 span, .section-title span {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
  color: #A8824F !important;
}
.hero-interactive-bg img { opacity: 0.06 !important; }


/* ─── TEAM SECTION (purple gradient → navy soft) ─── */
section.erp-surface.bg-gradient-to-br,
section[class*="from-purple"], section[class*="to-indigo"] {
  background: #F1E8DB !important;
  background-image: none !important;
  border: 1px solid #E7D8C9 !important;
}
.bg-purple-100, .bg-purple-50, .bg-indigo-100, .bg-indigo-50 {
  background-color: #E7D8C9 !important;
  background-image: none !important;
}
.text-purple-700, .text-purple-600, .text-purple-500,
.text-indigo-700, .text-indigo-600, .text-indigo-500 {
  color: #6B5142 !important;
}

/* ─── ACTIVITY FEED (blue/emerald → navy/orange) ─── */
.bg-blue-500, .bg-blue-600 { background-color: #6B5142 !important; }
.text-blue-600, .text-blue-700 { color: #6B5142 !important; }
.bg-blue-100, .bg-blue-50 { background-color: #E7D8C9 !important; }

.bg-emerald-500, .bg-emerald-600 { background-color: #A8824F !important; }
.text-emerald-600, .text-emerald-700 { color: #A8824F !important; }
.bg-emerald-100, .bg-emerald-50 { background-color: #EFE1CC !important; }

.bg-green-500, .bg-green-600 { background-color: #A8824F !important; }
.text-green-600, .text-green-700 { color: #A8824F !important; }
.bg-green-100, .bg-green-50 { background-color: #EFE1CC !important; }

/* Activity item hover */
.hover\:border-havana-gold\/35:hover { border-color: rgba(168,130,79,0.35) !important; }

/* Alerts severity dots */
.bg-havana-danger { background-color: #8C6A3F !important; }
.bg-havana-warning { background-color: #C2A06B !important; }
.bg-havana-info { background-color: #6B5142 !important; }

/* ─── SIDEBAR / NAV (the right vertical strip) ─── */
nav[class*="sidebar"], aside[class*="sidebar"], .sidebar {
  background-color: #FFFFFF !important;
}
.sidebar a.active, .sidebar .active a, .nav-item.active {
  background-color: #F1E8DB !important;
  color: #6B5142 !important;
  border-color: #6B5142 !important;
}

/* ─── FLOATING BUTTONS (bottom-left) ─── */
.fab, [class*="floating-action"], .floating-btn {
  background-color: #6B5142 !important;
  color: #fff !important;
}
.fab:nth-child(2) { background-color: #A8824F !important; }

/* ─── GENERIC brand surfaces ─── */
.bg-havana-forest, .bg-havana-forest-light, .bg-havana-sage, .bg-havana-sage-light {
  background: #6B5142 !important;
  background-image: none !important;
  color: #fff !important;
}

/* Primary buttons */
.btn-primary, button.btn-primary, .bg-blue-700 {
  background: #6B5142 !important;
  background-image: none !important;
  border-color: #6B5142 !important;
  color: #fff !important;
}
.btn-primary:hover, .bg-blue-700:hover, .hover\:bg-blue-700:hover {
  background: #4A3526 !important;
}

/* Accent buttons (orange) */
.bg-havana-gold, .bg-accent-500, .bg-accent-600 {
  background: #A8824F !important;
  background-image: none !important;
  color: #fff !important;
}
.text-havana-gold, .text-accent-500, .text-accent-600 { color: #A8824F !important; }
.border-havana-gold { border-color: #A8824F !important; }

/* Forest text -> navy */
.text-havana-forest, .text-havana-forest-light,
.text-havana-sage, .text-havana-sage-light {
  color: #6B5142 !important;
}
.border-havana-forest, .border-havana-forest-light,
.border-havana-sage, .border-havana-sage-light {
  border-color: #6B5142 !important;
}

/* Sand/shell soft backgrounds */
.bg-havana-sand  { background-color: #FAFBFE !important; background-image: none !important; }
.bg-havana-shell { background-color: #F1E8DB !important; background-image: none !important; }

/* Pills */
.pill.active {
  background: #6B5142 !important;
  color: #fff !important;
  border-color: #6B5142 !important;
}
.nat-pill.active {
  background: #FAFBFE !important;
  color: #6B5142 !important;
  border-color: #6B5142 !important;
}

/* Steps & feature icons */
.step-number {
  background: #6B5142 !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(107,81,66,0.25) !important;
}
.feature-icon { background: #F1E8DB !important; color: #6B5142 !important; }
.feature-card:hover .feature-icon { background: #6B5142 !important; color: #fff !important; }

/* Worker-card CTA (orange) */
.btn-card-primary {
  background: #A8824F !important;
  background-image: none !important;
  box-shadow: 0 2px 6px rgba(168,130,79,0.20) !important;
  color: #fff !important;
}
.btn-card-primary:hover { background: #8C6A3F !important; }

.form-section-title { color: #6B5142 !important; }

/* Inline-style gradient killers */
*[style*="linear-gradient(135deg, #2D5A4A"],
*[style*="linear-gradient(135deg,#2D5A4A"],
*[style*="linear-gradient(to right, #2D5A4A"],
*[style*="linear-gradient(135deg, #d4af37"],
*[style*="linear-gradient(135deg,#d4af37"],
*[style*="linear-gradient(135deg, #7B3FE4"],
*[style*="linear-gradient(135deg,#7B3FE4"] {
  background: #6B5142 !important;
  background-image: none !important;
}

/* Old emerald/green tailwind utilities used as accents -> navy */
.text-emerald-600.font-bold, .text-green-600.font-bold { color: #6B5142 !important; }
.bg-emerald-50 { background-color: #F1E8DB !important; }
.border-emerald-200 { border-color: #E7D8C9 !important; }


/* ─── RTL/LTR-aware accent border fix (for dashboard stat cards) ─── */
.grid > article.erp-surface:nth-child(3n+1),
.grid > article.erp-surface:nth-child(3n+2),
.grid > article.erp-surface:nth-child(3n+3) {
  border-left-width: 1px !important;
  border-right-width: 1px !important;
}
.grid > article.erp-surface:nth-child(3n+1),
.grid > article.erp-surface:nth-child(3n+3) {
  border-inline-start: 4px solid #6B5142 !important;
}
.grid > article.erp-surface:nth-child(3n+2) {
  border-inline-start: 4px solid #A8824F !important;
}


/* ─── SEARCH INPUTS (everywhere) — soft orange tint matching logo accent ─── */
input[type="search"],
input[name="search"],
input.filter-search-input,
input.search-input,
input.ui-input,
.search-bar input,
.filter-bar input,
.search-wrap input,
.search-inner input,
form input[placeholder*="بحث"],
form input[placeholder*="ابحث"],
form input[placeholder*="Search"] {
  background-color: #F3E8D8 !important;   /* soft orange tint */
  background-image: none !important;
  border-color: #E7D8C9 !important;
  color: #6B5142 !important;
}

input[type="search"]::placeholder,
input[name="search"]::placeholder,
.filter-search-input::placeholder,
.search-input::placeholder {
  color: rgba(107, 81, 66, 0.45) !important;
}

input[type="search"]:focus,
input[name="search"]:focus,
.filter-search-input:focus,
.search-input:focus,
.ui-input:focus {
  background-color: #F3E8D8 !important;
  border-color: #A8824F !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(168, 130, 79, 0.15) !important;
}

/* Search icon inside search wrappers */
.search-icon, .search-bar svg, .filter-bar svg {
  color: #A8824F !important;
}

/* Filter dropdowns next to search (الكل / كل الحالات / كل الجنسيات) — make them visually grouped */
.filter-bar select,
form select.filter-select,
.filter-item select {
  background-color: #F8F3ED !important;
  border-color: #E7D8C9 !important;
  color: #6B5142 !important;
}
.filter-bar select:focus, form select.filter-select:focus, .filter-item select:focus {
  border-color: #A8824F !important;
  box-shadow: 0 0 0 3px rgba(168, 130, 79, 0.15) !important;
}


/* ─── GLOBAL SEARCH BAR (havana-search-* classes — top of admin pages) ─── */
.havana-search-wrap {
  background: transparent !important;
  background-image: none !important;
  padding: 1px !important;
  box-shadow: none !important;
}
.havana-search-wrap.is-active {
  background: transparent !important;
  background-image: none !important;
  box-shadow: 0 0 0 3px rgba(168, 130, 79, 0.18) !important;
  transform: none !important;
}
.havana-search-inner {
  background-color: #F3E8D8 !important;
  background-image: none !important;
  border: 1px solid #E7D8C9 !important;
}
.havana-search-input {
  background-color: transparent !important;
  background-image: none !important;
  color: #6B5142 !important;
}
.havana-search-input::placeholder {
  color: rgba(107, 81, 66, 0.45) !important;
}
.havana-search-icon {
  background: rgba(168, 130, 79, 0.15) !important;
  background-image: none !important;
  color: #A8824F !important;
}
.havana-search-icon.is-active {
  background: #A8824F !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(168, 130, 79, 0.30) !important;
}
.havana-search-clear {
  color: #A8824F !important;
}

/* Override the Tailwind focus rings that point to havana-forest */
input.focus\:border-havana-forest:focus,
select.focus\:border-havana-forest:focus,
*[class*="focus:border-havana-forest"]:focus {
  border-color: #A8824F !important;
}
*[class*="focus:ring-havana-forest"]:focus {
  --tw-ring-color: rgba(168, 130, 79, 0.20) !important;
  box-shadow: 0 0 0 3px rgba(168, 130, 79, 0.20) !important;
}


/* ─── BROWSER AUTOFILL OVERRIDE (kills the yellow autofill highlight) ─── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #F3E8D8 inset !important;
  -webkit-text-fill-color: #6B5142 !important;
  caret-color: #6B5142 !important;
  transition: background-color 9999s ease-in-out 0s !important;
  background-color: #F3E8D8 !important;
}

/* Special tint for plain (non-search) form inputs autofilled */
form input[type="email"]:-webkit-autofill,
form input[type="password"]:-webkit-autofill,
form input[type="text"]:not([name="search"]):-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #FAFBFE inset !important;  /* navy soft */
}

/* Firefox autofill */
input:autofill { background-color: #F3E8D8 !important; }

/* ─── EXTRA SPECIFICITY for the transactions/index search input ─── */
/* Tailwind classes like .bg-white can be specific. Win by chaining selectors. */
form input[name="search"][class*="bg-white"],
form input[name="search"].bg-white {
  background-color: #F3E8D8 !important;
  background-image: none !important;
  border-color: #E7D8C9 !important;
}

/* ─── NAV ITEMS — ORANGE on HOVER, GRAY on ACTIVE (no navy) ─── */

/* HOVER → soft orange */
.erp-sidebar a:hover,
.erp-sidebar .erp-side-link:hover,
.erp-sidebar [x-data*="sidebarState"] > div > a:hover,
.erp-sidebar [x-data*="sidebarState"][data-open="true"] > div > a:hover,
.erp-sidebar nav a:hover,
[x-data*="sidebarState"] > div > a:hover {
  background-color: #F3E8D8 !important;   /* soft orange */
  background-image: none !important;
  border-color: rgba(168, 130, 79, 0.20) !important;
  color: #3A2A1E !important;
}
.erp-sidebar a.hover\:bg-cream-50:hover,
.erp-sidebar a.hover\:bg-emerald-50:hover,
.erp-sidebar a.hover\:bg-blue-50:hover,
.erp-sidebar a[class*="hover:bg-"]:hover {
  background-color: #F3E8D8 !important;
  background-image: none !important;
}

/* ACTIVE → soft gray (was navy due to bg-blue-50 override) */
.erp-sidebar a.bg-blue-50,
.erp-sidebar a.bg-emerald-50,
.erp-sidebar a[class*="bg-blue-50"]:not(:hover),
.erp-sidebar a[class*="bg-emerald-50"]:not(:hover),
.erp-sidebar .erp-side-link.bg-blue-50:not(:hover),
.erp-sidebar .erp-side-link.bg-emerald-50:not(:hover),
.erp-sidebar .erp-dashboard-link.bg-blue-50:not(:hover),
[x-data*="sidebarState"] > div > a.bg-blue-50:not(:hover),
[x-data*="sidebarState"] > div > a.bg-emerald-50:not(:hover) {
  background-color: #F1E8DB !important;  /* soft gray */
  background-image: none !important;
  border-color: #CBB7A3 !important;
  color: #4A3526 !important;
}

/* But if user HOVERS the active item, it still goes orange (the hover rule above wins via :hover) */

/* Icons on active items → keep neutral */
.erp-sidebar a.bg-blue-50 svg,
.erp-sidebar a.bg-emerald-50 svg,
.erp-sidebar a.text-blue-700 svg,
.erp-sidebar a.text-emerald-700 svg,
.erp-sidebar a > .text-blue-600,
.erp-sidebar a > .text-emerald-600 {
  color: #8C7560 !important;   /* neutral gray icon */
}

/* Generic dropdowns — SAME rule: orange on hover, gray on selected */
[role="menu"] a:hover,
[role="menu"] button:hover,
.dropdown-menu a:hover,
.dropdown-item:hover {
  background-color: #F3E8D8 !important;
  background-image: none !important;
  color: #3A2A1E !important;
}
[role="menu"] a[aria-current="page"]:not(:hover),
[role="option"][aria-selected="true"]:not(:hover),
.dropdown-item.active:not(:hover) {
  background-color: #F1E8DB !important;
  color: #2C1F15 !important;
}


/* ─── KILL YELLOW: map Tailwind yellow-* / amber-* to soft orange palette ─── */
/* Pending/Warning chips currently look yellow → make them light orange */

/* Backgrounds */
.bg-yellow-50,  .bg-amber-50  { background-color: #F3E8D8 !important; }   /* very light orange */
.bg-yellow-100, .bg-amber-100 { background-color: #EFE1CC !important; }   /* light orange */
.bg-yellow-200, .bg-amber-200 { background-color: #E7D8C9 !important; }
.bg-yellow-300, .bg-amber-300 { background-color: #C2A06B !important; }
.bg-yellow-400, .bg-amber-400 { background-color: #A8824F !important; }
.bg-yellow-500, .bg-amber-500 { background-color: #A8824F !important; }
.bg-yellow-600, .bg-amber-600 { background-color: #8C6A3F !important; }
.bg-yellow-700, .bg-amber-700 { background-color: #6B5142 !important; }

/* Text */
.text-yellow-500, .text-amber-500 { color: #A8824F !important; }
.text-yellow-600, .text-amber-600 { color: #8C6A3F !important; }
.text-yellow-700, .text-amber-700 { color: #6B5142 !important; }
.text-yellow-800, .text-amber-800 { color: #4A3526 !important; }
.text-yellow-900, .text-amber-900 { color: #2C1F15 !important; }

/* Borders */
.border-yellow-100, .border-amber-100 { border-color: #EFE1CC !important; }
.border-yellow-200, .border-amber-200 { border-color: #E7D8C9 !important; }
.border-yellow-300, .border-amber-300 { border-color: #C2A06B !important; }
.border-yellow-400, .border-amber-400 { border-color: #A8824F !important; }
.border-yellow-500, .border-amber-500 { border-color: #A8824F !important; }
.border-yellow-600, .border-amber-600 { border-color: #8C6A3F !important; }

/* Rings (focus states) */
.ring-yellow-200, .ring-amber-200 { --tw-ring-color: rgba(231, 216, 201, 0.5) !important; }
.ring-yellow-300, .ring-amber-300 { --tw-ring-color: rgba(194, 160, 107, 0.5) !important; }
.ring-yellow-500, .ring-amber-500 { --tw-ring-color: rgba(168, 130, 79, 0.4) !important; }

/* Divide colors */
.divide-yellow-200 > * + *, .divide-amber-200 > * + * { border-color: #E7D8C9 !important; }

/* Status pills: catch any utility with yellow keywords just in case */
.status-pending, .badge-warning, .chip-warning {
  background-color: #F3E8D8 !important;
  background-image: none !important;
  border-color: #E7D8C9 !important;
  color: #6B5142 !important;
}

/* Inline yellow hex codes used in some templates */
[style*="#FEF3C7"],  /* tailwind yellow-100 */
[style*="#FDE68A"],  /* yellow-200 */
[style*="#FCD34D"],  /* yellow-300 */
[style*="#FBBF24"]   /* yellow-400 */
{
  background-color: #EFE1CC !important;
  background-image: none !important;
}


/* ─── DASHBOARD CLEAN — minimalist, no stripes, all white ─── */

/* Reset everything previous on .erp-surface */
.erp-surface,
.grid > article.erp-surface,
section.grid > article.erp-surface,
.grid > article.erp-surface:nth-child(3n+1),
.grid > article.erp-surface:nth-child(3n+2),
.grid > article.erp-surface:nth-child(3n+3) {
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid #E7D8C9 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(74, 53, 38, 0.03) !important;
  padding: 16px !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
  border-inline-start: 1px solid #E7D8C9 !important;
  border-inline-end:   1px solid #E7D8C9 !important;
  position: relative;
}
.erp-surface:hover,
.grid > article.erp-surface:hover {
  border-color: #CBB7A3 !important;
  box-shadow: 0 4px 12px rgba(74, 53, 38, 0.05) !important;
}

/* Kill any decorative pseudo-elements from old version */
.grid > article.erp-surface::before,
section.grid > article.erp-surface::before {
  content: none !important;
  display: none !important;
}

/* Number — calm modern */
.erp-value {
  color: #6B5142 !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.3px !important;
}

/* Small kicker label */
.erp-kicker {
  color: #8C7560 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700 !important;
  font-size: 9.5px !important;
}

/* Action link — simple text link, no pill, no aggressive bg */
.grid > article.erp-surface a {
  color: #6B5547 !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  text-decoration: none !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.grid > article.erp-surface a:hover {
  color: #A8824F !important;
  background: transparent !important;
}

/* Team overview card (was purple gradient) */
section.erp-surface.bg-gradient-to-br,
section[class*="from-purple"],
section[class*="to-indigo"] {
  background: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid #E7D8C9 !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
}

/* Activity panel headers - subtle divider */
.erp-surface > .flex.items-center.justify-between {
  padding-bottom: 10px;
  border-bottom: 1px solid #F1E8DB;
  margin-bottom: 10px;
}

/* Activity panel header title */
.erp-surface h2 {
  color: #6B5142 !important;
  font-weight: 800 !important;
}

/* Empty state */
.rounded-lg.border-dashed {
  background-color: #F8F3ED !important;
  border-style: dashed !important;
  border-color: #E7D8C9 !important;
  border-radius: 12px !important;
  padding: 20px 12px !important;
  font-weight: 600 !important;
  color: #8C7560 !important;
}

/* erp-chip */
.erp-chip {
  background-color: #F1E8DB !important;
  color: #6B5547 !important;
  border: 1px solid #CBB7A3 !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
}
.erp-chip--gold {
  background-color: #F3E8D8 !important;
  color: #8C6A3F !important;
  border-color: #EFE1CC !important;
}

/* Gap between sections — slightly larger for breathing room */
.space-y-2 > * + * {
  margin-top: 10px !important;
}