/* ============================================================================
 * EasyAI brand overrides for the sub2api admin UI.
 *
 * Injected into every HTML response from sub2api by Caddy (replace-response),
 * loaded AFTER sub2api's own bundle so these rules win on source order.
 *
 * sub2api is built with TailwindCSS and ships a hardcoded TEAL "primary" palette
 * (primary-500 = #14b8a6) plus @apply-based component classes (.btn, .input,
 * .card, .sidebar, .badge-*, etc.). We do two things here:
 *   1. Re-tint the entire `primary` scale from teal -> EasyAI indigo, so every
 *      button / link / active nav / focus ring / gradient picks up our brand.
 *   2. Polish the shared chrome (login, sidebar, header, cards, inputs) so it
 *      reads as our own product, coherent with /audit and /chat (Inter, indigo).
 *
 * Substring-selector note: [class*="primary-500"] also matches "primary-500/30"
 * (opacity) and "hover:...-primary-500" (state) variants, which is what we want.
 * The only collision is "primary-50" inside "primary-500", so shade rules are
 * ordered ASCENDING — for an element that is literally primary-500, both the
 * -50 and -500 rules match and the later (-500) one wins.
 *
 * The login page title/logo/subtitle come from sub2api SETTINGS (site_name,
 * site_logo, site_subtitle), not markup — set those in the admin UI for the
 * cleanest rebrand. See docs/runbook.md "Rebrand the portal".
 * ========================================================================== */

/* Inter — same font family used by /audit/ and /chat. Falls back to system. */
@import url('https://rsms.me/inter/inter.css');

:root {
  --ez-indigo-50:  #eef2ff;
  --ez-indigo-100: #e0e7ff;
  --ez-indigo-200: #c7d2fe;
  --ez-indigo-300: #a5b4fc;
  --ez-indigo-400: #818cf8;
  --ez-indigo-500: #6366f1;
  --ez-indigo-600: #4f46e5;
  --ez-indigo-700: #4338ca;
  --ez-indigo-800: #3730a3;
  --ez-indigo-900: #312e81;
  --ez-indigo-950: #1e1b4b;
  --ez-radius: 12px;
}

/* ----- Typography ------------------------------------------------------ */

