/* Minimal fallback CSS to keep layout usable when Tailwind isn't available
   - Keeps header, container, buttons, forms, and loader usable across browsers
*/
:root{--bg:#f8fafc;--muted:#6b7280;--accent:#3b82f6;--card:#fff}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#111}
body{background:#f3f4f6}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
header{position:sticky;top:0;z-index:9999;background:#fff;border-bottom:1px solid #e5e7eb}
/* Ensure header is on top of other content so nav links remain clickable */
header{position:relative;z-index:60}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:0.75rem 0}
.header-left{display:flex;align-items:center;gap:0.5rem}
.header-left img{height:32px;width:32px;object-fit:contain}
.nav{display:none}
@media(min-width:640px){.nav{display:flex;gap:0.5rem}}
.nav a{padding:0.375rem 0.75rem;border-radius:6px;color:#111;text-decoration:none}
.user-toggle{display:flex;align-items:center;gap:0.5rem;border-radius:9999px;padding:0.25rem}
.user-toggle img{height:32px;width:32px;border-radius:9999px}
.btn{display:inline-block;padding:0.5rem 0.75rem;border-radius:6px;background:var(--accent);color:#fff;text-decoration:none}
.card{background:var(--card);border-radius:8px;padding:1rem;box-shadow:0 6px 18px rgba(15,23,42,0.06)}
.form-input{display:block;width:100%;padding:0.5rem;border:1px solid #e5e7eb;border-radius:6px}
.global-loader{display:none;position:fixed;inset:0;z-index:40;align-items:center;justify-content:center;background:rgba(0,0,0,0.3)}
/* Loader state rules: ensure hidden/show override utility classes like .flex */
.global-loader.hidden{display:none !important}
.global-loader.show{display:flex !important}
.global-loader .box{background:#fff;padding:0.75rem;border-radius:8px;box-shadow:0 6px 18px rgba(15,23,42,0.08);display:flex;gap:0.5rem;align-items:center}
.global-loader svg{width:24px;height:24px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Basic Tailwind-like utility fallbacks used by templates */
.h-8{height:2rem!important}
.w-8{width:2rem!important}
.h-12{height:3rem!important}
.w-12{width:3rem!important}
.mx-auto{margin-left:auto!important;margin-right:auto!important}
.mb-3{margin-bottom:0.75rem!important}
.mt-6{margin-top:1.5rem!important}
.rounded-full{border-radius:9999px!important}
.rounded-md{border-radius:6px!important}
.rounded-xl{border-radius:12px!important}
.flex{display:flex!important}
.items-center{align-items:center!important}
.justify-center{justify-content:center!important}
.space-x-2> :not([hidden]) ~ :not([hidden]){margin-left:0.5rem}
.container{max-width:1100px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.p-8{padding:2rem}
.p-6{padding:1.5rem}
.p-4{padding:1rem}
.p-2{padding:0.5rem}
.p-0{padding:0}
.w-full{width:100%!important}
.max-w-md{max-width:28rem}
.min-h-screen{min-height:100vh}
.text-sm{font-size:0.875rem}
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.font-semibold{font-weight:600}
.text-center{text-align:center}
.text-gray-500{color:#6b7280}
.text-gray-700{color:#374151}
.bg-white{background:#fff}
.bg-gray-50{background:#f9fafb}
.bg-gray-100{background:#f3f4f6}
.bg-blue-600{background:#2563eb}
.text-white{color:#fff}
.shadow-md{box-shadow:0 4px 12px rgba(15,23,42,0.06)}
.shadow-lg{box-shadow:0 8px 30px rgba(15,23,42,0.08)}
.hidden{display:none}
.block{display:block!important}
.overflow-hidden{overflow:hidden}
.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-nowrap{white-space:nowrap}

/* Ensure images don't overflow on mobile */
img{max-width:100%;height:auto}

/* Ensure the desktop nav shows on wider screens when Tailwind isn't loaded */
.nav-desktop{display:none}
@media (min-width:480px){
  /* Force desktop nav visible at desktop widths even if .hidden is present */
  .nav-desktop{display:flex !important;gap:0.5rem;align-items:center}
}

/* Ensure links look reasonable */
.nav-desktop a{padding:0.375rem 0.75rem;border-radius:6px;text-decoration:none;color:#111;display:inline-block;pointer-events:auto}
.nav-desktop a:hover{background:#f3f4f6}

/* header container niceties */
.container.mx-auto{max-width:1100px;margin-left:auto;margin-right:auto}
.flex-wrap{flex-wrap:wrap}
.justify-between{justify-content:space-between}

/* shimmer utility - subtle animated gradient text */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer{
  background: linear-gradient(90deg, #cbd5e1 20%, #ffffff 50%, #cbd5e1 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .shimmer{animation: none}
}