/* Default orange theme */
.login-left{
  background: linear-gradient(180deg, #ff7b4f 0%, #ff6a3d 100%);
  color:#fff;
  position: relative;
  overflow: hidden;
}
/* Blue theme */
[data-theme="blue"] .login-left{ background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%); }
/* Green theme */
[data-theme="green"] .login-left{ background: linear-gradient(180deg, #34d399 0%, #10b981 100%); }
/* Purple theme */
[data-theme="purple"] .login-left{ background: linear-gradient(180deg, #a78bfa 0%, #8b5cf6 100%); }

/* Road/Highway themed background pattern */
.login-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    /* Toll gate arch elements */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M20 180 L20 100 Q20 80 40 80 L60 80 Q80 80 80 100 L80 180' fill='none' stroke='%23ffffff' stroke-width='3' opacity='0.08'/%3E%3Cpath d='M120 180 L120 100 Q120 80 140 80 L160 80 Q180 80 180 100 L180 180' fill='none' stroke='%23ffffff' stroke-width='3' opacity='0.08'/%3E%3C/svg%3E"),
    /* Highway lanes with dashed lines */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='300' viewBox='0 0 120 300'%3E%3Crect x='55' y='0' width='10' height='40' fill='%23ffffff' opacity='0.12'/%3E%3Crect x='55' y='60' width='10' height='40' fill='%23ffffff' opacity='0.12'/%3E%3Crect x='55' y='120' width='10' height='40' fill='%23ffffff' opacity='0.12'/%3E%3Crect x='55' y='180' width='10' height='40' fill='%23ffffff' opacity='0.12'/%3E%3Crect x='55' y='240' width='10' height='40' fill='%23ffffff' opacity='0.12'/%3E%3Cline x1='15' y1='0' x2='15' y2='300' stroke='%23ffffff' stroke-width='4' opacity='0.06'/%3E%3Cline x1='105' y1='0' x2='105' y2='300' stroke='%23ffffff' stroke-width='4' opacity='0.06'/%3E%3C/svg%3E"),
    /* Road direction arrows */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='160' viewBox='0 0 80 160'%3E%3Cpath d='M40 20 L55 50 L45 50 L45 80 L35 80 L35 50 L25 50 Z' fill='%23ffffff' opacity='0.07'/%3E%3C/svg%3E"),
    /* Speedometer/gauge circles */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Ccircle cx='150' cy='150' r='60' fill='none' stroke='%23ffffff' stroke-width='2' opacity='0.05'/%3E%3Ccircle cx='150' cy='150' r='45' fill='none' stroke='%23ffffff' stroke-width='1.5' opacity='0.04'/%3E%3Cpath d='M150 105 L150 150 L180 135' fill='none' stroke='%23ffffff' stroke-width='2' opacity='0.06'/%3E%3C/svg%3E"),
    /* Diagonal highway perspective lines */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cline x1='200' y1='400' x2='150' y2='0' stroke='%23ffffff' stroke-width='2' opacity='0.04'/%3E%3Cline x1='200' y1='400' x2='250' y2='0' stroke='%23ffffff' stroke-width='2' opacity='0.04'/%3E%3Cline x1='200' y1='400' x2='100' y2='0' stroke='%23ffffff' stroke-width='1' opacity='0.03'/%3E%3Cline x1='200' y1='400' x2='300' y2='0' stroke='%23ffffff' stroke-width='1' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 200px 200px, 120px 300px, 80px 160px, 300px 300px, 400px 400px;
  background-position:
    10% 20%,
    50% 0,
    70% 60%,
    85% 75%,
    center center;
  pointer-events: none;
  opacity: 1;
}

/* Road network pattern overlay */
.login-left::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    /* E-vignette symbol inspired element */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect x='20' y='30' width='60' height='40' rx='8' fill='none' stroke='%23ffffff' stroke-width='2' opacity='0.06'/%3E%3Ctext x='50' y='55' font-family='Arial' font-size='14' font-weight='bold' fill='%23ffffff' opacity='0.08' text-anchor='middle'%3EBG%3C/text%3E%3C/svg%3E"),
    /* Curved highway/road */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cpath d='M0 200 Q80 180 125 125 Q170 70 250 50' fill='none' stroke='%23ffffff' stroke-width='20' opacity='0.04'/%3E%3Cpath d='M0 200 Q80 180 125 125 Q170 70 250 50' fill='none' stroke='%23ffffff' stroke-width='2' stroke-dasharray='8 12' opacity='0.08'/%3E%3C/svg%3E"),
    /* Car silhouette */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cpath d='M30 90 L35 70 Q45 55 60 55 L90 55 Q105 55 115 70 L120 90 L125 90 Q130 90 130 95 L130 105 Q130 110 125 110 L115 110 L115 105 Q115 100 110 100 L105 100 Q100 100 100 105 L100 110 L50 110 L50 105 Q50 100 45 100 L40 100 Q35 100 35 105 L35 110 L25 110 Q20 110 20 105 L20 95 Q20 90 25 90 Z' fill='%23ffffff' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 100px 100px, 250px 250px, 150px 150px;
  background-position:
    5% 85%,
    60% 30%,
    90% 90%;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 1;
}
.login-bubble{ position:absolute; inset:auto auto 8% -10%; width:520px; height:520px; background:radial-gradient( circle at 50% 50%, rgba(255,255,255,.28), rgba(255,255,255,0) 60% ); filter: blur(6px); opacity:.8; }
.input-wrap{ position:relative; }
.input-wrap > i { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); }
.input-wrap > input{ padding-left:2.5rem; }
.btn-lg{ padding:.9rem 1.1rem; font-size:1.125rem; border-radius:1rem; }
.sso-hint{ color:#6b7280; }