/* Minimal ASCII-inspired theme
   Works alongside Tailwind; we only override presentation. */

:root{
  --paper:#f8fafc;
  --paper-contrast:#ffffff;
  --ink:#111827;
  --ink-2:#374151;
  --line:#e5e7eb;
  --accent:#0ea5a1;    /* teal accent */
  --accent-ink:#115e59;
}

/* Base */
html,body{background:var(--paper);color:var(--ink);}
.ascii-font, pre, code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;}

/* Remove heavy shadows from Tailwind utility classes to get a flat, minimal look */
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow:none !important; }

/* Links: dotted underline for a console-ish vibe */
a{ text-decoration:none; border-bottom:1px dotted var(--accent); color:var(--accent-ink); }
a:hover{ border-bottom-style:solid; }

/* Buttons: minimal defaults; Tailwind colors still apply if present */
button{
  border:1px solid var(--ink-2);
  background:#fff;
  color:var(--ink);
  border-radius:6px;
  padding:.5rem .75rem;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
button:hover{ background:#f3f4f6; border-color:var(--ink); }
button:disabled{ opacity:.6; cursor:not-allowed; }

/* ASCII brand header */
.ascii-header{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:1.25rem 0 .5rem;
}
.ascii-logo{
  margin:0;
  padding:.75rem 1rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  white-space:pre;
  line-height:1.1;
  font-size:12px;
  color:var(--ink);
}
.ascii-logo-link{ border-bottom:none; color:inherit; }
.ascii-tag{
  margin-top:.35rem;
  font-size:.82rem;
  color:var(--ink-2);
}

/* Cards and containers */
.ascii-card{
  background:#fff;
  border:1px dashed var(--line);
  border-radius:10px;
}
#filterSection{
  background:#fff;
  border:1px dashed var(--line);
  border-radius:10px;
}

/* Product items keep li.py-4 selector for JS compatibility */
li.py-4{
  background:#fff;
  border:1px dashed var(--line);
  border-radius:10px;
  padding-top:1rem; padding-bottom:1rem;
}
li.py-4.bg-gray-50{ background:#fafafa; }

/* Availability / rating hues subtle and readable */
.bg-green-500{ background-color:#16a34a !important; }
.bg-yellow-500{ background-color:#eab308 !important; }
.bg-red-500{ background-color:#ef4444 !important; }
.text-green-600{ color:#166534 !important; }
.text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800 { color:var(--accent-ink) !important; }
.bg-blue-100{ background-color:#e0f2f1 !important; }
.text-blue-800{ color:#115e59 !important; }
.dotted-underline{
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-decoration-color:currentColor;
  text-underline-offset:0.15em;
}

/* SSE progress bar with ASCII-ish stripe */
#progressBarContainer{
  height:10px !important;
  background:transparent;
  border:1px dashed var(--line);
  border-radius:6px;
}
#progressBar{
  height:100%;
  border-radius:6px;
  background:repeating-linear-gradient(-45deg, var(--accent), var(--accent) 8px, #94e0dc 8px, #94e0dc 16px);
}

/* Tooltip from AI reviewer: make the edge dashed to match theme */
#ai-quote-tooltip{ border-style:dashed !important; }

/* Keep the spinner class working even without Tailwind runtime */
@keyframes spin { to { transform:rotate(1turn); } }
.animate-spin{ animation:spin 1s linear infinite; }
.border-b-2{ border-bottom-width:2px !important; }
.rounded-full{ border-radius:9999px !important; }

/* Images: subtle placeholder surface */
.product-image{ background-color:#f3f4f6; }

/* Footer-ish helpers inside popup */
.prose blockquote{
  border-left:2px solid var(--line);
  padding-left:.75rem;
}

/* Shared team access, with no dependency on a remote stylesheet. */
.login-page { margin:0; font:16px/1.5 system-ui, sans-serif; }
.login-panel { max-width:26rem; margin:3rem auto; padding:1.5rem; }
.login-panel h1 { font-size:1.75rem; margin:0 0 1rem; }
.login-panel p { color:var(--ink-2); }
.login-panel label { display:block; margin:1.5rem 0 .5rem; font-weight:600; }
.login-panel input[type=password] { box-sizing:border-box; width:100%; padding:.75rem; border:1px solid var(--ink-2); border-radius:6px; font:inherit; }
.login-panel button { margin-top:1rem; width:100%; font:inherit; background:var(--accent-ink); color:white; }
.login-panel button:hover { background:#134e4a; }
.login-panel .login-error { color:#991b1b; }
:focus-visible { outline:3px solid var(--accent-ink); outline-offset:3px; }
.session-controls { display:flex; justify-content:flex-end; padding:.5rem 1rem; }
/* Keep core controls usable if the utility stylesheet is unavailable. */
.hidden { display:none; }
#main_search_form { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:center; }
#main_search_form > .relative { position:relative; flex:1 1 auto; max-width:38rem; }
@media (min-width:768px) { #main_search_form > .relative { flex-basis:22rem; } }
#main_search_form input[name=query], #main_search_form textarea { box-sizing:border-box; width:100%; padding:.75rem 3rem .75rem .75rem; font:inherit; }
/* Include half the field's .25rem top margin when centering the control. */
#expand_button { position:absolute; right:.25rem; top:calc(50% + .125rem); transform:translateY(-50%); }
#expand_button svg { width:1.25rem; height:1.25rem; }
#failedSearchesContainer svg { width:2rem; height:2rem; }
@media (max-width:480px) { .login-panel { margin:1rem auto; } .ascii-logo { font-size:8px; } }