/* ===========================================================================
 * Outline buttons with light text
 * ===========================================================================
 *
 * THE BUG
 * -------
 * shadcn's `outline` variant compiles with bg-background, which resolves to
 * WHITE. Components across this app pair it with light text, because the
 * button was designed to sit on a dark card:
 *
 *     <button class="... border bg-background ... border-gray-600 text-white">
 *       Cancel
 *     </button>
 *
 * White button, white text. Visible only on hover, when the background
 * changes.
 *
 *
 * WHY THIS VERSION IS SIMPLER THAN THE LAST FOUR
 * ----------------------------------------------
 * My earlier attempts tried to work out what was BEHIND each button and
 * respond differently — transparent on a dark card, filled on a light one.
 * That cannot be done reliably in CSS. The parent might be a gradient, an
 * image, a portalled dialog, or a card whose colour comes from a variable.
 * Every version caught some buttons and missed others, and one of them
 * darkened headings that were correct.
 *
 * So this version does not attempt to detect anything.
 *
 * A WHITE button with DARK text and a visible border is legible on ANY
 * background — light card, dark card, gradient, photo. It cannot be wrong,
 * because it does not depend on knowing what is behind it.
 *
 * It also happens to be the right visual answer: every one of these buttons
 * is a SECONDARY action — Cancel, View All, View Product, List an item — so
 * a quiet white button beside a coloured primary is exactly the hierarchy
 * you want.
 *
 * bg-background is the marker. Of the six button variants only `outline`
 * sets a background, so a button with a real colour of its own never carries
 * it and is never touched.
 *
 * NOT scoped to #app: Radix renders dialogs in a PORTAL, appended to <body>,
 * so an #app-scoped rule silently skips every modal button in the app. That
 * is why the trade modal's Cancel button survived three previous versions.
 *
 * Remove this file when the components are fixed properly — the outline
 * variant should not be paired with light text at all.
 * ===========================================================================
 */

button[class*="bg-background"][class*="text-white"],
button[class*="bg-background"][class*="text-gray-1"],
button[class*="bg-background"][class*="text-gray-2"],
button[class*="bg-background"][class*="text-gray-3"],
button[class*="bg-background"][class*="text-gray-4"],
button[class*="bg-background"][class*="text-slate-1"],
button[class*="bg-background"][class*="text-slate-2"],
button[class*="bg-background"][class*="text-slate-3"],
button[class*="bg-background"][class*="text-slate-4"],
button[class*="bg-background"][class*="text-neutral-2"],
button[class*="bg-background"][class*="text-neutral-3"],
button[class*="bg-background"][class*="text-zinc-2"],
button[class*="bg-background"][class*="text-zinc-3"],
a[class*="bg-background"][class*="text-white"],
a[class*="bg-background"][class*="text-gray-2"],
a[class*="bg-background"][class*="text-gray-3"],
a[class*="bg-background"][class*="text-gray-4"] {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #94a3b8 !important;
    font-weight: 600 !important;
    /* A soft shadow so it still reads as a button on a white page, where the
     * border alone can look like a plain outline. */
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08) !important;
}

button[class*="bg-background"][class*="text-white"]:hover,
button[class*="bg-background"][class*="text-gray-1"]:hover,
button[class*="bg-background"][class*="text-gray-2"]:hover,
button[class*="bg-background"][class*="text-gray-3"]:hover,
button[class*="bg-background"][class*="text-gray-4"]:hover,
button[class*="bg-background"][class*="text-slate-3"]:hover,
a[class*="bg-background"][class*="text-white"]:hover,
a[class*="bg-background"][class*="text-gray-3"]:hover {
    background-color: #f1f5f9 !important;
    border-color: #475569 !important;
    color: #0f172a !important;
}

/* Several of these buttons carry hover:scale and hover:bg-gray-700, which
 * would darken the background out from under the dark text. Neutralised. */
button[class*="bg-background"][class*="text-white"]:hover,
button[class*="bg-background"][class*="text-gray-3"]:hover {
    --tw-scale-x: 1.02;
    --tw-scale-y: 1.02;
}

/* Disabled: the rules above force full-strength colour, which would make a
 * disabled button look clickable. shadcn dims via opacity; restore it. */
button[class*="bg-background"]:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}