/* ═══════════════════════════════════════════════════════════
 *  Anvár UI — auth styles
 * ═══════════════════════════════════════════════════════════
 *
 * Login overlay, embedded Clerk auth panels (sign-in, MFA,
 * forgot-password, sign-up via invitation), the language
 * toggle, and the anti-flash rules that keep the body hidden
 * until /whoami resolves.
 *
 * This is its own file because the auth surface is one of the
 * larger conceptually-isolated units of the UI — a v20.x stage
 * will likely split the corresponding JS into anvar-ui/js/auth/
 * and these styles are the natural companion. Until then, all
 * the auth visual rules live here in one place.
 *
 * Reads variables from base.css (loaded first). Layout rules
 * for everything OUTSIDE the login overlay live in layout.css.
 *
 * Extracted in v20.0 from the inline <style> block at lines
 * 1083-1443 of the monolithic persian_search_ui.html.
 */


/* ── Login overlay ─────────────────────────────────────────────
   Shown on first load if /whoami says we're not authenticated, and
   any time the server returns 401 to a request. High z-index so it
   sits on top of the main UI when shown. (As of v15.16 the boot
   splash was removed; the login overlay's star icon serves as the
   first visible Anvár branding instead.) */
#login-overlay{
  position:fixed;inset:0;z-index:9000;
  background:linear-gradient(135deg,#3a2418,#1a0e08);
  display:none;align-items:center;justify-content:center;
  padding:20px}
#login-overlay.visible{display:flex}

/* ── Anti-flash on page load (v15.19) ──────────────────────────
   Without this, navigating to localhost:5000 briefly shows the
   main app (search screen, sidebar, etc.) before the boot script
   discovers there's no session and overlays the login. The flash
   is jarring and looks like a bug.

   Solution: <body> starts with class="auth-pending". While that
   class is on, the main app is hidden AND the login overlay's
   dark backdrop is shown immediately (without the login-card,
   which appears once Clerk finishes loading and we know the user
   isn't signed in). The boot script removes auth-pending in two
   places: (a) when the embedded form is mounted (showing the
   card on top of the already-visible backdrop), or (b) when
   onClerkSignedIn() loads the main app.

   This pre-paints the dark gradient — same color the login
   overlay uses — so the page transition is invisible. */
body.auth-pending .app{visibility:hidden}
body.auth-pending #login-overlay{
  display:flex;
  /* hide the inner card until JS decides to show login (Clerk
     might immediately log the user in on session-restore) */
}
body.auth-pending #login-overlay .login-card{visibility:hidden}

/* Version label pinned to the login card's bottom-right corner.
   Dark brown to match the card's other muted text. The card has
   position:relative (set for the lang-toggle anchor) so absolute
   positioning here resolves against the card's box. The card's
   visibility:hidden during auth-pending naturally cascades to
   this child, so no extra hide rule is needed. LTR direction is
   forced because the version string is Latin (e.g. "v16.4") and
   the card is direction:rtl. */
#login-version{
  position:absolute;bottom:10px;right:14px;
  font-family:'Scheherazade New',Arial,Helvetica,sans-serif;font-size:.72rem;
  color:#8b6914;opacity:.85;
  letter-spacing:.05em;direction:ltr;
  pointer-events:none;user-select:none}
.login-card{
  background:var(--cream);border:2px solid var(--gold);
  border-radius:8px;box-shadow:0 12px 50px rgba(0,0,0,.5);
  padding:36px 32px;width:100%;max-width:380px;
  text-align:center;direction:rtl;
  font-family:'Scheherazade New',Arial,Helvetica,sans-serif;
  position:relative}  /* anchor for the absolutely-positioned lang toggle */
/* When Clerk's widget is mounted, the card grows to comfortably
   fit Clerk's default 400px-wide widget plus padding. The body
   class is set in bootClerk() before the widget renders. */
body.clerk-mode .login-card{max-width:480px;padding:24px 18px}
body.clerk-mode .login-subtitle{margin-bottom:6px}

/* ══ Language toggle (v15.15) ══
   Small EN | فا pill in the top-right corner of the login card
   (top-LEFT in RTL mode, since `direction:rtl` mirrors `right` to
   `left`). Lets users switch the login page between English and
   Persian. Choice is saved in localStorage and restored on next
   visit. Defaults to English on first visit. */
