/* ============================================================
   NIXERS PRO — account.css
   Login / Registration page styles
   Depends on: dashboard.css (must be loaded first)
   ============================================================ */

/* ── Layout ── */
body { overflow: hidden; }
@media (max-width: 768px) { body { overflow: auto; } }

.auth-wrapper {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ── Background decoration ── */
.auth-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.auth-bg-circle {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(234,179,8,0.12), transparent 70%);
}
.auth-bg-circle.c1 { width: 600px; height: 600px; top: -200px; left: -200px; }
.auth-bg-circle.c2 { width: 400px; height: 400px; bottom: -100px; right: 30%; opacity: 0.7; }
.auth-bg-circle.c3 { width: 300px; height: 300px; top: 50%; right: -100px; opacity: 0.5; }
.auth-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(234,179,8,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,179,8,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Theme FAB ── */
.theme-fab {
  position: fixed; top: 1.2rem; right: 1.2rem; z-index: 9999;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text2); font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; box-shadow: var(--card-shadow);
}
.theme-fab:hover { color: var(--accent); border-color: rgba(234,179,8,0.4); }

/* ══════════════ LEFT PANEL ══════════════ */
.auth-left {
  width: 420px; flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 3rem 2.5rem;
  display: flex; flex-direction: column; gap: 2rem;
  position: relative; z-index: 1;
  overflow-y: auto;
}

/* Brand */
.auth-brand { display: flex; flex-direction: column; gap: 0.5rem; }
.auth-logo {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #000; margin-bottom: 0.5rem;
  box-shadow: 0 8px 24px rgba(234,179,8,0.35);
}
.auth-brand h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.9rem; font-weight: 800; letter-spacing: -0.5px;
  color: var(--text);
}
.auth-brand h1 span { color: var(--accent); }
.auth-brand p { font-size: 0.85rem; color: var(--text2); }

/* Features list */
.auth-features { display: flex; flex-direction: column; gap: 0.75rem; }
.af-item {
  display: flex; align-items: center; gap: 0.65rem;
  font-size: 0.83rem; color: var(--text2);
}
.af-item i { color: var(--accent); width: 16px; text-align: center; flex-shrink: 0; }

