/*================================================================================
    Bosla — Authentication pages
    Sits on top of theme.css and reuses its tokens, so the login reads as part of
    the system rather than a separate template.
================================================================================*/

.auth-page {
  margin: 0;
  min-height: 100vh;
  background: var(--bs-bg) !important;
}
/* theme.css pads the app shell with `html body .content .content-wrapper`
   (specificity 0,2,2) — a plain `.auth-page .content-wrapper` loses to it even
   with !important, so these must match that shape or higher. */
html body.auth-page .app-content.content { padding: 0 !important; margin: 0 !important; }
html body.auth-page .content .content-wrapper { padding: 0 !important; margin: 0 !important; }
html body.auth-page .content .content-body { padding: 0 !important; margin: 0 !important; }
html body.auth-page .content-header { display: none !important; }

.auth-wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 100vh;
}

/*--------------------------------------------------------------
  Brand panel
--------------------------------------------------------------*/
.auth-aside {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 3rem;
  color: #fff;
  background:
    radial-gradient(120% 120% at 100% 0%, #4338ca 0%, transparent 55%),
    linear-gradient(160deg, #1e1b4b 0%, #0f172a 60%, #131c33 100%);
}
.auth-aside-inner { position: relative; z-index: 2; max-width: 480px; }

.auth-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 3rem; }
.auth-brand img {
  width: 44px; height: 44px;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
}
.auth-brand span { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }

.auth-headline {
  font-size: 2.35rem;
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .9rem;
  letter-spacing: -.02em;
}
.auth-sub {
  font-size: 1rem;
  line-height: 1.9;
  color: #b9c2d6;
  margin: 0 0 2.25rem;
}

.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.auth-points li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .93rem;
  font-weight: 600;
  color: #dbe3f0;
}
.auth-points i {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1.15rem;
  color: #c7d2fe;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
}

/* soft light blooms */
.auth-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; z-index: 1; }
.auth-orb-1 { width: 340px; height: 340px; background: #6366f1; top: -90px; inset-inline-end: -80px; }
.auth-orb-2 { width: 300px; height: 300px; background: #9333ea; bottom: -110px; inset-inline-start: -60px; opacity: .35; }

/*--------------------------------------------------------------
  Form side
--------------------------------------------------------------*/
.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: var(--bs-bg);
}
.auth-card { width: 100%; max-width: 420px; }

.auth-card-head { text-align: center; margin-bottom: 2rem; }
.auth-card-logo {
  width: 56px; height: 56px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  padding: 8px;
  box-shadow: var(--bs-shadow-sm);
  margin-bottom: 1rem;
  display: none;             /* the brand panel already carries it on desktop */
}
.auth-card-head h2 { font-size: 1.6rem; font-weight: 700; margin: 0 0 .35rem; color: var(--bs-text); }
.auth-card-head p  { font-size: .9rem; color: var(--bs-muted); margin: 0; }

.auth-form { display: grid; gap: 1.1rem; }
.auth-field { display: grid; gap: .45rem; }
.auth-field > label { font-size: .82rem; font-weight: 600; color: #46536b; margin: 0; }

/* Email and password are Latin content, so the whole control reads LTR: icon on
   the left next to where typing starts, reveal button on the right. The labels
   above stay in the page direction. */
.auth-input { position: relative; display: flex; align-items: center; direction: ltr; }
.auth-input > i {
  position: absolute;
  inset-inline-start: .9rem;
  font-size: 1.15rem;
  color: #9aa4b8;
  pointer-events: none;
  transition: color .18s ease;
}
.auth-input input {
  width: 100%;
  height: 50px;
  border: 1px solid var(--bs-border);
  border-radius: 12px;
  background: #fff;
  padding-inline-start: 2.9rem;
  padding-inline-end: 2.9rem;
  font-size: .95rem;
  color: var(--bs-text);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.auth-input input::placeholder { color: #b3bccb; }
.auth-input input:focus {
  border-color: var(--bs-primary-400);
  box-shadow: 0 0 0 4px var(--bs-primary-soft);
}
.auth-input input:focus ~ i,
.auth-input:focus-within > i { color: var(--bs-primary); }

.auth-eye {
  position: absolute;
  inset-inline-end: .55rem;
  border: 0;
  background: transparent;
  color: #9aa4b8;
  padding: .35rem .45rem;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
  transition: background-color .16s ease, color .16s ease;
}
.auth-eye:hover { background: #f1f3f8; color: var(--bs-text); }

.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.auth-check { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: .86rem; color: #46536b; cursor: pointer; }
.auth-check input { width: 17px; height: 17px; accent-color: var(--bs-primary); cursor: pointer; }

.auth-submit {
  height: 50px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bs-primary-400), var(--bs-primary));
  color: #fff;
  font-size: .98rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(79, 70, 229, .28);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(79, 70, 229, .36); }
.auth-submit:active { transform: translateY(0); }
.auth-submit:disabled, .auth-submit.is-busy { opacity: .7; cursor: default; transform: none; }
.auth-submit.is-busy i { animation: auth-spin .8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-foot { margin: 2rem 0 0; text-align: center; font-size: .76rem; color: #9aa4b8; }

/*--------------------------------------------------------------
  Responsive — the brand panel folds away, the card takes over
--------------------------------------------------------------*/
@media (max-width: 991.98px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-card-logo { display: inline-block; }
  .auth-main { min-height: 100vh; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-submit, .auth-submit:hover { transition: none; transform: none; }
}

/* "forgot password" link, used by the central login */
.auth-link{font-size:.84rem;font-weight:600;color:var(--bs-primary)}
.auth-link:hover{color:var(--bs-primary-600);text-decoration:underline}