/* ==============================================================================
   SOFTYANTRA UNIFIED CORPORATE BRANDING STYLESHEET (DEV-IEDP HARMONIZED)
   Matched to: https://dev-iedp.softyantra.com
   ============================================================================== */

:root {
  --brand-primary: #c8232c !important;
  --brand-gradient-start: #ffffff !important;
  --brand-gradient-end: #f8fafc !important;
  --brand-gradient: linear-gradient(150deg, #ffffff, #f8fafc) !important;
  --brand-bg-overlay: none !important;
  --brand-bg-image: none !important;
  --brand-surface: #ffffff !important;
  --brand-text: #0f172a !important;
  --brand-muted: #64748b !important;
  --brand-field: #ffffff !important;
  --brand-field-hover: #f1f5f9 !important;
  --brand-radius: 16px !important;
  --brand-radius-sm: 10px !important;
  --brand-logo: url(/branding/softmailadmin-logo.png) !important;
  --brand-logo-width: 320px !important;
  --brand-logo-height: 70px !important;
  --login-logo: url(/brand/softmail-logo.png) !important;
  --login-card: #ffffff !important;
  --login-text: #0f172a !important;
  --login-input: #f8fafc !important;
  --login-input-hover: #e2e8f0 !important;
  --login-radius: 16px !important;
  --login-primary: #c8232c !important;
  --login-on-primary: #ffffff !important;
}

/* ==============================================================================
   DEV-IEDP ROTATING YANTRA ANIMATIONS
   ============================================================================== */
@keyframes yantra-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes yantra-spin-fast {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-yantra-spin {
  animation: 20s linear infinite yantra-spin !important;
  transform-origin: center center !important;
}

.animate-yantra-spin-fast {
  animation: 4s linear infinite yantra-spin-fast !important;
  transform-origin: center center !important;
}

/* ==============================================================================
   CRITICAL USABILITY: PREVENT OVERLAYS FROM BLOCKING CLICKS/FOCUS
   ============================================================================== */

/* #bg must never intercept mouse clicks or block input focus */
#bg, #loading-mask #form-container #bg, body.login #form-container #bg {
  pointer-events: none !important;
  display: none !important;
  opacity: 0 !important;
}

/* Perfect balanced login card container matching user requested padding */
body.login #form-container, #loading-mask #form-container {
  z-index: 100 !important;
  position: absolute !important;
  overflow: visible !important;
  width: 400px !important;
  max-width: calc(100vw - 32px) !important;
  min-height: auto !important;
  padding: 0px 25px 25px 25px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

/* Form content box */
body.login #form-container #content, #loading-mask #form-container #content {
  padding: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* Logo container: natural compact vertical layout without excess gap */
body.login #form-container .left, #loading-mask #form-container .left {
  height: auto !important;
  min-height: auto !important;
  margin: 16px 0 16px 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.login #form-container #logo, #loading-mask #form-container #logo {
  height: auto !important;
  width: 100% !important;
  max-width: 320px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.login #form-container #logo img {
  max-height: 80px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter: none !important;
  -webkit-filter: none !important;
}

body.login #form-container .right, #loading-mask #form-container .right {
  width: 100% !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 110 !important;
}

/* Input fields matching dev-iedp styling with clean 12px vertical spacing */
body.login #form-container :is(input[type="text"], input[type="password"]) {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  padding: 0 16px !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 120 !important;
  pointer-events: auto !important;
  cursor: text !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s !important;
}

/* Sign-in button with clean breathing space above and below */
body.login #form-container #submitbutton {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  position: relative !important;
  z-index: 120 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  background: linear-gradient(135deg, #c8232c 0%, #af1a22 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(200, 35, 44, 0.25) !important;
  transition: all 0.2s ease !important;
}

body.login #form-container #submitbutton:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #c8232c 100%) !important;
  box-shadow: 0 6px 14px rgba(200, 35, 44, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Ensure Logo NEVER gets inverted or filtered by any darkmode rules */
#logo, #logo img, body.login #form-container #logo, body.login #form-container #logo img {
  filter: none !important;
  -webkit-filter: none !important;
  background: none !important;
}

@media (prefers-color-scheme: dark) {
  :root body.login #form-container #logo,
  :root body.login #form-container #logo img,
  :root:not([data-theme=light]) body.login #form-container #logo,
  :root:not([data-theme=light]) body.login #form-container #logo img {
    filter: none !important;
    -webkit-filter: none !important;
  }
}

/* Base Login Styling */
html, body.login {
  transition: background-color 0.25s ease, color 0.25s ease !important;
}

.product-chip, .product-badge {
  display: none !important;
}

/* ==============================================================================
   IEDP HEADER BAR COMPONENT STYLING & BI-COLOR ACCENT LINE
   ============================================================================== */
#sy-universal-header {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 48px !important;
  z-index: 999999 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

#sy-universal-header .sy-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
  padding: 0 16px !important;
  max-width: 100% !important;
}

#sy-universal-header .sy-left-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

#sy-universal-header .sy-logo-lockup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  user-select: none !important;
  background: none !important;
  background-image: none !important;
}

#sy-universal-header .sy-emblem-wrap {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sy-universal-header .sy-emblem-icon {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.2s ease !important;
}

#sy-universal-header .sy-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sy-universal-header .sy-wordmark-img {
  height: 25px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}

/* Default wordmark visibility before data-theme attribute is loaded: show light (dark text) by default, hide dark (white text) */
#sy-universal-header .sy-wordmark-dark {
  display: none !important;
}
#sy-universal-header .sy-wordmark-light {
  display: block !important;
}

#sy-universal-header .sy-brand-divider {
  font-weight: 300 !important;
  margin: 0 4px !important;
  color: #cbd5e1 !important;
}

#sy-universal-header .sy-current-service {
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  color: #0f172a !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

#sy-universal-header .sy-nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#sy-universal-header .sy-nav-links a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

#sy-universal-header .sy-nav-links a:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}

#sy-universal-header .sy-nav-links a .sy-nav-icon {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  flex-shrink: 0 !important;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.22s ease !important;
}

#sy-universal-header .sy-nav-links a:not(.sy-active):hover {
  transform: translateY(-1px) !important;
}

#sy-universal-header .sy-nav-links a:not(.sy-active):hover .sy-nav-icon {
  transform: scale(1.15) !important;
}

/* Active menu item: Corporate Blue background with crisp White text in ALL themes */
#sy-universal-header .sy-nav-links a.sy-active,
:root[data-theme="white"] #sy-universal-header .sy-nav-links a.sy-active,
:root[data-theme="slate"] #sy-universal-header .sy-nav-links a.sy-active,
:root[data-theme="dark"] #sy-universal-header .sy-nav-links a.sy-active,
:root[data-theme="mix"] #sy-universal-header .sy-nav-links a.sy-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0b4d9c 0%, #083a75 100%) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(11, 77, 156, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

#sy-universal-header .sy-nav-links a.sy-active .sy-nav-icon,
:root[data-theme="white"] #sy-universal-header .sy-nav-links a.sy-active .sy-nav-icon,
:root[data-theme="slate"] #sy-universal-header .sy-nav-links a.sy-active .sy-nav-icon,
:root[data-theme="dark"] #sy-universal-header .sy-nav-links a.sy-active .sy-nav-icon,
:root[data-theme="mix"] #sy-universal-header .sy-nav-links a.sy-active .sy-nav-icon {
  stroke: #ffffff !important;
}

/* Theme Switcher in Top Bar */
#sy-universal-header .sy-theme-switcher {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

#sy-universal-header .sy-theme-btn {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  color: #64748b !important;
  transition: all 0.15s ease !important;
}

#sy-universal-header .sy-theme-btn:hover {
  color: #0f172a !important;
}

#sy-universal-header .sy-theme-btn[data-theme="white"].active {
  background: #ffffff !important;
  color: #c8232c !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

#sy-universal-header .sy-theme-btn .sy-theme-icon {
  width: 14px !important;
  height: 14px !important;
}

/* Bi-Color Divider matching dev-iedp Ke component (Red 50% + Blue 50%) */
.sy-bicolor-divider {
  width: 100% !important;
  height: 3px !important;
  display: flex !important;
  overflow: hidden !important;
}
.sy-bicolor-divider .sy-divider-red {
  width: 50% !important;
  background-color: #C8232C !important;
}
.sy-bicolor-divider .sy-divider-blue {
  width: 50% !important;
  background-color: #0B4D9C !important;
}

/* ==============================================================================
   FULL 4-THEME MATRIX MATCHING DEV-IEDP.SOFTYANTRA.COM
   ============================================================================== */

