/* =========================================================
   ANM Enterprise Tracker - Design System (Material Design 3)
   Design tokens + stili componenti. Nessun framework, solo CSS.
   ========================================================= */

/* ----------------- Design tokens (tema chiaro) ----------------- */
:root {
    color-scheme: light;

    /* Palette MD3 */
    --md-primary: #0b57d0;
    --md-primary-hover: #0842a0;
    --md-on-primary: #ffffff;
    --md-primary-container: #d3e3fd;
    --md-primary-container-hover: #c2dbfc;
    --md-on-primary-container: #041e49;
    --md-primary-border: #b3ccf5;
    --md-primary-soft: #e8f0fe;

    --md-success: #1a7f37;
    --md-error: #b3261e;
    --md-error-hover: #8c1d18;

    --md-bg: #f8f9fa;
    --md-surface: rgba(255, 255, 255, 0.96);
    --md-surface-card: #ffffff;
    --md-surface-variant: #f0f4f8;
    --md-surface-dim: #f1f3f4;
    --md-on-surface: #1f1f1f;
    --md-on-surface-variant: #44474f;
    --md-on-surface-muted: #74777f;
    --md-outline: #74777f;
    --md-outline-variant: #c4c6d0;
    --md-divider: #e1e2ec;
    --md-panel-border: rgba(255, 255, 255, 0.6);
    --md-map-bg: #e0e0e0;

    /* Radius */
    --md-radius-s: 8px;
    --md-radius-m: 12px;
    --md-radius-l: 16px;
    --md-radius-xl: 24px;

    /* Ombre */
    --md-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.08);
    --md-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);
    --md-shadow-3: 0 8px 32px rgba(0, 0, 0, 0.12);
    --md-shadow-sheet: 0 -4px 24px rgba(0, 0, 0, 0.2);

    /* Spaziature */
    --md-space-xs: 4px;
    --md-space-s: 8px;
    --md-space-m: 12px;
    --md-space-l: 16px;
    --md-space-xl: 20px;

    /* Motion (curva "emphasized" MD3 gia' in uso nel progetto) */
    --md-motion: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Touch target minimo MD3 */
    --md-touch-target: 48px;

    --md-focus-ring: 0 0 0 2px rgba(11, 87, 208, 0.2);
}

/* ----------------- Design tokens (tema scuro) -----------------
   Applicati sia via preferenza di sistema (finche' JS non ha ancora
   risolto il tema) sia via attributo data-theme gestito da theme.js. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --md-primary: #a8c7fa;
        --md-primary-hover: #c2dbfc;
        --md-on-primary: #062e6f;
        --md-primary-container: #0842a0;
        --md-primary-container-hover: #0b57d0;
        --md-on-primary-container: #d3e3fd;
        --md-primary-border: #274777;
        --md-primary-soft: #1d2c42;

        --md-success: #6dd58c;
        --md-error: #f2b8b5;
        --md-error-hover: #f9dedc;

        --md-bg: #131314;
        --md-surface: rgba(29, 31, 33, 0.96);
        --md-surface-card: #232527;
        --md-surface-variant: #1c2430;
        --md-surface-dim: #2a2c2e;
        --md-on-surface: #e3e3e3;
        --md-on-surface-variant: #c4c7c5;
        --md-on-surface-muted: #9aa0a6;
        --md-outline: #8e918f;
        --md-outline-variant: #444746;
        --md-divider: #3c4043;
        --md-panel-border: rgba(255, 255, 255, 0.08);
        --md-map-bg: #1b1b1d;

        --md-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.4);
        --md-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4);
        --md-shadow-3: 0 8px 32px rgba(0, 0, 0, 0.55);
        --md-shadow-sheet: 0 -4px 24px rgba(0, 0, 0, 0.6);

        --md-focus-ring: 0 0 0 2px rgba(168, 199, 250, 0.3);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --md-primary: #a8c7fa;
    --md-primary-hover: #c2dbfc;
    --md-on-primary: #062e6f;
    --md-primary-container: #0842a0;
    --md-primary-container-hover: #0b57d0;
    --md-on-primary-container: #d3e3fd;
    --md-primary-border: #274777;
    --md-primary-soft: #1d2c42;

    --md-success: #6dd58c;
    --md-error: #f2b8b5;
    --md-error-hover: #f9dedc;

    --md-bg: #131314;
    --md-surface: rgba(29, 31, 33, 0.96);
    --md-surface-card: #232527;
    --md-surface-variant: #1c2430;
    --md-surface-dim: #2a2c2e;
    --md-on-surface: #e3e3e3;
    --md-on-surface-variant: #c4c7c5;
    --md-on-surface-muted: #9aa0a6;
    --md-outline: #8e918f;
    --md-outline-variant: #444746;
    --md-divider: #3c4043;
    --md-panel-border: rgba(255, 255, 255, 0.08);
    --md-map-bg: #1b1b1d;

    --md-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.4);
    --md-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4);
    --md-shadow-3: 0 8px 32px rgba(0, 0, 0, 0.55);
    --md-shadow-sheet: 0 -4px 24px rgba(0, 0, 0, 0.6);

    --md-focus-ring: 0 0 0 2px rgba(168, 199, 250, 0.3);
}

/* ----------------- Base ----------------- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background-color: var(--md-bg);
    color: var(--md-on-surface);
    display: flex;
    height: 100vh;
    height: 100dvh; /* esclude la barra degli indirizzi dei browser mobili */
    width: 100vw;
    overflow: hidden;
}

