@import url("./dogeos-sdk.css") layer(dogeos-sdk);

img.data-\[loaded\=true\]\:opacity-100[data-loaded="true"] {
    opacity: 1;
}

/*
 * Neutralize the SDK's Tailwind v4 `translate:` declaration on Radix Dialog
 * centering. The app's Tailwind v3 utilities set `transform: translate(...)`
 * which already centers the modal — but the SDK ships v4 utility classes that
 * additionally set the modern `translate:` individual-transform property.
 * Both apply (different CSS properties), so centering gets doubled, pushing
 * the dialog to the top-left. See plan: do-deep-diagnostic-why-misty-beacon.
 */
.-translate-x-1\/2.-translate-y-1\/2,
.md\:translate-x-\[-50\%\].md\:translate-y-\[-50\%\] {
    translate: none !important;
}

/*
 * The SDK ships Tailwind v4 preflight `button { … }` resets (background,
 * height, padding, margin, appearance) at element specificity. When the SDK
 * stylesheet is loaded before the app's Tailwind v3 utilities via index.html,
 * those resets can shadow individual properties on stacked button utilities.
 * Re-assert the wufi background + the one arbitrary navbar height globally,
 * so `bg-wufi-orange*` buttons stay opaque everywhere they appear and the
 * 80px header keeps its size. Values come from tailwind.config.js:70-76.
 */
.bg-wufi-orange { background-color: #FF8D4D; }
.bg-wufi-orangeLight { background-color: #FFAE80; }
.bg-wufi-orangeLighter { background-color: #FFDECC; }
.bg-wufi-orangeLightest { background-color: #FFEFE5; }

.h-\[80px\] { height: 80px; }

/*
 * Re-assert two specific button backgrounds whose v3 utility classes are
 * losing the runtime cascade against the SDK's `@layer base` button reset:
 *   - Switch-Network red gradient in the navbar (header/index.tsx)
 *   - Create-Pool dark CTA in create-pool/CreatePoolForm
 * Both render `text-white` on top, so a transparent background = invisible.
 */
.from-red-400.to-red-500 {
    background-image: linear-gradient(to right, #f87171, #ef4444);
}
.bg-\[\#1E1E1E\] {
    background-color: #1E1E1E;
}