/* 1. WHITE THEME */
:root[data-theme="white"], html.theme-white, body[data-theme="white"] {
  --brand-primary: #c8232c !important;
  --brand-gradient-start: #ffffff !important;
  --brand-gradient-end: #f8fafc !important;
  --brand-gradient: linear-gradient(150deg, #ffffff, #f8fafc) !important;
  --brand-bg-overlay: none !important;
  --brand-bg-image: none !important;
  --brand-surface: #ffffff !important;
  --brand-text: #0f172a !important;
  --brand-muted: #64748b !important;
  --brand-field: #ffffff !important;
  --brand-field-hover: #f1f5f9 !important;
}
:root[data-theme="white"] body.login, html.theme-white body.login, [data-theme="white"] body, html.theme-white body, body[data-theme="white"] {
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #0f172a !important;
}
:root[data-theme="white"] body.login #form-container, html.theme-white body.login #form-container, [data-theme="white"] #form-container {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
}
:root[data-theme="white"] body.login #form-container :is(input[type=password],input[type=text]), [data-theme="white"] input {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
:root[data-theme="white"] body.login #form-container :is(input[type=password],input[type=text]):focus {
  border-color: #c8232c !important;
  box-shadow: 0 0 0 3px rgba(200, 35, 44, 0.2) !important;
}
/* White Header */
:root[data-theme="white"] #sy-universal-header, html.theme-white #sy-universal-header {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
:root[data-theme="white"] #sy-universal-header .sy-wordmark-dark { display: none !important; }
:root[data-theme="white"] #sy-universal-header .sy-wordmark-light { display: block !important; }
:root[data-theme="white"] #sy-universal-header .sy-brand-divider { color: #cbd5e1 !important; }
:root[data-theme="white"] #sy-universal-header .sy-current-service {
  color: #0f172a !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}
:root[data-theme="white"] #sy-universal-header .sy-nav-links a:not(.sy-active) { color: #64748b !important; }
:root[data-theme="white"] #sy-universal-header .sy-nav-links a:not(.sy-active):hover {
  color: #0b4d9c !important;
  background: rgba(11, 77, 156, 0.08) !important;
  border-bottom: 2px solid #0b4d9c !important;
  box-shadow: 0 2px 6px rgba(11, 77, 156, 0.12) !important;
}
:root[data-theme="white"] #sy-universal-header .sy-nav-links a:not(.sy-active):hover .sy-nav-icon {
  stroke: #0b4d9c !important;
}
:root[data-theme="white"] #sy-universal-header .sy-theme-switcher {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}
:root[data-theme="white"] #sy-universal-header .sy-theme-btn { color: #64748b !important; }
:root[data-theme="white"] #sy-universal-header .sy-theme-btn:hover { color: #0f172a !important; }
:root[data-theme="white"] #sy-universal-header .sy-theme-btn[data-theme="white"].active {
  background: #ffffff !important;
  color: #c8232c !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* 2. SLATE THEME (Warm Linen Canvas #ede8df, Paper Card #faf8f5, Linen Header) */
:root[data-theme="slate"], html.theme-slate, body[data-theme="slate"] {
  --brand-primary: #c8232c !important;
  --brand-gradient-start: #ede8df !important;
  --brand-gradient-end: #ede8df !important;
  --brand-gradient: linear-gradient(150deg, #ede8df, #ede8df) !important;
  --brand-bg-overlay: none !important;
  --brand-bg-image: none !important;
  --brand-surface: #faf8f5 !important;
  --brand-text: #1c1917 !important;
  --brand-muted: #78716c !important;
  --brand-field: #faf8f5 !important;
  --brand-field-hover: #f5f0e8 !important;
}
:root[data-theme="slate"] body.login, html.theme-slate body.login, [data-theme="slate"] body, html.theme-slate body, body[data-theme="slate"] {
  background-color: #ede8df !important;
  background-image: none !important;
  color: #1c1917 !important;
}
:root[data-theme="slate"] body.login #form-container, html.theme-slate body.login #form-container, [data-theme="slate"] #form-container {
  background-color: #faf8f5 !important;
  border-color: #ddd7cd !important;
  color: #1c1917 !important;
  box-shadow: 0 20px 45px -10px rgba(44, 38, 27, 0.16), 0 4px 12px -2px rgba(44, 38, 27, 0.08) !important;
}
:root[data-theme="slate"] body.login #form-container :is(input[type=password],input[type=text]), [data-theme="slate"] input {
  background-color: #faf8f5 !important;
  border-color: #ddd7cd !important;
  color: #1c1917 !important;
}
:root[data-theme="slate"] body.login #form-container :is(input[type=password],input[type=text]):focus {
  border-color: #c8232c !important;
  box-shadow: 0 0 0 3px rgba(200, 35, 44, 0.2) !important;
}
/* Slate Header */
:root[data-theme="slate"] #sy-universal-header, html.theme-slate #sy-universal-header {
  background-color: #faf8f5 !important;
  color: #1c1917 !important;
  border-bottom: 1px solid #ddd7cd !important;
  box-shadow: 0 1px 3px rgba(44, 38, 27, 0.08) !important;
}
:root[data-theme="slate"] #sy-universal-header .sy-wordmark-dark { display: none !important; }
:root[data-theme="slate"] #sy-universal-header .sy-wordmark-light { display: block !important; }
:root[data-theme="slate"] #sy-universal-header .sy-brand-divider { color: #d6cfc4 !important; }
:root[data-theme="slate"] #sy-universal-header .sy-current-service {
  color: #1c1917 !important;
  background: #ede8df !important;
  border: 1px solid #ddd7cd !important;
}
:root[data-theme="slate"] #sy-universal-header .sy-nav-links a:not(.sy-active) { color: #57534e !important; }
:root[data-theme="slate"] #sy-universal-header .sy-nav-links a:not(.sy-active):hover {
  color: #0b4d9c !important;
  background: rgba(11, 77, 156, 0.09) !important;
  border-bottom: 2px solid #0b4d9c !important;
  box-shadow: 0 2px 6px rgba(11, 77, 156, 0.12) !important;
}
:root[data-theme="slate"] #sy-universal-header .sy-nav-links a:not(.sy-active):hover .sy-nav-icon {
  stroke: #0b4d9c !important;
}
:root[data-theme="slate"] #sy-universal-header .sy-theme-switcher {
  background: #e7e0d3 !important;
  border: 1px solid #ddd7cd !important;
}
:root[data-theme="slate"] #sy-universal-header .sy-theme-btn { color: #78716c !important; }
:root[data-theme="slate"] #sy-universal-header .sy-theme-btn:hover { color: #1c1917 !important; }
:root[data-theme="slate"] #sy-universal-header .sy-theme-btn[data-theme="slate"].active {
  background: #e5dfd4 !important;
  color: #0b4d9c !important;
  border-color: #ddd7cd !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
}

/* 3. DARK THEME (Deep Midnight Slate Canvas #0f172a, Dark Card #1e293b, Dark Header #020617) */
:root[data-theme="dark"], html.dark, html.theme-dark, body[data-theme="dark"] {
  --brand-primary: #ef4444 !important;
  --brand-gradient-start: #0f172a !important;
  --brand-gradient-end: #0f172a !important;
  --brand-gradient: linear-gradient(150deg, #0f172a, #0f172a) !important;
  --brand-bg-overlay: none !important;
  --brand-bg-image: none !important;
  --brand-surface: #1e293b !important;
  --brand-text: #f8fafc !important;
  --brand-muted: #94a3b8 !important;
  --brand-field: #0f172a !important;
  --brand-field-hover: #1e293b !important;
}
:root[data-theme="dark"] body.login, html.dark body.login, html.theme-dark body.login, [data-theme="dark"] body, html.dark body, html.theme-dark body, body[data-theme="dark"] {
  background-color: #0f172a !important;
  background-image: none !important;
  color: #f8fafc !important;
}
:root[data-theme="dark"] body.login #form-container, html.dark body.login #form-container, [data-theme="dark"] #form-container {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}
:root[data-theme="dark"] #logo img,
html.dark #logo img,
html.theme-dark #logo img {
  content: url("/branding/softmail-logo-dark.png") !important;
}
:root[data-theme="dark"] body.login #form-container :is(input[type=password],input[type=text]), [data-theme="dark"] input {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
:root[data-theme="dark"] body.login #form-container :is(input[type=password],input[type=text]):focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3) !important;
}
/* Dark Header */
:root[data-theme="dark"] #sy-universal-header, html.dark #sy-universal-header {
  background-color: #020617 !important;
  color: #f8fafc !important;
  border-bottom: 1px solid #1e293b !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
