/* ================================================
   EZALIA POS - Login Page Styles
   Extracted from index.html for independent caching
   ================================================ */

/* ================================================
   CUSTOM FONTS
   ================================================ */
@font-face {
  font-family: 'Masantina';
  src: url('/assets/fonts/Masantina-DemiBold.woff2') format('woff2'),
       url('/assets/fonts/Masantina-DemiBold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}

.font-masantina {
  font-family: 'Masantina', serif;
  font-weight: 600;
}

/* ================================================
   BASE RESET & UTILITIES
   ================================================ */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  box-sizing: border-box;
}
body {
  overscroll-behavior: none;
  touch-action: manipulation;
}
.safe-area-top { padding-top: env(safe-area-inset-top); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* ================================================
   FLUID RESPONSIVE SYSTEM
   Uses clamp() for smooth scaling with hard limits
   Works on ALL devices from iPhone SE to 4K monitors
   ================================================ */
:root {
  /* Keypad button: min 56px (small phones), max 80px (large screens) */
  --btn-size: clamp(56px, 10vmin, 80px);
  --btn-gap: clamp(8px, 1.5vmin, 14px);
  --btn-font: clamp(20px, 4vmin, 28px);

  /* Logo: min 48px, max 72px */
  --logo-size: clamp(48px, 9vmin, 72px);
  --logo-font: clamp(20px, 4vmin, 28px);

  /* Typography */
  --title-size: clamp(16px, 2.5vmin, 22px);
  --text-size: clamp(13px, 2vmin, 16px);
  --small-size: clamp(11px, 1.6vmin, 14px);

  /* Spacing */
  --section-gap: clamp(16px, 3vmin, 32px);

  /* PIN dots */
  --dot-size: clamp(10px, 1.8vmin, 16px);
  --dot-gap: clamp(10px, 2vmin, 18px);
}

/* ================================================
   MAIN LAYOUT
   Centered card that fits any screen
   ================================================ */
.login-container {
  min-height: 100svh;
  min-height: 100vh; /* Fallback */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vmin, 40px);
  overflow-y: auto;
}

.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-gap);
  width: 100%;
  max-width: 400px;
  padding: clamp(16px, 3vmin, 32px);
}

/* On larger screens (tablets+), add card styling */
@media (min-width: 600px) and (min-height: 600px) {
  .login-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: clamp(20px, 4vmin, 32px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.9);
    max-width: min(90vw, 420px);
  }
}

/* Landscape smart displays (Nest Hub 600px, Nest Hub Max 800px)
   Keep vertical layout but reduce spacing */
@media (orientation: landscape) and (max-height: 650px) {
  :root {
    --btn-size: clamp(44px, 7.5vh, 56px);
    --btn-gap: clamp(5px, 0.8vh, 8px);
    --btn-font: clamp(18px, 3vh, 22px);
    --logo-size: clamp(36px, 6vh, 48px);
    --logo-font: clamp(16px, 2.5vh, 20px);
    --title-size: clamp(13px, 2vh, 16px);
    --text-size: clamp(11px, 1.6vh, 13px);
    --small-size: clamp(9px, 1.4vh, 11px);
    --section-gap: clamp(8px, 1.5vh, 14px);
    --dot-size: clamp(8px, 1.4vh, 12px);
    --dot-gap: clamp(6px, 1vh, 10px);
  }

  .login-container {
    padding: clamp(8px, 1.5vh, 16px);
  }

  .login-card {
    padding: clamp(10px, 2vh, 20px) clamp(16px, 3vw, 28px);
    gap: clamp(6px, 1.2vh, 12px);
  }

  .login-header {
    margin-bottom: 0;
  }

  .login-title {
    margin-top: clamp(2px, 0.5vh, 6px);
  }

  .login-subtitle {
    margin-top: clamp(2px, 0.3vh, 4px);
  }

  .security-badge {
    padding: clamp(2px, 0.4vh, 4px) clamp(8px, 1.2vw, 12px);
  }

  #status-message {
    height: clamp(16px, 2.5vh, 20px);
  }
}

/* Nest Hub Max (800px height) - moderate adjustments */
@media (orientation: landscape) and (min-height: 700px) and (max-height: 850px) {
  :root {
    --btn-size: clamp(50px, 6vh, 64px);
    --btn-gap: clamp(6px, 1vh, 10px);
    --section-gap: clamp(12px, 1.8vh, 20px);
  }
}

/* ================================================
   LOGO
   ================================================ */
.login-logo {
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: clamp(12px, 2vmin, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--logo-font);
  font-weight: 700;
}

.login-title {
  font-size: var(--title-size);
  font-weight: 600;
  color: #1f2937;
  margin-top: clamp(8px, 1.5vmin, 12px);
}

