/**
 * Shared Navigation Styles
 * Used by: snf-facility-compare.html, snf-nurses-compare.html
 */

/* Top Navigation Bar */
.top-nav { background:white; border-bottom:1px solid #e5e7eb; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; }
.top-nav .logo { display:flex; align-items:center; gap:6px; text-decoration:none; }
.top-nav .logo-badge { background:linear-gradient(135deg,#10b981,#059669); color:white; font-weight:800; font-size:14px; padding:4px 8px; border-radius:6px; letter-spacing:-0.02em; }
.top-nav .logo-text { font-weight:700; font-size:18px; color:#111827; letter-spacing:-0.02em; }

/* Navigation Dropdown */
.top-nav .nav-dropdown { position:relative; }
.top-nav .nav-dropdown-btn { display:flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid #e5e7eb; border-radius:8px; background:white; cursor:pointer; font-size:14px; font-weight:500; color:#374151; }
.top-nav .nav-dropdown-btn:hover { background:#f9fafb; border-color:#d1d5db; }
.top-nav .nav-dropdown-btn svg { width:16px; height:16px; }
.top-nav .nav-dropdown-menu { position:absolute; top:100%; right:0; margin-top:4px; background:white; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,0.12); min-width:180px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .15s; z-index:100; }
.top-nav .nav-dropdown.open .nav-dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.top-nav .nav-dropdown-menu a { display:block; padding:10px 16px; color:#374151; text-decoration:none; font-size:14px; font-weight:500; transition:background .1s; }
.top-nav .nav-dropdown-menu a:first-child { border-radius:10px 10px 0 0; }
.top-nav .nav-dropdown-menu a:last-child { border-radius:0 0 10px 10px; }
.top-nav .nav-dropdown-menu a:hover { background:#f3f4f6; }
.top-nav .nav-dropdown-menu a.active { background:#ecfdf5; color:#059669; }
.top-nav .nav-dropdown-menu .divider { height:1px; background:#e5e7eb; margin:4px 0; }
.top-nav .nav-dropdown-menu .dropdown-divider { height:1px; background:#f3f4f6; margin:4px 0; }
.top-nav .nav-dropdown-menu a svg { width:16px; height:16px; margin-right:8px; vertical-align:-3px; color:#9ca3af; }

/* User Button */
.top-nav .user-btn { display:flex; align-items:center; gap:8px; padding:6px 12px; border:none; border-radius:8px; background:transparent; cursor:pointer; font-size:14px; font-weight:500; color:#374151; transition:all .15s; }
.top-nav .user-btn:hover { background:#f3f4f6; }
.top-nav .user-btn.signed-in { background:#ecfdf5; }
.top-nav .user-btn.signed-in:hover { background:#d1fae5; }
.top-nav .user-btn img { width:28px; height:28px; border-radius:50%; border:2px solid #10b981; }
.top-nav .user-btn .user-icon { display:none; width:28px; height:28px; background:linear-gradient(135deg,#10b981,#059669); border-radius:50%; align-items:center; justify-content:center; color:white; font-size:12px; font-weight:700; }
.top-nav .user-btn.signed-in .user-icon { display:flex; }
.top-nav .user-btn .caret { width:14px; height:14px; color:#9ca3af; transition:transform .2s; }
.top-nav .user-btn.signed-in #userName { color:#059669; font-weight:600; }
.top-nav .nav-dropdown.open .user-btn .caret { transform:rotate(180deg); }
.top-nav .nav-dropdown-menu .signout-link { color:#ef4444; }
.top-nav .nav-dropdown-menu .signout-link:hover { background:#fef2f2; color:#dc2626; }

/* Auth Modal */
.auth-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); backdrop-filter:blur(4px); z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.auth-modal-overlay.visible { display:flex; animation:authFadeIn .2s ease; }
@keyframes authFadeIn { from{opacity:0} to{opacity:1} }
.auth-modal { background:white; border-radius:20px; max-width:400px; width:100%; box-shadow:0 25px 50px -12px rgba(0,0,0,0.25); overflow:hidden; animation:authSlide .3s cubic-bezier(0.16,1,0.3,1); }
@keyframes authSlide { from{opacity:0;transform:translateY(10px) scale(0.98)} to{opacity:1;transform:translateY(0) scale(1)} }
.auth-modal-header { padding:32px 32px 24px; text-align:center; background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%); }
.auth-modal-header .auth-logo { width:48px; height:48px; background:linear-gradient(135deg,#10b981,#059669); border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:white; font-weight:800; font-size:14px; box-shadow:0 4px 12px rgba(16,185,129,0.3); }
.auth-modal-header h2 { font-size:22px; font-weight:700; color:#111827; margin:0 0 6px; letter-spacing:-0.02em; }
.auth-modal-header p { font-size:14px; color:#6b7280; margin:0; }
.auth-modal-body { padding:24px 32px 32px; }
.auth-social-btns { display:flex; gap:12px; margin-bottom:20px; }
.auth-btn { flex:1; padding:12px 16px; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .15s; }
.auth-btn svg { width:20px; height:20px; }
.auth-btn.google { background:white; border:1px solid #e5e7eb; color:#374151; }
.auth-btn.google:hover { background:#f9fafb; border-color:#d1d5db; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.auth-btn.apple { background:#000; border:1px solid #000; color:white; }
.auth-btn.apple:hover { background:#1a1a1a; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
.auth-divider { display:flex; align-items:center; gap:16px; margin:20px 0; color:#9ca3af; font-size:13px; font-weight:500; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:#e5e7eb; }
.auth-form { display:flex; flex-direction:column; gap:12px; }
.auth-form input { width:100%; padding:14px 16px; border:1.5px solid #e5e7eb; border-radius:10px; font-size:15px; transition:all .2s; background:#fafafa; }
.auth-form input:focus { outline:none; border-color:#10b981; background:white; box-shadow:0 0 0 4px rgba(16,185,129,.1); }
.auth-form input::placeholder { color:#9ca3af; }
.auth-form .auth-submit { width:100%; padding:14px; background:linear-gradient(135deg,#10b981,#059669); color:white; border:none; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; transition:all .2s; box-shadow:0 2px 8px rgba(16,185,129,0.3); }
.auth-form .auth-submit:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(16,185,129,0.4); }
.auth-form .auth-submit:active { transform:translateY(0); }
.auth-form .auth-submit:disabled { background:#d1d5db; box-shadow:none; cursor:not-allowed; transform:none; }
.auth-toggle { text-align:center; margin-top:16px; font-size:14px; color:#6b7280; }
.auth-toggle a { color:#10b981; font-weight:600; cursor:pointer; text-decoration:none; }
.auth-toggle a:hover { text-decoration:underline; }
.auth-error { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; padding:12px 14px; border-radius:10px; font-size:13px; margin-bottom:12px; display:none; }
.auth-error.visible { display:block; }
.auth-close { position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:10px; border:none; background:white; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,0.1); transition:all .15s; z-index:1; }
.auth-close:hover { background:#f9fafb; transform:scale(1.05); }
.auth-close svg { width:18px; height:18px; color:#6b7280; }

/* Auth Submit Loading State */
.auth-submit.loading { background:#d1d5db; box-shadow:none; cursor:wait; pointer-events:none; }
.auth-submit.loading::after { content:''; display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,0.3); border-top-color:white; border-radius:50%; margin-left:8px; animation:authSpin .6s linear infinite; vertical-align:middle; }
@keyframes authSpin { to{transform:rotate(360deg)} }

/* Auth Success State */
.auth-success { padding:24px 0; text-align:center; }

/* Index page Sign In nav link */
.sign-in-link { opacity:0.8; }
.sign-in-link:hover { opacity:1; }
.sign-in-link.signed-in { color:#059669 !important; font-weight:600; opacity:1; }