/**
 * OptionFinder Dashboard Home CSS
 * Dashboard-Startseite mit Marktampel und Chart
 *
 * @package OptionFinder_Member_Area
 * @version 1.16.0
 */

/* =====================================================
   CSS VARIABLEN
   ===================================================== */
:root {
    --ofma-primary: #14b8a6;
    --ofma-primary-dark: #0d9488;
    --ofma-primary-light: rgba(20, 184, 166, 0.1);
    --ofma-secondary: #8b5cf6;
    --ofma-success: #10b981;
    --ofma-warning: #f59e0b;
    --ofma-danger: #ef4444;
    
    /* Light Mode */
    --ofma-bg-page: #f1f5f9;
    --ofma-bg-sidebar: #1e293b;
    --ofma-bg-card: #ffffff;
    --ofma-bg-hover: #f8fafc;
    --ofma-text: #1e293b;
    --ofma-text-secondary: #64748b;
    --ofma-text-muted: #94a3b8;
    --ofma-border: #e2e8f0;
    --ofma-border-light: #f1f5f9;
    --ofma-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ofma-sidebar-width: 240px;

    /* Buttons (zentral) */
    --ofma-btn-font-size: 0.75rem;
    --ofma-btn-font-size-sm: 0.6875rem;
    --ofma-btn-font-weight: 600;
    --ofma-btn-padding: 0.5rem 1rem;
    --ofma-btn-padding-sm: 0.375rem 0.75rem;
    --ofma-btn-min-width: 120px;
}

/* Dark Mode */
[data-theme="dark"] {
    --ofma-bg-page: #0f172a;
    --ofma-bg-sidebar: #1e293b;
    --ofma-bg-card: #1e293b;
    --ofma-bg-hover: #334155;
    --ofma-text: #94a3b8;
    --ofma-text-secondary: #94a3b8;
    --ofma-text-muted: #64748b;
    --ofma-border: #334155;
    --ofma-border-light: #263348;
}

/* Dashboard: Body-Scrollbar und ALLE Theme-Elemente ausblenden */
html:has(.ofma-dashboard),
body:has(.ofma-dashboard) {
    overflow: hidden !important;
    height: 100vh !important;
}

body:has(.ofma-dashboard) .of-header,
body:has(.ofma-dashboard) .of-mobile-menu,
body:has(.ofma-dashboard) footer,
body:has(.ofma-dashboard) .site-footer,
body:has(.ofma-dashboard) .of-footer,
body:has(.ofma-dashboard) .of-sticky-upgrade,
body:has(.ofma-dashboard) .of-scroll-top,
body:has(.ofma-dashboard) .of-page__header,
.ofma-dashboard ~ footer,
.ofma-dashboard ~ .of-sticky-upgrade,
.ofma-dashboard ~ .of-scroll-top {
    display: none !important;
}

/* page.php Wrapper zuruecksetzen — kein Padding/Background um das Dashboard */
body:has(.ofma-dashboard) .of-page,
body:has(.ofma-dashboard) .of-page__container,
body:has(.ofma-dashboard) .of-page__content,
body:has(.ofma-dashboard) .of-page__body {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* =====================================================
   GLOBALE FORMULAR-STYLES
   Einheitliche Styles für alle Formulare im Dashboard
   ===================================================== */

/* Text Input */
.of-input {
    padding: 0.375rem 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    font-family: inherit !important;
    color: #1e293b !important;
    background: #ffffff !important;
    transition: border-color 0.15s;
}

.of-input:focus {
    outline: none !important;
    border-color: #14b8a6 !important;
}

.of-input::placeholder {
    color: #94a3b8;
}

/* Small Input */
.of-input--sm {
    padding: 0.25rem 0.375rem !important;
    font-size: 11px !important;
}

/* Select Dropdown */
.of-select {
    padding: 0.375rem 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    font-family: inherit !important;
    color: #1e293b !important;
    background: #ffffff !important;
    cursor: pointer;
    transition: border-color 0.15s;
}

.of-select:focus {
    outline: none !important;
    border-color: #14b8a6 !important;
}

/* Small Select */
.of-select--sm {
    padding: 0.25rem 0.375rem !important;
    font-size: 11px !important;
}

/* Dark Mode: Inputs & Selects */
[data-theme="dark"] .of-input {
    background: var(--ofma-bg-card) !important;
    color: var(--ofma-text) !important;
    border-color: var(--ofma-border) !important;
}
[data-theme="dark"] .of-input::placeholder {
    color: var(--ofma-text-muted);
}
[data-theme="dark"] .of-select {
    background: var(--ofma-bg-card) !important;
    color: var(--ofma-text) !important;
    border-color: var(--ofma-border) !important;
}

/* Button Base */
.of-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.of-btn--primary {
    background: var(--ofma-primary);
    color: white;
}

.of-btn--primary:hover {
    background: var(--ofma-primary-dark);
}

.of-btn--secondary {
    background: var(--ofma-bg-card);
    border: 1px solid var(--ofma-secondary);
    color: var(--ofma-secondary);
}

.of-btn--secondary:hover {
    background: rgba(139, 92, 246, 0.1);
}

.of-btn--sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.6875rem;
}

/* Label */
.of-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ofma-text-secondary);
    margin-bottom: 0.25rem;
}

/* =====================================================
   FULLSCREEN LAYOUT
   ===================================================== */
.ofma-dashboard {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    padding: 0;
    background: var(--ofma-bg-page);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ofma-text);
    z-index: 9999;
    overflow: hidden;
}

.admin-bar .ofma-dashboard {
    top: 32px;
    height: calc(100vh - 32px);
}

/* =====================================================
   SIDEBAR
   ===================================================== */
.ofma-dashboard__sidebar {
    width: var(--ofma-sidebar-width);
    min-width: var(--ofma-sidebar-width);
    background: var(--ofma-bg-sidebar);
    display: flex;
    flex-direction: column;
    height: 100%;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.ofma-dashboard__sidebar-header {
    padding: 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ofma-dashboard__logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ofma-dashboard__logo-text {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #14b8a6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ofma-dashboard__nav {
    flex: 1;
    padding: 12px 10px;
    overflow-y: auto;
    min-height: 0;
}

.ofma-dashboard__nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
    margin-bottom: 4px;
}

.ofma-dashboard__nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.ofma-dashboard__nav-item--active {
    background: rgba(20, 184, 166, 0.12);
    color: var(--ofma-primary);
    box-shadow: none;
}

.ofma-dashboard__nav-icon {
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
}

.ofma-dashboard__nav-icon svg {
    flex-shrink: 0;
}

.ofma-dashboard__nav-item:hover .ofma-dashboard__nav-icon,
.ofma-dashboard__nav-item--active .ofma-dashboard__nav-icon {
    color: var(--ofma-primary);
}

.ofma-nav-pro {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #b8860b;
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.15), rgba(184, 134, 11, 0.1));
    border: 1px solid rgba(218, 165, 32, 0.3);
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 4px;
    vertical-align: super;
    line-height: 1;
}

.ofma-dashboard__nav-item--active .ofma-nav-pro {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.4);
}

.ofma-dashboard__nav-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    background: var(--ofma-secondary);
    color: #fff;
    border-radius: 4px;
}

.ofma-dashboard__nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 12px 0;
}

.ofma-dashboard__sidebar-footer {
    padding: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Dark Mode Toggle in Sidebar (oberhalb der Footer-Linie) */
.ofma-dashboard__theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 28px);
    padding: 8px 10px;
    margin: 0 14px 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

.ofma-dashboard__theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.ofma-dashboard__theme-toggle-icon { font-size: 14px; }

/* Light mode: show sun, hide moon */
.ofma-dashboard__theme-toggle-icon--dark { display: none; }
.ofma-dashboard__theme-toggle-icon--light { display: inline; }

[data-theme="dark"] .ofma-dashboard__theme-toggle-icon--dark { display: inline; }
[data-theme="dark"] .ofma-dashboard__theme-toggle-icon--light { display: none; }

[data-theme="dark"] .ofma-dashboard__theme-toggle-label::after { content: none; }
[data-theme="light"] .ofma-dashboard__theme-toggle-label::after { content: none; }

.ofma-dashboard__user-info { display: flex; align-items: center; gap: 10px; }

.ofma-dashboard__user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--ofma-primary), var(--ofma-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 14px;
}

.ofma-dashboard__user-name { font-size: 13px; font-weight: 600; color: #fff; }
.ofma-dashboard__user-plan { font-size: 11px; color: rgba(255, 255, 255, 0.5); }

/* =====================================================
   MAIN CONTENT
   ===================================================== */
.ofma-dashboard__main {
    flex: 1;
    width: 100%;
    max-width: none;
    padding: 20px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

/* Dezente Scrollbar */
.ofma-dashboard__main { scrollbar-width: thin; scrollbar-color: rgba(150,150,150,0.3) transparent; }
.ofma-dashboard__main::-webkit-scrollbar { width: 6px; }
.ofma-dashboard__main::-webkit-scrollbar-track { background: transparent; }
.ofma-dashboard__main::-webkit-scrollbar-thumb { background: rgba(150,150,150,0.3); border-radius: 3px; }
.ofma-dashboard__main::-webkit-scrollbar-thumb:hover { background: rgba(150,150,150,0.5); }

/* =====================================================
   STICKY HEADER
   ===================================================== */
.ofma-dashboard__sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ofma-bg-page);
    padding-bottom: 4px;
}

/* =====================================================
   HERO
   ===================================================== */
.ofma-dashboard__hero { margin-bottom: 8px; }

.ofma-dashboard__hero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ofma-dashboard__greeting {
    font-size: 26px;
    font-weight: 700;
    color: var(--ofma-text);
    margin: 0 0 4px 0;
}

.ofma-dashboard__date {
    font-size: 13px;
    color: var(--ofma-text-secondary);
    margin: 0;
}

/* =====================================================
   CARDS GRID (gridstack)
   ===================================================== */

/* gridstack übernimmt das Layout – alte CSS Grid Regeln entfernt */

