/**
 * Central domain shell compatibility layer.
 * Loaded after Bootstrap theme + landing main.css so auth/landing pages keep
 * their intended look while dashboard pages still use the admin theme.
 */

html.central-domain {
  scroll-behavior: smooth;
}

body.central-domain:has(.login-body),
body.central-domain:has(.signup-body) {
  font-family: 'Almarai', sans-serif !important;
  background: #f8f9fb !important;
  overflow: hidden;
}

body.central-domain:has(.central-landing-page) {
  font-family: 'Almarai', sans-serif !important;
  background: #fff !important;
}

body.central-domain:has(.login-body) .back-top,
body.central-domain:has(.signup-body) .back-top,
body.central-domain:has(.central-landing-page) .back-top {
  display: none !important;
}

html[dir="rtl"] .login-body,
html[dir="rtl"] .signup-body,
html[dir="rtl"] .central-landing-page,
html[dir="rtl"] .login-page,
html[dir="rtl"] .signup-page {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] .login-body,
html[dir="ltr"] .signup-body,
html[dir="ltr"] .central-landing-page,
html[dir="ltr"] .login-page,
html[dir="ltr"] .signup-page {
  direction: ltr;
  text-align: left;
}

/* Bootstrap headings/links override brand panel white text */
.signup-brand,
.signup-brand.login-brand {
  color: #fff !important;
}

.signup-brand .signup-brand-title,
.signup-brand .signup-logo-name,
.signup-brand .signup-stat-value,
.signup-brand .signup-stat-label {
  color: #fff !important;
}

.signup-brand .signup-brand-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

.signup-brand .signup-brand-desc,
.signup-brand .signup-features li,
.signup-brand .signup-logo-tagline,
.signup-brand .signup-proof-text {
  color: rgba(255, 255, 255, 0.85) !important;
}

.signup-brand .login-brand-highlight {
  color: #5eb3ff !important;
}

.signup-brand .signup-logo,
.signup-brand .signup-logo:hover {
  color: #fff !important;
  text-decoration: none;
}

.signup-brand h1,
.signup-brand h2,
.signup-brand h3,
.signup-brand p,
.signup-brand li,
.signup-brand span {
  color: inherit;
}

/* Bootstrap `main` rule should not flatten auth panels */
.login-body main.login-form-panel,
.signup-body main.signup-form-panel {
  background: #f8f9fb !important;
  margin: 0;
  min-height: 0;
}

.signup-body main.signup-form-panel {
  background: #fff !important;
}

/* Keep auth form typography independent from dashboard heading scale */
.login-form-panel .login-form-title,
.signup-form-panel .signup-form-title {
  color: #1d1d1b !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

.login-form-panel .login-form-subtitle,
.signup-form-panel .signup-form-subtitle {
  color: #847f7f !important;
  font-size: 0.9375rem !important;
}

.login-form-panel .login-label,
.signup-form-panel .signup-label {
  color: #1d1d1b !important;
}

/* Bootstrap button styles break landing hero "Watch video" control after SPA navigation */
.central-landing-page .hero-video-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  color: inherit !important;
  line-height: normal !important;
  min-height: 0 !important;
  vertical-align: baseline !important;
}

.central-landing-page .hero-video-btn:hover,
.central-landing-page .hero-video-btn:focus,
.central-landing-page .hero-video-btn:active,
.central-landing-page .hero-video-btn:focus-visible {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.central-landing-page .hero-play-btn {
  box-sizing: border-box !important;
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  background: #085DCE !important;
  border: 8px solid #CCEBFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.central-landing-page .hero-play-btn:hover {
  transform: scale(1.05);
}

.central-landing-page .hero-cta {
  text-decoration: none !important;
}