/* Login modal styles */
.login-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1200; visibility: hidden; pointer-events: none; }
.login-modal.open { visibility: visible; pointer-events: auto; }
.login-modal.closing { visibility: visible; pointer-events: none; }
.login-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.0); transition: background 260ms ease; }
.login-modal.open .login-modal-overlay { background: rgba(0,0,0,0.5); }
.login-modal.closing .login-modal-overlay { background: rgba(0,0,0,0.0); }
.login-modal-content { position: relative; background: var(--panel-bg); color: var(--text); width: 92%; max-width: 420px; border-radius: 8px; padding: 20px; box-shadow: 0 8px 30px var(--shadow); z-index: 2; transform: translateY(12px) scale(0.995); opacity: 0; transition: transform 280ms cubic-bezier(.2,.9,.2,1), opacity 280ms cubic-bezier(.2,.9,.2,1); }
.login-modal.open .login-modal-content { transform: translateY(0) scale(1); opacity: 1; }
.login-modal.closing .login-modal-content { transform: translateY(8px) scale(0.995); opacity: 0; }
.login-modal-close { position: absolute; top: 8px; right: 8px; border: none; background: transparent; font-size: 18px; cursor: pointer; }
/* close hover effect */
.login-modal-close { transition: background 180ms ease, transform 160ms ease, color 160ms ease; border-radius: 6px; padding: 4px; }
.login-modal-close:hover { background: rgba(0,0,0,0.06); transform: scale(1.08); }

/* Login Hint (z.B. für Sammlung-Hinweis) */
.login-hint { 
    background: linear-gradient(135deg, rgba(139, 90, 43, 0.1), rgba(139, 90, 43, 0.05)); 
    border: 1px solid var(--accent); 
    border-radius: 8px; 
    padding: 12px 16px; 
    margin-bottom: 12px; 
    text-align: center; 
    font-size: 14px; 
    color: var(--text);
    animation: hintPulse 0.5s ease;
}

