/* ============================================
   XWINTRA Theme v2.1 - Minimal/Clean Design
   Apple/Notion inspired dark sidebar + modern UI
   ============================================ */

/* --- CSS Variables --- */
:root {
  --sidebar-bg: #0f172a;
  --sidebar-bg-end: #1a2332;
  --sidebar-text: #94a3b8;
  --sidebar-text-hover: #e2e8f0;
  --sidebar-active-bg: rgba(139, 92, 246, 0.15);
  --sidebar-active-text: #a78bfa;
  --sidebar-active-border: #8b5cf6;
  --sidebar-group-bg: rgba(139, 92, 246, 0.08);
  --sidebar-group-text: #c4b5fd;
  --sidebar-divider: rgba(148, 163, 184, 0.1);
  --main-bg: #f8fafc;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --accent-purple: #8b5cf6;
  --accent-green: #10b981;
  --accent-amber: #f59e0b;
  --accent-blue: #3b82f6;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --border-light: #e2e8f0;
}

/* --- Global Reset & Base --- */
body {
  background: var(--main-bg) !important;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Sidebar (dark theme) --- */
#root > div > div:first-child,
.w-64.bg-white.border-r {
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-end) 100%) !important;
  border-right: 1px solid rgba(148, 163, 184, 0.08) !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

/* Sidebar logo area */
#root > div > div:first-child > div:first-child {
  border-bottom: 1px solid var(--sidebar-divider) !important;
  padding: 1.5rem !important;
}

/* Logo text - high specificity to beat group header rule */
#root > div > div:first-child h1.bg-gradient-to-r {
  background-image: linear-gradient(135deg, #a78bfa 0%, #818cf8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Subtitle under logo */
#root > div > div:first-child h1 + p,
#root > div > div:first-child h1 + span,
#root > div > div:first-child > div:first-child > div > p {
  color: #64748b !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.02em !important;
}

/* All sidebar text/links default */
#root > div > div:first-child button,
#root > div > div:first-child a,
#root > div > div:first-child span,
#root > div > div:first-child p {
  color: var(--sidebar-text) !important;
  transition: all 0.15s ease !important;
}

/* Sidebar nav buttons */
#root > div > div:first-child nav button,
#root > div > div:first-child nav a {
  border-radius: 0.5rem !important;
  margin: 1px 0 !important;
  transition: all 0.15s ease !important;
}

/* Sidebar hover */
#root > div > div:first-child nav button:hover,
#root > div > div:first-child nav a:hover {
  background: rgba(148, 163, 184, 0.08) !important;
}
#root > div > div:first-child nav button:hover span,
#root > div > div:first-child nav button:hover svg,
#root > div > div:first-child nav a:hover span {
  color: var(--sidebar-text-hover) !important;
}

/* Active menu item */
#root > div > div:first-child .bg-brand-50,
#root > div > div:first-child [class*="bg-brand-50"] {
  background: var(--sidebar-active-bg) !important;
  border-left: 3px solid var(--sidebar-active-border) !important;
  padding-left: calc(1rem - 3px) !important;
}
#root > div > div:first-child .bg-brand-50 span,
#root > div > div:first-child .bg-brand-50 svg,
#root > div > div:first-child [class*="bg-brand-50"] span,
#root > div > div:first-child [class*="bg-brand-50"] svg,
#root > div > div:first-child .text-brand-600 {
  color: var(--sidebar-active-text) !important;
  font-weight: 600 !important;
}

/* Group header buttons - use nav to avoid matching logo h1 */
#root > div > div:first-child .bg-brand-50.text-brand-600,
#root > div > div:first-child nav [class*="bg-gradient"],
#root > div > div:first-child nav > button.bg-brand-50 {
  background: var(--sidebar-group-bg) !important;
  border-left: 3px solid var(--sidebar-active-border) !important;
}
#root > div > div:first-child .bg-brand-50.text-brand-600 span,
#root > div > div:first-child nav [class*="bg-gradient"] span {
  color: var(--sidebar-group-text) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Sidebar SVG icons */
#root > div > div:first-child svg {
  color: var(--sidebar-text) !important;
  opacity: 0.7;
  transition: all 0.15s ease !important;
}
#root > div > div:first-child .bg-brand-50 svg,
#root > div > div:first-child [class*="bg-brand-50"] svg {
  color: var(--sidebar-active-text) !important;
  opacity: 1;
}

/* Sidebar dividers */
#root > div > div:first-child hr,
#root > div > div:first-child .border-gray-100,
#root > div > div:first-child [class*="border-gray"] {
  border-color: var(--sidebar-divider) !important;
}

/* Sidebar scrollbar */
#root > div > div:first-child nav::-webkit-scrollbar { width: 4px; }
#root > div > div:first-child nav::-webkit-scrollbar-track { background: transparent; }
#root > div > div:first-child nav::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.2); border-radius: 4px; }

/* Sidebar bottom */
#root > div > div:first-child > div:last-child {
  border-top: 1px solid var(--sidebar-divider) !important;
}

/* --- Main Content Area --- */
#root > div > main, #root > div > div:nth-child(2) {
  background: var(--main-bg) !important;
}

