/*
 * Styling for the multi-color palette icon (Palette / Color field types)
 * across the Craft control panel. Loaded CP-wide via CpIconAsset.
 *
 * Sections:
 *   1. Color restoration. Craft's .cp-icon rules force `fill: var(--icon-color)`
 *      and `stroke-width: 0` on every shape, flattening the icon to a dark blob.
 *      Targeting the SVG's #palettesFieldIcon id lets these rules outrank Craft's
 *      higher-specificity context rules (e.g. `body .selectize-dropdown .selected
 *      svg path`), which a class- or attribute-scoped selector would lose to.
 *   2. Opt-in `.palette-icon-muted` / `.palette-icon-reveal` variants for use in
 *      this plugin's own CP templates.
 *   3. The field-type menu (Garnish disclosure menu): greyed items that reveal
 *      color on hover or selection.
 *   4. The Settings > Content > Palettes nav icon hover animation. Scoped to the
 *      nav link, so it is inert on every other CP page.
 *   5. The global "Paletten" sidebar nav item: greyed icon that reveals color on
 *      hover or when active.
 *   6. The Settings > Plugins tile: colour -> grey -> colour ripple on hover
 *      (separate icon file + keyframe; intentionally not DRY).
 */

/* --- 1. Color restoration (field-type dropdown, layout designer, etc.) --- */

#palettesFieldIcon path[fill="#ff52ce" i] { fill: #ff52ce; }
#palettesFieldIcon path[fill="#429bff" i] { fill: #429bff; }
#palettesFieldIcon path[fill="#00cf2d" i] { fill: #00cf2d; }
#palettesFieldIcon path[fill="#fff536" i] { fill: #fff536; }
#palettesFieldIcon path[fill="#ef0000" i] { fill: #ef0000; }
#palettesFieldIcon path[fill="#383027" i] { fill: #383027; }
#palettesFieldIcon path[fill="#5100cc" i] { fill: #5100cc; }

/* Restore the currentColor outline that Craft fills solid and zeroes out.
 * Width is driven by --palette-icon-stroke so any context can retune it with a
 * single declaration. The default suits the small "compact" renders the icon
 * gets everywhere it appears (field-type chip + menu, global nav item). */
#palettesFieldIcon {
    --palette-icon-stroke: 12px;
}

#palettesFieldIcon path[stroke="currentColor"] {
    fill: none;
    stroke-width: var(--palette-icon-stroke);
}

/* Field-type menu: pin the outline dark. The menu's hover state flips the item
 * text color (and thus currentColor) to white on a grey background, which would
 * otherwise turn the outline white. */
.menu li > .menu-item span.icon #palettesFieldIcon path[stroke="currentColor"] {
    stroke: #353535;
}

/* Emphasise the active (hovered / keyboard / selected) menu item with a thicker
 * outline, by bumping the variable for that item only. */
.menu li > .menu-item:hover span.icon #palettesFieldIcon,
.menu li > .menu-item.hover span.icon #palettesFieldIcon,
.menu li > .menu-item.sel span.icon #palettesFieldIcon {
    --palette-icon-stroke: 14px;
}

/* --- Shared reveal animation --------------------------------------------- *
 * Per-path transition + clockwise stagger, defined once so every id-based
 * reveal context (the .palette-icon-reveal class, the field-type menu, the
 * sidebar nav) animates identically. transition-delay is inert until a context
 * toggles grayscale/opacity on hover or selection. The settings-index tile
 * (section 4) can't share this: Craft renders that icon with namespace=true,
 * which mangles the id, so it keeps its own copy. */
#palettesFieldIcon path {
    transition: filter 0.2s ease, opacity 0.2s ease;
}

