/**
 * Trade Map CSS
 * @version 1.2.0
 */

/* =========================================================================
   LAYOUT
   ========================================================================= */

.ofma-dashboard__main--trademap {
    flex: 1 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 1.5rem !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--of-bg-primary, #f8fafc);
}

.trademap-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--of-text-primary, #1e293b);
    min-height: 0;
    gap: 0.5rem;
    font-size: var(--of-font-size-md, 13px) !important;

    /* Trade Map: Schriftgrößen 1px größer als Scanner */
    --of-font-size-xs: 11px;
    --of-font-size-sm: 12px;
    --of-font-size-base: 13px;
    --of-font-size-md: 14px;
}

/* Header: nutzt zentrale .page-header / .page-header__title / .page-header__subtitle */

/* =========================================================================
   CONFIG BAR
   ========================================================================= */

.trademap-config {
    background: var(--of-bg-card, #fff);
    border: 1px solid var(--of-border, #e2e8f0);
    border-radius: 8px;
    padding: 8px 10px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.trademap-config__row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.trademap-config__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trademap-config__field--narrow {
    min-width: 0;
}

.trademap-config__label {
    font-size: var(--of-font-size-xs, 10px) !important;
    font-weight: 600 !important;
    color: var(--of-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

.trademap-config__select {
    padding: 3px 20px 3px 6px !important;
    border: 1px solid var(--of-border, #e2e8f0) !important;
    border-radius: 4px !important;
    background-color: var(--of-bg-card, #fff) !important;
    color: var(--of-text-primary, #1e293b) !important;
    font-size: var(--of-font-size-base, 12px) !important;
    font-family: inherit !important;
    line-height: 1.3 !important;
    height: 24px !important;
    cursor: pointer;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 5px center !important;
}

.trademap-config__select:focus,
.trademap-config__input:focus {
    outline: none !important;
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.12) !important;
}

.trademap-config__select optgroup {
    font-size: var(--of-font-size-base, 12px) !important;
    font-weight: 600;
}

.trademap-config__select option {
    font-size: var(--of-font-size-base, 12px) !important;
    padding: 2px 6px !important;
}

.trademap-config__input {
    padding: 3px 4px !important;
    border: 1px solid var(--of-border, #e2e8f0) !important;
    border-radius: 4px !important;
    background-color: var(--of-bg-card, #fff) !important;
    color: var(--of-text-primary, #1e293b) !important;
    font-size: var(--of-font-size-base, 12px) !important;
    font-family: inherit !important;
    width: 48px !important;
    height: 24px !important;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

#tm-filter-delta-min,
#tm-filter-delta-max {
    width: 62px !important;
}

/* Hervorheben-Suchfeld: so breit wie die Select-Felder (z.B. RSI), linksbuendig */
#tm-highlight {
    width: 160px !important;
    text-align: left !important;
}

/* Delta Help-Icon + Tooltip (violett, wie Scanner) */
.trademap-config__help-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.trademap-config__help-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: none;
    border: 1.5px solid var(--of-accent-violet, #8b5cf6);
    color: var(--of-accent-violet, #8b5cf6);
    font-size: var(--of-text-3xs);
    font-weight: 700;
    line-height: 1;
    cursor: help;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.trademap-config__help-icon:hover {
    background: var(--of-accent-violet, #8b5cf6);
    color: #fff;
}

.trademap-config__help-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    width: 260px;
    padding: 10px 12px;
    background: var(--of-accent-violet-dark, #7c3aed);
    color: #fff;
    font-size: var(--of-font-size-base, 12px);
    font-weight: 400;
    line-height: 1.5;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    white-space: normal;
}

.trademap-config__help-icon:hover + .trademap-config__help-tooltip,
.trademap-config__help-tooltip:hover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.trademap-config__hint {
    margin: 0 0 6px 0;
    padding: 0;
    font-size: var(--of-font-size-base, 12px) !important;
    color: var(--of-text-muted, #94a3b8);
    line-height: 1.3;
}

.trademap-config__templates {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--of-border, #e2e8f0);
    flex-wrap: wrap;
}

/* Eigene Templates liegen in <span id="tm-custom-templates">. display:contents loest den
   Span aus dem Box-Baum -> die Buttons werden direkte Flex-Items des Containers und brechen
   am rechten Rand genauso in die naechste Zeile um wie die Vorlagen-Buttons. */
#tm-custom-templates {
    display: contents;
}

.trademap-config__templates-label {
    font-size: var(--of-font-size-sm, 11px) !important;
    font-weight: 600;
    color: var(--of-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 24px;
    min-width: 62px;
}

.trademap-template {
    padding: 4px 6px 4px 10px !important;
    border: 1px solid var(--of-border, #e2e8f0) !important;
    border-radius: 8px !important;
    background: var(--of-bg-card, #fff) !important;
    color: var(--of-text-secondary, #475569) !important;
    font-size: var(--of-font-size-sm, 11px) !important;
    font-family: inherit !important;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.3;
    transition: all 0.15s;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.trademap-template__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.trademap-template__text strong {
    font-size: var(--of-font-size-sm, 11px) !important;
    font-weight: 600;
}

.trademap-template__text span {
    font-size: var(--of-font-size-xs, 10px) !important;
    color: var(--of-text-muted, #94a3b8);
    font-weight: 400;
}

.trademap-template__help {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--of-accent-violet, #8b5cf6);
    background: var(--of-bg-primary, #f8fafc);
    color: var(--of-accent-violet, #8b5cf6);
    font-size: var(--of-font-size-xs, 10px) !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.trademap-template__help:hover {
    border-color: #7c3aed;
    color: #fff;
    background: #7c3aed;
}

/* Reset-Button (↺) — nur sichtbar wenn Template aktiv UND Konfig abweicht */
.trademap-template__reset {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #14b8a6;
    background: rgba(20, 184, 166, 0.12);
    color: #14b8a6;
    font-size: var(--of-text-xs) !important;
    font-weight: 700;
    line-height: 1;
    display: none; /* per default versteckt — JS toggelt --modified-Klasse */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 4px;
    transition: all 0.15s;
}
.trademap-template--active.trademap-template--modified .trademap-template__reset {
    display: flex;
}
.trademap-template__reset:hover {
    background: #14b8a6;
    color: #fff;
}
[data-theme="dark"] .trademap-template__reset,
.ofma-dashboard[data-theme="dark"] .trademap-template__reset {
    border-color: #2dd4bf;
    color: #2dd4bf;
    background: rgba(45, 212, 191, 0.15);
}
[data-theme="dark"] .trademap-template__reset:hover,
.ofma-dashboard[data-theme="dark"] .trademap-template__reset:hover {
    background: #2dd4bf;
    color: #0f172a;
}

/* Speichern-Button (✓) — nur bei eigenen Templates, sichtbar wenn aktiv UND geaendert.
   Uebernimmt die aktuellen Einstellungen in das Template. */
.trademap-template__save {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #059669;
    background: rgba(5, 150, 105, 0.12);
    color: #059669;
    font-size: var(--of-text-2xs) !important;
    font-weight: 700;
    line-height: 1;
    display: none; /* per default versteckt — JS toggelt --modified-Klasse */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 4px;
    transition: all 0.15s;
}
.trademap-template--active.trademap-template--unsaved .trademap-template__save {
    display: flex;
}
.trademap-template__save:hover {
    background: #059669;
    color: #fff;
}
[data-theme="dark"] .trademap-template__save,
.ofma-dashboard[data-theme="dark"] .trademap-template__save {
    border-color: #34d399;
    color: #34d399;
    background: rgba(52, 211, 153, 0.15);
}
[data-theme="dark"] .trademap-template__save:hover,
.ofma-dashboard[data-theme="dark"] .trademap-template__save:hover {
    background: #34d399;
    color: #0f172a;
}

.trademap-template:hover {
    border-color: #14b8a6 !important;
    color: #14b8a6 !important;
    background: rgba(20, 184, 166, 0.05) !important;
}

.trademap-template--active {
    border-color: #14b8a6 !important;
    background: rgba(20, 184, 166, 0.1) !important;
    color: #0d9488 !important;
    font-weight: 600;
}

/* Eigenes Template speichern (+) */
.trademap-template--add {
    padding: 4px 8px !important;
    border-style: dashed !important;
    min-width: 28px;
    justify-content: center;
    align-self: stretch;
}

/* Benutzerdefinierte Templates */
.trademap-template--custom {
    border-color: #8b5cf6 !important;
    background: rgba(139, 92, 246, 0.05) !important;
}

.trademap-template--custom:hover {
    border-color: #7c3aed !important;
    background: rgba(139, 92, 246, 0.1) !important;
    color: #7c3aed !important;
}

.trademap-template--custom.trademap-template--active {
    border-color: #7c3aed !important;
    background: rgba(139, 92, 246, 0.15) !important;
    color: #6d28d9 !important;
}

.trademap-template__delete {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--of-border, #e2e8f0) !important;
    background: var(--of-bg-primary, #f8fafc) !important;
    color: var(--of-text-muted, #94a3b8) !important;
    font-size: var(--of-text-xs) !important;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0 !important;
    line-height: 1;
    transition: all 0.15s;
}

.trademap-template__delete:hover {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.08) !important;
}

/* Template Info Overlay */
.trademap-template-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trademap-template-overlay .trademap-template-overlay__content {
    position: relative;
    background: var(--of-bg-card, #fff);
    border-radius: 10px;
    padding: 20px 28px;
    max-width: 960px;
    min-width: 700px;
    width: 94%;
    min-height: 280px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* Gleiche Schriftgrößen wie .trademap-wrapper */
    --of-font-size-xs: 11px;
    --of-font-size-sm: 12px;
    --of-font-size-base: 13px;
    --of-font-size-md: 14px;
    --of-font-size-lg: 15px;
    font-size: var(--of-font-size-base) !important;
}

.trademap-template-overlay__close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none !important;
    border: none !important;
    font-size: var(--of-text-xl) !important;
    color: var(--of-text-muted, #94a3b8) !important;
    cursor: pointer;
    padding: 0 4px !important;
    line-height: 1;
}

.trademap-template-overlay__close:hover {
    color: var(--of-text-primary, #1e293b) !important;
}

/* Template Info Content (inside overlay) */
.trademap-template-info__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    justify-content: space-between;
}

.trademap-template-info__header strong {
    font-size: var(--of-font-size-lg, 14px) !important;
    color: var(--of-text-primary, #1e293b);
}

/* Reset-Button (rechts im Header, sobald vom Template-Default abgewichen wurde) */
.trademap-template-info__reset {
    background: rgba(20, 184, 166, 0.12);
    border: 1px solid #14b8a6;
    color: #0d9488;
    font-size: var(--of-text-2xs);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.trademap-template-info__reset:hover {
    background: #14b8a6;
    color: #fff;
}
[data-theme="dark"] .trademap-template-info__reset,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__reset {
    color: #2dd4bf;
    background: rgba(45, 212, 191, 0.12);
    border-color: #2dd4bf;
}
[data-theme="dark"] .trademap-template-info__reset:hover,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__reset:hover {
    background: #2dd4bf;
    color: #0f172a;
}

/* Notice — "Konfiguration wurde angepasst" Hinweis-Block */
.trademap-template-info__notice {
    background: rgba(245, 158, 11, 0.10);
    border-left: 3px solid #f59e0b;
    color: #92400e;
    font-size: var(--of-text-2xs);
    line-height: 1.45;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 8px 0 12px;
}
.trademap-template-info__notice strong { color: #92400e; }
[data-theme="dark"] .trademap-template-info__notice,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__notice {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}
[data-theme="dark"] .trademap-template-info__notice strong,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__notice strong {
    color: #fbbf24;
}

.trademap-template-info__axes {
    font-size: var(--of-font-size-base, 12px) !important;
    color: var(--of-text-muted, #94a3b8);
}

.trademap-template-info__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
}

.trademap-template-info__quadrant {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.4;
}

.trademap-template-info__pos {
    font-size: var(--of-font-size-xs, 10px) !important;
    color: var(--of-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.trademap-template-info__label {
    font-size: var(--of-font-size-md, 13px) !important;
    font-weight: 600;
    color: var(--of-text-primary, #1e293b);
}

.trademap-template-info__desc {
    font-size: var(--of-font-size-base, 12px) !important;
    color: var(--of-text-secondary, #475569);
}

.trademap-template-info__color {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--of-border, #e2e8f0);
    font-size: var(--of-font-size-base, 12px) !important;
    color: var(--of-text-secondary, #475569);
    line-height: 1.4;
}

.trademap-template-info__section-title {
    font-size: var(--of-font-size-base, 12px) !important;
    font-weight: 600;
    color: var(--of-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 10px 0 6px;
    padding-top: 8px;
    border-top: 1px solid var(--of-border, #e2e8f0);
}

.trademap-template-info__section-title:first-of-type {
    margin-top: 4px;
    border-top: none;
    padding-top: 0;
}

.trademap-template-info__dimensions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 4px;
}

.trademap-template-info__dim {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.45;
    padding: 10px 12px;
    background: rgba(20, 184, 166, 0.04);
    border-left: 3px solid #14b8a6;
    border-radius: 4px;
}

.trademap-template-info__dim-label {
    font-size: var(--of-text-3xs) !important;
    color: var(--of-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.trademap-template-info__dim-param {
    font-size: var(--of-text-sm) !important;
    font-weight: 700;
    color: #0d9488;
    margin-top: 4px;
}
.trademap-template-info__dim-param strong {
    font-size: var(--of-text-3xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--of-text-muted, #94a3b8);
    margin-right: 4px;
    vertical-align: 1px;
}

.trademap-template-info__dim-read {
    font-size: var(--of-text-xs) !important;
    color: var(--of-text-secondary, #475569);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(148, 163, 184, 0.4);
    font-weight: normal;
}
.trademap-template-info__dim-read strong {
    font-size: var(--of-text-3xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--of-text-muted, #94a3b8);
    margin-right: 4px;
    vertical-align: 1px;
}

/* Filter Toggle */
.trademap-config__filter-toggle-row {
    padding-top: 6px;
    border-top: 1px solid var(--of-border, #e2e8f0);
    margin-top: 6px;
}

.trademap-config__filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 4px !important;
    border: none !important;
    background: none !important;
    color: var(--of-text-muted, #94a3b8) !important;
    font-size: var(--of-font-size-sm, 11px) !important;
    font-family: inherit !important;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s;
}

.trademap-config__filter-toggle:hover {
    color: #14b8a6 !important;
}

.trademap-config__filter-toggle-icon {
    width: 8px;
    height: 8px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.2s;
    font-size: 0;
}

.trademap-config__filter-toggle--open .trademap-config__filter-toggle-icon {
    transform: rotate(180deg);
}

.trademap-config__filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 9px;
    background: #14b8a6;
    color: #fff !important;
    font-size: var(--of-font-size-xs, 10px) !important;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.trademap-config__filters {
    padding-top: 8px;
}

/* Grid-Layout für Achsen/Darstellung/Daten */
.trademap-config__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 30px;
    max-width: 900px;
}

.trademap-config__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trademap-config__group-title {
    font-size: var(--of-font-size-xs, 10px) !important;
    font-weight: 700;
    color: var(--of-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--of-border, #e2e8f0);
    margin-bottom: 2px;
}

.trademap-config__group--filter {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--of-border, #e2e8f0);
}

.trademap-config__filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

/* Inline-Feld: Label links, Control rechts */
.trademap-config__field-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trademap-config__label-inline {
    font-size: var(--of-font-size-sm, 11px) !important;
    font-weight: 500;
    color: var(--of-text-secondary, #475569);
    white-space: nowrap;
    min-width: 52px;
}

/* Labels in Grid-Gruppen (Achsen/Darstellung/Daten) gleich breit */
.trademap-config__grid .trademap-config__label-inline {
    min-width: 62px;
    text-align: right;
}

/* Labels in Filter-Row gleich breit */
.trademap-config__filter-row .trademap-config__label-inline {
    min-width: 62px;
    text-align: right;
}

/* Selects in Grid-Gruppen schmaler */
.trademap-config__grid .trademap-config__select {
    max-width: 140px;
}

/* Range-Felder (DTE, Preis) */
.trademap-config__range {
    display: flex;
    align-items: center;
    gap: 4px;
}

.trademap-config__range-sep {
    color: var(--of-text-muted, #94a3b8);
    font-size: var(--of-font-size-sm, 11px);
}

/* "×" zum Entfernen eines Feldes — sichtbar nur, wenn das Feld aktiv (gruen) ist. */
.trademap-config__remove {
    display: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--of-border, #e2e8f0);
    background: var(--of-bg-primary, #f8fafc);
    color: var(--of-text-muted, #94a3b8);
    font-size: var(--of-text-xs);
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
}
.trademap-config__field-inline--active .trademap-config__remove {
    display: inline-flex;
}
.trademap-config__remove:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}
[data-theme="dark"] .trademap-config__remove,
.ofma-dashboard[data-theme="dark"] .trademap-config__remove {
    background: #0f172a;
    border-color: #334155;
    color: #64748b;
}
[data-theme="dark"] .trademap-config__remove:hover,
.ofma-dashboard[data-theme="dark"] .trademap-config__remove:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

/* Aktive Filter-Felder hervorheben */
.trademap-config__select--active {
    background-color: rgba(20, 184, 166, 0.1) !important;
    border-color: #14b8a6 !important;
}

.trademap-config__input--active {
    background-color: rgba(20, 184, 166, 0.1) !important;
    border-color: #14b8a6 !important;
}

/* =========================================================================
   CHART CONTAINER
   ========================================================================= */

.trademap-chart-container {
    position: relative;
    flex: 1;
    min-height: 300px;
    background: var(--of-bg-card, #fff);
    border: 1px solid var(--of-border, #e2e8f0);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.trademap-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* =========================================================================
   LOADING OVERLAY
   ========================================================================= */

.trademap-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    background: rgba(248, 250, 252, 0.85);
    border-radius: 8px;
}

.trademap-loading--active {
    display: flex;
}

.trademap-loading__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--of-border, #e2e8f0);
    border-top-color: #14b8a6;
    border-radius: 50%;
    animation: tm-spin 0.7s linear infinite;
}

.trademap-loading__steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trademap-loading__step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--of-font-size-base, 12px);
    color: var(--of-text-muted, #94a3b8);
    transition: color 0.2s;
}

.trademap-loading__step-icon {
    font-size: var(--of-font-size-sm, 11px);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.trademap-loading__step--active {
    color: #14b8a6;
    font-weight: 500;
}

.trademap-loading__step--active .trademap-loading__step-icon {
    animation: tm-pulse 1s ease-in-out infinite;
}

.trademap-loading__step--done {
    color: #10b981;
}

.trademap-loading__step--done .trademap-loading__step-icon {
    color: #10b981;
}

@keyframes tm-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* =========================================================================
   QUADRANT LABELS
   ========================================================================= */

.trademap-quadrant-labels {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    pointer-events: none;
    z-index: 1;
}

.trademap-quadrant-label {
    position: absolute;
    color: var(--of-text-muted, #94a3b8);
    opacity: 0.55;
    padding: 2px 6px;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.trademap-quadrant-label__title {
    font-size: var(--of-font-size-md, 13px) !important;
    font-weight: 600;
    line-height: 1.2;
}

.trademap-quadrant-label__desc {
    font-size: var(--of-font-size-sm, 11px) !important;
    font-weight: 400;
    opacity: 0.8;
    line-height: 1.2;
}

/* Positionen werden dynamisch per JS gesetzt (positionQuadrantLabels) */
.trademap-quadrant-label--tr { align-items: flex-end; }
.trademap-quadrant-label--br { align-items: flex-end; }

/* Quadrant-Overlay für Tour-Highlight (unsichtbar, nur für Tour-Target) */
.trademap-quadrant-overlay {
    position: absolute;
    pointer-events: none;
    border-radius: 4px;
}

/* =========================================================================
   STATUS BAR
   ========================================================================= */

.trademap-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
    font-size: var(--of-font-size-sm, 11px) !important;
    color: var(--of-text-muted, #94a3b8);
    flex-shrink: 0;
}

.trademap-status--loading .trademap-status__count::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--of-border, #e2e8f0);
    border-top-color: #14b8a6;
    border-radius: 50%;
    animation: tm-spin 0.6s linear infinite;
    margin-right: 4px;
    vertical-align: middle;
}

@keyframes tm-spin {
    to { transform: rotate(360deg); }
}

.trademap-status__count {
    font-weight: 600;
    color: var(--of-text-secondary, #475569);
}

/* =========================================================================
   FARBLEGENDE
   ========================================================================= */

.trademap-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 6px 0 2px;
    font-size: var(--of-font-size-sm, 11px) !important;
    color: var(--of-text-muted, #94a3b8);
}

.trademap-legend__title {
    font-weight: 600;
    color: var(--of-text-secondary, #475569);
    margin-right: 2px;
}

.trademap-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.trademap-legend__swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.trademap-legend__gradient-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.trademap-legend__gradient {
    display: inline-block;
    width: 120px;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(to right, #dc2626, #d97706, #059669);
}

.trademap-legend__gradient-label {
    font-weight: 600;
    color: var(--of-text-secondary, #475569);
    font-size: var(--of-text-3xs);
}

.trademap-legend__gradient-desc {
    color: var(--of-text-muted, #94a3b8);
}

/* =========================================================================
   TOOLTIP
   ========================================================================= */

.trademap-tooltip {
    position: absolute;
    z-index: 10000;
    background: #1e293b;
    color: #94a3b8;
    border-radius: 6px;
    padding: 0;
    font-size: var(--of-text-xs) !important;
    min-width: 200px;
    max-width: 260px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    transition: opacity 0.15s;
    /* Scanner-Standard Schriftgrößen (überschreibt trademap-wrapper Werte) */
    --of-font-size-xs: 10px;
    --of-font-size-sm: 11px;
    --of-font-size-base: 12px;
    --of-font-size-md: 13px;
    --of-font-size-lg: 14px;
}

.trademap-tooltip__header {
    padding: 5px 8px;
    border-bottom: 1px solid #334155;
    font-size: var(--of-font-size-md, 13px) !important;
}

.trademap-tooltip__header strong {
    color: #14b8a6;
    margin-right: 4px;
}

.trademap-tooltip__type {
    display: inline-block;
    font-size: var(--of-font-size-xs, 10px) !important;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 3px;
    background: #334155;
    color: #94a3b8;
    margin-right: 4px;
    vertical-align: middle;
}

.trademap-tooltip__type--put {
    background: #dc2626;
    color: #fff;
}

.trademap-tooltip__type--call {
    background: #059669;
    color: #fff;
}

.trademap-tooltip__name {
    color: #94a3b8;
    font-size: var(--of-font-size-sm, 11px) !important;
}

.trademap-tooltip__sector {
    font-size: var(--of-font-size-xs, 10px) !important;
    color: #64748b;
    margin-top: 2px;
}

.trademap-tooltip__scores {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
}

.trademap-tooltip__fto {
    display: flex;
    gap: 3px;
}

.trademap-tooltip__score-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 18px;
    border-radius: 3px;
    font-size: var(--of-font-size-xs, 10px) !important;
    font-weight: 700;
    line-height: 1;
}

.trademap-tooltip__score-label {
    font-size: var(--of-font-size-sm, 11px) !important;
    color: #94a3b8;
    font-weight: 500;
}

.trademap-tooltip__body {
    padding: 3px 8px;
}

.trademap-tooltip__row {
    display: flex;
    justify-content: space-between;
    padding: 1px 0;
    gap: 10px;
    font-size: var(--of-font-size-base, 12px) !important;
}

.trademap-tooltip__label {
    color: #94a3b8;
}

.trademap-tooltip__value {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.trademap-tooltip__divider {
    height: 1px;
    background: #334155;
    margin: 2px 0;
}

/* Section-Title im Tooltip — z. B. "So liest du diese Bubble" ueber den Visualisierungs-Markern */
.trademap-tooltip__section-title {
    font-size: var(--of-text-4xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    padding: 4px 0 2px;
}

.trademap-tooltip__footer {
    padding: 3px 8px;
    border-top: 1px solid #334155;
    font-size: var(--of-font-size-xs, 10px) !important;
    color: #64748b;
    text-align: center;
}

.trademap-tooltip__dim {
    display: flex;
    align-items: center;
    gap: 4px;
}

.trademap-tooltip__dim .trademap-tooltip__row {
    flex: 1;
}

.trademap-tooltip__dim-marker {
    font-size: var(--of-text-4xs);
    font-weight: 700;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}

.trademap-tooltip__dim-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

/* =========================================================================
   ZOOM RESET
   ========================================================================= */

.trademap-zoom-reset {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    background: rgba(20, 184, 166, 0.1);
    color: #14b8a6;
    border: 1px solid rgba(20, 184, 166, 0.3);
    border-radius: 4px;
    font-size: var(--of-font-size-xs, 10px);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.trademap-zoom-reset:hover {
    background: rgba(20, 184, 166, 0.2);
}

/* =========================================================================
   DARK MODE
   ========================================================================= */

/* page.php Theme-Wrapper neutralisieren — Dashboard hat eigenes Layout */
.of-page:has(.ofma-dashboard) {
    padding: 0 !important;
    background: none !important;
}

.of-page__content:has(.ofma-dashboard),
.of-page__body:has(.ofma-dashboard) .of-page__content {
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    max-width: none !important;
}

.of-page__container:has(.ofma-dashboard) {
    max-width: none !important;
}

.of-page__header:has(+ .of-page__body .ofma-dashboard) {
    display: none !important;
}

/* page.php select-Reset: Eigene Styles gelten innerhalb des Dashboards */
.of-page__body .ofma-dashboard select.trademap-config__select {
    width: auto !important;
    padding: 3px 20px 3px 6px !important;
    border-radius: 4px !important;
    font-size: var(--of-font-size-base, 12px) !important;
}

.of-page__body .ofma-dashboard[data-theme="dark"] select.trademap-config__select {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

.of-page__body .ofma-dashboard[data-theme="dark"] select.trademap-config__select option,
.of-page__body .ofma-dashboard[data-theme="dark"] select.trademap-config__select optgroup {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
}

.of-page__body .ofma-dashboard[data-theme="dark"] input.trademap-config__input {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .ofma-dashboard__main--trademap,
.ofma-dashboard[data-theme="dark"] .ofma-dashboard__main--trademap {
    background: #0f172a;
}

[data-theme="dark"] .trademap-config,
[data-theme="dark"] .trademap-chart-container,
.ofma-dashboard[data-theme="dark"] .trademap-config,
.ofma-dashboard[data-theme="dark"] .trademap-chart-container {
    background: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .trademap-template--add,
.ofma-dashboard[data-theme="dark"] .trademap-template--add {
    border-color: #334155 !important;
}

[data-theme="dark"] .trademap-template__delete,
.ofma-dashboard[data-theme="dark"] .trademap-template__delete {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #64748b !important;
}

[data-theme="dark"] .trademap-template__help,
.ofma-dashboard[data-theme="dark"] .trademap-template__help {
    background-color: #0f172a;
    border-color: #a78bfa;
    color: #a78bfa;
}

/* Overlay liegt außerhalb .ofma-dashboard — data-theme auf Element selbst */
.trademap-template-overlay[data-theme="dark"] {
    background: rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .trademap-template-overlay__content,
.trademap-template-overlay[data-theme="dark"] .trademap-template-overlay__content {
    background: #1e293b;
    color: #94a3b8;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .trademap-template-overlay__close,
.trademap-template-overlay[data-theme="dark"] .trademap-template-overlay__close {
    color: #64748b !important;
}

[data-theme="dark"] .trademap-template-overlay__close:hover,
.trademap-template-overlay[data-theme="dark"] .trademap-template-overlay__close:hover {
    color: #94a3b8 !important;
}

[data-theme="dark"] .trademap-template-info__header strong,
[data-theme="dark"] .trademap-template-info__label,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__header strong,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__label {
    color: #94a3b8;
}

[data-theme="dark"] .trademap-template-info__desc,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__desc {
    color: #94a3b8;
}

[data-theme="dark"] .trademap-template-info__color,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__color {
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .trademap-template-info__section-title,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__section-title {
    color: #64748b;
    border-color: #334155;
}

[data-theme="dark"] .trademap-template-info__dim,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__dim {
    background: rgba(20, 184, 166, 0.08);
    border-left-color: #14b8a6;
}

[data-theme="dark"] .trademap-template-info__dim-param,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__dim-param {
    color: #2dd4bf;
}

[data-theme="dark"] .trademap-template-info__dim-read,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__dim-read {
    color: #cbd5e1;
    border-top-color: rgba(148, 163, 184, 0.25);
}
[data-theme="dark"] .trademap-template-info__dim-read strong,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__dim-read strong,
[data-theme="dark"] .trademap-template-info__dim-param strong,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__dim-param strong {
    color: #64748b;
}

[data-theme="dark"] .trademap-template-info__pos,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__pos {
    color: #64748b;
}

[data-theme="dark"] .trademap-template-info__axes,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__axes {
    color: #64748b;
}

[data-theme="dark"] .trademap-template-info__dim-label,
.trademap-template-overlay[data-theme="dark"] .trademap-template-info__dim-label {
    color: #64748b;
}

[data-theme="dark"] .trademap-config__select,
.ofma-dashboard[data-theme="dark"] .trademap-config__select {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Aktive Filter müssen grün bleiben — gleiche Spezifität wie oben + --active */
.ofma-dashboard[data-theme="dark"] .trademap-config__select--active {
    background-color: rgba(20, 184, 166, 0.15) !important;
    border-color: #14b8a6 !important;
}

.ofma-dashboard[data-theme="dark"] .trademap-config__input--active {
    background-color: rgba(20, 184, 166, 0.15) !important;
    border-color: #14b8a6 !important;
}

[data-theme="dark"] .trademap-config__select option,
[data-theme="dark"] .trademap-config__select optgroup,
.ofma-dashboard[data-theme="dark"] .trademap-config__select option,
.ofma-dashboard[data-theme="dark"] .trademap-config__select optgroup {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .trademap-config__input,
.ofma-dashboard[data-theme="dark"] .trademap-config__input {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

.ofma-dashboard[data-theme="dark"] .trademap-template {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

.ofma-dashboard[data-theme="dark"] .trademap-template:hover {
    border-color: #14b8a6 !important;
    color: #14b8a6 !important;
    background-color: rgba(20, 184, 166, 0.1) !important;
}

.ofma-dashboard[data-theme="dark"] .trademap-template.trademap-template--active {
    border-color: #14b8a6 !important;
    background: rgba(20, 184, 166, 0.25) !important;
    color: #5eead4 !important;
}

.ofma-dashboard[data-theme="dark"] .trademap-template.trademap-template--custom {
    background: rgba(139, 92, 246, 0.2) !important;
    border-color: #a78bfa !important;
    color: #c4b5fd !important;
}

.ofma-dashboard[data-theme="dark"] .trademap-template.trademap-template--custom:hover {
    background: rgba(139, 92, 246, 0.3) !important;
    color: #ddd6fe !important;
}

.ofma-dashboard[data-theme="dark"] .trademap-template.trademap-template--custom.trademap-template--active {
    border-color: #8b5cf6 !important;
    background: rgba(139, 92, 246, 0.35) !important;
    color: #ddd6fe !important;
}

.ofma-dashboard[data-theme="dark"] .trademap-loading {
    background: rgba(15, 23, 42, 0.85);
}

.ofma-dashboard[data-theme="dark"] .trademap-loading__spinner {
    border-color: #334155;
    border-top-color: #14b8a6;
}

.ofma-dashboard[data-theme="dark"] .trademap-config__select--active {
    background-color: rgba(20, 184, 166, 0.15) !important;
    border-color: #14b8a6 !important;
}

.ofma-dashboard[data-theme="dark"] .trademap-config__input--active {
    background-color: rgba(20, 184, 166, 0.15) !important;
    border-color: #14b8a6 !important;
}

.ofma-dashboard[data-theme="dark"] .trademap-config__group-title {
    border-color: #334155;
    color: #64748b;
}

.ofma-dashboard[data-theme="dark"] .trademap-config__group--filter {
    border-color: #334155;
}

.ofma-dashboard[data-theme="dark"] .trademap-config__label-inline {
    color: #94a3b8;
}

.ofma-dashboard[data-theme="dark"] .trademap-config__filter-toggle-row {
    border-color: #334155;
}

.ofma-dashboard[data-theme="dark"] .trademap-config__filter-toggle {
    color: #64748b !important;
}

.ofma-dashboard[data-theme="dark"] .trademap-config__filter-toggle:hover {
    color: #14b8a6 !important;
}

.ofma-dashboard[data-theme="dark"] .trademap-quadrant-label {
    color: #475569;
}

.ofma-dashboard[data-theme="dark"] .trademap-status__count {
    color: #94a3b8;
}

.ofma-dashboard[data-theme="dark"] .trademap-legend__title,
.ofma-dashboard[data-theme="dark"] .trademap-legend__gradient-label {
    color: #94a3b8;
}

.ofma-dashboard[data-theme="dark"] .trademap-zoom-reset {
    background: rgba(20, 184, 166, 0.15);
    border-color: rgba(20, 184, 166, 0.3);
}

/* Wrapper + allgemeine Texte */
.ofma-dashboard[data-theme="dark"] .trademap-wrapper {
    color: #94a3b8;
}

/* Page Header */
.ofma-dashboard[data-theme="dark"] .trademap-wrapper .page-header__title {
    color: #94a3b8;
}

.ofma-dashboard[data-theme="dark"] .trademap-wrapper .page-header__subtitle {
    color: #94a3b8;
}

/* Config-Labels */
.ofma-dashboard[data-theme="dark"] .trademap-config__label {
    color: #64748b;
}

.ofma-dashboard[data-theme="dark"] .trademap-config__hint {
    color: #64748b;
}

.ofma-dashboard[data-theme="dark"] .trademap-config__templates-label {
    color: #64748b;
}

/* Config Help-Tooltip */
.ofma-dashboard[data-theme="dark"] .trademap-config__help-tooltip {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Template Text */
.ofma-dashboard[data-theme="dark"] .trademap-template__text span {
    color: #64748b;
}

/* Template Help-Button */
.ofma-dashboard[data-theme="dark"] .trademap-template__help:hover {
    background: #a78bfa;
    border-color: #a78bfa;
    color: #0f172a;
}

/* Filter-Bereich */
.ofma-dashboard[data-theme="dark"] .trademap-config__range-sep {
    color: #64748b;
}

/* Loading Overlay */
.ofma-dashboard[data-theme="dark"] .trademap-loading {
    background: rgba(15, 23, 42, 0.85);
}

.ofma-dashboard[data-theme="dark"] .trademap-loading__step {
    color: #64748b;
}

.ofma-dashboard[data-theme="dark"] .trademap-loading__step--active {
    color: #14b8a6;
}

.ofma-dashboard[data-theme="dark"] .trademap-loading__step--done {
    color: #10b981;
}

/* Status-Bar */
.ofma-dashboard[data-theme="dark"] .trademap-status {
    color: #64748b;
}

[data-theme="dark"] .trademap-status__count {
    color: #94a3b8;
}

/* Legende */
[data-theme="dark"] .trademap-legend {
    color: #64748b;
}

.ofma-dashboard[data-theme="dark"] .trademap-legend {
    color: #64748b;
}

.ofma-dashboard[data-theme="dark"] .trademap-legend__gradient-desc {
    color: #64748b;
}

/* Tooltip — hat bereits dunklen Hintergrund, nur Schatten stärker */
.ofma-dashboard[data-theme="dark"] .trademap-tooltip {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* =========================================================================
   KONTEXTMENU (Rechtsklick auf Bubble)
   ========================================================================= */

.tm-context-menu {
    position: fixed;
    z-index: 10000;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
    min-width: 200px;
    padding: 4px 0;
    display: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: var(--of-text-sm);
}

.tm-context-menu.visible {
    display: block;
}

.tm-context-menu__header {
    padding: 8px 12px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tm-context-menu__symbol {
    font-weight: 600;
    font-size: var(--of-text-sm);
    color: #0f172a;
}

.tm-context-menu__details {
    font-size: var(--of-text-2xs);
    color: #64748b;
}

.tm-context-menu__divider {
    height: 1px;
    background: #e2e8f0;
    margin: 4px 0;
}

.tm-context-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: none;
    color: #334155;
    font-size: var(--of-text-sm);
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}

.tm-context-menu__item:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.tm-context-menu__item svg {
    flex-shrink: 0;
    color: #64748b;
}

.tm-context-menu__item:hover svg {
    color: #14b8a6;
}

/* Dark mode — Menü liegt auf body, Theme per data-theme auf Element */
.tm-context-menu[data-theme="dark"] {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.tm-context-menu[data-theme="dark"] .tm-context-menu__symbol {
    color: #94a3b8;
}

.tm-context-menu[data-theme="dark"] .tm-context-menu__details {
    color: #94a3b8;
}

.tm-context-menu[data-theme="dark"] .tm-context-menu__divider {
    background: #334155;
}

.tm-context-menu[data-theme="dark"] .tm-context-menu__item {
    color: #cbd5e1;
}

.tm-context-menu[data-theme="dark"] .tm-context-menu__item:hover {
    background: #334155;
    color: #94a3b8;
}

/* =====================================================
   MOBILE TRADE MAP (Hybrid: Chart + Quadranten-Liste)
   ===================================================== */
.tm-qlist { display: none; }

@media (max-width: 600px), (max-height: 450px) and (orientation: landscape) {
  /* Chart vollbreit + kompakt-quadratisch */
  .trademap-chart-container {
    width: 100% !important;
    height: min(88vw, 420px) !important;
    min-height: 0 !important;
    padding: 8px !important;
  }
  .trademap-chart-container canvas { touch-action: pan-y; }

  /* Templates: 2-spaltiges Raster (kein horizontales Scrollen) */
  .trademap-config__templates {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    overflow: visible !important;
    padding-bottom: 0;
  }
  .trademap-config__templates-label { display: none; }
  .trademap-template {
    flex: none !important;
    min-width: 0;
    margin: 0 !important;
  }
  /* Kompakt: nur Titel zeigen, Beschreibung + Icons ausblenden */
  .trademap-template__text > span { display: none; }
  .trademap-template__reset, .trademap-template__help { display: none !important; }

  /* Quadranten-Label-Overlay bleibt auf Mobil sichtbar (wie Desktop). */

  /* Config-Grid gestapelt */
  .trademap-config__grid { grid-template-columns: 1fr !important; }
  .trademap-config__group--filter { grid-column: auto !important; }

  /* ---- Quadranten-Liste ---- */
  .tm-qlist { display: block; margin-top: 14px; padding-bottom: 24px; }
  .tm-qlist__empty {
    padding: 12px 4px; font-size: var(--of-text-sm); color: var(--ofma-text-muted, #64748b);
  }

  .tm-qsec {
    background: var(--ofma-bg-card, #fff);
    border: 1px solid var(--ofma-border, #e2e8f0);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .tm-qsec__head {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; background: none; border: none; cursor: pointer;
    text-align: left; font: inherit; color: var(--ofma-text, #0f172a);
  }
  .tm-qsec__dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; }
  .tm-qsec.is-ideal   .tm-qsec__dot { background: #16a34a; }
  .tm-qsec.is-kons    .tm-qsec__dot { background: #2563eb; }
  .tm-qsec.is-spek    .tm-qsec__dot { background: #d97706; }
  .tm-qsec.is-schwach .tm-qsec__dot { background: #dc2626; }
  .tm-qsec__titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .tm-qsec__title { font-size: var(--of-text-md); font-weight: 700; }
  .tm-qsec__desc {
    font-size: var(--of-text-2xs); color: var(--ofma-text-muted, #64748b);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tm-qsec__count {
    flex: 0 0 auto; font-size: var(--of-text-xs); font-weight: 700;
    padding: 2px 9px; border-radius: 999px;
    background: var(--ofma-bg, #f1f5f9); color: var(--ofma-text-muted, #64748b);
  }
  .tm-qsec.is-ideal .tm-qsec__count { background: rgba(22,163,74,0.14); color: #16a34a; }
  .tm-qsec__chev { flex: 0 0 auto; color: var(--ofma-text-muted, #64748b); font-size: var(--of-text-sm); transition: transform 0.18s ease; }
  .tm-qsec.is-open .tm-qsec__chev { transform: rotate(180deg); }

  .tm-qsec__body { display: none; padding: 0 14px 12px; }
  .tm-qsec.is-open .tm-qsec__body { display: block; }

  .tm-qlist__head, .tm-qlist__row {
    display: grid; gap: 10px; align-items: center;
  }
  .tm-qlist--3col .tm-qlist__head, .tm-qlist--3col .tm-qlist__row { grid-template-columns: 1fr auto auto auto; }
  .tm-qlist--2col .tm-qlist__head, .tm-qlist--2col .tm-qlist__row { grid-template-columns: 1fr auto auto; }
  .tm-qlist__head {
    padding: 4px 2px 8px; font-size: var(--of-text-2xs); text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--ofma-text-muted, #64748b); border-bottom: 1px solid var(--ofma-border, #e2e8f0);
  }
  .tm-qlist__head span:not(:first-child) { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22vw; }

  .tm-qlist__row {
    width: 100%; padding: 9px 2px; background: none; border: none;
    border-bottom: 1px solid var(--ofma-border, #eef2f6); cursor: pointer;
    font: inherit; color: var(--ofma-text, #0f172a); text-align: left;
  }
  .tm-qlist__row:last-child { border-bottom: none; }
  .tm-qlist__c-sym { min-width: 0; display: flex; flex-direction: column; }
  .tm-qlist__tk { font-size: var(--of-text-base); font-weight: 700; }
  .tm-qlist__row.is-call .tm-qlist__tk::after { content: ' C'; color: #2563eb; font-size: var(--of-text-3xs); }
  .tm-qlist__row.is-put .tm-qlist__tk::after { content: ' P'; color: #16a34a; font-size: var(--of-text-3xs); }
  .tm-qlist__nm {
    font-size: var(--of-text-2xs); color: var(--ofma-text-muted, #64748b);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw;
  }
  .tm-qlist__c-x, .tm-qlist__c-y, .tm-qlist__c-color {
    font-size: var(--of-text-sm); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
  }
  .tm-qlist__c-color { color: var(--ofma-text-muted, #64748b); max-width: 22vw; overflow: hidden; text-overflow: ellipsis; }
}

/* Mobil: Trade-Map-Seite scrollbar machen (Desktop nutzt overflow:hidden Fixed-Layout).
   Ohne dies klemmt overflow:hidden Filter-Panel + Quadranten-Liste unterhalb des Viewports ab. */
@media (max-width: 600px), (max-height: 450px) and (orientation: landscape) {
  .ofma-dashboard__main--trademap { overflow-y: auto !important; overflow-x: hidden !important; }
  .trademap-wrapper { min-height: 0; }
  .trademap-chart-container { flex: 0 0 auto !important; }
}

/* Mobil: mehr Chart-Breite (Seitenraender reduzieren) + aktive Quadranten-Kachel */
@media (max-width: 600px), (max-height: 450px) and (orientation: landscape) {
  .ofma-dashboard__main--trademap { padding: 10px !important; }
  .trademap-chart-container { padding: 4px !important; }
  .tm-qsec--active { border-color: var(--ofma-accent, #14b8a6) !important; box-shadow: 0 0 0 1px var(--ofma-accent, #14b8a6); }
}

/* Mobil: Beschreibungs-Zeile (2. Zeile) unter den Quadranten-Namen ausblenden - nur der Name */
@media (max-width: 600px), (max-height: 450px) and (orientation: landscape) {
  .tm-qsec__desc { display: none !important; }
  .trademap-quadrant-label__desc { display: none !important; }
}

/* Mobil: Tooltip als festes Panel unten (immer voll sichtbar, schliesst nicht beim Scrollen) */
.trademap-tooltip--mobile {
  position: fixed !important;
  left: 8px !important; right: auto !important; bottom: 8px !important; top: auto !important;
  max-height: 55vh; overflow-y: auto;
  z-index: 10001 !important;
}
.trademap-tooltip__close {
  position: absolute; top: 4px; right: 4px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12); border: none; border-radius: 50%;
  color: #e2e8f0; font-size: var(--of-text-2xl); line-height: 1; cursor: pointer; z-index: 3;
}

/* Mobil: Kein horizontaler Scroll auf der Trade-Map-Seite (Standalone hat keine html/body-Fixierung) */
@media (max-width: 600px), (max-height: 450px) and (orientation: landscape) {
  html:has(.ofma-dashboard__main--trademap),
  body:has(.ofma-dashboard__main--trademap) { overflow-x: hidden !important; max-width: 100% !important; }
  .ofma-dashboard:has(.ofma-dashboard__main--trademap) { overflow-x: hidden !important; max-width: 100vw !important; }
  .trademap-tooltip--mobile { overflow-x: hidden; }
}

/* Mobil: Chart.js-Canvas-Overflow (iOS) hart verhindern - Canvas nie breiter als Container, Container klippt */
@media (max-width: 600px), (max-height: 450px) and (orientation: landscape) {
  .trademap-chart-container { overflow: hidden !important; max-width: 100% !important; }
  .trademap-chart-container canvas {
    max-width: 100% !important;
    box-sizing: border-box;
  }
}