/* Work Client Theme - Client Authentication (Login / Register / Forgot)
   Injected ONLY on client authentication pages via hooks.
   Uses the same :root variables from Client Theme.
*/

html.wct-auth{
  --client-primary: #2563eb;
  --client-primary-soft: #e8eeff;
  --client-primary-rgba-12: rgba(37,99,235,.12);
  --client-primary-rgba-18: rgba(37,99,235,.18);
  --client-bg: #f7f9fc;
  --client-text: #0f172a;
  --client-card-bg: #ffffff;
  --client-border: #e2e8f0;
  --client-button-bg: var(--client-primary);
  --client-button-hover: #1d4ed8;
  --client-button-active: #1e40af;
  --client-button-text: #ffffff;
  --client-font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --client-font-size: 14px;
  --client-card-radius: 18px;
  --client-card-shadow: 0 18px 60px rgba(2, 6, 23, 0.16);
  --client-transition: 180ms;
}

/* Scope everything to html.wct-auth to prevent accidental styling on other pages */
html.wct-auth{
  height: 100%;
}

html.wct-auth body{
  min-height: 100vh;
  font-family: var(--client-font-family) !important;
  font-size: var(--client-font-size) !important;
  color: var(--client-text) !important;
  background: var(--client-bg) !important;
  padding: 28px 16px;
}

html.wct-auth body::before,
html.wct-auth body::after{
  content: "";
  position: fixed;
  inset: -20% -20% auto -20%;
  height: 70vh;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(600px circle at 15% 20%, var(--client-primary-rgba-18), transparent 60%),
    radial-gradient(520px circle at 70% 10%, var(--client-primary-rgba-12), transparent 55%);
}

html.wct-auth body::after{
  inset: auto -20% -20% -20%;
  height: 70vh;
  background:
    radial-gradient(600px circle at 80% 70%, var(--client-primary-rgba-18), transparent 60%),
    radial-gradient(520px circle at 20% 85%, var(--client-primary-rgba-12), transparent 55%);
  opacity: .85;
}

/* Common Perfex auth container */
html.wct-auth .authentication-form,
html.wct-auth .company-logo + .authentication-form{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(226,232,240,.75);
  border-radius: 22px;
  box-shadow: var(--client-card-shadow) !important;
  overflow: hidden;
}

html.wct-auth .authentication-form{
  padding: 0 !important;
}

html.wct-auth .authentication-form .form-group,
html.wct-auth .authentication-form .row{
  margin-left: 0;
  margin-right: 0;
}

/* Headline / helper text */
html.wct-auth h1, html.wct-auth h2, html.wct-auth h3, html.wct-auth .tw-text-neutral-800{
  color: var(--client-text) !important;
}

html.wct-auth .tw-text-neutral-600{
  color: rgba(15,23,42,.72) !important;
}

/* Logo sizing (keeps Perfex logo behavior) */
html.wct-auth .company-logo img{
  max-width: 240px;
  width: auto;
  height: auto;
}

/* Inputs */
html.wct-auth .form-control,
html.wct-auth input[type="text"],
html.wct-auth input[type="email"],
html.wct-auth input[type="password"],
html.wct-auth input[type="number"],
html.wct-auth select,
html.wct-auth textarea{
  border-color: rgba(226,232,240,.9) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.92) !important;
  transition: border-color var(--client-transition) ease, box-shadow var(--client-transition) ease, transform var(--client-transition) ease;
}

html.wct-auth .form-control:focus,
html.wct-auth input:focus,
html.wct-auth select:focus,
html.wct-auth textarea:focus{
  border-color: var(--client-primary) !important;
  box-shadow: 0 0 0 4px var(--client-primary-rgba-12) !important;
}

/* Buttons */
html.wct-auth .btn,
html.wct-auth button{
  border-radius: 999px !important;
  transition: transform var(--client-transition) ease, box-shadow var(--client-transition) ease, background var(--client-transition) ease, border-color var(--client-transition) ease;
}

html.wct-auth .btn-primary,
html.wct-auth .btn-info{
  background: linear-gradient(135deg, var(--client-button-bg), var(--client-button-hover)) !important;
  border-color: transparent !important;
  color: var(--client-button-text) !important;
  box-shadow: 0 14px 40px rgba(2,6,23,.14);
}

html.wct-auth .btn-primary:hover,
html.wct-auth .btn-info:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 56px rgba(2,6,23,.18);
}

html.wct-auth .btn-primary:active,
html.wct-auth .btn-info:active{
  transform: translateY(0);
}

/* Links */
html.wct-auth a{
  color: var(--client-primary) !important;
}

html.wct-auth a:hover{
  color: var(--client-button-hover) !important;
}

/* Small subtle divider */
html.wct-auth .wct-auth-divider{
  height: 1px;
  background: rgba(226,232,240,.9);
  margin: 16px 0;
}

/* Motion OFF compatibility */
html.wct-auth.wct-no-motion *,
html.wct-auth.wct-no-motion *::before,
html.wct-auth.wct-no-motion *::after{
  transition: none !important;
  animation: none !important;
}

/* RTL tweaks */
html[dir="rtl"].wct-auth .authentication-form{
  direction: rtl;
}

/* Subtle entrance animation */
@keyframes wctAuthIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

html.wct-auth:not(.wct-no-motion) .authentication-form{
  animation: wctAuthIn 420ms ease both;
}

/* ============================================================
   F18: Auth Dark Mode
============================================================ */
html.wct-auth.wct-dark body{
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

html.wct-auth.wct-dark body::before,
html.wct-auth.wct-dark body::after{
  opacity: .4;
}

html.wct-auth.wct-dark .authentication-form,
html.wct-auth.wct-dark .company-logo + .authentication-form{
  background: rgba(30,41,59,.85);
  border-color: rgba(51,65,85,.75);
}

html.wct-auth.wct-dark h1,
html.wct-auth.wct-dark h2,
html.wct-auth.wct-dark h3,
html.wct-auth.wct-dark .tw-text-neutral-800{
  color: #e2e8f0 !important;
}

html.wct-auth.wct-dark .tw-text-neutral-600{
  color: rgba(226,232,240,.72) !important;
}

html.wct-auth.wct-dark .form-control,
html.wct-auth.wct-dark input[type="text"],
html.wct-auth.wct-dark input[type="email"],
html.wct-auth.wct-dark input[type="password"],
html.wct-auth.wct-dark input[type="number"],
html.wct-auth.wct-dark select,
html.wct-auth.wct-dark textarea{
  background: rgba(15,23,42,.85) !important;
  color: #e2e8f0 !important;
  border-color: rgba(51,65,85,.9) !important;
}

html.wct-auth.wct-dark a{
  color: #60a5fa !important;
}

html.wct-auth.wct-dark a:hover{
  color: #93c5fd !important;
}

html.wct-auth.wct-dark label{
  color: #cbd5e1 !important;
}