#palettesFieldIcon path:nth-child(5) { transition-delay: 0s; }
#palettesFieldIcon path:nth-child(4) { transition-delay: 0.06s; }
#palettesFieldIcon path:nth-child(3) { transition-delay: 0.12s; }
#palettesFieldIcon path:nth-child(2) { transition-delay: 0.18s; }
#palettesFieldIcon path:nth-child(7) { transition-delay: 0.24s; }
#palettesFieldIcon path:nth-child(1) { transition-delay: 0.30s; }
#palettesFieldIcon path:nth-child(6) { transition-delay: 0.1s; }

/* --- 2. Opt-in variants --------------------------------------------------- *
 * Add a class to any ancestor of the icon to opt into a treatment in your own
 * CP templates. grayscale() desaturates the restored fills, so no per-color
 * rules are needed; the currentColor outline is left untouched.
 *   .palette-icon-muted  -> static greyed-out
 *   .palette-icon-reveal -> greyed-out, colors fade in on hover */

.palette-icon-muted #palettesFieldIcon path:not([stroke="currentColor"]) {
    filter: grayscale(100%);
    opacity: 0.5;
}

.palette-icon-reveal #palettesFieldIcon path:not([stroke="currentColor"]) {
    filter: grayscale(100%);
    opacity: 0.5;
}

.palette-icon-reveal:hover #palettesFieldIcon path:not([stroke="currentColor"]) {
    filter: grayscale(0%);
    opacity: 1;
}

/* --- 3. Field-type menu: greyed items, colors reveal on hover/selection --- *
 * Craft's field-type picker is a Garnish disclosure menu (.menu > li >
 * .menu-item > span.icon), not selectize. We can't add a class to that markup,
 * so target the menu context directly, scoped to #palettesFieldIcon so it only
 * ever affects our icon. .hover is the keyboard-navigation equivalent of
 * :hover; .sel keeps the currently-selected type in full color. */

.menu li > .menu-item span.icon #palettesFieldIcon path:not([stroke="currentColor"]) {
    filter: grayscale(100%);
    opacity: 0.5;
}

.menu li > .menu-item:hover span.icon #palettesFieldIcon path:not([stroke="currentColor"]),
.menu li > .menu-item.hover span.icon #palettesFieldIcon path:not([stroke="currentColor"]),
.menu li > .menu-item.sel span.icon #palettesFieldIcon path:not([stroke="currentColor"]) {
    filter: grayscale(0%);
    opacity: 1;
}

/* --- 4. Settings nav icon: greyed by default, colors sweep in on hover --- */

a[href*="settings/palettes"] .icon svg path:not(:last-child) {
    filter: grayscale(100%);
    opacity: 0.5;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

a[href*="settings/palettes"]:hover .icon svg path:not(:last-child) {
    filter: grayscale(0%);
    opacity: 1;
}

/* Clockwise sweep from the top: red -> yellow -> green -> blue -> purple -> pink -> center */
a[href*="settings/palettes"]:hover .icon svg path:nth-child(5) { transition-delay: 0s; }
a[href*="settings/palettes"]:hover .icon svg path:nth-child(4) { transition-delay: 0.06s; }
a[href*="settings/palettes"]:hover .icon svg path:nth-child(3) { transition-delay: 0.12s; }
a[href*="settings/palettes"]:hover .icon svg path:nth-child(2) { transition-delay: 0.18s; }
a[href*="settings/palettes"]:hover .icon svg path:nth-child(7) { transition-delay: 0.24s; }
a[href*="settings/palettes"]:hover .icon svg path:nth-child(1) { transition-delay: 0.30s; }
a[href*="settings/palettes"]:hover .icon svg path:nth-child(6) { transition-delay: 0.1s; }

/* --- 5. Global "Paletten" sidebar nav item ------------------------------- *
 * Same greyed-by-default / reveal treatment as the field-type menu. Reveals on
 * hover and stays in full color while the item is active (.sel). The sidebar's
 * hover/active states keep dark text, so the currentColor outline needs no pin. */

.sidebar-action .nav-icon #palettesFieldIcon path:not([stroke="currentColor"]) {
    filter: grayscale(100%);
    opacity: 0.5;
}