:root[data-theme="dark"] #sy-universal-header .sy-wordmark-dark { display: block !important; }
:root[data-theme="dark"] #sy-universal-header .sy-wordmark-light { display: none !important; }
:root[data-theme="dark"] #sy-universal-header .sy-brand-divider { color: #334155 !important; }
:root[data-theme="dark"] #sy-universal-header .sy-current-service {
  color: #f8fafc !important;
  background: #1e293b !important;
  border: 1px solid #334155 !important;
}
:root[data-theme="dark"] #sy-universal-header .sy-nav-links a:not(.sy-active) { color: #94a3b8 !important; }
:root[data-theme="dark"] #sy-universal-header .sy-nav-links a:not(.sy-active):hover {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border-bottom: 2px solid #38bdf8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
:root[data-theme="dark"] #sy-universal-header .sy-nav-links a:not(.sy-active):hover .sy-nav-icon {
  stroke: #38bdf8 !important;
}
:root[data-theme="dark"] #sy-universal-header .sy-theme-switcher {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
}
:root[data-theme="dark"] #sy-universal-header .sy-theme-btn { color: #94a3b8 !important; }
:root[data-theme="dark"] #sy-universal-header .sy-theme-btn:hover { color: #ffffff !important; }
:root[data-theme="dark"] #sy-universal-header .sy-theme-btn[data-theme="dark"].active {
  background: #020617 !important;
  color: #00a3e0 !important;
  border-color: #334155 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

/* 4. MIX THEME (Dark Midnight Canvas #020617 + Crisp White Card #ffffff, Midnight Header #0f172a) */
:root[data-theme="mix"], html.theme-mix, body[data-theme="mix"] {
  --brand-primary: #c8232c !important;
  --brand-gradient-start: #020617 !important;
  --brand-gradient-end: #020617 !important;
  --brand-gradient: linear-gradient(150deg, #020617, #020617) !important;
  --brand-bg-overlay: none !important;
  --brand-bg-image: none !important;
  --brand-surface: #ffffff !important;
  --brand-text: #0f172a !important;
  --brand-muted: #64748b !important;
  --brand-field: #f8fafc !important;
  --brand-field-hover: #e2e8f0 !important;
}
:root[data-theme="mix"] body.login, html.theme-mix body.login, [data-theme="mix"] body, html.theme-mix body, body[data-theme="mix"] {
  background-color: #020617 !important;
  background-image: none !important;
  color: #f8fafc !important;
}
:root[data-theme="mix"] body.login #form-container, html.theme-mix body.login #form-container, [data-theme="mix"] #form-container {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}
:root[data-theme="mix"] body.login #form-container :is(input[type=password],input[type=text]), [data-theme="mix"] input {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
/* Mix Header */
:root[data-theme="mix"] #sy-universal-header, html.theme-mix #sy-universal-header {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-bottom: 1px solid #1e293b !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
:root[data-theme="mix"] #sy-universal-header .sy-wordmark-dark { display: block !important; }
:root[data-theme="mix"] #sy-universal-header .sy-wordmark-light { display: none !important; }
:root[data-theme="mix"] #sy-universal-header .sy-brand-divider { color: #334155 !important; }
:root[data-theme="mix"] #sy-universal-header .sy-current-service {
  color: #f8fafc !important;
  background: #1e293b !important;
  border: 1px solid #334155 !important;
}
:root[data-theme="mix"] #sy-universal-header .sy-nav-links a:not(.sy-active) { color: #94a3b8 !important; }
:root[data-theme="mix"] #sy-universal-header .sy-nav-links a:not(.sy-active):hover {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border-bottom: 2px solid #38bdf8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
:root[data-theme="mix"] #sy-universal-header .sy-nav-links a:not(.sy-active):hover .sy-nav-icon {
  stroke: #38bdf8 !important;
}
:root[data-theme="mix"] #sy-universal-header .sy-theme-switcher {
  background: #020617 !important;
  border: 1px solid #334155 !important;
}
:root[data-theme="mix"] #sy-universal-header .sy-theme-btn { color: #94a3b8 !important; }
:root[data-theme="mix"] #sy-universal-header .sy-theme-btn:hover { color: #ffffff !important; }
:root[data-theme="mix"] #sy-universal-header .sy-theme-btn[data-theme="mix"].active {
  background: #1e293b !important;
  color: #fbbf24 !important;
  border-color: #475569 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

/* ==============================================================================
   GROMMUNIO ADMIN WEB (REACT APP) 4-THEME MATRIX SUPPORT
   ============================================================================== */

/* Base styling for grommunio admin web form and inputs matching mail.softyantra.com login card */
body.mail-admin div[class*="makeStyles-root-"],
body.mail-admin #root,
div[class*="makeStyles-root-"] {
  padding-top: 48px !important; /* Offset for universal header on mail-admin */
  box-sizing: border-box !important;
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #0f172a !important;
  transition: background 0.25s ease, background-color 0.25s ease !important;
}

form[class*="makeStyles-card-"],
form[class*="-card-"],
#root form {
  width: 400px !important;
  max-width: calc(100vw - 32px) !important;
  min-height: auto !important;
  padding: 0px 25px 25px 25px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Admin logo container: clean presentation of SoftMailAdmin with prominent tagline */
div[class*="makeStyles-logoContainer-"],
div[class*="logoContainer"] {
  height: auto !important;
  min-height: 72px !important;
  margin: 16px 0 8px 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#root form div[class*="makeStyles-logo-"],
#root div[class*="makeStyles-logo-"],
#root [role="img"][aria-label="grommunio"],
#root form div[class*="logoContainer"] > div {
  width: 320px !important;
  height: 70px !important;
  max-width: 100% !important;
  background-image: url(/branding/softmailadmin-logo.png) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Hide Language switcher on login card */
button[class*="makeStyles-lang-"],
button[class*="-lang-"],
button[class*="lang"],
button[title="Language"],
button[aria-label="Language"],
#root form button:has(svg[data-testid="TranslateIcon"]),
#root form svg[data-testid="TranslateIcon"],
#root form .MuiTooltip-root:has(button),
#root form button.lang,
#root form div[class*="lang"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Admin badge & chip */
span[class*="makeStyles-badge-"] {
  display: none !important; /* Hide default icon badge in corner */
}

div[class*="makeStyles-chip-"] {
  display: inline-flex !important;
  align-items: center !important;
  margin: 6px auto 16px auto !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

/* Admin Inputs */
input[class*="makeStyles-input-"] {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  padding: 0 16px !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s !important;
}

/* Admin Submit Button - Bold, active crimson matching mail.softyantra.com */
button[class*="makeStyles-button-"],
button[class*="makeStyles-button-"]:disabled,
button[class*="makeStyles-button-"][disabled],
#root form button[type="submit"],
#root form button[type="submit"]:disabled,
#root form button[type="submit"][disabled] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 44px !important;
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  background: linear-gradient(135deg, #c8232c 0%, #af1a22 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(200, 35, 44, 0.3) !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
}

button[class*="makeStyles-button-"]:hover:not(:disabled),
#root form button[type="submit"]:hover:not(:disabled) {
  background: linear-gradient(135deg, #d32f2f 0%, #c8232c 100%) !important;
  box-shadow: 0 6px 16px rgba(200, 35, 44, 0.4) !important;
  transform: translateY(-1px) !important;
}

button[class*="makeStyles-button-"]:active,
#root form button[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(200, 35, 44, 0.3) !important;
}

/* --- 1. ADMIN WHITE THEME --- */
:root[data-theme="white"] div[class*="makeStyles-root-"],
html.theme-white div[class*="makeStyles-root-"],
body[data-theme="white"] div[class*="makeStyles-root-"],
div[class*="makeStyles-root-"] {
  background: #f8fafc !important;
  background-image: none !important;
  color: #0f172a !important;
}

:root[data-theme="white"] form[class*="makeStyles-card-"],
html.theme-white form[class*="makeStyles-card-"],
body[data-theme="white"] form[class*="makeStyles-card-"],
form[class*="makeStyles-card-"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
}

:root[data-theme="white"] input[class*="makeStyles-input-"],
html.theme-white input[class*="makeStyles-input-"],
body[data-theme="white"] input[class*="makeStyles-input-"],
input[class*="makeStyles-input-"] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

:root[data-theme="white"] input[class*="makeStyles-input-"]:focus,
input[class*="makeStyles-input-"]:focus {
  border-color: #c8232c !important;
  box-shadow: 0 0 0 3px rgba(200, 35, 44, 0.2) !important;
}

:root[data-theme="white"] div[class*="makeStyles-chip-"],
div[class*="makeStyles-chip-"] {
  background: rgba(11, 77, 156, 0.08) !important;
  color: #0b4d9c !important;
  border: 1px solid rgba(11, 77, 156, 0.15) !important;
}

/* --- 2. ADMIN SLATE THEME --- */
:root[data-theme="slate"] div[class*="makeStyles-root-"],
html.theme-slate div[class*="makeStyles-root-"],
body[data-theme="slate"] div[class*="makeStyles-root-"] {
  background: #ede8df !important;
  background-image: none !important;
  color: #1c1917 !important;
}

:root[data-theme="slate"] form[class*="makeStyles-card-"],
html.theme-slate form[class*="makeStyles-card-"],
body[data-theme="slate"] form[class*="makeStyles-card-"] {
  background: #faf8f5 !important;
  border-color: #ddd7cd !important;
  color: #1c1917 !important;
  box-shadow: 0 20px 45px -10px rgba(44, 38, 27, 0.16), 0 4px 12px -2px rgba(44, 38, 27, 0.08) !important;
}

:root[data-theme="slate"] input[class*="makeStyles-input-"],
html.theme-slate input[class*="makeStyles-input-"],
body[data-theme="slate"] input[class*="makeStyles-input-"] {
  background: #faf8f5 !important;
  border: 1px solid #ddd7cd !important;
  color: #1c1917 !important;
}

:root[data-theme="slate"] input[class*="makeStyles-input-"]:focus {
  border-color: #c8232c !important;
  box-shadow: 0 0 0 3px rgba(200, 35, 44, 0.2) !important;
}

:root[data-theme="slate"] div[class*="makeStyles-chip-"] {
  background: #ede8df !important;
  color: #0b4d9c !important;
  border: 1px solid #ddd7cd !important;
}

/* --- 3. ADMIN DARK THEME --- */
:root[data-theme="dark"] div[class*="makeStyles-root-"],
html.dark div[class*="makeStyles-root-"],
html.theme-dark div[class*="makeStyles-root-"],
body[data-theme="dark"] div[class*="makeStyles-root-"] {
  background: #0f172a !important;
  background-image: none !important;
  color: #f8fafc !important;
}

:root[data-theme="dark"] form[class*="makeStyles-card-"],
html.dark form[class*="makeStyles-card-"],
html.theme-dark form[class*="makeStyles-card-"],
body[data-theme="dark"] form[class*="makeStyles-card-"] {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

:root[data-theme="dark"] body.mail-admin [role="img"][aria-label="SoftMailAdmin"],
:root[data-theme="dark"] body.mail-admin [role="img"][aria-label="SoftMail"],
:root[data-theme="dark"] body.mail-admin [role="img"][aria-label="grommunio"],
:root[data-theme="dark"] [class*="makeStyles-logo-"],
html.dark [class*="makeStyles-logo-"],
html.theme-dark [class*="makeStyles-logo-"] {
  background-image: url("/branding/softmailadmin-logo-dark.png") !important;
}

:root[data-theme="dark"] input[class*="makeStyles-input-"],
html.dark input[class*="makeStyles-input-"],
html.theme-dark input[class*="makeStyles-input-"],
body[data-theme="dark"] input[class*="makeStyles-input-"] {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
}

:root[data-theme="dark"] input[class*="makeStyles-input-"]:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3) !important;
}

