/* ==========================================================================
   Raddad - authentication and error layouts.

   Same canvas, same glass, same brand - but no shell. Nothing here is
   reachable from an authenticated page, so the sidebar and top bar would only
   offer links the visitor cannot follow yet.

   These pages load dashboard.css and carry `.raddad-dashboard`, so the panel,
   the button and the type are literally the approved dashboard's. This file
   only supplies what the shell would otherwise have provided: the canvas and
   the centred layout.

   Covers login.html and the error pages built by main.py.
   ========================================================================== */

body.login-page,
body.error-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--rd-bg);
}

/* The same navy-to-charcoal field as everywhere else, tilted so the light
   sits behind the panel rather than behind the top of a scrolling page. */
.rd-auth .rd-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 50% 8%, rgba(0, 48, 128, .5), transparent 68%),
    linear-gradient(172deg, var(--rd-bg-mid) 0%, var(--rd-bg) 58%);
}

.rd-auth .login-shell,
.rd-auth .error-shell {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.rd-auth .login-card,
.rd-auth .error-card {
  width: 100%;
  max-width: 408px;
  padding: 32px;
  /* Material (fill, border, blur, inner highlight, shadow) comes from
     dashboard.css's .glass, which both panels carry. Only the radius is
     stepped up here, because these are the page rather than a card in it. */
  border-radius: var(--d-radius-xl);
}

/* ---- Brand block ---- */

.rd-auth .auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 26px;
}
.rd-auth .auth-logo {
  width: 62px;
  height: 62px;
  object-fit: contain;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5));
}
.rd-auth .brand-name {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--rd-text);
}
.rd-auth .brand-name-ar { font-weight: 700; }
.rd-auth .brand-tagline {
  margin-top: 4px;
  font-size: var(--rd-fs-sm);
  color: var(--rd-dim);
}

.rd-auth .auth-title {
  margin: 0 0 6px;
  font-size: var(--rd-fs-md);
  font-weight: 650;
  color: var(--rd-text);
}
.rd-auth .auth-sub {
  margin: 0 0 20px;
  font-size: var(--rd-fs-sm);
  line-height: 1.6;
  color: var(--rd-muted);
}

.rd-auth .login-card form { margin-top: 4px; }
.rd-auth .login-card .btn-block { margin-top: 4px; }

.rd-auth .password-field-wrap {
  position: relative;
}
.rd-auth .password-field-wrap input {
  width: 100%;
  padding-inline-end: 52px;
}
.rd-auth .password-toggle {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  transform: translateY(-50%);
  background: transparent;
  color: var(--rd-muted);
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.rd-auth .password-toggle:hover {
  color: var(--rd-text);
  background: rgba(121, 167, 235, .11);
  border-color: rgba(121, 167, 235, .18);
}
.rd-auth .password-toggle:focus-visible {
  outline: none;
  color: var(--rd-text);
  border-color: var(--rd-input-focus-border);
  box-shadow: var(--rd-input-focus-shadow);
}
.rd-auth .password-toggle span {
  display: grid;
  place-items: center;
}
.rd-auth .password-toggle span[hidden] { display: none; }
.rd-auth .password-toggle svg {
  width: 21px;
  height: 21px;
}

/* ---- Error pages ---- */

.rd-auth .error-card {
  max-width: 460px;
  text-align: center;
}
.rd-auth .error-code {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  background: var(--rd-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.rd-auth .error-card h1 {
  margin: 14px 0 8px;
  font-size: var(--rd-fs-lg);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--rd-text);
}
.rd-auth .error-card p {
  margin: 0 auto 22px;
  max-width: 44ch;
  font-size: var(--rd-fs);
  line-height: 1.7;
  color: var(--rd-muted);
  overflow-wrap: anywhere;
}

/* ---- Footer ---- */

.rd-auth .app-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 22px 18px 26px;
  font-size: var(--rd-fs-sm);
  color: var(--rd-dim);
}

@media (max-width: 480px) {
  .rd-auth .login-shell,
  .rd-auth .error-shell { padding: 24px 14px; }
  .rd-auth .login-card,
  .rd-auth .error-card { padding: 24px 20px; }
  .rd-auth .error-code { font-size: 38px; }
}