#map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: var(--md-map-bg); }

/* ----------------- Pannello principale ----------------- */
.m3-panel {
    position: absolute; top: 16px; left: 16px; width: 400px; max-height: calc(100vh - 32px);
    background: var(--md-surface);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: var(--md-radius-xl);
    box-shadow: var(--md-shadow-3);
    border: 1px solid var(--md-panel-border);
    z-index: 1000; display: flex; flex-direction: column; padding: 20px;
    transition: max-height 0.3s var(--md-motion), height 0.3s var(--md-motion), transform 0.3s var(--md-motion);
}

.sheet-grab { flex-shrink: 0; touch-action: none; }

.drag-handle { display: none; } /* Nascosto su desktop */
.board-back { display: none; } /* Solo su telefono: su desktop il modulo di ricerca resta visibile */

.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

.m3-title { font-size: 1.4rem; font-weight: 500; color: var(--md-primary); display: flex; align-items: center; gap: 10px; cursor: pointer; }

/* ----------------- Box di routing e input ----------------- */
.routing-box {
    background: var(--md-surface-variant);
    border-radius: var(--md-radius-l);
    padding: 12px; margin-bottom: 16px;
    border: 1px solid var(--md-primary-border);
    flex-shrink: 0;
}

.origin-dest-wrap { position: relative; }
.input-group { display: flex; align-items: center; margin-bottom: 8px; position: relative; }
.input-group:last-child { margin-bottom: 0; }

/* Bottone di scambio partenza/destinazione: ancorato sul bordo destro, a
   cavallo fra le due righe (stesso pattern di Google Maps) — a sinistra
   ci sono gia' le icone trip_origin/location_on, a destra i bottoni
   GPS/reset di ciascuna riga, quindi l'angolo in alto a destra e' l'unico
   punto libero senza sovrapporsi a nulla. */
.btn-swap {
    position: absolute; top: 28px; right: -4px;
    background: var(--md-surface-card);
    border: 1px solid var(--md-outline);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    min-width: 36px; min-height: 36px; padding: 6px;
    z-index: 1;
}
.btn-swap:hover { background: var(--md-primary-container); }
.input-icon { color: var(--md-on-surface-variant); margin-right: 8px; font-size: 20px; }
.input-icon.dest-icon { color: var(--md-success); }
.input-icon.schedule-icon { color: var(--md-on-surface-muted); }

.m3-input {
    flex-grow: 1; min-width: 0; padding: 10px 14px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-radius-s);
    font-size: 0.95rem; font-family: inherit; outline: none;
    background: var(--md-surface-card); color: var(--md-on-surface);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.m3-input::placeholder { color: var(--md-on-surface-muted); }
.m3-input:focus { border-color: var(--md-primary); box-shadow: var(--md-focus-ring); }
.m3-input.compact { padding: 8px 10px; }

/* Touch target 48px (standard MD3) */
.btn-icon {
    background: none; border: none; color: var(--md-primary); cursor: pointer;
    min-width: var(--md-touch-target); min-height: var(--md-touch-target);
    padding: 8px; border-radius: 50%;
    transition: background-color 0.2s;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.btn-icon:hover { background: var(--md-primary-container); }
.btn-icon:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }

.checkbox-label { font-size: 0.85rem; color: var(--md-on-surface-variant); cursor: pointer; user-select: none; font-weight: 500; }
.m3-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: var(--md-primary); }

