/*
 * Global platform mark treatment.
 *
 * The uploaded/default favicon remains the single source of truth for the logo
 * shape.  We only normalise its colour at render time so future logo uploads do
 * not need separate light/dark bitmap files.
 */
.platform-logo-surface {
    background-color: transparent !important;
    transition: background-color 180ms ease;
}

img.platform-logo {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: brightness(0) saturate(100%);
    transition: filter 180ms ease;
}

/* Background-image based previews/login marks cannot be filtered separately
 * from their tile, so render the mark on a dedicated pseudo element. */
.platform-logo-bg {
    position: relative !important;
    background-color: transparent !important;
    background-image: none !important;
    transition: background-color 180ms ease;
}

.platform-logo-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: url("/favicon.ico?rev=20260906v1") no-repeat center / contain;
    filter: brightness(0) saturate(100%);
    pointer-events: none;
    transition: filter 180ms ease;
}

:root[data-theme="dark"] .platform-logo-surface,
:root[data-theme="dark"] .platform-logo-bg {
    background-color: #000000 !important;
}

/* Some compact avatar slots are the image element itself rather than a
 * separate tile.  Give default-logo avatars the same black dark surface. */
:root[data-theme="dark"] img.platform-logo.platform-logo-surface {
    background-color: #000000 !important;
}

:root[data-theme="dark"] img.platform-logo,
:root[data-theme="dark"] .platform-logo-bg::before {
    filter: brightness(0) saturate(100%) invert(1);
}

/* Keep the dashboard avatar's elevation on its wrapper.  Applying a CSS filter
 * to an image would otherwise recolour the image's border and shadow as well. */
.dash-profile__avatar-wrap.platform-logo-surface {
    border-radius: 20px;
    box-shadow: 0 0 0 4px var(--md-surface), var(--md-e4);
}

/* In dark mode the logo tile and its outer ring are both intentionally black. */
:root[data-theme="dark"] .dash-profile__avatar-wrap.platform-logo-surface {
    box-shadow: 0 0 0 4px #000000, var(--md-e4);
}

/* The admin header avatar rules also use !important and an ID selector. */
:root[data-theme] #kt_header .symbol.platform-logo-surface > img.platform-logo,
:root[data-theme] #kt_header .symbol.platform-logo-surface:hover > img.platform-logo {
    border: 0 !important;
    box-shadow: none !important;
}