/* Copilhost: interface touch-ups for the file explorer (Filestash).
 *
 * Loaded into the page by the router, next to fileedit.js (see the caddy-waf Caddyfile).
 * NOT a fork: presentation only, laid on top. If Filestash changes its class names in an
 * upgrade, the worst that can happen is that these rules stop applying and the interface
 * goes back to its original look. Nothing breaks.
 *
 * Two requests from Alexis, 2026-08-08, on discovering the explorer in real conditions.
 */

/* 1. The "Tags" block of the sidebar.
 *
 * It is a Filestash labeling feature that means nothing for us: our customers browse the
 * files of a WordPress site, and the list stays empty ("∅").
 * A permanent block that never shows anything raises a question nobody has an answer to,
 * so it goes. The selector targets the `data-bind` attribute, a more stable contract than a
 * style class. */
[data-bind="your-tags"] {
    display: none !important;
}

/* 2. The editor's save button.
 *
 * By default: a dark gray 63 px circle bearing a floppy disk, at the bottom right, which only
 * appears once the file has been modified. On the dark editor background it is barely noticed,
 * whereas it is THE action that validates the work. We turn it into a Copanel primary button
 * (brand blue, brand-500) with its label written out: an icon alone has to be guessed.
 *
 * We do not touch its display logic: Filestash keeps hiding it (`.hidden`) as long as nothing
 * has changed, and that is the right behavior.
 *
 * ⚠️ THE `:not(.hidden)` IS NOT DECORATIVE, it fixes a bug paid for on 2026-08-08. In Filestash,
 * `.hidden` does NOT do `display: none`: it is the accessibility technique
 * `position: absolute; left: -10000px; width: 1px; height: 1px`, which therefore relies on the
 * DIMENSIONS to tuck the element away. An unconditional `width: auto !important` overrides them
 * (both are `!important`, but `button.component_fab` is more specific than `.hidden`): the button
 * keeps its `left: -10000px` AND receives our `right: 26px`, so it stretches from one to the other.
 * Measured: 11,254 px wide, that is a blue bar across the bottom of the screen on load, which
 * disappeared at the first keystroke. General rule for this whole file: never force a
 * dimension on an element that the application hides through geometry. */
button.component_fab:not(.hidden) {
    width: auto !important;
    height: auto !important;
    padding: 11px 20px 11px 16px !important;
    background: #3b82f6 !important;
    border-radius: 9999px !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    right: 26px !important;
    bottom: 26px !important;
    /* No `transition` on the background, deliberately. Filestash already sets an appearance
     * animation (opacity + slide) on this button; adding a color transition to it makes its
     * tint depend on an animation that starts from the original `transparent`. Until it has
     * converged, the button is a ghost: that is what the measurement showed in a browser whose
     * rendering was paused (background read as `rgba(0,0,0,0)` despite the `!important`
     * rule, a running animation winning over any author declaration).
     * With no transition, the color is the rule's, right away and always. */
}

button.component_fab:not(.hidden):hover {
    background: #2563eb !important;
}

/* The original icon is a SOLID floppy disk in the style of the 2000s (a 438 px SVG `<img>`,
 * opaque white body and cutouts): recolored white it becomes a slab, and next to a modern label
 * it clashes. We replace it with the "save" icon of lucide, the Copanel's library, hence the
 * same stroke as the rest of the customer interface.
 *
 * Technique: the original image is hidden, and the path is laid as a `mask` on its container,
 * filled with white. A mask keeps only the SHAPE of the SVG and takes the background color: we
 * therefore have no fixed color to fight, and the icon will always follow the button's.
 *
 * The `padding: 13px` that Filestash sets on `.content` gave the original circle its size;
 * here it added 26 px of height to the button (69 px measured instead of 43). */
button.component_fab .content img {
    display: none !important;
}

/* Same precaution as above: Filestash hides the container with `.content:empty { display: none }`
 * as long as the editor has not put its icon in it. An unconditional `display: flex !important`
 * would light up a white 19 px square on load. Hence the `:not(:empty)`. */
button.component_fab:not(.hidden) .content:not(:empty) {
    display: flex !important;
    width: 19px !important;
    height: 19px !important;
    padding: 0 !important;
    background-color: #fff !important;
    -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z%22/%3E%3Cpath d=%22M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7%22/%3E%3Cpath d=%22M7 3v4a1 1 0 0 0 1 1h7%22/%3E%3C/svg%3E') center / contain no-repeat !important;
    mask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z%22/%3E%3Cpath d=%22M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7%22/%3E%3Cpath d=%22M7 3v4a1 1 0 0 0 1 1h7%22/%3E%3C/svg%3E') center / contain no-repeat !important;
}

button.component_fab:not(.hidden)::after {
    content: "Enregistrer";
    color: #fff;
    font: 600 15px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    white-space: nowrap;
}