/* ─── AUTH THEMES ──────────────────────────────────────────────────────────── */
/* Layout rules — always apply regardless of theme */

html, body { height: 100% !important; }

form, input { font-weight: 300 !important; }

#main-signin  { height: 100% !important; }
.main-box-child { height: 100% !important; }

.dark-login-panel {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 2rem 0;
}

.input-wrapper { position: relative; }

.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  width: 1rem;
  text-align: center;
  pointer-events: none;
  z-index: 10;
}
.fa-lock.input-icon { font-size: 1.2rem; }

#togglePassword {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.btn-login {
  background: #2db843 !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 0.8rem 1rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px;
  width: 100%;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  cursor: pointer;
  display: block;
  text-align: center;
}
.btn-login:hover {
  background: #25a03a !important;
  box-shadow: 0 4px 20px rgba(45, 184, 67, 0.35) !important;
  transform: translateY(-1px);
}
.btn-login:active  { transform: translateY(0); }
.btn-login:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.bg-image {
  background-image: url('https://cdn.zapbot.chat/static/images/timer-login.png');
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 100vh;
}
.bg-image::after {
  content: '';
  position: absolute;
  inset: 0;
}

#message {
  font-size: 0.875rem;
  min-height: 1.25rem;
  font-weight: 500;
}

#logo-img { height: 28px; margin-right: 8px; }

#theme-toggle {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(128,128,128,0.15);
  border: 1px solid rgba(128,128,128,0.25);
  cursor: pointer;
  font-size: 1rem;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
  z-index: 10;
}

.form-control { border-radius: 8px !important; }
.form-control-lg {
  min-height: calc(1.5em + 1rem + 2px);
  padding: 0.75rem 1rem 0.75rem 2.6rem !important;
  font-size: 1rem;
}

/* Google translate override */
.goog-te-banner-frame.skiptranslate { display: none !important; }
#goog-gt-tt { display: none !important; top: 0px !important; }
.goog-tooltip.skiptranslate { display: none !important; }
.activity-root { display: hide !important; }
.status-message { display: hide !important; }
.started-activity-container { display: hide !important; }
body { top: 0px !important; }

@media (max-width: 767px) {
  .dark-login-panel { min-height: auto; padding: 2rem 0 3rem; }
}

/* ─── DARK THEME ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] body        { background: #0e0b2b !important; }
html[data-theme="dark"] #main-signin { background: #0e0b2b; border-top: 5px #2db843 solid !important; }
html[data-theme="dark"] .dark-login-panel { background: #0e0b2b; }

html[data-theme="dark"] #text-logo {
  color: #eaecf3;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 1.2rem;
}
html[data-theme="dark"] .dark-login-heading { color: #eaecf3; font-weight: 400; font-size: 0.95rem; }

html[data-theme="dark"] .form-control {
  background: #1a1733 !important;
  border: 1px solid #2d2a50 !important;
  color: #eaecf3 !important;
  padding: 0.75rem 1rem 0.75rem 2.5rem !important;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
html[data-theme="dark"] .form-control::placeholder { color: #6b6996 !important; }
html[data-theme="dark"] .form-control:focus {
  background: #1e1b3a !important;
  border-color: #2db843 !important;
  box-shadow: 0 0 0 3px rgba(45, 184, 67, 0.15) !important;
  color: #eaecf3 !important;
  outline: none !important;
}

html[data-theme="dark"] .input-icon  { color: #6b6996; }
html[data-theme="dark"] #togglePassword { color: #6b6996; }
html[data-theme="dark"] #togglePassword:hover { color: #2db843; }

html[data-theme="dark"] a.text-info,
html[data-theme="dark"] a.text-info:hover { color: #2db843 !important; }

html[data-theme="dark"] .link-forgot { color: #a0aec0; font-size: 0.85rem; text-decoration: none; transition: color 0.2s; }
html[data-theme="dark"] .link-forgot:hover { color: #2db843; }

html[data-theme="dark"] .form-group label { color: #a0aec0; }

html[data-theme="dark"] .form-check-label { color: #a0aec0; font-size: 0.85rem; }
html[data-theme="dark"] .form-check-input:checked { background-color: #2db843; border-color: #2db843; }

html[data-theme="dark"] .dark-divider { border-color: #2d2a50; }

html[data-theme="dark"] .bg-image::after {
  background: linear-gradient(135deg, rgba(14, 11, 43, 0.55) 0%, rgba(45, 184, 67, 0.1) 100%);
}

html[data-theme="dark"] #mask {
  position: fixed; top: 0; width: 100%; height: 100%;
  background: rgba(14, 11, 43, 0.85);
  overflow: hidden; z-index: 99; color: #eaecf3; text-align: center;
}

/* Message contrast — dark */
html[data-theme="dark"] #message.danger {
  color: #ff6b6b !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  background: rgba(255, 107, 107, 0.1);
  border-left: 3px solid #ff6b6b;
  border-radius: 4px;
  padding: 8px 12px !important;
}
html[data-theme="dark"] #message.success {
  color: #51cf66 !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  background: rgba(81, 207, 102, 0.1);
  border-left: 3px solid #51cf66;
  border-radius: 4px;
  padding: 8px 12px !important;
}

