/* ==========================================================
   YASJÖNS FISKEVÅRDSFÖRENING – Inloggningssida
   Tema: Glassmorphism · Vitt / svartvitt · Skogsgrönt accent
   ========================================================== */

:root {
  --accent:       #35524a;
  --accent-hover: #243b35;
  --accent-light: rgba(53, 82, 74, 0.08);
  --ink:          #1c1f1d;
  --ink-muted:    #6c6f67;
  --glass:        rgba(255, 255, 255, 0.68);
  --glass-md:     rgba(255, 255, 255, 0.82);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(255, 255, 255, 0.88);
  --shadow:       0 8px 40px rgba(16, 20, 18, 0.10);
  --shadow-md:    0 24px 60px rgba(16, 20, 18, 0.14);
  --radius:       22px;
  --font:         "Nunito", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  text-transform: uppercase;
}

/* Subtil ljusgrön-vit gradient – glasset syns mot denna */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(145deg, #edf3ef 0%, #f6f9f7 50%, #e6eeea 100%);
}

input[type="password"],
.password input { text-transform: none; }

/* ── Layout ──────────────────────────────────────────── */
.page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(320px, 1fr);
  gap: 40px;
  align-items: stretch;
  justify-content: center;
  padding: 48px clamp(24px, 6vw, 80px);
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Auth – Frostat glas, centrerat i kolumnen ───────── */
.auth {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
  text-align: center;
  align-self: center;
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 40px 36px;
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Logo svart – visar sin ursprungliga färg (mörk) */
.logo img {
  width: 160px;
  height: auto;
  display: block;
  filter: brightness(0);
  opacity: 0.88;
}

/* ── Login form ──────────────────────────────────────── */
.login {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink-muted);
  display: grid;
  gap: 7px;
}

.field input {
  width: 100%;
  border-radius: 12px;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  padding: 12px 14px;
  font-size: 14px;
  text-align: left;
  font-family: var(--font);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  -webkit-appearance: none;
  text-transform: none;
}

.field input::placeholder {
  color: var(--ink-muted);
  text-transform: none;
}

.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(53, 82, 74, 0.14);
  background: #ffffff;
}

.field input:focus::placeholder { color: transparent; }

.password { position: relative; }
.password input { padding-right: 64px; }

.toggle {
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px;
  transition: color 150ms ease;
}

.toggle:hover { color: var(--ink); }

button { font-family: var(--font); }

/* ── Knappar ─────────────────────────────────────────── */
.primary {
  border: none;
  border-radius: 12px;
  padding: 13px 18px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.82rem;
  background: var(--accent);
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.primary:hover,
.primary:focus-visible {
  transform: translateY(-2px) scale(1.02);
  background: var(--accent-hover);
  box-shadow: 0 10px 24px rgba(53, 82, 74, 0.28);
}

.primary:active { transform: translateY(0) scale(1); }

.ghost {
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  border-radius: 12px;
  padding: 11px 18px;
  background: var(--glass-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

.ghost:hover {
  transform: translateY(-2px) scale(1.02);
  background: var(--glass-strong);
  box-shadow: 0 8px 20px rgba(16, 20, 18, 0.10);
}

/* Knapptillstånd */
.primary.is-error {
  background: #b93a3a;
  color: #ffffff;
  animation: shake 0.35s ease-in-out;
}

.primary.is-loading {
  opacity: 0.7;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

/* ── Admin-popup ─────────────────────────────────────── */
.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 20, 18, 0.40);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn 220ms ease;
  padding: 20px;
}

.admin-modal__card {
  background: var(--glass-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 40px 36px;
  box-shadow: 0 32px 80px rgba(16, 20, 18, 0.20);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(380px, 100%);
  text-align: center;
  animation: slideUp 220ms ease;
}

.admin-modal__logo {
  width: 80px;
  height: auto;
  filter: brightness(0);
  opacity: 0.85;
  margin-bottom: 4px;
}

.admin-modal__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}

.admin-modal__sub {
  margin: -8px 0 0;
  font-size: 0.82rem;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.6;
}

.admin-modal__btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.admin-modal__btns .primary,
.admin-modal__btns .ghost { width: 100%; }

/* ── Showcase (3D-fiskvisaren) ───────────────────────── */
.showcase {
  background: linear-gradient(145deg, #3a4b47, #2a3835);
  border-radius: 26px;
  color: #f5f4ee;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 420px;
}

.showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.12), transparent 40%),
    radial-gradient(circle at 80% 40%, rgba(255, 255, 255, 0.06), transparent 50%);
  pointer-events: none;
}

.eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  padding: 28px 28px 0;
  position: relative;
  z-index: 1;
}