.sidebar-action:hover .nav-icon #palettesFieldIcon path:not([stroke="currentColor"]),
.sidebar-action.sel .nav-icon #palettesFieldIcon path:not([stroke="currentColor"]) {
    filter: grayscale(0%);
    opacity: 1;
}

/* Narrow the wrapper from the default 1.25rem to 1rem, sidebar only. :has()
 * keeps this scoped to our icon so other sidebar nav icons are unaffected. */
.sidebar-action .nav-icon:has(#palettesFieldIcon) {
    width: 1rem;
}

/* --- 6. Plugins settings tile: colour -> grey -> colour ripple on hover --- *
 * The Settings > Plugins tile (Cp::settings url 'settings/plugins/<id>') uses
 * src/icon.svg, a different file with no id that Craft namespaces, so it can't
 * reuse anything above; it's targeted structurally via its settings link. The
 * cycle returns to its start, which a one-way transition can't express, so it
 * runs a keyframe with a staggered delay per path for the circular ripple.
 * Delays live on the paths (not :hover) and hover only sets animation-name, so
 * the `animation` longhand never resets the stagger. Intentionally not DRY. */

@keyframes palette-icon-ripple {
    0%, 100% { filter: grayscale(0); opacity: 1; }
    50% { filter: grayscale(100%); opacity: 0.45; }
}

/* Tunable knobs, all in one place:
 *   --ripple-duration  how long one segment's colour -> grey -> colour pulse takes
 *   --ripple-step      gap between consecutive segments in the clockwise sweep
 *   --ripple-ease      shapes each pulse so it accelerates in and eases out
 *                      (slow -> fast -> slow) instead of running linearly
 * Set on the <g> so the path rules below inherit them. */
.icons a[href*="settings/plugins/palettes"] .icon svg g {
    --ripple-duration: 1s;
    --ripple-step: 0.1s;
    --ripple-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/* The colored venn shapes live inside <g mask=...>; the rounded-square gradient
 * background and the overlay are separate direct children of <svg> we leave
 * alone, so target `svg g path`. That group's 7 paths are in the same order as
 * settings.svg, so the nav sweep's clockwise stagger maps 1:1. The settings link
 * carries a ?site= query, so match with *= (contains), not $= (ends-with). */
.icons a[href*="settings/plugins/palettes"] .icon svg g path {
    animation-duration: var(--ripple-duration);
    animation-timing-function: var(--ripple-ease);
    animation-iteration-count: infinite;
}

/* Clockwise: red -> yellow -> green -> blue -> purple -> pink -> center.
 * Each delay is step x position, so retiming the whole sweep is one var change. */
.icons a[href*="settings/plugins/palettes"] .icon svg g path:nth-child(5) { animation-delay: calc(var(--ripple-step) * 0); }
.icons a[href*="settings/plugins/palettes"] .icon svg g path:nth-child(4) { animation-delay: calc(var(--ripple-step) * 1); }
.icons a[href*="settings/plugins/palettes"] .icon svg g path:nth-child(3) { animation-delay: calc(var(--ripple-step) * 2); }
.icons a[href*="settings/plugins/palettes"] .icon svg g path:nth-child(2) { animation-delay: calc(var(--ripple-step) * 3); }
.icons a[href*="settings/plugins/palettes"] .icon svg g path:nth-child(7) { animation-delay: calc(var(--ripple-step) * 4); }
.icons a[href*="settings/plugins/palettes"] .icon svg g path:nth-child(1) { animation-delay: calc(var(--ripple-step) * 5); }
.icons a[href*="settings/plugins/palettes"] .icon svg g path:nth-child(6) { animation-delay: calc(var(--ripple-step) * 1.5); }

.icons a[href*="settings/plugins/palettes"]:hover .icon svg g path {
    animation-name: palette-icon-ripple;
}

/* Reusable hover/focus tooltip: a trigger (.palettes-tip) reveals a .palettes-tip__bubble.
   The dark bubble mirrors stimmtdigital/craft-base (deploy badge tips), reimplemented DRY
   and scoped to this plugin. Used by the field status hint (templates/_standard-hint.twig)
   and the overview path cells (ColorDefaultsController). */
.palettes-tip {
    position: relative;
}

.palettes-tip__bubble {
    display: none;
    position: absolute;
    z-index: 100;
    width: max-content;
    max-width: 320px;
    padding: 7px 10px;
    border-radius: 6px;
    background: oklch(20.5% 0 0);
    color: oklch(98.5% 0 0);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    text-align: left;
    pointer-events: none;
}

.palettes-tip__bubble::after {
    content: "";
    position: absolute;
    border: 4.5px solid transparent;
}

.palettes-tip:hover .palettes-tip__bubble,
.palettes-tip:focus .palettes-tip__bubble,
.palettes-tip:focus-within .palettes-tip__bubble {
    display: block;
}

/* Monospace, breakable variant for raw structural paths. */
.palettes-tip__bubble--code {
    font-family: monospace;
    font-weight: 400;
    word-break: break-all;
}

/* List of detail lines inside a tooltip (e.g. which colors diverged from the standard). */
.palettes-tip__list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-weight: 400;
}

