/* =========================================================================
   Alromansiah Web — Auth base
   Shared by every login skin. Loaded before ds/css/auth-<skin>.css.

   Two jobs, and only two:
   1. The chrome the auth views have always relied on (.err-note, .divider,
      .otp-boxes, .recovery-grid, .btn-block) — moved here verbatim from the
      inline <style> that used to live in layouts/auth.blade.php.
   2. The .a-* hook layer. Every declaration below reproduces the exact inline
      style the login form carried before the skins existed, so the 'classic'
      skin is identical by construction rather than by hand. Elements the other
      skins add are display:none here and are opted into per skin.

   Skins paint. Nothing in this file paints a skin.
   ========================================================================= */

.ic { width: 16px; height: 16px; }

/* ---------- shared auth chrome (was inline in layouts/auth.blade.php) ---------- */
.otp-boxes { display: flex; gap: 8px; direction: ltr; justify-content: center; }
.otp-boxes input {
  width: 44px; height: 52px; text-align: center; font-size: 20px; font-weight: 800;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-surface);
  color: var(--fg-1); outline: none; font-family: var(--font-mono);
}
.otp-boxes input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(205, 47, 92, .15); }

.err-note {
  color: var(--t-danger-fg); background: var(--t-danger-bg); border-radius: 10px;
  padding: 8px 12px; font-size: 11.5px; font-weight: 700; margin-bottom: 12px;
}

.divider { display: flex; align-items: center; gap: 10px; color: var(--fg-3); font-size: 10.5px; margin: 16px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.btn-block { width: 100%; justify-content: center; padding: 8px 16px; font-size: 13px; }

.recovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; direction: ltr; }
.recovery-grid code {
  background: var(--bg-subtle); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; font-size: 12px; text-align: center;
}

/* ---------- .a-* hooks — classic values, overridable by a skin ---------- */
.a-head { margin-bottom: 22px; }
.a-sub { margin-top: 4px; }
.a-alert-ok { color: var(--t-green-fg); background: var(--t-green-bg); }

.a-fld--email { margin-bottom: 12px; }
.a-fld--password { margin-bottom: 14px; }
.a-in { text-align: start; }

.a-remember {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600;
  color: var(--fg-2); margin-bottom: 16px; cursor: pointer;
}

.a-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }

/* ---------- skin-only additions: off unless a skin turns them on ---------- */
.a-ic,
.a-index,
.a-hint,
.a-act,
.a-note { display: none; }

/* The SSO button ships two Microsoft marks and shows one. Monochrome is the
   default because the classic skin's SSO button is filled rose, where a colour
   logo is unreadable. A skin with an OUTLINED SSO button swaps them:
   .a-ms-mono { display:none } .a-ms-color { display:block }  */
.a-ms-color { display: none; }

/* When a skin does turn the reveal button on it must still be a real control. */
.a-act {
  align-items: center; justify-content: center; width: 30px; height: 30px; flex: none;
  padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer;
  border-radius: 8px; opacity: .62; transition: opacity .16s var(--ease);
}
.a-act:hover, .a-act.is-on { opacity: 1; }
.a-act:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- super-admin preview bar ---------- */
.auth-previewbar {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 7px 16px; background: var(--bg-heritage); color: #FFF1E8;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 700;
  box-shadow: 0 2px 10px rgba(65, 15, 18, .28);
}
.auth-previewbar a { color: #F0A868; text-decoration: none; font-weight: 800; }
.auth-previewbar a:hover { color: #FFF1E8; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .auth-body *, .auth-body *::before, .auth-body *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}