/**
 * Mali Mali POS - Login Page
 */

:root {
  --lp-primary:      #4361ee;
  --lp-primary-dark: #3a0ca3;
  --lp-accent:       #4cc9f0;
  --lp-dark:         #0f172a;
  --lp-surface:      #1e293b;
  --lp-text:         #f1f5f9;
  --lp-muted:        #94a3b8;
  --lp-border:       rgba(255,255,255,.08);
  --lp-radius:       12px;
  --lp-ease:         all .3s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--lp-dark);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ─── Full-page wrapper ─── */
.login-page {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
}

/* ══════════════════════════════════════════
   LEFT BRAND PANEL (desktop only)
══════════════════════════════════════════ */
.login-brand-panel {
  position: relative;
  flex: 0 0 42%;
  max-width: 42%;
  background: linear-gradient(155deg, #0f172a 0%, #1e293b 45%, #0f3460 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 48px;
  overflow: hidden;
}

.brand-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(67,97,238,.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(76,201,240,.12) 0%, transparent 50%);
  animation: glow 8s ease-in-out infinite alternate;
}
@keyframes glow { 0% { opacity:.6; } 100% { opacity:1; } }

.brand-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 360px;
}

.brand-logo-wrap {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  overflow: hidden;
  margin: 0 auto 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35), 0 0 0 3px rgba(67,97,238,.35);
  flex-shrink: 0;
}
.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-title {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -.4px;
  white-space: nowrap;
}
.brand-title span {
  background: linear-gradient(90deg, var(--lp-primary), var(--lp-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-subtitle {
  color: var(--lp-muted);
  font-size: .88rem;
  line-height: 1.55;
  margin-bottom: 36px;
}

.brand-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.brand-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,.8);
  font-size: .84rem;
  font-weight: 500;
}
.brand-feature i {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(67,97,238,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: var(--lp-accent);
  flex-shrink: 0;
}

.brand-footer-text {
  position: absolute;
  bottom: 20px;
  left: 0; right: 0;
  text-align: center;
  font-size: .72rem;
  color: #475569;
  z-index: 2;
}

/* ══════════════════════════════════════════
   RIGHT FORM PANEL
══════════════════════════════════════════ */
.login-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lp-dark);
  padding: 40px 24px;
}

.login-form-inner {
  width: 100%;
  max-width: 420px;
}

/* Top logo shown only on mobile (when brand panel is hidden) */
.mobile-brand {
  display: none;
  text-align: center;
  margin-bottom: 28px;
}
.mobile-logo-wrap {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  overflow: hidden;
  margin: 0 auto 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.4), 0 0 0 2px rgba(67,97,238,.3);
}
.mobile-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mobile-brand h2 {
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
}
.mobile-brand h2 span {
  background: linear-gradient(90deg, var(--lp-primary), var(--lp-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Form header */
.form-header { margin-bottom: 28px; }
.form-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.form-header p { color: var(--lp-muted); font-size: .88rem; }

/* ─── Role selector ─── */
.role-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 26px;
}
.role-option { cursor: pointer; display: block; }
.role-option input[type="radio"] {
  display: none;
  appearance: none;
  -webkit-appearance: none;
}

.role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--lp-surface);
  border: 2px solid var(--lp-border);
  border-radius: var(--lp-radius);
  transition: var(--lp-ease);
  text-align: center;
}
.role-card i {
  font-size: 1.15rem;
  color: var(--lp-muted);
  transition: var(--lp-ease);
}
.role-card span {
  font-size: .73rem;
  font-weight: 600;
  color: var(--lp-muted);
  transition: var(--lp-ease);
}
.role-card:hover {
  border-color: rgba(67,97,238,.4);
  background: rgba(67,97,238,.07);
}
.role-option input:checked + .role-card {
  border-color: var(--lp-primary);
  background: rgba(67,97,238,.12);
  box-shadow: 0 0 0 1px var(--lp-primary), 0 4px 14px rgba(67,97,238,.22);
}
.role-option input:checked + .role-card i  { color: var(--lp-accent); }
.role-option input:checked + .role-card span { color: #fff; }

/* ─── Inputs ─── */
.input-group-custom { margin-bottom: 18px; }
.input-group-custom label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--lp-muted);
  margin-bottom: 6px;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-wrap > i:first-child {
  position: absolute;
  left: 14px;
  color: #475569;
  font-size: .88rem;
  z-index: 2;
  pointer-events: none;
  transition: var(--lp-ease);
}
.input-wrap input {
  width: 100% !important;
  padding: 13px 14px 13px 42px !important;
  background: var(--lp-surface) !important;
  border: 1.5px solid var(--lp-border) !important;
  border-radius: var(--lp-radius) !important;
  color: #fff !important;
  font-size: .9rem;
  font-family: inherit;
  outline: none;
  transition: var(--lp-ease);
}
.input-wrap input::placeholder { color: #475569; }
.input-wrap input:focus {
  border-color: var(--lp-primary) !important;
  box-shadow: 0 0 0 3px rgba(67,97,238,.15) !important;
  background: rgba(30,41,59,.9) !important;
}

/* Password toggle */
.toggle-pw {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  color: #475569;
  cursor: pointer;
  font-size: .88rem;
  padding: 4px;
  z-index: 2;
  transition: var(--lp-ease);
}
.toggle-pw:hover { color: var(--lp-accent); }

/* Forgot link */
.form-extras {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 22px;
}
.forgot-link {
  color: var(--lp-accent);
  font-size: .81rem;
  font-weight: 500;
  text-decoration: none;
  transition: var(--lp-ease);
}
.forgot-link:hover { color: var(--lp-primary); text-decoration: underline; }

/* ─── Sign In button ─── */
.btn-login {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--lp-primary), var(--lp-primary-dark));
  color: #fff;
  border: none;
  border-radius: var(--lp-radius);
  font-size: .95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: var(--lp-ease);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(67,97,238,.32);
}
.btn-login::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(67,97,238,.42); }
.btn-login:hover::after { transform: translateX(100%); }
.btn-login:active { transform: translateY(0); }
.btn-login:disabled { opacity: .6; cursor: not-allowed; transform: none !important; }
.btn-login .loading {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Secure note */
.secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  padding: 10px;
  background: rgba(67,97,238,.06);
  border-radius: 8px;
  color: var(--lp-muted);
  font-size: .74rem;
}
.secure-note i { color: var(--lp-accent); font-size: .78rem; }

