/* ==========================================================================
   UaiSocial Pro - Visual Identity & High-Contrast Design System
   - Dark Mode: Electric Green (#00e599, #05c483) + Crisp White Typography on Space Black Canvas (#090a0f)
   - Light Mode: Deep Forest Green (#046a38) + Deep Charcoal/Black Typography on Clean Surface (#ffffff)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS VARIABLES OVERRIDES (Root, Dark & Light Modes)
   -------------------------------------------------------------------------- */
:root,
body.dark,
.dark {
  /* High-Contrast Typography across all CRUDs, tables and cards */
  --new-btn-text: #ffffff !important;          /* Mapped to Tailwind text-textColor */
  --new-textColor: 255 255 255 !important;
  --new-table-text: #d4d4d8 !important;        /* Table headers, day names, hours (zinc-300) */
  --new-textItemBlur: #a1a1aa !important;      /* Inactive tabs, toggles and filters (zinc-400) */

  /* Active Pills & Toggle Highlights (Semana, Dia, Mês, Lista) */
  --new-boxFocused: #00e599 !important;        /* Vibrant Electric Green pill background */
  --new-textItemFocused: #03160e !important;   /* Bold dark text on active pill */

  /* Table Highlights (Today date dot & number) */
  --new-table-text-focused: #00e599 !important;

  /* Surfaces & Structural Borders */
  --new-bgColor: #090a0f !important;
  --new-bgColorInner: #12141a !important;
  --new-table-header: #181b22 !important;
  --new-table-border: rgba(255, 255, 255, 0.12) !important;
  --new-border: rgba(255, 255, 255, 0.12) !important;
  --new-btn-simple: #1e222b !important;
  --new-box-hover: #1f232d !important;
  --color-fifth: rgba(255, 255, 255, 0.12) !important;
  --color-sixth: #181b22 !important;

  /* Brand Action Colors */
  --color-forth: #00e599 !important;
  --color-seventh: #05c483 !important;
  --new-btn-primary: #00e599 !important;
  --color-custom4: #00e599 !important;
  --color-custom7: #00e599 !important;
  --color-custom45: #00e599 !important;
}

body.light,
.light {
  /* High-Contrast Typography across all CRUDs, tables and cards */
  --new-btn-text: #09090b !important;          /* Mapped to Tailwind text-textColor (deep dark) */
  --new-textColor: 9 9 11 !important;
  --new-table-text: #3f3f46 !important;        /* Table headers, day names, hours (zinc-700) */
  --new-textItemBlur: #52525b !important;      /* Inactive tabs, toggles and filters (zinc-600) */

  /* Active Pills & Toggle Highlights (Semana, Dia, Mês, Lista) */
  --new-boxFocused: #046a38 !important;        /* Deep Forest Green pill background */
  --new-textItemFocused: #ffffff !important;   /* Crisp white text on active pill */

  /* Table Highlights (Today date dot & number) */
  --new-table-text-focused: #046a38 !important;

  /* Surfaces & Structural Borders */
  --new-bgColor: #f4f5f7 !important;
  --new-bgColorInner: #ffffff !important;
  --new-table-header: #f1f3f6 !important;
  --new-table-border: #e2e5ea !important;
  --new-border: #e2e5ea !important;
  --new-btn-simple: #f1f3f6 !important;
  --new-box-hover: #e8ecf1 !important;
  --color-fifth: #e2e5ea !important;
  --color-sixth: #f8fafc !important;

  /* Brand Action Colors */
  --color-forth: #046a38 !important;
  --color-seventh: #03542c !important;
  --new-btn-primary: #046a38 !important;
  --color-custom4: #046a38 !important;
  --color-custom7: #046a38 !important;
  --color-custom45: #046a38 !important;
}


/* --------------------------------------------------------------------------
   2. TOP SIDEBAR LOGO ONLY (Preserves all Menu Navigation SVGs)
   -------------------------------------------------------------------------- */