/* Demo accounts box */
.auth-demo-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.demo-box-title {
  font-size: 0.75rem; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.4rem;
}
.demo-box-title i { color: var(--accent); }
.demo-account {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  transition: border-color 0.2s;
}
.demo-account:last-child { margin-bottom: 0; }
.demo-account:hover { border-color: rgba(234,179,8,0.4); }
.demo-badge {
  padding: 0.15rem 0.5rem; border-radius: 20px;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  flex-shrink: 0;
}
.demo-badge.admin   { background: rgba(139,92,246,0.15); color: #a78bfa; }
.demo-badge.manager { background: rgba(234,179,8,0.15);  color: var(--accent); }
.demo-badge.worker  { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.demo-email { flex: 1; color: var(--text2); font-size: 0.75rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-pass  { color: var(--text3); font-size: 0.72rem; font-family: monospace; flex-shrink: 0; }
.demo-fill-btn {
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  background: var(--accent-glow); border: 1px solid rgba(234,179,8,0.25);
  color: var(--accent); font-size: 0.72rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.demo-fill-btn:hover { background: var(--accent); color: #000; }

/* ══════════════ RIGHT PANEL ══════════════ */
.auth-right {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem 1.5rem;
  position: relative; z-index: 1;
  overflow-y: auto;
}

.auth-card {
  width: 100%; max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ── Tabs ── */
.auth-tabs {
  display: flex; position: relative;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.auth-tab {
  flex: 1; padding: 1rem; background: none; border: none;
  font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 500;
  color: var(--text2); transition: color 0.2s; position: relative; z-index: 1;
}
.auth-tab.active { color: var(--text); font-weight: 600; }
.auth-tab-indicator {
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 50%;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  transition: left 0.25s cubic-bezier(.4,0,.2,1);
}
.auth-tab-indicator.right { left: 50%; }

/* ── Forms ── */
.auth-form { display: none; padding: 2rem; }
.auth-form.active { display: block; }

.form-head { margin-bottom: 1.5rem; }
.form-head h2 {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.45rem; font-weight: 700;
  letter-spacing: -0.3px; color: var(--text);
}
.form-head p { font-size: 0.83rem; color: var(--text2); margin-top: 0.25rem; }

/* ── Alert ── */
.auth-alert {
  padding: 0.7rem 1rem; border-radius: var(--radius-sm);
  font-size: 0.83rem; margin-bottom: 1.2rem;
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); color: #f87171;
  display: flex; align-items: flex-start; gap: 0.5rem;
}
.auth-alert.success {
  background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.25); color: #34d399;
}
.auth-alert.info {
  background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.25); color: #60a5fa;
}

/* ── Form groups ── */
.form-group { margin-bottom: 1.1rem; }
.form-group label {
  display: block; font-size: 0.8rem; font-weight: 600;
  color: var(--text2); margin-bottom: 0.4rem;
}
.label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.label-row label { margin-bottom: 0; }
.forgot-link { font-size: 0.78rem; color: var(--accent); transition: opacity 0.2s; }
.forgot-link:hover { opacity: 0.75; }

.input-wrap { position: relative; }
.input-wrap input {
  width: 100%; padding: 0.65rem 1rem 0.65rem 2.6rem;
  background: var(--input-bg); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); color: var(--text); font-size: 0.88rem;
  font-family: 'DM Sans', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.input-wrap input:focus {
  border-color: rgba(234,179,8,0.6);
  box-shadow: 0 0 0 3px rgba(234,179,8,0.1);
}
.input-wrap input::placeholder { color: var(--text3); }
.input-icon {
  position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
  color: var(--text3); font-size: 0.82rem; pointer-events: none;
}
.eye-toggle {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text3); font-size: 0.82rem; padding: 0;
  transition: color 0.2s;
}
.eye-toggle:hover { color: var(--accent); }

/* 2-col grid for password fields */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 480px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* Inline row */
.form-row-inline { display: flex; align-items: center; margin-bottom: 1.2rem; }

/* Checkbox */
.checkbox-label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--text2); cursor: pointer; user-select: none;
}
.checkbox-label input[type="checkbox"] { display: none; }
.checkbox-custom {
  width: 17px; height: 17px; border-radius: 4px; flex-shrink: 0;
  border: 2px solid var(--border2); background: var(--input-bg);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.checkbox-label input:checked + .checkbox-custom {
  background: var(--accent); border-color: var(--accent);
}
.checkbox-label input:checked + .checkbox-custom::after {
  content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  font-size: 0.6rem; color: #000;
}
.checkbox-label a { color: var(--accent); }
.terms-row { margin-bottom: 1.2rem; }

/* Password strength */
.pw-strength { margin: -0.5rem 0 1rem; }
.pw-strength-bar { height: 4px; background: var(--surface3); border-radius: 4px; overflow: hidden; }
.pw-strength-fill { height: 100%; border-radius: 4px; transition: width 0.3s, background 0.3s; width: 0%; }
.pw-strength-label { font-size: 0.72rem; color: var(--text3); margin-top: 0.3rem; display: block; }

/* ── Auth button ── */
.btn-auth {
  width: 100%; padding: 0.8rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border: none; border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 600;
  color: #000; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  box-shadow: 0 4px 14px rgba(234,179,8,0.3);
}
.btn-auth:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(234,179,8,0.4); }
.btn-auth:active { transform: translateY(0); }
.btn-auth:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ── Form footer ── */
.form-footer {
  text-align: center; margin-top: 1.2rem;
  font-size: 0.82rem; color: var(--text2);
}
.form-footer a { color: var(--accent); font-weight: 500; }
.form-footer a:hover { text-decoration: underline; }

/* ── Copyright ── */
.auth-copy {
  margin-top: 1.5rem; font-size: 0.75rem; color: var(--text3); text-align: center;
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 960px) {
  body { overflow: auto; }
  .auth-wrapper { flex-direction: column; }
  .auth-left {
    width: 100%; padding: 2rem 1.5rem;
    border-right: none; border-bottom: 1px solid var(--border);
    gap: 1.5rem;
  }
  .auth-features { display: none; }
  .auth-brand { flex-direction: row; align-items: center; gap: 1rem; }
  .auth-logo { margin-bottom: 0; width: 46px; height: 46px; font-size: 1.2rem; }
  .auth-right { padding: 2rem 1rem; justify-content: flex-start; }
}

@media (max-width: 480px) {
  .auth-card { border-radius: var(--radius); }
  .auth-form { padding: 1.5rem; }
  .form-head h2 { font-size: 1.25rem; }
  .demo-pass { display: none; }
}