/* =========================================================================
 * GiggleFTP login screen — layout + per-theme animated backgrounds.
 * Loaded by pin.html after 98.css and themes.css.
 * ========================================================================= */

/* Author display rules below would otherwise beat the UA [hidden] rule. */
[hidden] { display: none !important; }

body.login-page {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #008080;
  position: relative;
}

/* Animated background layers live on ::before/::after so they never affect
 * layout and stay behind the dialog. */
body.login-page::before,
body.login-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.pin-dialog {
  width: 420px;
  position: relative;
  z-index: 1;
}
.title-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  image-rendering: auto;
}
.pin-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 28px 14px;
  gap: 12px;
}
.pin-icon {
  width: 56px;
  height: 56px;
  image-rendering: auto;
}
.pin-msg {
  margin: 0;
  text-align: center;
  font-size: 12px;
}

/* Big, readable user display */
.pin-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.pin-user-name {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pin-user-edit {
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  color: inherit;
  opacity: 0.75;
}
.pin-user-edit:hover { opacity: 1; }
.pin-name-field {
  width: 100%;
}
.pin-name-field label {
  display: block;
  font-size: 11px;
  margin-bottom: 3px;
}
.pin-name-field input {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  padding: 5px 7px;
  text-align: center;
}

/* PIN dots */
.pin-dots {
  display: flex;
  gap: 10px;
  min-height: 18px;
  align-items: center;
  justify-content: center;
}
.pin-dots .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.35;
  box-sizing: border-box;
}
.pin-dots .dot.filled {
  background: currentColor;
  opacity: 1;
}

/* Numeric keypad */
.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 8px;
  justify-content: center;
}
.pin-keypad button {
  width: 64px;
  height: 48px;
  min-width: 64px;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pin-keypad button.key-fn { font-size: 14px; }

.pin-error {
  font-size: 11px;
  margin: 0;
  min-height: 14px;
  color: #c00;
  text-align: center;
}
html[data-mode="dark"] .pin-error { color: #ff8080; }

.pin-actions {
  display: flex;
  gap: 6px;
  padding-bottom: 4px;
}
.pin-actions button { min-width: 90px; height: 28px; }

.pin-footer {
  font-size: 10px;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 8px;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.shake { animation: shake 0.35s ease; }

/* ------------------------------------------------------------------ */
/* Per-theme login backgrounds (light + dark)                          */
/* ------------------------------------------------------------------ */

/* Windows 2000 — flat classic desktop, no animation. */
html[data-theme="win2k"] body.login-page { background: #3a6ea5; }

/* Phosphor — mint paper (light) / green CRT with scanlines (dark). */
html[data-theme="phosphor"] body.login-page { background: #cfe3d4; }
html[data-theme="phosphor"][data-mode="dark"] body.login-page { background: #04140c; }
html[data-theme="phosphor"][data-mode="dark"] body.login-page::before {
  background: repeating-linear-gradient(180deg, rgba(0, 255, 136, 0.06) 0 2px, transparent 2px 4px);
}

/* Synthwave — pastel dawn (light) / neon night + setting sun (dark). */
html[data-theme="synthwave"] body.login-page {
  background: linear-gradient(180deg, #ffe3f1 0%, #ffd0e6 55%, #ffe9d6 100%);
}
html[data-theme="synthwave"][data-mode="dark"] body.login-page {
  background: linear-gradient(180deg, #0f0524 0%, #2a1052 55%, #6a1f6e 100%);
}
@keyframes synth-sun {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 12px); }
}
html[data-theme="synthwave"][data-mode="dark"] body.login-page::before {
  inset: auto;
  left: 50%;
  bottom: 14%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(180deg, transparent 0 24px, #0f0524 24px 32px),
    linear-gradient(180deg, #ffd319, #ff2975 70%, #ff71ce);
  animation: synth-sun 12s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(255, 46, 151, 0.6));
}

/* Tokyo — soft day haze (light) / deep night (dark). */
html[data-theme="tokyo"] body.login-page {
  background: linear-gradient(180deg, #e3e5ec 0%, #cfd3e6 100%);
}
html[data-theme="tokyo"][data-mode="dark"] body.login-page {
  background: radial-gradient(120% 90% at 50% 0%, #24283b 0%, #16161e 70%);
}

/* Solarized — warm base3 (light) / deep base03 (dark). */
html[data-theme="solarized"] body.login-page { background: #e3dcc6; }
html[data-theme="solarized"][data-mode="dark"] body.login-page { background: #002b36; }

/* Gruvbox — cream (light) / warm dark (dark). */
html[data-theme="gruvbox"] body.login-page { background: #ece0bf; }
html[data-theme="gruvbox"][data-mode="dark"] body.login-page { background: #1d2021; }

@media (prefers-reduced-motion: reduce) {
  body.login-page::before,
  body.login-page::after {
    animation: none !important;
  }
}