/* =========================================
   Wapikon Login Page — Brand Dual Theme
   Fixed Width + Theming
   ========================================= */

/* ---------- Brand Tokens (Light) ---------- */
:root {
  --brand-green: #34C759;
  --brand-green-600: #2FB253;
  --brand-green-900: #0E1E14;
  --brand-green-50: #EAFBF0;
  --brand-bg: #F3F7F4;
  --brand-white: #ffffff;

  --ink: #1E2521;
  --muted: #6A766F;

  --shadow-1: 0 10px 25px rgba(14, 30, 20, .12);
  --shadow-2: 0 16px 40px rgba(14, 30, 20, .18);

  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 160ms;
  --t-med: 260ms;
}

/* ---------- Brand Tokens (Dark) ---------- */
[data-bs-theme="dark"] {
  --brand-green: #34C759;
  --brand-green-600: #2FB253;
  --brand-green-900: #0E1E14;
  --brand-green-50: #102017;
  --brand-bg: #0D1310;
  --brand-white: #121A16;

  --ink: #E6EEE9;
  --muted: #95A7A0;

  --shadow-1: 0 10px 25px rgba(0,0,0,.35);
  --shadow-2: 0 18px 50px rgba(0,0,0,.5);
}

/* ---------- Keyframes ---------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-green) 40%, transparent); }
  70% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--brand-green) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-green) 0%, transparent); }
}
@keyframes borderPulse { 0%,100%{border-left-width:4px} 50%{border-left-width:8px} }

/* ---------- Motion-safe Transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  #auth, #auth .card, #auth .card *:where(:not(svg *, i)) {
    transition:
      background-color var(--t-med) var(--ease),
      color var(--t-med) var(--ease),
      border-color var(--t-med) var(--ease),
      box-shadow var(--t-fast) var(--ease),
      transform var(--t-fast) var(--ease);
  }
}

/* ---------- Page Background ---------- */
#auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand-bg) 0%, color-mix(in srgb, var(--brand-green-50) 60%, var(--brand-bg)) 100%) !important;
  position: relative;
  overflow: hidden;
  animation: fadeIn .8s var(--ease);
}

/* Subtle dotted pattern */
#auth::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--brand-green) 24%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .14;
  pointer-events: none;
}

/* ---------- Card (Fixed width) ---------- */
#auth .card {
  max-width: clamp(360px, 92vw, 560px) !important;
  width: 100% !important;
  margin-inline: 16px;
  background: var(--brand-white) !important;
  border: 1px solid color-mix(in srgb, var(--brand-green) 14%, transparent) !important;
  border-left: 4px solid var(--brand-green) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-1) !important;
  overflow: hidden;
  animation: fadeIn .8s var(--ease), borderPulse 3s ease-in-out infinite;
}
#auth .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2) !important; }

/* ---------- Card Parts ---------- */
#auth .card-header,
#auth .card-footer {
  background: color-mix(in srgb, var(--brand-green) 6%, transparent) !important;
  border: 0 !important;
}
#auth .card-header { padding: 22px 24px !important; border-bottom: 1px solid color-mix(in srgb, var(--brand-green) 12%, transparent) !important; }
#auth .card-footer { padding: 16px 24px !important; border-top: 1px solid color-mix(in srgb, var(--brand-green) 12%, transparent) !important; }
#auth .card-body { padding: 30px 26px 28px !important; }

/* Accent line */
#auth .brand-accent {
  height: 3px; width: 56px; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-green-900));
  margin: 0 0 18px;
}

/* ---------- Typography ---------- */
#auth h1, #auth h2, #auth h3, #auth .lead { color: var(--ink) !important; }
#auth .muted { color: var(--muted) !important; }

/* ---------- Form Controls ---------- */
.form-group { position: relative !important; margin-bottom: 18px !important; }
.form-group label {
  color: var(--ink) !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}
.form-group:focus-within label {
  color: var(--brand-green) !important;
  transform: translateX(4px);
}

/* Icon positioning */
.form-group i, .form-group svg, .input-icon {
  position: absolute !important; left: 12px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--muted) !important; pointer-events: none !important; z-index: 1;
}

/* Inputs */
.form-control {
  background: color-mix(in srgb, var(--brand-green-50) 22%, var(--brand-white)) !important;
  border: 1px solid color-mix(in srgb, var(--brand-green) 16%, transparent) !important;
  color: var(--ink) !important;
  padding: 12px 14px 12px 40px !important;
  border-radius: 10px !important;
}
.form-control::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.form-control:focus {
  background: var(--brand-white) !important;
  border-color: var(--brand-green) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-green) 24%, transparent) !important;
  transform: translateY(-1px);
}

/* Checkbox */
#auth .form-check-input {
  border: 2px solid color-mix(in srgb, var(--brand-green) 35%, transparent) !important;
  background: transparent !important;
}
#auth .form-check-input:checked {
  background-color: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
}

/* ---------- Links ---------- */
#auth a {
  color: var(--brand-green-900) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  position: relative; display: inline-block;
}
#auth a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--brand-green); transition: width var(--t-fast) var(--ease);
}
#auth a:hover { color: var(--brand-green) !important; transform: translateX(2px); }
#auth a:hover::after { width: 100%; }

/* ---------- Primary Button ---------- */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-600) 100%) !important;
  border: none !important;
  color: #0b1b12 !important;
  padding: 12px 22px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-green) 25%, transparent) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-green-600) 0%, var(--brand-green-900) 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-green) 32%, transparent) !important;
}
.btn-primary:active { transform: translateY(0); }
.btn-primary.loading {
  background: var(--brand-green) !important;
  pointer-events: none;
  animation: pulse 1.6s infinite;
}

/* ---------- Focus Ring ---------- */
:where(button,[role="button"],input,select,textarea,a):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-green) 50%, transparent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-green) 25%, transparent);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  #auth .card { margin: 14px !important; }
  .btn-primary { width: 100% !important; }
}

/* ---------- Dark Tweaks ---------- */
[data-bs-theme="dark"] #auth .card {
  background: #121A16 !important;
  border-color: #1A241F !important;
}
[data-bs-theme="dark"] #auth .card-header,
[data-bs-theme="dark"] #auth .card-footer {
  background: #0F1713 !important;
}
[data-bs-theme="dark"] #auth a { color: #CFE9DA !important; }
[data-bs-theme="dark"] #auth a::after { background: #7EDB9A; }
[data-bs-theme="dark"] .form-control {
  background: #121A16 !important;
  border-color: #28372F !important;
  color: var(--ink) !important;
}