/* ========================================================
   Force hide top-level sidebar buttons (Captain, Campaigns, Help Center)
   Works for <div role="button"> style Chatwoot menus
   ======================================================== */

/* Hide by exact title or name */
div[role="button"][title="Captain"],
div[role="button"][name="Captain"],
div[role="button"][title="Campaigns"],
div[role="button"][name="Campaigns"],
div[role="button"][title="Help Center"],
div[role="button"][name="Help Center"],
div[role="button"][title="Knowledge Base"],
div[role="button"][name="Knowledge Base"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Also hide their parent <li> if one exists */
li:has(> div[role="button"][title="Captain"]),
li:has(> div[role="button"][title="Campaigns"]),
li:has(> div[role="button"][title="Help Center"]) {
  display: none !important;
}

/* Tidy spacing after removal */
aside nav ul {
  gap: 4px !important;
}

/* =========================================================================
   Shield Chat Branding (Login + Sidebar)
   ========================================================================= */

/* --- Replace top-left logo inside dashboard --- */
aside img[alt*="Chatwoot"],
aside img[src*="logo"],
.sidebar__logo img,
.topbar__logo img,
.app-logo img {
  content: url("/shield-logo.webp") !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  object-fit: contain !important;
  background: #fff !important;
  padding: 4px !important;
}

/* --- Replace any text title that says Chatwoot --- */
span,
div,
a {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

*[title="Chatwoot"]::after,
*[aria-label="Chatwoot"]::after {
  content: "Shield Chat" !important;
}

.sidebar__title,
.app-name,
.brand-title {
  visibility: visible !important;
  color: #ca2229 !important;
  font-weight: 600 !important;
}

.sidebar__title::before,
.app-name::before {
  content: "Shield Chat" !important;
  color: #ca2229 !important;
  font-weight: 600 !important;
}

/* --- Minor login page tweaks --- */
.login__logo img {
  content: url("/shield-logo.webp") !important;
  width: 180px !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

/* =========================================================================
   Shield Chat Branding — Replace Chatwoot Blue with Shield Red Gradient
   ========================================================================= */
:root {
  --shield-primary: #D82228;              /* main red */
  --shield-primary-dark: #B8181D;         /* hover red */
  --shield-primary-ink: #8A1A1D;          /* text red */
  --shield-tint-50: #FFF5F5;              /* very light red background */
  --shield-tint-100: #FCE9EA;             /* light red background */
  --shield-border: #F3C8CB;               /* soft red border */
}

/* ---------------------------------------
   1) Login page — keep it clean/white
   --------------------------------------- */
.login__container, .login__page, .devise__container, body.devise {
  background: #fff !important;
}

/* Hide “Login with SSO” buttons/section on the login page */
.devise__social-login,
.login__providers,
[data-test-id="social-login"],
.devise__separator,
.login__separator {
  display: none !important;
}

/* ===== Hide "Login via SSO" on the login screen ===== */

/* The SSO button itself (stable by URL) */
main a[href="/app/login/sso"],
main a[href*="/login/sso"] {
  display: none !important;
}

/* The “OR” separator that comes right after the SSO button */
main a[href*="/login/sso"] + .relative,
main a[href*="/login/sso"] + .relative.section-separator {
  display: none !important;
}

/* Optional: tighten spacing when SSO is hidden */
main form.space-y-5 {
  margin-top: 0 !important;
}

/* ===== Hide SSO login + "OR" separator (clean login page) ===== */

/* Hide the SSO login button */
main a[href*="/login/sso"],
main a[href*="/app/login/sso"] {
  display: none !important;
}

/* Hide the "OR" separator div */
.section-separator.uppercase,
div[class*="section-separator"] {
  display: none !important;
}

/* Optional: Adjust spacing so form stays tight */
main form.space-y-5 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* === Login Page Refinements === */

/* 1. Adjust login title text size */
h2.text-center.text-n-slate-12 {
  font-size: 1.5rem !important;
}

/* 2. Set logo height cleanly */
img[alt="Shield Chat"] {
  height: 100px !important;
  max-height: 100px !important;
  width: auto !important;
  object-fit: contain !important;
}