.planning-row { gap: 8px; margin-top: 8px; display: none; }
.planning-row.visible { display: flex; }
.planning-toggle-row { margin-top: 10px; padding-left: 4px; gap: 8px; }

/* ----------------- Autocomplete dropdown ----------------- */
.autocomplete-list {
    position: absolute; top: calc(100% + 4px); left: 28px; right: 0;
    background: var(--md-surface-card);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-radius-m);
    box-shadow: var(--md-shadow-2);
    z-index: 1200;
    max-height: 260px; overflow-y: auto;
    animation: acReveal 0.18s var(--md-motion);
}
.autocomplete-list[hidden] { display: none; }
@keyframes acReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.autocomplete-option { padding: 10px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.autocomplete-option + .autocomplete-option { border-top: 1px solid var(--md-divider); }
.autocomplete-option:hover, .autocomplete-option.active { background: var(--md-primary-soft); }
.autocomplete-option .ac-name-row { display: flex; align-items: center; gap: 6px; }
.autocomplete-option .ac-mode-icon { font-size: 18px; flex-shrink: 0; }
.autocomplete-option .ac-name { font-size: 0.92rem; font-weight: 500; color: var(--md-on-surface); }
.autocomplete-option .ac-meta { font-size: 0.78rem; color: var(--md-on-surface-muted); }
.autocomplete-empty { padding: 10px 14px; font-size: 0.85rem; color: var(--md-on-surface-muted); cursor: default; }

/* ----------------- Contenitore risultati ----------------- */
#results-container { flex-grow: 1; overflow-y: auto; padding-right: 4px; }
#results-container::-webkit-scrollbar { width: 6px; }
#results-container::-webkit-scrollbar-thumb { background: var(--md-outline-variant); border-radius: 4px; }

.results-placeholder { text-align: center; color: var(--md-on-surface-variant); font-size: 0.9rem; padding: 20px; }
.results-placeholder .material-icons { font-size: 3rem; color: var(--md-outline-variant); display: block; margin-bottom: 10px; }
.results-placeholder .material-icons.ok { color: var(--md-success); }
.results-error { color: var(--md-error); padding: 10px; text-align: center; }

.m3-card {
    background: var(--md-surface-card);
    border-radius: var(--md-radius-m);
    padding: 16px; margin-bottom: 12px;
    border: 1px solid var(--md-outline-variant);
    cursor: pointer;
    transition: transform 0.2s var(--md-motion), box-shadow 0.2s, border-color 0.2s;
    animation: cardReveal 0.25s var(--md-motion);
}
@keyframes cardReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.m3-card:hover { transform: translateY(-2px); box-shadow: var(--md-shadow-2); border-color: var(--md-primary); }
.m3-card h4 { font-size: 1rem; font-weight: 500; color: var(--md-on-surface); margin-bottom: 4px; }
.m3-card h4.accent { color: var(--md-primary); }
.m3-card .card-line { font-size: 0.85rem; margin-top: 4px; }
.m3-card .card-duration { font-size: 0.85rem; color: var(--md-success); font-weight: 500; }
.m3-card .card-steps { margin-top: 12px; font-size: 0.85rem; color: var(--md-on-surface-variant); }
.m3-card .card-steps p { margin-bottom: 4px; }
.m3-card .card-steps p.bus-step { padding-left: 10px; border-left: 3px solid var(--md-primary); }
.m3-card.error-card { border-left: 5px solid var(--md-error); }
.m3-card.stop-card { border-top: 4px solid var(--md-primary); }
.m3-card.stop-card h3 { color: var(--md-primary); font-size: 1.15rem; margin-bottom: 4px; }
.m3-card .stop-code { font-size: 0.85rem; color: var(--md-on-surface-variant); margin-bottom: 12px; }
.m3-card .lines-label { font-size: 0.9rem; font-weight: 500; margin-bottom: 6px; }
.m3-card .lines-wrap { margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 4px; }

.m3-badge {
    display: inline-flex; align-items: center;
    background: var(--md-primary-soft); color: var(--md-primary);
    padding: 4px 10px; border-radius: var(--md-radius-m);
    font-weight: 500; font-size: 0.8rem; margin-right: 4px; margin-top: 6px;
}
.m3-badge.muted { background: var(--md-surface-dim); color: var(--md-on-surface-muted); }
.m3-badge.strong { font-weight: bold; }

.m3-realtime { color: var(--md-success); font-weight: 500; font-size: 0.75rem; display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.m3-realtime::before { content: ''; display: inline-block; width: 6px; height: 6px; background-color: var(--md-success); border-radius: 50%; animation: m3Pulse 1.6s infinite; }
@keyframes m3Pulse { 0% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(0.8); opacity: 0.5; } }

.predictions-box { margin-top: 10px; border-top: 1px solid var(--md-divider); padding-top: 10px; }
.realtime-block { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--md-divider); }
.schedule-note { margin: 10px 0 2px; font-size: 0.8rem; color: var(--md-on-surface-muted); }
.schedule-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.schedule-dest { font-size: 0.8rem; color: var(--md-on-surface-muted); }