html, body, button, input, select, textarea {
  font-family:
    "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { letter-spacing: -0.01em; }

::selection { background: var(--ez-indigo-100); color: var(--ez-indigo-700); }

/* ============================================================================
 * Brand color: re-tint sub2api's teal `primary-*` palette to EasyAI indigo.
 * Shades ascending so -500 wins over -50 on literal primary-500 elements.
 * ========================================================================== */

/* ---- background-color ---- */
[class*="bg-primary-50"]  { background-color: var(--ez-indigo-50)  !important; }
[class*="bg-primary-100"] { background-color: var(--ez-indigo-100) !important; }
[class*="bg-primary-200"] { background-color: var(--ez-indigo-200) !important; }
[class*="bg-primary-300"] { background-color: var(--ez-indigo-300) !important; }
[class*="bg-primary-400"] { background-color: var(--ez-indigo-400) !important; }
[class*="bg-primary-500"] { background-color: var(--ez-indigo-500) !important; }
[class*="bg-primary-600"] { background-color: var(--ez-indigo-600) !important; }
[class*="bg-primary-700"] { background-color: var(--ez-indigo-700) !important; }
[class*="bg-primary-800"] { background-color: var(--ez-indigo-800) !important; }
[class*="bg-primary-900"] { background-color: var(--ez-indigo-900) !important; }
[class*="bg-primary-950"] { background-color: var(--ez-indigo-950) !important; }

/* Preserve translucency for the login-page decorative orbs (set after the
 * solid rules so these win for the specific opacity variants). */
[class*="bg-primary-300/10"] { background-color: rgb(165 180 252 / 0.10) !important; }
[class*="bg-primary-400/20"] { background-color: rgb(129 140 248 / 0.20) !important; }
[class*="bg-primary-500/15"] { background-color: rgb(99 102 241 / 0.15) !important; }
[class*="bg-primary-500/20"] { background-color: rgb(99 102 241 / 0.20) !important; }
[class*="bg-primary-900/20"] { background-color: rgb(49 46 129 / 0.20) !important; }
[class*="bg-primary-900/30"] { background-color: rgb(49 46 129 / 0.30) !important; }

/* ---- text-color ---- */
[class*="text-primary-50"]  { color: var(--ez-indigo-50)  !important; }
[class*="text-primary-100"] { color: var(--ez-indigo-100) !important; }
[class*="text-primary-200"] { color: var(--ez-indigo-200) !important; }
[class*="text-primary-300"] { color: var(--ez-indigo-300) !important; }
[class*="text-primary-400"] { color: var(--ez-indigo-400) !important; }
[class*="text-primary-500"] { color: var(--ez-indigo-500) !important; }
[class*="text-primary-600"] { color: var(--ez-indigo-600) !important; }
[class*="text-primary-700"] { color: var(--ez-indigo-700) !important; }
[class*="text-primary-800"] { color: var(--ez-indigo-800) !important; }
[class*="text-primary-900"] { color: var(--ez-indigo-900) !important; }

/* ---- border-color ---- */
[class*="border-primary-100"] { border-color: var(--ez-indigo-100) !important; }
[class*="border-primary-200"] { border-color: var(--ez-indigo-200) !important; }
[class*="border-primary-300"] { border-color: var(--ez-indigo-300) !important; }
[class*="border-primary-400"] { border-color: var(--ez-indigo-400) !important; }
[class*="border-primary-500"] { border-color: var(--ez-indigo-500) !important; }
[class*="border-primary-600"] { border-color: var(--ez-indigo-600) !important; }
[class*="border-primary-700"] { border-color: var(--ez-indigo-700) !important; }
[class*="border-primary-800"] { border-color: var(--ez-indigo-800) !important; }
[class*="border-primary-900"] { border-color: var(--ez-indigo-900) !important; }

/* ---- ring-color (focus states) ---- */
[class*="ring-primary-100"] { --tw-ring-color: var(--ez-indigo-100) !important; }
[class*="ring-primary-300"] { --tw-ring-color: var(--ez-indigo-300) !important; }
[class*="ring-primary-400"] { --tw-ring-color: var(--ez-indigo-400) !important; }
[class*="ring-primary-500"] { --tw-ring-color: var(--ez-indigo-500) !important; }
[class*="ring-primary-600"] { --tw-ring-color: var(--ez-indigo-600) !important; }
[class*="ring-primary-800"] { --tw-ring-color: var(--ez-indigo-800) !important; }
[class*="ring-primary-900"] { --tw-ring-color: var(--ez-indigo-900) !important; }

/* ---- gradient stops (buttons, progress bars, text-gradient) ----
 * Only the colored stop needs overriding; Tailwind's paired transparent stop
 * stays invisible (alpha 0) regardless of hue. */
[class*="from-primary-50"]  { --tw-gradient-from: var(--ez-indigo-50)  var(--tw-gradient-from-position) !important; }
[class*="from-primary-400"] { --tw-gradient-from: var(--ez-indigo-400) var(--tw-gradient-from-position) !important; }
[class*="from-primary-500"] { --tw-gradient-from: var(--ez-indigo-500) var(--tw-gradient-from-position) !important; }
[class*="from-primary-600"] { --tw-gradient-from: var(--ez-indigo-600) var(--tw-gradient-from-position) !important; }
[class*="from-primary-900"] { --tw-gradient-from: var(--ez-indigo-900) var(--tw-gradient-from-position) !important; }
[class*="from-primary-950"] { --tw-gradient-from: var(--ez-indigo-950) var(--tw-gradient-from-position) !important; }
[class*="via-primary-50"]   { --tw-gradient-via: var(--ez-indigo-50) var(--tw-gradient-via-position) !important; }
[class*="to-primary-100"]   { --tw-gradient-to: var(--ez-indigo-100) var(--tw-gradient-to-position) !important; }
[class*="to-primary-500"]   { --tw-gradient-to: var(--ez-indigo-500) var(--tw-gradient-to-position) !important; }
[class*="to-primary-600"]   { --tw-gradient-to: var(--ez-indigo-600) var(--tw-gradient-to-position) !important; }
[class*="to-primary-800"]   { --tw-gradient-to: var(--ez-indigo-800) var(--tw-gradient-to-position) !important; }

/* ---- box-shadow tint (shadow-primary-500/25 etc.) ---- */
[class*="shadow-primary-500"] { --tw-shadow-color: var(--ez-indigo-500) !important; --tw-shadow: var(--tw-shadow-colored) !important; }
[class*="shadow-primary-600"] { --tw-shadow-color: var(--ez-indigo-600) !important; --tw-shadow: var(--tw-shadow-colored) !important; }

/* ============================================================================
 * Chrome polish — make it feel like our product, not a stock template.
 * ========================================================================== */

/* Softer, slightly tighter page background to match /audit + /chat. */
body { background: #f6f7f9; }

/* Buttons: a touch more rounding + crisper primary, consistent with /chat. */
.btn { border-radius: var(--ez-radius) !important; font-weight: 600 !important; }
.btn-primary {
  background-image: linear-gradient(135deg, var(--ez-indigo-500), var(--ez-indigo-600)) !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28) !important;
}
.btn-primary:hover {
  background-image: linear-gradient(135deg, var(--ez-indigo-600), var(--ez-indigo-700)) !important;
}

/* Inputs: indigo focus ring regardless of which utility sub2api used. */
.input:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="search"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  border-color: var(--ez-indigo-500) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
  outline: none !important;
}

