/* ============================================================================
 * EasyAI brand overrides for the sub2api admin UI.
 *
 * Injected into every HTML response from sub2api by Caddy (replace-response).
 * Goal: visual coherence with the audit UI at /audit/ — same Inter font,
 * same indigo accent, same soft slate background, same radii.
 *
 * Sub2api is built with TailwindCSS, so we can't easily restyle individual
 * components (each shape is a utility-class combo). Focus here: global
 * typography, page chrome, brand colors. Iterate based on the actual rendered
 * DOM if more depth is needed.
 *
 * To extend: open DevTools on a sub2api page, find the class or element you
 * want to change, and add a rule below. Keep selectors specific enough to
 * not bleed into the rest of the page.
 * ========================================================================== */

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

:root {
    --ez-brand-50:  #eef2ff;
    --ez-brand-100: #e0e7ff;
    --ez-brand-500: #6366f1;
    --ez-brand-600: #4f46e5;
    --ez-brand-700: #4338ca;
    --ez-slate-50:  #f8fafc;
    --ez-slate-100: #f1f5f9;
    --ez-slate-200: #e2e8f0;
    --ez-slate-400: #94a3b8;
    --ez-slate-600: #475569;
    --ez-slate-900: #0f172a;
    --ez-radius:    10px;
}

/* ----- 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;
}

body {
    color: var(--ez-slate-900);
    background: var(--ez-slate-50);
}

/* Headings and key text — keep weight but tighten letter-spacing. */
h1, h2, h3, h4, h5 {
    letter-spacing: -0.01em;
    color: var(--ez-slate-900);
}

/* ----- Selection / scrollbar ------------------------------------------ */

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

::-webkit-scrollbar         { width: 10px; height: 10px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: var(--ez-slate-200); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ez-slate-400); }

/* ----- Generic primary colour swap ------------------------------------ */
/*
 * Sub2api's Tailwind palette likely uses blue / sky / cyan as primary. These
 * rules nudge interactive blue elements toward indigo. They use [class*=…]
 * matchers that catch the common Tailwind class prefixes; specificity is kept
 * minimal so it overrides utility classes without fighting inline styles.
 */

[class*="bg-blue-500"]   { background-color: var(--ez-brand-500) !important; }
[class*="bg-blue-600"]   { background-color: var(--ez-brand-600) !important; }
[class*="bg-blue-700"]   { background-color: var(--ez-brand-700) !important; }
[class*="hover:bg-blue-600"]:hover { background-color: var(--ez-brand-700) !important; }
[class*="hover:bg-blue-700"]:hover { background-color: var(--ez-brand-700) !important; }

[class*="text-blue-500"] { color: var(--ez-brand-500) !important; }
[class*="text-blue-600"] { color: var(--ez-brand-600) !important; }
[class*="text-blue-700"] { color: var(--ez-brand-700) !important; }

[class*="border-blue-500"] { border-color: var(--ez-brand-500) !important; }
[class*="ring-blue-500"]   { --tw-ring-color: var(--ez-brand-500) !important; }

/* Same for sky / primary aliases. Adjust as needed once we see the real DOM. */
[class*="bg-sky-500"]   { background-color: var(--ez-brand-500) !important; }
[class*="bg-sky-600"]   { background-color: var(--ez-brand-600) !important; }
[class*="text-sky-500"] { color: var(--ez-brand-500) !important; }
[class*="text-sky-600"] { color: var(--ez-brand-600) !important; }

[class*="bg-indigo-500"] { background-color: var(--ez-brand-500) !important; }
[class*="bg-indigo-600"] { background-color: var(--ez-brand-600) !important; }

/* ----- Card surfaces -------------------------------------------------- */

/* If sub2api uses bg-white cards, soften them with a border and shadow so they
 * feel coherent with the audit UI's card style. */
.card,
[class*="bg-white"][class*="rounded"]:not(button):not(input):not(select) {
    border: 1px solid var(--ez-slate-200) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* ----- Form controls (defensive) ------------------------------------- */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--ez-brand-500) !important;
    box-shadow: 0 0 0 3px var(--ez-brand-100) !important;
}

/* ----- Misc ----------------------------------------------------------- */

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

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