/* ============================================================
   Kapitel Intelligence — Monochrome minimal
   Zone A: Login  (main.min-h-screen.py-20)
   Zone B: Sidebar (aside.fixed.top-0)
   Palette: pure black + white + grays. Single accent: #3b82f6 on focus.
   ============================================================ */

/* =========================================================
   ZONE A — LOGIN
   ========================================================= */

body:has(main.min-h-screen.py-20) {
  background: #000 !important;
  color: #fff !important;
}

main.min-h-screen.py-20 {
  background: #000 !important;
  color: #fff !important;
  font-family: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif !important;
  position: relative;
  overflow: hidden;
}

/* Lift all content above the WebGL canvas (#kp-reveal is z-index 0 / fixed) */
main.min-h-screen.py-20 > * {
  position: relative;
  z-index: 1;
}

/* Subtle dark radial vignette over the canvas (matches original CanvasRevealEffect) */
main.min-h-screen.py-20::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 0%, transparent 38%, rgba(0, 0, 0, 0.55) 75%, #000 100%),
    linear-gradient(to bottom, #000 0%, transparent 18%, transparent 82%, #000 100%);
}

/* Logo */
main.min-h-screen.py-20 img[alt] {
  height: 88px !important;
  width: auto !important;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.12));
}

/* Heading */
main.min-h-screen.py-20 h2 {
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

/* Subtitle + secondary text */
main.min-h-screen.py-20 p,
main.min-h-screen.py-20 .text-n-slate-11 {
  color: rgba(255, 255, 255, 0.5) !important;
}
main.min-h-screen.py-20 h2.text-n-slate-12,
main.min-h-screen.py-20 .text-n-slate-12 {
  color: #ffffff !important;
}

/* Card — dark glassmorphism */
main.min-h-screen.py-20 section.bg-white,
main.min-h-screen.py-20 section[class*="bg-white"],
main.min-h-screen.py-20 section.shadow,
main.min-h-screen.py-20 section.sm\:rounded-lg {
  background: rgba(10, 10, 10, 0.6) !important;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
  color: #ffffff !important;
  transition: border-color 0.2s ease;
}

main.min-h-screen.py-20 section.bg-white:hover,
main.min-h-screen.py-20 section[class*="bg-white"]:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Labels */
main.min-h-screen.py-20 label {
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* Inputs — pill shape */
main.min-h-screen.py-20 input[type="text"],
main.min-h-screen.py-20 input[type="email"],
main.min-h-screen.py-20 input[type="password"],
main.min-h-screen.py-20 input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]) {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  padding: 12px 18px !important;
  font-size: 15px !important;
  caret-color: #3b82f6 !important;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

main.min-h-screen.py-20 input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
  opacity: 1 !important;
}

main.min-h-screen.py-20 input:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

main.min-h-screen.py-20 input:focus,
main.min-h-screen.py-20 input:focus-visible {
  outline: none !important;
  border-color: rgba(59, 130, 246, 0.55) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14) !important;
}

/* Autofill fix */
main.min-h-screen.py-20 input:-webkit-autofill,
main.min-h-screen.py-20 input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(12, 12, 12, 1) inset !important;
  caret-color: #3b82f6 !important;
}

/* Primary submit — white pill */
main.min-h-screen.py-20 button[type="submit"],
main.min-h-screen.py-20 form button[data-testid="submit_button"] {
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 12px 24px !important;
  letter-spacing: 0.005em;
  box-shadow:
    0 0 24px rgba(255, 255, 255, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.4) !important;
  transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.25s ease !important;
}

main.min-h-screen.py-20 button[type="submit"]:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow:
    0 0 32px rgba(255, 255, 255, 0.15),
    0 6px 20px rgba(0, 0, 0, 0.45) !important;
}

main.min-h-screen.py-20 button[type="submit"]:active:not(:disabled) {
  transform: translateY(0);
}

