/* =============================================================
   LOGIN PAGE
   ============================================================= */
.login-body{ background:linear-gradient(160deg, var(--navy), var(--primary)); }
.login-wrap{
  min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr;
}
.login-brand{
  background:var(--lightblue);
  color:var(--navy); padding:56px 60px; display:flex; flex-direction:column; gap:28px;
}
.brand-logo{ display:flex; align-items:center; gap:14px; }
.logo-mark{
  width:52px; height:52px; border-radius:14px;
  background:var(--cream); color:var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  flex-shrink:0;
}
.brand-logo h1{ font-size:1.35rem; }
.brand-logo h1 span{ color:var(--cream); }
.brand-tag{ font-size:.78rem; opacity:.85; letter-spacing:.06em; text-transform:uppercase; }
.login-brand h2{ font-size:2.2rem; margin-top:12px; }
.brand-copy{ opacity:.9; max-width:420px; line-height:1.6; }
.brand-points{ list-style:none; display:grid; gap:12px; margin-top:8px; }
.brand-points li{ display:flex; gap:10px; align-items:center; opacity:.95; }
.brand-points i{ color:var(--cream); }

.login-panel{ display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.login-card{
  background:var(--white); border-radius:22px; box-shadow:var(--shadow-lg);
  padding:38px 36px; width:100%; max-width:440px;
}
.login-card h3{ font-size:1.5rem; }
.login-sub{ color:var(--muted); margin:4px 0 22px; font-size:.92rem; }
.login-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  background:var(--grey); border-radius:var(--pill); padding:5px; margin-bottom:24px;
}
.login-tab{
  border:none; background:transparent; border-radius:var(--pill);
  padding:10px 6px; font-weight:600; font-size:.88rem; color:var(--muted);
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .2s, color .2s;
}
.login-tab.active{ background:var(--primary); color:#fff; box-shadow:var(--shadow); }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; }
.input-icon{ position:relative; }
.input-icon > i{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:.85rem;
}
.input-icon input, .field select, .field textarea, .field input{
  width:100%; border:1.5px solid var(--border); border-radius:12px;
  padding:11px 14px; background:var(--grey); outline:none;
  transition:border .15s, background .15s;
}
.input-icon input{ padding-left:40px; }
.input-icon input:focus, .field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--primary); background:var(--white);
}
.toggle-pass{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:none; background:none; color:var(--muted); padding:8px;
}
.login-row{ display:flex; justify-content:space-between; align-items:center; margin:4px 0 20px; font-size:.85rem; }
.check{ display:flex; gap:8px; align-items:center; cursor:pointer; }
.check input{ accent-color:var(--primary); width:15px; height:15px; }
.link{ font-weight:600; }
.login-error{
  background:var(--red-bg); color:var(--red); border-radius:10px;
  padding:10px 14px; font-size:.85rem; margin-bottom:14px;
  display:flex; gap:8px; align-items:center;
}
.demo-box{
  margin-top:22px; background:var(--cream); border-radius:14px; padding:14px 18px;
  font-size:.82rem; color:var(--navy); display:grid; gap:4px;
}
body.dark .demo-box{ background:#3f3416; color:#ffe9bd; }


/* Left panel uses the light CRM background after the colour swap. */
.login-brand .brand-copy,
.login-brand .brand-points li{ color:var(--navy); }
.login-brand .brand-tag{ color:var(--primary); opacity:1; }
.login-brand .brand-points i{ color:var(--primary); }
.login-brand .brand-logo h1 span{ color:var(--primary); }

.login-security-note{
  margin-top:20px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--muted);
  background:var(--grey);
  font-size:.8rem;
  line-height:1.45;
}
.login-security-note i{ color:var(--primary); margin-top:2px; }
.login-card .btn[disabled]{ opacity:.7; cursor:not-allowed; }

.login-error[hidden] {
  display: none !important;
}

/* ============================================================
   LOGIN PASSWORD EYE OVERLAP FIX
============================================================ */

/* Password field wrapper */
.password-field,
.password-wrap,
.password-group,
.input-password,
.input-with-icon {
  position: relative;
  width: 100%;
}

/* Password input */
.password-field input,
.password-wrap input,
.password-group input,
.input-password input,
.input-with-icon input,
input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  padding-left: 52px !important;
  padding-right: 58px !important;
}

/* Left lock icon */
.password-field .left-icon,
.password-wrap .left-icon,
.password-group .left-icon,
.input-password .left-icon,
.input-with-icon .left-icon,
.password-field .fa-lock,
.password-wrap .fa-lock,
.password-group .fa-lock,
.input-password .fa-lock,
.input-with-icon .fa-lock {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
}

/* Right eye button */
.password-toggle,
.toggle-password,
[data-toggle-password],
.show-password-btn {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 28px !important;
  height: 28px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  cursor: pointer;
  z-index: 3;
}

/* Eye icon itself */
.password-toggle i,
.toggle-password i,
[data-toggle-password] i,
.show-password-btn i {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 16px !important;
  pointer-events: none;
}

/* Prevent duplicate pseudo icon rendering */
.password-toggle::before,
.password-toggle::after,
.toggle-password::before,
.toggle-password::after,
[data-toggle-password]::before,
[data-toggle-password]::after,
.show-password-btn::before,
.show-password-btn::after {
  content: none !important;
  display: none !important;
}

/* ============================================================
   HIDE BROWSER DEFAULT PASSWORD EYE
============================================================ */

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Chrome / Edge autofill controls */
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-contacts-auto-fill-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 0 !important;
}

/* Keep only custom eye */
.password-toggle,
.toggle-password,
.show-password-btn {
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
}

/* ============================================================
   LOGIN PAGE BRAND LOGO
============================================================ */

.login-brand .brand-logo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.login-brand-logo-image {
  width: 66px;
  height: 66px;

  display: block;
  flex-shrink: 0;

  object-fit: contain;
  object-position: center;
}

.brand-logo-content {
  min-width: 0;
}

.brand-logo-content h1 {
  margin: 0;
}

.brand-logo-content .brand-tag {
  margin: 3px 0 0;
}


/* Old generated icon hide */

.login-brand .logo-mark {
  display: none !important;
}


/* ============================================================
   MOBILE LOGO
============================================================ */

@media (max-width: 768px) {

  .login-brand-logo-image {
    width: 56px;
    height: 56px;
  }

}