/* ----------------- Popup mappa ----------------- */
.popup-btn {
    background: var(--md-primary); color: var(--md-on-primary); border: none;
    padding: 8px 12px; border-radius: var(--md-radius-s); margin-top: 6px;
    cursor: pointer; font-size: 0.85rem; font-family: inherit; width: 100%;
    min-height: 40px;
    transition: background-color 0.2s, transform 0.15s var(--md-motion);
    display: flex; align-items: center; justify-content: center; gap: 4px;
}
.popup-btn:hover { background: var(--md-primary-hover); }
.popup-btn:active { transform: scale(0.98); }
.popup-btn.dest { background: var(--md-error); color: var(--md-surface-card); }
.popup-btn.dest:hover { background: var(--md-error-hover); }
.popup-btn.tonal { background: var(--md-primary-container); color: var(--md-on-primary-container); border: 1px solid var(--md-primary-border); }
.popup-btn.tonal:hover { background: var(--md-primary-container-hover); }

.popup-stop { text-align: center; min-width: 190px; padding: 4px; }
.popup-stop .popup-head { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 4px; }
.popup-stop .popup-head .material-icons { color: var(--md-primary); font-size: 18px; }
.popup-stop .popup-head b { font-size: 1.05em; color: var(--md-on-surface); }
.popup-stop .popup-code { font-size: 0.75rem; color: var(--md-on-surface-variant); margin-bottom: 6px; }
.popup-stop .popup-lines { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.popup-stop .popup-actions { display: flex; flex-direction: column; gap: 4px; }
.popup-stop .no-lines { font-size: 0.85rem; color: var(--md-on-surface-muted); }
.line-badge { display: inline-flex; align-items: center; background: var(--md-primary); color: #fff; font-weight: 700; border: 1px solid rgba(0, 0, 0, 0.25); padding: 2px 6px; border-radius: var(--md-radius-m); font-size: 0.8rem; }

/* Indicazione operatore (ANM/EAV): due reti indipendenti nello stesso
   sistema dal namespacing multi-feed (vedi gtfs-updater/refresh_gtfs.sql),
   badge volutamente discreto per non dominare visivamente. */
.operator-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 6px;
    vertical-align: middle;
    background: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
}
.operator-badge.eav { background: #fdecd2; color: #8a4b00; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .operator-badge.eav { background: #4a3416; color: #ffcc80; }
}
:root[data-theme="dark"] .operator-badge.eav { background: #4a3416; color: #ffcc80; }

/* Tema scuro per i popup Leaflet */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--md-surface-card); color: var(--md-on-surface); box-shadow: var(--md-shadow-2); }
.leaflet-popup-content-wrapper { border-radius: var(--md-radius-m); }
.leaflet-container a.leaflet-popup-close-button { color: var(--md-on-surface-muted); }
:root[data-theme="dark"] .leaflet-bar a { background: var(--md-surface-card); color: var(--md-on-surface); border-bottom-color: var(--md-divider); }
:root[data-theme="dark"] .leaflet-bar a:hover { background: var(--md-surface-dim); }
:root[data-theme="dark"] .marker-cluster-small, :root[data-theme="dark"] .marker-cluster-medium, :root[data-theme="dark"] .marker-cluster-large { background-color: rgba(168, 199, 250, 0.3); }
:root[data-theme="dark"] .marker-cluster-small div, :root[data-theme="dark"] .marker-cluster-medium div, :root[data-theme="dark"] .marker-cluster-large div { background-color: rgba(168, 199, 250, 0.75); color: #062e6f; }
:root[data-theme="dark"] .leaflet-control-attribution { background: rgba(19, 19, 20, 0.75); color: var(--md-on-surface-muted); }
:root[data-theme="dark"] .leaflet-control-attribution a { color: var(--md-primary); }

/* ----------------- Toast / Snackbar ----------------- */
#toast-container {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    z-index: 3000; display: flex; flex-direction: column; align-items: center; gap: 8px;
    pointer-events: none; width: max-content; max-width: calc(100vw - 32px);
}
.m3-toast {
    background: var(--md-on-surface); color: var(--md-bg);
    padding: 12px 20px; border-radius: var(--md-radius-s);
    box-shadow: var(--md-shadow-2); font-size: 0.9rem;
    display: flex; align-items: center; gap: 8px;
    animation: toastIn 0.25s var(--md-motion);
    pointer-events: auto; max-width: 100%;
}
.m3-toast .material-icons { font-size: 18px; }
.m3-toast.error .material-icons { color: #ffb4ab; }
.m3-toast.leaving { animation: toastOut 0.25s var(--md-motion) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(16px); } }