/* --- Page Title --- */
#root > div > main h1:first-of-type, #root > div > div:nth-child(2) h1:first-of-type {
  font-size: 1.75rem !important; font-weight: 700 !important;
  color: var(--text-primary) !important; letter-spacing: -0.02em !important;
}

/* --- Dashboard StatCards --- */
#root > div > main .grid > div, .bg-white.rounded-xl.shadow-sm, .bg-white.rounded-lg.shadow-sm {
  background: var(--card-bg) !important; border-radius: 1rem !important;
  border: 1px solid var(--border-light) !important; box-shadow: var(--card-shadow) !important;
  transition: all 0.2s ease !important; position: relative; overflow: hidden;
}
#root > div > main .grid > div:hover, .bg-white.rounded-xl.shadow-sm:hover, .bg-white.rounded-lg.shadow-sm:hover {
  box-shadow: var(--card-shadow-hover) !important; transform: translateY(-1px);
}

/* Colored top accent */
#root > div > main .grid > div:nth-child(1)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-purple); border-radius: 1rem 1rem 0 0; }
#root > div > main .grid > div:nth-child(2)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-green); border-radius: 1rem 1rem 0 0; }
#root > div > main .grid > div:nth-child(3)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-amber); border-radius: 1rem 1rem 0 0; }
#root > div > main .grid > div:nth-child(4)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-blue); border-radius: 1rem 1rem 0 0; }

/* StatCard value & label */
#root > div > main .grid > div .text-2xl, #root > div > main .grid > div .text-3xl {
  font-weight: 700 !important; color: var(--text-primary) !important; letter-spacing: -0.02em !important;
}
#root > div > main .grid > div .text-sm.text-gray-500, #root > div > main .grid > div .text-xs {
  color: var(--text-secondary) !important; font-weight: 500 !important;
}
#root > div > main .grid > div .rounded-full, #root > div > main .grid > div .rounded-xl {
  border-radius: 0.75rem !important;
}

/* --- Section headings --- */
#root > div > main h2, #root > div > main h3 {
  font-weight: 600 !important; color: var(--text-primary) !important; letter-spacing: -0.01em !important;
}

/* --- Tables --- */
table { border-collapse: separate !important; border-spacing: 0 !important; }
thead th {
  background: #f1f5f9 !important; color: var(--text-secondary) !important;
  font-weight: 600 !important; font-size: 0.75rem !important;
  text-transform: uppercase !important; letter-spacing: 0.05em !important;
  padding: 0.75rem 1rem !important; border-bottom: 1px solid var(--border-light) !important;
}
thead th:first-child { border-radius: 0.5rem 0 0 0 !important; }
thead th:last-child { border-radius: 0 0.5rem 0 0 !important; }
tbody tr { transition: background 0.1s ease !important; }
tbody tr:hover { background: #f8fafc !important; }
tbody td { padding: 0.75rem 1rem !important; border-bottom: 1px solid #f1f5f9 !important; font-size: 0.875rem !important; }

/* --- Badges --- */
.bg-red-100, .bg-yellow-100, .bg-green-100, .bg-blue-100 {
  border-radius: 9999px !important; font-weight: 500 !important;
  font-size: 0.75rem !important; padding: 0.25rem 0.75rem !important;
}

/* --- Buttons --- */
button.bg-brand-600, button[class*="bg-brand-600"], .bg-brand-600 {
  border-radius: 0.5rem !important; font-weight: 500 !important; transition: all 0.15s ease !important;
}
button.bg-brand-600:hover, button[class*="bg-brand-600"]:hover {
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

/* --- Batch cards --- */
.bg-white.rounded-xl.p-6, .bg-white.rounded-lg.p-6, .bg-white.rounded-xl.p-4, .bg-white.rounded-lg.p-4 {
  background: var(--card-bg) !important; border: 1px solid var(--border-light) !important;
  border-radius: 1rem !important; box-shadow: var(--card-shadow) !important;
}

/* --- Progress bars --- */
.bg-green-500, .bg-emerald-500, .bg-yellow-500, .bg-amber-500, .bg-red-500, .bg-gray-200 { border-radius: 9999px !important; }

/* --- Review items --- */
#root > div > main .space-y-2 > div, #root > div > main .space-y-3 > div {
  border-radius: 0.75rem !important; transition: all 0.15s ease !important;
}

/* --- Loading/Scrollbar --- */
.animate-spin { color: var(--accent-purple) !important; }
main::-webkit-scrollbar { width: 6px; }
main::-webkit-scrollbar-track { background: transparent; }
main::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
main::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* --- Animations --- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
#root > div > main > * { animation: fadeInUp 0.3s ease forwards; }
#root > div > main > *:nth-child(1) { animation-delay: 0.05s; }
#root > div > main > *:nth-child(2) { animation-delay: 0.1s; }
#root > div > main > *:nth-child(3) { animation-delay: 0.15s; }
#root > div > main > *:nth-child(4) { animation-delay: 0.2s; }

/* --- Chat widget --- */
.chat-widget-button { box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4) !important; }

/* --- Responsive --- */
@media (max-width: 768px) {
  #root > div > div:first-child { width: 0 !important; overflow: hidden !important; }
}