div.flex.justify-center > svg[viewBox="0 0 60 60"],
#left-menu > div > div.flex.justify-center > svg {
  background: url('/brand/logo_square_512.png') no-repeat center center !important;
  background-size: contain !important;
  min-width: 44px !important;
  max-width: 48px !important;
  min-height: 44px !important;
  max-height: 48px !important;
  border-radius: 12px !important;
  filter: drop-shadow(0 0 10px rgba(0, 229, 153, 0.45)) !important;
  cursor: pointer !important;
}

div.flex.justify-center > svg[viewBox="0 0 60 60"] path,
div.flex.justify-center > svg[viewBox="0 0 60 60"] g,
#left-menu > div > div.flex.justify-center > svg path,
#left-menu > div > div.flex.justify-center > svg g {
  display: none !important;
}

body.light div.flex.justify-center > svg[viewBox="0 0 60 60"],
body.light #left-menu > div > div.flex.justify-center > svg {
  filter: drop-shadow(0 2px 8px rgba(4, 106, 56, 0.35)) !important;
}

/* Ensure ALL menu icons inside #left-menu (Calendário, Agent, Análises, Mídia, Configurações) RETAIN THEIR ORIGINAL SVGs! */
#left-menu a svg,
#left-menu button svg,
#left-menu div[class*="MenuItem"] svg,
#left-menu svg:not([viewBox="0 0 60 60"]) {
  display: block !important;
  background: none !important;
  min-width: unset !important;
  max-width: unset !important;
  min-height: unset !important;
  max-height: unset !important;
  border-radius: 0 !important;
  filter: none !important;
}

#left-menu a svg path,
#left-menu a svg g,
#left-menu button svg path,
#left-menu button svg g,
#left-menu svg:not([viewBox="0 0 60 60"]) path,
#left-menu svg:not([viewBox="0 0 60 60"]) g {
  display: inline !important;
}

/* Auth & Full Logos */
svg[viewBox="0 0 101 33"],
svg[viewBox="3 4 138.5 134.02"] {
  background: url('/brand/logo-text.svg') no-repeat center left !important;
  background-size: contain !important;
  min-width: 120px !important;
  min-height: 38px !important;
  cursor: pointer !important;
}

svg[viewBox="0 0 101 33"] path,
svg[viewBox="0 0 101 33"] g,
svg[viewBox="3 4 138.5 134.02"] path,
svg[viewBox="3 4 138.5 134.02"] g {
  display: none !important;
}


/* --------------------------------------------------------------------------
   3. HIGH-CONTRAST VIEW SWITCHERS & PILLS (Semana, Dia, Mês, Lista, Toggles)
   -------------------------------------------------------------------------- */

/* Active toggle pill in Dark Mode */
body.dark .bg-boxFocused,
body.dark [class*="bg-boxFocused"],
body:not(.light) .bg-boxFocused,
body:not(.light) [class*="bg-boxFocused"] {
  background-color: #00e599 !important;
  color: #03160e !important;
  font-weight: 700 !important;
  box-shadow: 0 0 14px rgba(0, 229, 153, 0.45) !important;
  border-radius: 6px !important;
}

body.dark .bg-boxFocused *,
body.dark [class*="bg-boxFocused"] *,
body:not(.light) .bg-boxFocused *,
body:not(.light) [class*="bg-boxFocused"] * {
  color: #03160e !important;
  stroke: #03160e !important;
  font-weight: 700 !important;
}

/* Inactive tabs / toggles in Dark Mode */
body.dark .text-textItemBlur,
body:not(.light) .text-textItemBlur {
  color: #a1a1aa !important;
  font-weight: 500 !important;
}

body.dark .text-textItemBlur:hover,
body:not(.light) .text-textItemBlur:hover {
  color: #ffffff !important;
}

/* Active toggle pill in Light Mode */
body.light .bg-boxFocused,
body.light [class*="bg-boxFocused"] {
  background-color: #046a38 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(4, 106, 56, 0.3) !important;
  border-radius: 6px !important;
}

body.light .bg-boxFocused *,
body.light [class*="bg-boxFocused"] * {
  color: #ffffff !important;
  stroke: #ffffff !important;
  font-weight: 700 !important;
}

/* Inactive tabs / toggles in Light Mode */
body.light .text-textItemBlur {
  color: #52525b !important;
  font-weight: 500 !important;
}

body.light .text-textItemBlur:hover {
  color: #046a38 !important;
}


