/* ── AuthLock lock-screen styles ──────────────────────────────────────────
   Shared by every page that uses assets/js/auth-lock.js (pos.html,
   order.html, kitchen.html, display.html). Self-contained custom
   properties with sensible defaults so this renders reasonably on a page
   with no theme tokens of its own (order.html) — a host page that already
   has its own brand color can override --al-primary/--al-primary-light/
   --al-primary-dark/--al-danger in its own <style> block instead of
   inheriting these defaults; see pos.html for an example override. */

:root {
  --al-primary: #2563eb;
  --al-primary-light: #eff6ff;
  --al-primary-dark: #1d4ed8;
  --al-danger: #ef4444;
  --al-muted: #94a3b8;
  --al-border: #e2e8f0;
  --al-bg: #f8fafc;
  --al-text: #0f172a;
}

/* z-index picked to sit above every consuming page's own highest z-index
   (order.html/display.html both already use up to 9999 for their own
   loading overlays) rather than reusing pos.html's original 3000, which
   would've been silently covered by those. */
.al-lock-screen {
  display: flex; position: fixed; inset: 0; background: var(--al-bg); z-index: 100000;
  align-items: center; justify-content: center; padding: 20px;
  font-family: "Google Sans", "Battambang", -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Defaults to VISIBLE, not hidden — every consuming page's own script tags
   load after this markup, so by the time any JS runs and can decide
   whether a session exists, the browser has already painted the real page
   underneath. Showing this by default (JS only ever hides it once a
   session is confirmed) means that paint never has a chance to flash
   through; the alternative — default hidden, JS shows it — is the bug
   this replaced on pos.html originally. */
.al-lock-screen.al-hide { display: none; }

/* SweetAlert2's own container defaults to a much lower z-index (~1060)
   than the lock screen — without this, any dialog/toast fired while the
   lock screen is up (e.g. a "wrong password" error) renders behind it and
   is completely invisible, even though it's actually firing. */
.swal2-container { z-index: 200000 !important; }

.al-lock-card {
  width: 100%; max-width: 340px; background: #fff; border: 1px solid var(--al-border);
  border-radius: 18px; padding: 32px 26px 26px;
  text-align: center; box-shadow: 0 20px 40px -12px rgba(15,23,42,.12);
}
.al-lock-avatar {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px;
  background: var(--al-primary-light); color: var(--al-primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 700; letter-spacing: .3px;
  box-shadow: 0 0 0 5px var(--al-primary-light);
}
/* Personalized state (quick sign-in) — same look as the default avatar
   (light bg, dark text, ring), just initials instead of the icon, so the
   two states read as one consistent style. */
.al-lock-avatar.al-lock-avatar-person { font-size: 1.2rem; }

.al-lock-card h2 { margin: 0 0 6px; font-size: 1.25rem; letter-spacing: -.2px; color: var(--al-text); }
.al-lock-subtitle { color: var(--al-muted); font-size: .86rem; margin: 0; line-height: 1.5; }
.al-lock-subtitle strong { color: var(--al-text); font-weight: 700; }
.al-lock-card form { text-align: left; margin-top: 20px; }

.al-label { display: block; font-size: .8rem; color: var(--al-muted); margin: 14px 0 6px; font-weight: 600; }
.al-label:first-child { margin-top: 0; }
.al-input {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--al-border);
  font-family: inherit; font-size: .9rem; background: #fff; color: var(--al-text);
}
.al-input:focus { outline: none; border-color: var(--al-primary); }

.al-password-wrap { position: relative; }
.al-password-wrap .al-input { padding-right: 40px; }
.al-password-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--al-muted); cursor: pointer;
  padding: 6px 8px; font-size: .9rem;
}

.al-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  margin-top: 18px; padding: 10px 16px; border-radius: 10px; border: 1px solid transparent;
  font-family: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  background: var(--al-primary); border-color: var(--al-primary); color: #fff;
  transition: filter .1s;
}
.al-btn:hover { filter: brightness(0.95); }
.al-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Quick form's bottom row — a primary text link (switch account) paired
   with a de-emphasized icon-only button for the destructive one (remove),
   rather than two full-width stacked lines competing for attention. The
   full form's own "back to quick sign in" link has no such pairing, so it
   stays centered on its own. */
.al-lock-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.al-switch-link {
  background: none; border: none; color: var(--al-primary-dark);
  font-size: .8rem; font-weight: 600; cursor: pointer; padding: 4px 2px;
}
/* Not every consuming page loads Bootstrap/AdminLTE (display.html doesn't),
   so icon spacing is baked in here rather than relying on a .mr-1/.mr-2
   utility class existing. .al-btn doesn't need the same treatment — its
   flexbox gap already spaces the icon from the label. */
.al-switch-link i { margin-right: 6px; }
.al-switch-link:hover { text-decoration: underline; }
.al-lock-actions .al-switch-link { padding: 4px 0; }
/* :not([hidden]) — an unscoped display:block here would defeat
   showFullForm()'s hidden-attribute toggle. */
.al-back-link:not([hidden]) { display: block; width: 100%; text-align: center; margin-top: 14px; }
.al-remove-btn {
  background: none; border: none; color: var(--al-muted); cursor: pointer;
  padding: 5px 7px; border-radius: 7px; font-size: .82rem; line-height: 1;
}
.al-remove-btn:hover { color: var(--al-danger); background: #fef2f2; }