html[data-theme="dark"] #theme-toggle { color: #a0aec0; }
html[data-theme="dark"] #theme-toggle:hover { background: #1a1733; color: #eaecf3; }

/* ─── LIGHT THEME ───────────────────────────────────────────────────────────── */
html[data-theme="light"] body        { background: #f4f6fb !important; }
html[data-theme="light"] #main-signin { background: #f4f6fb; border-top: 5px #2db843 solid !important; }
html[data-theme="light"] .dark-login-panel { background: #f4f6fb; }

html[data-theme="light"] #text-logo {
  color: #1a1a2e;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 1.2rem;
}
html[data-theme="light"] .dark-login-heading { color: #4a5568; font-weight: 400; font-size: 0.95rem; }

html[data-theme="light"] .form-control {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #1a202c !important;
  padding: 0.75rem 1rem 0.75rem 2.5rem !important;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
html[data-theme="light"] .form-control::placeholder { color: #9ca3af !important; }
html[data-theme="light"] .form-control:focus {
  background: #ffffff !important;
  border-color: #2db843 !important;
  box-shadow: 0 0 0 3px rgba(45, 184, 67, 0.12) !important;
  color: #1a202c !important;
  outline: none !important;
}

html[data-theme="light"] .input-icon  { color: #9ca3af; }
html[data-theme="light"] #togglePassword { color: #9ca3af; }
html[data-theme="light"] #togglePassword:hover { color: #2db843; }

html[data-theme="light"] a.text-info,
html[data-theme="light"] a.text-info:hover { color: #2db843 !important; }

html[data-theme="light"] .link-forgot { color: #6b7280; font-size: 0.85rem; text-decoration: none; transition: color 0.2s; }
html[data-theme="light"] .link-forgot:hover { color: #2db843; }

html[data-theme="light"] .form-group label { color: #374151; }

html[data-theme="light"] .form-check-label { color: #6b7280; font-size: 0.85rem; }
html[data-theme="light"] .form-check-input:checked { background-color: #2db843; border-color: #2db843; }

html[data-theme="light"] .bg-image::after {
  background: linear-gradient(135deg, rgba(244, 246, 251, 0.3) 0%, rgba(45, 184, 67, 0.08) 100%);
}

html[data-theme="light"] #mask {
  position: fixed; top: 0; width: 100%; height: 100%;
  background: rgba(244, 246, 251, 0.92);
  overflow: hidden; z-index: 99; color: #1a202c; text-align: center;
}

/* Message contrast — light */
html[data-theme="light"] #message.danger {
  color: #c53030 !important;
  font-weight: 600 !important;
  background: rgba(197, 48, 48, 0.08);
  border-left: 3px solid #c53030;
  border-radius: 4px;
  padding: 8px 12px !important;
}
html[data-theme="light"] #message.success {
  color: #276749 !important;
  font-weight: 600 !important;
  background: rgba(39, 103, 73, 0.08);
  border-left: 3px solid #276749;
  border-radius: 4px;
  padding: 8px 12px !important;
}

html[data-theme="light"] #theme-toggle { color: #6b7280; }
html[data-theme="light"] #theme-toggle:hover { background: #e5e7eb; color: #1a202c; }