/* ===================================================
   ORVA Luxury Light Theme
   Cream/gold palette matching the dashboard portal.
   Replaces dark ink theme with warm, airy luxury feel.
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap');

/* -- Color tokens: light luxury -------------------- */
:root {
  --background:   #faf7f2;
  --foreground:   #1a1610;
  --card:         #ffffff;
  --card-hover:   #f5f0e8;
  --border:       #e8dcc8;
  --accent:       #c9a84c;
  --accent-hover: #b8923e;
  --muted:        #9a9088;
  --danger:       #ef4444;
  --warning:      #f59e0b;
  --success:      #c9a84c;

  /* Tailwind green tokens -> gold */
  --color-green-400: #ddc78a;
  --color-green-500: #c9a84c;
}

/* -- Typography ------------------------------------ */
h1, h2, h3, h4, h5 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 400;
  letter-spacing: 0.2px;
}
h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; }
h2 { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 400; }
h3 { font-size: 1.1rem; font-weight: 500; }

/* -- Scrollbar ------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: #d4c5a0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* -- Global body ----------------------------------- */
body {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
}

/* -- Nav bar: frosted glass on light --------------- */
nav, header {
  background-color: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border) !important;
}
nav a, nav button, nav span {
  color: var(--foreground) !important;
}
nav [class*="text-accent"] {
  color: var(--accent) !important;
}

/* -- Accent colors --------------------------------- */
[class*="text-accent"], .text-accent {
  color: var(--accent) !important;
}
[class*="border-accent"], .border-accent {
  border-color: var(--accent) !important;
}

/* -- Buttons --------------------------------------- */
button[class*="bg-accent"],
a[class*="bg-accent"],
[class*="bg-accent"][class*="hover"] {
  background-color: var(--accent) !important;
  color: #ffffff !important;
  border: none !important;
}
button[class*="bg-accent"]:hover,
a[class*="bg-accent"]:hover {
  background-color: var(--accent-hover) !important;
}

/* -- Cards & panels: glass-morphism ---------------- */
[class*="bg-card"], .bg-card {
  background-color: rgba(255,255,255,0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(201,168,76,0.15) !important;
  border-radius: 16px !important;
}

/* -- Input fields ---------------------------------- */
input, textarea, select {
  background-color: #ffffff !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--muted) !important;
}
input:focus, textarea:focus, select:focus {
  outline-color: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12) !important;
}

/* -- Ring ------------------------------------------ */
[class*="ring-accent"], .ring-accent {
  --tw-ring-color: var(--accent) !important;
}

/* -- Badges & tags --------------------------------- */
[class*="bg-accent\/"],
[class*="bg-success"] {
  background-color: rgba(201,168,76,0.1) !important;
  color: var(--accent) !important;
}

/* -- Table ----------------------------------------- */
thead tr th {
  font-family: 'Inter', sans-serif;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  background-color: transparent !important;
  border-bottom: 1px solid var(--border) !important;
}
tbody tr {
  border-bottom: 1px solid rgba(232,220,200,0.5) !important;
}
tbody tr:hover {
  background-color: var(--card-hover) !important;
}

/* -- Selected / active row highlight --------------- */
tr[class*="bg-accent"],
tr[class*="border-accent"],
div[class*="bg-accent"][class*="border"] {
  background-color: rgba(201,168,76,0.08) !important;
  border-color: rgba(201,168,76,0.3) !important;
}

/* -- Progress / loading bars ----------------------- */
[role="progressbar"] > div {
  background-color: var(--accent) !important;
}

/* -- Checkboxes & radio buttons -------------------- */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: var(--accent);
}

/* -- Notification badges --------------------------- */
[class*="bg-danger"] {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}

/* -- Override hard blacks to cream ------------------ */
.bg-black, [class*="bg-black"] {
  background-color: var(--background) !important;
}
[class*="bg-background"] {
  background-color: var(--background) !important;
}

/* -- Muted text ------------------------------------ */
[class*="text-muted"] {
  color: var(--muted) !important;
}

/* -- Card hover lift ------------------------------- */
[class*="rounded"][class*="border"][class*="bg-card"] {
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}
[class*="rounded"][class*="border"][class*="bg-card"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important;
}

/* -- Sidebar / chat sidebar ------------------------ */
aside, [class*="border-r"][class*="bg-card"] {
  background-color: rgba(255,255,255,0.5) !important;
  border-color: var(--border) !important;
}

/* -- Dropdown / popup menus ------------------------ */
[class*="bg-card"][class*="shadow"],
[class*="bg-card"][class*="absolute"],
[class*="bg-card"][class*="fixed"] {
  background-color: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08) !important;
}

/* -- Search bar inside cards ----------------------- */
[class*="bg-card"] input {
  background-color: var(--background) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

/* -- Option elements in selects -------------------- */
option {
  background-color: #ffffff !important;
  color: var(--foreground) !important;
}