@keyframes hintPulse {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.login-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.login-tabs .tab { flex: 1; padding: 8px 10px; background: var(--bg); color: var(--text); border: none; cursor: pointer; border-radius: 6px; }
.login-tabs .tab.active { background: var(--accent); color: var(--panel-bg); }
.forms-wrapper { position: relative; margin-top: 8px; transition: height 260ms cubic-bezier(.2,.9,.2,1); overflow: hidden; }
.login-form { position: absolute; left: 0; right: 0; top: 0; padding: 6px 0 0 0; opacity: 0; transform: translateY(8px); transition: opacity 260ms cubic-bezier(.2,.9,.2,1), transform 260ms cubic-bezier(.2,.9,.2,1); pointer-events: none; }
.login-form .form-row { margin-bottom: 10px; }
.login-form label { display: block; font-size: 13px; margin-bottom: 6px; }
.login-form input, .login-form select { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; background: #fff; color: #222; }
.login-form { padding: 0 16px; }
.login-form.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Security question display for reset */
.security-question-text { background: var(--bg); padding: 10px; border-radius: 6px; font-weight: 600; color: var(--text); margin-bottom: 10px; border: 1px solid var(--accent); }

/* Reset form steps */
.reset-step { margin-top: 10px; }

/* Password toggle eye icon */
.password-input-wrapper { position: relative; display: flex; align-items: center; }
.password-input-wrapper input { padding-right: 40px; }
.password-toggle { position: absolute; right: 8px; background: transparent; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; color: #666; transition: color 150ms ease; }
.password-toggle:hover { color: #333; }
.password-toggle:active { color: var(--accent); }
.password-toggle svg { pointer-events: none; }

/* Modal title animation */
#loginModalTitle { margin: 0 0 6px 0; font-size: 20px; color: var(--text); transition: opacity 220ms ease, transform 220ms ease; }
#loginModalTitle.fading { opacity: 0; transform: translateY(-6px); }
.form-actions { margin-top: 10px; display:flex; justify-content:flex-end; }
.btn.primary { background: var(--accent); color: var(--panel-bg); padding: 8px 12px; border: none; border-radius: 6px; cursor: pointer; }
.form-error { color: #b00020; margin-top: 8px; min-height: 18px; max-height: 80px; overflow-y: auto; word-wrap: break-word; padding: 4px 0; line-height: 1.4; font-size: 14px; }

/* stay-logged checkbox row */
.stay-row { display:flex; align-items:center; gap:10px; margin-top:8px; padding: 0 16px; }
.stay-row .stay-label { font-size: 14px; color: var(--text); }
.stay-row input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: #7a4f2b; }

/* ensure action buttons vertically centered with inputs */
.form-actions { align-items: center; }

@media (prefers-color-scheme: dark) {
  .login-tabs .tab { background: #2a2a2a; color: #ddd; }
  .login-tabs .tab.active { background: #a77a54; }
}

/* Force the modal to remain light and readable regardless of system dark mode */
.login-modal-content { background: var(--panel-bg) !important; color: var(--text) !important; }

/* Status inside modal (success/info) */
.form-status { min-height: 20px; margin-bottom: 8px; color: #0a6f2a; font-weight: 600; }

/* Dark mode adjustments for login modal */
.dark .login-form input, .dark .login-form select {
    background: var(--bg);
    border-color: var(--accent);
    color: var(--text);
}
.dark .login-form input::placeholder {
    color: var(--accent);
}
.dark .security-question-text {
    background: var(--bg);
    color: var(--text);
}

/* small toast for messages outside modal */
.ss-notifier { position: fixed; left: 50%; transform: translateX(-50%) translateY(-6px); top: 96px; background: #8b5a2b; color: #fff; padding: 10px 16px; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.18); z-index: 1400; opacity: 0; transition: opacity 220ms ease, transform 220ms ease; pointer-events: none; }
.ss-notifier.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ss-notifier.success { background: #6b4226; }
.ss-notifier.info { background: rgba(0,0,0,0.85); }

/* Logout confirmation modal */
.ss-confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.0); z-index: 1500; display:flex; align-items:center; justify-content:center; opacity: 0; pointer-events: none; transition: background 220ms ease, opacity 220ms ease; }
.ss-confirm-overlay.show { background: rgba(0,0,0,0.45); opacity: 1; pointer-events: auto; }
.ss-confirm { background: #fff; color: #222; padding: 18px; border-radius: 10px; max-width: 420px; width: calc(100% - 40px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); text-align: center; transform: translateY(-8px) scale(.99); opacity: 0; transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease; }
.ss-confirm-overlay.show .ss-confirm { transform: translateY(0) scale(1); opacity: 1; }
.ss-confirm h3 { margin: 0 0 8px 0; font-size: 18px; }
.ss-confirm p { margin: 0 0 14px 0; color: #4b3a31; }
.ss-confirm .confirm-actions { display:flex; gap:10px; justify-content: center; }
.ss-confirm .btn { padding: 8px 12px; border-radius: 8px; border: none; cursor: pointer; }
.ss-confirm .btn.cancel { background: #e6e0d8; color: #3b2e24; }
.ss-confirm .btn.confirm { background: #7a4f2b; color: #fff; }

/* Dark mode for logout confirm modal */
.dark .ss-confirm { background: var(--panel-bg); color: var(--text); }
.dark .ss-confirm p { color: var(--accent); }
.dark .ss-confirm .btn.cancel { background: var(--bg); color: var(--text); }
.dark .ss-confirm .btn.confirm { background: var(--accent); color: var(--panel-bg); }

@keyframes modalPop {
  from { transform: translateY(12px) scale(.995); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Adjust login button to only show dots.svg */
.login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: none;
  background-color: #8b5a2b;
  cursor: pointer;
  border-radius: 5px;
}
.login-button:hover {
  background-color: #5a3d2b;
}
.login-dots {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: invert(1); /* White in light mode */
}
.dark .login-dots {
  filter: invert(0); /* Black in dark mode */
}

/* Dropdown menu for login button */
.login-wrapper { position: relative; display: inline-block; }
.login-caret { display:none; }
.login-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--panel-bg); color: var(--text); min-width: 180px; box-shadow: 0 8px 30px var(--shadow); border-radius: 8px; padding: 8px 0; z-index: 1300; border: 1px solid var(--accent);
  opacity: 0; transform: translateY(-6px) scaleY(.98); transform-origin: top right; transition: opacity 220ms cubic-bezier(.2,.9,.2,1), transform 220ms cubic-bezier(.2,.9,.2,1); pointer-events: none;
}
.login-menu[hidden] { display: block; }
.login-wrapper.open .login-menu { opacity: 1; transform: translateY(0) scaleY(1); pointer-events: auto; }
.login-wrapper.open .login-dots { transform: rotate(180deg); }
.login-menu .item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding: 8px 12px; cursor: pointer; font-size:14px; }
.login-menu .item:hover { background: var(--bg); }
.login-menu .item img { filter: brightness(0); }
.dark .login-menu .item img { filter: brightness(0.6) invert(1); }
.login-menu .sep { height: 1px; background: var(--accent); margin:6px 0; }
.login-menu .small { font-size:12px; color: var(--text); }
.login-menu .toggle { display:flex; align-items:center; gap:8px; }
/* Make the darkmode row clickable across the full width (including the gap) */
.login-menu .toggle .dm-toggle-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding: 8px 0;
  cursor: pointer;
}
.login-menu .toggle .dm-toggle-label .small { color: var(--text); }
.login-menu .toggle input[type="checkbox"] { width:18px; height:18px; margin:0; cursor:pointer; }

@media (max-width: 480px) {
  .forms-wrapper { min-height: 300px; }
  .login-button .login-text { display: none; }
}

/* Ensure login button stays right on mobile even with header centering */
@media (max-width: 768px) {
  .login-wrapper { position: absolute; right: 20px; top: 20px; z-index: 1200; }
  .login-wrapper .login-button { padding: 8px; }
  .login-dots { width: 20px; height: 20px; }
  /* On mobile place the dropdown fixed below the header to avoid overlapping the button */
  .login-wrapper .login-menu { position: fixed; top: calc(80px + 8px); right: 20px; left: auto; }
}