/* ========================================================
   HAITECHS CRM - Modern Premium Styling & Clean Aesthetics
   ======================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root {
  --font-family-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --haitechs-cyan: #00acc1;
  --haitechs-cyan-dark: #00838f;
  --haitechs-red: #9e1a38;
  --haitechs-gradient: linear-gradient(135deg, #00acc1 0%, #0097a7 50%, #00838f 100%);
  --haitechs-card-bg: rgba(255, 255, 255, 0.96);
  --haitechs-card-border: #e2e8f0;
  --haitechs-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

/* Base Typography */
html, body, #app, input, button, select, textarea, .text-slate-600, h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 172, 193, 0.3) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 9999px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 172, 193, 0.6);
}

/* ========================================================
   Logo Presentation & Aspect Ratio (HAITECHS)
   ======================================================== */
img[src*="logo.svg"],
img[src*="logo_dark.svg"],
img[alt="HAITECHS"],
img[alt="Nexus CRM"],
main section img {
  height: 52px !important;
  max-height: 52px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transition: transform 0.25s ease;
}

/* Sidebar Logo */
.app-sidebar img,
header img {
  max-height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* ========================================================
   Login & Auth Screen (Fixed clean borders & cards)
   ======================================================== */
main.bg-n-brand\/5,
main.bg-n-background,
.bg-n-brand\/5 {
  background: radial-gradient(circle at 10% 15%, rgba(0, 172, 193, 0.08) 0%, transparent 45%),
              radial-gradient(circle at 90% 85%, rgba(158, 26, 56, 0.05) 0%, transparent 45%),
              linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
  min-height: 100vh;
}

.dark main.bg-n-brand\/5,
.dark main.bg-n-background {
  background: radial-gradient(circle at 15% 20%, rgba(0, 172, 193, 0.12) 0%, transparent 50%),
              radial-gradient(circle at 85% 80%, rgba(158, 26, 56, 0.08) 0%, transparent 50%),
              linear-gradient(135deg, #090d16 0%, #0f172a 50%, #090c15 100%) !important;
}

/* Single Outer Card for Login: Clean, crisp rounded corners without double borders */
main section > div.bg-white,
main section > div.dark\:bg-n-solid-2,
.login--box {
  background: var(--haitechs-card-bg) !important;
  border: 1px solid var(--haitechs-card-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--haitechs-shadow) !important;
  overflow: visible !important;
}

.dark main section > div.bg-white,
.dark main section > div.dark\:bg-n-solid-2 {
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.5) !important;
}

/* Prevent inner forms from creating redundant borders or backgrounds */
main form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Clean Input Fields - Fixed alignment and edges */
input[type="text"],
input[type="email"],
input[type="password"] {
  border-radius: 8px !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border-color: #00acc1 !important;
  box-shadow: 0 0 0 3px rgba(0, 172, 193, 0.2) !important;
  outline: none !important;
}

/* Primary Action Buttons */
button[type="submit"],
.button.nice,
button.bg-n-brand {
  background: var(--haitechs-gradient) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px -1px rgba(0, 172, 193, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

button[type="submit"]:hover,
.button.nice:hover,
button.bg-n-brand:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px -2px rgba(0, 172, 193, 0.45) !important;
  filter: brightness(1.05) !important;
}

button[type="submit"]:active,
.button.nice:active {
  transform: translateY(0) !important;
}

/* Links & Accents */
a.text-n-brand,
.text-link {
  color: #00acc1 !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

a.text-n-brand:hover,
.text-link:hover {
  color: #00838f !important;
}

/* Sidebar Polish */
.app-sidebar,
aside.app-sidebar {
  background: #0b0f19 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.app-sidebar .sidebar-item {
  border-radius: 8px !important;
}

.app-sidebar .sidebar-item:hover {
  background: rgba(0, 172, 193, 0.12) !important;
}

.app-sidebar .sidebar-item.active {
  background: var(--haitechs-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 172, 193, 0.3) !important;
}

/* Hide third-party footers */
.powered-by-chatwoot,
.chatwoot-branding {
  display: none !important;
}