/* --------------------------------------------------------------------------
   4. CALENDAR & DATE PICKER HIGH CONTRAST (Header, Days, Range, Hoje)
   -------------------------------------------------------------------------- */

/* Date Range selector (< 12/10/2026 - 18/10/2026 >) & Hoje button */
body.dark .text-textColor,
body:not(.light) .text-textColor {
  color: #ffffff !important;
}

body.light .text-textColor {
  color: #09090b !important;
}

/* Day labels in calendar header (segunda-feira, terça-feira...) */
body.dark .text-newTableText,
body:not(.light) .text-newTableText {
  color: #d4d4d8 !important;
  font-weight: 500 !important;
}

body.light .text-newTableText {
  color: #3f3f46 !important;
  font-weight: 500 !important;
}

/* Day dates in calendar header (12/10/2026, 13/10/2026...) */
body.dark .bg-newTableHeader > div:not(.text-newTableText),
body:not(.light) .bg-newTableHeader > div:not(.text-newTableText) {
  color: #ffffff !important;
  font-weight: 600 !important;
}

body.light .bg-newTableHeader > div:not(.text-newTableText) {
  color: #09090b !important;
  font-weight: 600 !important;
}

/* Current day highlight in Calendar (16/10/2026) */
body.dark .text-newTableTextFocused,
body:not(.light) .text-newTableTextFocused {
  color: #00e599 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(0, 229, 153, 0.5) !important;
}

body.dark .bg-newTableTextFocused,
body:not(.light) .bg-newTableTextFocused {
  background-color: #00e599 !important;
}