.scene {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  background: radial-gradient(circle at 30% 40%, #465954, #2c3b37);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.model-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: auto;
}

.water-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.18), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 55%);
  filter: blur(4px);
  opacity: 0.6;
  mix-blend-mode: screen;
  z-index: 3;
  pointer-events: none;
}

.particles {
  position: absolute;
  inset: 0;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  filter: blur(0.3px);
}

.particles::before,
.particles::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  top: 8%;
  left: 12%;
  animation: floatSlow 12s ease-in-out infinite alternate, fadeDust 5s ease-in-out infinite;
}

.particles::before {
  box-shadow:
    6vw 10vh rgba(255,255,255,0.45), 14vw 22vh rgba(255,255,255,0.65),
    22vw 12vh rgba(255,255,255,0.35), 30vw 28vh rgba(255,255,255,0.5),
    10vw 42vh rgba(255,255,255,0.38), 40vw 18vh rgba(255,255,255,0.48),
    50vw 8vh rgba(255,255,255,0.62), 58vw 34vh rgba(255,255,255,0.42),
    66vw 16vh rgba(255,255,255,0.35), 74vw 38vh rgba(255,255,255,0.6),
    4vw 30vh rgba(255,255,255,0.45), 18vw 50vh rgba(255,255,255,0.52),
    28vw 46vh rgba(255,255,255,0.34), 46vw 52vh rgba(255,255,255,0.46),
    62vw 50vh rgba(255,255,255,0.44), 72vw 56vh rgba(255,255,255,0.36),
    82vw 28vh rgba(255,255,255,0.5),  90vw 44vh rgba(255,255,255,0.32),
    8vw 62vh rgba(255,255,255,0.4),  26vw 64vh rgba(255,255,255,0.52);
}

.particles::after {
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.45);
  top: 18%;
  left: 58%;
  animation: floatFast 14s ease-in-out infinite alternate, fadeDust 6s ease-in-out infinite;
  box-shadow:
    -12vw 8vh rgba(255,255,255,0.4), -26vw 26vh rgba(255,255,255,0.46),
    -6vw 34vh rgba(255,255,255,0.32),  10vw 18vh rgba(255,255,255,0.5),
     22vw 30vh rgba(255,255,255,0.42), -16vw 44vh rgba(255,255,255,0.34),
      4vw 54vh rgba(255,255,255,0.42),  16vw 50vh rgba(255,255,255,0.38),
     28vw 12vh rgba(255,255,255,0.5),   36vw 40vh rgba(255,255,255,0.34);
}

/* ── Fiskkontroller ──────────────────────────────────── */
.controls {
  display: grid;
  grid-template-columns: 40px minmax(140px, auto) 40px;
  justify-content: center;
  gap: 6px 16px;
  padding: 0 28px 28px;
  position: relative;
  margin-top: auto;
  z-index: 4;
}

.hint {
  margin: 0;
  padding-top: 2px;
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  z-index: 4;
  position: relative;
  line-height: 1.2;
  grid-column: 2;
  grid-row: 2;
}

.fish-name {
  font-family: var(--font);
  font-size: 20px;
  letter-spacing: 1px;
  color: #ffffff;
  text-transform: uppercase;
  min-width: 200px;
  text-align: center;
  grid-column: 2;
  grid-row: 1;
}

.nav {
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  align-self: center;
  transition: background 150ms ease;
}

.nav:hover { background: rgba(255, 255, 255, 0.28); }
.nav[data-dir="prev"] { grid-column: 1; grid-row: 1; }
.nav[data-dir="next"] { grid-column: 3; grid-row: 1; }

/* ── Animationer ─────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes floatSlow {
  0%   { transform: translate(-8px, -6px); }
  100% { transform: translate(10px, 8px); }
}

@keyframes floatFast {
  0%   { transform: translate(6px, -10px); }
  100% { transform: translate(-8px, 12px); }
}

@keyframes fadeDust {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 0.15; }
}

@keyframes shake {
  0%, 100%                { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
  20%, 40%, 60%, 80%      { transform: translateX(6px); }
}

/* ── Responsiv ───────────────────────────────────────── */
@media (max-width: 960px) {
  .page {
    grid-template-columns: 1fr;
    align-items: start;
    align-content: start;
    padding: 32px clamp(16px, 5vw, 48px) 48px;
    gap: 24px;
  }

  .auth {
    width: min(440px, 100%);
    margin: 0 auto;
    align-self: auto;
  }

  .showcase {
    width: min(560px, 100%);
    margin: 0 auto;
    height: 340px;
    min-height: unset;
  }
}

@media (max-width: 480px) {
  .page {
    padding: 20px 16px 40px;
    gap: 20px;
  }

  .auth { padding: 28px 20px; }

  .showcase {
    height: 280px;
    border-radius: 20px;
  }
}