/* ==========================================================================
   FXBG Technology brand theme for Directory Lister
   --------------------------------------------------------------------------
   Loaded AFTER the compiled Tailwind bundle (app/assets/app-*.css) from
   app/views/layouts/app.twig. Rules here are intentionally unlayered so they
   win over the Tailwind @layer theme/base/utilities rules without !important.

   HOW THE RECOLOR WORKS
   Tailwind v4 resolves every utility through a CSS custom property, so
   re-pointing the theme variables below recolors the whole app at once:

     sky-*    -> FXBG purple  (light mode primary)
     violet-* -> FXBG purple  (dark mode primary)
     yellow-* -> FXBG gold    (theme toggle lamp)

   The utility class names in the Twig templates still read "sky"/"violet";
   they render FXBG purple. Do not add new sky/violet classes expecting blue.

   IMPORTANT: the shipped Tailwind bundle is pre-built and purged -- it only
   contains the utilities the stock templates used. There is no build step in
   this distribution, so any NEW styling must be written as plain CSS here
   (the .fxbg-* component classes below) rather than as new Tailwind classes.

   Palette: purple #2c1577 (primary) - orange #f05a22 (accent)
            gold #fcb017 (sparing). Never white text on orange or gold.
   ========================================================================== */

:root,
:host {
    /* ---- FXBG purple ramp (hue 254, generated around #2c1577) ---- */
    --fxbg-purple-50: #f1eefc;
    --fxbg-purple-100: #e0d8f8;
    --fxbg-purple-200: #c0b1f1;
    --fxbg-purple-300: #9a81e9;
    --fxbg-purple-400: #7352e0;
    --fxbg-purple-500: #4b24cc;
    --fxbg-purple-600: #3b1ca0;
    --fxbg-purple-700: #2c1577; /* brand primary */
    --fxbg-purple-800: #22105b;
    --fxbg-purple-900: #1a0c45;
    --fxbg-purple-950: #10082b;

    /* ---- accents ---- */
    --fxbg-orange: #f05a22;
    --fxbg-orange-dark: #c4400f; /* orange text on light backgrounds */
    --fxbg-gold: #fcb017;

    /* ---- dark mode ground, matching msp-ops ---- */
    --fxbg-dark-bg: #100d1c;
    --fxbg-dark-panel: #1a1531; /* cards lifted off the ground */

    /* ---- typography ---- */
    --font-display: Montserrat, "Work Sans", ui-sans-serif, system-ui, sans-serif;
    --font-sans: Inter, "Work Sans", ui-sans-serif, system-ui, sans-serif;

    /* ---- Tailwind theme re-point: light mode primary ---- */
    --color-sky-500: var(--fxbg-purple-500);
    --color-sky-600: var(--fxbg-purple-700);
    --color-sky-700: var(--fxbg-purple-800);
    --color-sky-800: var(--fxbg-purple-900);

    /* ---- Tailwind theme re-point: dark mode primary ---- */
    --color-violet-600: var(--fxbg-purple-500);
    --color-violet-700: var(--fxbg-purple-700);
    --color-violet-800: var(--fxbg-purple-800);
    --color-violet-900: var(--fxbg-purple-900);

    /* ---- gold, used only for the theme toggle lamp ---- */
    --color-yellow-400: var(--fxbg-gold);

    /* ---- dark mode surfaces. slate-800 is the page ground and the file-info
       modal, slate-900 the readme card. Upstream made the card darker than the
       ground; against a near-black ground it reads better a shade lighter. ---- */
    --color-slate-800: var(--fxbg-dark-bg);
    --color-slate-900: var(--fxbg-dark-panel);
}

/* The theme class sits on a wrapper div, so paint the document behind it too:
   otherwise overscroll and the mobile address bar flash the browser default. */
html:has(.dark) {
    background-color: var(--fxbg-dark-bg);
}

/* ==========================================================================
   Typography
   ========================================================================== */

.fxbg-heading,
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
    font-family: var(--font-display);
    font-weight: 600;
}

/* ==========================================================================
   Header
   ========================================================================== */

.fxbg-header {
    z-index: 40;
}

/* Logo + wordmark lockup. */
.fxbg-lockup {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem;
    transition: opacity 0.15s ease-in-out;
}

.fxbg-lockup:hover {
    opacity: 0.9;
}

/* The official wordmark is about 4.45:1, so it is sized by height. It shrinks
   on phones so it does not crowd the search field. */
.fxbg-lockup-wordmark {
    display: block;
    height: 2rem;
    width: auto;
    max-width: 100%;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .fxbg-lockup-wordmark {
        height: 1.625rem;
    }
}

/* Thin orange rule that closes the header. */
.fxbg-accent-bar {
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--fxbg-orange) 0%,
        var(--fxbg-orange) 55%,
        var(--fxbg-gold) 100%
    );
}

/* Header icon buttons (zip download) pick up orange on hover. */
.fxbg-header-icon:hover {
    color: var(--fxbg-orange);
}

/* The search field sits on purple now, so its placeholder and icons need to
   be light rather than the stock near-black. */
.fxbg-search input::placeholder {
    color: rgb(255 255 255 / 0.6);
}

.fxbg-search-icon {
    color: rgb(255 255 255 / 0.65);
}

/* The clear-search button turns solid white on its red hover chip. */
.fxbg-search-icon:hover {
    color: #fff;
}

/* ==========================================================================
   Listing
   ========================================================================== */

/* File/folder rows: faint purple wash on hover instead of grey. */
.fxbg-row:hover {
    background-color: var(--fxbg-purple-50);
}

.dark .fxbg-row:hover {
    background-color: var(--fxbg-purple-700);
}

/* Scroll-to-top: purple at rest, orange on hover with near-black glyph so we
   never put white on orange. */
.fxbg-fab:hover {
    background-color: var(--fxbg-orange);
    color: var(--fxbg-purple-950);
}

/* ==========================================================================
   Error page and muted text
   ========================================================================== */

.fxbg-error-title {
    color: var(--fxbg-purple-700);
}

.dark .fxbg-error-title {
    color: #e2e8f0;
}

/* Secondary copy that has to stay readable in both themes. */
.fxbg-muted {
    color: #64748b;
}

.dark .fxbg-muted {
    color: #9c93bb;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.fxbg-footer {
    border-top: 1px solid var(--fxbg-purple-100);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.dark .fxbg-footer {
    border-top-color: var(--fxbg-purple-700);
}

.fxbg-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.fxbg-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.fxbg-footer-legal {
    font-size: 0.75rem;
    color: #64748b;
}

.dark .fxbg-footer-legal {
    color: #9c93bb;
}

/* Inline links. Orange is reserved for hover so it never has to carry small
   text at rest (orange on white is only about 3.3:1). */
.fxbg-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--fxbg-purple-700);
    transition: color 0.15s ease-in-out;
}

.fxbg-link:hover {
    color: var(--fxbg-orange-dark);
}

.dark .fxbg-link {
    color: var(--fxbg-purple-200);
}

.dark .fxbg-link:hover {
    color: var(--fxbg-orange);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Visible keyboard focus in brand orange, everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--fxbg-orange);
    outline-offset: 2px;
    border-radius: 0.25rem;
}