.lang-toggle{
  position:absolute;top:10px;right:10px;
  background:transparent;border:1px solid rgba(163,123,43,.4);
  border-radius:14px;padding:3px 10px;
  font-size:.7rem;font-family:inherit;
  color:#5a3010;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  transition:border-color .15s,background .15s}
.lang-toggle:hover{
  border-color:rgba(163,123,43,.85);
  background:rgba(212,160,23,.08)}
.lang-toggle .lang-opt{
  opacity:.45;transition:opacity .15s,color .15s,font-weight .15s}
.lang-toggle .lang-opt.active{
  opacity:1;color:#7a3b2e;font-weight:700}
.lang-toggle .lang-divider{
  opacity:.4;font-size:.6rem}

/* 9-pointed Bahá'í star, top-left of the login card. Mirrors the
   language toggle on the opposite corner. The star inherits its
   palette from the splash composition we replaced; same shapes,
   smaller scale. The .login-card uses direction:rtl by default so
   `left: 10px` lands the star on the visual top-left in both RTL
   and LTR modes (because we override the card's direction in
   English mode below). */
.login-star-icon{
  position:absolute;top:8px;left:12px;
  width:54px;height:54px;
  pointer-events:none;
  transform-origin:center center;
  /* No animation while auth is still pending (card is hidden via
     visibility:hidden by the body.auth-pending rule). The animations
     only run once the body class is dropped — i.e. the moment the
     login card actually appears. This way the user always sees the
     full entrance, never half of it. */}
/* Two-phase animation kicks in the moment the card becomes visible:
   1. loginStarEntrance — single 1.4s flourish: starts small + fully
      transparent, then SPINS 720° (two full rotations) while
      growing to full size. The double rotation at the start gives
      the star a "spinning into view" feel; the bounce easing at
      the tail settles it. The full rotation lands precisely on 0°
      at the end (720° = two full turns, visually identical to 0°).
   2. loginStarPulse — infinite gentle pulse, delayed 1.4s so it
      kicks in just as the entrance finishes. Eases the star from
      "fresh arrival" into "ambient heartbeat" without a jarring
      transition between the two. */
body:not(.auth-pending) .login-star-icon{
  animation:
    loginStarEntrance 1.4s cubic-bezier(.34,1.56,.64,1) both,
    loginStarPulse    6s   ease-in-out 1.4s infinite}
@keyframes loginStarEntrance{
  0%   {opacity:0;   transform:scale(.3)  rotate(0deg)}
  60%  {opacity:1;   transform:scale(1.08) rotate(720deg)}
  80%  {             transform:scale(.98) rotate(720deg)}
  100% {opacity:.85; transform:scale(1)    rotate(720deg)}}
@keyframes loginStarPulse{
  0%,100%{opacity:.85;transform:scale(1)}
  50%    {opacity:1;   transform:scale(1.05)}}

/* When the login card is in English (LTR) mode, mirror the layout:
   labels/text align left, inputs read left-to-right, links flow LTR. */
.login-card[data-lang="en"]{direction:ltr;font-family:'Scheherazade New',Arial,Helvetica,sans-serif}
.login-card[data-lang="en"] label{text-align:left}
.login-card[data-lang="en"] .login-title{
  /* Latin-script "Kathar" reads better in a serif tuned for Latin
     than in Scheherazade. Use Caladea (a Cambria-compatible serif)
     with DejaVu Serif as fallback, both bundled on most systems. */
  font-family:'Caladea','Cambria','DejaVu Serif',Georgia,serif;
  letter-spacing:.04em}
.login-card[data-lang="en"] .login-title u{
  /* Underlined "th" — slightly thinner underline, with offset so it
     doesn't kiss the descender of the letters. */
  text-decoration-thickness:2px;
  text-underline-offset:3px}
.login-card[data-lang="en"] .auth-info{direction:ltr}
.login-card[data-lang="en"] .auth-info-sub{direction:rtl}
/* In LTR mode, the language toggle stays in the top-right corner.
   Without overriding, `right:10px` already does the right thing
   because we removed the `direction:rtl` on the parent. */

/* ══ Embedded auth (v15.11) — custom form talking to Clerk SDK ══
   The form has multiple panels (signin, mfa, forgot-*) that share
   the same look. We hide all panels except the active one via the
   [hidden] attribute.

   Layout discipline:
     - Each panel is a flex column, full width inside .login-card
     - Inputs are 100% width, 14px font, generous padding
     - The submit button takes full width and uses Anvár's gold
       color as primary action */
#auth-embed{display:flex;flex-direction:column;width:100%}
.auth-panel{display:flex;flex-direction:column;width:100%}
.auth-panel[hidden]{display:none !important}

.auth-info{
  margin-bottom:14px;font-size:.85rem;line-height:1.45;
  color:#5a3010;text-align:center}
.auth-info-sub{
  display:block;margin-top:3px;font-size:.7rem;
  color:#5a3010;opacity:.55;direction:ltr;font-family:sans-serif}

.auth-links{
  margin-top:12px;text-align:center;
  font-size:.78rem;direction:rtl}
.auth-links a{
  color:#7a3b2e;text-decoration:none;
  border-bottom:1px dashed rgba(122,59,46,.4);
  transition:border-color .15s,color .15s}
.auth-links a:hover{
  color:#b8530a;border-bottom-color:rgba(122,59,46,.9)}
.auth-link-sep{margin:0 8px;color:rgba(122,59,46,.4)}

/* In English (LTR) mode, override auth-links direction so trailing
   punctuation like "?" lands on the right (sentence-end) and the
   "Back to sign in" arrows etc. flow left-to-right naturally. The
   Persian default (direction:rtl) above is correct for Persian. */
.login-card[data-lang="en"] .auth-links{direction:ltr}
/* Same fix for the sign-up backup-codes checkbox row: in English the
   checkbox sits on the LEFT of the "I have saved..." text. */
.login-card[data-lang="en"] .ce-checkbox-label{direction:ltr}
/* Warning banner reads LTR in English — keeps the ⚠ glyph at the
   start of the sentence. */
.login-card[data-lang="en"] .auth-warning{direction:ltr}

/* Three-dot loading spinner shown during async Clerk calls.
   Inserted between the form fields and the error area so it
   visually replaces (not stacks with) the submit button while
   pending — we hide the button by adding .is-busy to the panel. */
.auth-spinner{
  display:flex;justify-content:center;gap:6px;margin:14px 0 6px}
.auth-spinner[hidden]{display:none !important}
.spinner-dot{
  width:8px;height:8px;border-radius:50%;background:var(--gold);
  animation:authBounce 1.2s infinite ease-in-out}
.spinner-dot:nth-child(2){animation-delay:.2s}
.spinner-dot:nth-child(3){animation-delay:.4s}
@keyframes authBounce{
  0%,80%,100%{transform:scale(.5);opacity:.4}
  40%{transform:scale(1);opacity:1}
}

/* When a panel is busy (waiting for Clerk response), dim the
   submit button so the user doesn't double-click. The spinner
   above signals progress. */
.auth-panel.is-busy .login-submit{
  opacity:.4;pointer-events:none}

/* MFA / reset code inputs deserve special styling — large,
   monospaced, centered, generous letter-spacing for readability. */
#ce-mfa-code, #ce-reset-code, #ce-reset-mfa-code,
#ce-signup-email-code, #ce-signup-totp-code{
  text-align:center;letter-spacing:.5em;
  font-family:'SF Mono','Monaco',monospace;
  font-size:1.5rem;font-weight:600;
  padding:10px;direction:ltr}

/* ── Sign-up flow specifics (v15.12) ─────────────────────────
   QR code box, backup-code grid, secret-text reveal, the
   "I've saved these" checkbox, and the warning callout. */
.ce-qr-container{
  display:flex;justify-content:center;align-items:center;
  padding:14px;background:#fff;border:1px solid var(--gold);
  border-radius:6px;margin:8px 0}
.ce-qr-container svg{width:200px;height:200px;display:block}

.ce-secret-details{
  margin-top:6px;font-size:.72rem;direction:ltr;
  color:rgba(80,40,20,.55);text-align:center}
.ce-secret-details summary{
  cursor:pointer;font-family:'Scheherazade New',Arial,Helvetica,sans-serif;direction:rtl;
  color:#7a3b2e;border-bottom:1px dashed rgba(122,59,46,.4);
  display:inline-block;padding-bottom:1px}
.ce-secret-text{
  margin-top:8px;padding:8px;background:rgba(122,59,46,.05);
  border-radius:4px;font-family:'SF Mono','Monaco',monospace;
  font-size:.78rem;letter-spacing:.05em;word-break:break-all;
  user-select:all}

.ce-backup-codes{
  display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;
  margin:10px 0;padding:14px;background:rgba(122,59,46,.05);
  border:1px dashed var(--gold);border-radius:6px;
  font-family:'SF Mono','Monaco',monospace;
  font-size:.85rem;font-weight:600;letter-spacing:.06em;
  direction:ltr;text-align:center}
.ce-backup-codes .code{
  padding:4px;background:#fff;border-radius:3px;
  user-select:all;cursor:text}

.auth-warning{
  margin:10px 0 6px;padding:8px 10px;
  background:rgba(212,160,23,.15);border:1px solid rgba(212,160,23,.4);
  border-radius:4px;font-size:.78rem;color:#5a3010;
  text-align:center;line-height:1.45}

.ce-checkbox-label{
  display:flex;align-items:center;gap:8px;
  margin:12px 0 8px;font-size:.82rem;color:#5a3010;
  cursor:pointer;justify-content:flex-start;direction:rtl}
.ce-checkbox-label input[type=checkbox]{
  width:auto;margin:0;cursor:pointer;
  accent-color:var(--gold)}
.ce-checkbox-label span{flex:1}
.login-title{
  font-family:'Scheherazade New',Arial,Helvetica,sans-serif;font-weight:700;
  font-size:2.2rem;line-height:1;color:#7a3b2e;
  margin:0 0 6px 0;letter-spacing:.02em}
.login-subtitle{
  font-size:.84rem;color:#5a3010;opacity:.7;
  margin-bottom:22px}
/* When the subtitle is empty (e.g. English signin page where the
   title + tagline say enough), collapse the space so the tagline
   sits naturally below the title. :empty matches an element with
   no children OR text — exactly the state we get when applyAuthLang
   sets the empty signin subtitle string. */
.login-subtitle:empty{margin-bottom:0;height:0}
/* Tagline echoing the splash composition — sits between the
   subtitle and the form fields. Smaller, italic-feeling type
   in muted gold so it reads as decorative rather than
   instructional. */
.login-tagline{
  font-size:.78rem;color:#8b6914;opacity:.85;
  margin:0 0 22px;line-height:1.55;
  font-family:'Scheherazade New',Arial,Helvetica,sans-serif;
  letter-spacing:.01em}
/* When subtitle is non-empty (Persian, or English MFA/reset
   panels), the subtitle already provides margin-bottom and we
   don't want the tagline crowding it. The general 22px
   margin-bottom on subtitle handles the spacing in that case. */
.login-card[data-lang="en"] .login-tagline{
  font-family:'Caladea','Cambria','DejaVu Serif',Georgia,serif;
  font-style:italic;font-size:.74rem}
.login-card label{
  display:block;text-align:right;font-size:.78rem;color:#5a3010;
  margin:12px 0 4px 0;font-weight:700}
.login-card input{
  width:100%;padding:9px 12px;font-size:.92rem;
  font-family:'Scheherazade New',Arial,Helvetica,sans-serif;direction:ltr;text-align:left;
  background:var(--parchment);color:var(--ink);
  border:1.5px solid var(--warm);border-radius:4px;
  box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.login-card input:focus{
  outline:none;border-color:var(--rust);
  box-shadow:0 0 0 2px rgba(192,57,43,.15)}
.login-submit{
  margin-top:18px;width:100%;padding:10px 14px;
  font-family:'Scheherazade New',Arial,Helvetica,sans-serif;font-size:.95rem;font-weight:700;
  color:#efe7d7;
  background:linear-gradient(135deg,var(--rust),#a0440f);
  border:none;border-radius:4px;cursor:pointer;
  transition:filter .15s,transform .1s}
.login-submit:hover{filter:brightness(1.1)}
.login-submit:active{transform:scale(.98)}
.login-submit:disabled{filter:grayscale(.4) brightness(.85);cursor:wait}
.login-error{
  margin-top:10px;padding:8px 10px;font-size:.8rem;
  color:#c0392b;background:rgba(192,57,43,.08);
  border:1px solid rgba(192,57,43,.3);border-radius:4px;
  display:none}
.login-error.visible{display:block}

/* User badge / logout button in the sidebar header. Shown only after
   login. When the user is in "user" role, the manager-only tabs are
   hidden via the .user-only / .manager-only classes below. */
.user-badge{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  font-size:.7rem;color:rgba(239,231,215,.8);font-style:italic}
.user-badge .badge-name{font-weight:700;color:#efe7d7;font-style:normal}
.logout-btn{
  background:rgba(239,231,215,.15);border:1px solid rgba(239,231,215,.3);
  color:#efe7d7;border-radius:3px;padding:2px 8px;font-size:.68rem;
  cursor:pointer;transition:background .15s;font-family:'Scheherazade New',Arial,Helvetica,sans-serif}
.logout-btn:hover{background:rgba(239,231,215,.3)}
.manage-btn{
  background:rgba(212,175,55,.18);border:1px solid rgba(212,175,55,.45);
  color:#efe7d7;border-radius:3px;padding:2px 8px;font-size:.68rem;
  cursor:pointer;transition:background .15s;font-family:'Scheherazade New',Arial,Helvetica,sans-serif;
  margin-left:4px}
.manage-btn:hover{background:rgba(212,175,55,.32)}
/* Container into which Clerk mounts its <SignIn> widget. */
#clerk-signin-mount{margin-top:8px;min-height:380px;display:flex;
  align-items:center;justify-content:center}

/* Tabs/UI elements hidden for the "user" role. JS adds .role-user
   to <body> after login — these selectors then hide manager-only
   bits. Keeps the markup clean of role checks. */
body.role-user .manager-only{display:none !important}

/* v4.6.6 — Private-collection write affordances (create / rename /
   delete / add-books / force-reindex / per-book delete + rename +
   move). Tag the element with .private-write-affordance; the rule
   below hides it for users when the manager has flipped the global
   "users_can_write_collections" policy off. Managers always have
   .can-write-cols on <body> (set in fetchWhoami) so they're never
   affected. Users gain .can-write-cols only when the toggle is on. */
body.role-user:not(.can-write-cols) .private-write-affordance{display:none !important}