body.light .text-newTableTextFocused {
  color: #046a38 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

body.light .bg-newTableTextFocused {
  background-color: #046a38 !important;
}


/* --------------------------------------------------------------------------
   5. STANDARDIZED PRIMARY BUTTONS - DARK MODE
   Fundo: Verde Claro Elétrico (#00e599 -> #05c483)
   Texto & Ícones: Preto Carvão (#03160e) com Peso 700 (Ultra Contraste)
   -------------------------------------------------------------------------- */
body.dark button[type="submit"],
body.dark .bg-forth,
body.dark button.bg-forth,
body.dark a.bg-forth,
body.dark .bg-seventh,
body.dark button.bg-seventh,
body.dark a.bg-seventh,
body.dark .bg-btnPrimary,
body.dark .bg-\[\#612BD3\],
body.dark .bg-\[\#612bd3\],
body.dark .bg-\[\#713ce2\],
body.dark .bg-\[\#6730D9\],
body.dark .bg-\[\#5520CB\],
body.dark .bg-\[\#5023b8\],
body.dark .bg-\[\#7640e0\],
body.dark .bg-\[\#7B3FF2\],
body.dark [class*="bg-[#612"],
body.dark [class*="bg-[#713"],
body.dark [class*="bg-[#552"],
body.dark [class*="bg-[#673"],
body.dark [class*="bg-[#764"],
body.dark [class*="bg-[#7B3"],
body.dark a[href*="docs.postiz.com"],
body.dark a[href*="n8n-nodes-postiz"],
body:not(.light) button[type="submit"],
body:not(.light) .bg-forth,
body:not(.light) button.bg-forth,
body:not(.light) a.bg-forth,
body:not(.light) .bg-seventh,
body:not(.light) button.bg-seventh,
body:not(.light) a.bg-seventh,
body:not(.light) .bg-btnPrimary,
body:not(.light) .bg-\[\#612BD3\],
body:not(.light) .bg-\[\#612bd3\],
body:not(.light) .bg-\[\#5520CB\],
body:not(.light) [class*="bg-[#612"],
body:not(.light) [class*="bg-[#713"],
body:not(.light) [class*="bg-[#552"],
body:not(.light) a[href*="docs.postiz.com"],
body:not(.light) a[href*="n8n-nodes-postiz"] {
  background: linear-gradient(135deg, #00e599 0%, #05c483 100%) !important;
  color: #03160e !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 2px 12px rgba(0, 229, 153, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-shadow: none !important;
}

/* Force dark text and stroke on ALL children of dark mode primary buttons */
body.dark button[type="submit"] *,
body.dark .bg-forth *,
body.dark button.bg-forth *,
body.dark a.bg-forth *,
body.dark .bg-seventh *,
body.dark .bg-btnPrimary *,
body.dark .bg-\[\#612BD3\] *,
body.dark .bg-\[\#612bd3\] *,
body.dark .bg-\[\#5520CB\] *,
body.dark [class*="bg-[#612"] *,
body.dark [class*="bg-[#713"] *,
body.dark [class*="bg-[#552"] *,
body.dark a[href*="docs.postiz.com"] *,
body.dark a[href*="n8n-nodes-postiz"] *,
body:not(.light) button[type="submit"] *,
body:not(.light) .bg-forth *,
body:not(.light) button.bg-forth *,
body:not(.light) a.bg-forth *,
body:not(.light) .bg-btnPrimary *,
body:not(.light) [class*="bg-[#612"] *,
body:not(.light) [class*="bg-[#552"] *,
body:not(.light) a[href*="docs.postiz.com"] *,
body:not(.light) a[href*="n8n-nodes-postiz"] * {
  color: #03160e !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

body.dark button[type="submit"] svg,
body.dark .bg-forth svg,
body.dark a.bg-forth svg,
body.dark .bg-btnPrimary svg,
body.dark [class*="bg-[#612"] svg,
body.dark [class*="bg-[#552"] svg,
body.dark a[href*="docs.postiz.com"] svg,
body.dark a[href*="n8n-nodes-postiz"] svg,
body:not(.light) [class*="bg-[#612"] svg,
body:not(.light) [class*="bg-[#552"] svg {
  stroke: #03160e !important;
}

body.dark button[type="submit"] svg path,
body.dark .bg-forth svg path,
body.dark a.bg-forth svg path,
body.dark [class*="bg-[#612"] svg path,
body.dark [class*="bg-[#552"] svg path,
body.dark a[href*="docs.postiz.com"] svg path,
body.dark a[href*="n8n-nodes-postiz"] svg path {
  stroke: #03160e !important;
}

body.dark button[type="submit"]:hover,
body.dark .bg-forth:hover,
body.dark a.bg-forth:hover,
body.dark [class*="bg-[#612"]:hover,
body.dark [class*="bg-[#552"]:hover,
body.dark a[href*="docs.postiz.com"]:hover,
body.dark a[href*="n8n-nodes-postiz"]:hover,
body:not(.light) .bg-forth:hover,
body:not(.light) [class*="bg-[#612"]:hover {
  background: linear-gradient(135deg, #1affaa 0%, #00e599 100%) !important;
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 18px rgba(0, 229, 153, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}


/* --------------------------------------------------------------------------
   6. STANDARDIZED PRIMARY BUTTONS - LIGHT MODE
   Fundo: Verde Escuro Floresta (#046a38 -> #03542c)
   Texto & Ícones: Branco Puro (#ffffff) com Peso 700 (WCAG AAA)
   -------------------------------------------------------------------------- */
body.light button[type="submit"],
body.light .bg-forth,
body.light button.bg-forth,
body.light a.bg-forth,
body.light .bg-seventh,
body.light button.bg-seventh,
body.light a.bg-seventh,
body.light .bg-btnPrimary,
body.light .bg-\[\#612BD3\],
body.light .bg-\[\#612bd3\],
body.light .bg-\[\#713ce2\],
body.light .bg-\[\#6730D9\],
body.light .bg-\[\#5520CB\],
body.light .bg-\[\#5023b8\],
body.light .bg-\[\#7640e0\],
body.light .bg-\[\#7B3FF2\],
body.light [class*="bg-[#612"],
body.light [class*="bg-[#713"],
body.light [class*="bg-[#552"],
body.light [class*="bg-[#673"],
body.light [class*="bg-[#764"],
body.light [class*="bg-[#7B3"],
body.light a[href*="docs.postiz.com"],
body.light a[href*="n8n-nodes-postiz"] {
  background: linear-gradient(135deg, #046a38 0%, #03542c 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid #024021 !important;
  box-shadow: 0 2px 6px rgba(4, 106, 56, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-shadow: none !important;
}

/* Force pure white text and stroke on ALL children of light mode primary buttons */
body.light button[type="submit"] *,
body.light .bg-forth *,
body.light button.bg-forth *,
body.light a.bg-forth *,
body.light .bg-seventh *,
body.light .bg-btnPrimary *,
body.light .bg-\[\#612BD3\] *,
body.light .bg-\[\#612bd3\] *,
body.light .bg-\[\#5520CB\] *,
body.light [class*="bg-[#612"] *,
body.light [class*="bg-[#713"] *,
body.light [class*="bg-[#552"] *,
body.light a[href*="docs.postiz.com"] *,
body.light a[href*="n8n-nodes-postiz"] * {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

body.light button[type="submit"] svg,
body.light .bg-forth svg,
body.light a.bg-forth svg,
body.light .bg-btnPrimary svg,
body.light [class*="bg-[#612"] svg,
body.light [class*="bg-[#552"] svg,
body.light a[href*="docs.postiz.com"] svg,
body.light a[href*="n8n-nodes-postiz"] svg {
  stroke: #ffffff !important;
}

body.light button[type="submit"] svg path,
body.light .bg-forth svg path,
body.light a.bg-forth svg path,
body.light [class*="bg-[#612"] svg path,
body.light [class*="bg-[#552"] svg path,
body.light a[href*="docs.postiz.com"] svg path,
body.light a[href*="n8n-nodes-postiz"] svg path {
  stroke: #ffffff !important;
}

body.light button[type="submit"]:hover,
body.light .bg-forth:hover,
body.light a.bg-forth:hover,
body.light [class*="bg-[#612"]:hover,
body.light [class*="bg-[#552"]:hover,
body.light a[href*="docs.postiz.com"]:hover,
body.light a[href*="n8n-nodes-postiz"]:hover {
  background: linear-gradient(135deg, #057a41 0%, #046a38 100%) !important;
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(4, 106, 56, 0.35) !important;
}


/* --------------------------------------------------------------------------
   7. STANDARDIZED SECONDARY & GHOST BUTTONS (bg-btnSimple, bg-third)
   -------------------------------------------------------------------------- */
body.dark .bg-btnSimple,
body.dark button.bg-btnSimple,
body.dark .bg-third,
body:not(.light) .bg-btnSimple,
body:not(.light) .bg-third {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #e4e4e7 !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

body.dark .bg-btnSimple *,
body.dark .bg-third *,
body:not(.light) .bg-btnSimple *,
body:not(.light) .bg-third * {
  color: #e4e4e7 !important;
}

body.dark .bg-btnSimple:hover,
body.dark .bg-third:hover,
body:not(.light) .bg-btnSimple:hover,
body:not(.light) .bg-third:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(0, 229, 153, 0.4) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

body.light .bg-btnSimple,
body.light button.bg-btnSimple,
body.light .bg-third {
  background: #f4f4f5 !important;
  color: #18181b !important;
  font-weight: 600 !important;
  border: 1px solid #d4d4d8 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

body.light .bg-btnSimple *,
body.light .bg-third * {
  color: #18181b !important;
}

body.light .bg-btnSimple:hover,
body.light .bg-third:hover {
  background: #e4e4e7 !important;
  border-color: #046a38 !important;
  color: #046a38 !important;
  transform: translateY(-1px) !important;
}


/* --------------------------------------------------------------------------
   8. ALL CRUD TABLES, FORMS & INPUT CONTRAST
   -------------------------------------------------------------------------- */

/* Form inputs & textareas */
body.dark input,
body.dark textarea,
body.dark select,
body:not(.light) input,
body:not(.light) textarea,
body:not(.light) select {
  background-color: #12141a !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus,
body:not(.light) input:focus,
body:not(.light) textarea:focus,
body:not(.light) select:focus {
  border-color: #00e599 !important;
  box-shadow: 0 0 0 2px rgba(0, 229, 153, 0.25) !important;
  outline: none !important;
}

body.light input,
body.light textarea,
body.light select {
  background-color: #ffffff !important;
  color: #09090b !important;
  border-color: #cbd5e1 !important;
}

body.light input:focus,
body.light textarea:focus,
body.light select:focus {
  border-color: #046a38 !important;
  box-shadow: 0 0 0 2px rgba(4, 106, 56, 0.2) !important;
  outline: none !important;
}

/* Modals */
body.dark .mantine-Modal-modal,
body:not(.light) .mantine-Modal-modal {
  background-color: #12141a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.light .mantine-Modal-modal {
  background-color: #ffffff !important;
  color: #09090b !important;
  border: 1px solid #e2e5ea !important;
}

/* Switch / Toggle ON in Dark Mode */
body.dark .bg-customColor4,
body.dark [class*="bg-customColor4"],
body:not(.light) .bg-customColor4,
body:not(.light) [class*="bg-customColor4"] {
  background-color: #00e599 !important;
  box-shadow: 0 0 16px rgba(0, 229, 153, 0.55) !important;
}

body.dark .bg-customColor4 > div > div,
body:not(.light) .bg-customColor4 > div > div {
  background-color: #050811 !important;
}

/* Switch / Toggle ON in Light Mode */
body.light .bg-customColor4,
body.light [class*="bg-customColor4"] {
  background-color: #046a38 !important;
  box-shadow: 0 1px 4px rgba(4, 106, 56, 0.3) !important;
}

body.light .bg-customColor4 > div > div {
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Left sidebar active indicator in Dark Mode */
body.dark svg[viewBox="0 0 5 52"] path,
body:not(.light) svg[viewBox="0 0 5 52"] path {
  fill: #00e599 !important;
  filter: drop-shadow(0 0 8px rgba(0, 229, 153, 0.8)) !important;
}

/* Left sidebar active indicator in Light Mode */
body.light svg[viewBox="0 0 5 52"] path {
  fill: #046a38 !important;
  filter: none !important;
}

/* General Typography & Antialiasing */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   9. SUPERADMIN TOP BAR - HIGH CONTRAST (WCAG AAA) - DARK & LIGHT
   ========================================================================== */

/* Container - DARK MODE */
body.dark .uaisocial-admin-toolbar,
body.dark .bg-forth:has(input[name="impersonate"]),
body.dark .bg-forth:has(input[name="switchUser"]),
body:not(.light) .uaisocial-admin-toolbar,
body:not(.light) .bg-forth:has(input[name="impersonate"]),
body:not(.light) .bg-forth:has(input[name="switchUser"]) {
  background: #0d121f !important;
  border: 1px solid #1f293d !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  border-radius: 12px !important;
  margin-bottom: 14px !important;
  min-height: 56px !important;
  height: auto !important;
  padding: 8px 16px !important;
  width: 100% !important;
  color: #ffffff !important;
}

/* Container - LIGHT MODE */
body.light .uaisocial-admin-toolbar,
body.light .bg-forth:has(input[name="impersonate"]),
body.light .bg-forth:has(input[name="switchUser"]) {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  margin-bottom: 14px !important;
  min-height: 56px !important;
  height: auto !important;
  padding: 8px 16px !important;
  width: 100% !important;
  color: #0f172a !important;
}

/* Ensure inner wrappers stretch to full width */
.uaisocial-admin-toolbar > div,
.uaisocial-admin-toolbar [class*="w-[600px]"],
.bg-forth:has(input[name="impersonate"]) > div,
.bg-forth:has(input[name="impersonate"]) [class*="w-[600px]"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Badge SUPERADMIN - DARK MODE (Bright electric green on deep dark) */
body.dark .uaisocial-superadmin-badge,
body:not(.light) .uaisocial-superadmin-badge {
  background: #00e599 !important;
  color: #021a11 !important;
  border: 1px solid #00e599 !important;
  font-weight: 800 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 0 12px rgba(0, 229, 153, 0.4) !important;
  white-space: nowrap !important;
}

/* Badge SUPERADMIN - LIGHT MODE (Dark forest green on white) */
body.light .uaisocial-superadmin-badge {
  background: #046a38 !important;
  color: #ffffff !important;
  border: 1px solid #03542c !important;
  font-weight: 800 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 2px 6px rgba(4, 106, 56, 0.25) !important;
  white-space: nowrap !important;
}

/* Search input - DARK MODE */
body.dark input[name="impersonate"],
body.dark input[name="switchUser"],
body:not(.light) input[name="impersonate"],
body:not(.light) input[name="switchUser"] {
  background: #161c2b !important;
  border: 1px solid #2d374d !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
}

body.dark input[name="impersonate"]:focus,
body.dark input[name="switchUser"]:focus,
body:not(.light) input[name="impersonate"]:focus,
body:not(.light) input[name="switchUser"]:focus {
  background: #1e2638 !important;
  border-color: #00e599 !important;
  box-shadow: 0 0 14px rgba(0, 229, 153, 0.35) !important;
  outline: none !important;
}

body.dark input[name="impersonate"]::placeholder,
body.dark input[name="switchUser"]::placeholder,
body:not(.light) input[name="impersonate"]::placeholder,
body:not(.light) input[name="switchUser"]::placeholder {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Search input - LIGHT MODE */
body.light input[name="impersonate"],
body.light input[name="switchUser"] {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
}

body.light input[name="impersonate"]:focus,
body.light input[name="switchUser"]:focus {
  background: #ffffff !important;
  border-color: #046a38 !important;
  box-shadow: 0 0 10px rgba(4, 106, 56, 0.25) !important;
  outline: none !important;
}

body.light input[name="impersonate"]::placeholder,
body.light input[name="switchUser"]::placeholder {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Button "Gestão de Clientes" - DARK MODE */
body.dark .uaisocial-client-mgmt-btn,
body:not(.light) .uaisocial-client-mgmt-btn {
  background: #00e599 !important;
  color: #021a11 !important;
  border: 1px solid #00e599 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 7px 14px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  box-shadow: 0 0 14px rgba(0, 229, 153, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.dark .uaisocial-client-mgmt-btn:hover,
body:not(.light) .uaisocial-client-mgmt-btn:hover {
  background: #1affaa !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 18px rgba(0, 229, 153, 0.6) !important;
}

/* Button "Gestão de Clientes" - LIGHT MODE */
body.light .uaisocial-client-mgmt-btn {
  background: #046a38 !important;
  color: #ffffff !important;
  border: 1px solid #03542c !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 7px 14px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 6px rgba(4, 106, 56, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.light .uaisocial-client-mgmt-btn:hover {
  background: #03542c !important;
  transform: translateY(-1px) !important;
}

/* Toolbar standard buttons - DARK MODE */
body.dark .uaisocial-admin-btn-secondary,
body:not(.light) .uaisocial-admin-btn-secondary {
  background: #1e2638 !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body.dark .uaisocial-admin-btn-emerald,
body:not(.light) .uaisocial-admin-btn-emerald {
  background: #059669 !important;
  color: #ffffff !important;
  border: 1px solid #10b981 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body.dark .uaisocial-admin-btn-rose,
body:not(.light) .uaisocial-admin-btn-rose {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 1px solid #ef4444 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body.dark .uaisocial-admin-btn-indigo,
body:not(.light) .uaisocial-admin-btn-indigo {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border: 1px solid #6366f1 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

/* Toolbar standard buttons - LIGHT MODE */
body.light .uaisocial-admin-btn-secondary {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body.light .uaisocial-admin-btn-emerald {
  background: #047857 !important;
  color: #ffffff !important;
  border: 1px solid #065f46 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body.light .uaisocial-admin-btn-rose {
  background: #b91c1c !important;
  color: #ffffff !important;
  border: 1px solid #991b1b !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body.light .uaisocial-admin-btn-indigo {
  background: #4338ca !important;
  color: #ffffff !important;
  border: 1px solid #3730a3 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

/* Dropdown Search Results */
body.dark .bg-forth:has(input[name="impersonate"]) .bg-sixth,
body.dark div:has(> input[name="impersonate"]) ~ .bg-sixth,
body:not(.light) .bg-forth:has(input[name="impersonate"]) .bg-sixth {
  background: #0d1424 !important;
  border: 1px solid #00e599 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8) !important;
}

body.light .bg-forth:has(input[name="impersonate"]) .bg-sixth,
body.light div:has(> input[name="impersonate"]) ~ .bg-sixth {
  background: #ffffff !important;
  border: 1px solid #046a38 !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}