/* ============================================================
   Auth modal styles for shared/auth.js
   The modal markup injected by auth.js uses Tailwind utility
   class names. Pages that no longer load the Tailwind CDN must
   include this stylesheet instead — it re-implements just the
   utilities the modal needs, scoped to #wb-auth-modal-overlay.
   ============================================================ */

#wb-auth-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#wb-auth-modal-overlay.hidden { display: none; }
#wb-auth-modal-overlay .hidden { display: none; }

/* layout */
#wb-auth-modal-overlay .flex { display: flex; }
#wb-auth-modal-overlay .flex-1 { flex: 1 1 0%; }
#wb-auth-modal-overlay .items-center { align-items: center; }
#wb-auth-modal-overlay .justify-between { justify-content: space-between; }
#wb-auth-modal-overlay .gap-1 { gap: 0.25rem; }
#wb-auth-modal-overlay .block { display: block; }
#wb-auth-modal-overlay .w-full { width: 100%; }
#wb-auth-modal-overlay .max-w-md { max-width: 28rem; }
#wb-auth-modal-overlay .w-5 { width: 1.25rem; }
#wb-auth-modal-overlay .h-5 { height: 1.25rem; }
#wb-auth-modal-overlay .overflow-hidden { overflow: hidden; }
#wb-auth-modal-overlay .space-y-4 > * + * { margin-top: 1rem; }

/* spacing */
#wb-auth-modal-overlay .mx-4 { margin-left: 1rem; margin-right: 1rem; }
#wb-auth-modal-overlay .mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
#wb-auth-modal-overlay .mt-2 { margin-top: 0.5rem; }
#wb-auth-modal-overlay .mt-4 { margin-top: 1rem; }
#wb-auth-modal-overlay .mb-1 { margin-bottom: 0.25rem; }
#wb-auth-modal-overlay .p-1 { padding: 0.25rem; }
#wb-auth-modal-overlay .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
#wb-auth-modal-overlay .px-4 { padding-left: 1rem; padding-right: 1rem; }
#wb-auth-modal-overlay .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
#wb-auth-modal-overlay .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
#wb-auth-modal-overlay .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
#wb-auth-modal-overlay .pt-4 { padding-top: 1rem; }
#wb-auth-modal-overlay .pt-6 { padding-top: 1.5rem; }
#wb-auth-modal-overlay .pb-2 { padding-bottom: 0.5rem; }
#wb-auth-modal-overlay .pb-6 { padding-bottom: 1.5rem; }

/* borders & radius */
#wb-auth-modal-overlay .border { border: 1px solid #e5e7eb; }
#wb-auth-modal-overlay .border-gray-300 { border-color: #d1d5db; }
#wb-auth-modal-overlay .border-red-200 { border-color: #fecaca; }
#wb-auth-modal-overlay .border-green-200 { border-color: #bbf7d0; }
#wb-auth-modal-overlay .rounded-lg { border-radius: 0.5rem; }
#wb-auth-modal-overlay .rounded-2xl { border-radius: 1rem; }
#wb-auth-modal-overlay .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

/* colors */
#wb-auth-modal-overlay .bg-white { background-color: #ffffff; }
#wb-auth-modal-overlay .bg-blue-100 { background-color: #dbeafe; }
#wb-auth-modal-overlay .bg-blue-600 { background-color: #2563eb; }
#wb-auth-modal-overlay .bg-red-50 { background-color: #fef2f2; }
#wb-auth-modal-overlay .bg-green-50 { background-color: #f0fdf4; }
#wb-auth-modal-overlay .text-white { color: #ffffff; }
#wb-auth-modal-overlay .text-blue-600 { color: #2563eb; }
#wb-auth-modal-overlay .text-blue-700 { color: #1d4ed8; }
#wb-auth-modal-overlay .text-gray-400 { color: #9ca3af; }
#wb-auth-modal-overlay .text-gray-500 { color: #6b7280; }
#wb-auth-modal-overlay .text-gray-700 { color: #374151; }
#wb-auth-modal-overlay .text-gray-800 { color: #1f2937; }
#wb-auth-modal-overlay .text-red-700 { color: #b91c1c; }
#wb-auth-modal-overlay .text-green-700 { color: #15803d; }

/* typography */
#wb-auth-modal-overlay .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
#wb-auth-modal-overlay .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
#wb-auth-modal-overlay .text-xs { font-size: 0.75rem; line-height: 1rem; }
#wb-auth-modal-overlay .text-center { text-align: center; }
#wb-auth-modal-overlay .font-bold { font-weight: 700; }
#wb-auth-modal-overlay .font-semibold { font-weight: 600; }
#wb-auth-modal-overlay .font-medium { font-weight: 500; }

/* interactive */
#wb-auth-modal-overlay button { cursor: pointer; border: none; background: none; font: inherit; }
#wb-auth-modal-overlay .transition-colors { transition: background-color 0.15s ease, color 0.15s ease; }
#wb-auth-modal-overlay .transition-shadow { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
#wb-auth-modal-overlay .outline-none { outline: none; }
#wb-auth-modal-overlay .hover\:bg-blue-700:hover { background-color: #1d4ed8; }
#wb-auth-modal-overlay .hover\:bg-gray-100:hover { background-color: #f3f4f6; }
#wb-auth-modal-overlay .hover\:text-gray-600:hover { color: #4b5563; }
#wb-auth-modal-overlay .hover\:underline:hover { text-decoration: underline; }
#wb-auth-modal-overlay input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35); }
#wb-auth-modal-overlay button:disabled { opacity: 0.5; cursor: not-allowed; }