/* Focus visibility, transitions, and dropdown/accessibility helpers */
:root { --brand: #0F1B3E; --accent: #00E5C2; }

/* Better default focus ring */
:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.focus-visible:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Reveal animation defaults (paired with JS removing classes) */
.reveal-on-scroll { will-change: opacity, transform; }

/* Dropdown menus */
.dropdown-menu { box-shadow: 0 10px 25px rgba(0,0,0,0.12); border-radius: 8px; }

/* User dropdown button hover */
.user-dropdown > button { transition: border-color .2s ease, color .2s ease, transform .1s ease; }
.user-dropdown > button:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }

/* Dropdown item hover states */
.dropdown-item { transition: background-color .15s ease; }
.dropdown-item:hover { background-color: #f8f9fa; }

/* Hidden utilities fallback (in case Tailwind fails to load) */
.hidden { display: none !important; }
.md\:hidden { display: none !important; }

/* Modal base */
.analini-modal { pointer-events: none; }
.analini-modal .analini-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.35); animation: overlayFade .18s ease; }
.analini-modal .analini-modal-content { pointer-events: auto; background: white; border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.25); border: 1px solid rgba(15,27,62,0.08); animation: modalIn .18s ease; }

@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translate(-50%, 0) scale(.98); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

/* Modal responsive widths */
@media (max-width: 640px) {
  .analini-modal .analini-modal-content { width: 95%; left: 50%; top: 1.25rem; transform: translateX(-50%); }
}
@media (min-width: 640px) {
  .analini-modal .analini-modal-content { width: 520px; left: 50%; top: 4rem; transform: translateX(-50%); }
}

/* Form helpers */
.form-error { color: #dc2626; font-size: 12px; margin-top: 4px; }
.pw-strength { font-size: 12px; color: #6b7280; margin-top: 4px; }
.pw-strength .weak { color: #dc2626; }
.pw-strength .medium { color: #f59e0b; }
.pw-strength .strong { color: #16a34a; }