/* Footer */
.login-footer {
  text-align: center;
  margin-top: 20px;
  color: #334155;
  font-size: .73rem;
}

/* ─── Alerts ─── */
.alert-message {
  position: fixed;
  top: 20px; right: 20px;
  padding: 14px 22px;
  color: #fff;
  border-radius: var(--lp-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  z-index: 9999;
  font-weight: 500;
  font-size: .88rem;
  animation: alertIn .35s ease-out;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 380px;
  backdrop-filter: blur(10px);
}
.alert-message.success { background: rgba(34,197,94,.9); }
.alert-message.warning { background: rgba(245,158,11,.9); }
.alert-message.error   { background: rgba(239,68,68,.9); }
.alert-message.info    { background: rgba(67,97,238,.9); }
@keyframes alertIn {
  from { opacity:0; transform: translateX(40px); }
  to   { opacity:1; transform: translateX(0); }
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

/* Tablet ≤ 1024px: slightly narrower brand panel */
@media (max-width: 1024px) {
  .login-brand-panel { flex: 0 0 38%; max-width: 38%; padding: 48px 36px; }
  .brand-title { font-size: 1.75rem; }
  .brand-logo-wrap { width: 72px; height: 72px; }
}

/* Tablet ≤ 860px: hide brand panel, show mobile brand on form panel */
@media (max-width: 860px) {
  .login-brand-panel { display: none !important; }
  .mobile-brand      { display: block; }

  .login-form-panel {
    background: linear-gradient(160deg, #0f172a 0%, #1a1f35 50%, #0f172a 100%);
    padding: 40px 24px;
  }

  .login-form-inner {
    max-width: 440px;
  }
}

/* Small mobile ≤ 480px */
@media (max-width: 480px) {
  .login-form-panel { padding: 28px 18px; }
  .login-form-inner { max-width: 100%; }
  .form-header h2   { font-size: 1.25rem; }
  .role-selector    { gap: 8px; }
  .role-card        { padding: 11px 6px; }
  .role-card i      { font-size: .95rem; }
  .role-card span   { font-size: .68rem; }
  .input-wrap input { padding: 11px 12px 11px 38px !important; font-size: .85rem; }
  .btn-login        { padding: 13px; font-size: .9rem; }
  .mobile-logo-wrap { width: 60px; height: 60px; }
  .mobile-brand h2  { font-size: 1.25rem; }
}