/* ============================================================
   LeTeam CRM — Light Theme Override (white / purple / gray)
   Targets actual Tailwind classes from the app's JSX components
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --lt-bg: #f4f2fa;
  --lt-surface: #ffffff;
  --lt-surface-hover: #f9f8fc;
  --lt-text: #1e1b2e;
  --lt-text-secondary: #64607a;
  --lt-text-muted: #9d97b0;
  --lt-border: #e8e5f0;
  --lt-primary: #7c3aed;
  --lt-primary-hover: #6d28d9;
  --lt-primary-light: #ede9fe;
  --lt-primary-ghost: #f5f3ff;
  --lt-card-shadow: 0 4px 24px rgba(124,58,237,.06), 0 1px 3px rgba(0,0,0,.04);
  --lt-card-shadow-hover: 0 8px 32px rgba(124,58,237,.10), 0 2px 6px rgba(0,0,0,.06);
}

/* ---------- Reset body / html ---------- */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
}

body {
  background: linear-gradient(135deg, #f4f2fa 0%, #eee9f8 40%, #f0ecf9 100%) !important;
  color: var(--lt-text) !important;
  font-family: "Manrope", "Inter", system-ui, -apple-system, sans-serif !important;
}

/* ---------- Remove white frame around #root ---------- */
#root {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ---------- Hide Emergent badge ---------- */
#emergent-badge { display: none !important; }

/* ==========================================================
   DARK BACKGROUND OVERRIDES → LIGHT
   ========================================================== */

/* Main page background: bg-[#09090b] */
.bg-\[\#09090b\] {
  background-color: var(--lt-bg) !important;
}

/* Header: bg-[#09090b]/80 */
.bg-\[\#09090b\]\/80 {
  background-color: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Dropdown/Select: bg-[#151517] */
.bg-\[\#151517\] {
  background-color: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  box-shadow: var(--lt-card-shadow) !important;
}

/* ==========================================================
   TEXT COLOR OVERRIDES → DARK
   ========================================================== */
.text-white {
  color: var(--lt-text) !important;
}
.text-white\/30 {
  color: var(--lt-text-muted) !important;
}
.text-white\/40 {
  color: var(--lt-text-muted) !important;
}
.text-white\/50 {
  color: var(--lt-text-secondary) !important;
}
.text-white\/60 {
  color: var(--lt-text-secondary) !important;
}
.text-white\/70 {
  color: var(--lt-text-secondary) !important;
}
.text-white\/80 {
  color: var(--lt-text) !important;
}
.text-white\/20 {
  color: var(--lt-text-muted) !important;
}

/* ==========================================================
   BORDER OVERRIDES
   ========================================================== */
.border-white\/5 {
  border-color: var(--lt-border) !important;
}
.border-white\/10 {
  border-color: var(--lt-border) !important;
}
.border-white\/20 {
  border-color: #d4d0e0 !important;
}
.border-white\/30 {
  border-color: #c8c3d6 !important;
}

/* ==========================================================
   SURFACE / CARD BACKGROUNDS
   ========================================================== */
.bg-white\/5 {
  background-color: var(--lt-primary-ghost) !important;
}
.bg-white\/10 {
  background-color: rgba(124,58,237,.06) !important;
}
.hover\:bg-white\/10:hover {
  background-color: rgba(124,58,237,.08) !important;
}

/* ==========================================================
   LOGIN PAGE
   ========================================================== */
.login-bg {
  background: linear-gradient(135deg, #ece8f5 0%, #e0d8f0 50%, #d8d0ec 100%) !important;
}

.glass-card {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  box-shadow: 0 20px 60px rgba(124,58,237,.08), 0 4px 16px rgba(0,0,0,.04) !important;
}

.input-dark {
  background: var(--lt-primary-ghost) !important;
  border: 1px solid var(--lt-border) !important;
  color: var(--lt-text) !important;
}
.input-dark::placeholder {
  color: var(--lt-text-muted) !important;
}
.input-dark:focus {
  border-color: var(--lt-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15) !important;
}

/* ==========================================================
   HEADER
   ========================================================== */
header {
  border-bottom-color: var(--lt-border) !important;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

/* Primary violet buttons — keep but enhance */
.bg-violet-600 {
  background-color: var(--lt-primary) !important;
  box-shadow: 0 4px 14px rgba(124,58,237,.25) !important;
}
.hover\:bg-violet-500:hover,
.hover\:bg-violet-700:hover {
  background-color: var(--lt-primary-hover) !important;
}

.btn-primary-glow {
  box-shadow: 0 4px 20px rgba(124,58,237,.30) !important;
}

/* Ghost buttons */
.hover\:text-white:hover {
  color: var(--lt-text) !important;
}

/* ==========================================================
   CLIENT CARDS
   ========================================================== */

/* Card container */
.rounded-xl.p-4.cursor-pointer.border {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--lt-card-shadow) !important;
  transition: all .2s ease !important;
}
.rounded-xl.p-4.cursor-pointer.border:hover {
  border-color: rgba(124,58,237,.3) !important;
  box-shadow: var(--lt-card-shadow-hover) !important;
  transform: translateY(-1px);
}

/* hover:border-violet-500/30 — keep violet hover */
.hover\:border-violet-500\/30:hover {
  border-color: rgba(124,58,237,.35) !important;
}

/* Client name */
.font-semibold.text-white.truncate {
  color: var(--lt-text) !important;
}

/* ==========================================================
   TAGS / CHIPS — keep colored but soften
   ========================================================== */

/* Tag pills - make slightly more vibrant on light bg */
.rounded-full.text-\[10px\] {
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

/* Status badges */
.bg-sky-500\/20 { background-color: rgba(14,165,233,.12) !important; }
.bg-orange-500\/20 { background-color: rgba(249,115,22,.12) !important; }
.bg-emerald-500\/20 { background-color: rgba(16,185,129,.12) !important; }
.bg-red-500\/20 { background-color: rgba(239,68,68,.12) !important; }
.bg-amber-500\/20 { background-color: rgba(245,158,11,.12) !important; }
.bg-pink-500\/20 { background-color: rgba(236,72,153,.12) !important; }
.bg-slate-500\/20 { background-color: rgba(100,116,139,.10) !important; }

/* Tag text colors — slightly darker for light bg */
.text-sky-400 { color: #0284c7 !important; }
.text-orange-400 { color: #ea580c !important; }
.text-emerald-400 { color: #059669 !important; }
.text-red-400 { color: #dc2626 !important; }
.text-amber-400 { color: #d97706 !important; }
.text-pink-400 { color: #db2777 !important; }
.text-slate-400 { color: #64748b !important; }

/* Tag borders */
.border-emerald-500\/40 { border-color: rgba(16,185,129,.25) !important; }
.border-red-500\/40 { border-color: rgba(239,68,68,.25) !important; }
.border-amber-500\/40 { border-color: rgba(245,158,11,.25) !important; }
.border-pink-500\/40 { border-color: rgba(236,72,153,.25) !important; }
.border-slate-500\/40 { border-color: rgba(100,116,139,.20) !important; }

/* ==========================================================
   DAYS BADGE
   ========================================================== */
.px-2.py-0\.5.rounded.text-xs.font-medium {
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* ==========================================================
   DROPDOWN MENU
   ========================================================== */
[data-radix-popper-content-wrapper] {
  --radix-popper-transform-origin: top center;
}

[role="menu"] {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04) !important;
  border-radius: 12px !important;
}

[role="menuitem"] {
  color: var(--lt-text) !important;
}
[role="menuitem"]:hover,
[role="menuitem"]:focus {
  background: var(--lt-primary-ghost) !important;
  color: var(--lt-text) !important;
}

/* ==========================================================
   SELECT TRIGGER & CONTENT
   ========================================================== */
[role="combobox"],
[role="listbox"] {
  background: var(--lt-surface) !important;
  border-color: var(--lt-border) !important;
  color: var(--lt-text) !important;
}

[role="option"] {
  color: var(--lt-text) !important;
}
[role="option"]:hover,
[role="option"][data-highlighted] {
  background: var(--lt-primary-ghost) !important;
}

/* ==========================================================
   DIALOGS / MODALS
   ========================================================== */
[role="dialog"] {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.12) !important;
  color: var(--lt-text) !important;
}

[role="alertdialog"] {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  color: var(--lt-text) !important;
}

/* Dialog overlay */
[data-state="open"][role="dialog"] ~ div,
.fixed.inset-0 {
  background: rgba(30,27,46,.4) !important;
}

/* ==========================================================
   INPUTS (general)
   ========================================================== */
input, select, textarea {
  background: var(--lt-primary-ghost) !important;
  border: 1px solid var(--lt-border) !important;
  color: var(--lt-text) !important;
  border-radius: 10px !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--lt-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--lt-text-muted) !important;
}

/* ==========================================================
   OTP INPUT SLOTS
   ========================================================== */
[data-input-otp-slot] {
  background: var(--lt-primary-ghost) !important;
  border: 1px solid var(--lt-border) !important;
  color: var(--lt-text) !important;
}

/* ==========================================================
   TABS (Admin Panel)
   ========================================================== */
[role="tablist"] {
  background: rgba(124,58,237,.06) !important;
  border-radius: 10px !important;
}
[role="tab"] {
  color: var(--lt-text-secondary) !important;
}
[role="tab"][data-state="active"] {
  background: var(--lt-surface) !important;
  color: var(--lt-text) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}

/* ==========================================================
   SCROLLBARS
   ========================================================== */
*::-webkit-scrollbar { height: 8px; width: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(124,58,237,.18);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(124,58,237,.30);
}

/* ==========================================================
   GENDER ICONS — keep blue/pink
   ========================================================== */
.text-blue-400 { color: #3b82f6 !important; }
/* .text-pink-400 already defined above */

/* ==========================================================
   TOAST (sonner)
   ========================================================== */
[data-sonner-toast] {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  color: var(--lt-text) !important;
}

/* ==========================================================
   LOADING SPINNER — keep violet
   ========================================================== */
.border-violet-500 {
  border-color: var(--lt-primary) !important;
}

/* ==========================================================
   VIOLET ACCENTS — keep and enhance
   ========================================================== */
.text-violet-500 { color: var(--lt-primary) !important; }
.text-violet-400 { color: #8b5cf6 !important; }
.text-violet-300 { color: #a78bfa !important; }
.bg-violet-500\/20 { background-color: rgba(124,58,237,.12) !important; }
.border-violet-500\/50 { border-color: rgba(124,58,237,.4) !important; }
.shadow-violet-500\/20 { --tw-shadow-color: rgba(124,58,237,.15) !important; }

/* ==========================================================
   MISC UTILITIES
   ========================================================== */
.backdrop-blur-xl {
  backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Filter active count badge — keep violet */
.rounded-full.bg-violet-500 {
  background-color: var(--lt-primary) !important;
  color: #fff !important;
}

/* Empty state icon box */
.rounded-2xl.bg-white\/5 {
  background: var(--lt-primary-light) !important;
}

/* Space between client cards */
.space-y-2 > * + * {
  margin-top: 10px !important;
}