.palettes-tip__list > li {
    position: relative;
    margin-top: 5px;
    padding-left: 14px;
}

/* Custom bullet on the breadcrumb row: Craft's CP resets list markers, so draw our own (and
   color it, since the default would be dark-on-dark inside the tooltip). */
.palettes-tip__list > li::before {
    content: "\2022";
    position: absolute;
    left: 2px;
    color: oklch(70.8% 0 0);
}

/* The change ("Blauw (standaard) -> Geen") nested under its breadcrumb, no own bullet. */
.palettes-tip__sublist {
    margin: 1px 0 0;
    padding: 0;
    list-style: none;
    color: oklch(82% 0 0);
}

/* Positions */
.palettes-tip__bubble--top {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.palettes-tip__bubble--top::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: oklch(20.5% 0 0);
}

.palettes-tip__bubble--bottom {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.palettes-tip__bubble--bottom::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: oklch(20.5% 0 0);
}

.palettes-tip__bubble--right {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

.palettes-tip__bubble--right::after {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: oklch(20.5% 0 0);
}

/* --- Field status hint icon (Color + Palette fields, via _standard-hint.twig) ------- *
 * The icon is a .palettes-tip trigger; its dark tooltip uses the rules above. */

/* Fallback spacing if the hint cannot be relocated into the heading (e.g. a Matrix block
   added after page load); normally the script moves the icon next to the label. */
.palettes-hint-row {
    margin: 6px 0;
}

.palettes-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border-radius: 50%;
    cursor: help;
    outline: none;
}

/* When relocated next to the field heading label. */
.heading > .palettes-hint {
    margin-left: 1px;
}

/* Both icons ship in the markup; CSS shows the one matching the state modifier. */
.palettes-hint__icon {
    display: none;
    align-items: center;
    justify-content: center;
}

.palettes-hint--following .palettes-hint__icon--following,
.palettes-hint--diverged .palettes-hint__icon--diverged {
    display: inline-flex;
}

/* Quiet badge: present in the DOM (the lock guard anchors on data-palettes-locked) but
   invisible, for users who cannot change the color anyway. Set after the state rules so it
   wins the display. */
.palettes-hint--quiet {
    display: none;
}

.palettes-hint svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
}

/* Embolden the check: FA icons are filled paths (no stroke), so add a stroke matching
   the fill to thicken the glyph. Width is in the icon's viewBox units (~0 0 448 512). */
.palettes-hint--following svg path {
    stroke: currentColor;
    stroke-width: 20px;
    stroke-linejoin: round;
}