/* Toolbar über dem Grid */
.ofma-dashboard__grid-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ofma-dashboard__toolbar-hint {
    font-size: 11px;
    color: var(--ofma-text-muted, #94a3b8);
}

.ofma-dashboard__reset-layout-btn {
    background: none;
    border: 1px solid var(--ofma-border, #e2e8f0);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 11px;
    color: var(--ofma-text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ofma-dashboard__reset-layout-btn:hover {
    color: var(--ofma-primary, #14b8a6);
    border-color: var(--ofma-primary, #14b8a6);
    background: rgba(20, 184, 166, 0.05);
}

/* VIX + Contango Mini-Kacheln */
.ofma-dashboard__toolbar-vix {
    display: flex;
    gap: 8px;
}
.ofma-dashboard__toolbar-vix-card {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--ofma-bg-card, #fff);
    border: 1px solid var(--ofma-border, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.ofma-dashboard__toolbar-vix-label {
    font-size: 11px;
    color: var(--ofma-text-muted, #94a3b8);
    font-weight: 500;
}
.ofma-dashboard__toolbar-vix-value {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ofma-dashboard__toolbar-vix-value--excellent { color: #10b981; }
.ofma-dashboard__toolbar-vix-value--good { color: #14b8a6; }
.ofma-dashboard__toolbar-vix-value--neutral { color: #64748b; }
.ofma-dashboard__toolbar-vix-value--warning { color: #f59e0b; }
.ofma-dashboard__toolbar-vix-value--danger { color: #ef4444; }

/* Add Widget Button + Dropdown */
.ofma-dashboard__add-widget-wrapper {
    position: relative;
    display: inline-block;
}

.ofma-dashboard__add-widget-btn {
    background: none;
    border: 1px solid var(--ofma-border, #e2e8f0);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 11px;
    color: var(--ofma-text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ofma-dashboard__add-widget-btn:hover {
    color: var(--ofma-primary, #14b8a6);
    border-color: var(--ofma-primary, #14b8a6);
    background: rgba(20, 184, 166, 0.05);
}

.ofma-dashboard__add-widget-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--ofma-bg-card, #fff);
    border: 1px solid var(--ofma-border, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 220px;
    z-index: 100;
    padding: 4px 0;
}

.ofma-dashboard__add-widget-dropdown.is-open {
    display: block;
}

.ofma-dashboard__add-widget-dropdown-item {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ofma-text, #1e293b);
    transition: background 0.15s ease;
}

.ofma-dashboard__add-widget-dropdown-item:hover {
    background: var(--ofma-bg-hover, #f8fafc);
}

/* Card Close Button (X) */
.ofma-dashboard__card-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--ofma-text-muted, #94a3b8);
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s ease, color 0.2s ease;
    padding: 2px 6px;
    line-height: 1;
    z-index: 2;
}

.ofma-dashboard__card-close:hover {
    opacity: 1;
    color: var(--ofma-danger, #ef4444);
}

#dashboard-grid {
    margin-bottom: 20px;
}

.ofma-dashboard__card {
    background: var(--ofma-bg-card);
    border-radius: 14px;
    border: 1px solid var(--ofma-border);
    box-shadow: var(--ofma-shadow-sm);
    overflow: hidden;
}

/* Cards füllen ihren grid-stack-item-content zu 100% */
.grid-stack-item-content {
    overflow: auto !important;
    border-radius: 14px;
}

/* Scrollbars in Cards */
.grid-stack-item-content::-webkit-scrollbar,
.ofma-dashboard__card-body::-webkit-scrollbar { width: 6px; }
.grid-stack-item-content::-webkit-scrollbar-track,
.ofma-dashboard__card-body::-webkit-scrollbar-track { background: var(--ofma-border-light); border-radius: 3px; }
.grid-stack-item-content::-webkit-scrollbar-thumb,
.ofma-dashboard__card-body::-webkit-scrollbar-thumb { background: var(--ofma-text-muted); border-radius: 3px; }

.grid-stack-item-content > .ofma-dashboard__card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.grid-stack-item-content > .ofma-dashboard__card > .ofma-dashboard__card-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ---- DRAG HANDLE: Grip-Icon im Card-Header ---- */
.grid-stack-item .ofma-dashboard__card-header {
    cursor: grab;
    position: relative;
    padding-left: 32px !important;
}

.grid-stack-item .ofma-dashboard__card-header:active {
    cursor: grabbing;
}

/* 6-Punkt Grip-Dots als ::before Pseudo-Element */
.grid-stack-item .ofma-dashboard__card-header::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 16px;
    background-image: radial-gradient(circle, var(--ofma-text-muted, #94a3b8) 1.2px, transparent 1.2px);
    background-size: 5px 5px;
    background-position: 0 0, 5px 5px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.grid-stack-item .ofma-dashboard__card-header:hover::before {
    opacity: 1;
}

/* Gridstack Placeholder (beim Drag) */
.grid-stack-placeholder > .placeholder-content {
    background: rgba(20, 184, 166, 0.1) !important;
    border: 2px dashed var(--ofma-primary, #14b8a6) !important;
    border-radius: 14px !important;
}

/* ---- RESIZE HANDLE: immer sichtbar ---- */
.grid-stack-item > .ui-resizable-se {
    width: 20px !important;
    height: 20px !important;
    bottom: 4px !important;
    right: 4px !important;
    background: none !important;
    text-indent: 0 !important;
    cursor: se-resize;
}

.grid-stack-item > .ui-resizable-se::after {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ofma-text-muted, #94a3b8);
    border-bottom: 2px solid var(--ofma-text-muted, #94a3b8);
    border-radius: 0 0 2px 0;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.grid-stack-item:hover > .ui-resizable-se::after {
    opacity: 1;
}

/* Gridstack: aktives Dragging Highlight */
.grid-stack-item.ui-draggable-dragging > .grid-stack-item-content {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    opacity: 0.9;
}

.ofma-dashboard__card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ofma-border-light);
}

.ofma-dashboard__card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ofma-text);
    margin: 0;
}

.ofma-dashboard__card-actions { display: flex; gap: 4px; }
.ofma-dashboard__card-body { padding: 12px; }

/* Chart Period Selector */
.ofma-dashboard__chart-periods {
    display: flex;
    gap: 4px;
    margin-right: 28px;
}

.ofma-dashboard__period-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--ofma-border);
    border-radius: 4px;
    background: var(--ofma-bg-card);
    color: var(--ofma-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ofma-dashboard__period-btn:hover {
    background: var(--ofma-bg-hover);
    border-color: var(--ofma-primary);
    color: var(--ofma-primary);
}

.ofma-dashboard__period-btn--active {
    background: var(--ofma-primary);
    border-color: var(--ofma-primary);
    color: #fff;
}

.ofma-dashboard__period-btn--active:hover {
    background: var(--ofma-primary-dark);
    border-color: var(--ofma-primary-dark);
    color: #fff;
}

/* Chart */
.ofma-dashboard__card--chart .ofma-dashboard__card-body {
    display: flex;
    flex-direction: column;
}

.ofma-dashboard__chart-container {
    flex: 1;
    min-height: 80px;
    border-radius: 8px;
    background: var(--ofma-bg-hover);
    position: relative;
    overflow: hidden;
}

.ofma-dashboard__chart-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ofma-text-muted);
    font-size: 13px;
}

.ofma-dashboard__chart-loading span {
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

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

/* Chart Footer: Trend+Tooltip+Perf links, Toggles rechts */
.ofma-dashboard__chart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    gap: 12px;
}
.ofma-dashboard__chart-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ofma-dashboard__chart-footer-left .ofma-dashboard__trend-tooltip {
    margin-left: -4px;
    margin-right: 4px;
}

.ofma-dashboard__trend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.ofma-dashboard__trend--bullish { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.ofma-dashboard__trend--bearish { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.ofma-dashboard__trend--neutral { background: rgba(100, 116, 139, 0.1); color: #64748b; }

/* Performance Badge */
.ofma-dashboard__perf-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}
.ofma-dashboard__perf-label { opacity: 0.7; }
.ofma-dashboard__perf-badge--positive { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.ofma-dashboard__perf-badge--negative { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.ofma-dashboard__perf-badge--neutral { background: rgba(100, 116, 139, 0.1); color: #64748b; }

/* Trend Tooltip */
.ofma-dashboard__trend-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    background: transparent;
    border: 1px solid #8b5cf6;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 600;
    color: #8b5cf6;
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
}

.ofma-dashboard__trend-tooltip:hover,
.ofma-dashboard__trend-tooltip:focus {
    background: #8b5cf6;
    color: white;
    outline: none;
}

.ofma-dashboard__trend-tooltip-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 240px;
    padding: 10px 14px;
    background: #6d28d9;
    color: white;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 100;
    pointer-events: none;
}

.ofma-dashboard__trend-tooltip:hover .ofma-dashboard__trend-tooltip-popup,
.ofma-dashboard__trend-tooltip:focus .ofma-dashboard__trend-tooltip-popup {
    display: block;
}

/* Chart Overlay Toggles */
.ofma-dashboard__chart-overlays {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.ofma-dashboard__overlay-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ofma-dashboard__overlay-separator {
    width: 1px;
    height: 16px;
    background: var(--ofma-border);
    margin: 0 6px;
}

.ofma-dashboard__overlay-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.ofma-dashboard__overlay-toggle:hover {
    background: var(--ofma-bg-hover);
}

.ofma-dashboard__overlay-cb {
    display: none;
}

.ofma-dashboard__overlay-switch {
    position: relative;
    width: 24px;
    height: 14px;
    background: var(--ofma-border);
    border-radius: 7px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.ofma-dashboard__overlay-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

/* Default checked = teal */
.ofma-dashboard__overlay-cb:checked + .ofma-dashboard__overlay-switch {
    background: var(--ofma-primary);
}

.ofma-dashboard__overlay-cb:checked + .ofma-dashboard__overlay-switch::after {
    transform: translateX(10px);
}

/* Per-Overlay Farben wenn aktiv */
[data-overlay="sma20"] .ofma-dashboard__overlay-cb:checked + .ofma-dashboard__overlay-switch { background: #f59e0b; }
[data-overlay="sma50"] .ofma-dashboard__overlay-cb:checked + .ofma-dashboard__overlay-switch { background: #3b82f6; }
[data-overlay="sma200"] .ofma-dashboard__overlay-cb:checked + .ofma-dashboard__overlay-switch { background: #6b7280; }
[data-overlay="52w"] .ofma-dashboard__overlay-cb:checked + .ofma-dashboard__overlay-switch { background: #10b981; }
[data-overlay="vix"] .ofma-dashboard__overlay-cb:checked + .ofma-dashboard__overlay-switch { background: #f97316; }

.ofma-dashboard__overlay-label {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ofma-text);
}

.ofma-dashboard__overlay-toggle--disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* Period Badge */
.ofma-dashboard__card-period {
    font-size: 11px;
    font-weight: 500;
    color: var(--ofma-text-muted);
    background: var(--ofma-bg-hover);
    padding: 4px 10px;
    border-radius: 12px;
}

/* =====================================================
   MARKTAMPEL CARD - Same as Homepage (of-ampel-*)
   ===================================================== */
.ofma-dashboard__card--ampel-wrapper {
    /* Wrapper für die Ampel-Karte */
}

/* Ampel Card - LIGHT MODE (Default) */
.of-ampel-card {
    width: 100%;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    padding: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.of-ampel-card::before {
    content: "";
    position: absolute;
    inset: -40%;
    opacity: 0.08;
    background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.3) 0, transparent 50%);
    pointer-events: none;
}
.of-ampel-inner {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.of-ampel-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.of-ampel-status-row { display: flex; align-items: center; gap: 10px; }
.of-ampel-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.of-ampel-card--green .of-ampel-icon { border-color: rgba(34, 197, 94, 0.6); box-shadow: 0 8px 20px rgba(34, 197, 94, 0.2); background: rgba(34, 197, 94, 0.1); }
.of-ampel-card--yellow .of-ampel-icon { border-color: rgba(234, 179, 8, 0.6); box-shadow: 0 8px 20px rgba(234, 179, 8, 0.2); background: rgba(234, 179, 8, 0.1); }
.of-ampel-card--red .of-ampel-icon { border-color: rgba(239, 68, 68, 0.6); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.2); background: rgba(239, 68, 68, 0.1); }
.of-ampel-letter { font-size: 1.1rem; font-weight: 700; line-height: 1; }
.of-ampel-card--green .of-ampel-letter { color: #16a34a; }
.of-ampel-card--yellow .of-ampel-letter { color: #ca8a04; }
.of-ampel-card--red .of-ampel-letter { color: #dc2626; }
.of-ampel-text-block { display: flex; flex-direction: column; gap: 1px; }
.of-ampel-label-small { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: #64748b; }
.of-ampel-main-text { font-size: 0.9rem; font-weight: 600; }
.of-ampel-card--green .of-ampel-main-text { color: #16a34a; }
.of-ampel-card--yellow .of-ampel-main-text { color: #ca8a04; }
.of-ampel-card--red .of-ampel-main-text { color: #dc2626; }
.of-ampel-subtext { font-size: 0.75rem; color: #64748b; }
.of-ampel-score-pill { text-align: right; }
.of-ampel-score-caption { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: #64748b; }
.of-ampel-score-highlight { font-size: 1.2rem; font-weight: 700; display: block; line-height: 1.1; }
.of-ampel-score-max { font-size: 0.65rem; font-weight: 400; color: #64748b; }
.of-ampel-card--green .of-ampel-score-highlight { color: #16a34a; }
.of-ampel-card--yellow .of-ampel-score-highlight { color: #ca8a04; }
.of-ampel-card--red .of-ampel-score-highlight { color: #dc2626; }
.of-ampel-bottom { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.of-ampel-bottom-row { display: flex; justify-content: space-between; align-items: center; }

/* Score-Balken mit Farbverlauf */
.of-ampel-score-bar {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, #dc2626 0%, #dc2626 40%, #f59e0b 40%, #f59e0b 65%, #22c55e 65%, #22c55e 100%);
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}
.of-ampel-score-indicator {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #334155;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 2;
}
.of-ampel-score-labels {
    position: relative;
    height: 12px;
    margin-top: 2px;
    font-size: 9px;
    color: #64748b;
}
.of-ampel-score-labels span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.of-ampel-score-labels span:nth-child(1) { left: 0; transform: translateX(0); }
.of-ampel-score-labels span:nth-child(5) { left: 100%; transform: translateX(-100%); }
.of-ampel-label-stop { left: 20%; color: #dc2626; }
.of-ampel-label-vorsicht { left: 52%; color: #ca8a04; }
.of-ampel-label-go { left: 82%; color: #16a34a; }
.of-ampel-tagline { font-size: 0.75rem; color: #64748b; flex: 1; }
.of-ampel-tagline strong { color: #0f172a; }

/* Mehr Details Button */
.of-ampel-details-btn {
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.4);
    color: #14b8a6;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.of-ampel-details-btn:hover {
    background: rgba(20, 184, 166, 0.2);
    border-color: rgba(20, 184, 166, 0.6);
    transform: translateY(-1px);
}

/* Ampel Card - DARK MODE */
[data-theme="dark"] .of-ampel-card {
    background: radial-gradient(circle at top, #0f172a 0, #020617 60%);
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.7);
}
[data-theme="dark"] .of-ampel-card::before { opacity: 0.15; }
[data-theme="dark"] .of-ampel-icon {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(148, 163, 184, 0.6);
}
[data-theme="dark"] .of-ampel-card--green .of-ampel-icon { border-color: rgba(74, 222, 128, 0.8); box-shadow: 0 12px 30px rgba(34, 197, 94, 0.35); background: rgba(34, 197, 94, 0.15); }
[data-theme="dark"] .of-ampel-card--yellow .of-ampel-icon { border-color: rgba(250, 204, 21, 0.9); box-shadow: 0 12px 30px rgba(250, 204, 21, 0.25); background: rgba(250, 204, 21, 0.15); }
[data-theme="dark"] .of-ampel-card--red .of-ampel-icon { border-color: rgba(248, 113, 113, 0.9); box-shadow: 0 12px 30px rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.15); }
[data-theme="dark"] .of-ampel-card--green .of-ampel-letter { color: #4ade80; }
[data-theme="dark"] .of-ampel-card--yellow .of-ampel-letter { color: #facc15; }
[data-theme="dark"] .of-ampel-card--red .of-ampel-letter { color: #f97373; }
[data-theme="dark"] .of-ampel-label-small { color: #94a3b8; }
[data-theme="dark"] .of-ampel-card--green .of-ampel-main-text { color: #4ade80; }
[data-theme="dark"] .of-ampel-card--yellow .of-ampel-main-text { color: #facc15; }
[data-theme="dark"] .of-ampel-card--red .of-ampel-main-text { color: #f97373; }
[data-theme="dark"] .of-ampel-subtext { color: #94a3b8; }
[data-theme="dark"] .of-ampel-score-caption { color: #94a3b8; }
[data-theme="dark"] .of-ampel-score-max { color: #94a3b8; }
[data-theme="dark"] .of-ampel-card--green .of-ampel-score-highlight { color: #4ade80; }
[data-theme="dark"] .of-ampel-card--yellow .of-ampel-score-highlight { color: #facc15; }
[data-theme="dark"] .of-ampel-card--red .of-ampel-score-highlight { color: #f97373; }
[data-theme="dark"] .of-ampel-score-bar { box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); }
[data-theme="dark"] .of-ampel-score-indicator { border-color: #0f172a; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
[data-theme="dark"] .of-ampel-score-labels { color: #64748b; }
[data-theme="dark"] .of-ampel-label-stop { color: #f87171; }
[data-theme="dark"] .of-ampel-label-vorsicht { color: #fbbf24; }
[data-theme="dark"] .of-ampel-label-go { color: #4ade80; }
[data-theme="dark"] .of-ampel-tagline { color: #94a3b8; }
[data-theme="dark"] .of-ampel-tagline strong { color: #e2e8f0; }

/* Indikatoren kompakt */
.ofma-dashboard__indicators-compact {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.ofma-dashboard__indicator-mini {
    background: var(--ofma-bg-hover);
    border-radius: 8px;
    padding: 10px 6px;
    text-align: center;
}

.ofma-dashboard__indicator-mini-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--ofma-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.ofma-dashboard__indicator-mini-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--ofma-text);
    margin-bottom: 2px;
}

.ofma-dashboard__indicator-mini-label { font-size: 10px; }

.ofma-dashboard__indicator-mini--excellent .ofma-dashboard__indicator-mini-label { color: #10b981; }
.ofma-dashboard__indicator-mini--good .ofma-dashboard__indicator-mini-label { color: #3b82f6; }
.ofma-dashboard__indicator-mini--warning .ofma-dashboard__indicator-mini-label { color: #f59e0b; }
.ofma-dashboard__indicator-mini--danger .ofma-dashboard__indicator-mini-label,
.ofma-dashboard__indicator-mini--error .ofma-dashboard__indicator-mini-label { color: #ef4444; }

.ofma-dashboard__indicator-mini--error .ofma-dashboard__indicator-mini-value {
    font-size: 9px;
    color: #ef4444;
}

/* =====================================================
   EARNINGS KALENDER - Logo-Tiles
   ===================================================== */
.ofma-earnings-calendar {
    margin-bottom: 20px;
}

.ofma-earnings-calendar__card {
    background: var(--ofma-bg-card);
    border-radius: 16px;
    border: 1px solid var(--ofma-border-light);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.ofma-earnings-calendar__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.ofma-earnings-calendar__day {
    background: var(--ofma-bg-hover);
    border-radius: 10px;
    border: 1px solid var(--ofma-border-light);
    overflow: hidden;
}

.ofma-earnings-calendar__day-header {
    background: var(--ofma-bg-card);
    border-bottom: 1px solid var(--ofma-border);
    padding: 10px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ofma-earnings-calendar__day-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ofma-text);
}

.ofma-earnings-calendar__day-date {
    font-size: 11px;
    color: var(--ofma-text-muted);
}

.ofma-earnings-calendar__day-body {
    padding: 10px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    min-height: 60px;
}

.ofma-earnings-calendar__stock {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 56px;
    gap: 3px;
    cursor: default;
    transition: transform 0.15s ease;
}

.ofma-earnings-calendar__stock:hover {
    transform: scale(1.08);
}

.ofma-earnings-calendar__ticker {
    font-size: 10px;
    font-weight: 600;
    color: var(--ofma-text);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ofma-earnings-calendar__logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--ofma-border-light);
    background: var(--ofma-bg-card);
}

.ofma-earnings-calendar__fallback {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #14b8a6;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
}

.ofma-earnings-calendar__logo-wrap {
    position: relative;
    width: 40px;
    height: 40px;
}

.ofma-earnings-calendar__time {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    border: 1.5px solid var(--ofma-bg-card);
}

.ofma-earnings-calendar__time--bmo {
    background: #fef3c7;
    color: #f59e0b;
}

.ofma-earnings-calendar__time--amc {
    background: #ede9fe;
    color: #8b5cf6;
}

.ofma-earnings-calendar__legend {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: var(--ofma-text-secondary);
}

.ofma-earnings-calendar__legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Earnings Close Button */
.ofma-earnings-calendar__close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--ofma-text-muted, #94a3b8);
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s ease, color 0.2s ease;
    padding: 2px 6px;
    line-height: 1;
    margin-left: 4px;
    flex-shrink: 0;
}

.ofma-earnings-calendar__close:hover {
    opacity: 1;
    color: var(--ofma-danger, #ef4444);
}

/* Earnings Filter Controls */
.ofma-earnings-calendar__controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ofma-earnings-calendar__filter {
    display: flex;
    background: var(--ofma-bg-hover);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.ofma-earnings-calendar__filter-option {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.ofma-earnings-calendar__filter-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ofma-earnings-calendar__filter-label {
    display: block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ofma-text-secondary);
    border-radius: 4px;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.ofma-earnings-calendar__filter-option input[type="radio"]:checked + .ofma-earnings-calendar__filter-label {
    background: var(--ofma-bg-card);
    color: var(--ofma-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.ofma-earnings-calendar__filter-label:hover {
    color: var(--ofma-text);
}

/* Watchlist-Modus: Nicht-Watchlist gedimmt */
.ofma-earnings-calendar__stock--dimmed {
    opacity: 0.4;
    filter: grayscale(100%);
}

/* Watchlist-Modus: Watchlist hervorgehoben (quadratisch, ohne Violett) */
.ofma-earnings-calendar__stock--watchlist .ofma-earnings-calendar__ticker {
    font-weight: 700;
}

.ofma-earnings-calendar__stock--watchlist .ofma-earnings-calendar__logo,
.ofma-earnings-calendar__stock--watchlist .ofma-earnings-calendar__fallback {
    border-radius: 10px;
}

/* OF Symbole-Modus: Tracked hervorgehoben (quadratisch, ohne Violett) */
.ofma-earnings-calendar__stock--tracked .ofma-earnings-calendar__ticker {
    font-weight: 700;
}

.ofma-earnings-calendar__stock--tracked .ofma-earnings-calendar__logo,
.ofma-earnings-calendar__stock--tracked .ofma-earnings-calendar__fallback {
    border-radius: 10px;
}

/* Per-Day Empty State */
.ofma-earnings-calendar__day-empty {
    display: none;
    text-align: center;
    padding: 16px 8px;
    font-size: 11px;
    color: var(--ofma-text-muted);
}

/* Global Filter Empty State */
.ofma-earnings-calendar__filter-empty {
    display: none;
    text-align: center;
    padding: 30px 16px;
    color: var(--ofma-text-muted);
}

.ofma-earnings-calendar__filter-empty span {
    font-size: 28px;
    display: block;
    margin-bottom: 6px;
}

.ofma-earnings-calendar__filter-empty small {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--ofma-text-muted);
}

.ofma-earnings-calendar__filter-empty small a {
    color: var(--ofma-primary);
    text-decoration: none;
}

.ofma-earnings-calendar__filter-empty small a:hover {
    text-decoration: underline;
}

.ofma-dashboard__empty { text-align: center; padding: 30px 16px; color: var(--ofma-text-muted); }
.ofma-dashboard__empty span { font-size: 28px; display: block; margin-bottom: 6px; }

.ofma-dashboard__empty--collecting small {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.5;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

/* =====================================================
   QUICKLINKS
   ===================================================== */
.ofma-dashboard__quicklinks { display: flex; flex-direction: column; gap: 10px; }

.ofma-dashboard__quicklink {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--ofma-bg-hover);
    border: 1px solid var(--ofma-border);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.ofma-dashboard__quicklink:hover {
    border-color: var(--ofma-primary);
    background: var(--ofma-primary-light);
    transform: translateX(4px);
}

.ofma-dashboard__quicklink--locked { opacity: 0.6; pointer-events: none; }

.ofma-dashboard__quicklink-icon {
    font-size: 24px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ofma-bg-card);
    border-radius: 8px;
}

.ofma-dashboard__quicklink-text { flex: 1; }
.ofma-dashboard__quicklink-text strong { display: block; font-size: 13px; color: var(--ofma-text); }
.ofma-dashboard__quicklink-text small { font-size: 11px; color: var(--ofma-text-muted); }

.ofma-dashboard__quicklink-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 3px 7px;
    background: var(--ofma-secondary);
    color: #fff;
    border-radius: 4px;
}

/* =====================================================
   FEATURE-VORSCHLAEGE & ROADMAP (GridStack Widget)
   ===================================================== */
.ofma-dashboard__card-body--features {
    overflow-y: auto;
}

.ofma-dashboard__features-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Eingabebereich */
.ofma-dashboard__features-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ofma-dashboard__features-subtitle {
    font-size: 13px;
    color: var(--ofma-text-secondary);
    margin: 0;
}

.ofma-dashboard__features-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.ofma-dashboard__features-textarea {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--ofma-border);
    border-radius: 8px;
    background: var(--ofma-bg-hover) !important;
    color: var(--ofma-text) !important;
    font-size: 13px;
    font-family: inherit;
    resize: none;
    transition: border-color 0.15s ease;
}

.ofma-dashboard__features-textarea:focus {
    outline: none;
    border-color: var(--ofma-primary);
}

.ofma-dashboard__features-textarea::placeholder {
    color: var(--ofma-text-muted);
}

.ofma-dashboard__features-btn {
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--ofma-primary), var(--ofma-primary-dark));
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.ofma-dashboard__features-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.ofma-dashboard__features-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.ofma-dashboard__features-success {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    color: #10b981;
    font-size: 13px;
    font-weight: 500;
}

/* Roadmap */
.ofma-dashboard__roadmap {
    background: var(--ofma-bg-hover);
    border-radius: 10px;
    padding: 14px;
    border: 1px solid var(--ofma-border-light);
}

.ofma-dashboard__roadmap-header {
    font-size: 16px;
    font-weight: 600;
    color: var(--ofma-text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ofma-dashboard__roadmap-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ofma-dashboard__roadmap-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--ofma-bg-card);
    border: 1px solid var(--ofma-border-light);
    border-radius: 8px;
    gap: 10px;
}

.ofma-dashboard__roadmap-title {
    font-size: 13px;
    color: var(--ofma-text);
    flex: 1;
}

.ofma-dashboard__roadmap-status {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.ofma-dashboard__roadmap-status--planned {
    background: rgba(100, 116, 139, 0.15);
    color: #64748b;
}

.ofma-dashboard__roadmap-status--progress {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.ofma-dashboard__roadmap-status--done {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.ofma-dashboard__roadmap-status--new {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

/* =====================================================
   MARKTAMPEL DETAILS MODAL
   ===================================================== */
.ofma-ampel-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10001;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ofma-ampel-modal.is-open { display: flex; }

.ofma-ampel-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.ofma-ampel-modal__content {
    position: relative;
    z-index: 1;
    background: var(--ofma-bg-card);
    border-radius: 16px;
    border: 1px solid var(--ofma-border);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ofma-ampel-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--ofma-border);
    background: var(--ofma-bg-hover);
}

.ofma-ampel-modal__header h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ofma-text);
    margin: 0;
}

.ofma-ampel-modal__close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--ofma-border);
    background: var(--ofma-bg-card);
    color: var(--ofma-text-secondary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ofma-ampel-modal__close:hover {
    background: var(--ofma-danger);
    border-color: var(--ofma-danger);
    color: #fff;
}

.ofma-ampel-modal__body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.ofma-ampel-modal__intro {
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 24px;
}
.ofma-ampel-modal__intro p {
    margin: 0;
    font-size: 14px;
    color: var(--ofma-text-secondary);
    line-height: 1.6;
}
.ofma-ampel-modal__intro strong { color: var(--ofma-text); }

.ofma-ampel-modal__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(20, 184, 166, 0.2);
}
.ofma-ampel-modal__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--ofma-text-secondary);
}
.ofma-ampel-modal__legend-item span:first-child {
    font-size: 14px;
    min-width: 24px;
    text-align: center;
}
.ofma-ampel-modal__legend-item--warning span:first-child {
    color: #f59e0b;
    font-size: 18px;
}

/* Quality Emoji in Cards - Warning orange */
.ofma-ampel-modal__card--warning .ofma-ampel-modal__card-quality {
    color: #f59e0b;
    font-size: 1.3rem;
}

.ofma-ampel-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Component Card - Debug Helper Style */
.ofma-ampel-modal__card {
    background: var(--ofma-bg-hover);
    border: 1px solid var(--ofma-border);
    border-radius: 12px;
    padding: 16px;
    transition: border-color 0.2s ease;
}
.ofma-ampel-modal__card:hover { border-color: var(--ofma-primary); }
.ofma-ampel-modal__card:last-child { grid-column: span 2; }

/* Header mit Name und Gewichtung */
.ofma-ampel-modal__card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.ofma-ampel-modal__card-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ofma-ampel-modal__card-title strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--ofma-text);
}
.ofma-ampel-modal__card-weight {
    font-size: 11px;
    color: var(--ofma-text-muted);
    background: var(--ofma-bg-card);
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
}

/* Großer Wert mit Einheit und Quality-Emoji */
.ofma-ampel-modal__card-value-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}
.ofma-ampel-modal__card-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ofma-text);
}
.ofma-ampel-modal__card-unit {
    font-size: 0.85rem;
    color: var(--ofma-text-muted);
}
.ofma-ampel-modal__card-quality {
    font-size: 1.1rem;
    margin-left: auto;
}

/* Status Label */
.ofma-ampel-modal__card-label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}
.ofma-ampel-modal__card--excellent .ofma-ampel-modal__card-label { color: #10b981; }
.ofma-ampel-modal__card--good .ofma-ampel-modal__card-label { color: #3b82f6; }
.ofma-ampel-modal__card--warning .ofma-ampel-modal__card-label { color: #f59e0b; }
.ofma-ampel-modal__card--danger .ofma-ampel-modal__card-label,
.ofma-ampel-modal__card--error .ofma-ampel-modal__card-label { color: #ef4444; }

/* Hint Text */
.ofma-ampel-modal__card-hint {
    font-size: 13px;
    color: var(--ofma-text-secondary);
    margin-bottom: 12px;
}

/* Progress Bar */
.ofma-ampel-modal__card-bar {
    height: 6px;
    background: var(--ofma-border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}
.ofma-ampel-modal__card-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.ofma-ampel-modal__card--excellent .ofma-ampel-modal__card-bar-fill { background: linear-gradient(90deg, #059669, #10b981); }
.ofma-ampel-modal__card--good .ofma-ampel-modal__card-bar-fill { background: linear-gradient(90deg, #2563eb, #3b82f6); }
.ofma-ampel-modal__card--warning .ofma-ampel-modal__card-bar-fill { background: linear-gradient(90deg, #d97706, #f59e0b); }
.ofma-ampel-modal__card--danger .ofma-ampel-modal__card-bar-fill,
.ofma-ampel-modal__card--error .ofma-ampel-modal__card-bar-fill { background: linear-gradient(90deg, #dc2626, #ef4444); }

/* Score Meta */
.ofma-ampel-modal__card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--ofma-text-muted);
    margin-bottom: 12px;
}
.ofma-ampel-modal__card-contribution { color: var(--ofma-primary); font-weight: 600; }

/* Stillhalter Benefit Box */
.ofma-ampel-modal__card-benefit {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}
.ofma-ampel-modal__card-benefit strong {
    display: block;
    font-size: 12px;
    color: var(--ofma-secondary);
    margin-bottom: 6px;
}
.ofma-ampel-modal__card-benefit p {
    margin: 0;
    font-size: 12px;
    color: var(--ofma-text-secondary);
    line-height: 1.5;
}

/* Thresholds */
.ofma-ampel-modal__card-thresholds {
    font-size: 11px;
    color: var(--ofma-text-muted);
    padding-top: 8px;
    border-top: 1px solid var(--ofma-border-light);
}
.ofma-ampel-modal__card-thresholds strong {
    color: var(--ofma-text-secondary);
}

/* Icon (optional, now hidden) */
.ofma-ampel-modal__card-icon { display: none; }

.ofma-ampel-modal__footer {
    background: var(--ofma-bg-hover);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.ofma-ampel-modal__score-summary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 15px;
}
.ofma-ampel-modal__score-summary strong { color: var(--ofma-text); }

.ofma-ampel-modal__score-value {
    font-size: 20px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 6px;
}
.ofma-ampel-modal__score-value--green { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.ofma-ampel-modal__score-value--yellow { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.ofma-ampel-modal__score-value--red { background: rgba(239, 68, 68, 0.15); color: #ef4444; }


/* Dark Mode Button */
[data-theme="dark"] .of-ampel-details-btn {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.4);
    color: #38bdf8;
}
[data-theme="dark"] .of-ampel-details-btn:hover {
    background: rgba(56, 189, 248, 0.25);
    border-color: rgba(56, 189, 248, 0.6);
}

/* =====================================================
   TOP/FLOP STOCKS CARD
   ===================================================== */
.ofma-dashboard__card--topflop {
    display: flex;
    flex-direction: column;
}

.ofma-dashboard__topflop-title-block {
    margin-bottom: 10px;
}

.ofma-dashboard__topflop-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: var(--ofma-text);
}

.ofma-dashboard__topflop-subtitle {
    font-size: 12px;
    color: var(--ofma-text-muted);
    margin: 2px 0 0 0;
}

.ofma-dashboard__card--topflop .ofma-dashboard__card-body {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ofma-dashboard__topflop-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    flex: 1;
}

.ofma-dashboard__topflop-section {
    background: var(--ofma-bg-hover);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid var(--ofma-border-light);
    display: flex;
    flex-direction: column;
}

.ofma-dashboard__topflop-section--top {
    border-color: rgba(16, 185, 129, 0.2);
}

.ofma-dashboard__topflop-section--flop {
    border-color: rgba(239, 68, 68, 0.2);
}

.ofma-dashboard__topflop-header {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ofma-border);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ofma-dashboard__topflop-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    overflow-y: auto;
}

.ofma-dashboard__topflop-list::-webkit-scrollbar {
    width: 4px;
}

.ofma-dashboard__topflop-list::-webkit-scrollbar-thumb {
    background: var(--ofma-text-muted);
    border-radius: 2px;
}

.ofma-dashboard__topflop-item {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--ofma-bg-card);
    border: 1px solid var(--ofma-border-light);
    font-size: 12px;
    transition: all 0.15s ease;
}

.ofma-dashboard__topflop-item:hover {
    border-color: var(--ofma-primary);
    background: var(--ofma-primary-light);
}

.ofma-dashboard__topflop-symbol {
    font-weight: 600;
    color: var(--ofma-text);
    font-size: 13px;
}

.ofma-dashboard__topflop-chart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ofma-text-muted);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.ofma-dashboard__topflop-chart-icon:hover {
    color: var(--ofma-primary);
    background: var(--ofma-primary-light);
}

.ofma-dashboard__topflop-price {
    font-size: 11px;
    color: var(--ofma-text-muted);
    font-variant-numeric: tabular-nums;
}

.ofma-dashboard__topflop-change {
    font-weight: 700;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    min-width: 55px;
    text-align: right;
}

.ofma-dashboard__topflop-change--positive {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.ofma-dashboard__topflop-change--negative {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.ofma-dashboard__topflop-ivr {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    min-width: 28px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--ofma-bg-hover);
}

.ofma-dashboard__topflop-ivr::before {
    content: "IVR ";
    font-size: 10px;
    opacity: 0.8;
}

/* IV-Rank Badge Farben (Stillhalter-Perspektive) */
.ofma-dashboard__topflop-ivr.ivr--low {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: #fff;
}
.ofma-dashboard__topflop-ivr.ivr--sweet {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: #fff;
}
.ofma-dashboard__topflop-ivr.ivr--high {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    color: #fff;
}
.ofma-dashboard__topflop-ivr.ivr--extreme {
    background: linear-gradient(135deg, #ca8a04 0%, #eab308 100%);
    color: #fff;
}

.ofma-dashboard__topflop-empty {
    text-align: center;
    padding: 20px;
    color: var(--ofma-text-muted);
    font-size: 12px;
}

/* Top/Flop Toggle Switch - stopPropagation fuer GridStack Drag */
.ofma-dashboard__topflop-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: 8px;
    z-index: 10;
}

.ofma-dashboard__topflop-toggle-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--ofma-text-muted);
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
}

.ofma-dashboard__topflop-toggle-label--active {
    color: var(--ofma-primary);
    font-weight: 600;
}

.ofma-dashboard__toggle-switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    cursor: pointer;
}

.ofma-dashboard__toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ofma-dashboard__toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--ofma-border);
    border-radius: 18px;
    transition: background 0.2s;
}

.ofma-dashboard__toggle-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.ofma-dashboard__toggle-switch input:checked + .ofma-dashboard__toggle-slider {
    background: var(--ofma-primary);
}

.ofma-dashboard__toggle-switch input:checked + .ofma-dashboard__toggle-slider::before {
    transform: translateX(14px);
}

/* =====================================================
   STOCK CHART MODAL (Dashboard)
   ===================================================== */
.ofma-dashboard__chart-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
}

.ofma-dashboard__chart-modal.is-open {
    display: flex;
}

.ofma-dashboard__chart-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.ofma-dashboard__chart-modal-container {
    position: relative;
    width: 90%;
    max-width: 900px;
    height: 70vh;
    max-height: 600px;
    background: var(--ofma-bg-card);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ofma-dashboard__chart-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ofma-border);
    flex-shrink: 0;
}

.ofma-dashboard__chart-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ofma-text);
}

.ofma-dashboard__chart-modal-legend {
    display: flex;
    gap: 14px;
    margin-left: auto;
    align-items: center;
}

.ofma-dashboard__chart-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--ofma-text-secondary);
}

.ofma-dashboard__chart-legend-line {
    display: inline-block;
    width: 16px;
    height: 2px;
    border-radius: 1px;
}

.ofma-dashboard__chart-legend-line--sma50 {
    background: #3b82f6;
}

.ofma-dashboard__chart-legend-line--sma200 {
    background: #f59e0b;
}

.ofma-dashboard__chart-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--ofma-text-muted);
    font-size: 20px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    margin-left: 8px;
}

.ofma-dashboard__chart-modal-close:hover {
    background: var(--ofma-bg-hover);
    color: var(--ofma-text);
}

.ofma-dashboard__chart-modal-body {
    flex: 1;
    position: relative;
    padding: 0;
}

#dashboard-chart-container {
    width: 100%;
    height: 100%;
}

.ofma-dashboard__chart-modal-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ofma-text-muted);
    font-size: 13px;
    z-index: 2;
}

/* =====================================================
   US-FEIERTAGE KACHEL
   ===================================================== */
.ofma-dashboard__card--holidays {
    /* Standard Kachel */
}

.ofma-dashboard__card-icon {
    vertical-align: middle;
    margin-right: 4px;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

.ofma-dashboard__card-hint {
    font-size: 12px;
    color: var(--ofma-text-muted);
    font-weight: 400;
}

.ofma-dashboard__holidays-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ofma-dashboard__holiday-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--ofma-bg-hover);
    border-radius: 6px;
    border: 1px solid var(--ofma-border-light);
    transition: all 0.2s;
}

.ofma-dashboard__holiday-item--next {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-color: rgba(59, 130, 246, 0.3);
}

.ofma-dashboard__holiday-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    padding: 3px 6px;
    background: var(--ofma-bg-card);
    border-radius: 5px;
    border: 1px solid var(--ofma-border-light);
}

.ofma-dashboard__holiday-item--next .ofma-dashboard__holiday-date {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-color: transparent;
}

.ofma-dashboard__holiday-item--next .ofma-dashboard__holiday-day,
.ofma-dashboard__holiday-item--next .ofma-dashboard__holiday-full-date {
    color: #fff;
}

.ofma-dashboard__holiday-day {
    font-size: 11px;
    font-weight: 700;
    color: var(--ofma-text);
}

.ofma-dashboard__holiday-full-date {
    font-size: 10px;
    color: var(--ofma-text-muted);
}

.ofma-dashboard__holiday-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ofma-dashboard__holiday-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--ofma-text);
}

.ofma-dashboard__holiday-badge {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1200px) {
    .ofma-dashboard__indicators-compact { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .ofma-dashboard__sidebar { width: 64px; min-width: 64px; }
    .ofma-dashboard__logo-text, .ofma-dashboard__nav-label, .ofma-dashboard__user-details { display: none; }
    .ofma-dashboard__nav-item { justify-content: center; padding: 10px; }
    .ofma-dashboard__main { padding: 16px; }
    .ofma-dashboard__indicators-compact { grid-template-columns: repeat(2, 1fr); }
    .ofma-earnings-calendar__controls { flex-wrap: wrap; gap: 10px; }
}

@media (max-width: 600px) {
    .ofma-dashboard__sidebar { display: none; }
    .ofma-dashboard__main { padding: 12px; }
    .ofma-dashboard__greeting { font-size: 20px; }
    .ofma-dashboard__hero-row { flex-wrap: wrap; }
    .ofma-dashboard__ampel-main { flex-wrap: wrap; }
    .ofma-dashboard__indicators-compact { grid-template-columns: 1fr 1fr; }
    .ofma-dashboard__feedback-inner { flex-direction: column; text-align: center; }
    .ofma-ampel-modal__grid { grid-template-columns: 1fr; }
    .ofma-ampel-modal__card:last-child { grid-column: span 1; }
    .ofma-ampel-modal__content { max-height: 95vh; }
    .ofma-ampel-modal__body { padding: 16px; }
    .of-ampel-bottom-row { flex-wrap: wrap; gap: 10px; }
    .of-ampel-details-btn { width: 100%; text-align: center; }
    .ofma-dashboard__topflop-container { grid-template-columns: 1fr; }
    .ofma-dashboard__topflop-list { max-height: 250px; }
    /* grid-row span entfernt – gridstack steuert Layout */
    .ofma-dashboard__features-form { flex-direction: column; }
    .ofma-dashboard__features-btn { width: 100%; }
    /* Feiertage mobil */
    .ofma-dashboard__holiday-item { padding: 8px 10px; gap: 10px; }
    .ofma-dashboard__holiday-date { min-width: 50px; padding: 4px 8px; }
    .ofma-dashboard__holiday-name { font-size: 13px; }
    .ofma-dashboard__holiday-info { flex-wrap: wrap; gap: 6px; }
    /* Earnings Kalender mobil */
    .ofma-earnings-calendar__grid { grid-template-columns: repeat(5, 1fr); overflow-x: auto; }
    .ofma-earnings-calendar__day { min-width: 100px; }
}

@media (max-width: 768px) {
    .ofma-ampel-modal__grid { grid-template-columns: 1fr; }
    .ofma-ampel-modal__card:last-child { grid-column: span 1; }
}

/* =====================================================
   SEKTOR-STATISTIKEN WIDGET
   ===================================================== */

.ofma-dashboard__sector-stats {
    margin-top: 0;
}

.ofma-dashboard__card--sector-stats {
    background: var(--ofma-bg-card);
    border-radius: 12px;
    box-shadow: var(--ofma-shadow-sm);
    overflow: hidden;
}

.ofma-sector-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.ofma-dashboard__card--sector-stats-single .ofma-sector-stats {
    grid-template-columns: 1fr;
    gap: 16px;
}

.ofma-sector-stats__section {
    display: flex;
    flex-direction: column;
}


.ofma-sector-stats__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ofma-border-light);
}

.ofma-sector-stats__icon {
    font-size: 22px;
    line-height: 1;
}

.ofma-sector-stats__title-block {
    flex: 1;
}

.ofma-sector-stats__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ofma-text);
    margin: 0;
}

.ofma-sector-stats__subtitle {
    font-size: 12px;
    color: var(--ofma-text-muted);
    margin: 2px 0 0 0;
}

.ofma-sector-stats__avg {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 4px 10px;
    background: var(--ofma-border-light);
    border-radius: 6px;
}

.ofma-sector-stats__avg-label {
    font-size: 9px;
    color: var(--ofma-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ofma-sector-stats__avg-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--ofma-primary);
}

.ofma-sector-stats__bars {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ofma-sector-stats__row {
    display: grid;
    grid-template-columns: 140px 1fr 50px auto;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    border-radius: 4px;
    transition: background 0.15s;
    cursor: default;
}

.ofma-sector-stats__row:hover {
    background: var(--ofma-border-light);
}

.ofma-sector-stats__sector {
    font-size: 12px;
    color: var(--ofma-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ofma-sector-stats__bar-container {
    height: 14px;
    background: var(--ofma-border-light);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.ofma-sector-stats__bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* KGV Farben - niedrig = gruen, hoch = rot */
.ofma-sector-stats__bar--low {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.ofma-sector-stats__bar--mid {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.ofma-sector-stats__bar--high {
    background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
}

/* IV Rank Farben - hoch = gruen (besser fuer Stillhalter) */
.ofma-sector-stats__bar--iv-high {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.ofma-sector-stats__bar--iv-mid {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.ofma-sector-stats__bar--iv-low {
    background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%);
}

.ofma-sector-stats__value {
    font-size: 12px;
    font-weight: 600;
    color: var(--ofma-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Forward vs Trailing KGV Trend-Pfeil */
.ofma-sector-stats__trend {
    font-size: 10px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.ofma-sector-stats__trend--up {
    color: #ef4444;
}

.ofma-sector-stats__trend--down {
    color: #10b981;
}

.ofma-sector-stats__trend--flat {
    color: #f59e0b;
}

/* Legende */
.ofma-sector-stats__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--ofma-border, #e5e7eb);
    font-size: 9px;
    color: #9ca3af;
}

.ofma-sector-stats__legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ofma-sector-stats__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.ofma-sector-stats__legend-dot--low { background: #10b981; }
.ofma-sector-stats__legend-dot--mid { background: #f59e0b; }
.ofma-sector-stats__legend-dot--high { background: #ef4444; }
.ofma-sector-stats__legend-dot--iv-high { background: #10b981; }
.ofma-sector-stats__legend-dot--iv-mid { background: #f59e0b; }
.ofma-sector-stats__legend-dot--iv-low { background: #94a3b8; }

.ofma-sector-stats__legend-separator {
    width: 1px;
    height: 12px;
    background: var(--ofma-border, #e2e8f0);
    flex-shrink: 0;
}

.ofma-sector-stats__legend-arrow {
    font-size: 9px;
    flex-shrink: 0;
}

.ofma-sector-stats__legend-arrow--up { color: #ef4444; }
.ofma-sector-stats__legend-arrow--flat { color: #f59e0b; }
.ofma-sector-stats__legend-arrow--down { color: #10b981; }

.ofma-sector-stats__legend-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: transparent;
    border: 1px solid #8b5cf6;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 600;
    color: #8b5cf6;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: all 0.15s;
}

.ofma-sector-stats__legend-help:hover,
.ofma-sector-stats__legend-help:focus {
    background: #8b5cf6;
    color: white;
    outline: none;
}

.ofma-sector-stats__legend-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    width: 240px;
    padding: 10px 14px;
    background: #6d28d9;
    color: white;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 100;
    pointer-events: none;
}

.ofma-sector-stats__legend-help:hover .ofma-sector-stats__legend-tooltip,
.ofma-sector-stats__legend-help:focus .ofma-sector-stats__legend-tooltip {
    display: block;
}

/* Responsive */
@media (max-width: 1024px) {
    .ofma-sector-stats {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ofma-sector-stats__row {
        grid-template-columns: 120px 1fr 45px auto;
    }
}

@media (max-width: 600px) {
    .ofma-sector-stats__header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ofma-sector-stats__avg {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .ofma-sector-stats__row {
        grid-template-columns: 100px 1fr 40px auto;
        gap: 6px;
        padding: 5px 6px;
    }

    .ofma-sector-stats__sector {
        font-size: 12px;
    }

    .ofma-sector-stats__value {
        font-size: 12px;
    }

    .ofma-sector-stats__bar-container {
        height: 14px;
    }
}

/* =====================================================
   STILLHALTER WIDGETS: HIGH IV RANK & WHEEL KANDIDATEN
   ===================================================== */

/* WHEEL KANDIDATEN WIDGET */
.ofma-dashboard__card--wheel {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ofma-dashboard__card--wheel .ofma-dashboard__card-body {
    flex: 1;
    overflow-y: auto;
}

/* =====================================================
   WHEEL KANDIDATEN (basiert auf TopFlop-Design)
   ===================================================== */
.ofma-wheel__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    overflow-y: auto;
}

.ofma-wheel__list::-webkit-scrollbar {
    width: 4px;
}

.ofma-wheel__list::-webkit-scrollbar-thumb {
    background: var(--ofma-text-muted);
    border-radius: 2px;
}

.ofma-wheel__header-row,
.ofma-wheel__item {
    display: grid;
    grid-template-columns: 3fr 1.5fr 7fr 3fr 2.5fr 2.5fr 2fr 2.5fr 2.5fr;
    gap: clamp(2px, 1%, 8px);
    justify-items: start;
}

.ofma-wheel__header-row {
    padding: 2px 8px 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--ofma-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--ofma-border);
    margin-bottom: 4px;
}

.ofma-wheel__header-row span {
    text-align: left;
}

.ofma-wheel__item {
    align-items: center;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--ofma-bg-card);
    border: 1px solid var(--ofma-border-light);
    font-size: 12px;
    transition: all 0.15s ease;
}

.ofma-wheel__item:hover {
    border-color: var(--ofma-primary);
    background: var(--ofma-primary-light);
}

/* Wheel: alle Inhalte linksbündig, schwarze Schrift */
.ofma-wheel__item .ofma-dashboard__topflop-symbol,
.ofma-wheel__item .ofma-dashboard__topflop-price {
    color: var(--ofma-text);
    text-align: left;
}

.ofma-wheel__item .ofma-dashboard__topflop-ivr {
    text-align: left;
}

.ofma-wheel__item .ofma-dashboard__topflop-ivr::before {
    display: none;
}

.ofma-wheel__sector {
    font-size: 11px;
    color: var(--ofma-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.ofma-wheel__earnings {
    font-size: 11px;
    color: var(--ofma-text);
    font-variant-numeric: tabular-nums;
    text-align: left;
}

.ofma-wheel__earnings--imminent {
    color: #ef4444;
    font-weight: 600;
}

.ofma-wheel__earnings--soon {
    color: #f59e0b;
    font-weight: 600;
}

.ofma-wheel__pe {
    font-size: 11px;
    color: var(--ofma-text);
    font-variant-numeric: tabular-nums;
    text-align: left;
}

.ofma-wheel__div {
    font-size: 11px;
    color: var(--ofma-text);
    font-variant-numeric: tabular-nums;
    text-align: left;
}

/* Wheel Tier Badge — identisch mit IVR Badge */
.ofma-wheel__tier {
    font-size: 11px;
    font-weight: 600;
    color: var(--ofma-text-muted);
    min-width: 28px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 4px;
}

.ofma-wheel__tier--1 {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: #fff;
}

.ofma-wheel__tier--2 {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    color: #fff;
}

.ofma-wheel__tier--3 {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%);
    color: #fff;
}

.ofma-wheel__footer {
    margin-top: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--ofma-border-light);
    font-size: 11px;
    color: var(--ofma-text-muted);
    text-align: left;
}

/* =====================================================
   COLUMN USAGE WIDGET (nutzt Sektor-Stats-Layout)
   ===================================================== */
.ofma-sector-stats__bar--usage-top {
    background: var(--ofma-primary, #14b8a6);
}

.ofma-dashboard__card--column-usage .ofma-sector-stats__row {
    grid-template-columns: 100px 1fr 36px;
}

.ofma-dashboard__card--column-usage .ofma-sector-stats {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 900px) {
    .ofma-dashboard__card--column-usage .ofma-sector-stats {
        grid-template-columns: 1fr;
    }
}


/* Wheel: gs-w<=4 oder schmale Viewports — Sektor, ER, Div, KGV ausblenden */
@media (max-width: 600px) {
    .ofma-wheel__header-row,
    .ofma-wheel__item {
        grid-template-columns: 3fr 1.5fr 3fr 2.5fr 2.5fr;
    }
    .ofma-wheel__header-row span:nth-child(3),
    .ofma-wheel__header-row span:nth-child(5),
    .ofma-wheel__header-row span:nth-child(6),
    .ofma-wheel__header-row span:nth-child(7) {
        display: none;
    }
    .ofma-wheel__sector,
    .ofma-wheel__earnings,
    .ofma-wheel__pe,
    .ofma-wheel__div {
        display: none;
    }
}

/* =====================================================
   DASHBOARD TABS
   ===================================================== */
.ofma-dashboard-tabs {
    margin-top: 4px;
}

/* Tab Navigation Bar */
.ofma-dashboard-tabs__nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--ofma-border, #e2e8f0);
    margin-bottom: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ofma-dashboard-tabs__nav::-webkit-scrollbar { display: none; }

.ofma-dashboard-tabs__btn {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--ofma-text-muted, #94a3b8);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.ofma-dashboard-tabs__btn:hover {
    color: var(--ofma-text, #1e293b);
}

.ofma-dashboard-tabs__btn--active {
    color: var(--ofma-primary, #14b8a6);
    border-bottom-color: var(--ofma-primary, #14b8a6);
}

/* Tab Panels */
.ofma-dashboard-tabs__panel {
    display: none;
}

.ofma-dashboard-tabs__panel--active {
    display: block;
}

/* Tab-Grids: gleiche Card-Styles wie Haupt-Grid */
.ofma-tab-grid {
    min-height: 200px;
}

.ofma-tab-grid .grid-stack-item-content {
    overflow: auto !important;
    border-radius: 14px;
}

.ofma-tab-grid .grid-stack-item-content > .ofma-dashboard__card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ofma-tab-grid .grid-stack-item-content > .ofma-dashboard__card > .ofma-dashboard__card-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Dark Mode Tab-Varianten */
[data-theme="dark"] .ofma-dashboard-tabs__btn {
    color: var(--ofma-text-muted, #64748b);
}

[data-theme="dark"] .ofma-dashboard-tabs__btn:hover {
    color: var(--ofma-text, #f1f5f9);
}

[data-theme="dark"] .ofma-dashboard-tabs__btn--active {
    color: var(--ofma-primary, #14b8a6);
}

[data-theme="dark"] .ofma-dashboard-tabs__nav {
    border-bottom-color: var(--ofma-border, #334155);
}

/* =====================================================
   WORKFLOW NAVIGATOR — Ausklappbarer Workflow
   ===================================================== */
.ofma-wf {
    margin-bottom: 12px;
    border: 1px solid var(--ofma-border);
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ofma-bg-card) 0%, rgba(139, 92, 246, 0.04) 100%);
}

/* =====================================================
   MARKTBREITE TAB
   ===================================================== */
.ofma-marktbreite {
    padding: 20px 24px;
}

.ofma-marktbreite__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.ofma-marktbreite__cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.ofma-marktbreite__card {
    background: var(--ofma-bg-card);
    border: 1px solid var(--ofma-border);
    border-radius: 10px;
    padding: 20px;
}

.ofma-marktbreite__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ofma-text);
    margin: 0 0 4px;
}

.ofma-marktbreite__subtitle {
    font-size: 12px;
    color: var(--ofma-text-muted);
    margin: 0 0 20px;
}

.ofma-marktbreite__empty {
    color: var(--ofma-text-muted);
    font-size: 13px;
    text-align: center;
    padding: 40px 0;
}

/* Breadth Bars */
.ofma-breadth {
    margin-bottom: 16px;
}

.ofma-breadth:last-child {
    margin-bottom: 0;
}

.ofma-breadth__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.ofma-breadth__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ofma-text);
}

.ofma-breadth__values {
    display: flex;
    gap: 12px;
    font-size: 12px;
    font-weight: 600;
}

.ofma-breadth__pct--green {
    color: #10b981;
}

.ofma-breadth__pct--yellow {
    color: #f59e0b;
}

.ofma-breadth__pct--red {
    color: #ef4444;
}

.ofma-breadth__track {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    gap: 2px;
}

.ofma-breadth__fill--green {
    background: linear-gradient(90deg, #059669, #10b981);
    border-radius: 6px 0 0 6px;
    transition: width 0.5s ease;
}

.ofma-breadth__fill--yellow {
    background: linear-gradient(90deg, #d97706, #f59e0b);
    transition: width 0.5s ease;
}

.ofma-breadth__fill--red {
    background: linear-gradient(90deg, #ef4444, #dc2626);
    border-radius: 0 6px 6px 0;
    transition: width 0.5s ease;
}

/* Wenn nur grün + rot (kein gelb), runde Ecken rechts für grün */
.ofma-breadth__fill--green:last-child {
    border-radius: 6px;
}

/* Wenn gelb das letzte ist (kein rot), runde Ecken rechts */
.ofma-breadth__fill--yellow:last-child {
    border-radius: 0 6px 6px 0;
}

/* Klickbare Balken */
.ofma-breadth__clickable {
    cursor: pointer;
    transition: opacity 0.15s, filter 0.15s;
}

.ofma-breadth__clickable:hover {
    opacity: 0.85;
    filter: brightness(1.1);
}

.ofma-breadth__clickable--active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Top 15 Kacheln */
.ofma-breadth-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.ofma-breadth-card {
    border-radius: 8px;
    border: 1px solid var(--ofma-border);
    overflow: hidden;
}

.ofma-breadth-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ofma-border);
}

.ofma-breadth-card--green .ofma-breadth-card__header { background: rgba(16, 185, 129, 0.08); }
.ofma-breadth-card--yellow .ofma-breadth-card__header { background: rgba(245, 158, 11, 0.08); }
.ofma-breadth-card--red .ofma-breadth-card__header { background: rgba(239, 68, 68, 0.08); }

.ofma-breadth-card__title {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.ofma-breadth-card--green .ofma-breadth-card__title { color: #10b981; }
.ofma-breadth-card--yellow .ofma-breadth-card__title { color: #f59e0b; }
.ofma-breadth-card--red .ofma-breadth-card__title { color: #ef4444; }

.ofma-breadth-card__badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--ofma-bg-hover, #f1f5f9);
    color: var(--ofma-text-muted, #94a3b8);
}

.ofma-breadth-card__body {
    padding: 8px 12px;
    max-height: 340px;
    overflow-y: auto;
}

.ofma-breadth-card__hint {
    font-size: 12px;
    color: var(--ofma-text-muted, #94a3b8);
    text-align: center;
    padding: 20px 0;
    margin: 0;
}

/* IV Rank Verteilung */
.ofma-ivr-dist {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.ofma-ivr-dist__avg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 100px;
    flex-shrink: 0;
}

.ofma-ivr-dist__avg-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ofma-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ofma-ivr-dist__avg-value {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
}

.ofma-ivr-dist__avg-badge {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    padding: 2px 10px;
    border-radius: 10px;
}

.ofma-ivr-dist__bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ofma-ivr-dist__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ofma-ivr-dist__zone-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ofma-text);
    min-width: 140px;
}

.ofma-ivr-dist__zone-label small {
    font-weight: 400;
    color: var(--ofma-text-muted);
}

.ofma-ivr-dist__bar-wrap {
    flex: 1;
    height: 24px;
    background: var(--ofma-bg-hover, #f1f5f9);
    border-radius: 4px;
    overflow: hidden;
}

.ofma-ivr-dist__bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    min-width: 2px;
}

.ofma-ivr-dist__bar--low {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.ofma-ivr-dist__bar--sweet {
    background: linear-gradient(90deg, #059669, #10b981);
}

.ofma-ivr-dist__bar--high {
    background: linear-gradient(90deg, #b45309, #d97706);
}

.ofma-ivr-dist__bar--extreme {
    background: linear-gradient(90deg, #ca8a04, #eab308);
}

.ofma-ivr-dist__count {
    font-size: 13px;
    font-weight: 600;
    color: var(--ofma-text);
    min-width: 90px;
    text-align: right;
}

.ofma-ivr-dist__count small {
    font-weight: 400;
    color: var(--ofma-text-muted);
}

.ofma-ivr-dist__footer {
    font-size: 11px;
    color: var(--ofma-text-muted);
    margin: 8px 0 0;
    text-align: center;
}

.ofma-dashboard__topflop-sector {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--ofma-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* S/R Kacheln: 6 Spalten (Symbol, Chart, Preis, Sektor, Change, IVR rechts) */
.ofma-sr-list .ofma-dashboard__topflop-item {
    grid-template-columns: auto auto auto 1fr auto auto;
}

.ofma-sector-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

#vix-term-chart {
    flex: 1;
    min-height: 0;
}

/* Restore Button in Tab-Nav */
.ofma-dashboard-tabs__btn--restore {
    margin-left: auto;
    font-size: 11px !important;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.ofma-dashboard-tabs__btn--restore:hover {
    opacity: 1;
}

/* VIX Legende — unterhalb des Charts, außerhalb des Canvas-Bereichs */
.ofma-vix-legend {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding: 6px 0 0;
    margin-top: auto;
    font-size: 11px;
    color: var(--ofma-text-muted, #94a3b8);
    flex-shrink: 0;
}

.ofma-vix-legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ofma-vix-legend__line {
    display: inline-block;
    width: 20px;
    height: 2.5px;
    border-radius: 1px;
}

.ofma-vix-legend__line--dashed {
    background: none !important;
    height: 0;
    border-top: 2px dashed;
}

.ofma-vix-legend__zone {
    display: inline-block;
    width: 20px;
    height: 10px;
    border-radius: 2px;
    background: rgba(20, 184, 166, 0.15);
    border: 1px solid rgba(20, 184, 166, 0.3);
}

[data-theme="dark"] .ofma-wf {
    background: linear-gradient(135deg, var(--ofma-bg-card) 0%, rgba(139, 92, 246, 0.08) 100%);
}

[data-theme="dark"] .ofma-wf__header:hover {
    background: rgba(139, 92, 246, 0.08);
}

[data-theme="dark"] .ofma-wf__badge {
    background: rgba(139, 92, 246, 0.15);
}

[data-theme="dark"] .ofma-wf__step {
    border-color: rgba(139, 92, 246, 0.25);
}

[data-theme="dark"] .ofma-wf__step:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.4);
}

[data-theme="dark"] .ofma-wf__step--done {
    background: rgba(139, 92, 246, 0.1);
}

[data-theme="dark"] .ofma-wf__step--touring {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.4);
}

[data-theme="dark"] .ofma-wf__step-num:hover {
    background: rgba(139, 92, 246, 0.15);
}

/* Header (immer sichtbar) */
.ofma-wf__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ofma-text);
    transition: background 0.2s ease;
}

.ofma-wf__header:hover {
    background: rgba(139, 92, 246, 0.04);
}

.ofma-wf__header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ofma-wf__icon {
    color: var(--ofma-secondary, #8b5cf6);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.ofma-wf__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ofma-text);
}

.ofma-wf__badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--ofma-secondary, #8b5cf6);
    background: rgba(139, 92, 246, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ofma-wf__badge:hover {
    background: rgba(139, 92, 246, 0.2);
}

.ofma-wf__hint {
    font-size: 11px;
    color: var(--ofma-text-muted);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ofma-wf__header:hover .ofma-wf__hint {
    opacity: 1;
}

/* Body (ausklappbar) */
.ofma-wf__body {
    padding: 0 16px 14px;
    max-height: 300px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.25s ease;
    opacity: 1;
}

.ofma-wf__desc {
    font-size: 13px;
    color: var(--ofma-text-secondary);
    line-height: 1.5;
    margin: 0 0 12px;
}

/* Collapsed State */
.ofma-wf--collapsed .ofma-wf__body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

.ofma-wf--collapsed .ofma-wf__icon {
    transform: rotate(0deg);
}

.ofma-wf:not(.ofma-wf--collapsed) .ofma-wf__icon {
    transform: rotate(90deg);
}

/* Fortschrittsbalken */
.ofma-wf__progress {
    height: 3px;
    background: var(--ofma-border);
    border-radius: 3px;
    margin-bottom: 14px;
    overflow: hidden;
}

.ofma-wf__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ofma-secondary, #8b5cf6), #7c3aed);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Schritte */
.ofma-wf__steps {
    display: flex;
    gap: 8px;
}

.ofma-wf__step {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ofma-text-muted);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.ofma-wf__step:hover {
    background: rgba(139, 92, 246, 0.04);
    border-color: rgba(139, 92, 246, 0.15);
}

.ofma-wf__step-content {
    flex: 1;
    min-width: 0;
}

/* Erledigter Schritt */
.ofma-wf__step--done {
    color: var(--ofma-text-secondary);
    background: rgba(139, 92, 246, 0.06);
}

.ofma-wf__step--done .ofma-wf__step-num {
    border-color: var(--ofma-success, #10b981);
    color: #fff;
    background: var(--ofma-success, #10b981);
}

/* Alle Schritte: klickbar */
.ofma-wf__step {
    cursor: pointer;
    border-color: rgba(139, 92, 246, 0.3);
}

.ofma-wf__step:hover {
    background: rgba(139, 92, 246, 0.04);
    border-color: rgba(139, 92, 246, 0.3);
}

/* Touring: Schritt wurde angeklickt */
.ofma-wf__step--touring {
    background: rgba(139, 92, 246, 0.06);
    border-color: rgba(139, 92, 246, 0.3);
}

.ofma-wf__step--touring .ofma-wf__step-label {
    color: var(--ofma-secondary, #8b5cf6);
}

/* Nummern-Kreis */
.ofma-wf__step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid var(--ofma-secondary, #8b5cf6);
    color: var(--ofma-secondary, #8b5cf6);
    background: transparent;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ofma-wf__step-num:hover {
    background: rgba(139, 92, 246, 0.08);
}

/* Gefuellt wenn Tour bei diesem Schritt aktiv */
.ofma-wf__step--touring .ofma-wf__step-num {
    background: var(--ofma-secondary, #8b5cf6);
    border-color: var(--ofma-secondary, #8b5cf6);
    color: #fff;
    animation: ofma-wf-pulse 2s ease-in-out infinite;
}

/* Puls-Animation */
@keyframes ofma-wf-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(139, 92, 246, 0); }
}

.ofma-wf__step-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 2px;
}


.ofma-wf__step-desc {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ofma-text-muted);
}

.ofma-wf__step--active .ofma-wf__step-desc {
    color: var(--ofma-text-secondary);
}

/* Hints (Aufzählungspunkte) */
.ofma-wf__step-hints {
    margin: 4px 0 0;
    padding: 0 0 0 14px;
    list-style: none;
}

.ofma-wf__step-hints li {
    position: relative;
    font-size: 11px;
    line-height: 1.5;
    color: var(--ofma-text-muted);
    padding: 1px 0;
}

.ofma-wf__step-hints li::before {
    content: "\2013";
    position: absolute;
    left: -12px;
    color: var(--ofma-text-muted);
}

.ofma-wf__step--active .ofma-wf__step-hints li {
    color: var(--ofma-text-secondary);
}

.ofma-wf__step-hints strong {
    color: var(--ofma-text);
    font-weight: 600;
}

.ofma-wf__link {
    color: var(--ofma-secondary, #8b5cf6);
    text-decoration: none;
}

.ofma-wf__link:hover {
    text-decoration: underline;
}


/* =====================================================
   WORKFLOW NAVIGATOR — Willkommen-Modal
   ===================================================== */
.ofma-welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ofma-welcome-overlay--visible {
    opacity: 1;
    visibility: visible;
}

.ofma-welcome-modal {
    background: var(--ofma-bg-card);
    border: 1px solid var(--ofma-border);
    border-radius: 12px;
    width: 520px;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    padding: 28px;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.ofma-welcome-overlay--visible .ofma-welcome-modal {
    transform: scale(1);
}

.ofma-welcome-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--ofma-text-muted);
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}

.ofma-welcome-modal__close:hover {
    color: var(--ofma-text);
    background: var(--ofma-bg-hover);
}

.ofma-welcome-modal__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ofma-text);
    margin: 0 0 4px;
}

.ofma-welcome-modal__subtitle {
    font-size: 13px;
    color: var(--ofma-text-secondary);
    margin: 0 0 20px;
}

.ofma-welcome-modal__intro {
    font-size: 13px;
    color: var(--ofma-text-secondary);
    margin: 0 0 20px;
    line-height: 1.5;
}

.ofma-welcome-modal__intro p {
    margin: 0 0 8px;
}

.ofma-welcome-modal__features {
    margin: 0;
    padding: 0 0 0 18px;
    list-style: none;
}

.ofma-welcome-modal__features li {
    position: relative;
    padding: 3px 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ofma-text-secondary);
}

.ofma-welcome-modal__features li::before {
    content: "\2022";
    color: var(--ofma-primary);
    font-weight: 700;
    position: absolute;
    left: -14px;
}

.ofma-welcome-modal__features li strong {
    color: var(--ofma-text);
}

.ofma-welcome-modal__steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.ofma-welcome-modal__step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ofma-welcome-modal__step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ofma-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.ofma-welcome-modal__step:nth-child(2) .ofma-welcome-modal__step-num { background: var(--ofma-primary-dark); }
.ofma-welcome-modal__step:nth-child(3) .ofma-welcome-modal__step-num { background: var(--ofma-secondary, #8b5cf6); }

.ofma-welcome-modal__step-content {
    flex: 1;
}

.ofma-welcome-modal__step-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ofma-text);
    margin-bottom: 2px;
}

.ofma-welcome-modal__step-desc {
    font-size: 12px;
    color: var(--ofma-text-secondary);
    line-height: 1.4;
}

.ofma-welcome-modal__step-link {
    color: var(--ofma-primary);
    text-decoration: none;
    font-weight: 500;
}

.ofma-welcome-modal__step-link:hover {
    text-decoration: underline;
}

.ofma-welcome-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--ofma-border);
}

.ofma-welcome-modal__checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ofma-text-muted);
    cursor: pointer;
}

.ofma-welcome-modal__checkbox input {
    accent-color: var(--ofma-primary);
}

.ofma-welcome-modal__btn {
    padding: 8px 20px;
    background: var(--ofma-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ofma-welcome-modal__btn:hover {
    background: var(--ofma-primary-dark);
}

/* Dark Mode: Welcome Modal */
[data-theme="dark"] .ofma-welcome-overlay { background: rgba(0, 0, 0, 0.7); }
[data-theme="dark"] .ofma-welcome-modal { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .ofma-welcome-modal__title { color: #94a3b8; }
[data-theme="dark"] .ofma-welcome-modal__subtitle { color: #64748b; }
[data-theme="dark"] .ofma-welcome-modal__intro,
[data-theme="dark"] .ofma-welcome-modal__features li { color: #94a3b8; }
[data-theme="dark"] .ofma-welcome-modal__features li strong { color: #94a3b8; }
[data-theme="dark"] .ofma-welcome-modal__step-title { color: #94a3b8; }
[data-theme="dark"] .ofma-welcome-modal__step-desc { color: #64748b; }
[data-theme="dark"] .ofma-welcome-modal__close { color: #64748b; }
[data-theme="dark"] .ofma-welcome-modal__close:hover { color: #f1f5f9; background: #334155; }
[data-theme="dark"] .ofma-welcome-modal__footer { border-top-color: #334155; }
[data-theme="dark"] .ofma-welcome-modal__checkbox { color: #64748b; }

/* Pipeline Health Dashboard */
.pipeline-health-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pipeline-health-table th,
.pipeline-health-table td { padding: 6px 10px; border: 1px solid var(--ofma-border-light, #e2e8f0); text-align: center; font-variant-numeric: tabular-nums; }
.pipeline-health-table th { background: var(--ofma-bg-secondary, #f8fafc); font-weight: 600; font-size: 12px; color: var(--ofma-text-muted); }
.pipeline-health-table .metric-label { text-align: left; font-weight: 600; white-space: nowrap; }
.pipeline-cell--ok { background: rgba(16, 185, 129, 0.1); }
.pipeline-cell--warning { background: rgba(245, 158, 11, 0.2); color: #92400e; font-weight: 700; }
.pipeline-cell--critical { background: rgba(239, 68, 68, 0.2); color: #991b1b; font-weight: 700; }
.pipeline-cell--missing { background: rgba(107, 114, 128, 0.1); color: #6b7280; }
.pipeline-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.pipeline-badge--success { background: #d1fae5; color: #065f46; }
.pipeline-badge--failed { background: #fee2e2; color: #991b1b; }

[data-theme="dark"] .pipeline-health-table th { background: var(--ofma-bg-hover); }
[data-theme="dark"] .pipeline-health-table td { border-color: #334155; }
[data-theme="dark"] .pipeline-cell--warning { color: #fbbf24; }
[data-theme="dark"] .pipeline-cell--critical { color: #f87171; }
[data-theme="dark"] .pipeline-badge--success { background: rgba(16,185,129,0.2); color: #34d399; }
[data-theme="dark"] .pipeline-badge--failed { background: rgba(239,68,68,0.2); color: #f87171; }