/*
 * Genex Spare - theme compatibility layer
 *
 * Loaded after the active theme's stylesheets, only on pages that render the
 * app. Everything is scoped to .gxs-app (added around every app shortcode).
 *
 * 1. Element resets use :where() so they sit at element weight (0,0,1): they
 *    beat a theme's bare `button { ... }` rule (they load later) but lose to
 *    every Tailwind utility class, so the templates' own classes still decide.
 *
 * 2. Colour hooks. Inline-styled panels in the templates use these variables
 *    with their original colours as fallbacks. A theme with a dark mode maps
 *    them onto its own palette, e.g.
 *
 *        .gxs-app { --gxs-surface: var(--base-3); --gxs-text: var(--contrast); }
 *
 *    --gxs-surface        modal / panel background       (#fefefe)
 *    --gxs-surface-muted  code / preview boxes           (#f5f5f5)
 *    --gxs-info-bg        info note background           (#e8f4f8)
 *    --gxs-text           headings, primary text         (#333)
 *    --gxs-text-2         secondary text                 (#555 / #666)
 *    --gxs-text-3         close icons, muted text        (#aaa)
 *    --gxs-link           inline link colour             (#007cba)
 *    --gxs-line           panel border                   (#888)
 *    --gxs-line-soft      separators                     (#eee)
 *    --gxs-row-hover      table row hover                (#f8fafc)
 *    --gxs-scroll-thumb / --gxs-scroll-track             (#cbd5e0 / #f7fafc)
 */

/* --- 1. Element resets (Tailwind preflight, re-applied after the theme) --- */

:where(.gxs-app) button {
    min-height: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0 solid #e5e7eb;
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
}

:where(.gxs-app) button:disabled {
    cursor: not-allowed;
}

/* --- 2. Modals ---
 * theme-compat.js moves every position:fixed overlay into this portal at the
 * end of <body>, so a transformed/filtered theme wrapper cannot turn "fixed"
 * into "absolute to a tall section". The portal is its own top-level stacking
 * context, above sticky theme headers. */

.gxs-portal {
    position: relative;
    z-index: 100000;
}

/* Overlays scroll rather than clip when a dialog is taller than the screen. */
.gxs-portal > .fixed.inset-0 {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Classes the templates use that the Tailwind 2.2 CDN build does not ship. */
.gxs-app .z-60 { z-index: 60; }
.gxs-app .max-h-\[90vh\] { max-height: 90vh; }