.palettes-hint--following {
    color: var(--green-500);
}

.palettes-hint--diverged {
    color: #d07a12;
}

.palettes-hint:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* --- Overview "Per type" cells ------------------------------------------------------ */

/* The entry type shown beneath the standard's label as muted context. */
.palettes-standard__type {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: var(--light-text-color);
}

/* Human breadcrumb: truncated to one line; the raw path is in the hover tooltip. */
.palettes-path {
    display: inline-block;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    cursor: help;
}

/* Chevron between breadcrumb labels. */
.palettes-crumb-sep {
    display: inline-flex;
    align-items: center;
    margin: 0 4px;
    color: var(--light-text-color);
    vertical-align: middle;
}

.palettes-crumb-sep svg {
    width: 9px;
    height: 9px;
    fill: currentColor;
}

/* --- Title chip (templates/_standard-title.twig) ------------------------------------ *
 * A brand-blue pill marking the template page of a type's standard, relocated by the script
 * into the CP page heading so it sits beside the entry title. The source wrapper is never
 * shown; the chip becomes visible only once moved into #page-heading. */

.palettes-title-row {
    display: none;
}

#page-heading .palettes-title-standard {
    display: inline-flex;
    align-items: center;
    margin-left: 0.6em;
    padding: 4px 12px;
    border-radius: 999px;
    border: 2px solid #bcdcef;
    background: #e7f1f8;
    color: #1e77a8;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
    outline: none;
}

.palettes-title-standard:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* The tooltip opens upward (--top) to stay in the header band; a downward bubble is painted
   over by the tabs/content card below. Lift it above any header siblings (breadcrumb, toolbar). */
#page-heading .palettes-title-standard .palettes-tip__bubble {
    z-index: 1001;
}

/* --- Entries index "Template" column badge (Plugin::registerTemplateBadge) --------- *
 * Marks the one entry each type's standard was captured from. Same brand-blue pill as the
 * title chip, sized down for a table cell. */
.palettes-template-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    border: 2px solid #bcdcef;
    background: #e7f1f8;
    color: #1e77a8;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* --- Standard-analysis panel (templates/_palette-input.twig) ------------------------- *
 * Collapsed details block under the Palette field. One row per stored default; the
 * 'missing' rows are the point: defaults whose structure is absent on this page. */

.palettes-audit {
    margin-top: 16px;
}

.palettes-audit > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--medium-text-color, #596673);
}

.palettes-audit__outlines {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0;
    cursor: pointer;
}

.palettes-audit__table {
    margin-top: 4px;
}

.palettes-audit__status {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.palettes-audit__status--match {
    background: #e2f5e9;
    color: #00743a;
}

.palettes-audit__status--inherit {
    background: #eef1f4;
    color: #596673;
}

.palettes-audit__status--override {
    background: #fdf0dd;
    color: #a35f0c;
}

.palettes-audit__status--missing {
    background: #fbe5e9;
    color: #b3244a;
}

/* Tint the whole row for the invisible failure, so it cannot be scanned past. */
.palettes-audit__row--missing > td {
    background: #fdf3f5;
}

/* --- Outline mode (audit panel toggle) ----------------------------------------------- *
 * Marks every Color field on the page by its standard badge: green follows, orange
 * deviates. The badge sits directly inside the field's .heading, so the child combinator
 * keeps ancestor container fields (Matrix, Hyper) from lighting up too. Structures the
 * standard cannot reach do not exist in the DOM; those live in the panel's missing rows. */

.palettes-audit-outlines .field:has(> .heading > .palettes-hint--following) {
    outline: 2px solid #008c46;
    outline-offset: 3px;
    border-radius: 3px;
}

.palettes-audit-outlines .field:has(> .heading > .palettes-hint--diverged) {
    outline: 2px solid #d07a12;
    outline-offset: 3px;
    border-radius: 3px;
}