/* MATRIX VDM Authentication UI Repair V1.2
   Auth-only stylesheet. Intentionally isolated from the main CRM UI. */

:root{--matrix-auth-yellow:#ffeb00;--matrix-auth-ink:#111318;--matrix-auth-muted:#7a8491;--matrix-auth-stroke:#dfe4ea}
html,body{margin:0!important;min-height:100%!important;width:100%!important;overflow-x:hidden!important}
body{background:#0d0f18!important}
*,*::before,*::after{box-sizing:border-box}

.auth-page{
  width:100%!important;
  min-height:100vh!important;
  display:grid!important;
  grid-template-columns:minmax(360px,420px) minmax(0,1fr)!important;
  background:linear-gradient(135deg,#0f1016 0%,#171827 48%,#0d1021 100%)!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}

.auth-panel{
  min-width:0!important;
  min-height:100vh!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  padding:20px 28px 18px!important;
  background:#f8f9fb!important;
  border-right:1px solid rgba(15,23,42,.08)!important;
  color:#111318!important;
  overflow:auto!important;
}
.auth-panel-top{display:flex!important;align-items:center!important;min-height:52px!important;margin:0 0 10px!important}
.auth-panel-brand{display:inline-flex!important;align-items:center!important;max-width:180px!important;min-height:44px!important;text-decoration:none!important;overflow:hidden!important}
.auth-panel-brand img.auth-logo-image{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:145px!important;
  max-height:46px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
.auth-logo-mark{display:inline-grid!important;grid-auto-flow:column!important;align-items:center!important;overflow:hidden!important;border-radius:7px!important}
.auth-logo-mark .auth-logo-v{background:var(--matrix-auth-yellow)!important;color:#111!important;padding:8px 11px!important;font-weight:900!important;font-size:23px!important;line-height:1!important}
.auth-logo-mark .auth-logo-dm{background:#1a1d22!important;color:#fff!important;padding:8px 9px!important;font-weight:800!important;font-size:11px!important;line-height:1.05!important}

.auth-panel-body{display:flex!important;align-items:center!important;justify-content:center!important;flex:1 1 auto!important;padding:16px 0 22px!important}
.auth-card{width:100%!important;max-width:360px!important;margin:0 auto!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#101318!important}
.auth-overline{margin:0 0 10px!important;color:#8992a0!important;font-size:10px!important;font-weight:850!important;letter-spacing:.1em!important;text-transform:uppercase!important}
.auth-card h1{margin:0 0 10px!important;color:#161a20!important;font-size:27px!important;line-height:1.08!important;letter-spacing:-.035em!important;font-weight:850!important}
.auth-card .auth-subtitle{margin:0 0 22px!important;color:#7a8491!important;font-size:13px!important;line-height:1.55!important}
.auth-form{display:grid!important;gap:15px!important}
.auth-label{display:block!important;margin:0 0 7px!important;color:#57606c!important;font-size:11px!important;font-weight:800!important}
.auth-input-wrap{display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;min-height:46px!important;padding:0 12px!important;border:1px solid var(--matrix-auth-stroke)!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important;transition:border-color .15s ease,box-shadow .15s ease!important}
.auth-input-wrap:focus-within{border-color:#d2c000!important;box-shadow:0 0 0 4px rgba(255,235,0,.15)!important}
.auth-input-icon{display:grid!important;place-items:center!important;flex:0 0 auto!important;color:#7f8792!important}
.auth-input-icon svg{width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.auth-input-wrap input{width:100%!important;min-width:0!important;border:0!important;outline:0!important;background:transparent!important;color:#1b2026!important;font-size:13.5px!important;padding:0!important;box-shadow:none!important}
.auth-input-wrap input::placeholder{color:#a4acb7!important}
.auth-action-row{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;margin-top:-2px!important}
.auth-action-row .small{font-size:11px!important;line-height:1.45!important;color:#7a8491!important}
.auth-link{flex:0 0 auto!important;color:#384152!important;font-size:11px!important;font-weight:800!important;text-decoration:none!important}
.auth-link:hover{text-decoration:underline!important;color:#111!important}
.auth-submit{width:100%!important;height:46px!important;border:1px solid #ddcf00!important;border-radius:11px!important;background:var(--matrix-auth-yellow)!important;color:#111!important;font-size:13px!important;font-weight:900!important;box-shadow:0 10px 22px rgba(255,235,0,.15)!important;cursor:pointer!important}
.auth-submit:hover{filter:saturate(104%)!important;transform:translateY(-1px)!important}
.auth-helper{margin-top:15px!important;padding-top:15px!important;border-top:1px solid #eceff3!important;color:#7c8693!important;font-size:11px!important;line-height:1.55!important}
.auth-helper strong{color:#525a66!important}
.auth-password-wrap{padding-right:7px!important}
.auth-password-toggle{width:36px!important;height:36px!important;flex:0 0 36px!important;display:grid!important;place-items:center!important;padding:0!important;border:0!important;border-radius:9px!important;background:transparent!important;color:#7d8793!important;cursor:pointer!important}
.auth-password-toggle:hover{background:#f3f5f7!important;color:#171b21!important}
.auth-password-toggle svg{grid-area:1/1!important;width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.auth-password-toggle .auth-eye-hide{display:none!important}.auth-password-toggle.is-visible .auth-eye-show{display:none!important}.auth-password-toggle.is-visible .auth-eye-hide{display:block!important}

.auth-panel-footer{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding-top:14px!important;border-top:1px solid #eceff3!important;color:#94a0ad!important;font-size:10px!important}
.auth-footer-chip{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:6px 9px!important;border:1px solid #e7ebf0!important;border-radius:999px!important;background:#fff!important;color:#55606c!important;font-weight:750!important;white-space:nowrap!important}
.auth-footer-dot{width:7px!important;height:7px!important;border-radius:50%!important;background:#22c55e!important;box-shadow:0 0 0 3px rgba(34,197,94,.12)!important}

.auth-hero{
  position:relative!important;
  min-width:0!important;
  min-height:100vh!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:34px!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,#11131e 0%,#171827 58%,#101324 100%)!important;
}
.auth-hero::before{content:""!important;position:absolute!important;inset:0!important;background:radial-gradient(circle at 20% 20%,rgba(255,235,0,.10),transparent 30%),radial-gradient(circle at 82% 18%,rgba(118,126,255,.08),transparent 25%),radial-gradient(circle at 82% 85%,rgba(255,235,0,.07),transparent 28%)!important}
.auth-hero::after{content:""!important;position:absolute!important;inset:22px!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:28px!important;pointer-events:none!important}
.auth-hero-grid{position:absolute!important;inset:0!important;opacity:.22!important;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px)!important;background-size:44px 44px!important}
.auth-hero-inner{position:relative!important;z-index:1!important;width:100%!important;max-width:680px!important;margin:0 auto!important;padding:32px 20px!important;text-align:center!important;color:#fff!important;overflow:hidden!important}
.auth-hero-brand{display:flex!important;align-items:center!important;justify-content:center!important;min-height:74px!important;margin:0 0 22px!important;overflow:hidden!important}
.auth-hero-brand img.auth-hero-logo{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:225px!important;
  max-height:82px!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:drop-shadow(0 8px 25px rgba(0,0,0,.28))!important;
}
.auth-hero-kicker{display:inline-block!important;position:relative!important;margin:0 0 17px!important;padding-bottom:9px!important;color:#fff!important;font-size:14px!important;font-weight:800!important}
.auth-hero-kicker::after{content:""!important;position:absolute!important;left:50%!important;bottom:0!important;transform:translateX(-50%)!important;width:68px!important;height:3px!important;border-radius:999px!important;background:linear-gradient(90deg,transparent,var(--matrix-auth-yellow),transparent)!important}
.auth-hero-title{margin:0 0 15px!important;color:#fff!important;font-size:58px!important;line-height:1.02!important;letter-spacing:-.055em!important;font-weight:900!important}
.auth-hero-copy{max-width:560px!important;margin:0 auto 22px!important;color:rgba(255,255,255,.8)!important;font-size:16px!important;line-height:1.65!important}
.auth-hero-pills{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:9px!important;margin-top:25px!important}
.auth-pill{display:inline-flex!important;align-items:center!important;gap:7px!important;height:36px!important;padding:0 13px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:999px!important;background:rgba(255,255,255,.055)!important;color:#fff!important;font-size:11px!important;font-weight:750!important;white-space:nowrap!important}
.auth-pill-dot{width:7px!important;height:7px!important;border-radius:50%!important;background:var(--matrix-auth-yellow)!important;box-shadow:0 0 0 4px rgba(255,235,0,.14)!important}

/* Other auth screens keep the same visual language. */
.auth-note-card,.auth-qr-card,.auth-codes-card{border:1px solid #e7ebef!important;background:#fff!important;border-radius:15px!important;padding:15px!important;box-shadow:0 10px 30px rgba(15,23,42,.05)!important}
.auth-code-input{font-size:23px!important;font-weight:800!important;text-align:center!important;letter-spacing:.28em!important}
.auth-codes-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
.auth-code-chip{display:block!important;padding:10px 11px!important;border:1px solid #e3e8ee!important;border-radius:11px!important;background:#f7f9fb!important;color:#111!important;font-size:12px!important;font-weight:800!important}

@media (max-width:1100px){
  .auth-page{grid-template-columns:minmax(340px,390px) minmax(0,1fr)!important}
  .auth-hero-title{font-size:48px!important}
  .auth-hero-copy{font-size:14px!important}
  .auth-hero-brand img.auth-hero-logo{max-width:190px!important;max-height:70px!important}
}
@media (max-width:900px){
  .auth-page{grid-template-columns:1fr!important;overflow:auto!important}
  .auth-panel{min-height:100vh!important;width:100%!important;max-width:none!important;border-right:0!important}
  .auth-hero{display:none!important}
  .auth-card{max-width:390px!important}
}
@media (max-width:575px){
  .auth-panel{padding:16px 18px 18px!important}
  .auth-panel-brand img.auth-logo-image{max-width:122px!important;max-height:39px!important}
  .auth-card h1{font-size:24px!important}
  .auth-action-row{align-items:flex-start!important}
  .auth-panel-footer{align-items:flex-start!important;flex-direction:column!important}
  .auth-codes-grid{grid-template-columns:1fr!important}
}

/* ==========================================================
   MATRIX VDM Login - Previous Design Gradient Brand Fix V1.4
   Keeps the V1.2 login design. Only the left logo zone is
   converted into a dark gradient strip so the full agency
   logo remains visible without a separate black logo card.
   ========================================================== */
.auth-panel-top{
  min-height:82px!important;
  margin:-20px -28px 14px!important;
  padding:15px 28px!important;
  display:flex!important;
  align-items:center!important;
  overflow:visible!important;
  background:
    radial-gradient(circle at 12% 20%,rgba(255,235,0,.09),transparent 34%),
    linear-gradient(112deg,#090b0f 0%,#11151d 54%,#181b23 100%)!important;
  border-bottom:1px solid rgba(255,235,0,.16)!important;
  box-shadow:0 8px 24px rgba(15,23,42,.08)!important;
}

.auth-panel-brand{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:auto!important;
  max-width:none!important;
  min-height:50px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}

.auth-panel-brand img.auth-logo-image{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:174px!important;
  max-height:52px!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.24))!important;
}

.auth-panel-brand .auth-logo-mark{
  overflow:visible!important;
}

/* Keep the previous V1.2 hero design exactly as the visual base. */
.auth-hero-brand{
  overflow:visible!important;
}
.auth-hero-brand img.auth-hero-logo{
  max-width:225px!important;
  max-height:82px!important;
  object-fit:contain!important;
  object-position:center!important;
}

@media (max-width:1100px){
  .auth-panel-top{
    margin:-20px -26px 14px!important;
    padding-left:26px!important;
    padding-right:26px!important;
  }
}

@media (max-width:900px){
  .auth-panel-top{
    position:sticky!important;
    top:0!important;
    z-index:5!important;
  }
}

@media (max-width:575px){
  .auth-panel-top{
    min-height:72px!important;
    margin:-16px -18px 14px!important;
    padding:12px 18px!important;
  }
  .auth-panel-brand img.auth-logo-image{
    max-width:150px!important;
    max-height:46px!important;
  }
}

/* ==========================================================
   MATRIX VDM Login - Right Hero Simplified Shield Layout V1.0
   Keeps the left login panel untouched and simplifies the
   right side to shield emblem + important text only.
   ========================================================== */
.auth-hero-inner.auth-hero-inner-vdm{
  max-width:700px!important;
  padding:26px 22px!important;
}
.auth-hero-emblem-wrap{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:340px!important;
  margin:0 auto 22px!important;
}
.auth-hero-emblem-glow{
  position:absolute!important;
  border-radius:50%!important;
  filter:blur(4px)!important;
  pointer-events:none!important;
}
.auth-hero-emblem-glow-a{
  width:360px!important;
  height:360px!important;
  background:radial-gradient(circle,rgba(255,235,0,.22),transparent 66%)!important;
  opacity:.9!important;
}
.auth-hero-emblem-glow-b{
  width:460px!important;
  height:460px!important;
  background:radial-gradient(circle,rgba(104,114,255,.11),transparent 68%)!important;
  opacity:.75!important;
}
.auth-hero-emblem{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  max-width:320px!important;
  height:auto!important;
  object-fit:contain!important;
  filter:drop-shadow(0 22px 48px rgba(0,0,0,.42)) drop-shadow(0 0 30px rgba(255,235,0,.10))!important;
}
.auth-hero-kicker{
  margin:0 0 14px!important;
  font-size:14px!important;
}
.auth-hero-title{
  margin:0 0 15px!important;
  font-size:56px!important;
  line-height:1.03!important;
}
.auth-hero-copy{
  max-width:590px!important;
  margin:0 auto 22px!important;
}
@media (max-width:1100px){
  .auth-hero-emblem-wrap{min-height:300px!important}
  .auth-hero-emblem{max-width:285px!important}
  .auth-hero-title{font-size:48px!important}
}
@media (max-width:980px){
  .auth-hero-inner.auth-hero-inner-vdm{max-width:640px!important}
}