/* Cards / login glass card: cohesive border + shadow. */
.card, .card-glass, .glass-card {
  border-radius: 16px !important;
}
.card-glass {
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.10) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
}

/* Login brand mark: indigo glow under the logo tile. */
.shadow-primary-500\/30 { box-shadow: 0 10px 30px rgba(79, 70, 229, 0.30) !important; }

/* Sidebar active item: clear indigo state. */
.sidebar-link-active {
  background: var(--ez-indigo-50) !important;
  color: var(--ez-indigo-700) !important;
}

/* ----- Balance pill (top-right header) ---------------------------------
 * Make the balance read as "premium gold" instead of a muted indigo pill, to
 * draw the eye and nudge top-ups. sub2api renders it as
 *   header > div.rounded-xl.bg-primary-50.px-3.py-1.5 (dark:bg-primary-900/20)
 *     > svg.text-primary-600  +  span.text-primary-700
 * so we target that class combo scoped to <header> (won't touch dashboard
 * cards). Tuned for both light and dark mode. */
header [class*="rounded-xl"][class*="bg-primary-50"][class*="px-3"][class*="py-1.5"] {
  background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
  border: 1px solid #fcd34d !important;
  box-shadow: 0 1px 2px rgba(180, 83, 9, 0.12) !important;
}
header [class*="rounded-xl"][class*="bg-primary-50"][class*="px-3"][class*="py-1.5"] span {
  color: #b45309 !important;       /* amber-700, readable on the light pill */
  font-weight: 700 !important;
}
header [class*="rounded-xl"][class*="bg-primary-50"][class*="px-3"][class*="py-1.5"] svg {
  color: #d97706 !important;       /* amber-600 coin icon */
}

/* Dark mode: brighter gold on a translucent gold fill so it pops on dark chrome. */
.dark header [class*="rounded-xl"][class*="bg-primary-50"][class*="px-3"][class*="py-1.5"] {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(245, 158, 11, 0.10)) !important;
  border-color: rgba(251, 191, 36, 0.40) !important;
  box-shadow: none !important;
}
.dark header [class*="rounded-xl"][class*="bg-primary-50"][class*="px-3"][class*="py-1.5"] span {
  color: #fcd34d !important;       /* amber-300 */
}
.dark header [class*="rounded-xl"][class*="bg-primary-50"][class*="px-3"][class*="py-1.5"] svg {
  color: #fbbf24 !important;       /* amber-400 */
}

/* Scrollbars in our brand tint. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ez-indigo-500);
  outline-offset: 2px;
  border-radius: 4px;
}

code, pre, kbd {
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}