/* ══════════════════════════════════════════════
   LOGIN — kartu + label mengambang
   Dipakai admin/login.php (berdiri sendiri, tidak memuat layout.css) dan
   includes/customer_login.php.
   Prasyarat di halaman: --brand, --brand-hover, --brand-rgb, --bg, --surface,
   --border, --text, --text-muted, --text-faint, --radius-*, --text-*.
   Pasang class "aq-login" di <body>.
   ══════════════════════════════════════════════ */
/* Token khusus login (solid) — dibatasi ke body.aq-login supaya tidak bentrok dgn token admin di layout.css. */
body.aq-login {
  --aq-login-bg:           var(--sheet-bg, var(--surface));
  --aq-login-border:       var(--border);
  --aq-login-shadow:       var(--shadow-sm);
  --aq-login-radius:       16px;
  --aq-login-field-radius: 11px;
  --aq-login-field-bg:     var(--sheet-bg, var(--surface));
  --aq-login-field-bg-focus: var(--sheet-bg, var(--surface));
  --aq-login-field-border: rgba(0,0,0,0.10);
  --aq-login-label-bg:     var(--sheet-bg, var(--surface));
  --aq-login-label-color:  var(--brand-hover);
}
[data-theme="dark"] body.aq-login {
  --aq-login-field-border: rgba(255,255,255,0.14);
  --aq-login-label-color:  var(--brand);
}
:root {
  --aq-label-h: 14px;
  /* Berdiri sendiri (tidak memuat layout.css di admin/login.php) — nilai sama dgn layout.css */
  --focus-ring-color: rgba(var(--brand-rgb), 0.12);
  --focus-ring-lg:    0 0 0 4px var(--focus-ring-color);
}

/* Latar halaman login */
body.aq-login { background: var(--bg); }

/* Kartu login (spesifisitas dinaikkan supaya menang atas gaya lokal halaman) */
body.aq-login :is(.login-card, .aq-login-card) {
  background: var(--aq-login-bg);
  border: 1px solid var(--aq-login-border);
  border-radius: var(--aq-login-radius);
  box-shadow: var(--aq-login-shadow);
}
/* Tombol tema */
body.aq-login :is(.theme-toggle-login, .aq-login-theme-toggle) {
  background: var(--aq-login-bg); border-color: var(--aq-login-border);
}
/* HP: matikan blur (berat di perangkat menengah ke bawah) */
@media (max-width: 640px) {
  body.aq-login :is(.login-card, .aq-login-card, .theme-toggle-login, .aq-login-theme-toggle) {
    background: var(--aq-login-bg-strong);
  }
}
/* ── Label mengambang: <label class="aq-label"> lalu .aq-input atau .input-wrapper ── */
body.aq-login .aq-label:has(+ :is(.aq-input, .input-wrapper)) {
  position: relative; z-index: 1;
  display: block; width: fit-content; max-width: calc(100% - 26px);
  height: var(--aq-label-h); line-height: var(--aq-label-h);
  margin: 8px 0 calc(var(--aq-label-h) / -2) 13px; padding: 0 var(--space-2);
  background: var(--aq-login-label-bg); border-radius: var(--radius-sm);
  font-size: var(--text-2xs); font-weight: 700; color: var(--aq-login-label-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--dur-fast);
}
body.aq-login .aq-label:has(+ .aq-input) + .aq-input,
body.aq-login .aq-label:has(+ .input-wrapper) + .input-wrapper > .aq-input {
  border: 1.5px solid var(--aq-login-field-border); border-radius: var(--aq-login-field-radius);
  padding: var(--space-5-5) var(--space-5-5) var(--space-5); background: var(--aq-login-field-bg);
  font-size: var(--text-base); transition: var(--dur-fast);
}
body.aq-login .aq-label:has(+ .input-wrapper) + .input-wrapper > .aq-input { padding-right: 42px; }
body.aq-login .aq-label:has(+ .aq-input) + .aq-input:focus,
body.aq-login .aq-label:has(+ .input-wrapper) + .input-wrapper > .aq-input:focus {
  outline: none; border-color: var(--brand); background: var(--aq-login-field-bg-focus);
  box-shadow: var(--focus-ring-lg);
}
body.aq-login .aq-label:has(+ .aq-input:focus),
body.aq-login .aq-label:has(+ .input-wrapper > .aq-input:focus) { color: var(--brand); }

/* ── FLOAT-IN (login): label istirahat di dalam field saat kosong & tak fokus, melayang naik
   saat fokus/terisi. Kelas .aq-fl-rest diatur assets/js/float-label.js. ── */
:root {
  --aq-fl-scale: 1.286; --aq-fl-rest-y: 24px; --aq-fl-rest-x: -3.5px;
  --aq-fl-dur: .22s; --aq-fl-ease: cubic-bezier(.2, .8, .2, 1);
}
body.aq-login .aq-label:has(+ :is(.aq-input, .input-wrapper)) { transform-origin: left center; }
body.aq-login.aq-fl-ready .aq-label:has(+ :is(.aq-input, .input-wrapper)) {
  transition: transform var(--aq-fl-dur) var(--aq-fl-ease), color var(--aq-fl-dur), background-color var(--aq-fl-dur), font-weight var(--aq-fl-dur);
}
body.aq-login .aq-label.aq-fl-rest {
  transform: translate(var(--aq-fl-rest-x), var(--aq-fl-rest-y)) scale(var(--aq-fl-scale));
  max-width: calc((100% - 26px) / var(--aq-fl-scale));
  background: transparent; color: var(--text-faint); font-weight: 500;
  pointer-events: none;
}
body.aq-login .aq-label:has(+ :is(.aq-input, .input-wrapper)) + .aq-input::placeholder,
body.aq-login .aq-label:has(+ .input-wrapper) + .input-wrapper > .aq-input::placeholder { transition: opacity var(--aq-fl-dur); }
body.aq-login .aq-label.aq-fl-rest + .aq-input::placeholder,
body.aq-login .aq-label.aq-fl-rest + .input-wrapper > .aq-input::placeholder { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  body.aq-login.aq-fl-ready .aq-label { transition: none !important; }
}