/* ----------------- Banner offline ----------------- */
#offline-banner {
    position: fixed; top: 0; left: 50%; transform: translate(-50%, 0);
    z-index: 3000;
    background: var(--md-error); color: #fff;
    padding: 8px 16px; border-radius: 0 0 var(--md-radius-m) var(--md-radius-m);
    font-size: 0.85rem; font-weight: 500;
    display: flex; align-items: center; gap: 8px;
    box-shadow: var(--md-shadow-2);
    transition: transform 0.3s var(--md-motion);
}
#offline-banner .material-icons { font-size: 18px; }
#offline-banner[hidden] { display: flex; transform: translate(-50%, -110%); }

/* =========================================================
   RESPONSIVE: Bottom Sheet a 3 stati con drag reale (mobile)
   ========================================================= */
@media (max-width: 768px) {
    body { flex-direction: column; }
    #map { height: 100vh; height: 100dvh; width: 100%; position: absolute; z-index: 1; }

    /* Sotto i 16px Safari su iPhone ingrandisce la pagina al focus */
    .m3-input { font-size: 16px; }
    .popup-stop .popup-lines { max-height: 54px; overflow-y: auto; }

    /* Tabellone Live: meta' schermo, senza modulo di ricerca e con gli arrivi prima delle linee */
    .m3-panel.board-open { height: 50vh; height: 50dvh; }
    .m3-panel.board-open .routing-box { display: none; }
    .m3-panel.board-open:not(.minimized) .panel-header,
    .m3-panel.board-open .stop-card .stop-code { display: none; }
    .board-back {
        display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
        min-height: var(--md-touch-target); margin-bottom: 4px; padding: 0 8px 0 0;
        background: none; border: none; color: var(--md-primary); font: inherit; font-weight: 500; cursor: pointer;
    }
    .m3-panel.board-open .stop-card { display: flex; flex-direction: column; }
    .m3-panel.board-open .stop-card .lines-label { order: 1; margin-top: 14px; }
    .m3-panel.board-open .stop-card .lines-wrap { order: 2; margin-bottom: 0; }

    .m3-panel {
        position: absolute; top: auto; bottom: 0; left: 0; width: 100%;
        /* Stato base: Peek - 40% dello schermo */
        height: 40vh;
        height: 40dvh;
        max-height: none;
        border-radius: var(--md-radius-xl) var(--md-radius-xl) 0 0;
        padding-top: 10px;
        box-shadow: var(--md-shadow-sheet);
    }

    /* Stato attivo: Expanded - 85% dello schermo */
    .m3-panel.expanded { height: 85vh; height: 85dvh; }

    /* Stato Minimized - mostra solo la barra superiore */
    .m3-panel.minimized {
        height: 65px;
        padding-bottom: 0;
        cursor: pointer;
        overflow: hidden; /* Nasconde il contenuto per evitare sbavature */
    }

    /* Durante il drag manuale nessuna transizione: segue il dito */
    .m3-panel.dragging { transition: none; user-select: none; }

    .drag-handle {
        display: block; width: 40px; height: 5px; background: var(--md-outline-variant);
        border-radius: 3px; margin: 0 auto 12px auto; cursor: grab;
    }
    .m3-panel.dragging .drag-handle { cursor: grabbing; }

    .autocomplete-list { max-height: 200px; }
}

/* Sui telefoni si zooma con le dita: i pulsanti +/- coprirebbero i fumetti */
@media (max-width: 768px) and (pointer: coarse) {
    .leaflet-control-zoom { display: none; }
}

/* Tema scuro della mappa: i tile OSM vengono scuriti, le icone e i marker non cambiano. */
.osm-dark-tiles { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9); }