.login-subtitle {
  font-size: var(--text-size);
  color: #6b7280;
  margin-top: clamp(4px, 0.8vmin, 8px);
}

/* ================================================
   SECURITY BADGE
   ================================================ */
.security-badge {
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.8vmin, 6px);
  padding: clamp(4px, 0.8vmin, 6px) clamp(10px, 1.5vmin, 14px);
  background: rgba(48, 121, 60, 0.1);
  border-radius: 20px;
  font-size: var(--small-size);
  color: #30793c;
  font-weight: 500;
  margin-top: clamp(8px, 1.5vmin, 16px);
}

.security-badge svg {
  width: clamp(12px, 1.8vmin, 14px);
  height: clamp(12px, 1.8vmin, 14px);
}

/* ================================================
   PIN DOTS
   ================================================ */
.pin-dots {
  display: flex;
  gap: var(--dot-gap);
}

.pin-dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  border: 2px solid #d1d5db;
  background: transparent;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.pin-dot.filled {
  background: #30793c;
  border-color: #30793c;
  transform: scale(1.1);
}

.pin-dot.error {
  background: #ef4444;
  border-color: #ef4444;
}

.pin-dot.success {
  background: #10b981;
  border-color: #10b981;
}

#status-message {
  height: clamp(20px, 3vmin, 24px);
  font-size: var(--small-size);
}

/* ================================================
   KEYPAD
   ================================================ */
#keypad {
  display: grid;
  grid-template-columns: repeat(3, var(--btn-size));
  gap: var(--btn-gap);
}

.keypad-btn {
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  font-size: var(--btn-font);
  font-weight: 500;
  color: #1f2937;
  cursor: pointer;
  transition: transform 0.1s ease-out, background-color 0.1s ease-out, box-shadow 0.1s ease-out;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

/* ACTIVE STATE - The key animation! */
.keypad-btn:active,
.keypad-btn.pressing {
  transform: scale(0.92);
  background: rgba(48, 121, 60, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.keypad-btn.action {
  background: rgba(0, 0, 0, 0.05);
  box-shadow: none;
}

.keypad-btn.action:active,
.keypad-btn.action.pressing {
  background: rgba(0, 0, 0, 0.12);
  transform: scale(0.92);
}

/* Backspace icon */
.keypad-btn svg {
  width: clamp(20px, 3.5vmin, 24px);
  height: clamp(20px, 3.5vmin, 24px);
}

/* Empty spacer */
.keypad-spacer {
  width: var(--btn-size);
  height: var(--btn-size);
}

/* Locked state */
.keypad-locked {
  pointer-events: none;
}

.keypad-locked .keypad-btn {
  opacity: 0.4;
  transform: scale(0.95);
}

/* ================================================
   FOOTER
   ================================================ */
.login-footer {
  font-size: var(--small-size);
  color: #9ca3af;
}

/* ================================================
   ANIMATIONS
   ================================================ */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
  20%, 40%, 60%, 80% { transform: translateX(6px); }
}
.shake { animation: shake 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes checkDraw {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}
.check-draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: checkDraw 0.4s ease-out 0.2s forwards;
}

@keyframes scaleIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.scale-in { animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* Shuffle animations */
@keyframes shuffleOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.8) rotateY(90deg); }
}

@keyframes shuffleIn {
  0% { opacity: 0; transform: scale(0.8) rotateY(-90deg); }
  100% { opacity: 1; transform: scale(1) rotateY(0deg); }
}

.shuffle-out {
  animation: shuffleOut 0.3s ease-in forwards;
  transform-style: preserve-3d;
}

.shuffle-in {
  animation: shuffleIn 0.3s ease-out forwards;
  transform-style: preserve-3d;
}

@keyframes slideNotification {
  0% { opacity: 0; transform: translateY(-10px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}
.shuffle-notification {
  animation: slideNotification 2s ease-out forwards;
}

/* ================================================
   OVERLAYS (Lockout & Success screens)
   ================================================ */
.overlay-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vmin, 32px);
  z-index: 50;
}

/* Ensure .hidden overrides overlay-screen's display:flex */
.overlay-screen.hidden {
  display: none;
}

.overlay-screen h2 {
  font-size: clamp(20px, 4vmin, 28px);
  font-weight: 700;
}

.overlay-screen p {
  font-size: var(--text-size);
}

.lockout-timer {
  font-size: clamp(24px, 5vmin, 36px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.success-icon {
  width: clamp(80px, 15vmin, 120px);
  height: clamp(80px, 15vmin, 120px);
}

.success-icon svg {
  width: clamp(48px, 9vmin, 72px);
  height: clamp(48px, 9vmin, 72px);
}

/* ================================================
   REDUCED MOTION
   ================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}