/* ================================================================
   AUTH — index.html sign-in / sign-up page
   Cinematic dark · gold CTA · IBM Plex Sans Arabic
   ================================================================ */

/* ── Centered full-page layout ───────────────────────────────────── */
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-image: url('../images/Objects-dashboard.png'), linear-gradient(rgb(35, 10, 76) 0.4%, rgb(27, 6, 42) 50%, rgb(5, 2, 7) 100%);
  background-blend-mode: soft-light, normal;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* ── Auth Card ───────────────────────────────────────────────────── */
.auth-card {
  width: 100%;
  max-width: 400px;
  background: rgba(13, 15, 23, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border2);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.60);
}

/* ── Logo / Brand ────────────────────────────────────────────────── */
.logo         { text-align: center; margin-bottom: 32px; }
.logo-icon    {
  display:      flex;
  justify-content: center;
  margin-bottom: 14px;
}
.logo-icon-inner {
  width:         48px;
  height:        48px;
  border-radius: var(--r-md);
  background:    var(--grad-gold);
  display:       grid;
  place-items:   center;
  color:         var(--fg-on-gold, rgb(10,13,31));
  box-shadow:    var(--glow-gold-md);
}
.logo h1      { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.logo h1 .accent { color: var(--gold-500); }
.logo p       { font-size: 14px; color: var(--text3); }

/* ── Form Elements ───────────────────────────────────────────────── */
.form-group  { margin-bottom: 16px; }
label {
  display:     block;
  font-size:   13px;
  font-weight: 600;
  color:       var(--text2);
  margin-bottom: 7px;
}
input {
  width:      100%;
  height:     44px;
  background: var(--panel);
  border:     1px solid var(--border);
  border-radius: var(--r-md);
  padding:    0 16px;
  color:      var(--text);
  font-family: var(--font);
  font-size:  14px;
  transition: border-color var(--t-fast, .15s), background var(--t-fast, .15s), box-shadow var(--t-fast, .15s);
}
input:focus {
  outline:      none;
  border-color: var(--gold-700, rgb(201,155,47));
  background:   var(--surface);
  box-shadow:   0 0 0 3px rgba(245,200,75,0.10);
}
input::placeholder { color: var(--text4, rgb(122,128,148)); }

/* ── Auth Button ─────────────────────────────────────────────────── */
.btn-primary {
  width:        100%;
  background:   var(--grad-gold);
  color:        var(--fg-on-gold, rgb(10,13,31));
  border:       none;
  border-radius: var(--r-pill);
  padding:      13px;
  font-family:  var(--font);
  font-size:    14px;
  font-weight:  700;
  cursor:       pointer;
  transition:   filter .15s, transform .12s cubic-bezier(.34,1.56,.64,1);
  margin-top:   48px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  gap:          8px;
  box-shadow:   var(--glow-gold-md), var(--shadow-inset);
}
.btn-primary:hover    { filter: brightness(1.07); transform: translateY(-1px); }
.btn-primary:active   { transform: scale(0.98); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; filter: none; }

/* ── Alert ───────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--r-sm);
  padding:       12px 16px;
  font-size:     13px;
  margin-bottom: 16px;
  display:       none;
}
.alert.error   { background: var(--red-bg);   border: 1px solid rgba(255,92,122,0.30);  color: var(--red); }
.alert.success { background: var(--green-bg); border: 1px solid var(--green-br);         color: var(--green); }

/* ── Loading Spinner ─────────────────────────────────────────────── */
.spinner {
  width:         16px;
  height:        16px;
  border:        2px solid rgba(10,13,31,0.30);
  border-top-color: var(--fg-on-gold, rgb(10,13,31));
  border-radius: 50%;
  animation:     spin .6s linear infinite;
  display:       none;
}

/* ── Signup Note ─────────────────────────────────────────────────── */
.signup-note {
  margin-top:  20px;
  text-align:  center;
  font-size:   12px;
  color:       var(--text3);
  line-height: 1.6;
}

/* ── Set Password Screen ─────────────────────────────────────────── */
.set-password-badge {
  display:      inline-flex;
  align-items:  center;
  gap:          6px;
  background:   var(--green-bg);
  border:       1px solid var(--green-br);
  color:        var(--green);
  border-radius: var(--r-pill);
  padding:      5px 14px;
  font-size:    12px;
  font-weight:  600;
  margin-bottom: 20px;
}
.password-rules {
  font-size:  11px;
  color:      var(--text3);
  margin-top: 6px;
  line-height: 1.5;
}

/* ── Pending Approval Overlay ────────────────────────────────────── */
.pending-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(5, 7, 15, 0.97);
  align-items:     center;
  justify-content: center;
  padding:         24px;
}
.pending-card {
  max-width:     400px;
  width:         100%;
  background:    var(--surface);
  border:        1px solid rgba(245,200,75,0.25);
  border-radius: var(--r-xl);
  padding:       40px;
  text-align:    center;
  box-shadow:    var(--shadow-lg);
}
.pending-icon { display: flex; justify-content: center; margin-bottom: 16px; color: var(--gold-500); }
.pending-card h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.pending-card p  { font-size: 14px; color: var(--text2); line-height: 1.6; margin-bottom: 24px; }
.btn-sign-out {
  background:    var(--red-bg);
  color:         var(--red);
  border:        1px solid rgba(255,92,122,0.30);
  border-radius: var(--r-pill);
  padding:       10px 22px;
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  font-family:   var(--font);
  transition:    background .15s;
}
.btn-sign-out:hover { background: rgba(255,92,122,0.20); }

/* Image-based brand logo on auth screens */
.logo-img { width: 76px; height: 76px; border-radius: 18px; box-shadow: var(--glow-gold-md); display: block; }
.logo-wordmark { width: 190px; height: auto; display: block; margin: 0 auto 18px; filter: drop-shadow(0 0 24px rgba(246,211,102,0.25)); }