main.min-h-screen.py-20 button[type="submit"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Links */
main.min-h-screen.py-20 a,
main.min-h-screen.py-20 a.text-link,
main.min-h-screen.py-20 a[class*="text-link"] {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color 0.18s ease;
}
main.min-h-screen.py-20 a:hover {
  color: #ffffff !important;
}

/* SSO / SAML outlined button */
main.min-h-screen.py-20 a[class*="ring-"],
main.min-h-screen.py-20 a.inline-flex.ring-1 {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
main.min-h-screen.py-20 a[class*="ring-"]:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
main.min-h-screen.py-20 a[class*="ring-"] span,
main.min-h-screen.py-20 a[class*="ring-"] .text-n-slate-12 {
  color: #ffffff !important;
}
main.min-h-screen.py-20 a[class*="ring-"] [class*="i-lucide"],
main.min-h-screen.py-20 a[class*="ring-"] .text-n-slate-11 {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Divider uppercase label */
main.min-h-screen.py-20 .uppercase {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Error wiggle state */
main.min-h-screen.py-20 section.animate-wiggle {
  border-color: rgba(239, 68, 68, 0.45) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(239, 68, 68, 0.2) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  main.min-h-screen.py-20 button[type="submit"]:hover:not(:disabled) {
    transform: none;
  }
}

/* Responsive */
@media (max-width: 520px) {
  main.min-h-screen.py-20 section.bg-white,
  main.min-h-screen.py-20 section[class*="bg-white"] {
    padding: 24px 20px !important;
  }
  main.min-h-screen.py-20 img[alt] {
    height: 72px !important;
  }
}


/* =========================================================
   ZONE B — SIDEBAR
   No cyan/blue accents. White-based states only.
   ========================================================= */

aside.fixed.top-0.h-full.z-40,
aside.fixed.top-0[class*="bg-n-background"] {
  background: #000000 !important;
  border-right-color: rgba(255, 255, 255, 0.06) !important;
  border-left-color: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

aside.fixed.top-0 .text-n-slate-11,
aside.fixed.top-0 .text-n-slate-12 {
  color: rgba(255, 255, 255, 0.75) !important;
}

aside.fixed.top-0 .text-n-slate-10 {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Separators / divider strokes inside sidebar */
aside.fixed.top-0 .bg-n-strong,
aside.fixed.top-0 .border-n-weak {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Gradient fade at top of scroll list */
aside.fixed.top-0 .bg-gradient-to-t.from-n-background {
  background: linear-gradient(to top, #000000, transparent) !important;
}

/* Search / top control pills */
aside.fixed.top-0 .bg-n-button-color {
  background: rgba(255, 255, 255, 0.04) !important;
  outline-color: rgba(255, 255, 255, 0.08) !important;
}
aside.fixed.top-0 .outline-n-weak {
  outline-color: rgba(255, 255, 255, 0.08) !important;
}

/* Nav items */
aside.fixed.top-0 nav a,
aside.fixed.top-0 nav button,
aside.fixed.top-0 ul a,
aside.fixed.top-0 ul button {
  color: rgba(255, 255, 255, 0.5) !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}

aside.fixed.top-0 nav a [class*="i-lucide"],
aside.fixed.top-0 nav button [class*="i-lucide"],
aside.fixed.top-0 nav a svg,
aside.fixed.top-0 nav button svg {
  color: inherit !important;
}

/* Hover */
aside.fixed.top-0 nav a:hover,
aside.fixed.top-0 nav button:hover,
aside.fixed.top-0 ul a:hover,
aside.fixed.top-0 .hover\:bg-n-alpha-2:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* Active route */
aside.fixed.top-0 .router-link-active,
aside.fixed.top-0 .router-link-exact-active,
aside.fixed.top-0 [aria-current="page"],
aside.fixed.top-0 .bg-n-alpha-2,
aside.fixed.top-0 .bg-n-slate-3 {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.4);
}
aside.fixed.top-0 .router-link-active [class*="i-lucide"],
aside.fixed.top-0 .router-link-exact-active [class*="i-lucide"] {
  color: #ffffff !important;
}

/* Resize handle */
aside.fixed.top-0 .group-hover\:bg-n-brand,
aside.fixed.top-0 .group:hover .bg-transparent {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Seam shadow */
aside.fixed.top-0 {
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06) !important;
}

/* =====================================================================
   AUTH PAGES (defensive — body.kp-auth added by inject.js)
   Scoped: ONLY /app/login and /auth/* — never touches dashboard.
   Fallback for cases where Chatwoot DOM differs from main.min-h-screen.py-20
   ===================================================================== */
html:has(body.kp-auth){background:#050508 !important}
body.kp-auth{background:#050508 !important;color:#fff !important;font-family:'Inter',-apple-system,system-ui,'Segoe UI',Roboto,sans-serif !important}
body.kp-auth #app{background:#050508 !important}
body.kp-auth [class*="min-h-screen"]{background:#050508 !important}
body.kp-auth [class*="auth"],body.kp-auth [class*="login"]{background-color:transparent !important}
body.kp-auth *{font-family:'Inter',-apple-system,system-ui,'Segoe UI',Roboto,sans-serif !important}
/* Hide literal 'Chatwoot' branding headings if Vue renders them outside main.min-h-screen.py-20 */
body.kp-auth .auth-title,body.kp-auth .login-title,body.kp-auth h1[class*="installation"]{display:none !important}

/* =====================================================================
   AUTH LOGO — Chatwoot 4.12.1 (v3/views/login/Index.vue)
   DOM: <img :src="globalConfig.logo" :alt="globalConfig.installationName"
           class="block w-auto h-8 mx-auto dark:hidden"/> (+ dark variant)
   Strategy: CSS 'content: url()' replaces the rendered image with /logo.png,
             overriding the cyan text-SVG with the real brand PNG.
   Scoped to body.kp-auth so the dashboard is never affected.
   ===================================================================== */
/* Swap the VISIBLE <img> (light-mode) with PNG. :not(.hidden) skips the dark-mode variant. */
body.kp-auth main.min-h-screen.py-20 section img[alt]:not(.hidden){
  content:url('/brand-assets/logo.png?v=1') !important;
  width:160px !important;
  height:auto !important;
  max-height:120px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom:24px !important;
  filter:drop-shadow(0 0 32px rgba(14,165,233,.22)) drop-shadow(0 0 16px rgba(139,92,246,.18));
}
/* Defensive: the dark variant must stay hidden even if dark class is applied */
body.kp-auth main.min-h-screen.py-20 section img[alt].hidden{display:none !important}

/* Hide the 'Log in to your <X> account' h2 — logo-only header per user request */
body.kp-auth main.min-h-screen.py-20 h2{display:none !important}