:root[data-theme="dark"] div[class*="makeStyles-chip-"] {
  background: #0f172a !important;
  color: #38bdf8 !important;
  border: 1px solid #334155 !important;
}

/* --- 4. ADMIN MIX THEME --- */
:root[data-theme="mix"] div[class*="makeStyles-root-"],
html.theme-mix div[class*="makeStyles-root-"],
body[data-theme="mix"] div[class*="makeStyles-root-"] {
  background: #020617 !important;
  background-image: none !important;
  color: #f8fafc !important;
}

:root[data-theme="mix"] form[class*="makeStyles-card-"],
html.theme-mix form[class*="makeStyles-card-"],
body[data-theme="mix"] form[class*="makeStyles-card-"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}

:root[data-theme="mix"] input[class*="makeStyles-input-"],
html.theme-mix input[class*="makeStyles-input-"],
body[data-theme="mix"] input[class*="makeStyles-input-"] {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

:root[data-theme="mix"] input[class*="makeStyles-input-"]:focus {
  border-color: #c8232c !important;
  box-shadow: 0 0 0 3px rgba(200, 35, 44, 0.2) !important;
}

:root[data-theme="mix"] div[class*="makeStyles-chip-"] {
  background: rgba(11, 77, 156, 0.08) !important;
  color: #0b4d9c !important;
  border: 1px solid rgba(11, 77, 156, 0.15) !important;
}

/* ==============================================================================
   UNIVERSAL SELECTORS FOR ADMIN WEB ROOT & CARD (STRIP ALL BACKGROUND-IMAGES)
   ============================================================================== */

/* Ensure the admin root background has NO background-image or chevron pattern */
#root > div,
div[class*="makeStyles-root-"],
div[class*="-root-"],
div[class*="root"] {
  background-image: none !important;
}

/* Ensure the admin card has NO background-image or gradients */
#root form,
form[class*="makeStyles-card-"],
form[class*="-card-"],
div[class*="-card-"] {
  background-image: none !important;
}

/* Hide chevron/tune badge icon in card corner */
#root form > span,
span[class*="makeStyles-badge-"],
span[class*="-badge-"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Theme overrides with highest selector power */
:root[data-theme="white"] #root > div,
:root[data-theme="white"] div[class*="root"] {
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #0f172a !important;
}
:root[data-theme="white"] #root form,
:root[data-theme="white"] form[class*="card"] {
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
}

:root[data-theme="slate"] #root > div,
:root[data-theme="slate"] div[class*="root"] {
  background-color: #ede8df !important;
  background-image: none !important;
  color: #1c1917 !important;
}
:root[data-theme="slate"] #root form,
:root[data-theme="slate"] form[class*="card"] {
  background-color: #faf8f5 !important;
  background-image: none !important;
  border: 1px solid #ddd7cd !important;
  color: #1c1917 !important;
  box-shadow: 0 20px 45px -10px rgba(44, 38, 27, 0.16), 0 4px 12px -2px rgba(44, 38, 27, 0.08) !important;
}

:root[data-theme="dark"] #root > div,
:root[data-theme="dark"] div[class*="root"] {
  background-color: #0f172a !important;
  background-image: none !important;
  color: #f8fafc !important;
}
:root[data-theme="dark"] #root form,
:root[data-theme="dark"] form[class*="card"] {
  background-color: #1e293b !important;
  background-image: none !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

:root[data-theme="mix"] #root > div,
:root[data-theme="mix"] div[class*="root"] {
  background-color: #020617 !important;
  background-image: none !important;
  color: #f8fafc !important;
}
:root[data-theme="mix"] #root form,
:root[data-theme="mix"] form[class*="card"] {
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}

/* ==============================================================================
   SOFTIDM (LDAP ACCOUNT MANAGER) ENTERPRISE BRANDING & 4-THEME MATRIX
   ============================================================================== */

/* 1. Hide duplicate legacy LAM header bar */
#lam-topnav,
.lam-header,
div[id="lam-topnav"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* 2. Page layout & Centering */
body:has(.roundedShadowBox),
body:has(#btn_checklogin),
body:has(.centeredTable) {
  min-height: 100vh !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  transition: background-color 0.25s ease, color 0.25s ease !important;
}

.centeredTable {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: calc(100vh - 48px) !important;
  margin: 0 auto !important;
  padding: 20px 16px !important;
  box-sizing: border-box !important;
}

body:has(.centeredTable) > br,
body:has(.roundedShadowBox) > br {
  display: none !important;
}

/* 3. Standard SoftYantra 400px Card Geometry */
.roundedShadowBox.limitWidth,
.roundedShadowBox,
.centeredTable .roundedShadowBox {
  width: 400px !important;
  max-width: calc(100vw - 32px) !important;
  min-width: 0 !important;
  min-height: auto !important;
  margin: 0 auto !important;
  padding: 0px 25px 25px 25px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  position: relative !important;
}

/* Reset table styling and override hardcoded bgcolor="white" */
.roundedShadowBox table,
.roundedShadowBox table[bgcolor],
.roundedShadowBox table tr,
.roundedShadowBox table td {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-collapse: collapse !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 4. SoftIDM Card Logo */
.sy-card-logo-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 20px 0 18px 0 !important;
  padding: 0 !important;
  height: auto !important;
}

.sy-card-logo-img {
  max-height: 72px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* 5. Hide Superfluous Elements & Debug Server Profile Metadata */
.roundedShadowBox tr:has(hr.margin20),
.roundedShadowBox tr:has(#profile),
.roundedShadowBox hr.margin20,
.roundedShadowBox .loginRightBox,
.roundedShadowBox div:has(> #language),
.roundedShadowBox div.responsiveField:has(#language),
.roundedShadowBox div.responsiveLabel:has(+ div.responsiveField:has(#language)) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 6. Form Fields & Labels */
.roundedShadowBox .responsiveLabel {
  width: 100% !important;
  float: none !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-top: 10px !important;
  margin-bottom: 6px !important;
  padding: 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.roundedShadowBox .responsiveField {
  width: 100% !important;
  float: none !important;
  display: block !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.roundedShadowBox .responsiveField > div {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.roundedShadowBox input[type="text"],
.roundedShadowBox input[type="password"],
.roundedShadowBox select {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  outline: none !important;
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s !important;
}

.roundedShadowBox input[type="text"]:focus,
.roundedShadowBox input[type="password"]:focus,
.roundedShadowBox select:focus {
  border-color: #c8232c !important;
  box-shadow: 0 0 0 3px rgba(200, 35, 44, 0.2) !important;
}

/* 7. SoftYantra Crimson CTA Button */
.roundedShadowBox #btn_checklogin,
.roundedShadowBox button[type="submit"],
.roundedShadowBox .lam-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 44px !important;
  margin: 16px 0 0 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  background: linear-gradient(135deg, #c8232c 0%, #af1a22 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(200, 35, 44, 0.3) !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
}

.roundedShadowBox #btn_checklogin:hover,
.roundedShadowBox button[type="submit"]:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #c8232c 100%) !important;
  box-shadow: 0 6px 16px rgba(200, 35, 44, 0.4) !important;
  transform: translateY(-1px) !important;
}

.roundedShadowBox #btn_checklogin:active,
.roundedShadowBox button[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(200, 35, 44, 0.3) !important;
}

/* 8. Full 4-Theme Matrix for SoftIDM */

/* --- 1. IDM WHITE THEME --- */
:root[data-theme="white"] body:has(.roundedShadowBox),
html.theme-white body:has(.roundedShadowBox),
body[data-theme="white"]:has(.roundedShadowBox) {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}
:root[data-theme="white"] .roundedShadowBox,
html.theme-white .roundedShadowBox {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
}
:root[data-theme="white"] .roundedShadowBox .responsiveLabel {
  color: #334155 !important;
}
:root[data-theme="white"] .roundedShadowBox :is(input[type="text"], input[type="password"], select) {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* --- 2. IDM SLATE THEME --- */
:root[data-theme="slate"] body:has(.roundedShadowBox),
html.theme-slate body:has(.roundedShadowBox),
body[data-theme="slate"]:has(.roundedShadowBox) {
  background-color: #ede8df !important;
  color: #1c1917 !important;
}
:root[data-theme="slate"] .roundedShadowBox,
html.theme-slate .roundedShadowBox {
  background-color: #faf8f5 !important;
  border-color: #ddd7cd !important;
  color: #1c1917 !important;
  box-shadow: 0 20px 45px -10px rgba(44, 38, 27, 0.16), 0 4px 12px -2px rgba(44, 38, 27, 0.08) !important;
}
:root[data-theme="slate"] .roundedShadowBox .responsiveLabel {
  color: #44403c !important;
}
:root[data-theme="slate"] .roundedShadowBox :is(input[type="text"], input[type="password"], select) {
  background-color: #faf8f5 !important;
  border-color: #ddd7cd !important;
  color: #1c1917 !important;
}

/* --- 3. IDM DARK THEME --- */
:root[data-theme="dark"] body:has(.roundedShadowBox),
html.dark body:has(.roundedShadowBox),
html.theme-dark body:has(.roundedShadowBox),
body[data-theme="dark"]:has(.roundedShadowBox) {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}
:root[data-theme="dark"] .roundedShadowBox,
html.dark .roundedShadowBox,
html.theme-dark .roundedShadowBox {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}
:root[data-theme="dark"] .sy-card-logo-img,
html.dark .sy-card-logo-img,
html.theme-dark .sy-card-logo-img {
  content: url("/branding/softidm-logo-dark.png") !important;
}
:root[data-theme="dark"] .roundedShadowBox .responsiveLabel {
  color: #cbd5e1 !important;
}
:root[data-theme="dark"] .roundedShadowBox :is(input[type="text"], input[type="password"], select) {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
:root[data-theme="dark"] .roundedShadowBox :is(input[type="text"], input[type="password"], select):focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3) !important;
}

/* --- 4. IDM MIX THEME --- */
:root[data-theme="mix"] body:has(.roundedShadowBox),
html.theme-mix body:has(.roundedShadowBox),
body[data-theme="mix"]:has(.roundedShadowBox) {
  background-color: #020617 !important;
  color: #f8fafc !important;
}
:root[data-theme="mix"] .roundedShadowBox,
html.theme-mix .roundedShadowBox {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}
:root[data-theme="mix"] .roundedShadowBox .responsiveLabel {
  color: #334155 !important;
}
:root[data-theme="mix"] .roundedShadowBox :is(input[type="text"], input[type="password"], select) {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* ==============================================================================
   9. SoftAnalytics (Grafana) Modern Enterprise Suite Theming
   Harmonized with Dev-IEDP, SoftMail, SoftMailAdmin, and SoftIDM
   ============================================================================== */

/* 1. Header Accommodation & Page Geometry - ZERO PADDING */
body.app-grafana {
  padding-top: 0 !important;
  margin: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
  box-sizing: border-box !important;
}

body.app-grafana #sy-universal-header {
  height: 48px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 999999 !important;
}

body.app-grafana #reactRoot {
  height: calc(100vh - 48px) !important;
  width: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

body.app-grafana #reactRoot *::before,
body.app-grafana #reactRoot *::after,
body.app-grafana #reactRoot::before,
body.app-grafana #reactRoot::after,
body.app-grafana::before,
body.app-grafana::after {
  background-image: none !important;
  background: none !important;
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
}

body.app-grafana #reactRoot [class*="container"] {
  background-image: none !important;
  animation: none !important;
  transition: none !important;
}

/* Preloader Centering */
body.app-grafana .preloader {
  position: fixed !important;
  top: 48px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 48px) !important;
  flex-direction: column !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 999998 !important;
}

/* 2. SoftAnalytics Perfect Login Card Placement */
html.sy-login-page main.css-1d1v5u1-page-container,
html.sy-login-page main[class*="page-container"],
body.sy-login-page main.css-1d1v5u1-page-container,
body.sy-login-page main[class*="page-container"],
body.app-grafana:has(.login-content-box) main.css-1d1v5u1-page-container,
body.app-grafana:has(.login-content-box) main[class*="page-container"],
main.css-1d1v5u1-page-container:has(.login-content-box),
main[class*="page-container"]:has(.login-content-box),
body.app-grafana .main-view--chrome-hidden main[class*="page-container"],
body.app-grafana .main-view--chrome-hidden main.css-1d1v5u1-page-container {
  margin-top: 38vh !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 32px !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 400px !important;
  display: block !important;
}

body.app-grafana .login-content-box {
  width: 400px !important;
  max-width: calc(100vw - 32px) !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 16px !important;
  padding: 24px 28px 22px 28px !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.app-grafana [class*="loginOuterBox"],
body.app-grafana [class*="loginInnerBox"],
body.app-grafana [class*="wrapper"] {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-grow: 0 !important;
}

body.app-grafana .login-content-box form {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. SoftAnalytics Card Corporate Logo */
.sy-analytics-card-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  height: auto !important;
}

body.app-grafana img.sy-analytics-card-logo-img,
body.app-grafana img[src*="softanalytics-logo"],
body.app-grafana [class*="loginLogo"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: 52px !important;
  height: 52px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.sy-analytics-card-logo-img {
  max-height: 52px !important;
  height: 52px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* 4. Completely eliminate and delete legacy logo wrapper, title wrapper, and grafana elements */
body.app-grafana .css-wppp5u,
body.app-grafana [class*="loginLogoWrapper"],
body.app-grafana .css-xi606m,
body.app-grafana [class*="titleWrapper"],
body.app-grafana img[src*="grafana_icon"],
body.app-grafana img[alt="Grafana"],
body.app-grafana h1.css-1gmqqtf,
body.app-grafana .login-content-box h1,
body.app-grafana .login-content-box h3,
body.app-grafana [class*="Footer"],
body.app-grafana footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* 5. Form Fields & Labels */
body.app-grafana .login-content-box form label,
body.app-grafana .login-content-box [class*="Label"] {
  display: block !important;
  width: 100% !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-top: 8px !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
  text-align: left !important;
  line-height: 1.3 !important;
}

body.app-grafana .login-content-box form > div:first-child label,
body.app-grafana .login-content-box form > div:first-of-type label {
  margin-top: 0 !important;
}

body.app-grafana .login-content-box input[type="text"],
body.app-grafana .login-content-box input[type="password"] {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  padding: 0 14px !important;
  margin: 0 0 4px 0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  outline: none !important;
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s !important;
}

body.app-grafana input:focus,
body.app-grafana input:focus-visible,
body.app-grafana .login-content-box input:focus,
body.app-grafana .login-content-box input:focus-visible,
body.app-grafana .login-content-box input[type="text"]:focus,
body.app-grafana .login-content-box input[type="password"]:focus,
body.app-grafana .login-content-box div:focus-within,
body.app-grafana [class*="inputWrapper"]:focus-within,
body.app-grafana [class*="Input"]:focus-within,
body.app-grafana [class*="input-wrapper"]:focus-within,
body.app-grafana div:has(> input:focus) {
  outline: none !important;
  border-color: #c8232c !important;
  box-shadow: 0 0 0 2px rgba(200, 35, 44, 0.25) !important;
}

/* 6. SoftYantra Crimson CTA Button */
body.app-grafana .login-content-box button[type="submit"],
body.app-grafana .login-content-box button[data-testid*="submit"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 42px !important;
  margin: 14px 0 0 0 !important;
  padding: 0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  background: linear-gradient(135deg, #c8232c 0%, #af1a22 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(200, 35, 44, 0.3) !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
}

body.app-grafana .login-content-box button[type="submit"]:hover,
body.app-grafana .login-content-box button[data-testid*="submit"]:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #c8232c 100%) !important;
  box-shadow: 0 6px 16px rgba(200, 35, 44, 0.4) !important;
  transform: translateY(-1px) !important;
}

body.app-grafana .login-content-box button[type="submit"]:active,
body.app-grafana .login-content-box button[data-testid*="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(200, 35, 44, 0.3) !important;
}

body.app-grafana .login-content-box a {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  display: inline-block !important;
  font-size: 13px !important;
}

/* 7. Full 4-Theme Matrix for SoftAnalytics */

/* --- 1. SoftAnalytics WHITE THEME --- */
:root[data-theme="white"] body.app-grafana,
html.theme-white body.app-grafana,
body[data-theme="white"].app-grafana {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}
:root[data-theme="white"] body.app-grafana [class*="LoginBackground"],
:root[data-theme="white"] body.app-grafana [class*="loginMain"] {
  background-color: transparent !important;
  background-image: none !important;
}
:root[data-theme="white"] body.app-grafana .login-content-box {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
}
:root[data-theme="white"] body.app-grafana .login-content-box :is(label, [class*="Label"]) {
  color: #334155 !important;
}
:root[data-theme="white"] body.app-grafana .login-content-box input {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* --- 2. SoftAnalytics SLATE THEME --- */
:root[data-theme="slate"] body.app-grafana,
html.theme-slate body.app-grafana,
body[data-theme="slate"].app-grafana {
  background-color: #ede8df !important;
  color: #1c1917 !important;
}
:root[data-theme="slate"] body.app-grafana [class*="LoginBackground"],
:root[data-theme="slate"] body.app-grafana [class*="loginMain"] {
  background-color: transparent !important;
  background-image: none !important;
}
:root[data-theme="slate"] body.app-grafana .login-content-box {
  background-color: #faf8f5 !important;
  border: 1px solid #ddd7cd !important;
  color: #1c1917 !important;
  box-shadow: 0 20px 45px -10px rgba(44, 38, 27, 0.16), 0 4px 12px -2px rgba(44, 38, 27, 0.08) !important;
}
:root[data-theme="slate"] body.app-grafana .login-content-box :is(label, [class*="Label"]) {
  color: #44403c !important;
}
:root[data-theme="slate"] body.app-grafana .login-content-box input {
  background-color: #faf8f5 !important;
  border-color: #ddd7cd !important;
  color: #1c1917 !important;
}

/* --- 3. SoftAnalytics DARK THEME --- */
:root[data-theme="dark"] body.app-grafana,
html.dark body.app-grafana,
html.theme-dark body.app-grafana,
body[data-theme="dark"].app-grafana {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}
:root[data-theme="dark"] body.app-grafana [class*="LoginBackground"],
:root[data-theme="dark"] body.app-grafana [class*="loginMain"] {
  background-color: transparent !important;
  background-image: none !important;
}
:root[data-theme="dark"] body.app-grafana .login-content-box {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}
:root[data-theme="dark"] body.app-grafana .login-content-box :is(label, [class*="Label"]) {
  color: #cbd5e1 !important;
}
:root[data-theme="dark"] body.app-grafana .login-content-box input {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
:root[data-theme="dark"] body.app-grafana input:focus,
:root[data-theme="dark"] body.app-grafana input:focus-visible,
:root[data-theme="dark"] body.app-grafana .login-content-box input:focus,
:root[data-theme="dark"] body.app-grafana .login-content-box input:focus-visible,
:root[data-theme="dark"] body.app-grafana .login-content-box div:focus-within,
:root[data-theme="dark"] body.app-grafana [class*="inputWrapper"]:focus-within,
:root[data-theme="dark"] body.app-grafana [class*="Input"]:focus-within,
:root[data-theme="dark"] body.app-grafana div:has(> input:focus) {
  outline: none !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35) !important;
}

:root[data-theme="dark"] body.app-grafana .sy-analytics-card-logo-img,
html.dark body.app-grafana .sy-analytics-card-logo-img,
html.theme-dark body.app-grafana .sy-analytics-card-logo-img {
  content: url("/branding/softanalytics-logo-dark.png") !important;
}

/* --- 4. SoftAnalytics MIX THEME --- */
:root[data-theme="mix"] body.app-grafana,
html.theme-mix body.app-grafana,
body[data-theme="mix"].app-grafana {
  background-color: #020617 !important;
  color: #f8fafc !important;
}
:root[data-theme="mix"] body.app-grafana [class*="LoginBackground"],
:root[data-theme="mix"] body.app-grafana [class*="loginMain"] {
  background-color: transparent !important;
  background-image: none !important;
}
:root[data-theme="mix"] body.app-grafana .login-content-box {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}
:root[data-theme="mix"] body.app-grafana .login-content-box :is(label, [class*="Label"]) {
  color: #334155 !important;
}
:root[data-theme="mix"] body.app-grafana .login-content-box input {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* ==============================================================================
   SoftTraffic (ntopng) Dedicated 4-Theme Styling
   Harmonized with Dev-IEDP, SoftMail, SoftMailAdmin, SoftIDM, and SoftAnalytics
   ============================================================================== */

/* Layout & Geometry */
body.app-traffic {
  box-sizing: border-box !important;
}

body.app-traffic:not(.sy-login-page) {
  padding-top: 48px !important;
}

body.app-traffic:not(.sy-login-page) #sy-universal-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  height: 48px !important;
  z-index: 999999 !important;
}

body.app-traffic:not(.sy-login-page) .wrapper {
  padding-top: 0 !important;
}

/* Suppress particles canvas on SoftTraffic */
body.app-traffic #particles-js,
#particles-js {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
}

/* SoftTraffic Login Page Base */
body.app-traffic.sy-login-page,
html.app-traffic.sy-login-page body {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
}

body.app-traffic.sy-login-page #sy-universal-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  height: 48px !important;
  z-index: 999999 !important;
}

body.app-traffic.sy-login-page .form-signin {
  width: 400px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 28px 32px 24px 32px !important;
  margin: auto !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 10 !important;
}

body.app-traffic .sy-traffic-card-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-bottom: 20px !important;
  padding: 4px 0 !important;
}

body.app-traffic .sy-traffic-card-logo-img {
  max-height: 52px !important;
  height: 52px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Primary Button Red Gradient */
body.app-traffic .form-signin button[type="submit"],
body.app-traffic .btn-primary {
  background: linear-gradient(135deg, #c8232c 0%, #af1a22 100%) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(200, 35, 44, 0.3) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  height: 44px !important;
  color: #ffffff !important;
  width: 100% !important;
  transition: all 0.2s ease-in-out !important;
}

body.app-traffic .form-signin button[type="submit"]:hover,
body.app-traffic .btn-primary:hover {
  background: linear-gradient(135deg, #af1a22 0%, #991b1b 100%) !important;
  box-shadow: 0 6px 16px rgba(200, 35, 44, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Input Fields */
body.app-traffic .form-signin .form-control {
  border-radius: 8px !important;
  height: 44px !important;
  font-size: 14px !important;
}

body.app-traffic .form-signin .form-floating > label {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* --- 1. SoftTraffic WHITE THEME --- */
:root[data-theme="white"] body.app-traffic,
html.theme-white body.app-traffic,
body[data-theme="white"].app-traffic {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}
:root[data-theme="white"] body.app-traffic .form-signin {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
}
:root[data-theme="white"] body.app-traffic .form-signin .form-control {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
:root[data-theme="white"] body.app-traffic .form-signin label {
  color: #475569 !important;
}

/* --- 2. SoftTraffic SLATE THEME --- */
:root[data-theme="slate"] body.app-traffic,
html.theme-slate body.app-traffic,
body[data-theme="slate"].app-traffic {
  background-color: #ede8df !important;
  color: #1c1917 !important;
}
:root[data-theme="slate"] body.app-traffic .form-signin {
  background-color: #faf8f5 !important;
  border: 1px solid #ddd7cd !important;
  color: #1c1917 !important;
  box-shadow: 0 20px 45px -10px rgba(44, 38, 27, 0.16), 0 4px 12px -2px rgba(44, 38, 27, 0.08) !important;
}
:root[data-theme="slate"] body.app-traffic .form-signin .form-control {
  background-color: #faf8f5 !important;
  border-color: #ddd7cd !important;
  color: #1c1917 !important;
}
:root[data-theme="slate"] body.app-traffic .form-signin label {
  color: #57534e !important;
}

/* --- 3. SoftTraffic DARK THEME --- */
:root[data-theme="dark"] body.app-traffic,
html.dark body.app-traffic,
html.theme-dark body.app-traffic,
body[data-theme="dark"].app-traffic {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}
:root[data-theme="dark"] body.app-traffic .form-signin {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}
:root[data-theme="dark"] body.app-traffic .form-signin .form-control {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
:root[data-theme="dark"] body.app-traffic .form-signin label {
  color: #94a3b8 !important;
}
:root[data-theme="dark"] body.app-traffic .form-signin .form-control:focus,
:root[data-theme="dark"] body.app-traffic .form-signin input:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35) !important;
  outline: none !important;
}
:root[data-theme="dark"] body.app-traffic .sy-traffic-card-logo-img,
html.dark body.app-traffic .sy-traffic-card-logo-img,
html.theme-dark body.app-traffic .sy-traffic-card-logo-img {
  content: url("/branding/softtraffic-logo-dark.png") !important;
}

/* --- 4. SoftTraffic MIX THEME --- */
:root[data-theme="mix"] body.app-traffic,
html.theme-mix body.app-traffic,
body[data-theme="mix"].app-traffic {
  background-color: #020617 !important;
  color: #f8fafc !important;
}
:root[data-theme="mix"] body.app-traffic .form-signin {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}
:root[data-theme="mix"] body.app-traffic .form-signin .form-control {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
:root[data-theme="mix"] body.app-traffic .form-signin label {
  color: #475569 !important;
}

/* ==============================================================================
   SOFTVOICE BRANDING & MULTI-THEME ENGINE (FusionPBX / VoIP Suite)
   ============================================================================== */

body.app-voice,
html.app-voice body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  background-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
}

body.app-voice #sy-universal-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  height: 48px !important;
  z-index: 999999 !important;
}

body.app-voice #body {
  min-height: calc(100vh - 48px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 56px 16px 20px 16px !important;
  box-sizing: border-box !important;
  position: static !important;
  background: transparent !important;
}

body.app-voice.sy-login-page #page {
  min-height: calc(100vh - 48px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 56px 16px 20px 16px !important;
  box-sizing: border-box !important;
  position: static !important;
  background: transparent !important;
}

body.app-voice #main_content #page,
body.app-voice #main_content div#page {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
}

body.app-voice #main_content {
  display: inline-block !important;
  width: auto !important;
  min-width: 380px !important;
  max-width: min(92vw, 760px) !important;
  height: auto !important;
  margin: 16px auto !important;
  border-radius: 16px !important;
  padding: 22px 28px 18px 28px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 10 !important;
  text-align: left !important;
}

body.app-voice #default_login_card {
  display: inline-block !important;
  width: auto !important;
  min-width: 340px !important;
  max-width: min(92vw, 440px) !important;
  height: auto !important;
  margin: 16px auto !important;
  border-radius: 16px !important;
  padding: 22px 28px 18px 28px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 10 !important;
  text-align: left !important;
}

body.app-voice .sy-voice-card-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}

body.app-voice .sy-voice-card-logo-img {
  max-height: 50px !important;
  height: 50px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

body.app-voice #background-image,
body.app-voice #background-color,
body.app-voice #background-video {
  display: none !important;
  visibility: hidden !important;
}

body.app-voice table {
  width: 100% !important;
  background: transparent !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}

body.app-voice table td {
  padding: 4px 6px !important;
}

body.app-voice td.vncellreq,
body.app-voice td.vncell,
body.app-voice label.login_text,
body.app-voice .login_text {
  font-weight: 600 !important;
  font-size: 13px !important;
  font-family: inherit !important;
  padding-right: 12px !important;
  vertical-align: top !important;
  padding-top: 10px !important;
}

body.app-voice td.vtable {
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-family: inherit !important;
  padding-bottom: 6px !important;
}

body.app-voice input[type="text"],
body.app-voice input[type="password"],
body.app-voice select,
body.app-voice .formfld,
body.app-voice input.txt {
  border-radius: 8px !important;
  height: 38px !important;
  padding: 0 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

body.app-voice input[type="text"]:focus,
body.app-voice input[type="password"]:focus,
body.app-voice select:focus,
body.app-voice .formfld:focus {
  border-color: #c8232c !important;
  box-shadow: 0 0 0 3px rgba(200, 35, 44, 0.15) !important;
}

/* Primary Submit & Action Buttons with Red Gradient */
body.app-voice input[type="submit"],
body.app-voice input[value="Next"],
body.app-voice input#btn_login,
body.app-voice .btn:not([value="Back"]) {
  background: linear-gradient(135deg, #c8232c 0%, #af1a22 100%) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  height: 40px !important;
  padding: 0 24px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(200, 35, 44, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  margin-top: 6px !important;
}

body.app-voice input[type="submit"]:hover,
body.app-voice input[value="Next"]:hover,
body.app-voice input#btn_login:hover,
body.app-voice .btn:not([value="Back"]):hover {
  background: linear-gradient(135deg, #d32f2f 0%, #c8232c 100%) !important;
  box-shadow: 0 6px 16px rgba(200, 35, 44, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* Secondary / Back Buttons */
body.app-voice input[value="Back"],
body.app-voice input.btn[alt="back"] {
  background: transparent !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  height: 32px !important;
  padding: 0 14px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  transition: all 0.15s ease !important;
}

body.app-voice .login_body_inner {
  width: 100% !important;
}

/* --- 1. SoftVoice WHITE THEME (Default) --- */
:root[data-theme="white"] body.app-voice,
html.theme-white body.app-voice,
body[data-theme="white"].app-voice {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}
:root[data-theme="white"] body.app-voice #main_content,
:root[data-theme="white"] body.app-voice #default_login_card {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}
:root[data-theme="white"] body.app-voice td.vncellreq,
:root[data-theme="white"] body.app-voice td.vncell,
:root[data-theme="white"] body.app-voice label.login_text,
:root[data-theme="white"] body.app-voice .login_text {
  color: #334155 !important;
}
:root[data-theme="white"] body.app-voice td.vtable {
  color: #64748b !important;
}
:root[data-theme="white"] body.app-voice input[type="text"],
:root[data-theme="white"] body.app-voice input[type="password"],
:root[data-theme="white"] body.app-voice select,
:root[data-theme="white"] body.app-voice .formfld,
:root[data-theme="white"] body.app-voice input.txt {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
:root[data-theme="white"] body.app-voice input[value="Back"],
:root[data-theme="white"] body.app-voice input.btn[alt="back"] {
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}
:root[data-theme="white"] body.app-voice input[value="Back"]:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}
:root[data-theme="white"] body.app-voice hr {
  border-color: #e2e8f0 !important;
}

/* --- 2. SoftVoice SLATE THEME --- */
:root[data-theme="slate"] body.app-voice,
html.theme-slate body.app-voice,
body[data-theme="slate"].app-voice {
  background-color: #ede8df !important;
  color: #1c1917 !important;
}
:root[data-theme="slate"] body.app-voice #main_content,
:root[data-theme="slate"] body.app-voice #default_login_card {
  background-color: #faf8f5 !important;
  border: 1px solid #ddd7cd !important;
  box-shadow: 0 20px 45px -10px rgba(44, 38, 27, 0.16), 0 4px 12px -2px rgba(44, 38, 27, 0.08) !important;
  color: #1c1917 !important;
}
:root[data-theme="slate"] body.app-voice td.vncellreq,
:root[data-theme="slate"] body.app-voice td.vncell,
:root[data-theme="slate"] body.app-voice label.login_text,
:root[data-theme="slate"] body.app-voice .login_text {
  color: #44403c !important;
}
:root[data-theme="slate"] body.app-voice td.vtable {
  color: #78716c !important;
}
:root[data-theme="slate"] body.app-voice input[type="text"],
:root[data-theme="slate"] body.app-voice input[type="password"],
:root[data-theme="slate"] body.app-voice select,
:root[data-theme="slate"] body.app-voice .formfld,
:root[data-theme="slate"] body.app-voice input.txt {
  background-color: #faf8f5 !important;
  border: 1px solid #ddd7cd !important;
  color: #1c1917 !important;
}
:root[data-theme="slate"] body.app-voice input[value="Back"],
:root[data-theme="slate"] body.app-voice input.btn[alt="back"] {
  border: 1px solid #ddd7cd !important;
  color: #44403c !important;
}
:root[data-theme="slate"] body.app-voice input[value="Back"]:hover {
  background-color: #e7e2d8 !important;
  color: #1c1917 !important;
}
:root[data-theme="slate"] body.app-voice hr {
  border-color: #ddd7cd !important;
}

/* --- 3. SoftVoice DARK THEME --- */
:root[data-theme="dark"] body.app-voice,
html.dark body.app-voice,
html.theme-dark body.app-voice,
body[data-theme="dark"].app-voice {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}
:root[data-theme="dark"] body.app-voice #main_content,
:root[data-theme="dark"] body.app-voice #default_login_card {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
  color: #f8fafc !important;
}
:root[data-theme="dark"] body.app-voice .sy-voice-card-logo-img {
  content: url("/branding/softvoice-logo-dark.png") !important;
}
:root[data-theme="dark"] body.app-voice td.vncellreq,
:root[data-theme="dark"] body.app-voice td.vncell,
:root[data-theme="dark"] body.app-voice label.login_text,
:root[data-theme="dark"] body.app-voice .login_text {
  color: #cbd5e1 !important;
}
:root[data-theme="dark"] body.app-voice td.vtable {
  color: #94a3b8 !important;
}
:root[data-theme="dark"] body.app-voice input[type="text"],
:root[data-theme="dark"] body.app-voice input[type="password"],
:root[data-theme="dark"] body.app-voice select,
:root[data-theme="dark"] body.app-voice .formfld,
:root[data-theme="dark"] body.app-voice input.txt {
  background-color: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
}
:root[data-theme="dark"] body.app-voice input[value="Back"],
:root[data-theme="dark"] body.app-voice input.btn[alt="back"] {
  border: 1px solid #334155 !important;
  color: #cbd5e1 !important;
}
:root[data-theme="dark"] body.app-voice input[value="Back"]:hover {
  background-color: #334155 !important;
  color: #f8fafc !important;
}
:root[data-theme="dark"] body.app-voice hr {
  border-color: #334155 !important;
}

/* --- 4. SoftVoice MIX THEME --- */
:root[data-theme="mix"] body.app-voice,
html.theme-mix body.app-voice,
body[data-theme="mix"].app-voice {
  background-color: #020617 !important;
  color: #f8fafc !important;
}
:root[data-theme="mix"] body.app-voice #main_content,
:root[data-theme="mix"] body.app-voice #default_login_card {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
  color: #0f172a !important;
}
:root[data-theme="mix"] body.app-voice td.vncellreq,
:root[data-theme="mix"] body.app-voice td.vncell,
:root[data-theme="mix"] body.app-voice label.login_text,
:root[data-theme="mix"] body.app-voice .login_text {
  color: #334155 !important;
}
:root[data-theme="mix"] body.app-voice td.vtable {
  color: #64748b !important;
}
:root[data-theme="mix"] body.app-voice input[type="text"],
:root[data-theme="mix"] body.app-voice input[type="password"],
:root[data-theme="mix"] body.app-voice select,
:root[data-theme="mix"] body.app-voice .formfld,
:root[data-theme="mix"] body.app-voice input.txt {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
:root[data-theme="mix"] body.app-voice input[value="Back"],
:root[data-theme="mix"] body.app-voice input.btn[alt="back"] {
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}
:root[data-theme="mix"] body.app-voice input[value="Back"]:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}
:root[data-theme="mix"] body.app-voice hr {
  border-color: #e2e8f0 !important;
}

/* ==============================================================================
   SOFTMONITOR (ZABBIX) HARMONIZATION & 4-THEME MATRIX
   ============================================================================== */

/* Base Layout Fix: Override body flexbox row and lock 100vh column layout */
html.app-monitor,
body.app-monitor {
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.app-monitor {
  display: flex !important;
  flex-direction: column !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Universal Header positioning */
body.app-monitor #sy-universal-header {
  height: 48px !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 999999 !important;
}

/* Wrapper fills the rest of the vertical screen */
body.app-monitor .wrapper {
  height: calc(100vh - 48px) !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 100% !important;
  position: relative !important;
  box-sizing: border-box !important;
  padding: 20px 16px !important;
  margin: 0 !important;
}

/* Override Zabbix main 1200px constraint on login */
body.app-monitor .wrapper main {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hide legacy server-name, signin-logo, signin-links, and footer */
body.app-monitor .server-name,
body.app-monitor .signin-logo,
body.app-monitor .signin-links,
body.app-monitor footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* SoftMonitor Login Card */
body.app-monitor .signin-container {
  width: 380px !important;
  max-width: calc(100vw - 32px) !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 16px !important;
  padding: 28px 32px 24px 32px !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
  position: relative !important;
  z-index: 10 !important;
  transition: all 0.25s ease !important;
}

/* Card Logo */
body.app-monitor .sy-monitor-card-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

body.app-monitor .sy-monitor-card-logo-img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: 50px !important;
  height: 50px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

/* Form list spacing inside signin-container */
body.app-monitor .signin-container ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.app-monitor .signin-container ul li {
  padding: 10px 0 0 !important;
  font-size: 13px !important;
  margin: 0 !important;
}

body.app-monitor .signin-container ul li:first-child {
  padding-top: 0 !important;
}

/* Input labels */
body.app-monitor .signin-container label {
  display: block !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 0 4px 0 !important;
  font-family: inherit !important;
}

/* Text and password inputs */
body.app-monitor .signin-container input[type="text"],
body.app-monitor .signin-container input[type="password"] {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  height: 40px !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.app-monitor .signin-container input[type="text"]:focus,
body.app-monitor .signin-container input[type="password"]:focus {
  border-color: #c8232c !important;
  box-shadow: 0 0 0 3px rgba(200, 35, 44, 0.15) !important;
}

/* Remember me checkbox */
body.app-monitor .signin-container .checkbox-radio + label {
  display: inline-flex !important;
  align-items: center !important;
  font-weight: normal !important;
  font-size: 13px !important;
  cursor: pointer !important;
  color: #64748b !important;
  user-select: none !important;
}

/* Red Gradient Submit Button */
body.app-monitor .signin-container button[type="submit"],
body.app-monitor .signin-container #enter {
  background: linear-gradient(135deg, #c8232c 0%, #af1a22 100%) !important;
  color: #ffffff !important;
  border: none !important;
  height: 42px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(200, 35, 44, 0.3) !important;
  margin: 14px 0 0 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 14px !important;
  transition: all 0.15s ease !important;
}

body.app-monitor .signin-container button[type="submit"]:hover,
body.app-monitor .signin-container #enter:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #c8232c 100%) !important;
  box-shadow: 0 6px 16px rgba(200, 35, 44, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* ==============================================================================
   SOFTMONITOR 4-THEME MATRIX
   ============================================================================== */

/* --- 1. SoftMonitor WHITE THEME --- */
:root[data-theme="white"] body.app-monitor,
body[data-theme="white"].app-monitor {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}
:root[data-theme="white"] body.app-monitor .signin-container {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}
:root[data-theme="white"] body.app-monitor .signin-container input[type="text"],
:root[data-theme="white"] body.app-monitor .signin-container input[type="password"] {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
:root[data-theme="white"] body.app-monitor .signin-container label {
  color: #334155 !important;
}
:root[data-theme="white"] body.app-monitor .signin-container .checkbox-radio + label {
  color: #64748b !important;
}

/* --- 2. SoftMonitor SLATE THEME --- */
:root[data-theme="slate"] body.app-monitor,
html.theme-slate body.app-monitor,
body[data-theme="slate"].app-monitor {
  background-color: #ede8df !important;
  color: #1c1917 !important;
}
:root[data-theme="slate"] body.app-monitor .signin-container {
  background-color: #faf8f5 !important;
  border-color: #ddd7cd !important;
  box-shadow: 0 20px 45px -10px rgba(44, 38, 27, 0.16), 0 4px 12px -2px rgba(44, 38, 27, 0.08) !important;
  color: #1c1917 !important;
}
:root[data-theme="slate"] body.app-monitor .signin-container input[type="text"],
:root[data-theme="slate"] body.app-monitor .signin-container input[type="password"] {
  background-color: #faf8f5 !important;
  border-color: #ddd7cd !important;
  color: #1c1917 !important;
}
:root[data-theme="slate"] body.app-monitor .signin-container label {
  color: #44403c !important;
}
:root[data-theme="slate"] body.app-monitor .signin-container .checkbox-radio + label {
  color: #78716c !important;
}

/* --- 3. SoftMonitor DARK THEME --- */
:root[data-theme="dark"] body.app-monitor,
html.dark body.app-monitor,
html.theme-dark body.app-monitor,
body[data-theme="dark"].app-monitor {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}
:root[data-theme="dark"] body.app-monitor .signin-container {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
  color: #f8fafc !important;
}
:root[data-theme="dark"] body.app-monitor .sy-monitor-card-logo-img {
  content: url("/branding/softmonitor-logo-dark.png") !important;
}
:root[data-theme="dark"] body.app-monitor .signin-container input[type="text"],
:root[data-theme="dark"] body.app-monitor .signin-container input[type="password"] {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
:root[data-theme="dark"] body.app-monitor .signin-container label {
  color: #cbd5e1 !important;
}
:root[data-theme="dark"] body.app-monitor .signin-container .checkbox-radio + label {
  color: #94a3b8 !important;
}

/* --- 4. SoftMonitor MIX THEME --- */
:root[data-theme="mix"] body.app-monitor,
html.theme-mix body.app-monitor,
body[data-theme="mix"].app-monitor {
  background-color: #020617 !important;
  color: #f8fafc !important;
}
:root[data-theme="mix"] body.app-monitor .signin-container {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
  color: #0f172a !important;
}
:root[data-theme="mix"] body.app-monitor .signin-container input[type="text"],
:root[data-theme="mix"] body.app-monitor .signin-container input[type="password"] {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
:root[data-theme="mix"] body.app-monitor .signin-container label {
  color: #334155 !important;
}
:root[data-theme="mix"] body.app-monitor .signin-container .checkbox-radio + label {
  color: #64748b !important;
}