* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@media (max-width: 768px) {
html, body {
overflow-x: hidden;
}
}
/* Spinner-Pfeile bei allen Number-Inputs entfernen */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
appearance: textfield;
-moz-appearance: textfield;
}
input[type="number"]::placeholder {
opacity: 0.35;
}
:root {
/* Modernes Farbschema - Cyan/Türkis Akzent (wie im Bild) */
--primary: #0891b2;
--primary-hover: #0e7490;
--primary-light: #22d3ee;
--primary-glow: rgba(8, 145, 178, 0.25);
--accent: #14b8a6;
--accent-hover: #0d9488;
--accent-glow: rgba(14, 165, 233, 0.4);
/* Helles, modernes Light Theme */
--bg-dark: #f8fafc;
--bg-card: #ffffff;
--bg-secondary: #f1f5f9;
--bg-elevated: #ffffff;
--bg-hover: #e2e8f0;
/* Borders - subtil auf hellem Hintergrund */
--border: #e2e8f0;
--border-hover: #cbd5e1;
--border-glow: rgba(8, 145, 178, 0.2);
/* Text - dunkel auf hellem Hintergrund */
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #94a3b8;
/* Status Colors */
--success: #10b981;
--success-glow: rgba(16, 185, 129, 0.2);
--error: #ef4444;
--error-glow: rgba(239, 68, 68, 0.2);
--warning: #f59e0b;
--warning-glow: rgba(245, 158, 11, 0.2);
--info: #3b82f6;
/* Shadows - weicher für helles Theme */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
/* Hover Shadows */
--shadow-hover: 0 10px 30px -5px rgba(0, 0, 0, 0.12), 0 4px 10px -5px rgba(0, 0, 0, 0.08);
--shadow-hover-lg: 0 15px 40px -8px rgba(0, 0, 0, 0.15), 0 6px 15px -6px rgba(0, 0, 0, 0.1);
/* Gradients */
--gradient-primary: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #14b8a6 100%);
--gradient-bg: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
/* Animations */
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
/* Aliases (einige Widgets nutzen diese Namen) */
--card: var(--bg-card);
--text: var(--text-primary);
/* Aliases für ValWebside-Kompatibilität (Pricing Section) - EXAKTE Farben */
--accent-primary: #0ea5e9;
--accent-secondary: #06b6d4;
--accent-gradient: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #14b8a6 100%);
--accent-glow: rgba(14, 165, 233, 0.4);
--bg-tertiary: #f3f4f6;
--transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* Dashboard Cards: minimal off-white, damit sie sich sauber abheben */
--strategy-card-bg: #f9fafb;
}
html {
/* Scrollbar immer sichtbar um Layout-Sprung zu verhindern */
overflow-y: scroll;
}
/* Subscription-Panel: Scrollen erlaubt, damit User Plan-Auswahl + Checkout erreichen kann */
html:has(.container.subscription-active) {
overflow-y: auto;
}
/*
* Hintergrund-Scroll sperren, solange das Strategie-Slide-Out offen ist.
* Das eigentliche Scrollen passiert auf (overflow-y: scroll), daher muss
* hier gesperrt werden – ein overflow:hidden auf allein reicht nicht.
* scrollbar-gutter haelt die Scrollbar-Breite reserviert, damit beim Sperren
* kein horizontaler Layout-Sprung entsteht (sonst wuerde auch das Spotlight-Loch
* um die Scrollbar-Breite verspringen).
*/
html.bbt-slideout-scroll-lock {
overflow-y: hidden;
scrollbar-gutter: stable;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg-dark);
color: var(--text-primary);
min-height: 100vh;
position: relative;
}
/* ==================== THEME-WECHSEL: View-Transition-Crossfade ==================== */
/* Der Wechsel Dark/Light läuft über die View Transitions API (document.startViewTransition).
Der Browser erstellt je einen GPU-Snapshot von Vorher- und Nachher-Zustand und blendet
diese als Ganzes über. Dadurch werden auch teure Blur-Layer (filter/backdrop-filter) als
fertiges Bild überblendet statt pro Frame neu berechnet – kein Nachbild/Geistereffekt mehr.
Wir steuern hier nur Dauer und Easing des Crossfades. */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.32s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
/* Beide Snapshots exakt übereinander legen, damit der Crossfade nicht "schiebt". */
mix-blend-mode: normal;
}
/* Während der View Transition (Klasse bbt-vt-active auf ) alle element-eigenen
Transitions stilllegen. Der "neue" View-Transition-Snapshot ist LIVE: ohne diese Regel
würden Panels/Cards ihre eigene Farb-Transition zusätzlich abspielen und liefen damit
asynchron zum Crossfade. transition:none erzwingt den Endzustand sofort -> alles synchron. */
html.bbt-vt-active,
html.bbt-vt-active *,
html.bbt-vt-active *::before,
html.bbt-vt-active *::after {
transition: none !important;
}
/* Bei reduzierter Bewegung keinen Crossfade animieren. */
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none !important;
}
}
/* ==================== DASHBOARD DARK THEME (nur Strategie-Übersicht) ==================== */
/* Anti-Flash: Sofort dunklen Hintergrund setzen, wenn html die Klasse traegt (vor body-Rendering) */
html.dashboard-theme-dark {
background: #0a0a0a;
color-scheme: dark;
}
body.dashboard-theme-dark {
/* Neutrale Grau/Schwarz-Töne statt blau */
--bg-dark: #0a0a0a;
--bg-card: #141414;
--bg-secondary: #1a1a1a;
--bg-elevated: #141414;
--bg-hover: #242424;
/* Akzentfarben im Dark-Theme ruhiger/edler (weniger "Neon") */
--primary: #0e7490;
--primary-hover: #0891b2;
--primary-light: #22d3ee;
--primary-glow: rgba(34, 211, 238, 0.14);
--accent: #14b8a6;
--accent-hover: #0d9488;
--accent-glow: rgba(14, 165, 233, 0.4);
/* Gradient wird automatisch von primary/accent abgeleitet */
--gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
--border: rgba(255, 255, 255, 0.1);
--border-hover: rgba(255, 255, 255, 0.2);
--border-glow: rgba(8, 145, 178, 0.22);
--text-primary: #e5e7eb;
--text-secondary: #9ca3af;
--text-muted: #6b7280;
/* Shadows für Dark */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
--shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);
--shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.55);
--shadow-hover: 0 18px 45px rgba(0, 0, 0, 0.55);
--shadow-hover-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
/* Aliases konsistent halten */
--card: var(--bg-card);
--text: var(--text-primary);
/* Aliases für ValWebside-Kompatibilität (Pricing Section) - EXAKTE Farben */
--accent-primary: #0ea5e9;
--accent-secondary: #06b6d4;
--accent-gradient: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #14b8a6 100%);
--accent-glow: rgba(14, 165, 233, 0.4);
--bg-tertiary: #1f1f1f;
--transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* Dashboard Cards im Darkmode minimal heller als Panels */
--strategy-card-bg: #161616;
}
body.dashboard-theme-dark::before {
background:
radial-gradient(ellipse 80% 60% at 10% 20%, rgba(255, 255, 255, 0.008) 0%, transparent 64%),
radial-gradient(ellipse 70% 50% at 90% 80%, rgba(255, 255, 255, 0.006) 0%, transparent 64%),
radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255, 255, 255, 0.004) 0%, transparent 74%);
filter: blur(320px);
opacity: 0.5;
}
body.dashboard-theme-dark .header {
background: rgba(20, 20, 20, 0.85);
border-bottom: 1px solid var(--border);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
body.dashboard-theme-dark .panel-header h1 {
color: #d1d5db;
text-shadow: none;
}
body.dashboard-theme-dark .panel-header {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}
/* ==================== INTERACTIVE PARALLAX BACKGROUND ==================== */
#trading-grid-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
filter: blur(110px);
}
body.dashboard-theme-dark #trading-grid-canvas {
filter: blur(240px);
}
body.login-mode #trading-grid-canvas {
opacity: 0;
visibility: hidden;
}
body > * {
position: relative;
z-index: 1;
}
body.login-mode {
display: flex;
align-items: center;
justify-content: center;
}
body.login-mode::before,
body.login-mode::after {
content: '';
position: fixed;
inset: -18vmax;
pointer-events: none;
z-index: 0;
transform: translateZ(0);
}
body.login-mode::before {
background:
radial-gradient(circle at 18% 20%, rgba(14, 165, 233, 0.28) 0%, rgba(14, 165, 233, 0.14) 18%, transparent 48%),
radial-gradient(circle at 78% 28%, rgba(99, 102, 241, 0.22) 0%, rgba(99, 102, 241, 0.1) 20%, transparent 46%),
radial-gradient(circle at 55% 78%, rgba(20, 184, 166, 0.18) 0%, rgba(20, 184, 166, 0.08) 16%, transparent 40%);
filter: blur(70px);
opacity: 0.9;
}
body.login-mode::after {
background:
radial-gradient(circle at 35% 42%, rgba(34, 211, 238, 0.12) 0%, transparent 34%),
radial-gradient(circle at 68% 62%, rgba(168, 85, 247, 0.12) 0%, transparent 30%);
filter: blur(120px);
opacity: 0.85;
}
.auth-logo {
display: flex;
justify-content: center;
margin-bottom: 12px;
transform: translateX(-6px);
}
.auth-logo img {
height: 50px;
width: auto;
object-fit: contain;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
.auth-logo .logo-dark {
display: none;
}
body.dashboard-theme-dark .auth-logo .logo-light {
display: none;
}
body.dashboard-theme-dark .auth-logo .logo-dark {
display: block;
}
.auth-lang-switch {
display: flex;
justify-content: flex-end;
gap: 6px;
margin-bottom: 10px;
}
.auth-lang-btn {
appearance: none;
border: 1px solid rgba(0, 0, 0, 0.12);
background: rgba(255, 255, 255, 0.65);
color: rgba(15, 23, 42, 0.75);
border-radius: 999px;
padding: 6px 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
cursor: pointer;
transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
user-select: none;
-webkit-user-select: none;
}
.auth-lang-btn:hover {
transform: translateY(-1px);
background: rgba(0, 0, 0, 0.04);
}
.auth-lang-btn[aria-pressed="true"] {
background: rgba(8, 145, 178, 0.12);
border-color: rgba(8, 145, 178, 0.25);
color: var(--primary, #0891b2);
}
/* Toast Notification System */
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
}
.toast {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow-xl);
pointer-events: auto;
animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
backdrop-filter: blur(10px);
max-width: 380px;
}
.toast.toast-success {
border-color: var(--success);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, var(--bg-card) 100%);
}
.toast.toast-error {
border-color: var(--error);
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, var(--bg-card) 100%);
}
.toast.toast-warning {
border-color: var(--warning);
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, var(--bg-card) 100%);
}
.toast.toast-info {
border-color: var(--primary);
background: linear-gradient(135deg, rgba(8, 145, 178, 0.1) 0%, var(--bg-card) 100%);
}
.toast-icon {
font-size: 20px;
flex-shrink: 0;
}
.toast-success .toast-icon { color: var(--success); }
.toast-error .toast-icon { color: var(--error); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info .toast-icon { color: var(--primary); }
.toast-content {
flex: 1;
}
.toast-title {
font-weight: 600;
font-size: 14px;
color: var(--text-primary);
margin-bottom: 2px;
}
.toast-message {
font-size: 13px;
color: var(--text-secondary);
}
.toast-close {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 4px;
border-radius: 6px;
transition: var(--transition-fast);
}
.toast-close:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.toast.toast-exit {
animation: toastSlideOut 0.3s ease-in forwards;
}
@keyframes toastSlideIn {
from {
opacity: 0;
transform: translateX(100%) scale(0.9);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes toastSlideOut {
to {
opacity: 0;
transform: translateX(100%) scale(0.9);
}
}
/* Refund Toast – bottom-right, persistent (must be dismissed) */
.refund-toast-anchor {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 10000;
pointer-events: none;
display: flex;
flex-direction: column-reverse;
gap: 10px;
}
.refund-toast {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 20px;
max-width: 380px;
background: var(--bg-card);
border: 1px solid #10b981;
border-left: 4px solid #10b981;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(16, 185, 129, 0.12);
backdrop-filter: blur(12px);
animation: refundSlideIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.refund-toast .refund-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(16, 185, 129, 0.12);
}
.refund-toast .refund-icon svg {
width: 18px;
height: 18px;
stroke: #10b981;
}
.refund-toast .refund-body {
flex: 1;
min-width: 0;
}
.refund-toast .refund-title {
font-weight: 700;
font-size: 13px;
color: var(--text-primary);
letter-spacing: 0.01em;
margin-bottom: 4px;
}
.refund-toast .refund-msg {
font-size: 12.5px;
line-height: 1.45;
color: var(--text-secondary);
}
.refund-toast .refund-badge {
display: inline-block;
margin-top: 8px;
padding: 2px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
background: rgba(16, 185, 129, 0.10);
color: #10b981;
}
.refund-toast .refund-close {
flex-shrink: 0;
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 4px;
border-radius: 6px;
margin: -4px -4px 0 0;
transition: background 0.15s, color 0.15s;
}
.refund-toast .refund-close:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.refund-toast.refund-exit {
animation: refundSlideOut 0.3s ease-in forwards;
}
@keyframes refundSlideIn {
from { opacity: 0; transform: translateY(20px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes refundSlideOut {
to { opacity: 0; transform: translateY(20px) scale(0.95); }
}
/* Loading Spinner */
.spinner {
width: 18px;
height: 18px;
border: 2px solid var(--border);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Ripple Effect für Buttons */
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: scale(0);
animation: rippleEffect 0.6s ease-out;
pointer-events: none;
}
@keyframes rippleEffect {
to {
transform: scale(4);
opacity: 0;
}
}
.container {
width: 100%;
max-width: 420px;
padding: 20px;
}
/* Dashboard Container - volle Breite */
.container.dashboard-active {
max-width: none;
/* weniger "Luft" oben im Dashboard */
padding: 16px 24px 24px;
}
/* Mobile: weniger Seiten-Padding, damit Grid-Spalten nicht überlaufen */
@media (max-width: 520px) {
.container.dashboard-active {
padding: 16px;
}
}
@media (max-width: 480px) {
.container {
padding: 12px;
}
}
/* Subscription Selection Container - volle Breite (aber NICHT dashboard-active) */
.container.subscription-active {
max-width: none;
padding: 40px 40px 0;
min-height: auto;
height: auto;
overflow-x: visible;
overflow-y: auto;
display: flex;
align-items: flex-start;
justify-content: center;
}
body:has(.container.subscription-active) .bbt-footer {
margin-top: 0;
}
@media (max-width: 768px) {
.container.subscription-active {
padding: 20px 16px 40px;
height: auto;
min-height: 100vh;
}
}
@media (max-width: 480px) {
.container.subscription-active {
padding: 16px 10px 32px;
}
}
/* Subscription Mode: Header-Menü ausblenden, nur "Angemeldet als ..." als Profil-Shortcut anzeigen */
body.subscription-mode #mainHeader {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: none;
box-shadow: none;
transition: none; /* beim Eintritt in Subscription-Mode: sofort verstecken, kein "raus-sliden" */
/* Wichtig: nicht per height/padding "zusammenklappen" (macht Animation ruckelig).
Stattdessen aus dem Viewport schieben und transparent machen. */
top: -120px;
/* Opacity NICHT auf 0 setzen, sonst verschwindet die fixed User-Pill (Kind-Element).
Pointer-Events NICHT global deaktivieren, sonst ist die User-Pill nicht klickbar. */
opacity: 1;
pointer-events: auto;
}
body.subscription-mode #mainHeader .header-left,
body.subscription-mode #mainHeader .header-actions,
body.subscription-mode #mainHeader #btnLogout {
display: none !important;
}
body.subscription-mode #mainHeader .header-user {
width: 100%;
justify-content: flex-end;
}
body.subscription-mode #mainHeader .header-account-controls {
position: fixed;
top: 12px;
right: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
z-index: 200;
pointer-events: auto;
}
body.subscription-mode #mainHeader .header-account-controls .lang-select {
min-width: 74px;
width: auto;
padding: 8px 30px 8px 12px;
border-radius: 12px;
background-color: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(0, 0, 0, 0.06);
}
body.subscription-mode #mainHeader .header-user-info {
position: static;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
padding: 8px 12px;
box-shadow: var(--shadow-sm);
}
body.subscription-mode.dashboard-theme-dark #mainHeader .header-user-info,
body.subscription-mode.dashboard-theme-dark #mainHeader .header-account-controls .lang-select {
background: rgba(20, 20, 20, 0.75);
border: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 768px) {
body.subscription-mode #mainHeader .header-user {
position: static;
top: auto;
right: auto;
width: auto;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
margin-top: 0;
opacity: 1;
pointer-events: auto;
transform: none;
max-height: none;
overflow: visible;
}
}
#subscriptionPanel .subscription-lang-wrap {
display: flex;
justify-content: center;
}
#subscriptionPanel .subscription-lang-wrap .lang-select {
min-width: 74px;
padding: 8px 30px 8px 12px;
font-size: 13px;
font-weight: 600;
}
body:has(.container.subscription-active) {
overflow-y: auto;
}
/* Subscription Panel: Kein weißes Panel, transparenter Hintergrund */
#subscriptionPanel {
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
/* wichtig: Free-Plan liegt links außerhalb des Grids */
overflow: visible;
}
#subscriptionPanel .panel-body {
padding: 0;
overflow: visible;
}
/* ==================== Subscription Selection Panel (Pricing) - New Design ==================== */
.pricing-section-header {
text-align: center;
margin-bottom: 4rem;
position: relative;
}
.subscription-back-btn {
position: absolute;
top: 0;
left: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(148, 163, 184, 0.15);
border-radius: 12px;
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.subscription-back-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.subscription-back-btn:hover {
background: rgba(14, 165, 233, 0.1);
border-color: rgba(14, 165, 233, 0.3);
color: var(--text-primary);
transform: translateX(-2px);
}
.subscription-back-btn:hover svg {
transform: translateX(-3px);
}
.subscription-back-btn:active {
transform: translateX(0);
}
.subscription-back-btn.hidden {
display: none;
}
body:not(.dashboard-theme-dark) .subscription-back-btn {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.1);
}
body:not(.dashboard-theme-dark) .subscription-back-btn:hover {
background: rgba(14, 165, 233, 0.08);
border-color: rgba(14, 165, 233, 0.25);
}
/* Typography: wie ValWebside (nur Pricing) */
#subscriptionPanel .pricing-section-header,
#subscriptionPanel .billing-toggle,
#subscriptionPanel .pricing-wrapper,
#subscriptionPanel .pricing-grid,
#subscriptionPanel .pricing-card,
#subscriptionPanel .plan-name,
#subscriptionPanel .plan-description,
#subscriptionPanel .plan-features,
#subscriptionPanel .plan-cta,
#subscriptionPanel .price-period {
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}
#subscriptionPanel .price-amount {
font-family: 'Inter', 'Outfit', sans-serif;
letter-spacing: -0.03em;
}
.pricing-section-header .section-tag {
display: inline-block;
padding: 8px 18px;
background: var(--bg-card);
border: 1px solid var(--accent-primary);
border-radius: 100px;
font-size: 13px;
font-weight: 600;
color: var(--accent-primary);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1.5rem;
}
.pricing-section-header .section-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
margin-bottom: 0.75rem;
letter-spacing: -0.02em;
}
#subscriptionActionStatus {
margin: 0.75rem auto 0;
max-width: 680px;
padding: 10px 16px;
border-radius: 10px;
background: rgba(14, 165, 233, 0.08);
border: 1px solid rgba(14, 165, 233, 0.18);
color: var(--text-primary, #e2e8f0);
text-align: left;
box-shadow: none;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.dashboard-theme-dark #subscriptionActionStatus {
background: rgba(14, 165, 233, 0.06);
border-color: rgba(14, 165, 233, 0.15);
}
#subscriptionActionStatus .subscription-status-icon {
flex-shrink: 0;
width: 18px;
height: 18px;
color: var(--accent-primary, #0ea5e9);
}
#subscriptionActionStatus .subscription-status-text {
flex: 1;
font-size: 0.82rem;
line-height: 1.45;
color: var(--text-secondary, rgba(226, 232, 240, 0.88));
}
#subscriptionActionStatus .subscription-status-text strong {
color: var(--text-primary, #e2e8f0);
font-weight: 600;
}
#subscriptionActionStatus .subscription-status-actions {
display: flex;
gap: 6px;
margin-left: auto;
flex-shrink: 0;
}
#subscriptionActionStatus .subscription-status-actions button {
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary, #f8fafc);
padding: 5px 10px;
border-radius: 7px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
}
#subscriptionActionStatus .subscription-status-actions button:hover {
background: rgba(255, 255, 255, 0.12);
}
.pricing-section-header .section-subtitle {
font-size: 1.125rem;
color: var(--text-secondary);
max-width: 500px;
margin: 0 auto;
line-height: 1.6;
}
/* Billing Toggle */
.billing-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-card);
border-radius: 12px;
padding: 4px;
position: relative;
box-shadow: var(--shadow-sm), inset 0 1px 2px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.06);
}
.billing-option {
position: relative;
z-index: 1;
padding: 10px 28px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
color: var(--text-muted);
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
transition: color var(--transition-base);
}
.billing-option:hover:not(.active) {
color: var(--text-secondary);
}
.billing-option.active {
color: white;
}
.billing-slider {
position: absolute;
top: 4px;
bottom: 4px;
left: 4px;
width: calc(50% - 4px);
background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
border-radius: 8px;
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25);
}
.billing-toggle[data-active="annually"] .billing-slider {
transform: translateX(100%);
}
.pricing-controls {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
margin-top: 2rem;
}
.currency-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-card);
border-radius: 10px;
padding: 3px;
position: relative;
box-shadow: var(--shadow-sm), inset 0 1px 2px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.06);
}
.currency-toggle .cur-btn {
position: relative;
z-index: 1;
padding: 6px 16px;
font-size: 12px;
font-weight: 600;
font-family: inherit;
color: var(--text-muted);
background: transparent;
border: none;
border-radius: 7px;
cursor: pointer;
transition: color 0.2s ease;
letter-spacing: 0.02em;
}
.currency-toggle .cur-btn:hover:not(.active) {
color: var(--text-secondary);
}
.currency-toggle .cur-btn.active {
color: white;
}
.currency-slider {
position: absolute;
top: 3px;
bottom: 3px;
left: 3px;
width: calc(50% - 3px);
background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
border-radius: 7px;
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25);
}
.currency-toggle[data-active="USD"] .currency-slider {
transform: translateX(100%);
}
/* Pricing Grid */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 1100px) {
.pricing-grid {
grid-template-columns: 1fr;
max-width: 400px;
}
}
/* Pricing Card */
.pricing-card {
background: #ffffff;
border: 1px solid transparent;
border-radius: 24px;
padding: 2rem;
display: flex;
flex-direction: column;
transition: all var(--transition-base);
position: relative;
}
.pricing-card:hover {
border-color: rgba(14, 165, 233, 0.2);
box-shadow: var(--shadow-lg);
transform: translateY(-8px);
}
.pricing-card.featured {
border: 2px solid var(--accent-primary);
background: #ffffff;
box-shadow: var(--shadow-lg), 0 0 40px rgba(14, 165, 233, 0.15);
transform: scale(1.05);
z-index: 1;
}
@media (max-width: 1100px) {
.pricing-card.featured {
transform: none;
order: -1;
}
}
.pricing-card.featured:hover {
transform: scale(1.08) translateY(-4px);
box-shadow: var(--shadow-xl), 0 0 60px var(--accent-glow);
}
@media (max-width: 1100px) {
.pricing-card.featured:hover {
transform: translateY(-8px);
}
}
.featured-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: 6px 20px;
background: var(--accent-gradient);
color: white;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 100px;
box-shadow: 0 4px 16px var(--accent-glow);
}
.pricing-card .save-badge {
position: absolute;
top: -10px;
right: 16px;
padding: 4px 10px;
background: var(--success, #10b981);
color: white;
font-size: 10px;
font-weight: 700;
border-radius: 100px;
text-transform: uppercase;
letter-spacing: 0.3px;
box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
transition: all 0.3s ease;
z-index: 2;
}
.pricing-card .save-badge.hidden {
opacity: 0;
transform: translateY(-10px);
pointer-events: none;
}
.plan-header {
text-align: center;
margin-bottom: 1.5rem;
}
.plan-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
border-radius: 16px;
margin: 0 auto 1rem;
color: var(--accent-primary);
transition: all var(--transition-base);
}
.plan-icon svg {
width: 28px;
height: 28px;
}
.pricing-card:hover .plan-icon {
background: var(--accent-gradient);
color: white;
box-shadow: 0 8px 24px var(--accent-glow);
transform: scale(1.1) rotate(-5deg);
}
.pricing-card.featured .plan-icon {
background: var(--accent-gradient);
color: white;
box-shadow: 0 8px 24px var(--accent-glow);
}
.plan-name {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.25rem;
transition: color var(--transition-base);
}
.pricing-card:hover .plan-name {
color: var(--accent-primary);
}
.pricing-card.featured .plan-name {
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.plan-description {
font-size: 0.9rem;
color: var(--text-secondary);
}
.plan-price {
text-align: center;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--bg-tertiary);
}
.price-amount {
font-size: 2.75rem;
font-weight: 700;
font-family: 'Inter', 'Outfit', sans-serif;
color: var(--text-primary);
line-height: 1.15;
letter-spacing: -0.03em;
display: inline-block;
transition: transform 0.15s ease, opacity 0.15s ease;
overflow: visible;
}
.pricing-card.featured .price-amount {
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
padding-top: 0.15em;
}
.pricing-card.featured .price-amount.discounted {
background: none;
-webkit-text-fill-color: inherit;
}
.pricing-card.featured .price-original {
-webkit-text-fill-color: var(--text-secondary);
}
.pricing-card.featured .price-discounted {
-webkit-text-fill-color: var(--success, #10b981);
}
.pricing-card.featured .discount-badge {
-webkit-text-fill-color: white;
}
.promo-duration-hint {
font-size: 0.75rem;
color: var(--success, #10b981);
font-weight: 500;
text-align: center;
margin-top: 4px;
line-height: 1.3;
letter-spacing: 0.01em;
}
.price-period {
font-size: 1rem;
color: var(--text-secondary);
font-weight: 500;
}
/* Discounted price styling */
.price-amount.discounted {
position: relative;
}
.price-original {
display: block;
font-size: 0.5em;
color: var(--text-secondary);
text-decoration: line-through;
margin-bottom: 2px;
font-weight: 400;
}
.price-discounted {
color: var(--success, #10b981);
}
.discount-badge {
position: absolute;
top: -8px;
right: -45px;
padding: 3px 8px;
background: var(--success, #10b981);
color: white;
font-size: 10px;
font-weight: 700;
border-radius: 100px;
white-space: nowrap;
}
.plan-features {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 2rem;
flex-grow: 1;
padding: 0;
}
.plan-features li {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.95rem;
color: var(--text-secondary);
transition: color var(--transition-base);
}
.plan-features li svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--success);
}
.plan-features li.disabled {
opacity: 0.5;
}
.plan-features li.disabled svg {
color: var(--text-muted);
}
.plan-features li .feat-info {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-left: -4px;
border-radius: 50%;
color: #94a3b8;
background: rgba(148, 163, 184, 0.1);
border: 1px solid rgba(148, 163, 184, 0.4);
cursor: help;
outline: none;
transition: color 0.18s ease,
background 0.18s ease,
border-color 0.18s ease,
transform 0.18s ease,
box-shadow 0.18s ease;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.plan-features li .feat-info svg {
width: 10px;
height: 10px;
color: inherit;
stroke: currentColor;
}
.plan-features li .feat-info:hover,
.plan-features li .feat-info:focus-visible {
color: #ffffff;
background: #64748b;
border-color: #64748b;
transform: scale(1.1);
box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.15);
}
.plan-features li .feat-info-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 0;
width: max-content;
max-width: 260px;
padding: 10px 12px;
border-radius: 10px;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.1);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14),
0 4px 10px rgba(15, 23, 42, 0.08);
color: #0f172a;
font-size: 0.78rem;
line-height: 1.45;
font-weight: 400;
text-align: left;
letter-spacing: 0.01em;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.15s ease, transform 0.15s ease;
pointer-events: none;
z-index: 20;
}
.plan-features li .feat-info-tooltip::after {
content: "";
position: absolute;
top: 100%;
right: 6px;
width: 10px;
height: 10px;
background: #ffffff;
border-right: 1px solid rgba(15, 23, 42, 0.1);
border-bottom: 1px solid rgba(15, 23, 42, 0.1);
transform: translateY(-50%) rotate(45deg);
}
.plan-features li .feat-info:hover .feat-info-tooltip,
.plan-features li .feat-info:focus-visible .feat-info-tooltip {
opacity: 1;
transform: translateY(0);
}
.pricing-card:has(.feat-info:hover),
.pricing-card:has(.feat-info:focus-visible) {
z-index: 100 !important;
}
@media (max-width: 600px) {
.plan-features li .feat-info-tooltip {
max-width: 220px;
right: -6px;
font-size: 0.72rem;
}
}
.plan-coming-soon-section {
margin-top: -1.25rem;
padding-top: 8px;
border-top: 1px dashed var(--border, rgba(255,255,255,0.1));
margin-bottom: 1.25rem;
opacity: 0.7;
}
.plan-coming-soon-heading {
font-size: 0.65em;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 6px 0;
padding: 0;
}
.plan-coming-soon-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.plan-coming-soon-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85em;
color: var(--text-muted);
}
.plan-coming-soon-list li svg {
flex-shrink: 0;
width: 14px;
height: 14px;
color: var(--text-muted);
opacity: 0.7;
}
.plan-coming-soon-list li.included svg {
color: var(--success);
opacity: 1;
}
.pricing-card:hover .plan-coming-soon-section {
opacity: 0.85;
}
.pricing-card:hover .plan-features li:not(.disabled) {
color: var(--text-primary);
}
.infinity-symbol {
font-size: 1.3em;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
top: -1px;
}
.plan-cta {
width: 100%;
padding: 14px 24px;
background: var(--bg-tertiary);
color: var(--text-primary);
font-size: 15px;
font-weight: 600;
font-family: inherit;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all var(--transition-base);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.plan-cta:hover {
background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(14, 165, 233, 0.25);
}
.plan-cta:active {
transform: translateY(0) scale(0.98);
}
.plan-cta.featured {
background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
color: white;
box-shadow: 0 4px 20px rgba(14, 165, 233, 0.25);
}
.plan-cta.featured:hover {
box-shadow: 0 8px 30px rgba(14, 165, 233, 0.32);
transform: translateY(-3px);
}
.plan-cta.featured svg {
width: 18px;
height: 18px;
transition: transform var(--transition-base);
}
.plan-cta.featured:hover svg {
transform: translateX(4px);
}
/* ==================== PRICING WRAPPER ==================== */
.pricing-wrapper {
position: relative;
/* Grid bleibt zentriert wie bei ValWebside */
max-width: 1100px;
margin: 0 auto;
padding-top: 16px;
}
/* ==================== FREE TIER CARD ==================== */
.pricing-wrapper > .pricing-card.free-tier {
position: absolute;
/* links neben dem Grid, ohne das Grid zu verschieben */
left: -320px;
top: 16px;
width: 300px;
background: linear-gradient(145deg,
rgba(241, 245, 249, 0.95) 0%,
rgba(226, 232, 240, 0.6) 100%);
border: 2px dashed rgba(148, 163, 184, 0.5);
}
.pricing-card.free-tier::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
rgba(100, 116, 139, 0.4) 20%,
rgba(100, 116, 139, 0.6) 50%,
rgba(100, 116, 139, 0.4) 80%,
transparent 100%);
border-radius: 24px 24px 0 0;
}
.pricing-card.free-tier:hover {
border-color: rgba(100, 116, 139, 0.6);
box-shadow: var(--shadow-lg), 0 0 30px rgba(100, 116, 139, 0.1);
transform: translateY(-8px);
}
.free-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: 5px 14px;
background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
color: white;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
border-radius: 100px;
box-shadow: 0 3px 10px rgba(100, 116, 139, 0.3);
white-space: nowrap;
}
.pricing-card.free-tier .plan-icon {
background: linear-gradient(135deg, rgba(148, 163, 184, 0.2) 0%, rgba(100, 116, 139, 0.1) 100%);
color: #64748b;
}
.pricing-card.free-tier:hover .plan-icon {
background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
color: white;
box-shadow: 0 8px 20px rgba(100, 116, 139, 0.25);
}
.pricing-card.free-tier .plan-name {
color: #475569;
}
.pricing-card.free-tier:hover .plan-name {
color: #334155;
}
.pricing-card.free-tier .price-amount {
color: #64748b;
font-size: 2.25rem;
}
.pricing-card.free-tier .price-period {
color: #94a3b8;
}
.pricing-card.free-tier .plan-features {
font-size: 0.9rem;
gap: 0.6rem;
}
.plan-cta.free {
background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
color: white;
border: none;
box-shadow: 0 4px 14px rgba(100, 116, 139, 0.25);
}
.plan-cta.free:hover {
background: linear-gradient(135deg, #475569 0%, #64748b 100%);
box-shadow: 0 6px 20px rgba(100, 116, 139, 0.35);
transform: translateY(-2px);
}
/* Responsive: Free Tier + Pricing Grid */
@media (max-width: 1024px) {
.pricing-grid {
grid-template-columns: repeat(2, 1fr);
max-width: 700px;
}
/* Free bleibt links, ohne Grid zu verschieben */
.pricing-wrapper > .pricing-card.free-tier {
width: 260px;
left: -280px;
}
.pricing-card.featured {
transform: none;
}
.pricing-card.featured:hover {
transform: translateY(-8px);
}
}
@media (max-width: 768px) {
/* Free bleibt links, Grid bleibt zentriert */
.pricing-wrapper > .pricing-card.free-tier {
width: 220px;
left: -240px;
}
.pricing-grid {
grid-template-columns: 1fr;
max-width: 340px;
margin: 0 auto;
}
.pricing-card.featured {
transform: none;
order: -1;
}
.pricing-card.featured:hover {
transform: translateY(-8px);
}
}
@media (max-width: 480px) {
.pricing-grid {
max-width: 100%;
gap: 1rem;
}
.pricing-card {
padding: 1.2rem;
border-radius: 16px;
}
.pricing-wrapper > .pricing-card.free-tier {
position: static;
width: 100%;
left: auto;
max-width: 100%;
margin-bottom: 1rem;
}
.pricing-wrapper {
flex-direction: column;
align-items: center;
}
.featured-badge {
font-size: 10px;
padding: 4px 14px;
top: -10px;
}
.pricing-card .save-badge {
font-size: 9px;
padding: 3px 8px;
}
.plan-name {
font-size: 1.1rem;
}
.price-amount {
font-size: 2rem;
}
.plan-features {
font-size: 0.85rem;
}
.plan-cta {
padding: 10px 16px;
font-size: 0.9rem;
}
.promo-code-wrapper {
margin-top: 1.5rem;
}
#promoCodeInput {
font-size: 12px;
padding: 8px 12px;
}
#promoCodeBtn {
padding: 8px 14px;
font-size: 12px;
}
}
/* Promo Code Section */
.promo-code-wrapper {
margin-top: 2.5rem;
display: none;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.pricing-card.is-selected {
border-color: var(--accent-primary);
box-shadow: 0 0 0 2px var(--accent-primary), 0 24px 48px rgba(14, 165, 233, 0.18);
transform: translateY(-8px);
}
/* ==================== Checkout Step — Enterprise ==================== */
.subscription-checkout-step {
margin-top: 2.5rem;
max-width: 680px;
margin-left: auto;
margin-right: auto;
animation: scoFadeSlideIn 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes scoFadeSlideIn {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.subscription-checkout-card {
position: relative;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 12px 40px rgba(15,23,42,0.08);
padding: 0;
overflow: hidden;
}
.dashboard-theme-dark .subscription-checkout-card {
background: #0f172a;
border-color: rgba(148,163,184,0.12);
box-shadow: 0 1px 3px rgba(0,0,0,0.16), 0 12px 40px rgba(0,0,0,0.32);
}
/* ── Header strip ── */
.sco-header {
padding: 24px 32px 20px;
border-bottom: 1px solid #e2e8f0;
display: flex;
align-items: center;
gap: 14px;
}
.dashboard-theme-dark .sco-header {
border-bottom-color: rgba(148,163,184,0.10);
}
.sco-header-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sco-header-icon svg { width: 20px; height: 20px; color: #fff; }
.sco-header-text h3 {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.sco-header-text p {
margin: 2px 0 0;
font-size: 0.82rem;
color: var(--text-secondary);
line-height: 1.4;
}
.sco-back-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.78rem;
font-weight: 600;
color: var(--accent-primary, #0ea5e9);
cursor: pointer;
background: none;
border: none;
padding: 0;
margin-top: 6px;
transition: opacity 0.15s;
}
.sco-back-link:hover { opacity: 0.7; }
.sco-back-link svg { width: 14px; height: 14px; }
.sco-logged-in-as {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 32px;
font-size: 0.75rem;
color: var(--text-secondary);
border-bottom: 1px solid #e2e8f0;
}
.dashboard-theme-dark .sco-logged-in-as {
border-bottom-color: rgba(148,163,184,0.10);
}
.sco-logged-in-as svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.5; }
.sco-logged-in-as strong { color: var(--text-primary); font-weight: 600; }
/* ── Plan summary row ── */
.sco-plan-summary {
padding: 20px 32px;
margin: 0 16px 0;
border-radius: 12px;
border: 2px solid var(--accent-primary, #0ea5e9);
background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
}
.dashboard-theme-dark .sco-plan-summary {
background: linear-gradient(135deg, rgba(14,165,233,0.06) 0%, rgba(30,41,59,0.5) 100%);
border-color: rgba(14,165,233,0.35);
}
.sco-plan-summary-title {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary);
}
.sco-plan-summary-label {
display: block;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent-primary, #0ea5e9);
margin-bottom: 4px;
}
.sco-summary-divider {
border: none;
height: 1px;
background: rgba(100,116,139,0.55);
margin: 14px 0;
}
.dashboard-theme-dark .sco-summary-divider {
background: rgba(148,163,184,0.38);
}
.sco-plan-features-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 16px;
margin: 0;
padding: 0;
list-style: none;
}
.sco-plan-features-list li {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
color: var(--text-secondary);
line-height: 1.35;
padding: 2px 0;
}
.sco-plan-features-list li svg {
flex-shrink: 0;
width: 12px;
height: 12px;
stroke: var(--accent-primary, #0ea5e9);
}
.sco-plan-features-list li.disabled {
color: var(--text-muted);
}
.sco-plan-features-list li.disabled svg {
stroke: var(--text-muted);
}
.sco-plan-summary .plan-coming-soon-section {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--border, rgba(255,255,255,0.1));
opacity: 0.7;
}
.sco-plan-summary .plan-coming-soon-heading {
font-size: 0.6em;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 4px 0;
padding: 0;
}
.sco-plan-summary .plan-coming-soon-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.sco-plan-summary .plan-coming-soon-list li {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.78em;
color: var(--text-muted);
}
.sco-plan-summary .plan-coming-soon-list li svg {
flex-shrink: 0;
width: 12px;
height: 12px;
stroke: var(--text-muted);
opacity: 0.7;
}
.sco-plan-summary .plan-coming-soon-list li.included svg {
stroke: var(--accent-primary, #0ea5e9);
opacity: 1;
}
.sco-plan-summary-price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.sco-plan-summary-price-left { flex: 1; }
.sco-plan-summary-meta {
margin: 0;
font-size: 0.78rem;
color: var(--text-secondary);
line-height: 1.45;
}
.sco-plan-summary-price-right {
text-align: right;
flex-shrink: 0;
}
.sco-plan-price {
display: block;
font-size: 1.55rem;
font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1.15;
}
.sco-plan-price-meta {
display: block;
font-size: 0.72rem;
color: var(--text-secondary);
margin-top: 2px;
}
.sco-promo-duration-hint {
display: block;
margin-top: 4px;
font-size: 0.78rem;
font-weight: 500;
color: var(--success, #10b981);
line-height: 1.4;
}
.sco-terms-text {
margin: 0;
font-size: 0.78rem;
line-height: 1.55;
color: var(--text-secondary);
}
/* ── Consent checkboxes ── */
.sco-consents {
padding: 24px 32px;
}
.sco-consents-title {
margin: 0 0 16px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
}
.sco-consent-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid transparent;
margin-bottom: 8px;
transition: background 0.15s ease, border-color 0.15s ease;
cursor: pointer;
}
.sco-consent-item:last-child { margin-bottom: 0; }
.sco-consent-item:hover {
background: rgba(14,165,233,0.03);
}
.sco-consent-item.has-error {
border-color: var(--error, #ef4444);
background: rgba(239,68,68,0.04);
}
.sco-consent-item.has-error .sco-consent-check {
border-color: var(--error, #ef4444);
}
.sco-consent-item.is-checked {
background: rgba(16,185,129,0.04);
border-color: rgba(16,185,129,0.15);
}
.sco-consent-check {
position: relative;
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 1px;
border-radius: 6px;
border: 2px solid #cbd5e1;
background: #fff;
transition: all 0.2s cubic-bezier(0.22,1,0.36,1);
display: flex;
align-items: center;
justify-content: center;
}
.dashboard-theme-dark .sco-consent-check {
border-color: #475569;
background: #1e293b;
}
.sco-consent-check input[type="checkbox"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
margin: 0;
}
.sco-consent-check svg {
width: 12px;
height: 12px;
color: #fff;
opacity: 0;
transform: scale(0.5);
transition: all 0.2s cubic-bezier(0.22,1,0.36,1);
}
.sco-consent-check.is-active {
background: #0ea5e9;
border-color: #0ea5e9;
box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
}
.sco-consent-check.is-active svg {
opacity: 1;
transform: scale(1);
}
.sco-consent-label {
font-size: 0.84rem;
line-height: 1.5;
color: var(--text-primary);
cursor: pointer;
user-select: none;
}
.sco-consent-label a {
color: var(--accent-primary, #0ea5e9);
font-weight: 600;
text-decoration: none;
}
.sco-consent-label a:hover { text-decoration: underline; }
.sco-withdrawal-info {
padding: 14px 16px;
margin-bottom: 8px;
border-radius: 10px;
background: rgba(14,165,233,0.04);
border: 1px solid rgba(14,165,233,0.10);
}
.dashboard-theme-dark .sco-withdrawal-info {
background: rgba(14,165,233,0.06);
border-color: rgba(56,189,248,0.12);
}
.sco-withdrawal-info p {
margin: 0;
font-size: 0.84rem;
line-height: 1.55;
color: var(--text-primary);
}
.sco-withdrawal-info a {
color: var(--accent-primary, #0ea5e9);
font-weight: 500;
text-decoration: none;
}
.sco-withdrawal-info a:hover { text-decoration: underline; }
/* ── Footer (CTA + trust) ── */
.sco-footer {
padding: 16px 32px 28px;
}
.sco-error-msg {
font-size: 0.82rem;
color: var(--error, #ef4444);
margin-bottom: 12px;
min-height: 0;
}
.sco-error-msg:empty { display: none; }
.subscription-checkout-submit {
width: 100%;
border: none;
border-radius: 12px;
padding: 15px 24px;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.01em;
color: #fff;
background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
box-shadow: 0 4px 14px rgba(14,165,233,0.25);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.22,1,0.36,1);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.subscription-checkout-submit:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(14,165,233,0.32);
}
.subscription-checkout-submit:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(14,165,233,0.2);
}
.subscription-checkout-submit:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.subscription-checkout-submit svg { width: 18px; height: 18px; flex-shrink: 0; }
.sco-trust-row {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 14px;
flex-wrap: wrap;
}
.sco-trust-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.72rem;
color: var(--text-secondary);
white-space: nowrap;
}
.sco-trust-item svg { width: 14px; height: 14px; opacity: 0.5; flex-shrink: 0; }
/* ── Mobile ── */
@media (max-width: 768px) {
.subscription-checkout-step {
margin-top: 1.5rem;
}
.sco-header,
.sco-consents,
.sco-logged-in-as,
.sco-footer {
padding-left: 20px;
padding-right: 20px;
}
.sco-plan-summary {
padding-left: 16px;
padding-right: 16px;
margin-left: 10px;
margin-right: 10px;
}
.sco-plan-features-list {
grid-template-columns: 1fr;
}
.sco-plan-summary-price-row {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.sco-plan-summary-price-right {
text-align: left;
}
.sco-plan-price {
font-size: 1.3rem;
}
.subscription-checkout-card {
border-radius: 16px;
}
.sco-consent-item {
padding: 10px 10px;
gap: 10px;
}
.sco-consent-label {
font-size: 0.8rem;
}
.sco-trust-row {
gap: 10px;
}
}
.promo-code-input-group {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--bg-card);
border-radius: 12px;
padding: 4px;
box-shadow: var(--shadow-sm), inset 0 1px 2px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.06);
transition: all var(--transition-base);
}
.promo-code-input-group:focus-within {
border-color: var(--accent-primary);
box-shadow: var(--shadow-sm), 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.promo-code-input-group.valid {
border-color: var(--success);
box-shadow: var(--shadow-sm), 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.promo-code-input-group.invalid {
border-color: var(--error, #ef4444);
box-shadow: var(--shadow-sm), 0 0 0 3px rgba(239, 68, 68, 0.15);
}
#promoCodeInput {
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.5px;
color: var(--text-primary);
background: transparent;
border: none;
outline: none;
min-width: 180px;
text-transform: uppercase;
}
#promoCodeInput::placeholder {
color: var(--text-muted);
text-transform: none;
font-family: 'Outfit', sans-serif;
letter-spacing: normal;
}
#promoCodeBtn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 20px;
font-size: 13px;
font-weight: 600;
font-family: inherit;
color: white;
background: var(--accent-gradient);
border: none;
border-radius: 8px;
cursor: pointer;
transition: all var(--transition-base);
white-space: nowrap;
}
#promoCodeBtn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--accent-glow);
}
#promoCodeBtn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
#promoCodeBtn .promo-spinner {
display: none;
width: 16px;
height: 16px;
animation: spin 1s linear infinite;
}
#promoCodeBtn.loading span {
display: none;
}
#promoCodeBtn.loading .promo-spinner {
display: block;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Promo Clear Button */
.promo-clear-btn {
display: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
background: var(--error, #ef4444);
border: none;
border-radius: 8px;
cursor: pointer;
transition: all var(--transition-base);
flex-shrink: 0;
}
.promo-clear-btn svg {
width: 16px;
height: 16px;
stroke: white;
}
.promo-clear-btn:hover {
background: #dc2626;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}
.promo-code-wrapper.has-active-code .promo-clear-btn {
display: flex;
}
.promo-code-wrapper.has-active-code #promoCodeInput {
background: rgba(16, 185, 129, 0.05);
}
.promo-code-message {
font-size: 13px;
font-weight: 500;
min-height: 20px;
transition: all var(--transition-base);
}
.promo-code-message.success {
color: var(--success);
}
.promo-code-message.error {
color: var(--error, #ef4444);
}
.vat-star {
font-size: 0.45em;
vertical-align: top;
line-height: 1;
font-weight: 400;
opacity: 0.7;
position: relative;
top: -0.3em;
}
.pricing-vat-note {
text-align: center;
font-size: 0.8rem;
color: var(--text-secondary, #475569);
margin: 18px 0 4px;
letter-spacing: 0.01em;
}
.pricing-payment-methods {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 2rem;
padding: 1.25rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: none;
}
.pricing-payment-methods .pm-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.pricing-payment-methods .pm-item img,
.pricing-payment-methods .pm-item svg {
width: 46px;
height: 30px;
flex-shrink: 0;
border-radius: 4px;
object-fit: contain;
}
.pricing-payment-methods .pm-item .pm-name {
font-size: 11.5px;
color: var(--text-secondary);
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
opacity: 1;
}
.bbt-subscription-hint {
margin-top: 1.5rem;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--bg-secondary);
color: var(--text-secondary);
font-size: 13px;
line-height: 1.5;
text-align: center;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* ==================== TOTP Setup Modal ==================== */
#bbtTotpSetupModalOverlay .modal {
max-width: 760px;
}
.bbt-totp-setup-grid {
display: grid;
grid-template-columns: 260px 1fr;
gap: 18px;
align-items: start;
}
@media (max-width: 800px) {
.bbt-totp-setup-grid {
grid-template-columns: 1fr;
}
}
.bbt-totp-qr {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.bbt-totp-qr canvas {
width: 240px;
height: 240px;
image-rendering: pixelated;
}
.bbt-totp-kv {
display: grid;
gap: 10px;
}
.bbt-totp-kv label {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 4px;
display: block;
}
.bbt-totp-value {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 12px;
color: var(--text-primary);
border: 1px solid var(--border);
background: var(--bg-secondary);
border-radius: 12px;
padding: 10px 12px;
word-break: break-all;
}
.bbt-totp-recovery {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 12px;
border: 1px solid var(--border);
background: var(--bg-secondary);
border-radius: 12px;
padding: 10px 12px;
white-space: pre-wrap;
line-height: 1.6;
}
.bbt-totp-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
flex-wrap: wrap;
margin-top: 12px;
}
.bbt-help-panel {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px;
height: calc(100vh - (var(--bbt-header-offset, 0px) + 32px));
position: fixed;
top: calc(var(--bbt-header-offset, 0px) + 16px);
left: 24px;
width: 422px;
overflow: auto;
z-index: 950;
transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
right 0.35s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Wenn ein Modal (z.B. Portfolio hinzufügen) offen ist, muss das Help-Panel über der Abdunklung liegen. */
body.bbt-modal-open .bbt-help-panel {
z-index: 1105; /* > .modal-overlay (1000) */
}
html.bbt-modal-open,
body.bbt-modal-open {
overflow: hidden;
overscroll-behavior: none;
}
.bbt-help-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.bbt-help-title {
font-weight: 700;
margin-bottom: 0;
}
.bbt-help-close {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
background: transparent;
border-radius: 8px;
cursor: pointer;
color: var(--text-secondary);
transition: background 0.15s ease, color 0.15s ease;
flex-shrink: 0;
}
.bbt-help-close:hover {
background: var(--bg-hover, rgba(0,0,0,0.06));
color: var(--text-primary);
}
.bbt-help-close svg {
width: 16px;
height: 16px;
stroke-width: 2;
}
.bbt-help-body {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.5;
white-space: pre-wrap;
}
/* Help-Admin: Alt+Click Auswahl-Markierung */
.bbt-help-picked-element {
outline: 2px solid var(--primary);
outline-offset: 2px;
box-shadow: 0 0 0 6px rgba(8, 145, 178, 0.18);
border-radius: 10px;
transition: outline-color var(--transition-fast), box-shadow var(--transition-fast);
}
.help-controls {
display: inline-flex;
gap: 8px;
align-items: center;
margin-right: 12px;
}
.help-toggle-btn {
padding: 10px 16px;
border: 1px solid var(--border);
background: var(--bg-secondary);
color: var(--text-primary);
border-radius: 10px;
cursor: pointer;
transition: var(--transition-fast);
font-weight: 500;
box-shadow: var(--shadow-sm);
}
.help-toggle-btn:hover {
background: var(--bg-hover);
border-color: var(--border-hover);
transform: translateY(-1px);
}
.help-toggle-btn.active {
background: var(--gradient-primary);
border-color: transparent;
box-shadow: var(--shadow-hover);
}
.lang-select {
padding: 10px 14px;
border: 1px solid var(--border);
background: var(--bg-secondary);
color: var(--text-primary);
border-radius: 10px;
cursor: pointer;
transition: var(--transition-fast);
box-shadow: var(--shadow-sm);
}
.lang-select:hover {
border-color: var(--border-hover);
}
.lang-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-glow);
outline: none;
}
#dashboardPanel {
max-width: 100%;
}
/* Strategy Grid */
.strategies-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
/* "Meine Strategien": Button links, Suche rechts (ohne HTML ändern) */
.strategies-header > div {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
/* btnAddStrategy wurde entfernt (Card ist der Entry-Point) */
.strategies-header > div .strategy-search {
order: 2;
}
.strategies-header h2 {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
}
/* Dashboard: Zweiter "Kasten" (Panel-ähnlich) z.B. für "Meine Portfolios" */
.dashboard-box {
margin-top: 28px;
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden; /* damit header/body sauber in den Radius clippen */
background: var(--bg-card);
box-shadow: var(--shadow-sm);
}
.dashboard-box .panel-header {
border-bottom: 1px solid var(--border);
}
/* ==================== Dashboard Tabs (Strategien / Portfolios) ==================== */
#dashboardHome {
width: 100%;
display: flex;
flex-direction: column;
gap: 18px;
transition: margin-left var(--transition-normal), width var(--transition-normal);
}
/* Help-Mode: Content schmaler machen, damit das fixed Help-Panel (422px + 16px gap) daneben passt */
.container.dashboard-active.help-mode #dashboardHome {
margin-left: 438px;
width: calc(100% - 438px);
}
/* Massenbacktest geöffnet: Help-Panel rechts statt links, über Overlay sichtbar */
.container.dashboard-active.help-mode.bbt-help-right-for-mass #dashboardHome {
margin-left: 0;
width: 100%;
}
.container.help-mode.bbt-help-right-for-mass #bbtHelpPanel {
left: auto;
right: 16px;
z-index: 1105;
}
.dashboard-home-topbar {
display: flex;
align-items: center;
gap: 12px;
}
.dashboard-home-topbar-left {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 10px;
}
.dashboard-home-topbar-center {
flex: 1 1 auto;
display: flex;
justify-content: center;
}
/* Farbe/Feedback orientiert am Auswertungs-Button (Gradient + Shadow), aber ohne Rand-Artefakte */
.btn-dashboard-top-action {
padding: 12px 18px;
background: var(--gradient-primary);
color: white;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: var(--transition-normal);
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
white-space: nowrap;
}
.btn-dashboard-top-action:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.btn-dashboard-top-action:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
/* Tabs: NICHT scrollen (nur 2 Tabs) => kein Clipping am rechten Rand möglich */
.dashboard-tabs {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 10px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-radius: 14px;
box-shadow: var(--shadow-sm);
user-select: none;
overflow: visible;
max-width: 100%;
}
.dashboard-tab {
appearance: none;
background: rgba(255, 255, 255, 0.65);
color: var(--text-primary);
padding: 10px 14px;
border-radius: 12px;
font-weight: 700;
font-size: 13px;
letter-spacing: -0.1px;
cursor: pointer;
transition: var(--transition-fast);
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
white-space: nowrap;
border: 1px solid rgba(226, 232, 240, 0.9);
box-shadow: var(--shadow-sm);
-webkit-tap-highlight-color: transparent;
background-clip: padding-box;
}
/* Kill browser focus ring (blauer Rand). Keyboard-Fokus kommt über :focus-visible */
.dashboard-tab:focus,
.dashboard-tab:active {
outline: none;
}
.dashboard-tab:hover {
background: rgba(226, 232, 240, 0.85);
border-color: var(--border-hover);
transform: translateY(-1px);
}
.dashboard-tab:active {
transform: translateY(0);
}
.dashboard-tab:focus-visible {
outline: none;
box-shadow: 0 0 0 4px var(--primary-glow);
border-color: transparent;
}
.dashboard-tab[aria-selected="true"] {
/* Exakt wie Auswertung-Button */
background: var(--gradient-primary);
color: white;
border: none;
box-shadow: var(--shadow-md);
}
.dashboard-tab[aria-selected="true"]:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
filter: none;
}
.dashboard-tab[aria-selected="true"]:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
.dashboard-tab-icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.95;
}
@media (max-width: 768px) {
.dashboard-home-topbar {
flex-wrap: wrap;
gap: 8px;
}
.dashboard-home-topbar-left {
order: 2;
flex: 0 0 auto;
}
.dashboard-home-topbar-center {
order: 1;
flex: 1 1 100%;
justify-content: center;
}
.dashboard-tabs {
gap: 6px;
padding: 6px;
border-radius: 12px;
width: 100%;
justify-content: center;
}
.dashboard-tab {
padding: 8px 10px;
font-size: 12px;
gap: 6px;
border-radius: 10px;
}
.dashboard-tab-icon {
width: 15px;
height: 15px;
}
.btn-dashboard-top-action {
padding: 10px 14px;
font-size: 12px;
border-radius: 10px;
}
}
@media (max-width: 480px) {
.dashboard-tab {
padding: 7px 8px;
font-size: 11px;
gap: 4px;
}
.dashboard-tab-icon {
width: 13px;
height: 13px;
}
.btn-dashboard-top-action {
padding: 8px 12px;
font-size: 11px;
}
}
/* ==================== Dashboard Tabs: Darkmode Fix ==================== */
/* Im Darkmode werden Textfarben über Variablen korrekt gesetzt,
aber die Tab-Hintergründe waren hardcoded hell (rgba(255,...)).
Diese Overrides sorgen dafür, dass der Switch optisch wirklich "dark" ist. */
body.dashboard-theme-dark .dashboard-tabs {
background: rgba(20, 20, 20, 0.55);
border-color: var(--border);
}
body.dashboard-theme-dark .dashboard-tab:not([aria-selected="true"]) {
background: rgba(26, 26, 26, 0.65);
border-color: var(--border);
}
body.dashboard-theme-dark .dashboard-tab:not([aria-selected="true"]):hover {
background: rgba(36, 36, 36, 0.85);
border-color: var(--border-hover);
}
/* Tab content: smooth show/hide */
.tab-panel {
transition: opacity var(--transition-normal), transform var(--transition-normal);
opacity: 1;
transform: translateY(0);
}
/* Panels werden im Wrapper absolut überlagert -> kein Layout-Shift beim Wechsel */
.dashboard-panels-wrap {
position: relative;
width: 100%;
height: var(--dash-panels-h, auto);
/* min-height sorgt dafür, dass der Footer immer am unteren Rand bleibt.
Wird dynamisch via JS auf Basis der tatsächlichen Elementpositionen gesetzt. */
min-height: var(--dash-panels-min-h, 50vh);
}
/* Transition erst nach erstem Measure aktivieren, damit kein "0 -> 100%" Bug beim Reload sichtbar ist */
.dashboard-panels-wrap.ready {
transition: height var(--transition-normal);
}
.dashboard-panels-wrap > .tab-panel {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
}
.tab-panel.hidden {
display: block !important;
opacity: 0;
transform: translateY(6px);
pointer-events: none;
visibility: hidden;
}
/* Strategy Search (Dashboard) – moderner, im Stil der Website/Pricing-Cards */
.strategy-search {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: rgba(255, 255, 255, 0.72);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.strategy-search:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-glow), var(--shadow-sm);
background: rgba(255, 255, 255, 0.86);
}
.strategy-search svg {
flex: 0 0 auto;
color: var(--text-secondary);
}
.strategy-search input[type="search"] {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: none;
outline: none;
color: var(--text-primary);
font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 1.2;
letter-spacing: -0.015em;
caret-color: var(--primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
width: min(380px, 42vw);
min-width: 220px;
}
.strategy-search input[type="search"]::placeholder {
color: var(--text-muted);
font-weight: 500;
opacity: 0.9;
}
/* Native X in search inputs ausblenden, wir haben eigenes Clear */
.strategy-search input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
display: none;
}
.strategy-search .btn-clear {
width: 28px;
height: 28px;
border-radius: 10px;
background: transparent;
border: 1px solid transparent;
color: var(--text-secondary);
cursor: pointer;
font-size: 14px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.strategy-search .btn-clear:hover {
background: rgba(2, 132, 199, 0.08);
border-color: rgba(2, 132, 199, 0.16);
color: var(--text-primary);
transform: translateY(-1px);
}
.strategy-search .btn-clear:active {
transform: translateY(0);
}
body.dashboard-theme-dark .strategy-search {
background: rgba(20, 20, 20, 0.55);
border: 1px solid rgba(255, 255, 255, 0.14);
}
body.dashboard-theme-dark .strategy-search:focus-within {
background: rgba(20, 20, 20, 0.72);
}
.btn-add {
width: 38px;
height: 38px;
padding: 0;
background: #d6d6d6;
color: #5a5a5a;
border: 1.5px solid rgba(0,0,0,0.1);
border-radius: 50%;
font-size: 20px;
font-weight: 400;
line-height: 1;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
}
.btn-add:hover {
transform: scale(1.1);
background: #c4c4c4;
color: #333;
box-shadow: 0 3px 8px rgba(0,0,0,0.12);
border-color: rgba(0,0,0,0.15);
}
.btn-add:active {
transform: scale(0.95);
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
body.dashboard-theme-dark .btn-add {
background: #4a4a4a;
color: #c0c0c0;
border-color: rgba(255,255,255,0.12);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
body.dashboard-theme-dark .btn-add:hover {
background: #5a5a5a;
color: #e0e0e0;
box-shadow: 0 3px 8px rgba(0,0,0,0.25);
border-color: rgba(255,255,255,0.18);
}
.btn-add-folder {
border-radius: 50%;
}
.btn-add-folder svg {
width: 18px;
height: 18px;
}
.btn-action {
padding: 12px 24px;
background: var(--gradient-primary);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: var(--transition-normal);
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
}
.btn-action:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.btn-action:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
/* ==================== Strategy-Card Scaling (Admin Multiplier) ====================
* Ziel:
* - Ein einziger Multiplikator steuert die komplette Strategy-Card proportional.
* - Keine `transform: scale()` Nebenwirkungen (keine "größeren Lücken" im Grid).
* - Default ist "ursprünglich" (Scale = 1.0).
*
* Technik:
* - CSS nutzt "finale" Variablen (z.B. --bbtStrategyCardGridMinWidth).
* - JS berechnet diese Variablen aus einer Basis + Multiplikator.
*/
:root {
/* Persistierter Wert (JS setzt & liest). Default: 1.0 */
--bbtStrategyCardScale: 0.93;
/* Finale, von JS gesetzte Werte (Fallback = Basiswerte) */
--bbtStrategyCardGridMinWidth: 350px;
--bbtStrategyCardGridGap: 24px;
--bbtStrategyCardGridMarginTop: 20px;
--bbtStrategyCardRadius: 16px;
--bbtStrategyCardPadding: 24px;
--bbtStrategyCardMinHeight: 180px;
--bbtStrategyCardMaxWidth: 440px;
--bbtStrategyCardTitleFontSize: 18px;
--bbtStrategyCardTitleMarginBottom: 8px;
/* Compact Title Mode */
--bbtStrategyCardCompactPadding: 8px 12px;
--bbtStrategyCardCompactFontSize: 13px;
--bbtStrategyCardCompactPaddingTop: 42px;
--bbtStrategyCardSymbolPadding: 4px 12px;
--bbtStrategyCardSymbolRadius: 6px;
--bbtStrategyCardSymbolFontSize: 12px;
--bbtStrategyCardSymbolMarginTop: 8px;
--bbtStrategyCardPreviewMarginTop: 16px;
--bbtStrategyCardPreviewPadding: 10px 12px;
--bbtStrategyCardPreviewRadius: 8px;
--bbtStrategyCardPreviewMinHeight: 60px;
--bbtStrategyCardPreviewContentGap: 12px;
--bbtStrategyCardPreviewSparklineWidth: 100px;
--bbtStrategyCardPreviewSparklineHeight: 40px;
--bbtStrategyCardPreviewStatsGap: 4px 12px;
--bbtStrategyCardPreviewStatsPaddingRight: 18px;
--bbtStrategyCardInfoMarginTop: 16px;
--bbtStrategyCardInfoPaddingTop: 16px;
--bbtStrategyCardInfoItemMarginBottom: 8px;
--bbtStrategyCardInfoItemFontSize: 13px;
--bbtStrategyCardDateFontSize: 12px;
--bbtStrategyCardDateMarginTop: 12px;
--bbtStrategyCardDatePaddingTop: 12px;
/* Add Card */
--bbtStrategyCardAddMinHeight: 280px;
--bbtStrategyCardAddFontSize: 15px;
--bbtStrategyCardAddIconSize: 48px;
--bbtStrategyCardAddIconInnerSize: 28px;
/* Actions in der Strategy-Card (nur dort!) */
--bbtStrategyCardActionsGap: 8px;
--bbtStrategyCardActionButtonSize: 36px;
--bbtStrategyCardActionButtonRadius: 8px;
--bbtStrategyCardActionIconSize: 18px;
--bbtStrategyCardMassSlotWidth: 36px;
--bbtStrategyCardMassSlotMinHeight: 18px;
}
.strategies-grid {
display: grid;
/* Wichtig: Auf kleinen Screens darf die Mindestbreite NIE größer als die verfügbare Breite werden */
grid-template-columns: repeat(auto-fill, minmax(min(var(--bbtStrategyCardGridMinWidth), 100%), 1fr));
gap: var(--bbtStrategyCardGridGap);
margin-top: var(--bbtStrategyCardGridMarginTop);
padding-top: 12px;
padding-right: 12px;
}
/* Erzwingt einen Zeilenumbruch im Grid: spannt alle Spalten, hat keine Höhe.
Dadurch beginnen Ordner immer in einer neuen Zeile (keine Mischzeilen). */
.bbt-grid-row-break {
grid-column: 1 / -1;
height: 0;
margin: 0;
padding: 0;
border: 0;
}
.strategy-card {
background: var(--strategy-card-bg);
border: 1px solid var(--border);
border-radius: var(--bbtStrategyCardRadius);
padding: var(--bbtStrategyCardPadding);
transition: var(--transition-normal);
cursor: pointer;
min-height: var(--bbtStrategyCardMinHeight);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-md);
backdrop-filter: blur(8px);
width: 100%;
}
/* ===== Running-Indikator: pulsierender Glow am Karten-Rand =====
* Signalisiert subtil, dass eine Strategie gerade durchgerechnet wird.
* Performance: Der Glow liegt auf dem Wrapper (Card hat overflow:hidden,
* was einen aeusseren Schatten abschneiden wuerde). Animiert wird nur die
* opacity eines Overlay-Pseudo-Elements (GPU-freundlich), damit auch viele
* gleichzeitig laufende Karten fluessig bleiben.
* Aktiviert wird der Effekt ueber die Klasse .strategy-card.is-running,
* die in updateStrategyCardProgress() abhaengig von isRunning gesetzt wird.
*/
.strategy-card-wrapper:has(.strategy-card.is-running) .strategy-card {
border-color: var(--primary);
}
.strategy-card-wrapper:has(.strategy-card.is-running)::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--bbtStrategyCardRadius);
pointer-events: none;
box-shadow: 0 0 0 2px var(--primary), 0 0 26px 3px var(--primary-glow);
animation: bbtStrategyRunningPulse 1.5s ease-in-out infinite;
z-index: 1;
}
@keyframes bbtStrategyRunningPulse {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.strategy-card-wrapper:has(.strategy-card.is-running)::after {
animation: none;
opacity: 0.6;
}
}
/* ===== Strategy Pin Styles ===== */
.strategy-card-wrapper {
position: relative;
width: 100%;
max-width: var(--bbtStrategyCardMaxWidth);
justify-self: center;
transition: transform 0.2s ease;
}
.strategy-card-wrapper:hover {
transform: translateY(-4px);
}
/* Hebt eine frisch kopierte Strategie kurz hervor, um die Aufmerksamkeit darauf zu lenken. */
.strategy-card-wrapper.bbt-card-spawn-highlight {
animation: bbtCardSpawnHighlight 0.67s ease-in-out 1;
z-index: 5;
}
@keyframes bbtCardSpawnHighlight {
0% {
transform: scale(0.94);
box-shadow: 0 0 0 0 rgba(56, 213, 240, 0);
}
35% {
transform: scale(1.045);
box-shadow: 0 0 34px 10px rgba(56, 213, 240, 0.75);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(56, 213, 240, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.strategy-card-wrapper.bbt-card-spawn-highlight {
animation: none;
}
}
body.bbt-dragging .strategy-card-wrapper:hover {
transform: none;
}
body.bbt-dragging .strategy-card-wrapper.bbt-drag-source:hover {
transform: none;
}
.strategy-card-wrapper > .btn-pin-card {
position: absolute;
top: -10px;
right: -10px;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--bg-secondary);
color: var(--text-muted);
cursor: pointer;
opacity: 0;
box-shadow: 0 1px 4px rgba(0,0,0,0.10);
transition: opacity 0.18s ease, color 0.15s ease, background 0.15s ease;
}
.strategy-card-wrapper:hover > .btn-pin-card {
opacity: 1;
}
.strategy-card-wrapper > .btn-pin-card.active {
opacity: 1;
color: #fff;
background: var(--primary);
}
.strategy-card-wrapper > .btn-pin-card:not(.active):hover {
color: var(--primary);
}
.strategy-card-wrapper > .btn-pin-card:focus {
outline: none;
}
.strategy-card-wrapper > .btn-pin-card.active:hover {
background: var(--primary-hover);
}
body.dashboard-theme-dark .strategy-card-wrapper > .btn-pin-card {
background: var(--bg-elevated);
}
body.dashboard-theme-dark .strategy-card-wrapper > .btn-pin-card.active {
background: var(--primary);
}
/* Archiv-Button auf der Strategie-Card – neben dem Pin-Button, nur bei Hover sichtbar */
.strategy-card-wrapper > .btn-archive-card {
position: absolute;
top: -10px;
right: 21px;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--bg-secondary);
color: var(--text-muted);
cursor: pointer;
opacity: 0;
box-shadow: 0 1px 4px rgba(0,0,0,0.10);
transition: opacity 0.18s ease, color 0.15s ease, background 0.15s ease;
}
.strategy-card-wrapper:hover > .btn-archive-card {
opacity: 1;
}
.strategy-card-wrapper > .btn-archive-card:hover {
color: #d97706;
background: rgba(245, 158, 11, 0.14);
}
.strategy-card-wrapper > .btn-archive-card:focus {
outline: none;
}
body.dashboard-theme-dark .strategy-card-wrapper > .btn-archive-card {
background: var(--bg-elevated);
}
body.dashboard-theme-dark .strategy-card-wrapper > .btn-archive-card:hover {
color: #fbbf24;
background: rgba(245, 158, 11, 0.18);
}
/* Restore-Button auf archivierten Strategie-Cards (Archiv-Ansicht): Ecke, dauerhaft sichtbar */
.strategy-card-wrapper > .btn-archive-card.bbt-card-restore-corner {
right: -10px;
opacity: 1;
color: #059669;
}
.strategy-card-wrapper > .btn-archive-card.bbt-card-restore-corner:hover {
color: #fff;
background: #10b981;
}
body.dashboard-theme-dark .strategy-card-wrapper > .btn-archive-card.bbt-card-restore-corner:hover {
color: #fff;
background: #10b981;
}
/* "In Ordner verschieben"-Button auf der Strategie-Card - links neben dem Archiv-Button, nur bei Hover sichtbar */
.strategy-card-wrapper > .btn-move-folder-card {
position: absolute;
top: -10px;
right: 52px;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--bg-secondary);
color: var(--text-muted);
cursor: pointer;
opacity: 0;
box-shadow: 0 1px 4px rgba(0,0,0,0.10);
transition: opacity 0.18s ease, color 0.15s ease, background 0.15s ease;
}
.strategy-card-wrapper:hover > .btn-move-folder-card {
opacity: 1;
}
.strategy-card-wrapper > .btn-move-folder-card:hover {
color: var(--primary);
background: rgba(8, 145, 178, 0.14);
}
.strategy-card-wrapper > .btn-move-folder-card:focus {
outline: none;
}
body.dashboard-theme-dark .strategy-card-wrapper > .btn-move-folder-card {
background: var(--bg-elevated);
}
body.dashboard-theme-dark .strategy-card-wrapper > .btn-move-folder-card:hover {
color: var(--primary);
background: rgba(8, 145, 178, 0.20);
}
.btn-pin {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: none;
border-radius: 4px;
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: color 0.15s ease, opacity 0.15s ease;
flex-shrink: 0;
}
.bbt-list-table .btn-pin {
opacity: 1;
}
.btn-pin:hover {
color: var(--primary);
}
.btn-pin.active {
color: var(--primary);
}
.btn-pin.active:hover {
color: var(--text-muted);
}
.bbt-row-pinned {
background: rgba(8, 145, 178, 0.03);
}
.bbt-cell-pin {
width: 36px;
text-align: center;
padding: 4px !important;
}
.bbt-col-pin {
width: 36px;
}
body.dashboard-theme-dark .btn-pin.active:hover {
color: var(--text-muted);
}
body.dashboard-theme-dark .bbt-row-pinned {
background: rgba(8, 145, 178, 0.06);
}
/* ===== Strategy Card Drag & Drop ===== */
body.bbt-dragging {
cursor: grabbing !important;
user-select: none;
-webkit-user-select: none;
}
body.bbt-dragging * {
cursor: grabbing !important;
}
.strategy-card-wrapper {
cursor: grab;
}
.strategy-card-wrapper:has(.strategy-card.pinned) {
cursor: pointer;
}
.bbt-drag-source {
opacity: 0.25;
transition: opacity 0.15s ease;
}
.bbt-drag-ghost {
opacity: 0.92;
transform: scale(1.03);
box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
border-radius: var(--bbtStrategyCardRadius);
will-change: left, top;
}
.bbt-drag-ghost .strategy-card {
border-color: var(--primary);
}
.bbt-drag-placeholder {
border: 2px dashed var(--primary);
border-radius: var(--bbtStrategyCardRadius);
background: rgba(8, 145, 178, 0.04);
opacity: 0.6;
}
/* ===== Strategy Folder Cards ===== */
.strategy-folder-card {
border: 1px solid rgba(100,160,255,0.2);
border-radius: var(--bbtStrategyCardRadius);
padding: var(--bbtStrategyCardPadding);
/* Bewusst NICHT 'all' animieren: Die Ordnerhoehe wird per JS gesetzt
(bbtSyncFolderCardHeights). Mit 'transition: all' wuerde jede Hoehen-
korrektur animiert und der Ordner "pumpt"/flackert beim Drop. Daher
nur die rein kosmetischen Eigenschaften weich ueberblenden. */
transition:
border-color var(--transition-normal),
box-shadow var(--transition-normal),
transform var(--transition-normal);
cursor: pointer;
min-height: var(--bbtStrategyCardMinHeight);
height: 100%;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-md), 0 0 40px -10px rgba(59,130,246,0.12);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
width: 100%;
display: flex;
flex-direction: column;
background:
linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(99,179,255,0.04) 50%, rgba(59,130,246,0.06) 100%),
rgba(255,255,255,0.55);
}
/* Kurzes Aufleuchten, wenn ein Ordner neu erstellt und angescrollt wurde. */
.strategy-card-wrapper.bbt-folder-just-created .strategy-folder-card {
animation: bbtFolderJustCreatedPulse 1.6s ease-out;
}
@keyframes bbtFolderJustCreatedPulse {
0% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(59,130,246,0.55); border-color: rgba(59,130,246,0.85); }
60% { box-shadow: var(--shadow-md), 0 0 0 8px rgba(59,130,246,0); border-color: rgba(59,130,246,0.85); }
100% { box-shadow: var(--shadow-md), 0 0 40px -10px rgba(59,130,246,0.12); border-color: rgba(100,160,255,0.2); }
}
.strategy-folder-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgba(59,130,246,0.10) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.strategy-folder-card > * {
position: relative;
z-index: 1;
}
body.dashboard-theme-dark .strategy-folder-card {
background:
linear-gradient(135deg, rgba(59,130,246,0.12) 0%, rgba(59,130,246,0.04) 50%, rgba(30,64,175,0.08) 100%),
rgba(15,20,35,0.6);
border-color: rgba(59,130,246,0.18);
box-shadow: var(--shadow-md), 0 0 50px -10px rgba(59,130,246,0.15), inset 0 1px 0 rgba(59,130,246,0.08);
}
body.dashboard-theme-dark .strategy-folder-card::before {
background: linear-gradient(135deg, rgba(59,130,246,0.14) 0%, transparent 60%);
}
.strategy-folder-card:hover {
border-color: rgba(59,130,246,0.45);
box-shadow: var(--shadow-hover-lg), 0 0 50px -5px rgba(59,130,246,0.18);
}
body.dashboard-theme-dark .strategy-folder-card:hover {
border-color: rgba(59,130,246,0.35);
box-shadow: var(--shadow-hover-lg), 0 0 60px -5px rgba(59,130,246,0.22), inset 0 1px 0 rgba(59,130,246,0.10);
}
.strategy-folder-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 0;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(59,130,246,0.16);
}
.strategy-folder-name {
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -0.01em;
background: linear-gradient(135deg, #2563eb 0%, #4f7cff 50%, #6366f1 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
body.dashboard-theme-dark .strategy-folder-name {
background: linear-gradient(135deg, #60a5fa 0%, #7c9bff 50%, #818cf8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.strategy-folder-icon {
flex-shrink: 0;
color: #3b82f6;
background: rgba(59,130,246,0.12);
padding: 6px;
border-radius: 8px;
box-sizing: content-box;
box-shadow: inset 0 0 0 1px rgba(59,130,246,0.18);
}
body.dashboard-theme-dark .strategy-folder-icon {
color: #60a5fa;
background: rgba(59,130,246,0.16);
box-shadow: inset 0 0 0 1px rgba(59,130,246,0.22);
}
.strategy-folder-name-input {
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--text-primary);
background: transparent;
border: none;
border-bottom: 1.5px solid var(--primary);
outline: none;
padding: 0 2px 1px;
width: 100%;
min-width: 0;
flex: 1;
}
.strategy-folder-count {
font-size: 0.75rem;
color: rgba(59,130,246,0.8);
background: rgba(59,130,246,0.08);
border: 1px solid rgba(59,130,246,0.12);
border-radius: 10px;
padding: 2px 8px;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
min-width: 22px;
text-align: center;
}
/* Kleiner Lauf-Indikator (Spinner) in der Ordner-Kopfzeile:
* zeigt an, dass mindestens eine Strategie innerhalb des Ordners gerade rechnet.
* Standardmaessig ausgeblendet; wird per .is-active eingeblendet. */
.strategy-folder-running-spinner {
width: 12px;
height: 12px;
border: 2px solid rgba(59,130,246,0.85);
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
flex-shrink: 0;
margin-left: 2px;
display: none;
}
.strategy-folder-running-spinner.is-active {
display: inline-block;
}
.strategy-folder-actions {
display: flex;
gap: 4px;
align-items: center;
flex-shrink: 0;
opacity: 0;
transition: opacity 0.15s ease;
}
.strategy-folder-card:hover .strategy-folder-actions {
opacity: 1;
}
.strategy-folder-actions .btn-icon {
width: 26px;
height: 26px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.strategy-folder-actions .btn-icon:hover {
background: var(--bg-secondary);
color: var(--text-primary);
}
.strategy-folder-actions .btn-icon svg {
width: 14px;
height: 14px;
}
.strategy-folder-previews {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 6px;
position: relative;
overflow: hidden;
}
.strategy-folder-list {
flex: 1;
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
}
.strategy-folder-list-item {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 4px;
border-bottom: 1px solid rgba(59,130,246,0.06);
min-width: 0;
flex: 1 1 auto;
min-height: 34px;
overflow: hidden;
}
.strategy-folder-list-item:last-child {
border-bottom: none;
}
.strategy-folder-list-dot {
flex-shrink: 0;
color: rgba(59,130,246,0.45);
}
/* Kreisel direkt am laufenden Listen-Eintrag (anstelle des Punkts),
* damit sofort sichtbar ist, welche Strategie im Ordner gerade rechnet. */
.strategy-folder-list-spinner {
width: 10px;
height: 10px;
border: 2px solid rgba(59,130,246,0.85);
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
flex-shrink: 0;
display: inline-block;
}
.strategy-folder-list-item-running .strategy-folder-list-name {
color: var(--primary);
font-weight: 600;
}
.strategy-folder-list-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.strategy-folder-list-row {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.strategy-folder-list-name {
font-size: 0.8rem;
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
line-height: 1.3;
}
.strategy-folder-list-stats {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: nowrap;
overflow: hidden;
}
.strategy-folder-list-stat {
font-size: 0.65rem;
font-weight: 600;
color: var(--text-muted);
line-height: 1.2;
}
.strategy-folder-list-stat.positive { color: var(--success, #22c55e); }
.strategy-folder-list-stat.negative { color: var(--danger, #ef4444); }
.strategy-folder-list-sep {
font-size: 0.55rem;
color: var(--text-muted);
opacity: 0.4;
}
.strategy-folder-list-symbol {
font-size: 0.65rem;
color: var(--primary);
font-weight: 600;
flex-shrink: 0;
background: rgba(59,130,246,0.08);
padding: 1px 6px;
border-radius: 4px;
line-height: 1.4;
}
.strategy-folder-list-more {
padding: 6px 4px 2px;
font-size: 0.72rem;
font-weight: 600;
color: rgba(59,130,246,0.7);
margin-top: auto;
flex-shrink: 0;
border-top: 1px solid rgba(59,130,246,0.08);
}
.strategy-folder-list-empty {
text-align: center;
color: var(--text-secondary);
font-size: 0.78rem;
padding: 20px 8px;
opacity: 0.6;
}
body.dashboard-theme-dark .strategy-folder-list-item {
border-bottom-color: rgba(59,130,246,0.08);
}
body.dashboard-theme-dark .strategy-folder-list-dot {
color: rgba(99,160,255,0.5);
}
.strategy-folder-mini {
background: rgba(255,255,255,0.45);
border: 1px solid rgba(59,130,246,0.10);
border-radius: calc(var(--bbtStrategyCardRadius) * 0.5);
padding: 8px 9px 6px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 0;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
aspect-ratio: auto;
min-height: 0;
}
body.dashboard-theme-dark .strategy-folder-mini {
background: rgba(255,255,255,0.04);
border-color: rgba(59,130,246,0.10);
}
.strategy-folder-mini-header {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 4px;
min-width: 0;
}
.strategy-folder-mini-title {
font-size: 0.65rem;
font-weight: 700;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
flex: 1;
min-width: 0;
}
.strategy-folder-mini-symbol {
font-size: 0.55rem;
color: var(--primary);
font-weight: 600;
flex-shrink: 0;
background: rgba(59,130,246,0.08);
padding: 0 4px;
border-radius: 3px;
line-height: 1.4;
}
.strategy-folder-mini-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px 6px;
font-size: 0.5rem;
color: var(--text-muted);
line-height: 1.5;
flex: 1;
align-content: start;
}
.strategy-folder-mini-info-row {
display: flex;
justify-content: space-between;
gap: 2px;
}
.strategy-folder-mini-info-row span:last-child {
font-weight: 700;
color: var(--text-secondary);
}
.strategy-folder-mini-pnl {
margin-top: auto;
padding-top: 3px;
font-size: 0.55rem;
font-weight: 700;
border-top: 1px solid rgba(59,130,246,0.06);
}
.strategy-folder-mini-pnl.positive { color: var(--success, #22c55e); }
.strategy-folder-mini-pnl.negative { color: var(--danger, #ef4444); }
.strategy-folder-blur-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: linear-gradient(to bottom, transparent, rgba(230,240,255,0.7));
pointer-events: none;
z-index: 1;
}
body.dashboard-theme-dark .strategy-folder-blur-overlay {
background: linear-gradient(to bottom, transparent, rgba(15,20,40,0.7));
}
.strategy-folder-more-badge {
position: absolute;
bottom: 8px;
right: 12px;
font-size: 0.7rem;
font-weight: 700;
color: var(--primary);
z-index: 2;
background: rgba(255,255,255,0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 2px 10px;
border-radius: 8px;
border: 1px solid rgba(59,130,246,0.12);
}
body.dashboard-theme-dark .strategy-folder-more-badge {
background: rgba(15,20,40,0.7);
border-color: rgba(59,130,246,0.15);
}
/* DnD merge zone feedback */
.bbt-merge-target {
transform: scale(1.04);
box-shadow: 0 0 0 2.5px var(--primary), var(--shadow-hover-lg);
border-color: var(--primary) !important;
transition: transform 0.18s cubic-bezier(0.2,0,0,1), box-shadow 0.18s ease, border-color 0.18s ease;
}
.bbt-merge-hint {
position: absolute;
bottom: -24px;
left: 50%;
transform: translateX(-50%);
font-size: 0.7rem;
font-weight: 600;
color: var(--primary);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 10;
}
.bbt-merge-target ~ .bbt-merge-hint,
.strategy-card-wrapper.bbt-merge-target .bbt-merge-hint {
opacity: 1;
}
/* Folder expanded overlay */
.strategy-folder-expanded-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(4px);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
animation: bbtFolderOverlayIn 0.2s ease;
}
@keyframes bbtFolderOverlayIn {
from { opacity: 0; }
to { opacity: 1; }
}
/*
* Beim Bearbeiten einer Strategie aus einem offenen Ordner bleibt dieser offen,
* rückt aber unter das Spotlight-Overlay (.slide-out-overlay, z-index 900). So
* übernimmt der Spotlight-Cutout die Abdunklung und stellt nur die bearbeitete
* Karte frei. Die eigene Ordner-Abdunklung entfällt, um doppeltes Dimmen zu vermeiden.
*/
.strategy-folder-expanded-overlay.bbt-folder-behind-spotlight {
z-index: 850;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
animation: none;
}
.strategy-folder-expanded {
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 24px 80px rgba(0,0,0,0.25);
width: 94vw;
max-width: 1500px;
max-height: 85vh;
overflow-y: auto;
overscroll-behavior: contain;
padding: 24px;
position: relative;
animation: bbtFolderExpandIn 0.25s cubic-bezier(0.2,0,0,1);
}
@keyframes bbtFolderExpandIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.strategy-folder-expanded-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
gap: 12px;
}
.strategy-folder-expanded-icon {
flex-shrink: 0;
color: var(--primary);
}
.strategy-folder-expanded-title {
font-size: 1.15rem;
font-weight: 800;
color: var(--text-primary);
flex: 1;
}
.strategy-folder-expanded-title-input {
font-size: 1.15rem;
font-weight: 800;
color: var(--text-primary);
background: transparent;
border: none;
border-bottom: 2px solid var(--primary);
outline: none;
padding: 0 2px 2px;
width: 100%;
}
.strategy-folder-expanded-close {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: var(--bg-secondary);
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
}
.strategy-folder-expanded-close:hover {
background: var(--bg-tertiary, var(--border));
color: var(--text-primary);
}
.strategy-folder-expanded-close svg {
width: 16px;
height: 16px;
}
.strategy-folder-expanded-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--bbtStrategyCardGridGap, 24px);
padding-top: 12px;
}
@media (max-width: 900px) {
.strategy-folder-expanded-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.strategy-folder-expanded-grid {
grid-template-columns: 1fr;
}
}
.strategy-folder-expanded-grid .strategy-card-wrapper {
cursor: grab;
max-width: var(--bbtStrategyCardMaxWidth);
justify-self: center;
width: 100%;
}
/* ===== "In Ordner verschieben"-Fenster ===== */
.bbt-move-folder-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(4px);
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
animation: bbtMoveFolderOverlayIn 0.2s ease;
}
@keyframes bbtMoveFolderOverlayIn {
from { opacity: 0; }
to { opacity: 1; }
}
.bbt-move-folder-overlay.bbt-move-folder-overlay-closing {
animation: bbtMoveFolderOverlayOut 0.2s ease forwards;
}
@keyframes bbtMoveFolderOverlayOut {
from { opacity: 1; }
to { opacity: 0; }
}
.bbt-move-folder-panel {
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 24px 80px rgba(0,0,0,0.25);
width: 100%;
max-width: 460px;
max-height: 80vh;
display: flex;
flex-direction: column;
overflow: hidden;
animation: bbtMoveFolderPanelIn 0.25s cubic-bezier(0.2,0,0,1);
}
@keyframes bbtMoveFolderPanelIn {
from { opacity: 0; transform: scale(0.95) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.bbt-move-folder-overlay-closing .bbt-move-folder-panel {
animation: bbtMoveFolderPanelOut 0.18s ease forwards;
}
@keyframes bbtMoveFolderPanelOut {
from { opacity: 1; transform: scale(1) translateY(0); }
to { opacity: 0; transform: scale(0.96) translateY(6px); }
}
.bbt-move-folder-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 20px 20px 12px;
}
.bbt-move-folder-titles {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.bbt-move-folder-title {
font-size: 1.05rem;
font-weight: 800;
color: var(--text-primary);
}
.bbt-move-folder-subtitle {
font-size: 0.8rem;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bbt-move-folder-close {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: var(--bg-secondary);
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
}
.bbt-move-folder-close:hover {
background: var(--bg-tertiary, var(--border));
color: var(--text-primary);
}
.bbt-move-folder-close svg {
width: 16px;
height: 16px;
}
.bbt-move-folder-search {
position: relative;
margin: 0 20px 12px;
}
.bbt-move-folder-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
display: flex;
pointer-events: none;
}
.bbt-move-folder-search-icon svg {
width: 16px;
height: 16px;
}
.bbt-move-folder-search-input {
width: 100%;
box-sizing: border-box;
padding: 10px 12px 10px 38px;
font-size: 0.9rem;
color: var(--text-primary);
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 10px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.bbt-move-folder-search-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}
.bbt-move-folder-list {
overflow-y: auto;
overscroll-behavior: contain;
padding: 0 12px 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.bbt-move-folder-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 12px;
border: none;
border-radius: 10px;
background: transparent;
color: var(--text-primary);
cursor: pointer;
text-align: left;
transition: background 0.13s ease, color 0.13s ease;
}
.bbt-move-folder-item:hover {
background: var(--bg-secondary);
}
.bbt-move-folder-item-icon {
display: flex;
flex-shrink: 0;
color: var(--primary);
}
.bbt-move-folder-item-name {
flex: 1;
min-width: 0;
font-size: 0.92rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bbt-move-folder-item-count {
flex-shrink: 0;
font-size: 0.75rem;
color: var(--text-muted);
}
.bbt-move-folder-item-badge {
flex-shrink: 0;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 999px;
color: var(--primary);
background: rgba(8, 145, 178, 0.12);
}
.bbt-move-folder-item-last {
background: rgba(8, 145, 178, 0.06);
}
.bbt-move-folder-empty {
padding: 28px 16px;
text-align: center;
font-size: 0.88rem;
color: var(--text-secondary);
}
/* Wenn der Name in der normalen Titelzeile gekürzt werden muss: oben als eigene Leiste anzeigen */
.strategy-card .strategy-card-compact-title {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 3;
padding: var(--bbtStrategyCardCompactPadding);
font-size: var(--bbtStrategyCardCompactFontSize);
font-weight: 800;
letter-spacing: -0.01em;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid var(--border);
border-top-left-radius: var(--bbtStrategyCardRadius);
border-top-right-radius: var(--bbtStrategyCardRadius);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
}
body.dashboard-theme-dark .strategy-card .strategy-card-compact-title {
background: rgba(20, 20, 20, 0.78);
border-bottom-color: var(--border);
}
.strategy-card.bbt-compact-title {
padding-top: var(--bbtStrategyCardCompactPaddingTop);
}
.strategy-card.bbt-compact-title .strategy-card-compact-title {
display: block;
}
.strategy-card.bbt-compact-title .strategy-card-header .strategy-card-title {
display: none;
}
/* "Strategie hinzufügen"-Placeholder-Karte (gestrichelter Rahmen, Plus-Icon) */
.strategy-card-add {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
min-height: var(--bbtStrategyCardAddMinHeight);
padding: var(--bbtStrategyCardPadding);
border: 2px dashed var(--border);
border-radius: var(--bbtStrategyCardRadius);
background: rgba(128, 128, 128, 0.06);
cursor: pointer;
transition: var(--transition-normal);
color: var(--text-secondary);
font-size: var(--bbtStrategyCardAddFontSize);
font-weight: 500;
/* Desktop: nicht endlos in die Breite ziehen */
width: 100%;
max-width: var(--bbtStrategyCardMaxWidth);
justify-self: center;
}
.strategy-card-add:hover {
border-color: var(--primary);
background: rgba(8, 145, 178, 0.08);
color: var(--primary);
transform: translateY(-2px);
}
.strategy-card-add:active {
transform: translateY(0);
}
.strategy-card-add-icon {
width: var(--bbtStrategyCardAddIconSize);
height: var(--bbtStrategyCardAddIconSize);
border-radius: 50%;
background: rgba(128, 128, 128, 0.12);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-normal);
}
.strategy-card-add:hover .strategy-card-add-icon {
background: rgba(8, 145, 178, 0.16);
}
.strategy-card-add-icon svg {
width: var(--bbtStrategyCardAddIconInnerSize);
height: var(--bbtStrategyCardAddIconInnerSize);
stroke: currentColor;
stroke-width: 2;
}
/* Portfolio-Placeholder-Karte: kompaktere Höhe passend zu Portfolio-Cards */
.portfolio-card-add {
min-height: 120px;
}
/* Gradient border effect */
.strategy-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--bbtStrategyCardRadius);
padding: 1px;
background: linear-gradient(135deg, transparent 0%, transparent 50%, var(--primary) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: var(--transition-normal);
pointer-events: none;
}
/* Ausfahrender farbiger Strich am unteren Rand */
.strategy-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background: var(--gradient-primary);
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.strategy-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow-hover-lg);
}
.strategy-card:hover::before {
opacity: 1;
}
.strategy-card:hover::after {
width: 100%;
}
.strategy-card-header {
display: grid;
grid-template-columns: 1fr auto; /* links Text, rechts Actions */
column-gap: 12px;
align-items: start;
margin-bottom: 12px;
}
/* Wichtig: Grid-Item links darf schrumpfen, sonst kein Clamp/Ellipsis */
.strategy-card-header > div:first-child {
min-width: 0;
}
/*
* Haupt-Strategie-Cards (erkennbar am Action-Panel): Titel als eigene
* Ueberschriftszeile ueber die volle Card-Breite, darunter eine Zeile mit
* Underlying-Symbol links und der Button-Reihe rechts. Andere Card-Typen
* (Explore/Portfolio) nutzen denselben Header, aber ohne Action-Panel und
* bleiben daher unveraendert.
*/
.strategy-card-header:has(.strategy-card-actions-panel) {
display: flex;
flex-direction: column;
gap: 10px;
}
.strategy-card-header:has(.strategy-card-actions-panel) > .strategy-card-title {
display: flex;
align-items: center;
gap: 8px;
-webkit-line-clamp: unset;
height: 1.2em;
margin-bottom: 0;
width: 100%;
}
/* Strategie-Name: schrumpft und schneidet bei Bedarf mit Ellipsis ab,
damit das Run-Badge immer direkt im gleichen Abstand hinter dem
letzten sichtbaren Zeichen sitzt. */
.strategy-card-header:has(.strategy-card-actions-panel) > .strategy-card-title > .strategy-card-title-text {
min-width: 0;
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Kleine Run-Zahl rechts neben dem Namen */
.strategy-card-run-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 5px;
border-radius: 8px;
font-size: 10px;
font-weight: 700;
line-height: 1;
color: var(--text-secondary);
background: var(--bg-secondary);
border: 1px solid var(--border);
}
.strategy-card:not(.portfolio-card) .strategy-card-actions-panel .strategy-card-symbol {
margin-top: 0;
flex: 0 0 auto;
}
.strategy-card-title {
font-size: var(--bbtStrategyCardTitleFontSize);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--bbtStrategyCardTitleMarginBottom);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.2;
height: calc(1.2em * 2);
position: relative;
overflow-wrap: anywhere;
}
.strategy-card-symbol {
display: inline-block;
padding: var(--bbtStrategyCardSymbolPadding);
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: var(--bbtStrategyCardSymbolRadius);
font-size: var(--bbtStrategyCardSymbolFontSize);
font-weight: 600;
color: var(--primary);
margin-top: var(--bbtStrategyCardSymbolMarginTop);
}
.strategy-card:not(.portfolio-card) .strategy-card-symbol {
padding: 3px 10px;
border-radius: calc(var(--bbtStrategyCardSymbolRadius) * 0.8);
font-size: calc(var(--bbtStrategyCardSymbolFontSize) * 0.8);
margin-top: calc(var(--bbtStrategyCardSymbolMarginTop) * 0.8);
}
/* Strategy Card Preview (Sparkline + KPIs) */
.strategy-card-preview {
margin-top: var(--bbtStrategyCardPreviewMarginTop);
padding: var(--bbtStrategyCardPreviewPadding);
background: var(--bg-secondary);
border-radius: var(--bbtStrategyCardPreviewRadius);
border-top: 1px solid var(--border);
min-height: var(--bbtStrategyCardPreviewMinHeight);
}
.strategy-preview-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
}
.strategy-preview-content {
position: relative;
display: flex;
align-items: center;
gap: var(--bbtStrategyCardPreviewContentGap);
border-radius: 8px;
padding: 6px 8px;
margin: -6px -8px;
border: 1px solid transparent;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.strategy-preview-content[onclick] {
cursor: pointer;
}
.strategy-preview-content[onclick]::after {
content: '';
position: absolute;
right: 8px;
top: 50%;
width: 6px;
height: 6px;
border-right: 1.5px solid var(--text-secondary);
border-top: 1.5px solid var(--text-secondary);
transform: translateY(-50%) rotate(45deg) translateX(-2px);
opacity: 0;
transition: all 0.2s ease;
pointer-events: none;
}
.strategy-preview-content[onclick]:hover {
background: var(--bg-hover);
border-color: var(--primary);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(6, 182, 212, 0.1);
transform: translateY(-2px);
}
.strategy-preview-content[onclick]:hover::after {
opacity: 1;
border-color: var(--primary);
transform: translateY(-50%) rotate(45deg) translateX(0);
}
.strategy-preview-content[onclick]:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
body.dashboard-theme-dark .strategy-preview-content[onclick]:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(6, 182, 212, 0.15);
}
.strategy-preview-sparkline {
flex-shrink: 0;
width: var(--bbtStrategyCardPreviewSparklineWidth);
height: var(--bbtStrategyCardPreviewSparklineHeight);
}
.strategy-preview-sparkline svg {
display: block;
}
.strategy-preview-sparkline.positive polyline { stroke: #10b981; transition: filter 0.2s ease; }
.strategy-preview-sparkline.positive polygon { fill: rgba(16, 185, 129, 0.1); transition: fill 0.2s ease; }
.strategy-preview-sparkline.negative polyline { stroke: #ef4444; transition: filter 0.2s ease; }
.strategy-preview-sparkline.negative polygon { fill: rgba(239, 68, 68, 0.1); transition: fill 0.2s ease; }
.strategy-preview-content[onclick]:hover .strategy-preview-sparkline.positive polyline {
filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.5));
}
.strategy-preview-content[onclick]:hover .strategy-preview-sparkline.positive polygon {
fill: rgba(16, 185, 129, 0.2);
}
.strategy-preview-content[onclick]:hover .strategy-preview-sparkline.negative polyline {
filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5));
}
.strategy-preview-content[onclick]:hover .strategy-preview-sparkline.negative polygon {
fill: rgba(239, 68, 68, 0.2);
}
.strategy-preview-stats {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--bbtStrategyCardPreviewStatsGap);
padding-right: var(--bbtStrategyCardPreviewStatsPaddingRight); /* Platz für Chevron */
transition: padding-right 0.2s ease;
}
.strategy-preview-content:not([onclick]) .strategy-preview-stats {
padding-right: 0;
}
.strategy-preview-stat {
display: flex;
justify-content: space-between;
font-size: 11px;
}
.strategy-preview-stat-label {
color: var(--text-secondary);
transition: color 0.2s ease;
}
.strategy-preview-stat-value {
font-weight: 600;
color: var(--text-primary);
transition: color 0.2s ease, transform 0.2s ease;
}
.strategy-preview-stat-value.positive { color: #10b981; }
.strategy-preview-stat-value.negative { color: #ef4444; }
.strategy-preview-content[onclick]:hover .strategy-preview-stat-label {
color: var(--text-primary);
}
.strategy-preview-content[onclick]:hover .strategy-preview-stat-value {
transform: scale(1.05);
}
.strategy-preview-empty {
text-align: center;
color: var(--text-secondary);
font-size: 11px;
padding: 8px 0;
}
.strategy-card-info {
margin-top: var(--bbtStrategyCardInfoMarginTop);
padding-top: var(--bbtStrategyCardInfoPaddingTop);
border-top: 1px solid var(--border);
}
.strategy-card-info-item {
display: flex;
justify-content: space-between;
margin-bottom: var(--bbtStrategyCardInfoItemMarginBottom);
font-size: var(--bbtStrategyCardInfoItemFontSize);
}
.strategy-card-info-label {
color: var(--text-secondary);
}
.strategy-card-info-value {
color: var(--text-primary);
font-weight: 500;
}
.strategy-card-info-value.text-success {
color: var(--success);
font-weight: 600;
}
.strategy-card-info-value.text-error {
color: var(--error);
font-weight: 600;
}
/* ── Leg-Struktur-Vorschau auf der Strategycard (Live-Entry-Konstrukt) ── */
/* Feste Höhe + internes Scrollen: garantiert, dass alle Strategycards die
gleiche vertikale Höhe haben, egal wie viele Leg Groups/Legs vorhanden sind. */
.strategy-card-legstruct {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
height: var(--bbtStrategyCardLegStructHeight, 112px);
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.strategy-card-legstruct::-webkit-scrollbar {
width: 6px;
}
.strategy-card-legstruct::-webkit-scrollbar-track {
background: transparent;
}
.strategy-card-legstruct::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
.strategy-card-legstruct::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary);
}
.strategy-card-legstruct-loading {
color: var(--text-secondary);
font-size: 11px;
padding: 2px 0;
}
.scl-empty {
color: var(--text-secondary);
font-size: 11px;
font-style: italic;
padding: 2px 0;
}
.scl-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.scl-group + .scl-group {
margin-top: 5px;
padding-top: 6px;
border-top: 1px dashed var(--border);
}
.scl-group-head {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
min-width: 0;
}
.scl-group-name {
font-size: 10px;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50%;
}
.scl-legs {
display: flex;
flex-direction: column;
gap: 3px;
}
.scl-leg-row {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 3px 0;
border-radius: 5px;
background: transparent;
}
/* Badges (S/B/C/P) bilden eine zusammengehörige Einheit mit engem Abstand,
während zwischen den Info-Blöcken (Badges / Qty / Kriterium / DTE) mehr Luft ist. */
.scl-badges {
display: flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
}
.scl-dte {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.scl-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 4px;
font-size: 9px;
font-weight: 800;
line-height: 1;
flex-shrink: 0;
}
/* Nur die aktive Richtung (S/B) wird farblich kodiert – bewusst gedaempft/dunkel,
damit pro Leg nur EIN Farbakzent existiert. Der Optionstyp (C/P) bleibt neutral. */
.scl-badge-dir-sell { background: rgba(185, 28, 28, 0.12); color: #b91c1c; }
.scl-badge-dir-buy { background: rgba(4, 120, 87, 0.12); color: #047857; }
body.dashboard-theme-dark .scl-badge-dir-sell { background: rgba(239, 68, 68, 0.14); color: #ef4444; }
body.dashboard-theme-dark .scl-badge-dir-buy { background: rgba(16, 185, 129, 0.14); color: #10b981; }
.scl-badge-type { background: transparent; color: var(--text-secondary); font-weight: 700; }
.scl-qty {
font-size: 12px;
font-weight: 800;
color: var(--text-primary);
flex-shrink: 0;
}
.scl-val {
font-size: 12px;
font-weight: 700;
color: var(--text-primary);
white-space: nowrap;
flex-shrink: 0;
}
.scl-dte-val {
font-size: 11px;
font-weight: 700;
color: var(--text-primary);
flex-shrink: 0;
}
.scl-label {
font-size: 9px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.3px;
flex-shrink: 0;
}
.scl-exit-tags {
margin-left: auto;
display: flex;
gap: 3px;
flex-wrap: wrap;
justify-content: flex-end;
min-width: 0;
}
.scl-tag {
display: inline-flex;
align-items: center;
padding: 1px 5px;
border-radius: 4px;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.3px;
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
white-space: nowrap;
line-height: 1.4;
}
.strategy-card-info-runs {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--border);
}
.strategy-card-actions-panel {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
width: 100%;
}
/* Button-Reihe bleibt rechts, auch wenn links kein Symbol vorhanden ist */
.strategy-card-actions-panel > .strategy-card-actions {
margin-left: auto;
}
/*
* Der Mass-Indicator-Slot reserviert sonst dauerhaft Hoehe unter dem Button
* und schiebt die Trennlinie nach unten. Solange er leer ist, kollabieren.
*/
.strategy-card-actions-panel .mass-indicator-slot:empty {
display: none;
}
.strategy-card-actions {
display: flex;
gap: var(--bbtStrategyCardActionsGap);
justify-self: auto;
align-self: auto;
}
.strategy-card-actions-underlying {
display: inline-block;
padding: 5px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: var(--primary);
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.28);
line-height: 1.15;
margin-top: -8px;
margin-bottom: 0;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Actions in Strategy-Card: über Multiplier steuerbar, ohne globale .btn-icon zu verändern */
.strategy-card-actions .btn-icon {
width: var(--bbtStrategyCardActionButtonSize);
height: var(--bbtStrategyCardActionButtonSize);
border-radius: var(--bbtStrategyCardActionButtonRadius);
}
.strategy-card-actions .btn-icon svg {
width: var(--bbtStrategyCardActionIconSize);
height: var(--bbtStrategyCardActionIconSize);
}
.strategy-card-actions .mass-indicator-slot {
width: var(--bbtStrategyCardMassSlotWidth);
min-height: var(--bbtStrategyCardMassSlotMinHeight);
}
.strategy-action-stack {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
position: relative; /* Tooltip-Anker */
overflow: visible; /* Tooltip nicht abschneiden */
}
/* Floating Tooltip (nicht im Card-Overflow gefangen) */
.bbt-floating-tooltip {
position: fixed;
left: -9999px;
top: -9999px;
transform: translateY(6px) scale(0.98);
max-width: 260px;
padding: 10px 12px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.96);
color: #0f172a;
border: 1px solid rgba(226, 232, 240, 0.9);
font-size: 12px;
line-height: 1.35;
text-align: center;
box-shadow: 0 12px 30px rgba(0,0,0,0.15);
opacity: 0;
pointer-events: none;
z-index: 2147483647;
transform-origin: center bottom;
transition: opacity 140ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bbt-floating-tooltip.show {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Darkmode Tooltip */
body.dashboard-theme-dark .bbt-floating-tooltip {
background: rgba(15, 23, 42, 0.92);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 16px 36px rgba(0,0,0,0.45);
}
.mass-indicator-slot {
min-height: 18px; /* hält Layout stabil (kein Springen) */
display: flex;
align-items: center;
justify-content: center;
width: 36px; /* gleiche Breite wie btn-icon */
}
.btn-icon {
width: 36px;
height: 36px;
padding: 0;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-secondary);
font-size: 12px;
cursor: pointer;
transition: var(--transition-fast);
box-shadow: var(--shadow-sm);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
align-items: center;
justify-content: center;
line-height: 1;
}
.btn-icon svg {
display: block;
}
.btn-queue-cancel {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 32px;
padding: 6px 10px;
border: 1px solid rgba(239, 68, 68, 0.18);
border-radius: 8px;
background: linear-gradient(135deg, var(--error) 0%, #dc2626 100%);
color: #fff !important;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
box-shadow: 0 4px 10px rgba(239, 68, 68, 0.18);
cursor: pointer;
transition: filter 0.15s ease, transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.btn-queue-cancel svg {
width: 14px;
height: 14px;
display: block;
flex-shrink: 0;
}
.btn-queue-cancel:hover {
filter: brightness(0.98);
transform: translateY(-1px);
box-shadow: 0 8px 16px rgba(239, 68, 68, 0.22);
}
.btn-queue-cancel:disabled {
opacity: 0.65;
cursor: not-allowed;
transform: none;
}
/* Inline-rename pencil: show on run-card hover */
[id^="run-"]:hover .run-rename-btn,
.run-rename-btn:focus {
opacity: 0.55 !important;
}
.run-rename-btn:hover {
opacity: 1 !important;
color: var(--primary) !important;
}
.btn-icon:hover {
background: var(--bg-hover);
color: var(--text-primary);
border-color: var(--border-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-icon.indicator-generate-loading,
.btn-icon.indicator-generate-loading:hover {
color: var(--primary);
border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
background: color-mix(in srgb, var(--primary) 10%, var(--bg-secondary));
cursor: wait;
transform: none;
}
/* Play/Run Button - fröhliches Grün */
.btn-icon.btn-play {
background: linear-gradient(135deg, #22c55e 0%, #4ade80 50%, #86efac 100%);
border: none !important;
color: white !important;
font-size: 14px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease,
background 0.2s ease;
}
.btn-icon.btn-play:hover {
background: linear-gradient(135deg, #16a34a 0%, #22c55e 50%, #4ade80 100%);
color: white !important;
transform: translateY(-3px) scale(1.1);
box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.3),
0 8px 16px -4px rgba(0, 0, 0, 0.2);
}
.btn-icon.btn-play:active {
transform: translateY(-1px) scale(1.05);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 3px 6px rgba(0, 0, 0, 0.12);
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
/* Stop Button - sanftes Rot */
.btn-icon.btn-stop {
background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
border: none !important;
color: white !important;
font-size: 14px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease,
background 0.2s ease;
}
/* Stop Button disabled */
.btn-icon.btn-stop:disabled {
/* Dezent rot getönt: erkennbar "Stop", aber klar disabled */
background: rgba(239, 68, 68, 0.10) !important;
border: 1px solid rgba(239, 68, 68, 0.25) !important;
color: rgba(239, 68, 68, 0.65) !important;
box-shadow: none !important;
transform: none !important;
cursor: not-allowed !important;
opacity: 1 !important;
}
.btn-icon.btn-stop:disabled:hover,
.btn-icon.btn-stop:disabled:active {
background: rgba(239, 68, 68, 0.10) !important;
border: 1px solid rgba(239, 68, 68, 0.25) !important;
color: rgba(239, 68, 68, 0.65) !important;
transform: none !important;
box-shadow: none !important;
}
.btn-icon.btn-stop:hover {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
color: white !important;
transform: translateY(-3px) scale(1.1);
box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.3),
0 8px 16px -4px rgba(0, 0, 0, 0.2);
}
.btn-icon.btn-stop:active {
transform: translateY(-1px) scale(1.05);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 3px 6px rgba(0, 0, 0, 0.12);
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
/* Massenbacktest Button - aktiver State (wenn Mass-Jobs laufen) */
.btn-icon.mass-active {
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) !important;
border: none !important;
color: white !important;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4),
0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
}
.btn-icon.mass-active:hover {
background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%) !important;
transform: translateY(-2px) scale(1.05);
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.5),
0 4px 8px rgba(0, 0, 0, 0.15);
}
.btn-icon.mass-active:active {
transform: translateY(-1px) scale(1.02);
}
/* Massenbacktest Mini-Indikator unter AI-Button */
.strategy-card-mass-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px 8px;
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
color: white;
font-size: 11px;
font-weight: 600;
border-radius: 999px;
box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
line-height: 1;
white-space: nowrap;
}
.strategy-card-mass-badge svg {
width: 10px;
height: 10px;
flex-shrink: 0;
animation: pulse-mass 2s ease-in-out infinite;
}
@keyframes pulse-mass {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(0.95); }
}
.btn-icon:active {
transform: translateY(0);
}
.btn-icon.delete:hover {
border-color: var(--error);
color: var(--error);
background: rgba(239, 68, 68, 0.08);
box-shadow: var(--shadow-md);
}
.strategy-card-date {
font-size: var(--bbtStrategyCardDateFontSize);
color: var(--text-secondary);
margin-top: var(--bbtStrategyCardDateMarginTop);
padding-top: var(--bbtStrategyCardDatePaddingTop);
border-top: 1px solid var(--border);
}
/* Wrapper für Grid + Hintergrund-Hinweis */
.strategies-grid-wrapper {
position: relative;
min-height: 300px;
}
/* Hintergrund-Hinweis bei leerem Zustand (absolut positioniert, zentriert) */
.empty-state-bg {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: var(--text-muted);
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.empty-state-bg.hidden {
display: none;
}
.empty-state-bg .empty-state-icon {
margin-bottom: 16px;
color: var(--text-muted);
}
.empty-state-bg p {
font-size: 18px;
font-weight: 500;
margin: 0;
}
.empty-state-bg .empty-state-hint {
font-size: 14px;
font-weight: 400;
margin-top: 6px;
}
/* Grid liegt über dem Hintergrund-Hinweis */
.strategies-grid-wrapper .strategies-grid {
position: relative;
z-index: 1;
}
/* Legacy .empty-state für andere Bereiche (Portfolios, Explore etc.) */
.empty-state {
text-align: center;
padding: 80px 30px;
color: var(--text-secondary);
background: rgba(8, 145, 178, 0.03);
border-radius: 16px;
border: 2px dashed var(--border);
}
.empty-state-icon {
font-size: 56px;
margin-bottom: 20px;
color: var(--primary);
opacity: 0.5;
}
/* Strategy Detail View */
.detail-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 32px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border);
}
.detail-title-divider {
width: 1px;
height: 32px;
background: var(--border);
margin: 0 8px;
}
.detail-title {
font-size: 28px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
margin: 0;
min-width: 0;
}
.btn-back {
padding: 12px 22px;
background: white;
border: 2px solid var(--border);
border-radius: 14px;
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: var(--transition-normal);
box-shadow: var(--shadow-md);
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-back::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(8, 145, 178, 0.1);
transform: translate(-50%, -50%);
transition: width 0.4s, height 0.4s;
}
.btn-back:hover::before {
width: 200px;
height: 200px;
}
.btn-back:hover {
background: var(--bg-secondary);
color: var(--text-primary);
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
.btn-back:active {
transform: translateY(-1px);
}
body.dashboard-theme-dark .btn-back {
background: var(--bg-secondary);
color: var(--text-secondary);
}
body.dashboard-theme-dark .btn-back:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
/* Accordion Styles */
.accordion {
display: flex;
flex-direction: column;
gap: 0;
background: transparent;
border: none;
border-radius: 0;
padding: 6px;
box-shadow: none;
overflow: visible;
}
.accordion-item {
background: var(--bg-card);
border: none;
border-radius: 12px;
overflow: hidden;
margin-bottom: 28px;
box-shadow:
0 0 0 1.5px var(--border),
0 3px 0 0 color-mix(in srgb, var(--primary, #0891b2) 25%, var(--border)),
0 2px 8px rgba(0,0,0,0.06);
--bs-accordion-color: var(--text-primary);
}
body.dashboard-theme-dark .accordion-item {
background: var(--bg-secondary);
box-shadow:
0 0 0 1.5px color-mix(in srgb, var(--border) 85%, var(--primary, #0891b2) 15%),
0 3px 0 0 color-mix(in srgb, var(--primary, #0891b2) 30%, var(--border)),
0 4px 14px rgba(0,0,0,0.22),
0 1px 3px rgba(0,0,0,0.12);
}
.accordion-item:has(.accordion-content.active) {
box-shadow:
0 0 0 2px color-mix(in srgb, var(--primary, #0891b2) 45%, var(--border)),
0 3px 0 0 color-mix(in srgb, var(--primary, #0891b2) 50%, var(--border)),
0 4px 16px rgba(0,0,0,0.10),
0 0 8px color-mix(in srgb, var(--primary, #0891b2) 12%, transparent);
}
body.dashboard-theme-dark .accordion-item:has(.accordion-content.active) {
box-shadow:
0 0 0 2px color-mix(in srgb, var(--primary, #0891b2) 50%, var(--border)),
0 3px 0 0 color-mix(in srgb, var(--primary, #0891b2) 55%, var(--border)),
0 6px 24px rgba(0,0,0,0.30),
0 0 12px color-mix(in srgb, var(--primary, #0891b2) 15%, transparent);
}
.accordion-item:last-child {
margin-bottom: 0;
}
.accordion-header {
padding: 18px 22px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: var(--transition-fast);
user-select: none;
background: var(--bg-tertiary);
border-bottom: 1px solid var(--border);
}
body.dashboard-theme-dark .accordion-header {
background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #0891b2) 8%, var(--bg-tertiary)), var(--bg-tertiary));
border-bottom-color: color-mix(in srgb, var(--primary, #0891b2) 18%, var(--border));
}
.accordion-header:hover {
background: var(--bg-hover);
}
body.dashboard-theme-dark .accordion-header:hover {
background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #0891b2) 14%, var(--bg-tertiary)), var(--bg-tertiary));
}
.accordion-header.active {
background: color-mix(in srgb, var(--primary, #0891b2) 6%, var(--bg-tertiary));
border-bottom-color: color-mix(in srgb, var(--primary, #0891b2) 20%, var(--border));
}
body.dashboard-theme-dark .accordion-header.active {
background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #0891b2) 12%, var(--bg-tertiary)), var(--bg-tertiary));
border-bottom-color: color-mix(in srgb, var(--primary, #0891b2) 25%, var(--border));
}
.accordion-title {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: 0.2px;
}
.accordion-icon {
font-size: 20px;
color: var(--text-secondary);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: absolute;
right: 22px;
}
.accordion-header.active .accordion-icon {
transform: rotate(180deg);
color: var(--primary);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-content.active {
max-height: 3000px;
}
.accordion-body {
padding: 22px;
}
body.dashboard-theme-dark .accordion-body {
background: color-mix(in srgb, var(--bg-card) 55%, var(--bg-secondary));
}
/* ==================== Indicator Values Panel ==================== */
.iv-panel {
display: flex;
flex-direction: column;
gap: 24px;
}
.iv-section {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px 22px;
transition: var(--transition-fast);
}
.iv-section:hover {
border-color: var(--border-hover);
}
.iv-section-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.iv-section-icon {
width: 34px;
height: 34px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.iv-section-icon.upload {
background: rgba(8, 145, 178, 0.12);
color: var(--primary);
}
.iv-section-icon.add {
background: rgba(16, 185, 129, 0.12);
color: var(--success);
}
.iv-section-icon svg {
width: 18px;
height: 18px;
}
.iv-section-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0.2px;
}
.iv-section-subtitle {
font-size: 12px;
color: var(--text-muted);
margin-top: 1px;
}
.iv-dropzone {
border: 2px dashed var(--border);
border-radius: 12px;
padding: 28px 20px;
text-align: center;
cursor: pointer;
transition: var(--transition-normal);
background: var(--bg-dark);
position: relative;
}
.iv-dropzone:hover,
.iv-dropzone.dragover {
border-color: var(--primary);
background: rgba(8, 145, 178, 0.04);
}
.iv-dropzone.dragover {
box-shadow: 0 0 0 4px var(--primary-glow);
}
.iv-dropzone-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(8, 145, 178, 0.1);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
}
.iv-dropzone-icon svg {
width: 22px;
height: 22px;
}
.iv-dropzone-text {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
}
.iv-dropzone-text strong {
color: var(--primary);
cursor: pointer;
}
.iv-dropzone-text strong:hover {
text-decoration: underline;
}
.iv-dropzone-hint {
font-size: 11px;
color: var(--text-muted);
margin-top: 6px;
}
.iv-dropzone-file {
display: none;
align-items: center;
gap: 10px;
margin-top: 12px;
padding: 10px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
}
.iv-dropzone-file.visible {
display: flex;
}
.iv-dropzone-file-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(16, 185, 129, 0.1);
color: var(--success);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.iv-dropzone-file-icon svg {
width: 16px;
height: 16px;
}
.iv-dropzone-file-name {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.iv-dropzone-file-remove {
width: 28px;
height: 28px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-fast);
flex-shrink: 0;
}
.iv-dropzone-file-remove:hover {
background: rgba(239, 68, 68, 0.1);
color: var(--error);
}
.iv-upload-actions {
display: flex;
gap: 10px;
margin-top: 14px;
flex-wrap: wrap;
}
.iv-upload-actions .btn-action,
.iv-upload-actions .btn-secondary {
flex: 1;
min-width: 180px;
justify-content: center;
padding: 10px 18px;
font-size: 13px;
}
.iv-add-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: end;
}
.iv-add-row .form-field {
flex: 1 1 140px;
min-width: 0;
margin-bottom: 0;
}
.iv-add-btn {
height: 44px;
width: 44px;
border-radius: 12px;
border: none;
background: var(--gradient-primary);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-normal);
box-shadow: var(--shadow-sm);
flex-shrink: 0;
}
.iv-add-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.iv-add-btn:active {
transform: translateY(0);
}
.iv-add-btn svg {
width: 20px;
height: 20px;
}
.iv-table-wrapper {
margin-top: 0;
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
background: var(--bg-card);
}
.iv-table-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
}
.iv-table-header-left {
display: flex;
align-items: center;
gap: 10px;
}
.iv-table-count {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.iv-table-badge {
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 20px;
background: rgba(8, 145, 178, 0.12);
color: var(--primary);
}
.iv-table-actions-header {
display: flex;
gap: 8px;
}
.iv-table {
width: 100%;
border-collapse: collapse;
}
.iv-table thead th {
padding: 12px 20px;
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.8px;
text-align: left;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
}
.iv-table thead th:last-child {
text-align: right;
padding-right: 20px;
}
.iv-table tbody tr {
transition: var(--transition-fast);
border-bottom: 1px solid var(--border);
}
.iv-table tbody tr:last-child {
border-bottom: none;
}
.iv-table tbody tr:hover {
background: var(--bg-hover);
}
.iv-table tbody td {
padding: 12px 20px;
font-size: 13px;
color: var(--text-primary);
vertical-align: middle;
}
.iv-table tbody td:last-child {
text-align: right;
padding-right: 20px;
}
.iv-table-ts {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 12px;
color: var(--text-secondary);
}
.iv-table-val {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.iv-table-id {
font-size: 11px;
color: var(--text-muted);
font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.iv-table-empty {
padding: 40px 20px;
text-align: center;
}
.iv-table-empty-icon {
width: 48px;
height: 48px;
border-radius: 14px;
background: var(--bg-secondary);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
}
.iv-table-empty-icon svg {
width: 24px;
height: 24px;
}
.iv-table-empty-text {
font-size: 14px;
color: var(--text-secondary);
}
.iv-table-empty-hint {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
.iv-delete-btn {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid transparent;
background: transparent;
color: var(--text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--transition-fast);
}
.iv-delete-btn:hover {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.2);
color: var(--error);
}
.iv-delete-btn svg {
width: 15px;
height: 15px;
}
.iv-indicator-select {
margin-bottom: 0;
}
.iv-indicator-select .form-field {
max-width: 400px;
}
/* Form Styles for Detail View */
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 18px;
margin-bottom: 18px;
}
.form-field {
display: flex;
flex-direction: column;
}
.form-field label {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-field input,
.form-field select,
.form-field textarea {
padding: 12px 16px;
background-color: var(--bg-secondary);
border: 2px solid var(--border);
border-radius: 10px;
color: var(--text-primary);
font-size: 14px;
font-family: 'Inter', sans-serif;
transition: var(--transition-normal);
box-shadow: var(--shadow-sm);
}
/* Native Select-Widget unterdruecken, damit im Darkmode nicht das
schwarze OS-Widget statt der CSS-Hintergrundfarbe gerendert wird. */
.form-field select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 36px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px;
cursor: pointer;
}
.form-field select option {
background-color: var(--bg-secondary);
color: var(--text-primary);
}
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
border-color: var(--border-hover);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px var(--primary-glow);
background-color: var(--bg-dark);
}
.form-field textarea {
min-height: 80px;
resize: vertical;
}
/* Delta-Vorzeichen Warnung */
.delta-sign-warning {
margin-top: 6px;
padding: 8px 12px 8px 36px;
background: rgba(245, 158, 11, 0.15);
border: 1px solid #f59e0b;
border-radius: 6px;
color: #f59e0b;
font-size: 12px;
line-height: 1.4;
position: relative;
}
.delta-sign-warning::before {
content: "";
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.checkbox-field {
display: flex;
align-items: center;
gap: 8px;
margin-top: 24px;
}
.checkbox-field input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
.checkbox-field label {
font-size: 14px;
color: var(--text-primary);
cursor: pointer;
margin: 0;
}
/* Toggle Checkbox Buttons */
.toggle-checkbox {
display: inline-block;
padding: 10px 18px;
background: var(--bg-secondary);
border: 2px solid var(--border);
border-radius: 10px;
cursor: pointer;
transition: var(--transition-normal);
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
user-select: none;
box-shadow: var(--shadow-sm);
}
.toggle-checkbox:hover {
border-color: var(--primary);
background: var(--bg-hover);
transform: translateY(-1px);
}
.toggle-checkbox.active {
/* Clean active style ohne Outline/Border-Artefakte:
Border-Ring via dual-background (padding-box/border-box) */
background:
linear-gradient(135deg, #0891b2 0%, #06b6d4 50%, #22d3ee 100%) padding-box,
linear-gradient(135deg, rgba(8, 145, 178, 0.55) 0%, rgba(6, 182, 212, 0.35) 100%) border-box;
border: 2px solid transparent;
outline: none;
color: white;
box-shadow: 0 6px 16px rgba(8, 145, 178, 0.22);
}
.toggle-checkbox.active:hover {
background:
linear-gradient(135deg, #0e7490 0%, #0891b2 50%, #06b6d4 100%) padding-box,
linear-gradient(135deg, rgba(8, 145, 178, 0.65) 0%, rgba(34, 211, 238, 0.45) 100%) border-box;
border: 2px solid transparent;
outline: none;
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(8, 145, 178, 0.28);
}
/* Darkmode: gleiche Technik, nur dunklere/ruhigere Farben */
body.dashboard-theme-dark .toggle-checkbox.active {
background:
linear-gradient(135deg, rgba(14, 116, 144, 0.95) 0%, rgba(109, 40, 217, 0.85) 100%) padding-box,
linear-gradient(135deg, rgba(34, 211, 238, 0.28) 0%, rgba(167, 139, 250, 0.18) 100%) border-box;
border: 2px solid transparent;
outline: none;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.48);
}
body.dashboard-theme-dark .toggle-checkbox.active:hover {
background:
linear-gradient(135deg, rgba(8, 145, 178, 0.95) 0%, rgba(124, 58, 237, 0.88) 100%) padding-box,
linear-gradient(135deg, rgba(34, 211, 238, 0.34) 0%, rgba(167, 139, 250, 0.22) 100%) border-box;
border: 2px solid transparent;
outline: none;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.toggle-checkbox input[type="checkbox"] {
display: none;
}
.toggle-checkbox.disabled {
opacity: 0.4;
cursor: not-allowed;
background: var(--bg-secondary);
border-color: var(--border);
color: var(--text-muted);
box-shadow: none;
}
.toggle-checkbox.disabled:hover,
.toggle-checkbox.disabled:active {
border-color: var(--border);
background: var(--bg-secondary);
transform: none;
box-shadow: none;
}
/* Mid Fallback Mode Select: disabled state like disabled toggle buttons */
#lg_midFallbackMode:disabled,
select[id^="lge_midFallbackMode_"]:disabled {
opacity: 0.4;
cursor: not-allowed;
background: var(--bg-secondary);
border-color: var(--border);
color: var(--text-muted);
box-shadow: none;
}
#lg_midFallbackMode:disabled:hover,
select[id^="lge_midFallbackMode_"]:disabled:hover,
#lg_midFallbackMode:disabled:focus,
select[id^="lge_midFallbackMode_"]:disabled:focus {
border-color: var(--border);
background: var(--bg-secondary);
box-shadow: none;
outline: none;
}
.optional-field {
display: none;
}
.optional-field.active {
display: flex;
}
.optional-field.disabled {
opacity: 0.4;
pointer-events: none;
}
.optional-field.disabled input {
background: var(--bg-darker);
cursor: not-allowed;
}
/* Leg Editor Sections – visuelle Gruppierung */
.leg-editor-section {
border: 1.5px solid color-mix(in srgb, var(--primary) 25%, var(--border));
border-radius: 12px;
padding: 16px 18px 10px;
margin-bottom: 10px;
background: color-mix(in srgb, var(--primary) 3%, var(--bg-card));
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
body.dashboard-theme-dark .leg-editor-section {
background: color-mix(in srgb, var(--primary) 4%, var(--bg-secondary));
box-shadow: 0 1px 6px rgba(0,0,0,0.18);
}
.leg-editor-section-header {
display: flex;
align-items: center;
gap: 9px;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--primary);
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 2px solid color-mix(in srgb, var(--primary) 30%, var(--border));
}
.leg-editor-section-header svg {
flex-shrink: 0;
opacity: 0.85;
color: var(--primary);
}
.leg-editor-section .form-row:last-child {
margin-bottom: 0;
}
/* Advanced Options: logische Untergruppen */
.adv-opt-group {
border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
border-radius: 9px;
padding: 10px 12px;
background: color-mix(in srgb, var(--primary) 2%, var(--bg-card));
}
body.dashboard-theme-dark .adv-opt-group {
background: color-mix(in srgb, var(--primary) 3%, var(--bg-secondary));
}
.adv-opt-group-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-muted);
margin-bottom: 8px;
}
.adv-opt-group-body {
display: flex;
flex-direction: column;
gap: 8px;
}
.adv-opt-toggles-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: flex-start;
}
.adv-opt-child {
margin-left: 14px;
padding-left: 10px;
border-left: 2px solid color-mix(in srgb, var(--primary) 20%, var(--border));
}
.adv-opt-child .form-field {
margin-bottom: 0;
}
.adv-opt-child select {
font-size: 12px;
padding: 5px 8px;
}
.adv-opt-source-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
align-items: start;
}
.adv-opt-source-column {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.adv-opt-connected {
position: relative;
margin-left: 14px;
padding-left: 12px;
display: flex;
flex-direction: column;
gap: 8px;
border-left: 2px solid color-mix(in srgb, var(--primary) 24%, var(--border));
}
.adv-opt-connected::before {
content: "";
position: absolute;
left: -2px;
top: -8px;
width: 2px;
height: 8px;
background: color-mix(in srgb, var(--primary) 24%, var(--border));
}
.adv-opt-connected .form-field {
margin-bottom: 0;
}
.adv-opt-full-row {
margin-top: 2px;
padding-top: 10px;
border-top: 1px dashed color-mix(in srgb, var(--primary) 18%, var(--border));
display: flex;
flex-direction: column;
gap: 8px;
}
.adv-opt-full-row .form-field {
margin-bottom: 0;
}
.adv-opt-full-row select {
width: 100%;
}
.adv-opt-advanced {
padding: 0;
border: 0;
background: transparent;
}
.adv-opt-advanced > summary {
display: inline-flex;
align-items: center;
cursor: pointer;
padding: 0;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
user-select: none;
list-style: none;
}
.adv-opt-advanced > summary::-webkit-details-marker {
display: none;
}
.adv-opt-advanced > summary::marker {
content: "";
}
.adv-opt-advanced > summary::before {
content: "▸";
display: inline-block;
margin-right: 5px;
font-size: 11px;
line-height: 1;
transition: transform 0.15s ease;
}
.adv-opt-advanced[open] > summary::before {
transform: rotate(90deg);
}
.adv-opt-advanced-body {
padding-top: 8px;
}
@media (max-width: 760px) {
.adv-opt-source-grid {
grid-template-columns: 1fr;
}
}
/* Criterion-Row: Flexbox statt Grid, Value-Felder schmaler */
.criterion-row {
display: flex !important;
flex-wrap: wrap;
gap: 12px;
}
.criterion-row > .form-field {
flex: 1 1 0;
min-width: 0;
}
.criterion-row > .criterion-value-field {
flex: 0 0 100px;
max-width: 125px;
}
.criterion-row > .criterion-hir-toggle {
display: flex;
align-items: flex-end;
flex: 0 0 auto;
}
.criterion-row > .criterion-hir-toggle .toggle-checkbox {
padding: 10px 16px;
font-size: 13px;
white-space: nowrap;
margin: 0;
}
/* Depend-Leg: eigene Zeile bei Leg-to-Leg Criterions */
.criterion-row > .criterion-dep-field.criterion-dep-newline {
flex: 0 0 100%;
}
.criterion-row > .criterion-dep-field.criterion-dep-newline select {
max-width: 250px;
}
/* Exit-Konfiguration: kompaktes Inline-Layout (Toggle + Feld nebeneinander) */
.leg-exit-grid {
display: flex;
flex-direction: column;
gap: 6px;
}
.leg-exit-row {
display: flex;
align-items: center;
gap: 10px;
min-height: 34px;
}
.leg-exit-row .toggle-checkbox {
min-width: 110px;
padding: 5px 12px;
font-size: 13.2px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
.leg-exit-row .optional-field {
flex: 1;
max-width: 220px;
}
.leg-exit-row .optional-field.active {
display: flex;
max-height: none;
}
.leg-exit-row .optional-field > label:not(.toggle-checkbox) {
display: none; /* Toggle-Text reicht als Label */
}
/* Ausnahme: Felder mit eigenem Mini-Label oberhalb des Inputs (z. B. Realistic Slippage / Latency) */
.leg-exit-row .optional-field.leg-exit-labeled {
flex: 0 0 160px;
max-width: 160px;
}
.leg-exit-row .optional-field.leg-exit-labeled > label:not(.toggle-checkbox) {
display: block;
font-size: 11px;
font-weight: 600;
margin-bottom: 4px;
text-transform: none;
letter-spacing: 0.2px;
color: var(--text-secondary);
}
.leg-exit-row .optional-field.leg-exit-labeled input {
width: 100%;
}
.leg-exit-row .optional-field input,
.leg-exit-row .optional-field select {
padding: 6px 10px;
font-size: 13px;
border-radius: 8px;
}
/* Quote-Preisart direkt unter der SL-/TP-Zeile (eingerueckt, optisch verbunden) */
.leg-exit-grid > .adv-opt-connected.leg-exit-quote-price {
max-width: 360px;
margin: -2px 0 2px 14px;
}
.leg-exit-grid > .adv-opt-connected.leg-exit-quote-price .form-field label {
display: block;
font-size: 11px;
font-weight: 600;
margin-bottom: 4px;
color: var(--text-secondary);
}
.leg-exit-grid > .adv-opt-connected.leg-exit-quote-price select {
width: 100%;
padding: 6px 10px;
font-size: 13px;
border-radius: 8px;
}
.leg-exit-grid > .adv-opt-connected.leg-exit-quote-price select:disabled {
opacity: 0.55;
cursor: not-allowed;
color: var(--text-muted);
background-color: color-mix(in srgb, var(--bg-secondary) 70%, var(--border) 30%);
border-color: var(--border);
box-shadow: none;
}
.leg-exit-grid > .adv-opt-connected.leg-exit-quote-price select:disabled:hover,
.leg-exit-grid > .adv-opt-connected.leg-exit-quote-price select:disabled:focus {
border-color: var(--border);
background-color: color-mix(in srgb, var(--bg-secondary) 70%, var(--border) 30%);
box-shadow: none;
}
/* DSL-Textarea als volle Breite unter dem Toggle */
.leg-exit-dsl-row {
margin-top: 2px;
}
.leg-exit-dsl-row .optional-field {
max-width: none;
}
.leg-exit-dsl-row .optional-field.active {
display: flex;
max-height: none;
margin-top: 6px;
}
.leg-exit-dsl-row .optional-field > label {
display: none;
}
.leg-exit-dsl-row .optional-field textarea {
font-size: 12px;
padding: 8px 10px;
border-radius: 8px;
}
/* Value-Based Exit Rule Builder */
.value-exit-builder {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 8px 10px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 10px;
font-size: 13px;
}
.value-exit-builder select,
.value-exit-builder input[type="number"] {
padding: 6px 10px;
font-size: 12.5px;
border-radius: 8px;
border: 2px solid var(--border);
background: var(--bg-secondary);
color: var(--text-primary);
min-width: 0;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.value-exit-builder select:hover,
.value-exit-builder input[type="number"]:hover {
border-color: var(--border-hover);
}
.value-exit-builder select:focus,
.value-exit-builder input[type="number"]:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-glow);
background: var(--bg-dark);
}
.value-exit-builder select {
max-width: 130px;
}
.value-exit-builder input[type="number"] {
width: 90px;
}
.value-exit-builder .veb-label {
font-weight: 600;
color: var(--text-secondary);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.value-exit-builder .veb-separator {
color: var(--text-muted);
font-size: 16px;
font-weight: bold;
padding: 0 2px;
}
.value-exit-builder .veb-right-group {
display: flex;
align-items: center;
gap: 6px;
}
.value-exit-builder .veb-right-group.hidden {
display: none;
}
/* ── DSL Exit Builder ── */
.dsl-exit-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.dsl-exit-raw-btn {
flex: 0 0 auto;
padding: 4px 10px;
font-size: 11.5px;
font-weight: 600;
border: 1px solid var(--border);
border-radius: 8px;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.dsl-exit-raw-btn:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-glow);
}
.dsl-exit-note {
margin: 4px 0 8px;
padding: 6px 10px;
border: 1px solid #e67e22;
border-radius: 6px;
background: rgba(230, 126, 34, 0.08);
color: #e67e22;
font-size: 12px;
line-height: 1.4;
}
.dsl-exit-builder {
padding: 8px 10px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 10px;
font-size: 13px;
}
.dsl-exit-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.dsl-exit-operand {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 8px;
}
.dsl-operand-group {
display: inline-flex;
align-items: flex-end;
gap: 8px;
}
.dsl-field {
display: flex;
flex-direction: column;
gap: 3px;
}
.dsl-field-label {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
}
.dsl-exit-builder select,
.dsl-exit-builder input[type="number"] {
padding: 6px 10px;
font-size: 12.5px;
border-radius: 8px;
border: 2px solid var(--border);
background: var(--bg-dark);
color: var(--text-primary);
min-width: 0;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.dsl-exit-builder select:hover,
.dsl-exit-builder input[type="number"]:hover {
border-color: var(--border-hover);
}
.dsl-exit-builder select:focus,
.dsl-exit-builder input[type="number"]:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-glow);
background: var(--bg-dark);
}
.dsl-exit-builder select {
max-width: 150px;
}
.dsl-exit-builder input[type="number"] {
width: 90px;
}
.dsl-exit-op {
font-weight: bold;
font-size: 14px;
text-align: center;
min-width: 70px;
}
.dsl-exit-hint {
margin-top: 8px;
font-size: 11.5px;
color: var(--text-secondary);
font-style: italic;
}
/* Detail Layout */
.detail-container {
display: flex;
gap: 24px;
align-items: start;
justify-content: flex-end;
}
.detail-container.has-left-panel {
justify-content: space-between;
}
.detail-left {
display: none;
flex: 1;
min-width: 0;
flex-direction: column;
gap: 24px;
}
.detail-left.active {
display: flex;
}
.legs-panel-item {
position: relative;
transition: border-color 0.3s ease;
}
.legs-panel-item.sell-panel {
border-left: 4px solid var(--error);
}
.legs-panel-item.buy-panel {
border-left: 4px solid var(--success);
}
.legs-panel-item.trigger-must-fire {
border-left: 4px solid #f59e0b;
}
.legs-panel-item.trigger-must-not-fire {
border-left: 4px solid var(--error);
}
.legs-panel-item.trigger-can-fire {
border-left: 4px solid var(--success);
}
.close-legs-panel {
position: absolute;
top: 24px;
right: 24px;
background: var(--bg-dark);
border: 1px solid var(--border);
color: var(--text-secondary);
width: 32px;
height: 32px;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: all 0.2s;
}
.close-legs-panel:hover {
background: var(--error);
color: white;
border-color: var(--error);
}
/* Legs Visual Display */
.legs-display {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
padding: 16px;
background: var(--bg-dark);
border-radius: 8px;
min-height: 60px;
}
body.dashboard-theme-dark .legs-display {
background: transparent;
}
/* Triggers Visual Display */
.triggers-display {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 40px;
}
.leg-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
border: 2px solid;
position: relative;
cursor: pointer;
transition: all 0.2s;
}
.leg-badge.sell {
background: rgba(239, 68, 68, 0.1);
border-color: #ef4444;
color: #ef4444;
}
.leg-badge.buy {
background: rgba(16, 185, 129, 0.1);
border-color: #10b981;
color: #10b981;
}
.leg-badge:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.leg-badge-type {
font-weight: 700;
font-size: 14px;
}
.leg-badge-delete {
margin-left: 8px;
padding: 2px 6px;
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
font-size: 11px;
opacity: 0.7;
transition: opacity 0.2s;
}
.leg-badge:hover .leg-badge-delete {
opacity: 1;
}
/* Leg Rows (neues, zeilenbasiertes Layout) */
.leg-rows {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
overflow: hidden;
}
.leg-row {
display: grid;
grid-template-columns: max-content max-content minmax(0, 1fr) auto;
column-gap: 12px;
align-items: center;
padding: 12px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
transition: var(--transition-normal);
box-shadow: var(--shadow-sm);
}
.row-edit-hint {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: transparent;
color: var(--text-secondary);
opacity: 0;
transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
pointer-events: none;
flex-shrink: 0;
}
.leg-row:hover .row-edit-hint,
.trigger-row:hover .row-edit-hint {
opacity: 0.6;
background: color-mix(in srgb, var(--primary, #0891b2) 12%, transparent);
color: var(--primary, #0891b2);
}
.leg-row:hover {
border-color: var(--border-hover);
background: var(--bg-hover);
box-shadow: var(--shadow-md);
}
.leg-row.sell {
border-left: 4px solid var(--error);
}
.leg-row.buy {
border-left: 4px solid var(--success);
}
.leg-cell {
font-size: 13px;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.leg-cell--criterion {
white-space: normal;
overflow: visible;
text-overflow: initial;
line-height: 1.3;
}
.leg-actions {
display: flex;
gap: 6px;
justify-content: flex-end;
}
/* Connector entfernt */
/* === Drag & Drop für Legs zwischen LegGroups === */
.leg-row[draggable="true"] {
cursor: grab;
}
.leg-row[draggable="true"]:active {
cursor: grabbing;
}
/* Drag-Ghost: das Element das am Cursor klebt */
.leg-row.leg-dragging {
opacity: 0.2;
transform: scale(0.97);
box-shadow: none;
pointer-events: none;
}
/* Placeholder: zeigt wo das Leg einrasten wird – exakt gleiche Größe wie .leg-row */
.leg-drop-placeholder {
border: 2px dashed var(--primary, #0891b2);
border-radius: 10px;
background: rgba(8, 145, 178, 0.08);
padding: 12px 14px;
box-sizing: border-box;
pointer-events: none;
/* height is set dynamically via JS to match the dragged leg-row */
}
/* Ganzer LegGroup-Card bekommt visuelles Feedback wenn drüber gedraggt */
.leggroup-card.leg-drag-over {
border-color: var(--primary, #0891b2);
box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.25), var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.15));
background: rgba(8, 145, 178, 0.03);
}
/* Snap-Back Animation wenn Drop ungültig */
@keyframes legSnapBack {
0% { transform: translate(var(--snap-dx, 0), var(--snap-dy, 0)) scale(0.95); opacity: 0.6; }
60% { transform: translate(0, 0) scale(1.02); opacity: 0.9; }
100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
.leg-row.leg-snap-back {
animation: legSnapBack 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Drop-Erfolg: kurzer Highlight */
@keyframes legDropSuccess {
0% { background: rgba(16, 185, 129, 0.25); }
100% { background: var(--bg-card); }
}
.leg-row.leg-drop-success {
animation: legDropSuccess 0.6s ease forwards;
}
/* ── Preset Strip ── */
.lg-presets-window {
margin-bottom: 10px;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg-secondary);
}
.lg-presets-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.lg-presets-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.lg-presets-subtitle {
font-size: 10px;
color: var(--text-muted);
opacity: 0.7;
}
.lg-presets-subtitle::before { content: '·'; margin-right: 4px; }
.lg-presets-chip-row {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.lg-preset-chip {
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-secondary);
border-radius: 6px;
padding: 4px 9px;
font-size: 11px;
font-weight: 500;
line-height: 1;
cursor: pointer;
white-space: nowrap;
transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.lg-preset-chip:hover {
border-color: var(--primary);
color: var(--primary);
box-shadow: 0 2px 8px rgba(8, 145, 178, 0.13);
}
.lg-preset-chip:active {
box-shadow: none;
opacity: 0.8;
}
/* ── Backtest Date-Range Presets ── */
.ss-date-presets {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.ss-date-chip {
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-secondary);
border-radius: 6px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
line-height: 1;
cursor: pointer;
white-space: nowrap;
transition: border-color 0.15s, color 0.15s, box-shadow 0.15s, background 0.15s;
}
.ss-date-chip:hover {
border-color: var(--primary);
color: var(--primary);
box-shadow: 0 2px 8px rgba(8, 145, 178, 0.13);
}
.ss-date-chip:active {
box-shadow: none;
opacity: 0.8;
}
.ss-date-chip.active {
border-color: var(--primary);
background: var(--primary);
color: #fff;
}
.ss-date-field-error .bbt-ddp-input {
border-color: var(--danger, #e53e3e) !important;
box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.15);
}
.ss-date-field-error-msg {
color: var(--danger, #e53e3e);
font-size: 11px;
margin-top: 3px;
display: none;
}
.ss-date-field-error .ss-date-field-error-msg {
display: block;
}
.ss-autosave-status {
font-size: 13px;
font-weight: 500;
transition: color 0.3s ease, opacity 0.3s ease;
}
.ss-autosave-saved {
color: var(--success, #22c55e);
}
.ss-autosave-pending {
color: var(--text-secondary);
}
.ss-autosave-saving {
color: var(--primary, #0891b2);
}
.ss-autosave-error {
color: var(--error, #ef4444);
}
/* ── Drill-Down Datepicker ── */
.bbt-ddp-wrap {
position: relative;
}
.bbt-ddp-input {
width: 100%;
padding: 12px 40px 12px 16px;
background: var(--bg-secondary);
border: 2px solid var(--border);
border-radius: 10px;
color: var(--text-primary);
font-size: 14px;
font-family: 'Inter', sans-serif;
transition: var(--transition-normal);
box-shadow: var(--shadow-sm);
box-sizing: border-box;
}
.bbt-ddp-input::placeholder {
color: var(--text-secondary);
opacity: 0.55;
}
.bbt-ddp-input:hover {
border-color: var(--border-hover);
}
.bbt-ddp-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px var(--primary-glow);
background: var(--bg-dark);
}
.bbt-ddp-icon {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
display: flex;
align-items: center;
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: color 0.15s, background 0.15s;
}
.bbt-ddp-icon:hover {
color: var(--primary);
background: rgba(8, 145, 178, 0.08);
}
.bbt-ddp-popup {
position: absolute;
z-index: 1000;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.22);
padding: 10px;
min-width: 220px;
display: none;
}
.bbt-ddp-popup.open {
display: block;
}
.bbt-ddp-header {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.bbt-ddp-nav {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 14px;
padding: 2px 6px;
border-radius: 4px;
line-height: 1;
}
.bbt-ddp-nav:hover {
color: var(--primary);
background: rgba(8, 145, 178, 0.08);
}
.bbt-ddp-title {
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
padding: 2px 8px;
border-radius: 4px;
}
.bbt-ddp-title:hover {
background: rgba(8, 145, 178, 0.08);
color: var(--primary);
}
.bbt-ddp-title.no-click {
cursor: default;
}
.bbt-ddp-title.no-click:hover {
background: transparent;
color: var(--text-primary);
}
.bbt-ddp-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 2px;
}
.bbt-ddp-weekday {
text-align: center;
font-size: 10px;
font-weight: 600;
color: var(--text-secondary);
padding: 2px 0;
}
.bbt-ddp-grid {
display: grid;
gap: 4px;
}
.bbt-ddp-grid--years {
grid-template-columns: repeat(3, 1fr);
}
.bbt-ddp-grid--months {
grid-template-columns: repeat(3, 1fr);
}
.bbt-ddp-grid--days {
grid-template-columns: repeat(7, 1fr);
gap: 0;
}
.bbt-ddp-grid--days .bbt-ddp-cell {
padding: 1px 0;
}
.bbt-ddp-cell {
padding: 6px 2px;
text-align: center;
border-radius: 5px;
font-size: 12px;
cursor: pointer;
border: 1px solid transparent;
background: transparent;
color: var(--text-primary);
transition: background 0.1s, border-color 0.1s;
}
.bbt-ddp-cell:hover {
background: rgba(8, 145, 178, 0.10);
border-color: var(--primary);
}
.bbt-ddp-cell.selected {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.bbt-ddp-cell.today {
border-color: var(--primary);
font-weight: 600;
}
.bbt-ddp-cell.pad {
visibility: hidden;
}
.bbt-ddp-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
padding-top: 6px;
border-top: 1px solid var(--border);
}
.bbt-ddp-back-btn {
background: rgba(8, 145, 178, 0.08);
border: 1px solid rgba(8, 145, 178, 0.25);
color: var(--primary);
cursor: pointer;
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 3px;
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.bbt-ddp-back-btn:hover {
background: rgba(8, 145, 178, 0.15);
border-color: var(--primary);
box-shadow: 0 1px 4px rgba(8, 145, 178, 0.15);
}
.bbt-ddp-clear-btn {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 11px;
padding: 3px 8px;
border-radius: 4px;
opacity: 0.7;
}
.bbt-ddp-clear-btn:hover {
color: var(--danger, #e53e3e);
opacity: 1;
}
.lg-preset-chip--more {
min-width: 28px;
text-align: center;
font-weight: 700;
letter-spacing: 0.04em;
background: transparent;
border-style: dashed;
color: var(--text-muted);
}
.lg-preset-chip--more:hover {
background: var(--bg-card);
border-style: solid;
color: var(--primary);
}
.lg-preset-chip--more.active {
border-color: var(--primary);
border-style: solid;
color: var(--primary);
}
.lg-presets-overflow {
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed var(--border);
display: none;
}
.lg-presets-overflow.active { display: block; }
.lg-presets-category {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
opacity: 0.65;
margin: 6px 0 4px 1px;
}
.lg-presets-category:first-child { margin-top: 0; }
/* "+ Leg" Zeile auf LegGroup-Card (gleiche Groesse wie .leg-row) */
.leg-add-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 17px 14px;
min-height: 46px;
width: 100%;
box-sizing: border-box;
border: 2px dashed rgba(6, 120, 210, 0.50);
border-radius: 10px;
background: rgba(6, 120, 210, 0.06);
color: rgba(6, 120, 210, 0.85);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.leg-add-row:hover {
border-color: rgba(6, 120, 210, 0.75);
color: rgba(6, 120, 210, 1);
background: rgba(6, 120, 210, 0.12);
transform: translateY(-1px);
}
.leg-add-row:active {
background: rgba(6, 120, 210, 0.18);
transform: translateY(0);
}
/* "+ LegGroup" Gitter-Zeile unter den LegGroup-Cards */
.leggroup-add-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 26px 18px;
min-height: 68px;
width: 100%;
box-sizing: border-box;
border: 2px dashed rgba(6, 120, 210, 0.45);
border-radius: 12px;
background: rgba(6, 120, 210, 0.04);
color: rgba(6, 120, 210, 0.80);
font-size: 15px;
font-weight: 600;
cursor: pointer;
margin-top: 12px;
transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.leggroup-add-row:hover {
border-color: rgba(6, 120, 210, 0.75);
color: rgba(6, 120, 210, 1);
background: rgba(6, 120, 210, 0.10);
transform: translateY(-1px);
}
.leggroup-add-row:active {
background: rgba(6, 120, 210, 0.16);
transform: translateY(0);
}
/* =====================================================================
Daten-Indikatoren: Bereich zum Erstellen von Indikatoren (in Bedingungen)
===================================================================== */
.daten-ind-section {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
margin-bottom: 16px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--bg-secondary, rgba(127, 127, 127, 0.04));
}
.daten-ind-head {
display: flex;
align-items: center;
gap: 12px;
}
.daten-ind-head-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 11px;
background: rgba(6, 120, 210, 0.12);
color: rgba(6, 120, 210, 1);
font-size: 20px;
}
.daten-ind-head-title {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
.daten-ind-head-sub {
margin-top: 2px;
font-size: 12px;
color: var(--text-secondary);
line-height: 1.35;
}
/* Formular-Container */
.daten-ind-form {
padding: 18px;
border-radius: 12px;
background: var(--bg-primary, var(--bg-secondary));
border: 1px solid var(--border);
}
.daten-ind-form-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
}
.daten-ind-form-title i {
color: rgba(6, 120, 210, 1);
font-size: 16px;
}
/* Typ-Auswahl als Karten */
.bbt-ind-type-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
}
.bbt-ind-type-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 14px;
text-align: left;
border: 2px solid var(--border);
border-radius: 11px;
background: var(--bg-secondary, transparent);
cursor: pointer;
transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.bbt-ind-type-card:hover {
border-color: rgba(6, 120, 210, 0.55);
transform: translateY(-1px);
}
.bbt-ind-type-card.active {
border-color: rgba(6, 120, 210, 1);
background: rgba(6, 120, 210, 0.07);
box-shadow: 0 0 0 3px rgba(6, 120, 210, 0.10);
}
.bbt-ind-type-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: rgba(6, 120, 210, 0.10);
color: rgba(6, 120, 210, 1);
font-size: 17px;
}
.bbt-ind-type-card.active .bbt-ind-type-card-icon {
background: rgba(6, 120, 210, 1);
color: #fff;
}
.bbt-ind-type-card-title {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
}
.bbt-ind-type-card-desc {
font-size: 11.5px;
color: var(--text-secondary);
line-height: 1.35;
}
/* Schließen-Kreuz oben rechts im Leg-Group-Formular */
.leggroup-form-close {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid var(--border);
border-radius: 8px;
background: transparent;
color: var(--text-secondary, #6b7280);
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.leggroup-form-close:hover {
border-color: #ef4444;
color: #ef4444;
background: rgba(239, 68, 68, 0.10);
}
.leggroup-form-close:active {
background: rgba(239, 68, 68, 0.18);
}
/* "+ Trigger" Zeile auf Indicator-Card (gleiche Optik wie .leg-add-row) */
.trigger-add-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 14px;
min-height: 38px;
width: 100%;
box-sizing: border-box;
margin-top: 10px;
border: 2px dashed rgba(8, 145, 178, 0.50);
border-radius: 10px;
background: rgba(8, 145, 178, 0.06);
color: rgba(8, 145, 178, 0.85);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.trigger-add-row:hover {
border-color: rgba(8, 145, 178, 0.75);
color: rgba(8, 145, 178, 1);
background: rgba(8, 145, 178, 0.12);
transform: translateY(-1px);
}
.trigger-add-row:active {
background: rgba(8, 145, 178, 0.18);
transform: translateY(0);
}
/* Leg Group Cards */
.leggroup-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-left: 4px solid #d4781f;
border-radius: 14px;
padding: 18px;
margin-bottom: 16px;
cursor: pointer;
transition: var(--transition-normal);
box-shadow: 0 3px 16px rgba(0,0,0,0.20), 0 8px 28px rgba(0,0,0,0.12);
position: relative;
overflow: hidden;
}
body.dashboard-theme-dark .leggroup-card {
background: color-mix(in srgb, var(--bg-card) 85%, var(--bg-primary));
border-color: var(--border);
border-left-color: #d4781f;
box-shadow: 0 8px 34px rgba(0,0,0,0.85), 0 4px 14px rgba(0,0,0,0.60);
}
.leggroup-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--gradient-primary);
transition: width 0.4s ease;
border-radius: 0 0 14px 14px;
}
.leggroup-card .card-edit-hint {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: transparent;
color: var(--text-secondary);
opacity: 0;
transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
pointer-events: none;
}
.leggroup-card:hover .card-edit-hint {
opacity: 0.7;
background: color-mix(in srgb, var(--primary, #0891b2) 12%, transparent);
color: var(--primary, #0891b2);
}
.leggroup-card:has(.leg-row:hover) .card-edit-hint,
.leggroup-card:has(.leg-add-row:hover) .card-edit-hint {
opacity: 0.25 !important;
background: transparent !important;
color: var(--text-secondary) !important;
}
.leggroup-card:hover {
transform: translateY(-2px);
border-color: var(--primary, #0891b2);
border-left: 4px solid #d4781f;
box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 3px 10px rgba(0,0,0,0.08);
background: color-mix(in srgb, var(--bg-card) 88%, black);
}
body.dashboard-theme-dark .leggroup-card:hover {
box-shadow: 0 14px 50px rgba(0,0,0,0.90), 0 6px 18px rgba(0,0,0,0.65);
background: var(--bg-hover);
}
/* Im Edit-Modus keine Abdunkelung/Anhebung */
.leggroup-card.leggroup-editing:hover {
transform: none;
background: var(--bg-card);
border-color: var(--border);
border-left: 4px solid #d4781f;
box-shadow: 0 3px 16px rgba(0,0,0,0.20), 0 8px 28px rgba(0,0,0,0.12);
}
body.dashboard-theme-dark .leggroup-card.leggroup-editing:hover {
background: color-mix(in srgb, var(--bg-card) 85%, var(--bg-primary));
box-shadow: 0 8px 34px rgba(0,0,0,0.85), 0 4px 14px rgba(0,0,0,0.60);
}
.leggroup-card.leggroup-editing:hover::after {
width: 0;
}
/* Wenn ein Leg/Leg-Add gehovert wird, Card-Abdunkelung zurücknehmen */
.leggroup-card:has(.leg-row:hover),
.leggroup-card:has(.leg-add-row:hover) {
background: var(--bg-card);
}
body.dashboard-theme-dark .leggroup-card:has(.leg-row:hover),
body.dashboard-theme-dark .leggroup-card:has(.leg-add-row:hover) {
background: color-mix(in srgb, var(--bg-card) 85%, var(--bg-primary));
}
/* Legs bleiben hell bei LegGroup-Hover */
.leggroup-card:hover .leg-row {
background: var(--bg-card);
}
.leggroup-card:hover .leg-row:hover {
background: var(--bg-hover);
}
.leggroup-card:hover .leggroup-card-legs {
background: color-mix(in srgb, var(--primary, #0891b2) 4%, var(--bg-card));
}
body.dashboard-theme-dark .leggroup-card:hover .leggroup-card-legs {
background: color-mix(in srgb, var(--primary, #0891b2) 5%, var(--bg-card));
}
.leggroup-card:hover::after {
width: 100%;
}
.leggroup-card-header {
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.leggroup-card-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.leggroup-card-info {
display: flex;
gap: 16px;
font-size: 12px;
color: var(--text-secondary);
}
.leggroup-card-actions {
display: flex;
gap: 8px;
align-items: center;
}
.indicator-card-actions {
display: flex;
gap: 8px;
align-items: center;
}
.leggroup-card-legs {
margin-top: 14px;
padding: 10px;
border: 1.5px solid color-mix(in srgb, var(--primary, #0891b2) 22%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--primary, #0891b2) 4%, var(--bg-card));
}
body.dashboard-theme-dark .leggroup-card-legs {
background: color-mix(in srgb, var(--primary, #0891b2) 5%, var(--bg-card));
border-color: color-mix(in srgb, var(--primary, #0891b2) 18%, transparent);
}
.leggroup-card-legs-title {
font-size: 11px;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
padding-left: 4px;
}
/* ==================== COLLECTION SELECTION MODE ==================== */
/* Overlay deaktiviert */
.collection-selection-overlay {
display: none !important;
}
/* Hinweistext im Selection-Mode */
.collection-selection-hint {
background: var(--gradient-primary);
color: white;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 16px;
font-size: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.collection-selection-hint svg {
flex-shrink: 0;
}
/* Leggroup Cards im Selection-Mode */
.leggroup-card.collection-select-mode {
cursor: pointer !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.leggroup-card.collection-select-mode:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: var(--primary);
}
/* Ausgewählte Card im Selection-Mode */
.leggroup-card.collection-select-mode.selected {
border: 2px solid var(--primary);
box-shadow: 0 0 0 4px var(--primary-glow), 0 12px 40px rgba(0, 0, 0, 0.3);
}
.leggroup-card.collection-select-mode.selected::before {
content: '';
position: absolute;
top: 12px;
right: 12px;
width: 24px;
height: 24px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.leggroup-card.collection-select-mode.selected::after {
content: '✓';
position: absolute;
top: 12px;
right: 12px;
width: 24px;
height: 24px;
color: white;
font-size: 14px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
}
/* Deaktivierte Cards (bereits in Collection) */
.leggroup-card.collection-select-mode.disabled {
opacity: 0.4;
cursor: not-allowed !important;
pointer-events: none;
}
/* Selection Counter Badge */
.collection-selection-counter {
position: fixed;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
background: var(--gradient-primary);
color: white;
padding: 12px 24px;
border-radius: 30px;
font-weight: 600;
font-size: 14px;
z-index: 102;
box-shadow: 0 8px 30px rgba(8, 145, 178, 0.4);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.collection-selection-counter.active {
opacity: 1;
visibility: visible;
}
/* ==================== COLLECTION GRUPPIERUNG (Vertikale Linie) ==================== */
/* Container für Collection-Gruppe */
.collection-group {
position: relative;
margin-bottom: 24px;
}
/* Collection Header mit Name */
.collection-group-header {
display: flex;
align-items: center;
margin-bottom: 12px;
padding-left: 20px;
}
.collection-group-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 12px;
border-radius: 12px;
color: white;
}
.collection-group-delete {
margin-left: 8px;
background: transparent;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 4px;
}
.collection-group-delete:hover {
background: var(--error);
color: white;
}
/* Vertikale Verbindungslinie */
.collection-group-cards {
position: relative;
padding-left: 20px;
}
.collection-group-cards::before {
content: '';
position: absolute;
left: 6px;
top: 0;
bottom: 16px;
width: 4px;
border-radius: 2px;
background: var(--collection-color, var(--primary));
}
/* Horizontale Verbindung zu jeder Card */
.collection-group-cards .leggroup-card {
position: relative;
}
.collection-group-cards .leggroup-card::before {
content: '';
position: absolute;
left: -20px;
top: 50%;
width: 14px;
height: 4px;
border-radius: 2px;
background: var(--collection-color, var(--primary));
transform: translateY(-50%);
}
/* Collection Farben */
.collection-color-1 { --collection-color: #0891b2; } /* Cyan/Primary */
.collection-color-2 { --collection-color: #8b5cf6; } /* Violet */
.collection-color-3 { --collection-color: #f59e0b; } /* Amber */
.collection-color-4 { --collection-color: #ec4899; } /* Pink */
.collection-color-5 { --collection-color: #10b981; } /* Emerald */
.collection-color-6 { --collection-color: #6366f1; } /* Indigo */
.collection-color-7 { --collection-color: #ef4444; } /* Red */
.collection-color-8 { --collection-color: #84cc16; } /* Lime */
/* Indicator Cards (ähnlich wie Leg Group Cards) */
.indicator-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-left: 4px solid #d4781f;
border-radius: 14px;
padding: 18px;
cursor: pointer;
transition: var(--transition-normal);
margin-bottom: 14px;
box-shadow: 0 3px 16px rgba(0,0,0,0.20), 0 8px 28px rgba(0,0,0,0.12);
position: relative;
overflow: hidden;
}
body.dashboard-theme-dark .indicator-card {
background: color-mix(in srgb, var(--bg-card) 85%, var(--bg-primary));
border-color: var(--border);
border-left-color: #d4781f;
box-shadow: 0 8px 34px rgba(0,0,0,0.85), 0 4px 14px rgba(0,0,0,0.60);
}
.indicator-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--gradient-primary);
transition: width 0.4s ease;
border-radius: 0 0 14px 14px;
}
.indicator-card .card-edit-hint {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: transparent;
color: var(--text-secondary);
opacity: 0;
transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
pointer-events: none;
}
.indicator-card:hover .card-edit-hint {
opacity: 0.7;
background: color-mix(in srgb, var(--primary, #0891b2) 12%, transparent);
color: var(--primary, #0891b2);
}
.indicator-card:has(.trigger-row:hover) .card-edit-hint,
.indicator-card:has(.trigger-add-row:hover) .card-edit-hint {
opacity: 0.25 !important;
background: transparent !important;
color: var(--text-secondary) !important;
}
.indicator-card:hover {
transform: translateY(-2px);
border-color: var(--primary, #0891b2);
border-left: 4px solid #d4781f;
box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 3px 10px rgba(0,0,0,0.08);
background: color-mix(in srgb, var(--bg-card) 88%, black);
}
body.dashboard-theme-dark .indicator-card:hover {
box-shadow: 0 14px 50px rgba(0,0,0,0.90), 0 6px 18px rgba(0,0,0,0.65);
background: var(--bg-hover);
}
/* Wenn ein Trigger gehovert wird, Card-Highlight zurücknehmen */
.indicator-card:has(.trigger-row:hover),
.indicator-card:has(.trigger-add-row:hover) {
background: var(--bg-card);
}
body.dashboard-theme-dark .indicator-card:has(.trigger-row:hover),
body.dashboard-theme-dark .indicator-card:has(.trigger-add-row:hover) {
background: color-mix(in srgb, var(--bg-card) 85%, var(--bg-primary));
}
/* Trigger-Rows bleiben hell bei Indicator-Card-Hover */
.indicator-card:hover .trigger-row {
background: var(--bg-card);
}
.indicator-card:hover .trigger-row:hover {
background: var(--bg-hover);
}
/* Value-Reihen mit abdunkeln/aufhellen bei Card-Hover */
.indicator-card:hover .indicator-series-row {
background: color-mix(in srgb, var(--bg-secondary) 88%, black);
}
body.dashboard-theme-dark .indicator-card:hover .indicator-series-row {
background: var(--bg-hover);
}
/* Im Edit-Modus kein Hover-Effekt */
.indicator-card.indicator-editing:hover {
transform: none;
background: var(--bg-card);
border-color: var(--border);
border-left: 4px solid #d4781f;
box-shadow: 0 3px 16px rgba(0,0,0,0.20), 0 8px 28px rgba(0,0,0,0.12);
}
body.dashboard-theme-dark .indicator-card.indicator-editing:hover {
background: color-mix(in srgb, var(--bg-card) 85%, var(--bg-primary));
box-shadow: 0 8px 34px rgba(0,0,0,0.85), 0 4px 14px rgba(0,0,0,0.60);
}
.indicator-card.indicator-editing:hover::after {
width: 0;
}
.indicator-card:hover::after {
width: 100%;
}
.indicator-card-header {
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.indicator-card-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
}
.indicator-card-info {
display: flex;
gap: 16px;
flex-wrap: wrap;
color: var(--text-secondary);
font-size: 12px;
}
.indicator-card-triggers {
margin-top: 12px;
}
.indicator-card-triggers-title {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
margin-bottom: 8px;
}
/* Dezenter Hinweis: Indikator existiert und ist in Bedingungen nutzbar */
.indicator-card-usage {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
padding: 5px 11px;
border-radius: 999px;
background: rgba(8, 145, 178, 0.10);
border: 1px solid rgba(8, 145, 178, 0.22);
color: var(--primary, #0891b2);
font-size: 12px;
font-weight: 600;
line-height: 1;
}
.indicator-card-usage svg {
flex: 0 0 auto;
opacity: 0.9;
}
body.dashboard-theme-dark .indicator-card-usage {
background: rgba(34, 211, 238, 0.12);
border-color: rgba(34, 211, 238, 0.28);
color: #67e8f9;
}
/* ==================== CONDITION CARDS ==================== */
/* Gleiche Card-Optik wie Indicator-/LegGroup-Cards (Schatten, Radius, Hover-Lift),
jedoch mit eigenem violetten Akzent + Badge, damit eine Bedingung sofort
visuell von Daten-Indikatoren und LegGroups unterscheidbar ist. */
.condition-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-left: 4px solid #7c3aed;
border-radius: 14px;
padding: 18px;
cursor: pointer;
transition: var(--transition-normal);
margin-bottom: 0;
box-shadow: 0 3px 16px rgba(0,0,0,0.20), 0 8px 28px rgba(0,0,0,0.12);
position: relative;
overflow: hidden;
}
body.dashboard-theme-dark .condition-card {
background: color-mix(in srgb, var(--bg-card) 85%, var(--bg-primary));
border-color: var(--border);
border-left-color: #8b5cf6;
box-shadow: 0 8px 34px rgba(0,0,0,0.85), 0 4px 14px rgba(0,0,0,0.60);
}
.condition-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #7c3aed, #a855f7);
transition: width 0.4s ease;
border-radius: 0 0 14px 14px;
}
.condition-card .card-edit-hint {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: transparent;
color: var(--text-secondary);
opacity: 0;
transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
pointer-events: none;
}
.condition-card:hover .card-edit-hint {
opacity: 0.7;
background: color-mix(in srgb, #7c3aed 14%, transparent);
color: #7c3aed;
}
.condition-card:hover {
transform: translateY(-2px);
border-color: #7c3aed;
border-left: 4px solid #7c3aed;
box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 3px 10px rgba(0,0,0,0.08);
background: color-mix(in srgb, var(--bg-card) 88%, black);
}
body.dashboard-theme-dark .condition-card:hover {
box-shadow: 0 14px 50px rgba(0,0,0,0.90), 0 6px 18px rgba(0,0,0,0.65);
background: var(--bg-hover);
}
.condition-card:hover::after {
width: 100%;
}
/* Edit-Modus: Card "geht auf" und bleibt ruhig (kein Hover-Lift) */
.condition-card.condition-editing {
cursor: default;
transform: none;
background: var(--bg-card);
border-color: #7c3aed;
}
body.dashboard-theme-dark .condition-card.condition-editing {
background: color-mix(in srgb, var(--bg-card) 85%, var(--bg-primary));
}
.condition-card.condition-editing:hover {
transform: none;
background: var(--bg-card);
box-shadow: 0 3px 16px rgba(0,0,0,0.20), 0 8px 28px rgba(0,0,0,0.12);
}
body.dashboard-theme-dark .condition-card.condition-editing:hover {
background: color-mix(in srgb, var(--bg-card) 85%, var(--bg-primary));
box-shadow: 0 8px 34px rgba(0,0,0,0.85), 0 4px 14px rgba(0,0,0,0.60);
}
.condition-card.condition-editing:hover::after {
width: 0;
}
/* Eingebettetes Formular sanft einblenden, wenn die Card aufgeht */
@keyframes bbtConditionFormReveal {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
#conditionsFormWrap.condition-form-inline {
animation: bbtConditionFormReveal 0.22s ease;
}
.condition-card-header {
display: flex;
justify-content: space-between;
align-items: start;
gap: 12px;
}
.condition-card-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
margin-bottom: 10px;
border-radius: 999px;
background: color-mix(in srgb, #7c3aed 12%, transparent);
border: 1px solid color-mix(in srgb, #7c3aed 30%, transparent);
color: #7c3aed;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
line-height: 1;
}
body.dashboard-theme-dark .condition-card-badge {
background: color-mix(in srgb, #a855f7 18%, transparent);
border-color: color-mix(in srgb, #a855f7 34%, transparent);
color: #c4b5fd;
}
.condition-card-badge svg {
flex: 0 0 auto;
}
.condition-card-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
}
.condition-card-actions {
display: flex;
gap: 8px;
align-items: center;
flex-shrink: 0;
}
.condition-card-logic {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 14px;
padding: 10px 12px;
border: 1.5px solid color-mix(in srgb, #7c3aed 22%, transparent);
border-radius: 10px;
background: color-mix(in srgb, #7c3aed 5%, var(--bg-card));
}
body.dashboard-theme-dark .condition-card-logic {
background: color-mix(in srgb, #a855f7 8%, var(--bg-card));
border-color: color-mix(in srgb, #a855f7 20%, transparent);
}
.condition-card-logic-part {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
}
.condition-card-logic-op {
display: inline-flex;
align-items: center;
padding: 2px 9px;
border-radius: 6px;
background: color-mix(in srgb, #7c3aed 16%, transparent);
color: #7c3aed;
font-size: 12px;
font-weight: 700;
}
body.dashboard-theme-dark .condition-card-logic-op {
background: color-mix(in srgb, #a855f7 22%, transparent);
color: #c4b5fd;
}
/* Indicator Value Series (DSL Multi-Output) */
.indicator-card-series {
margin-top: 12px;
}
.indicator-card-series-title {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
margin-bottom: 8px;
}
.indicator-series-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.indicator-series-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 6px 10px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg-secondary);
transition: background 0.2s ease;
}
.indicator-series-name {
min-width: 0;
flex: 1;
color: var(--text-secondary);
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.indicator-series-count {
flex: 0 0 auto;
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
padding: 2px 8px;
border-radius: 999px;
background: rgba(8, 145, 178, 0.18);
border: 1px solid rgba(8, 145, 178, 0.28);
}
/* Trigger Rows (zeilenbasiert wie .leg-row) */
.trigger-rows {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.trigger-row {
display: grid;
grid-template-columns: minmax(140px, 1fr) max-content auto;
column-gap: 12px;
align-items: center;
padding: 12px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
transition: var(--transition-normal);
box-shadow: var(--shadow-sm);
cursor: pointer;
}
.trigger-row:hover {
border-color: var(--border-hover);
background: var(--bg-hover);
transform: translateX(4px);
box-shadow: var(--shadow-md);
}
.trigger-row.must-fire {
border-left: 4px solid #f59e0b;
}
.trigger-row.must-not-fire {
border-left: 4px solid #ef4444;
}
.trigger-row.can-fire {
border-left: 4px solid #10b981;
}
.trigger-cell {
font-size: 13px;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trigger-cell--fire-type {
font-weight: 600;
font-size: 12px;
padding: 2px 8px;
border-radius: 6px;
}
.trigger-row.must-fire .trigger-cell--fire-type {
color: #f59e0b;
background: rgba(245, 158, 11, 0.12);
}
.trigger-row.must-not-fire .trigger-cell--fire-type {
color: #ef4444;
background: rgba(239, 68, 68, 0.12);
}
.trigger-row.can-fire .trigger-cell--fire-type {
color: #10b981;
background: rgba(16, 185, 129, 0.12);
}
.trigger-cell--name {
white-space: normal;
overflow: visible;
text-overflow: initial;
line-height: 1.3;
}
.trigger-cell--interval {
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
}
.trigger-row-actions {
display: flex;
gap: 6px;
justify-content: flex-end;
}
/* Große Trigger-Karten (nur im linken Panel) */
.trigger-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 12px;
margin: 10px 0;
transition: border-color 0.2s ease, transform 0.1s ease;
}
.trigger-card:hover {
border-color: var(--primary);
transform: translateY(-1px);
}
.trigger-card-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.trigger-card-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.trigger-card-meta {
font-size: 12px;
color: var(--text-secondary);
margin-top: 2px;
}
.trigger-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
border: 1px solid transparent;
}
.trigger-chip.must-fire {
background: rgba(245, 158, 11, 0.18);
border-color: rgba(245, 158, 11, 0.4);
color: #f59e0b;
}
.trigger-chip.must-not-fire {
background: rgba(239, 68, 68, 0.18);
border-color: rgba(239, 68, 68, 0.4);
color: #ef4444;
}
.trigger-chip.can-fire {
background: rgba(16, 185, 129, 0.18);
border-color: rgba(16, 185, 129, 0.4);
color: #10b981;
}
.trigger-card-body {
margin-top: 10px;
font-size: 13px;
color: var(--text-primary);
line-height: 1.35;
}
.trigger-kv {
display: grid;
grid-template-columns: 130px 1fr;
gap: 6px 10px;
}
.trigger-kv div {
font-size: 12px;
}
.trigger-kv div.key {
color: var(--text-secondary);
}
.trigger-card-actions {
display: flex;
align-items: center;
gap: 8px;
}
.detail-right {
width: 600px;
flex-shrink: 0;
border-left: 1px solid var(--border);
padding-left: 24px;
}
body.dashboard-theme-dark .detail-right {
border-left-color: var(--border);
}
.panel-section {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 26px;
box-shadow: var(--shadow-lg);
backdrop-filter: blur(8px);
}
.section-title {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
/* Table Styles */
.data-table {
width: 100%;
margin-top: 16px;
border-collapse: separate;
border-spacing: 0;
}
.data-table th {
text-align: left;
padding: 14px 16px;
background: var(--bg-secondary);
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--border);
}
.data-table th:first-child {
border-radius: 10px 0 0 0;
}
.data-table th:last-child {
border-radius: 0 10px 0 0;
}
.data-table td {
padding: 14px 16px;
color: var(--text-primary);
font-size: 14px;
border-bottom: 1px solid var(--border);
transition: var(--transition-fast);
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
.data-table tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
.data-table tbody tr {
transition: var(--transition-fast);
}
.data-table tbody tr:hover {
background: var(--bg-hover);
}
.data-table tbody tr:hover td {
color: var(--primary);
}
.btn-table {
padding: 8px 14px;
background: var(--bg-secondary);
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
font-size: 12px;
transition: var(--transition-fast);
margin-right: 6px;
box-shadow: var(--shadow-sm);
}
.btn-table:hover {
background: var(--bg-hover);
color: var(--text-primary);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-table.danger:hover {
background: rgba(239, 68, 68, 0.08);
border-color: var(--error);
color: var(--error);
box-shadow: var(--shadow-md);
}
/* ==================== Beta Feedback Modal ==================== */
#betaFeedbackOverlay .modal {
max-width: 620px;
width: 94%;
max-height: 90vh;
display: flex;
flex-direction: column;
}
#betaFeedbackOverlay .modal-header {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(8, 145, 178, 0.06) 100%);
border-bottom: 1px solid var(--border);
padding: 20px 24px;
}
#betaFeedbackOverlay .modal-title {
display: flex;
align-items: center;
gap: 10px;
}
.beta-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 20px;
background: linear-gradient(135deg, #8b5cf6, #6366f1);
color: white;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.beta-fb-body {
padding: 24px;
overflow-y: auto;
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.beta-fb-tabs {
display: flex;
background: var(--bg-secondary);
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.beta-fb-tab {
flex: 1;
padding: 8px 12px;
border: none;
background: transparent;
color: var(--text-muted);
font-size: 13px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.beta-fb-tab.active {
background: var(--bg-card);
color: var(--text-primary);
box-shadow: var(--shadow-sm);
}
.beta-fb-tab:hover:not(.active) {
color: var(--text-secondary);
}
.beta-fb-field label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 6px;
letter-spacing: 0.3px;
}
.beta-fb-field label .req {
color: var(--error);
}
.beta-fb-input,
.beta-fb-select,
.beta-fb-textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-dark);
color: var(--text-primary);
font-size: 13px;
font-family: inherit;
transition: border-color 0.2s, box-shadow 0.2s;
}
.beta-fb-input:focus,
.beta-fb-select:focus,
.beta-fb-textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-glow);
}
.beta-fb-textarea {
resize: vertical;
line-height: 1.6;
min-height: 100px;
}
.beta-fb-categories {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
@media (max-width: 500px) {
.beta-fb-categories { grid-template-columns: repeat(2, 1fr); }
}
.beta-fb-cat {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-dark);
cursor: pointer;
transition: all 0.2s ease;
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
}
.beta-fb-cat:hover {
border-color: var(--border-hover);
background: var(--bg-hover);
}
.beta-fb-cat.selected {
border-color: var(--primary);
background: rgba(8, 145, 178, 0.06);
color: var(--primary);
box-shadow: 0 0 0 2px var(--primary-glow);
}
.beta-fb-cat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.beta-fb-cat-icon svg {
width: 16px;
height: 16px;
}
.beta-fb-drop {
border: 2px dashed var(--border);
border-radius: 12px;
padding: 24px 16px;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.beta-fb-drop:hover,
.beta-fb-drop.dragover {
border-color: var(--primary);
background: rgba(8, 145, 178, 0.03);
}
.beta-fb-drop-icon {
width: 40px;
height: 40px;
margin: 0 auto 8px;
border-radius: 10px;
background: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: center;
}
.beta-fb-screenshot-btns {
display: flex;
gap: 8px;
justify-content: center;
margin-bottom: 10px;
}
.beta-fb-snap-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg-secondary);
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.beta-fb-snap-btn:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(8, 145, 178, 0.06);
}
.beta-fb-snap-btn svg {
flex-shrink: 0;
}
/* Snipping overlay */
.beta-snip-overlay {
position: fixed;
inset: 0;
z-index: 99999;
cursor: crosshair;
background: transparent;
}
.beta-snip-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.beta-snip-hint {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 100000;
background: rgba(0,0,0,0.8);
color: #fff;
padding: 10px 20px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
pointer-events: none;
backdrop-filter: blur(8px);
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.beta-snip-dim {
position: fixed;
top: 12px;
right: 16px;
z-index: 100000;
background: rgba(0,0,0,0.75);
color: #fff;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
font-variant-numeric: tabular-nums;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
}
.beta-fb-preview {
position: relative;
display: inline-block;
}
.beta-fb-preview img {
max-width: 100%;
max-height: 180px;
border-radius: 8px;
border: 1px solid var(--border);
}
.beta-fb-preview-remove {
position: absolute;
top: -6px;
right: -6px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--error);
color: white;
border: 2px solid var(--bg-card);
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: transform 0.15s ease;
}
.beta-fb-preview-remove:hover {
transform: scale(1.15);
}
.beta-fb-actions {
display: flex;
align-items: center;
gap: 12px;
padding-top: 4px;
}
.beta-fb-submit {
padding: 11px 28px;
border: none;
border-radius: 10px;
background: var(--gradient-primary);
color: white;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
}
.beta-fb-submit:hover:not(:disabled) {
box-shadow: 0 4px 16px var(--primary-glow);
transform: translateY(-1px);
}
.beta-fb-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.beta-fb-history-item {
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-dark);
margin-bottom: 8px;
transition: border-color 0.2s;
}
.beta-fb-history-item:hover {
border-color: var(--border-hover);
}
.beta-fb-history-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.beta-fb-cat-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
color: white;
}
.beta-fb-cat-badge svg {
flex-shrink: 0;
}
.beta-fb-status-badge {
display: inline-flex;
padding: 2px 8px;
border-radius: 6px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Modal */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}
/* Report-Modal muss über Published-Detail liegen (sonst DOM-order bei gleichem z-index) */
#reportModalOverlay {
z-index: 1200;
}
/* Rate-Limit-Modal über allem */
#rateLimitModal {
z-index: 1300;
}
.rate-limit-icon {
display: flex;
justify-content: center;
margin-bottom: 8px;
}
.rate-limit-countdown {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.countdown-circle {
position: relative;
width: 100px;
height: 100px;
}
.countdown-circle svg {
transform: rotate(-90deg);
width: 100%;
height: 100%;
}
.countdown-bg {
fill: none;
stroke: var(--border);
stroke-width: 6;
}
.countdown-progress {
fill: none;
stroke: var(--primary);
stroke-width: 6;
stroke-linecap: round;
stroke-dasharray: 283;
stroke-dashoffset: 0;
transition: stroke-dashoffset 1s linear;
}
.countdown-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 28px;
font-weight: 700;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.countdown-label {
font-size: 13px;
color: var(--text-secondary);
}
/* Social Suspension Modal */
#socialSuspensionModal {
z-index: 1300;
}
.suspension-icon {
display: flex;
justify-content: center;
margin-bottom: 8px;
}
.suspension-details {
background: var(--bg-tertiary);
border-radius: 12px;
padding: 16px;
text-align: left;
}
.suspension-detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
.suspension-detail-row:not(:last-child) {
border-bottom: 1px solid var(--border);
}
.suspension-label {
font-size: 13px;
color: var(--text-secondary);
}
.suspension-value {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
/* Appeal section inside suspension modal */
.suspension-appeal {
margin-top: 20px;
text-align: left;
}
.suspension-appeal-trigger {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 10px 16px;
border-radius: 10px;
border: 1px dashed var(--border);
background: transparent;
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.suspension-appeal-trigger:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(99, 102, 241, 0.04);
}
.suspension-appeal-trigger svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.suspension-appeal-form {
margin-top: 14px;
padding: 16px;
background: var(--bg-tertiary);
border-radius: 12px;
border: 1px solid var(--border);
}
.suspension-appeal-form-hint {
font-size: 12px;
color: var(--text-tertiary);
line-height: 1.5;
margin-bottom: 12px;
}
.suspension-appeal-textarea {
width: 100%;
min-height: 90px;
padding: 12px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg-primary);
color: var(--text-primary);
font-size: 13px;
font-family: inherit;
line-height: 1.5;
resize: vertical;
transition: border-color 0.2s;
box-sizing: border-box;
}
.suspension-appeal-textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.suspension-appeal-textarea:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.suspension-appeal-submit {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 12px;
padding: 10px 16px;
border-radius: 10px;
border: none;
background: var(--primary);
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.suspension-appeal-submit:hover:not(:disabled) {
filter: brightness(1.1);
}
.suspension-appeal-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.suspension-appeal-submit svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.suspension-appeal-status {
font-size: 12px;
line-height: 1.5;
margin-top: 10px;
padding: 8px 12px;
border-radius: 8px;
display: none;
}
.suspension-appeal-status.success {
display: block;
background: rgba(34, 197, 94, 0.08);
color: #22c55e;
border: 1px solid rgba(34, 197, 94, 0.2);
}
.suspension-appeal-status.error {
display: block;
background: rgba(239, 68, 68, 0.08);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.2);
}
/* ==================== Admin Moderation Panel ==================== */
.mod-panel {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
}
.mod-header {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
padding: 20px 24px;
border-bottom: 1px solid var(--border);
}
.mod-header-title {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.mod-header-title h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
.mod-header-title .mod-icon {
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
}
.mod-filters {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: flex-end;
}
.mod-filter-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.mod-filter-group label {
font-size: 11px;
font-weight: 500;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mod-filter-group select {
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-card);
color: var(--text-primary);
font-size: 13px;
min-width: 120px;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
}
.mod-filter-group select:hover {
border-color: var(--primary);
}
.mod-filter-group select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.mod-body {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 400px;
}
@media (max-width: 900px) {
.mod-body {
grid-template-columns: 1fr;
}
}
.mod-list {
border-right: 1px solid var(--border);
max-height: 500px;
overflow-y: auto;
}
@media (max-width: 900px) {
.mod-list {
border-right: none;
border-bottom: 1px solid var(--border);
max-height: 300px;
}
}
.mod-list-header {
padding: 10px 12px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
font-size: 11px;
font-weight: 500;
color: var(--text-secondary);
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.mod-list-items {
padding: 8px;
}
.mod-report-card {
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
margin-bottom: 4px;
border: 1px solid transparent;
background: var(--bg-card);
}
.mod-report-card:hover {
background: var(--bg-secondary);
border-color: var(--border);
}
.mod-report-card.active {
background: rgba(99, 102, 241, 0.1);
border-color: var(--primary);
}
.mod-report-card-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.mod-report-id {
font-weight: 600;
font-size: 12px;
color: var(--text-primary);
}
.mod-report-date {
font-size: 10px;
color: var(--text-tertiary);
}
.mod-report-meta {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.mod-badge {
display: inline-flex;
align-items: center;
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
}
.mod-badge-status {
background: var(--bg-tertiary);
color: var(--text-secondary);
}
.mod-badge-status.open {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
}
.mod-badge-status.triaged {
background: rgba(245, 158, 11, 0.15);
color: #f59e0b;
}
.mod-badge-status.resolved {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
}
.mod-badge-status.rejected {
background: rgba(107, 114, 128, 0.15);
color: #6b7280;
}
.mod-badge-type {
background: rgba(99, 102, 241, 0.1);
color: var(--primary);
}
.mod-badge-reason {
background: rgba(236, 72, 153, 0.1);
color: #ec4899;
}
.mod-report-snippet {
font-size: 11px;
color: var(--text-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Appeals / Beschwerden (visuell getrennt) */
.mod-appeals {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.mod-appeal-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 8px;
}
.mod-appeal-card {
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-card);
padding: 10px 12px;
}
.mod-appeal-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.mod-appeal-title {
font-weight: 600;
font-size: 13px;
color: var(--text-primary);
}
.mod-appeal-date {
font-size: 11px;
color: var(--text-tertiary);
white-space: nowrap;
}
.mod-appeal-meta {
font-size: 12px;
color: var(--text-tertiary);
margin-bottom: 8px;
}
.mod-appeal-message {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.45;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px;
}
.mod-appeal-subtitle {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 6px;
}
.mod-appeal-admin-response {
margin-top: 10px;
}
.mod-appeal-admin-text {
font-size: 13px;
color: var(--text-secondary);
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px;
}
.mod-appeal-resolve {
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--border);
}
/* Mod Search */
.mod-search {
display: flex;
gap: 8px;
align-items: center;
flex: 1;
max-width: 300px;
}
.mod-search-input {
flex: 1;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-card);
color: var(--text-primary);
font-size: 13px;
}
.mod-search-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.mod-search-input::placeholder {
color: var(--text-tertiary);
}
.mod-detail {
padding: 20px;
overflow-y: auto;
max-height: 500px;
}
.mod-detail-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: var(--text-tertiary);
text-align: center;
padding: 40px;
}
.mod-detail-empty svg {
width: 48px;
height: 48px;
margin-bottom: 12px;
opacity: 0.5;
}
.mod-detail-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.mod-detail-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 8px 0;
}
.mod-detail-section {
margin-bottom: 20px;
}
.mod-detail-section-title {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.mod-detail-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.mod-detail-item {
background: var(--bg-secondary);
padding: 10px 12px;
border-radius: 8px;
}
.mod-detail-item-label {
font-size: 11px;
color: var(--text-tertiary);
margin-bottom: 2px;
}
.mod-detail-item-value {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.mod-detail-content {
background: var(--bg-secondary);
padding: 12px;
border-radius: 8px;
font-size: 13px;
color: var(--text-primary);
white-space: pre-wrap;
word-break: break-word;
max-height: 150px;
overflow-y: auto;
}
.mod-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.mod-actions .btn {
font-size: 12px;
padding: 8px 14px;
}
.mod-audit {
margin-top: 16px;
}
.mod-audit-item {
display: flex;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.mod-audit-item:last-child {
border-bottom: none;
}
.mod-audit-icon {
width: 28px;
height: 28px;
background: var(--bg-tertiary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex-shrink: 0;
}
.mod-audit-content {
flex: 1;
}
.mod-audit-action {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.mod-audit-note {
font-size: 12px;
color: var(--text-secondary);
margin-top: 2px;
}
.mod-audit-time {
font-size: 11px;
color: var(--text-tertiary);
}
.mod-empty-list {
padding: 40px 20px;
text-align: center;
color: var(--text-tertiary);
}
.mod-report-reporter {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 10px;
color: var(--text-tertiary);
margin-top: 2px;
}
.mod-report-retention {
font-size: 9px;
opacity: 0.7;
}
/* Closed reports in list: dimmed appearance */
.mod-report-card.mod-report-closed {
opacity: 0.7;
border-left: 3px solid var(--border);
}
.mod-report-card.mod-report-closed:hover {
opacity: 0.9;
}
/* Snapshot badge */
.mod-badge-snapshot {
background: rgba(245, 158, 11, 0.12);
color: #f59e0b;
font-size: 10px;
}
/* Appeal badge in report list */
.mod-badge-appeal {
background: rgba(168, 85, 247, 0.15);
color: #a855f7;
font-size: 10px;
font-weight: 600;
animation: mod-appeal-pulse 2s ease-in-out infinite;
}
@keyframes mod-appeal-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* Report card with open appeal — purple left border accent */
.mod-report-card.mod-report-has-appeal {
border-left: 3px solid #a855f7;
background: rgba(168, 85, 247, 0.04);
}
.mod-report-card.mod-report-has-appeal:hover {
background: rgba(168, 85, 247, 0.08);
}
/* Snapshot evidence section (for resolved/rejected reports) */
.mod-snapshot-section {
border-radius: 10px;
}
.mod-snapshot-evidence {
background: rgba(245, 158, 11, 0.06);
border: 1px dashed rgba(245, 158, 11, 0.3);
padding: 12px;
border-radius: 10px;
}
.mod-snapshot-evidence .mod-detail-section-title {
color: #f59e0b;
}
.mod-snapshot-content {
font-size: 13px;
color: var(--text-primary);
}
/* ── Workflow Pipeline (Status-Stepper) ── */
.mod-pipeline {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 20px;
padding: 14px 16px;
background: var(--bg-secondary);
border-radius: 12px;
border: 1px solid var(--border);
overflow-x: auto;
}
.mod-pipeline-step {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
color: var(--text-tertiary);
transition: all 0.2s;
}
.mod-pipeline-step.active {
background: var(--primary);
color: #fff;
font-weight: 600;
}
.mod-pipeline-step.done {
color: var(--text-secondary);
}
.mod-pipeline-step .step-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border);
flex-shrink: 0;
}
.mod-pipeline-step.active .step-dot {
background: #fff;
box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
}
.mod-pipeline-step.done .step-dot {
background: #22c55e;
}
.mod-pipeline-arrow {
color: var(--border);
font-size: 14px;
margin: 0 2px;
flex-shrink: 0;
}
/* ── Action Cards ── */
.mod-actions-enterprise {
padding-top: 16px;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 16px;
}
.mod-action-section-title {
font-size: 11px;
font-weight: 700;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: -4px;
}
.mod-action-cards {
display: flex;
flex-direction: column;
gap: 8px;
}
.mod-action-card {
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
background: var(--bg-card);
}
.mod-action-card:hover {
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
}
.mod-action-card.danger:hover {
border-color: #ef4444;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.08);
}
.mod-action-card.success:hover {
border-color: #22c55e;
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.08);
}
.mod-action-card.neutral:hover {
border-color: #6b7280;
box-shadow: 0 2px 8px rgba(107, 114, 128, 0.08);
}
.mod-action-card-trigger {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
cursor: pointer;
width: 100%;
border: none;
background: transparent;
text-align: left;
color: inherit;
font-family: inherit;
}
.mod-action-card-trigger:hover {
background: var(--bg-secondary);
}
.mod-action-card-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.mod-action-card.danger .mod-action-card-icon { background: rgba(239, 68, 68, 0.1); }
.mod-action-card.success .mod-action-card-icon { background: rgba(34, 197, 94, 0.1); }
.mod-action-card.neutral .mod-action-card-icon { background: rgba(107, 114, 128, 0.1); }
.mod-action-card .mod-action-card-icon { background: rgba(99, 102, 241, 0.1); }
.mod-action-card-body {
flex: 1;
min-width: 0;
}
.mod-action-card-title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}
.mod-action-card-desc {
font-size: 11px;
color: var(--text-tertiary);
line-height: 1.4;
}
.mod-action-card-arrow {
color: var(--text-tertiary);
font-size: 16px;
flex-shrink: 0;
transition: transform 0.2s;
}
.mod-action-card-trigger:hover .mod-action-card-arrow {
transform: translateX(2px);
}
.mod-action-card-consequence {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: 6px;
padding: 6px 8px;
border-radius: 6px;
font-size: 10px;
line-height: 1.35;
}
.mod-action-card.danger .mod-action-card-consequence {
background: rgba(239, 68, 68, 0.06);
color: #ef4444;
}
.mod-action-card.success .mod-action-card-consequence {
background: rgba(34, 197, 94, 0.06);
color: #22c55e;
}
.mod-action-card.neutral .mod-action-card-consequence {
background: rgba(107, 114, 128, 0.06);
color: #6b7280;
}
.mod-action-card .mod-action-card-consequence {
background: rgba(99, 102, 241, 0.06);
color: var(--primary);
}
/* ── Inline Action Form (replaces prompt()) ── */
.mod-action-form {
padding: 0 16px 16px 16px;
border-top: 1px solid var(--border);
background: var(--bg-secondary);
display: none;
}
.mod-action-form.open {
display: block;
animation: modFormSlideDown 0.2s ease;
}
@keyframes modFormSlideDown {
from { opacity: 0; max-height: 0; padding-top: 0; }
to { opacity: 1; max-height: 400px; padding-top: 14px; }
}
.mod-action-form.open {
padding-top: 14px;
}
.mod-form-row {
margin-bottom: 10px;
}
.mod-form-label {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 4px;
display: block;
}
.mod-form-input, .mod-form-textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-card);
color: var(--text-primary);
font-size: 13px;
font-family: inherit;
box-sizing: border-box;
}
.mod-form-textarea {
resize: vertical;
min-height: 60px;
}
.mod-form-input:focus, .mod-form-textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.mod-form-hint {
font-size: 10px;
color: var(--text-tertiary);
margin-top: 2px;
}
.mod-form-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 12px;
}
.mod-form-actions .btn {
font-size: 12px;
padding: 8px 16px;
}
.mod-form-summary {
padding: 10px 12px;
border-radius: 8px;
font-size: 11px;
line-height: 1.5;
margin-bottom: 12px;
}
.mod-form-summary.warn {
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.2);
color: #f59e0b;
}
.mod-form-summary.danger {
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.mod-form-summary.info {
background: rgba(99, 102, 241, 0.08);
border: 1px solid rgba(99, 102, 241, 0.2);
color: var(--primary);
}
/* ── Resolve Form: Radio Option Cards ── */
.mod-resolve-section {
margin-bottom: 14px;
}
.mod-resolve-options {
display: flex;
flex-direction: column;
gap: 6px;
}
.mod-resolve-option {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
background: var(--bg-card);
}
.mod-resolve-option:hover {
border-color: var(--primary);
background: rgba(99, 102, 241, 0.03);
}
.mod-resolve-option:has(input:checked) {
border-color: var(--primary);
background: rgba(99, 102, 241, 0.06);
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
}
.mod-resolve-option input[type="radio"] {
width: 18px;
height: 18px;
flex-shrink: 0;
accent-color: var(--primary);
cursor: pointer;
}
.mod-resolve-option-body {
flex: 1;
min-width: 0;
}
.mod-resolve-option-title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.mod-resolve-option-desc {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 1px;
}
/* ── User Warning Modal ── */
.bbt-warn-overlay {
position: fixed;
inset: 0;
z-index: 100000;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
transition: opacity 0.3s ease;
}
.bbt-warn-overlay.visible {
opacity: 1;
}
.bbt-warn-modal {
background: var(--bg-card, #1a1a2e);
border: 1px solid rgba(245, 158, 11, 0.3);
border-radius: 20px;
padding: 36px 32px 28px;
max-width: 520px;
width: 100%;
text-align: center;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(245, 158, 11, 0.08);
transform: translateY(20px);
transition: transform 0.3s ease;
}
.bbt-warn-overlay.visible .bbt-warn-modal {
transform: translateY(0);
}
.bbt-warn-icon {
font-size: 48px;
margin-bottom: 12px;
}
.bbt-warn-title {
font-size: 20px;
font-weight: 700;
color: #f59e0b;
margin: 0 0 4px 0;
}
.bbt-warn-date {
font-size: 12px;
color: var(--text-tertiary, #888);
margin-bottom: 20px;
}
.bbt-warn-message {
background: rgba(245, 158, 11, 0.06);
border: 1px solid rgba(245, 158, 11, 0.15);
border-radius: 12px;
padding: 16px 20px;
font-size: 14px;
line-height: 1.6;
color: var(--text-primary, #eee);
text-align: left;
max-height: 250px;
overflow-y: auto;
margin-bottom: 20px;
}
.bbt-warn-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.bbt-warn-notice {
font-size: 12px;
color: var(--text-tertiary, #888);
margin: 0;
line-height: 1.4;
}
.bbt-warn-ack-btn {
min-width: 200px;
font-size: 15px;
padding: 12px 32px;
font-weight: 600;
}
/* User status indicator in report detail */
.mod-user-status {
margin-bottom: 14px;
padding: 10px 14px;
border-radius: 10px;
font-size: 13px;
}
.mod-user-status-suspended {
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.mod-user-status-active {
background: rgba(34, 197, 94, 0.08);
border: 1px solid rgba(34, 197, 94, 0.2);
}
.mod-user-status-badge {
font-weight: 600;
margin-bottom: 2px;
}
.mod-user-status-details {
font-size: 12px;
color: var(--text-secondary);
}
/* User search result cards */
.mod-user-card {
background: var(--bg-secondary);
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
border: 1px solid var(--border);
}
.mod-user-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
/* Report statistics in user search */
.mod-user-report-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 12px 0;
}
@media (max-width: 600px) {
.mod-user-report-stats {
grid-template-columns: 1fr;
}
}
.mod-user-stat-box {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
border: 1px solid var(--border);
background: var(--bg-card);
}
.mod-user-stat-box:hover {
border-color: var(--primary);
background: rgba(99, 102, 241, 0.05);
}
.mod-user-stat-icon {
font-size: 20px;
flex-shrink: 0;
}
.mod-user-stat-info {
flex: 1;
min-width: 0;
}
.mod-user-stat-label {
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
}
.mod-user-stat-sublabel {
font-size: 10px;
color: var(--text-tertiary);
}
.mod-user-stat-numbers {
display: flex;
flex-direction: column;
align-items: flex-end;
flex-shrink: 0;
}
.mod-user-stat-total {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
}
.mod-user-stat-active {
font-size: 10px;
font-weight: 500;
color: #ef4444;
background: rgba(239, 68, 68, 0.1);
padding: 1px 6px;
border-radius: 4px;
}
.mod-user-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* Social-Tabs deaktiviert */
.dashboard-tab.social-tab-suspended {
opacity: 0.5;
cursor: not-allowed;
position: relative;
}
.dashboard-tab.social-tab-suspended::after {
content: '';
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: var(--danger);
border-radius: 50%;
}
.dashboard-tab.social-tab-locked {
opacity: 0.5;
cursor: not-allowed;
position: relative;
}
.dashboard-tab.social-tab-locked::after {
content: 'UPGRADE';
position: absolute;
top: -6px;
right: -10px;
font-size: 8px;
font-weight: 800;
letter-spacing: 0.06em;
line-height: 1;
padding: 3px 5px;
border-radius: 4px;
color: #fff;
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
box-shadow: 0 1px 4px rgba(8, 145, 178, 0.4);
z-index: 1;
overflow: hidden;
}
.dashboard-tab.social-tab-locked::before {
content: '';
position: absolute;
top: -6px;
right: -10px;
width: 46px;
height: 14px;
border-radius: 4px;
z-index: 2;
pointer-events: none;
background: linear-gradient(105deg,
transparent 0%, transparent 35%,
rgba(255,255,255,0.35) 45%, rgba(255,255,255,0.35) 55%,
transparent 65%, transparent 100%);
background-size: 200% 100%;
animation: socialLockedShimmer 3s ease-in-out infinite;
}
@keyframes socialLockedShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Social Upgrade Modal */
.social-upgrade-content {
text-align: center;
padding: 40px 32px 32px;
}
.social-upgrade-icon-wrap {
width: 72px;
height: 72px;
margin: 0 auto 20px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(8, 145, 178, 0.15) 0%, rgba(20, 184, 166, 0.15) 100%);
display: flex;
align-items: center;
justify-content: center;
animation: socialUpgradePulse 2s ease-in-out infinite;
}
.social-upgrade-icon-wrap svg {
width: 36px;
height: 36px;
color: var(--primary);
}
@keyframes socialUpgradePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.2); }
50% { box-shadow: 0 0 0 12px rgba(8, 145, 178, 0); }
}
.social-upgrade-title {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 10px 0;
}
.social-upgrade-subtitle {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0 0 24px 0;
}
.social-upgrade-features {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 28px;
text-align: left;
}
.social-upgrade-feature {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--bg-secondary);
border-radius: 10px;
border: 1px solid var(--border);
font-size: 14px;
color: var(--text-primary);
transition: var(--transition-fast);
}
.social-upgrade-feature:hover {
border-color: var(--primary);
background: rgba(8, 145, 178, 0.05);
}
.social-upgrade-feature svg {
width: 18px;
height: 18px;
color: var(--primary);
flex-shrink: 0;
}
.social-upgrade-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.social-upgrade-actions .btn-upgrade {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 15px 28px;
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
color: white;
font-size: 16px;
font-weight: 600;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
box-shadow: 0 4px 16px rgba(8, 145, 178, 0.35);
letter-spacing: 0.01em;
}
.social-upgrade-actions .btn-upgrade:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(8, 145, 178, 0.45);
}
.social-upgrade-actions .btn-upgrade:active {
transform: translateY(0);
}
.social-upgrade-actions .btn-upgrade svg {
width: 20px;
height: 20px;
}
.social-upgrade-actions .btn-dismiss {
padding: 12px 24px;
background: transparent;
color: var(--text-muted);
font-size: 14px;
font-weight: 500;
border: none;
cursor: pointer;
transition: color 0.2s ease;
}
.social-upgrade-actions .btn-dismiss:hover {
color: var(--text-secondary);
}
.social-upgrade-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
background: linear-gradient(135deg, rgba(8, 145, 178, 0.12) 0%, rgba(20, 184, 166, 0.12) 100%);
border: 1px solid rgba(8, 145, 178, 0.25);
border-radius: 20px;
font-size: 12px;
font-weight: 600;
color: var(--primary);
margin-bottom: 16px;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.modal-overlay.show {
display: flex;
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal {
background: var(--bg-card);
border-radius: 20px;
border: 1px solid var(--border);
width: 90%;
height: auto;
max-width: 500px;
max-height: 90vh;
overflow: auto;
box-shadow: var(--shadow-xl), 0 0 60px rgba(0, 0, 0, 0.5);
animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: scale(0.95) translateY(-20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.modal-header {
padding: 24px 28px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(180deg, rgba(8, 145, 178, 0.06) 0%, transparent 100%);
}
.modal-title {
font-size: 20px;
font-weight: 700;
color: var(--primary);
}
.btn-close {
background: var(--bg-secondary);
border: 1px solid var(--border);
color: var(--text-muted);
font-size: 20px;
cursor: pointer;
padding: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
transition: var(--transition-fast);
}
.btn-close:hover {
background: rgba(239, 68, 68, 0.1);
border-color: var(--error);
color: var(--error);
transform: rotate(90deg);
}
.modal-body {
padding: 28px;
}
/* Konfliktfix mit Bootstrap:
- Bootstrap setzt .modal standardmäßig auf display:none;
- unsere Modale werden über .modal-overlay.show gesteuert.
Hier sorgen wir dafür, dass NUR Modale innerhalb unseres Overlays sichtbar werden. */
.modal-overlay.show .modal {
display: block !important;
position: static;
margin-top: 8vh;
margin-bottom: 8vh;
}
/* Hilfe-Admin-Modal: ebenfalls sichtbar machen, wenn nicht "hidden" */
#helpAdminModal.modal {
display: block;
}
/* ==================== ACCOUNT MODAL - ENTERPRISE DESIGN ==================== */
#accountModalOverlay .modal {
max-width: 720px;
width: 95%;
border-radius: 20px;
overflow: hidden;
background: var(--bg-card);
border: none;
position: relative;
box-shadow: 0 25px 80px -12px rgba(0, 0, 0, 0.5);
outline: 1px solid rgba(0, 0, 0, 0.3);
outline-offset: -1px;
display: flex;
flex-direction: column;
}
/* Account-Panel höhenfixieren: Inhalt scrollt intern, Modal wächst nicht nach unten */
#accountModalOverlay.modal-overlay.show .modal {
display: flex !important;
height: min(860px, calc(100dvh - 10vh));
max-height: calc(100dvh - 10vh);
margin-top: 5vh;
margin-bottom: 5vh;
}
#accountModalOverlay .modal-header {
background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
padding: 24px 28px;
border-bottom: none;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
}
#accountModalOverlay .modal-header::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
pointer-events: none;
}
#accountModalOverlay .modal-title {
color: white;
font-size: 20px;
font-weight: 600;
position: relative;
z-index: 1;
letter-spacing: -0.3px;
}
#accountModalOverlay .btn-close {
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.15);
color: white;
width: 32px;
height: 32px;
border-radius: 8px;
position: relative;
z-index: 1;
transition: all 0.2s ease;
font-size: 18px;
line-height: 1;
}
#accountModalOverlay .btn-close:hover {
background: rgba(255,255,255,0.2);
}
.modal-header-actions {
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 1;
}
.btn-logout-modal {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
color: white;
font-size: 13px;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-logout-modal svg {
width: 16px;
height: 16px;
stroke: white;
}
.btn-logout-modal:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.35);
transform: translateY(-1px);
}
.btn-logout-modal:active {
transform: translateY(0);
}
.btn-logout-modal.danger {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.5);
color: #ffe9e9;
}
.btn-logout-modal.danger svg {
stroke: currentColor;
}
.btn-logout-modal.danger:hover {
background: rgba(239, 68, 68, 0.3);
border-color: rgba(239, 68, 68, 0.65);
}
.btn-logout-modal.danger {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.5);
color: #ffe9e9;
}
.btn-logout-modal.danger svg {
stroke: currentColor;
}
.btn-logout-modal.danger:hover {
background: rgba(239, 68, 68, 0.3);
border-color: rgba(239, 68, 68, 0.65);
}
#accountModalOverlay .modal-body {
padding: 0;
background: var(--bg-card);
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* Account Content Container */
.account-content {
display: flex;
flex-direction: column;
gap: 0;
}
/* Account Hero Section (Plan Info) */
.account-hero {
background: var(--bg-secondary);
padding: 20px 24px;
border-bottom: 1px solid var(--border);
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
}
.account-plan-row {
display: contents;
}
.account-plan-info {
display: flex;
align-items: center;
gap: 14px;
}
.account-avatar {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
font-size: 18px;
font-weight: 700;
color: white;
letter-spacing: 0.5px;
text-transform: uppercase;
flex-shrink: 0;
}
.account-plan-details {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.account-plan-details h4 {
font-size: 17px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.account-plan-name {
font-size: 13px;
font-weight: 500;
color: var(--primary);
display: inline-flex;
align-items: center;
gap: 6px;
}
.account-plan-name::before {
content: '';
width: 5px;
height: 5px;
background: var(--primary);
border-radius: 50%;
}
.account-plan-period {
font-size: 11px;
color: var(--text-muted);
margin-top: 1px;
}
.account-hero-actions {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.account-hero-actions .btn-secondary {
background: white;
border: 1px solid rgba(0, 0, 0, 0.1);
color: var(--text-primary);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.account-hero-actions .btn-secondary:hover {
background: #f8f9fa;
border-color: rgba(0, 0, 0, 0.15);
color: var(--text-primary);
}
body.dashboard-theme-dark .account-hero-actions .btn-secondary {
background: #1a1a1a;
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--text-primary);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
body.dashboard-theme-dark .account-hero-actions .btn-secondary:hover {
background: #242424;
border-color: rgba(255, 255, 255, 0.25);
color: var(--text-primary);
}
.account-status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 600;
}
.account-status-badge.active {
background: rgba(16, 185, 129, 0.15);
color: var(--success);
}
.account-status-badge.inactive {
background: rgba(239, 68, 68, 0.12);
color: var(--error);
}
.account-status-badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.account-meta {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 16px;
padding-top: 12px;
border-top: 1px solid var(--border);
margin-top: 4px;
}
.account-meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-secondary);
}
.account-meta-item svg {
width: 14px;
height: 14px;
color: var(--text-muted);
}
/* Account Sections - Stacked Layout */
.account-sections-grid {
display: flex;
flex-direction: column;
}
.account-section {
padding: 20px 24px;
border-bottom: 1px solid var(--border);
}
.account-section:last-child {
border-bottom: none;
}
.account-section.full-width {
border-right: none;
}
.account-section-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.account-section-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, rgba(8, 145, 178, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.account-section-icon svg {
width: 16px;
height: 16px;
color: var(--primary);
}
.account-section-title {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Quota Cards - Compact Grid */
.account-quotas-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.account-quota-card {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
transition: all 0.2s ease;
}
.account-quota-card:hover {
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(8, 145, 178, 0.1);
}
.account-quota-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.account-quota-info h5 {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 2px 0;
}
.account-quota-info span {
font-size: 10px;
color: var(--text-muted);
}
.account-quota-stats {
text-align: right;
}
.account-quota-stats .quota-remaining {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
line-height: 1;
}
.account-quota-stats .quota-limit {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
}
.account-quota-stats .quota-used {
font-size: 10px;
color: var(--text-secondary);
margin-top: 2px;
}
/* Quota Progress Bar */
.account-quota-progress {
height: 4px;
background: var(--bg-tertiary);
border-radius: 2px;
overflow: hidden;
}
.account-quota-progress-bar {
height: 100%;
border-radius: 2px;
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.account-quota-progress-bar.low {
background: linear-gradient(90deg, var(--success) 0%, #34d399 100%);
}
.account-quota-progress-bar.medium {
background: linear-gradient(90deg, var(--warning) 0%, #fbbf24 100%);
}
.account-quota-progress-bar.high {
background: linear-gradient(90deg, var(--error) 0%, #f87171 100%);
}
/* 2FA / Berichtigung Section - Horizontal Card Layout */
.account-2fa-grid {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.account-rectify-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.account-2fa-grid.two-cols .account-2fa-card {
min-width: 140px;
}
.account-2fa-card {
flex: 1 1 0;
min-width: 120px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.account-2fa-card:hover {
border-color: var(--primary);
background: var(--bg-tertiary);
}
.account-2fa-card.danger:hover {
border-color: var(--error);
}
.account-2fa-card-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, rgba(8, 145, 178, 0.12) 0%, rgba(6, 182, 212, 0.12) 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.account-2fa-card.danger .account-2fa-card-icon {
background: rgba(239, 68, 68, 0.1);
}
.account-2fa-card-icon svg {
width: 18px;
height: 18px;
color: var(--primary);
}
.account-2fa-card.danger .account-2fa-card-icon svg {
color: var(--error);
}
.account-2fa-card-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.account-2fa-card-title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1px;
}
.account-2fa-card-desc {
font-size: 11px;
color: var(--text-muted);
line-height: 1.4;
word-break: break-all;
overflow-wrap: anywhere;
}
.account-2fa-status {
margin-top: 12px;
padding: 10px 14px;
background: var(--bg-secondary);
border-radius: 10px;
font-size: 12px;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 8px;
}
.account-2fa-status::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--text-muted);
flex-shrink: 0;
}
/* Features Grid */
.account-features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.account-feature-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 10px;
transition: all 0.2s ease;
}
.account-feature-item:hover {
border-color: var(--primary);
}
.account-feature-name {
font-size: 12px;
color: var(--text-primary);
font-weight: 500;
}
.account-feature-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 5px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.account-feature-status.active {
background: rgba(16, 185, 129, 0.12);
color: var(--success);
}
.account-feature-status.inactive {
background: var(--bg-tertiary);
color: var(--text-muted);
}
/* Account Warning Banner */
.account-warning-banner {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
background: rgba(239, 68, 68, 0.06);
border-left: 3px solid var(--error);
margin: 16px 24px;
border-radius: 0 10px 10px 0;
}
.account-warning-banner svg {
width: 18px;
height: 18px;
color: var(--error);
flex-shrink: 0;
margin-top: 1px;
}
.account-warning-banner p {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
/* Account Loading State */
.account-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 28px;
gap: 16px;
}
.account-loading-spinner {
width: 36px;
height: 36px;
border: 3px solid var(--border);
border-top-color: var(--primary);
border-radius: 50%;
animation: accountSpin 0.8s linear infinite;
}
@keyframes accountSpin {
to { transform: rotate(360deg); }
}
.account-loading span {
font-size: 13px;
color: var(--text-secondary);
}
/* Account Error State */
.account-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 28px;
text-align: center;
gap: 12px;
}
.account-error svg {
width: 44px;
height: 44px;
color: var(--error);
}
.account-error p {
font-size: 13px;
color: var(--text-secondary);
margin: 0;
}
/* Responsive Adjustments */
@media (max-width: 700px) {
#accountModalOverlay .modal {
max-width: 100%;
margin: 12px;
border-radius: 16px;
}
#accountModalOverlay.modal-overlay.show .modal {
height: calc(100dvh - 24px);
max-height: calc(100dvh - 24px);
margin-top: 12px;
margin-bottom: 12px;
}
.account-quotas-grid {
grid-template-columns: 1fr;
}
.account-2fa-grid {
flex-direction: column;
}
.account-rectify-grid {
grid-template-columns: 1fr;
}
.account-features-grid {
grid-template-columns: repeat(2, 1fr);
}
.account-hero {
grid-template-columns: 1fr;
gap: 12px;
}
.account-hero-actions {
justify-content: flex-start;
}
}
@media (max-width: 480px) {
.account-hero,
.account-section {
padding: 16px;
}
.account-features-grid {
grid-template-columns: 1fr;
}
.account-meta {
flex-direction: column;
gap: 8px;
}
}
/* ==================== END ACCOUNT MODAL ==================== */
/* ==================== QUOTA EXHAUSTED MODAL ==================== */
#quotaExhaustedModal {
z-index: 1100;
}
#quotaExhaustedModal .modal {
max-width: 440px;
border-radius: 24px;
overflow: hidden;
background: var(--bg-card);
border: none;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
text-align: center;
}
.quota-exhausted-content {
padding: 40px 32px;
}
.quota-exhausted-icon {
width: 72px;
height: 72px;
margin: 0 auto 24px;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(251, 146, 60, 0.15) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: quotaIconPulse 2s ease-in-out infinite;
}
@keyframes quotaIconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.quota-exhausted-icon svg {
width: 36px;
height: 36px;
color: var(--error);
}
.quota-exhausted-title {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 12px 0;
}
.quota-exhausted-message {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0 0 8px 0;
}
.quota-exhausted-reason {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: rgba(239, 68, 68, 0.1);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: var(--error);
margin-bottom: 28px;
}
.quota-exhausted-reason svg {
width: 14px;
height: 14px;
}
.quota-exhausted-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.quota-exhausted-actions .btn-upgrade {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
color: white;
font-size: 15px;
font-weight: 600;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}
.quota-exhausted-actions .btn-upgrade:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(8, 145, 178, 0.4);
}
.quota-exhausted-actions .btn-upgrade svg {
width: 18px;
height: 18px;
}
.quota-exhausted-actions .btn-dismiss {
padding: 12px 24px;
background: transparent;
color: var(--text-muted);
font-size: 14px;
font-weight: 500;
border: none;
cursor: pointer;
transition: color 0.2s ease;
}
.quota-exhausted-actions .btn-dismiss:hover {
color: var(--text-secondary);
}
.quota-exhausted-info {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.quota-exhausted-info p {
font-size: 13px;
color: var(--text-muted);
margin: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.quota-exhausted-info svg {
width: 14px;
height: 14px;
}
/* ==================== END QUOTA EXHAUSTED MODAL ==================== */
/* ==================== STRATEGY VALIDATION MODAL ==================== */
/* Erscheint, wenn Pre-Flight-Check beim Backtest-Start fehlschlägt
(fehlender Zeitraum, keine LegGroup, kein Trigger, ...) */
#strategyValidationModal {
z-index: 1100;
}
#strategyValidationModal .modal {
max-width: 460px;
border-radius: 24px;
overflow: hidden;
background: var(--bg-card);
border: none;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
text-align: center;
}
.strategy-validation-content {
padding: 40px 32px 32px;
}
.strategy-validation-icon {
width: 72px;
height: 72px;
margin: 0 auto 24px;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(251, 146, 60, 0.18) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: strategyValidationIconPulse 2s ease-in-out infinite;
}
@keyframes strategyValidationIconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.strategy-validation-icon svg {
width: 36px;
height: 36px;
color: #f59e0b;
}
.strategy-validation-title {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 12px 0;
}
.strategy-validation-reason {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0 0 20px 0;
}
.strategy-validation-action {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(20, 184, 166, 0.08) 100%);
border: 1px solid rgba(14, 165, 233, 0.18);
border-radius: 12px;
text-align: left;
margin-bottom: 24px;
}
.strategy-validation-action-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(14, 165, 233, 0.14);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary, #0ea5e9);
}
.strategy-validation-action-icon svg {
width: 16px;
height: 16px;
}
.strategy-validation-action > span {
font-size: 14px;
line-height: 1.5;
color: var(--text-primary);
font-weight: 500;
}
/* Multi-Issue-Liste: wird gerendert, wenn mehrere Probleme gleichzeitig
gefunden werden. Jeder Eintrag sieht aus wie eine kompakte Variante
der Single-Action-Box (Haken-Icon links, Titel + Handlung rechts). */
.strategy-validation-issues {
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
margin: 0 0 24px 0;
}
.strategy-validation-issue {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(20, 184, 166, 0.08) 100%);
border: 1px solid rgba(14, 165, 233, 0.18);
border-radius: 12px;
}
.strategy-validation-issue-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(14, 165, 233, 0.14);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary, #0ea5e9);
margin-top: 1px;
}
.strategy-validation-issue-icon svg {
width: 15px;
height: 15px;
}
.strategy-validation-issue-body {
flex: 1 1 auto;
min-width: 0;
}
.strategy-validation-issue-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.35;
margin: 0 0 3px 0;
}
.strategy-validation-issue-action {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
.strategy-validation-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.strategy-validation-actions .btn-dismiss {
padding: 14px 28px;
background: linear-gradient(135deg, var(--primary, #0ea5e9) 0%, var(--accent, #14b8a6) 100%);
color: #fff;
font-size: 15px;
font-weight: 600;
border: none;
border-radius: 12px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 12px rgba(8, 145, 178, 0.28);
}
.strategy-validation-actions .btn-dismiss:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(8, 145, 178, 0.38);
}
.strategy-validation-info {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--border);
}
.strategy-validation-info p {
font-size: 12.5px;
color: var(--text-muted);
margin: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
line-height: 1.4;
}
.strategy-validation-info svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
@media (max-width: 480px) {
.strategy-validation-content {
padding: 32px 22px 24px;
}
.strategy-validation-title {
font-size: 19px;
}
.strategy-validation-reason {
font-size: 14px;
}
.strategy-validation-action {
padding: 12px 14px;
}
}
/* ==================== END STRATEGY VALIDATION MODAL ==================== */
/* ==================== CONFIRM MODAL - COMPACT DESIGN ==================== */
#confirmModal {
z-index: 1100;
}
#confirmModal .modal {
max-width: 320px;
border-radius: 16px;
overflow: hidden;
background: var(--bg-card);
border: none;
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.2);
}
.confirm-modal-content {
padding: 28px 28px 24px;
}
.confirm-modal-icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.confirm-modal-icon svg { width: 22px; height: 22px; }
.confirm-modal-icon.danger {
background: rgba(239,68,68,0.08);
color: #ef4444;
border: 1px solid rgba(239,68,68,0.15);
}
.confirm-modal-icon.default {
background: rgba(14,165,233,0.08);
color: #0ea5e9;
border: 1px solid rgba(14,165,233,0.15);
}
.confirm-modal-message {
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 8px 0;
text-align: center;
letter-spacing: -0.01em;
}
.confirm-modal-detail {
font-size: 0.82rem;
color: var(--text-secondary);
margin: 0 0 24px 0;
max-height: 40vh;
overflow-y: auto;
text-align: center;
white-space: pre-line;
line-height: 1.6;
}
.confirm-modal-actions {
display: flex;
gap: 10px;
}
.confirm-modal-actions button {
flex: 1;
padding: 10px 18px;
font-size: 0.82rem;
font-weight: 600;
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
border: none;
}
.confirm-modal-actions .btn-confirm {
background: var(--success);
color: white;
}
.confirm-modal-actions .btn-confirm:hover {
filter: brightness(1.08);
transform: translateY(-1px);
}
.confirm-modal-actions .btn-confirm.danger {
background: #ef4444;
}
.confirm-modal-actions .btn-confirm.danger:hover {
background: #dc2626;
}
.confirm-modal-actions .btn-cancel {
background: var(--error);
color: white;
}
.confirm-modal-actions .btn-cancel:hover {
background: #dc2626;
transform: translateY(-1px);
}
.confirm-modal-actions .btn-cancel.neutral {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
}
.confirm-modal-actions .btn-cancel.neutral:hover {
background: var(--bg-secondary);
color: var(--text-primary);
}
/* ==================== END CONFIRM MODAL ==================== */
/* ==================== PROMPT MODAL ====================
Eigener Ersatz für das native window.prompt(), das in einigen
Browsern (z.B. Safari macOS) bei wiederholter Nutzung still
unterdrückt wird und dann gar nichts mehr passiert. Reused das
Layout / die Buttons des Confirm-Modals und ergänzt ein Input-Feld. */
#promptModal {
z-index: 1300;
}
#promptModal .modal {
max-width: 420px;
border-radius: 16px;
overflow: hidden;
background: var(--bg-card);
border: none;
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.2);
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.prompt-modal-input {
width: 100%;
box-sizing: border-box;
padding: 11px 14px;
margin: 0 0 22px 0;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text-primary);
font-size: 14px;
line-height: 1.4;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
-webkit-appearance: none;
appearance: none;
}
.prompt-modal-input::placeholder { color: var(--text-secondary); opacity: 0.7; }
.prompt-modal-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
background: var(--bg-card);
}
/* ==================== END PROMPT MODAL ==================== */
/* ==================== PASSWORD CHANGE MODAL ==================== */
#passwordChangeModal { z-index: 1100; }
#passwordChangeModal .modal {
max-width: 380px;
border-radius: 16px;
overflow: hidden;
background: var(--bg-card);
border: none;
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.2);
}
.pw-modal-content { padding: 28px 28px 24px; }
.pw-modal-icon {
width: 44px; height: 44px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
background: rgba(14,165,233,0.08);
color: #0ea5e9;
border: 1px solid rgba(14,165,233,0.15);
}
.pw-modal-icon svg { width: 22px; height: 22px; }
.pw-modal-title {
font-size: 1rem; font-weight: 700;
color: var(--text-primary);
margin: 0 0 4px; text-align: center;
letter-spacing: -0.01em;
}
.pw-modal-subtitle {
font-size: 0.78rem; color: var(--text-secondary);
margin: 0 0 20px; text-align: center; line-height: 1.5;
}
.pw-modal-field { margin-bottom: 14px; }
.pw-modal-field:last-of-type { margin-bottom: 20px; }
.pw-modal-field label {
display: block; font-size: 0.72rem; font-weight: 600;
color: var(--text-secondary); margin-bottom: 5px;
text-transform: uppercase; letter-spacing: 0.04em;
}
.pw-modal-field input {
width: 100%; padding: 10px 14px;
font-size: 0.88rem; border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg-secondary, #f8fafc);
color: var(--text-primary);
transition: border-color 0.15s, box-shadow 0.15s;
box-sizing: border-box;
}
.pw-modal-field input:focus {
outline: none;
border-color: var(--accent-primary, #0ea5e9);
box-shadow: 0 0 0 3px rgba(14,165,233,0.1);
}
.pw-modal-field input.has-error {
border-color: var(--error, #ef4444);
box-shadow: 0 0 0 3px rgba(239,68,68,0.08);
}
.pw-modal-error {
font-size: 0.75rem; color: var(--error, #ef4444);
text-align: center; margin: 0 0 14px; min-height: 1.1em;
}
.pw-modal-actions { display: flex; gap: 10px; }
.pw-modal-actions button {
flex: 1; padding: 10px 18px;
font-size: 0.82rem; font-weight: 600;
border-radius: 10px; cursor: pointer;
transition: all 0.15s ease; border: none;
}
.pw-modal-actions .pw-btn-cancel {
background: transparent; color: var(--text-secondary);
border: 1px solid var(--border);
}
.pw-modal-actions .pw-btn-cancel:hover {
background: var(--bg-secondary); color: var(--text-primary);
}
.pw-modal-actions .pw-btn-submit {
background: var(--accent-primary, #0ea5e9); color: white;
}
.pw-modal-actions .pw-btn-submit:hover {
filter: brightness(1.08); transform: translateY(-1px);
}
.pw-modal-actions .pw-btn-submit:disabled {
opacity: 0.5; cursor: not-allowed; transform: none; filter: none;
}
/* ==================== END PASSWORD CHANGE MODAL ==================== */
/* ==================== VERIFICATION ASSIST MODAL ==================== */
#verificationAssistModal { z-index: 1100; }
#verificationAssistModal .modal {
max-width: 430px;
border-radius: 18px;
overflow: hidden;
background: var(--bg-card);
border: none;
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.2);
}
.verification-assist-content {
padding: 28px 28px 24px;
}
.verification-assist-icon {
width: 46px;
height: 46px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
background: rgba(14,165,233,0.08);
color: #0ea5e9;
border: 1px solid rgba(14,165,233,0.15);
}
.verification-assist-icon svg {
width: 22px;
height: 22px;
}
.verification-assist-title {
margin: 0 0 6px;
text-align: center;
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.verification-assist-subtitle {
margin: 0 0 12px;
text-align: center;
font-size: 0.82rem;
color: var(--text-secondary);
line-height: 1.55;
}
.verification-assist-error {
min-height: 20px;
margin: 0 0 16px;
text-align: left;
font-size: 0.8rem;
color: var(--error);
}
.verification-assist-options {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.verification-assist-option {
width: 100%;
padding: 16px 18px;
border-radius: 14px;
border: 1px solid var(--border);
background: var(--bg-secondary);
text-align: left;
cursor: pointer;
transition: all 0.15s ease;
}
.verification-assist-option:hover {
transform: translateY(-1px);
border-color: rgba(14, 165, 233, 0.35);
box-shadow: 0 12px 24px -18px rgba(14, 165, 233, 0.7);
}
.verification-assist-option:disabled {
opacity: 0.6;
cursor: wait;
transform: none;
box-shadow: none;
}
.verification-assist-option-label {
display: block;
margin-bottom: 4px;
font-size: 0.92rem;
font-weight: 700;
color: var(--text-primary);
}
.verification-assist-option-detail {
display: block;
font-size: 0.8rem;
color: var(--text-secondary);
line-height: 1.5;
}
.verification-assist-field {
margin-bottom: 18px;
}
.verification-assist-field label {
display: block;
margin-bottom: 6px;
font-size: 0.72rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.verification-assist-field input {
width: 100%;
padding: 10px 14px;
font-size: 0.88rem;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg-secondary);
color: var(--text-primary);
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.verification-assist-field input:focus {
border-color: var(--accent-primary, #0ea5e9);
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}
.verification-assist-field input.has-error {
border-color: var(--error);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.verification-assist-actions {
display: flex;
gap: 10px;
}
.verification-assist-actions button {
flex: 1;
padding: 10px 16px;
border-radius: 10px;
border: none;
cursor: pointer;
font-size: 0.82rem;
font-weight: 600;
transition: all 0.15s ease;
}
.verification-assist-btn-secondary {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border) !important;
}
.verification-assist-btn-secondary:hover {
background: var(--bg-secondary);
color: var(--text-primary);
transform: translateY(-1px);
}
.verification-assist-btn-primary {
background: var(--accent-primary, #0ea5e9);
color: white;
}
.verification-assist-btn-primary:hover {
filter: brightness(1.08);
transform: translateY(-1px);
}
.verification-assist-btn-primary:disabled,
.verification-assist-btn-secondary:disabled {
opacity: 0.6;
cursor: wait;
transform: none;
filter: none;
}
/* ==================== END VERIFICATION ASSIST MODAL ==================== */
/* ==================== PASSWORD STRENGTH INDICATOR ==================== */
.pw-strength-wrap {
margin-top: 8px;
}
.pw-strength-bar {
height: 5px;
border-radius: 3px;
background: var(--border, #e2e8f0);
overflow: hidden;
margin-bottom: 6px;
}
.pw-strength-bar-fill {
height: 100%;
width: 0%;
border-radius: 3px;
transition: width 0.3s ease, background 0.3s ease;
}
.pw-strength-bar-fill[data-level="0"] { width: 0%; background: transparent; }
.pw-strength-bar-fill[data-level="1"] { width: 25%; background: #ef4444; }
.pw-strength-bar-fill[data-level="2"] { width: 50%; background: #f97316; }
.pw-strength-bar-fill[data-level="3"] { width: 75%; background: #f59e0b; }
.pw-strength-bar-fill[data-level="4"] { width: 100%; background: #16a34a; }
.pw-strength-label {
font-size: 0.7rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 8px;
}
.pw-strength-label[data-level="1"] { color: #ef4444; }
.pw-strength-label[data-level="2"] { color: #f97316; }
.pw-strength-label[data-level="3"] { color: #f59e0b; }
.pw-strength-label[data-level="4"] { color: #16a34a; }
.pw-strength-rules {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px 12px;
}
.pw-strength-rules li {
font-size: 0.68rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 5px;
line-height: 1.4;
}
.pw-strength-rules li .pw-rule-icon {
flex-shrink: 0;
width: 13px;
height: 13px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
font-weight: 700;
transition: all 0.2s ease;
}
.pw-strength-rules li.pw-rule-pass .pw-rule-icon {
background: #22c55e;
color: #fff;
}
.pw-strength-rules li.pw-rule-fail .pw-rule-icon {
background: var(--border, #e2e8f0);
color: var(--text-secondary);
}
/* ==================== END PASSWORD STRENGTH INDICATOR ==================== */
.panel {
background: var(--bg-card);
border-radius: 20px;
border: 1px solid var(--border);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
/* Dashboard darf "floating" Elemente über den Panel-Rand hinaus anzeigen */
#dashboardPanel {
overflow: visible;
}
/* Header als Container-Query-Kontext: Die Kopfzeile (Command-Hub + Button-Grid) soll
sich nach ihrer TATSAECHLICHEN Breite verschlanken, nicht nach der Viewport-Breite.
Wichtig, weil der Help-Mode #dashboardHome um 438px verschmaelert, OHNE dass sich der
Viewport aendert – klassische @media-Breakpoints wuerden dann nicht greifen und die
Buttons/Karten wuerden in eine neue Zeile springen. */
#dashboardPanel .panel-header,
#portfoliosSection .panel-header {
overflow: visible;
container-type: inline-size;
container-name: bbtPanelHeader;
}
.panel-header {
padding: 20px 28px 10px;
text-align: center;
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, rgba(8, 145, 178, 0.06) 0%, transparent 100%);
position: relative;
}
/* Dashboard: Header-Grid (Button links | Titel zentriert | Suche rechts) */
#dashboardPanel .panel-header .dashboard-panel-header-grid,
#portfoliosSection .panel-header .dashboard-panel-header-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-areas:
"add title search"
"subtitle subtitle subtitle";
align-items: center;
column-gap: 12px;
row-gap: 8px;
margin: 0;
text-align: initial;
}
#dashboardPanel .panel-header .dashboard-panel-header-grid > #btnAddStrategy,
#portfoliosSection .panel-header .dashboard-panel-header-grid > #btnAddPortfolio {
grid-area: add;
justify-self: start;
grid-row: 1 / -1;
align-self: end;
margin-bottom: 10px;
}
#dashboardPanel .panel-header .dashboard-panel-header-grid > #btnAddFolder {
grid-area: add;
justify-self: start;
grid-row: 1 / -1;
align-self: end;
margin-bottom: 10px;
margin-left: 46px;
}
#dashboardPanel .panel-header .dashboard-panel-header-grid > h1,
#portfoliosSection .panel-header .dashboard-panel-header-grid > h1 {
grid-area: title;
justify-self: center;
margin: 0;
text-align: center;
}
#dashboardPanel .panel-header .dashboard-panel-header-grid > .strategy-search,
#portfoliosSection .panel-header .dashboard-panel-header-grid > .strategy-search {
grid-area: search;
justify-self: end;
}
#dashboardPanel .panel-header .dashboard-panel-header-grid > .bbt-search-archive-row {
grid-area: search;
justify-self: end;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
/* Vertraglich vorgeschriebene Quellenangabe (AlgoSeek & ThetaData): dezent, aber
gut lesbar. Sitzt als eigene Zeile knapp ueber dem Panel-Bereich (ausserhalb der
Panel-Card) und gilt damit fuer alle Tabs gleichermassen. */
.bbt-data-source-banner {
text-align: right;
font-size: 12px;
line-height: 1.2;
letter-spacing: .2px;
color: var(--text-secondary, #64748b);
padding: 0 4px 8px;
user-select: none;
}
@media (max-width: 480px) {
.bbt-data-source-banner {
text-align: left;
padding: 0 2px 6px;
}
}
#dashboardPanel .panel-header .dashboard-panel-header-grid > .subtitle,
#portfoliosSection .panel-header .dashboard-panel-header-grid > .subtitle {
grid-area: subtitle;
margin: 0;
text-align: center;
}
#dashboardPanel .panel-header .dashboard-panel-header-grid > .bbt-view-toggle,
#portfoliosSection .panel-header .dashboard-panel-header-grid > .bbt-view-toggle {
grid-area: subtitle;
justify-self: center;
}
/* Responsive: Wenn's eng wird, sauber umbrechen. Container Query (Header-Breite) statt
Viewport, damit das Stapeln auch im Help-Mode (438px schmaler) greift. */
@container bbtPanelHeader (max-width: 720px) {
#dashboardPanel .panel-header .dashboard-panel-header-grid,
#portfoliosSection .panel-header .dashboard-panel-header-grid {
grid-template-columns: 1fr;
grid-template-areas:
"title"
"subtitle"
"search"
"add";
justify-items: center;
row-gap: 10px;
}
#dashboardPanel .panel-header .dashboard-panel-header-grid > #btnAddStrategy,
#portfoliosSection .panel-header .dashboard-panel-header-grid > #btnAddPortfolio {
justify-self: center;
}
#dashboardPanel .panel-header .dashboard-panel-header-grid > #btnAddFolder {
justify-self: center;
margin-left: 46px;
}
#dashboardPanel .panel-header .dashboard-panel-header-grid > .strategy-search,
#portfoliosSection .panel-header .dashboard-panel-header-grid > .strategy-search {
justify-self: center;
}
#dashboardPanel .panel-header .dashboard-panel-header-grid > .bbt-search-archive-row {
justify-self: center;
width: 100%;
justify-content: center;
}
#dashboardPanel .panel-header .dashboard-panel-header-grid > .bbt-view-toggle,
#portfoliosSection .panel-header .dashboard-panel-header-grid > .bbt-view-toggle {
justify-self: center;
}
}
@media (max-width: 600px) {
.strategy-search input[type="search"] {
width: 100%;
min-width: 0;
font-size: 14px;
}
.strategy-search {
width: 100%;
padding: 8px 10px;
}
.strategies-grid {
gap: 12px !important;
margin-top: 12px !important;
}
.strategy-card {
padding: 14px !important;
border-radius: 12px !important;
min-height: 0 !important;
max-width: 100% !important;
}
.strategy-card-title {
font-size: 14px !important;
margin-bottom: 4px !important;
}
.strategy-card .strategy-symbol {
padding: 3px 8px !important;
font-size: 10px !important;
margin-top: 4px !important;
}
.strategy-card-preview {
margin-top: 10px !important;
padding: 8px 10px !important;
min-height: 0 !important;
}
.strategy-card-preview .sparkline-container {
width: 60px !important;
height: 28px !important;
}
.strategy-card-preview .strategy-stats {
gap: 2px 8px !important;
}
.strategy-card-preview .stat-label {
font-size: 10px !important;
}
.strategy-card-preview .stat-value {
font-size: 12px !important;
}
.strategy-card-info {
margin-top: 10px !important;
padding-top: 10px !important;
}
.strategy-card-info .info-item {
margin-bottom: 4px !important;
font-size: 11px !important;
}
.strategy-card-date {
font-size: 10px !important;
margin-top: 8px !important;
padding-top: 8px !important;
}
.strategy-card-actions {
gap: 4px !important;
}
.strategy-card-actions .btn-icon {
width: 28px !important;
height: 28px !important;
border-radius: 6px !important;
}
.strategy-card-actions .btn-icon svg {
width: 14px !important;
height: 14px !important;
}
.strategy-card-add {
min-height: 160px !important;
padding: 14px !important;
border-radius: 12px !important;
font-size: 12px !important;
max-width: 100% !important;
}
.strategy-card-add-icon {
width: 32px !important;
height: 32px !important;
}
.strategy-card-add-icon svg {
width: 18px !important;
height: 18px !important;
}
.panel-header {
padding: 14px 14px 10px;
}
.panel-header h1 {
font-size: 18px;
}
}
@media (max-width: 480px) {
.strategies-grid {
gap: 8px !important;
}
.strategy-card {
padding: 10px !important;
border-radius: 10px !important;
}
.strategy-card-title {
font-size: 13px !important;
}
.strategy-card-preview .sparkline-container {
width: 50px !important;
height: 24px !important;
}
.strategy-card-add {
min-height: 120px !important;
padding: 10px !important;
}
.panel-header h1 {
font-size: 16px;
}
}
/* ==================== VIEW TOGGLE (Cards / Liste) ==================== */
/* Toggle-Wrapper: kompakte Button-Gruppe */
.bbt-view-toggle {
display: inline-flex;
align-items: center;
gap: 0;
background: var(--bg-secondary, #f1f5f9);
border: 1px solid var(--border, #e2e8f0);
border-radius: 11.9px;
padding: 3.6px;
flex-shrink: 0;
}
.bbt-view-toggle-btn {
appearance: none;
background: transparent;
border: none;
padding: 8.3px 14.25px;
border-radius: 8.3px;
cursor: pointer;
color: var(--text-primary, #0f172a);
display: inline-flex;
align-items: center;
gap: 5.9px;
font-size: 15.4px;
font-weight: 600;
transition: all 0.18s ease;
line-height: 1;
}
.bbt-view-toggle-btn:hover {
background: var(--primary-glow, rgba(8, 145, 178, 0.12));
color: var(--primary, #0891b2);
}
.bbt-view-toggle-btn[aria-pressed="true"] {
background: var(--gradient-primary, linear-gradient(135deg, #0891b2, #14b8a6));
color: #ffffff;
box-shadow: 0 2px 8px var(--primary-glow, rgba(8, 145, 178, 0.3));
}
.bbt-view-toggle-btn[aria-pressed="true"]:hover {
color: #ffffff;
}
.bbt-view-toggle-btn svg {
width: 19px;
height: 19px;
flex-shrink: 0;
}
/* Dark-Mode Override */
body.dashboard-theme-dark .bbt-view-toggle {
background: var(--bg-secondary, #1a1a1a);
border-color: var(--border, rgba(255,255,255,0.1));
}
body.dashboard-theme-dark .bbt-view-toggle-btn:not([aria-pressed="true"]) {
color: var(--text-primary, #e5e7eb);
}
body.dashboard-theme-dark .bbt-view-toggle-btn:not([aria-pressed="true"]):hover {
background: rgba(20, 184, 166, 0.14);
color: var(--primary-light, #22d3ee);
}
body.dashboard-theme-dark .bbt-view-toggle-btn[aria-pressed="true"] {
box-shadow: 0 2px 10px rgba(14, 165, 233, 0.4);
}
/* ==================== ORDNER-ARCHIV ==================== */
/* Archiv-Button in der Toolbar (neben der Suchleiste) */
.bbt-archive-toggle {
appearance: none;
position: relative;
display: inline-flex;
align-items: center;
gap: 7px;
flex-shrink: 0;
padding: 9px 14px;
border-radius: 12px;
border: 1px solid var(--border, #e2e8f0);
background: var(--bg-secondary, #f1f5f9);
color: var(--text-primary, #0f172a);
font-size: 14.5px;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.bbt-archive-toggle svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.bbt-archive-toggle:hover {
background: rgba(245, 158, 11, 0.12);
border-color: rgba(245, 158, 11, 0.35);
color: #b45309;
}
.bbt-archive-toggle:active {
transform: translateY(1px);
}
.bbt-archive-toggle.has-items {
border-color: rgba(245, 158, 11, 0.7);
}
.bbt-archive-toggle.active {
background: linear-gradient(135deg, #f59e0b, #d97706);
border-color: transparent;
color: #ffffff;
box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35);
}
.bbt-archive-toggle-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: #f59e0b;
color: #ffffff;
font-size: 11px;
font-weight: 700;
line-height: 1;
}
.bbt-archive-toggle.active .bbt-archive-toggle-badge {
background: rgba(255, 255, 255, 0.92);
color: #b45309;
}
body.dashboard-theme-dark .bbt-archive-toggle {
background: var(--bg-secondary, #1a1a1a);
border-color: var(--border, rgba(255,255,255,0.1));
color: var(--text-primary, #e5e7eb);
}
body.dashboard-theme-dark .bbt-archive-toggle:hover {
color: #fbbf24;
border-color: rgba(251, 191, 36, 0.4);
background: rgba(251, 191, 36, 0.12);
}
body.dashboard-theme-dark .bbt-archive-toggle.has-items {
border-color: rgba(251, 191, 36, 0.7);
}
body.dashboard-theme-dark .bbt-archive-toggle.active {
color: #ffffff;
background: linear-gradient(135deg, #f59e0b, #d97706);
}
@media (max-width: 600px) {
.bbt-archive-toggle-label { display: none; }
.bbt-archive-toggle { padding: 9px 11px; }
}
/* Archiv-/Wiederherstellen-Buttons auf der Ordner-Card */
.strategy-folder-actions .btn-icon.bbt-folder-archive:hover {
background: rgba(245, 158, 11, 0.14);
color: #d97706;
}
/* Archivierte Ordner-Card (in der Archiv-Ansicht): Aktionen immer sichtbar */
.strategy-folder-actions-archived { opacity: 1 !important; }
.strategy-folder-card-archived {
border-style: dashed;
border-color: rgba(245, 158, 11, 0.4);
}
/* Animation: Ordner wird ins Archiv verschoben */
.strategy-card-wrapper.bbt-folder-archiving {
animation: bbtFolderArchiveOut 0.36s cubic-bezier(0.4, 0, 0.2, 1) forwards;
pointer-events: none;
}
@keyframes bbtFolderArchiveOut {
0% { opacity: 1; transform: scale(1) translateY(0); }
35% { opacity: 1; transform: scale(0.96) translateY(-4px); }
100% { opacity: 0; transform: scale(0.8) translateY(28px); }
}
/* Animation: Ordner wird aus dem Archiv geholt */
.strategy-card-wrapper.bbt-folder-restoring {
animation: bbtFolderRestoreOut 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards;
pointer-events: none;
}
@keyframes bbtFolderRestoreOut {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.85) translateY(-22px); }
}
/* Archiv-Overlay: zentriertes Modal, optisch an das Ordner-Modal angelehnt */
.bbt-archive-overlay {
position: fixed;
inset: 0;
z-index: 990;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 24px;
background: rgba(15, 23, 42, 0);
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.bbt-archive-overlay.bbt-archive-overlay-visible {
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
body.bbt-archive-open { overflow: hidden; }
/* Panel: gleiche Modal-Sprache wie der geöffnete Ordner, aber Archiv-Identität (Amber, gestrichelt) */
.bbt-archive-panel {
position: relative;
width: 94vw;
max-width: 1500px;
max-height: 85vh;
overflow-y: auto;
overscroll-behavior: contain;
border: 1.5px dashed rgba(245, 158, 11, 0.5);
border-radius: 16px;
box-shadow: 0 24px 80px rgba(0,0,0,0.25), 0 0 50px -10px rgba(245,158,11,0.18);
padding: 24px;
background:
linear-gradient(135deg, rgba(245,158,11,0.07) 0%, rgba(217,119,6,0.03) 50%, rgba(245,158,11,0.05) 100%),
var(--bg-primary, #ffffff);
opacity: 0;
transform: translateY(26px) scale(0.96);
transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1), transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.bbt-archive-overlay-visible .bbt-archive-panel {
opacity: 1;
transform: translateY(0) scale(1);
}
body.dashboard-theme-dark .bbt-archive-panel {
border-color: rgba(245, 158, 11, 0.45);
background:
linear-gradient(135deg, rgba(245,158,11,0.12) 0%, rgba(245,158,11,0.03) 50%, rgba(180,83,9,0.08) 100%),
var(--bg-primary, #0f1117);
box-shadow: 0 24px 80px rgba(0,0,0,0.45), 0 0 60px -10px rgba(245,158,11,0.22);
}
.bbt-archive-header {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 18px;
margin-bottom: 22px;
border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}
.bbt-archive-header-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
background: linear-gradient(135deg, #f59e0b, #d97706);
box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
}
.bbt-archive-header-icon svg { width: 26px; height: 26px; }
.bbt-archive-header-text { flex: 1; min-width: 0; }
.bbt-archive-title-row {
display: flex;
align-items: center;
gap: 10px;
}
.bbt-archive-title {
margin: 0;
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.bbt-archive-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 999px;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #b45309;
background: rgba(245, 158, 11, 0.14);
border: 1px solid rgba(245, 158, 11, 0.35);
}
body.dashboard-theme-dark .bbt-archive-tag {
color: #fbbf24;
background: rgba(245, 158, 11, 0.16);
border-color: rgba(245, 158, 11, 0.4);
}
.bbt-archive-subtitle {
margin: 4px 0 0;
font-size: 0.92rem;
color: var(--text-secondary, #64748b);
font-weight: 500;
}
.bbt-archive-close {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 12px;
border: none;
background: var(--bg-secondary, #f1f5f9);
color: var(--text-muted, #64748b);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
}
.bbt-archive-close:hover {
background: var(--bg-tertiary, var(--border, #e2e8f0));
color: var(--text-primary, #0f172a);
}
.bbt-archive-close svg { width: 18px; height: 18px; }
body.dashboard-theme-dark .bbt-archive-close {
background: var(--bg-secondary, #1a1a1a);
}
.bbt-archive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--bbtStrategyCardGridGap, 24px);
align-items: stretch;
padding-top: 4px;
}
.bbt-archive-grid .strategy-card-wrapper {
max-width: var(--bbtStrategyCardMaxWidth);
justify-self: center;
width: 100%;
}
/* Korrekte Höhe/Skalierung der Ordner-Cards im Archiv (sonst wirken sie flach) */
.bbt-archive-grid .strategy-folder-card {
height: 100%;
min-height: 248px;
}
@media (max-width: 900px) {
.bbt-archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.bbt-archive-grid { grid-template-columns: 1fr; }
}
.bbt-archive-empty {
grid-column: 1 / -1;
text-align: center;
padding: 56px 20px;
color: var(--text-secondary, #64748b);
}
.bbt-archive-empty svg {
color: rgba(245, 158, 11, 0.55);
margin-bottom: 16px;
}
.bbt-archive-empty-title {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary, #0f172a);
}
.bbt-archive-empty-hint {
margin: 8px 0 0;
font-size: 0.9rem;
}
/* ==================== TABELLEN-ANSICHT (Strategien + Portfolios) ==================== */
/* Wrapper: nur sichtbar wenn Listenansicht aktiv */
.bbt-list-view {
display: none;
margin-top: var(--bbtStrategyCardGridMarginTop, 20px);
}
.bbt-list-view.active {
display: block;
overflow-x: auto;
}
/* Grid-View blenden: wenn Listenansicht aktiv, Grid verstecken */
.strategies-grid.bbt-hidden {
display: none !important;
}
/* Tabelle */
.bbt-list-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
}
.bbt-list-table thead th {
text-align: left;
padding: 12px 16px;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--text-secondary, #475569);
background: var(--bg-secondary, #f1f5f9);
border-bottom: 2px solid var(--glass-border, #e2e8f0);
position: sticky;
top: 0;
z-index: 2;
user-select: none;
white-space: nowrap;
}
/* Sortierbare Spalten */
.bbt-list-table thead th.bbt-sortable {
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease;
}
.bbt-list-table thead th.bbt-sortable:hover {
color: var(--primary, #0891b2);
background: var(--bg-hover, #e2e8f0);
}
.bbt-list-table thead th .bbt-sort-icon {
display: inline-block;
margin-left: 4px;
opacity: 0.35;
transition: opacity 0.15s ease, transform 0.15s ease;
font-size: 10px;
vertical-align: middle;
}
.bbt-list-table thead th.bbt-sorted-asc .bbt-sort-icon,
.bbt-list-table thead th.bbt-sorted-desc .bbt-sort-icon {
opacity: 1;
color: var(--primary, #0891b2);
}
.bbt-list-table thead th.bbt-sorted-desc .bbt-sort-icon {
transform: rotate(180deg);
}
.bbt-list-table tbody tr {
transition: background 0.12s ease;
}
.bbt-list-table tbody tr td {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.bbt-list-table tbody tr:hover {
background: rgba(8, 145, 178, 0.04);
}
.bbt-list-table tbody td {
padding: 14px 16px;
vertical-align: middle;
color: var(--text-primary, #0f172a);
}
/* Name-Spalte: klickbar */
.bbt-list-table tbody td.bbt-cell-name {
font-weight: 600;
cursor: pointer;
transition: color 0.15s ease;
}
.bbt-list-table tbody td.bbt-cell-name:hover {
color: var(--primary, #0891b2);
}
/* Strategie-Liste: Name schrumpft auf Inhaltsbreite, damit Kurve + Symbol direkt anschliessen.
Die Aktionen-Spalte absorbiert den Restplatz (fuellt die Tabellenbreite und gibt dem
Inline-Fortschrittsbalken Raum). Die Buttons sind aber linksbuendig (flex-start)
ausgerichtet, damit sie direkt hinter der letzten Datenspalte sitzen und beim
Zoomen/Skalieren mit dem Inhalt mitwandern statt am rechten Rand festzukleben. */
#strategiesListView .bbt-list-table th.bbt-col-name,
#strategiesListView .bbt-list-table tbody td.bbt-cell-name {
width: 1%;
white-space: nowrap;
max-width: 320px;
overflow: hidden;
text-overflow: ellipsis;
}
#strategiesListView .bbt-list-table th.bbt-col-actions,
#strategiesListView .bbt-list-table tbody td.bbt-cell-actions {
width: 100%;
}
#strategiesListView .bbt-list-table tbody td.bbt-cell-actions {
justify-content: flex-start;
}
/* Run-Preview-Spalte: nur die Sparkline-Kurve (KPIs stehen als eigene Spalten daneben) */
.bbt-list-table th.bbt-col-preview,
.bbt-list-table td.bbt-cell-preview {
width: 96px;
white-space: nowrap;
}
/* Strategie-Liste: kompaktere Spalten, damit die vielen Performance-Werte + Aktionen passen */
#strategiesListView .bbt-list-table thead th,
#strategiesListView .bbt-list-table tbody td {
padding-left: 10px;
padding-right: 10px;
}
/* Numerische Spalten: etwas mehr rechter Innenabstand schafft Platz fuer das absolut
positionierte Sort-Icon (siehe unten). Wichtig: gilt fuer | UND | gleichermassen,
damit Kopf-Label und Zahlen exakt dieselbe rechte Kante haben (= buendig untereinander). */
#strategiesListView .bbt-list-table .bbt-col-num {
font-size: 13px;
padding-right: 16px;
}
/* Numerische Spaltenkoepfe: Label bleibt rechtsbuendig (wie die Zahlen). Das Sort-Icon stand
bisher RECHTS neben dem Label und schob es um die Icon-Breite nach links. Es wird daher
absolut in den rechten Innenabstand gelegt, sodass es den Text NICHT mehr verschiebt.
Der | bleibt eine normale Tabellenzelle (kein display-Wechsel!) -> Spaltenraster intakt.
Der | ist bereits `position: sticky` und damit Bezugsrahmen fuer das absolute Icon. */
#strategiesListView .bbt-list-table thead th.bbt-col-num .bbt-sort-icon {
position: absolute;
right: 4px;
top: 50%;
margin-left: 0;
transform: translateY(-50%);
}
#strategiesListView .bbt-list-table thead th.bbt-sorted-desc.bbt-col-num .bbt-sort-icon {
transform: translateY(-50%) rotate(180deg);
}
/* Duenne, dezente vertikale Spaltentrenner fuer bessere Lesbarkeit der Tabelle.
1px ist die minimale echte Linienbreite; fuer ein "duenneres" Erscheinungsbild
wird daher die Deckkraft sehr gering gehalten. */
#strategiesListView .bbt-list-table thead th:not(:last-child),
#strategiesListView .bbt-list-table tbody td:not(:last-child) {
border-right: 1px solid rgba(0, 0, 0, 0.035);
}
body.dashboard-theme-dark #strategiesListView .bbt-list-table thead th:not(:last-child),
body.dashboard-theme-dark #strategiesListView .bbt-list-table tbody td:not(:last-child) {
border-right: 1px solid rgba(255, 255, 255, 0.04);
}
/* Spalten-Hover: Beim Ueberfahren einer Spalte werden Kopf + alle Werte dieser Spalte
grau hervorgehoben (Klasse wird per JS gesetzt, siehe bbtInitStrategyListColumnHover).
Wertzellen bekommen einfach einen grauen Hintergrund. Der Sticky-Kopf muss dagegen
undurchsichtig bleiben (sonst scheinen beim Scrollen Zeilen durch), daher wird dort
der Grauton als box-shadow-Overlay UEBER den vorhandenen Hintergrund gelegt. */
#strategiesListView .bbt-list-table tbody td.bbt-col-hovered {
background: rgba(0, 0, 0, 0.05);
}
#strategiesListView .bbt-list-table thead th.bbt-col-hovered {
box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05);
}
body.dashboard-theme-dark #strategiesListView .bbt-list-table tbody td.bbt-col-hovered {
background: rgba(255, 255, 255, 0.06);
}
body.dashboard-theme-dark #strategiesListView .bbt-list-table thead th.bbt-col-hovered {
box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.06);
}
/* ==================== Sticky Spaltenkopf (Strategie-Listenansicht) ====================
Beim Runterscrollen sollen die Spaltenueberschriften sanft am oberen Rand
"festkleben" und beim Hochscrollen wieder an ihre normale Position zurueckgleiten.
Das uebernimmt natives `position: sticky` (ruckelfrei, ohne JS).
Voraussetzung: kein scrollender Vorfahre. Der globale
`.bbt-list-view.active { overflow-x: auto }` wuerde sticky brechen, daher wird er
auf Desktop bewusst aufgehoben (die kompakten Spalten passen ohne Querscrollen). */
@media (min-width: 769px) {
#strategiesListView.bbt-list-view.active {
overflow: visible;
}
}
/* Help-Mode: #dashboardHome wird schmaler (margin-left: 438px + width: calc(100% - 438px)).
Die Listen-Tabelle hat durch viele nowrap-Spalten eine feste Mindestbreite und kann
– anders als die umbrechende Kartenansicht – nicht mitschrumpfen. Mit `overflow: visible`
(Desktop, fuer Sticky-Kopf) wuerde sie sonst nach rechts aus dem Viewport laufen und die
ganze Seite horizontal verschieben. Daher hier wieder ein horizontaler Scroll-Container,
der die Tabelle innerhalb des schmaleren Bereichs haelt (Sticky-Kopf wird im Help-Mode
bewusst geopfert). */
.container.help-mode #strategiesListView.bbt-list-view.active {
overflow-x: auto;
overflow-y: visible;
/* Querscroll soll nicht auf die Seite "durchschlagen" (z.B. Browser-Zurueck-Geste).
Dient nur noch als Sicherheitsnetz; durch das Ausblenden der Spalten (siehe unten)
passt die Tabelle im Normalfall ohne Querscroll. */
overscroll-behavior-x: contain;
}
/* Sticky-Kopf direkt unter der fixierten Hauptmenueleiste andocken,
damit er nicht dahinter verschwindet. */
#strategiesListView .bbt-list-table thead th {
top: var(--bbt-header-offset, 0px);
z-index: 5;
}
/* Im Dark-Theme ist der Standard-Kopf halbtransparent; beim Sticky-Zustand wuerden
sonst die scrollenden Zeilen durchscheinen, daher hier undurchsichtig setzen. */
body.dashboard-theme-dark #strategiesListView .bbt-list-table thead th {
background: var(--bg-secondary, #1a1a1a);
}
/* ==================== Hilfemodus-Fix: springende Kopfzeile ====================
Durch das obige `overflow-x: auto` wird #strategiesListView zu einem eigenen
Scroll-Kontext. Der sticky-Spaltenkopf bezieht sein `top` dann nicht mehr auf den
Viewport (wie im Normalmodus mit `overflow: visible`), sondern auf diesen Container.
Der global gesetzte Versatz `top: var(--bbt-header-offset)` schob die Kopfzeile dadurch
um die Menuehoehe sichtbar nach unten ("springende" Kopfzeile beim Oeffnen der Hilfe).
Im Hilfemodus wird der Versatz daher auf 0 gesetzt: Die Kopfzeile sitzt wieder buendig
oben auf der Tabelle. */
.container.help-mode #strategiesListView .bbt-list-table thead th {
top: 0;
}
/* ==================== Hilfemodus: sekundaere Spalten ausblenden ====================
Statt die Tabelle im schmaleren Hilfemodus zu quetschen oder die Aktions-Spalte
einzufrieren, werden drei sekundaere Performance-Spalten (Ø/Trade, Ø Winner, Ø Loser)
ausgeblendet. Das schafft sauberen Platz fuer die Aktions-Buttons, ohne gequetschte
Spalten. Die Spalten erscheinen automatisch wieder, sobald das Hilfepanel geschlossen
wird. Markierung der Spalten: Klasse `bbt-col-avg` an | (index.html) und |
(bbtListPerfCell-Aufrufe in dashboard.js). */
.container.help-mode #strategiesListView .bbt-list-table .bbt-col-avg {
display: none;
}
.bbt-cell-preview .bbt-list-preview-sparkline {
width: 90px;
height: 28px;
}
.bbt-cell-preview .bbt-list-preview-empty {
color: var(--text-secondary);
}
/* Symbol-Badge in Tabelle */
.bbt-list-symbol-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
background: rgba(8, 145, 178, 0.08);
color: var(--primary, #0891b2);
}
/* Actions-Zelle */
.bbt-list-table tbody td.bbt-cell-actions {
white-space: nowrap;
display: flex;
gap: 6px;
align-items: center;
}
.bbt-list-table tbody td.bbt-cell-actions .btn-icon {
display: inline-flex;
flex-shrink: 0;
}
/* Inline Progress neben Aktions-Buttons */
.bbt-list-progress {
display: inline-flex;
align-items: center;
margin-left: 10px;
flex: 1 1 auto;
min-width: 0;
}
.bbt-list-progress-inner {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.bbt-list-progress-spinner {
width: 12px;
height: 12px;
border: 2px solid var(--primary);
border-top-color: transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
flex-shrink: 0;
}
.bbt-list-progress-label {
color: var(--primary);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.bbt-list-progress-bar-track {
flex: 1 1 auto;
height: 7px;
background: var(--bg-dark, #e5e7eb);
border-radius: 4px;
overflow: hidden;
min-width: 60px;
}
.bbt-list-progress-bar-fill {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--accent));
border-radius: 4px;
transition: width 0.3s ease;
}
.bbt-list-progress-pct {
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
flex-shrink: 0;
}
/* Numerische Spalten (PnL, Return etc.) */
.bbt-list-table .bbt-col-num {
text-align: right;
font-variant-numeric: tabular-nums;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
.bbt-list-table thead th.bbt-col-num {
text-align: right;
}
.bbt-list-table .positive {
color: #16a34a;
}
.bbt-list-table .negative {
color: #dc2626;
}
body.dashboard-theme-dark .bbt-list-table .positive {
color: #4ade80;
}
body.dashboard-theme-dark .bbt-list-table .negative {
color: #f87171;
}
/* Dark-Mode Tabelle */
body.dashboard-theme-dark .bbt-list-table thead th {
background: rgba(20, 20, 20, 0.55);
border-bottom-color: var(--border, rgba(255,255,255,0.12));
color: var(--text-muted, #94a3b8);
}
body.dashboard-theme-dark .bbt-list-table thead th.bbt-sortable:hover {
background: rgba(255, 255, 255, 0.06);
}
body.dashboard-theme-dark .bbt-list-table tbody tr td {
border-bottom-color: rgba(255, 255, 255, 0.1);
}
body.dashboard-theme-dark .bbt-list-table tbody tr:hover {
background: rgba(255, 255, 255, 0.03);
}
@media (max-width: 768px) {
.bbt-list-view {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.bbt-list-table {
font-size: 12px;
min-width: 600px;
}
.bbt-list-table thead th {
padding: 8px 10px;
font-size: 10px;
}
.bbt-list-table tbody td {
padding: 10px;
font-size: 12px;
}
}
.panel-header h1 {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 26px;
font-weight: 700;
margin-bottom: 4px;
color: #000000;
letter-spacing: -0.3px;
text-shadow: none;
}
.subtitle {
font-size: 13px;
color: var(--text-secondary);
font-weight: 400;
}
.btn-header-action {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
padding: 12px 24px;
background: var(--gradient-primary);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: var(--transition-normal);
box-shadow: var(--shadow-md);
}
.btn-header-action:hover {
transform: translateY(-50%) translateY(-2px);
box-shadow: var(--shadow-hover);
}
.btn-header-action:active {
transform: translateY(-50%);
box-shadow: var(--shadow-sm);
}
.user-info {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border);
color: var(--text-secondary);
font-size: 14px;
}
.user-info span {
font-weight: 600;
color: var(--primary);
}
.panel-body {
padding: 28px;
}
.container:has(#registerPanel:not(.hidden)) {
max-width: 520px;
}
#registerPanel .panel-body {
padding: 24px 28px;
}
.form-row-half {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.form-row-half .form-group {
margin-bottom: 0;
}
@media (max-width: 400px) {
.form-row-half {
grid-template-columns: 1fr;
}
}
.my-published-refresh-btn {
position: absolute;
right: 20px;
top: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: var(--text-muted, #9ca3af);
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease;
}
.my-published-refresh-btn:hover {
color: var(--text-primary, #111827);
background: var(--bg-hover, rgba(0,0,0,0.05));
}
.my-published-refresh-btn:active {
color: var(--primary, #0891b2);
background: rgba(8, 145, 178, 0.08);
}
.my-published-refresh-btn:active svg {
transform: rotate(-45deg);
}
.my-published-refresh-btn svg {
transition: transform 0.2s ease;
}
body.dashboard-theme-dark .my-published-refresh-btn {
color: var(--text-muted, #6b7280);
}
body.dashboard-theme-dark .my-published-refresh-btn:hover {
color: #d1d5db;
background: rgba(255,255,255,0.06);
}
body.dashboard-theme-dark .my-published-refresh-btn:active {
color: var(--primary, #22d3ee);
background: rgba(34, 211, 238, 0.1);
}
@media (max-width: 480px) {
.panel-header {
padding: 16px 16px 8px;
}
.panel-body {
padding: 16px;
}
.my-published-refresh-btn {
right: 12px;
top: 12px;
width: 28px;
height: 28px;
}
.panel {
border-radius: 16px;
}
.form-group input,
.form-group select {
padding: 12px 14px;
font-size: 14px;
}
.auth-logo img {
height: 40px;
}
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.form-group input,
.form-group select {
width: 100%;
padding: 14px 18px;
background: var(--bg-secondary);
border: 2px solid var(--border);
border-radius: 12px;
color: var(--text-primary);
font-size: 14px;
font-family: 'Inter', sans-serif;
transition: var(--transition-normal);
outline: none;
box-shadow: var(--shadow-sm);
}
.form-group select {
cursor: pointer;
}
.form-group input:hover,
.form-group select:hover {
border-color: var(--border-hover);
}
.form-group input:focus,
.form-group select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px var(--primary-glow), var(--shadow-md);
background: var(--bg-dark);
}
.form-group input::placeholder {
color: var(--text-muted);
}
.form-group select option {
background: var(--bg-card);
color: var(--text-primary);
}
.btn {
width: 100%;
padding: 14px 28px;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: var(--transition-normal);
margin-bottom: 12px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.btn-primary {
background: var(--gradient-primary);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
#loginPanel .btn-primary,
#registerPanel .btn-primary {
background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
box-shadow: 0 4px 14px rgba(14,165,233,0.25);
}
#loginPanel .btn-primary:hover,
#registerPanel .btn-primary:hover {
box-shadow: 0 8px 24px rgba(14,165,233,0.32);
}
#loginPanel .btn-primary:active,
#registerPanel .btn-primary:active {
box-shadow: 0 2px 8px rgba(14,165,233,0.2);
}
.btn-primary:disabled {
background: var(--bg-tertiary, #374151);
cursor: not-allowed;
box-shadow: none;
filter: none;
transform: none;
}
.btn-secondary {
background: var(--bg-secondary);
color: var(--text-secondary);
border: 1px solid var(--border);
}
.btn-secondary:hover {
background: var(--bg-hover);
color: var(--text-primary);
border-color: var(--border-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-secondary:active {
transform: translateY(0);
}
.btn-danger {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
border: 1px solid #dc2626;
}
.btn-danger:hover {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
border-color: #b91c1c;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.btn-danger:active {
transform: translateY(0);
}
.btn-small {
width: auto;
padding: 10px 18px;
font-size: 13px;
margin: 0;
}
.error-message,
.success-message {
padding: 12px 16px;
border-radius: 8px;
margin: 16px 0;
font-size: 14px;
font-weight: 500;
display: none;
}
.error-message {
background: rgba(239, 68, 68, 0.1);
border: 1px solid var(--error);
color: var(--error);
}
.success-message {
background: rgba(16, 185, 129, 0.1);
border: 1px solid var(--success);
color: var(--success);
}
.error-message.show,
.success-message.show {
display: block;
}
/* Auth Links - moderne kleine Text-Links */
.auth-link {
display: inline-block;
font-size: 12px;
color: var(--text-secondary);
text-decoration: none;
margin-top: 6px;
transition: color 0.2s ease;
cursor: pointer;
}
.auth-link:hover {
color: var(--accent);
text-decoration: underline;
}
.auth-link-center {
display: block;
text-align: center;
margin-top: 12px;
}
.auth-subtle-note {
margin-top: 8px;
font-size: 11.5px;
line-height: 1.4;
color: var(--text-muted);
text-align: center;
}
.auth-subtle-note a {
color: inherit;
text-decoration: underline;
}
/* Sign Up Prompt - moderne kleine Zeile */
/* ── Legal Consent Checkboxen (Register) ── */
.auth-legal-group {
margin-top: 20px;
margin-bottom: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.auth-legal-check {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.auth-legal-check input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
min-width: 18px;
margin-top: 2px;
border: 2px solid var(--border);
border-radius: 4px;
background: var(--bg-secondary);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.auth-legal-check input[type="checkbox"]:hover {
border-color: var(--primary);
}
.auth-legal-check input[type="checkbox"]:checked {
background: var(--primary);
border-color: var(--primary);
}
.auth-legal-check input[type="checkbox"]:checked::after {
content: '';
position: absolute;
top: 2px;
left: 5px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.auth-legal-check input[type="checkbox"]:focus-visible {
box-shadow: 0 0 0 3px var(--primary-glow);
}
.auth-legal-check label {
font-size: 12.5px;
line-height: 1.45;
color: var(--text-secondary);
cursor: pointer;
user-select: none;
}
.auth-legal-check label a {
color: var(--primary-light, #22d3ee);
text-decoration: none;
font-weight: 500;
}
.auth-legal-check label a:hover {
text-decoration: underline;
}
.auth-legal-check.has-error input[type="checkbox"] {
border-color: var(--error);
box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
}
.auth-legal-check.has-error label {
color: var(--error);
}
.auth-legal-check.has-error {
background: rgba(239,68,68,0.06);
border-radius: 8px;
padding: 8px 10px;
margin: -8px -10px;
animation: bbt-shake 0.4s ease;
}
.auth-legal-note {
font-size: 12.5px;
line-height: 1.45;
color: var(--text-secondary);
padding-left: 28px;
}
.auth-legal-note a {
color: var(--primary-light, #22d3ee);
text-decoration: none;
font-weight: 500;
}
.auth-legal-note a:hover {
text-decoration: underline;
}
@keyframes bbt-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(2px); }
}
.auth-signup-prompt {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
margin-top: 16px;
font-size: 13px;
color: var(--text-secondary);
}
.auth-link-blue {
color: #3b82f6;
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
cursor: pointer;
}
.auth-link-blue:hover {
color: #60a5fa;
text-decoration: underline;
}
.hidden {
display: none !important;
}
/* Trigger UI: Load Strategy Date icon button next to From-label */
.bbt-load-strategy-date-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: none;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
padding: 0;
border-radius: 4px;
vertical-align: middle;
margin-left: 4px;
transition: color 0.15s, background 0.15s;
position: relative;
}
.bbt-load-strategy-date-btn:hover {
color: var(--primary-light, #818cf8);
background: rgba(99, 102, 241, 0.12);
}
.bbt-load-strategy-date-btn svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.info-text {
text-align: center;
color: var(--text-secondary);
font-size: 14px;
margin-top: 24px;
}
/* Dropdown / Select Styling – exakt wie andere Felder, mit Custom-Pfeil */
.form-field select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: var(--bg-dark);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 32px 10px 14px;
font-size: 14px;
font-family: 'Inter', sans-serif;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
}
.form-field select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
/* Execution-Dropdown: farbige Unterstreichung Buy/Sell */
select.exec-buy {
border-bottom: 3px solid var(--success);
}
select.exec-sell {
border-bottom: 3px solid var(--error);
}
/* Type-Dropdown: farbige Unterstreichung Call/Put */
select.type-call {
border-bottom: 3px solid #06b6d4;
}
select.type-put {
border-bottom: 3px solid #c084fc;
}
/* Leg-Row Type-Zelle: farbiges Badge für Call/Put */
.leg-cell--type.type-call,
.leg-cell--type.type-put {
font-weight: 700;
font-size: 10px;
padding: 2px 8px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.leg-cell--type.type-call {
background: rgba(6, 182, 212, 0.15);
color: #06b6d4;
border: 1px solid rgba(6, 182, 212, 0.3);
}
.leg-cell--type.type-put {
background: rgba(192, 132, 252, 0.15);
color: #c084fc;
border: 1px solid rgba(192, 132, 252, 0.3);
}
.form-field option {
background-color: var(--bg-card);
color: var(--text-primary);
}
/* Bootstrap Form-Control Overrides – an .form-field-Inputs angeglichen */
.form-control, .form-select {
background-color: var(--bg-dark) !important;
color: var(--text-primary) !important;
border-color: var(--border) !important;
border-radius: 6px !important;
}
.form-control:focus, .form-select:focus {
background-color: var(--bg-dark) !important;
color: var(--text-primary) !important;
border-color: var(--primary) !important;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}
.trigger-times-input::placeholder {
color: var(--text-muted) !important;
opacity: 0.32;
font-style: italic;
}
/* Header - Modern Glassmorphism */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
opacity: 1;
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(226, 232, 240, 0.8);
/* nochmals ~7% weniger Höhe (Header-Offset wird dynamisch gemessen) */
/* nochmal ~10% dünner */
padding: 9px 32px;
display: flex;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
justify-content: space-between;
align-items: center;
z-index: 100;
transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
will-change: top, opacity;
/* Wenn es nicht passt: umbrechen statt aus dem Screen zu fliegen */
flex-wrap: wrap;
row-gap: 7px;
}
.header-left {
display: flex;
align-items: center;
gap: 20px;
flex: 1 1 auto;
min-width: 220px;
}
.header-logo {
display: flex;
align-items: center;
gap: 12px;
}
.header-logo-icon {
height: 33px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.header-logo-icon img {
height: 100%;
width: auto;
object-fit: contain;
user-select: none;
-webkit-user-select: none;
pointer-events: none;
-webkit-user-drag: none;
}
/* Header-Logo: Light/Dark-Wechsel */
.header-logo-icon .header-logo-dark {
display: none;
}
body.dashboard-theme-dark .header-logo-icon .header-logo-light {
display: none;
}
body.dashboard-theme-dark .header-logo-icon .header-logo-dark {
display: block;
}
.header-left-separator {
width: 1px;
height: 38px;
background: var(--border);
flex-shrink: 0;
}
.header-title {
font-size: 18px;
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.5px;
}
.header-nav {
display: flex;
align-items: center;
gap: 6px;
margin-left: 32px;
}
.header-nav-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
background: transparent;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: var(--transition-normal);
}
.header-nav-btn:hover {
background: var(--bg-secondary);
color: var(--text-primary);
}
.header-nav-btn.active {
background: rgba(8, 145, 178, 0.1);
color: var(--primary);
}
.header-nav-btn svg {
width: 18px;
height: 18px;
stroke-width: 2;
}
.header-user {
display: flex;
align-items: center;
gap: 8px;
flex: 0 1 auto;
flex-wrap: wrap;
justify-content: flex-end;
min-width: 0;
}
.header-actions {
display: flex;
align-items: center;
gap: 6px;
padding-right: 16px;
margin-right: 16px;
border-right: 1px solid var(--border);
flex: 0 1 auto;
flex-wrap: wrap;
}
.header-account-controls {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* ==================== HAMBURGER MENU (Mobile) ==================== */
.dash-hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 36px;
height: 36px;
padding: 0;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
z-index: 102;
flex-shrink: 0;
transition: background 0.2s ease;
}
.dash-hamburger:hover {
background: var(--bg-hover);
}
.dash-hamburger span {
display: block;
width: 18px;
height: 2px;
background: var(--text-primary);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.2s ease;
}
.dash-hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.dash-hamburger.active span:nth-child(2) {
opacity: 0;
}
.dash-hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
.dash-menu-overlay {
display: none;
}
@media (max-width: 768px) {
.header {
padding: 8px 12px;
flex-wrap: nowrap;
row-gap: 0;
}
.header-left {
gap: 8px;
min-width: 0;
flex: 0 1 auto;
}
.header-left-separator {
display: none;
}
.theme-toggle {
margin-left: 4px;
}
.header-logo-icon {
height: 26px;
}
.dash-hamburger {
display: flex;
margin-left: auto;
}
.dash-menu-overlay {
display: block;
position: fixed;
inset: 0;
background: transparent;
z-index: 99;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.dash-menu-overlay.active {
opacity: 1;
pointer-events: auto;
}
.header-user {
position: absolute;
top: 100%;
right: 8px;
width: 220px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
z-index: 101;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 12px;
margin-top: 6px;
opacity: 0;
pointer-events: none;
transform: translateY(-8px) scale(0.97);
transform-origin: top right;
transition: opacity 0.2s ease, transform 0.2s ease;
overflow-y: auto;
max-height: calc(100vh - 70px);
max-height: calc(100dvh - 70px);
}
.header-user.mobile-open {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.header-actions {
flex-direction: column;
gap: 3px;
padding-right: 0;
margin-right: 0;
border-right: none;
border-bottom: 1px solid var(--border);
padding-bottom: 8px;
margin-bottom: 8px;
}
.header-action-btn {
padding: 8px 10px;
justify-content: flex-start;
width: 100%;
border-radius: 8px;
font-size: 13px;
}
.header-action-btn span,
.header-action-btn .localized {
display: inline;
}
.header-action-btn svg {
width: 15px;
height: 15px;
}
.header-user-info {
padding: 8px;
border-radius: 10px;
margin-bottom: 8px;
gap: 10px;
}
.header-user-details {
display: flex;
}
.header-avatar {
width: 30px;
height: 30px;
font-size: 12px;
}
.btn-logout {
padding: 8px 10px;
width: 100%;
justify-content: center;
border-radius: 8px;
}
.btn-logout span,
.btn-logout .localized {
display: inline;
}
.lang-select {
width: 100%;
padding: 8px 28px 8px 12px;
font-size: 13px;
border-radius: 8px;
margin-bottom: 3px;
}
}
.header-action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px 10px;
background: var(--bg-secondary);
border: 1px solid transparent;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: var(--transition-normal);
}
.header-action-btn:hover {
background: var(--bg-hover);
border-color: var(--border);
color: var(--text-primary);
transform: translateY(-1px);
}
.header-action-btn.ai-btn {
background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(8, 145, 178, 0.15) 100%);
color: var(--accent);
border: 1px solid rgba(167, 139, 250, 0.3);
}
.header-action-btn.ai-btn:hover {
background: linear-gradient(135deg, rgba(167, 139, 250, 0.25) 0%, rgba(8, 145, 178, 0.25) 100%);
border-color: var(--accent);
color: var(--accent-hover);
box-shadow: 0 4px 15px rgba(167, 139, 250, 0.2);
}
.header-action-btn.beta-btn {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
color: #8b5cf6;
border: 1px solid rgba(139, 92, 246, 0.35);
}
.header-action-btn.beta-btn:hover {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.28) 0%, rgba(99, 102, 241, 0.28) 100%);
border-color: #8b5cf6;
color: #7c3aed;
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.25);
}
.header-action-btn svg {
width: 13px;
height: 13px;
}
.lang-select-wrapper {
position: relative;
}
.lang-select {
appearance: none;
padding: 10px 32px 10px 14px;
background: var(--bg-secondary);
border: 1px solid transparent;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: var(--transition-normal);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
.lang-select:hover {
background-color: var(--bg-hover);
border-color: var(--border);
color: var(--text-primary);
}
.lang-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-glow);
}
/* Theme Toggle Switch - Optimized & Smooth */
.theme-toggle {
display: flex;
align-items: center;
margin-left: 20px;
}
.theme-toggle-track {
position: relative;
width: 47px;
height: 25px;
background: #1a1a1a;
border-radius: 13px;
cursor: pointer;
border: 2px solid #333333;
will-change: background-color, border-color;
transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.2s ease;
}
.theme-toggle-track.light {
background: #0ea5e9;
border-color: #0284c7;
}
.theme-toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
will-change: transform;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-toggle-track.light .theme-toggle-thumb {
transform: translateX(22px);
}
.theme-toggle-icon-moon,
.theme-toggle-icon-sun {
width: 11px;
height: 11px;
position: absolute;
will-change: opacity, transform;
transition: opacity 0.2s ease, transform 0.25s ease;
}
.theme-toggle-icon-moon {
color: #475569;
opacity: 1;
transform: scale(1);
}
.theme-toggle-icon-sun {
color: #f59e0b;
opacity: 0;
transform: scale(0.5);
}
.theme-toggle-track.light .theme-toggle-icon-moon {
opacity: 0;
transform: scale(0.5);
}
.theme-toggle-track.light .theme-toggle-icon-sun {
opacity: 1;
transform: scale(1);
}
.theme-toggle-track:hover {
box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.12);
}
.header-user-info {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 12px 6px 6px;
background: var(--bg-secondary);
border-radius: 12px;
border: 1px solid var(--border);
}
.header-avatar {
width: 34px;
height: 34px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
color: white;
text-transform: uppercase;
}
.header-user-details {
display: flex;
flex-direction: column;
gap: 1px;
}
.header-user-label {
font-size: 11px;
color: var(--text-muted);
font-weight: 500;
}
.header-username {
font-size: 14px;
color: var(--text-primary);
font-weight: 600;
}
.btn-logout {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 16px;
background: transparent;
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text-secondary);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: var(--transition-normal);
}
.btn-logout svg {
width: 16px;
height: 16px;
}
.btn-logout:hover {
background: rgba(239, 68, 68, 0.08);
color: var(--error);
border-color: var(--error);
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--error-glow);
}
.main-content {
padding-top: var(--bbt-header-offset, 0px);
}
/* Subscription Screen: Header ist bewusst nicht sichtbar -> kein Header-Offset/GAP */
body.subscription-mode .main-content {
padding-top: 0;
transition: none; /* beim Eintritt: Gap sofort weg, beim Verlassen greift wieder die normale Transition */
}
/* Auf der Plan-Auswahl keine Command-Hub-Buttons anzeigen. */
body.subscription-mode .bbt-command-hub {
display: none !important;
}
.dashboard-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
@media (max-width: 480px) {
.dashboard-container {
padding: 12px;
}
}
/* Spinner Animation für Progress */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ==================== AI Advisor Panel ==================== */
@media (max-width: 768px) {
body.ai-chat-open {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
height: 100% !important;
touch-action: none;
}
}
/* Overlay */
.ai-chat-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.4);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.ai-chat-overlay.open { opacity: 1; visibility: visible; }
/* Panel */
.ai-chat-panel {
position: fixed;
left: 0; top: 0;
width: min(680px, 100vw);
height: 100vh;
background: var(--bg-dark);
border-right: 1px solid var(--border);
box-shadow: 2px 0 32px rgba(0, 0, 0, 0.10);
display: flex;
flex-direction: column;
z-index: 1000;
transform: translateX(-100%);
transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), width 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.ai-chat-panel.expanded { width: min(90vw, 1100px); }
.ai-chat-panel.open { transform: translateX(0); }
/* Layout */
.ai-chat-body { display: flex; flex: 1; overflow: hidden; }
.ai-chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
/* ==================== Sidebar ==================== */
.ai-chat-sidebar {
width: 220px; min-width: 220px; overflow: hidden; opacity: 1;
background: var(--bg-card);
display: flex; flex-direction: column;
border-right: 1px solid var(--border);
transition: width 0.28s cubic-bezier(0.32, 0.72, 0, 1), min-width 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
}
.ai-chat-panel.expanded .ai-chat-sidebar {
width: 280px; min-width: 280px;
}
.ai-chat-sidebar-header {
padding: 20px 16px 16px;
}
.ai-chat-sidebar-title {
font-size: 11px; font-weight: 700; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
}
/* "Neuer Chat" Button - modern pill style */
.ai-chat-new-btn {
width: 100%;
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 16px;
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
border: none; border-radius: 10px;
color: white; font-size: 13px; font-weight: 600;
cursor: pointer; position: relative; overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.2s ease;
box-shadow: 0 2px 8px rgba(8, 145, 178, 0.2);
}
.ai-chat-new-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(8, 145, 178, 0.3);
}
.ai-chat-new-btn:active { transform: translateY(0) scale(0.98); }
.ai-chat-new-btn svg { width: 16px; height: 16px; }
/* Chat-Liste */
.ai-chat-list { flex: 1; overflow-y: auto; padding: 8px 10px; }
.ai-chat-list::-webkit-scrollbar { width: 3px; }
.ai-chat-list::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.2); border-radius: 2px; }
.ai-chat-list-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px; margin-bottom: 4px;
background: var(--bg-secondary);
border: 1px solid transparent; border-radius: 10px;
cursor: pointer; position: relative;
transition: all 0.18s ease;
}
.ai-chat-list-item:hover {
background: var(--bg-hover);
border-color: var(--border);
box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.ai-chat-list-item.active {
background: rgba(8, 145, 178, 0.06);
border-color: rgba(8, 145, 178, 0.18);
box-shadow: inset 3px 0 0 var(--primary);
}
.ai-chat-list-item-icon {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(8,145,178,0.08) 0%, rgba(20,184,166,0.08) 100%);
border-radius: 8px; flex-shrink: 0;
}
.ai-chat-list-item-icon svg { width: 15px; height: 15px; color: var(--primary); }
.ai-chat-list-item-content { flex: 1; min-width: 0; }
.ai-chat-list-item-title {
font-size: 13px; font-weight: 500; color: var(--text-primary);
line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ai-chat-list-item-date { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ai-chat-list-item-delete {
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
background: transparent; border: none; border-radius: 8px;
color: var(--text-muted); cursor: pointer; opacity: 0;
transition: all 0.15s ease; flex-shrink: 0;
}
.ai-chat-list-item:hover .ai-chat-list-item-delete { opacity: 0.7; }
.ai-chat-list-item-delete:hover { background: rgba(239,68,68,0.1); color: #ef4444; opacity: 1 !important; }
.ai-chat-list-item-delete svg { width: 14px; height: 14px; }
.ai-chat-list-empty { text-align: center; padding: 40px 16px; color: var(--text-muted); font-size: 13px; }
.ai-chat-list-empty svg { width: 32px; height: 32px; margin-bottom: 8px; opacity: 0.25; }
@media (max-width: 900px) {
.ai-chat-panel { width: 100vw; }
.ai-chat-panel.expanded { width: 100vw; }
.ai-chat-panel.expanded .ai-chat-sidebar { width: 240px; min-width: 240px; }
}
@media (max-width: 768px) {
.ai-chat-panel,
.ai-chat-panel.expanded {
width: 100vw !important;
height: 100% !important;
min-height: 100vh !important;
min-height: 100dvh !important;
border-right: none !important;
border-radius: 0 !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
right: 0 !important;
max-width: 100% !important;
max-height: 100vh !important;
max-height: 100dvh !important;
}
.ai-chat-sidebar { display: none !important; }
.ai-chat-header {
padding: 10px 12px !important;
gap: 10px !important;
}
.ai-chat-logo {
width: 32px !important;
height: 32px !important;
border-radius: 10px !important;
}
.ai-chat-logo svg { width: 16px !important; height: 16px !important; }
.ai-chat-status-dot { width: 8px !important; height: 8px !important; }
.ai-chat-header-text h3 { font-size: 14px !important; }
.ai-chat-header-text .ai-chat-subtitle { font-size: 11px !important; max-width: 140px !important; }
.ai-chat-header-btn { width: 30px !important; height: 30px !important; }
.ai-chat-header-btn svg { width: 14px !important; height: 14px !important; }
#aiChatWidthToggleBtn { display: none !important; }
.ai-chat-messages {
padding: 12px 10px !important;
gap: 5px !important;
}
.ai-chat-message {
max-width: 92% !important;
padding: 10px 12px !important;
font-size: 13px !important;
line-height: 1.55 !important;
}
.ai-chat-message.user { border-radius: 16px 16px 4px 16px !important; }
.ai-chat-message.assistant { border-radius: 16px 16px 16px 4px !important; }
.ai-chat-examples {
padding: 20px 14px !important;
}
.ai-chat-welcome-icon {
width: 44px !important;
height: 44px !important;
border-radius: 12px !important;
margin-bottom: 12px !important;
}
.ai-chat-welcome-icon svg { width: 22px !important; height: 22px !important; }
.ai-chat-examples h4 { font-size: 16px !important; margin-bottom: 4px !important; }
.ai-chat-examples-subtitle { font-size: 13px !important; margin-bottom: 16px !important; }
.ai-chat-examples-grid {
grid-template-columns: 1fr !important;
gap: 8px !important;
max-width: 100% !important;
}
.ai-chat-example-btn {
padding: 11px 14px !important;
border-radius: 10px !important;
}
.ai-chat-example-btn strong { font-size: 12px !important; }
.ai-chat-example-btn small { font-size: 11px !important; }
.ai-chat-input-area {
padding: 10px 10px 14px !important;
padding-bottom: env(safe-area-inset-bottom, 14px) !important;
}
.ai-chat-input-toolbar { margin-bottom: 8px !important; gap: 8px !important; }
.ai-chat-input-wrapper {
border-radius: 12px !important;
padding: 6px 6px 6px 14px !important;
}
.ai-chat-input {
font-size: 16px !important;
min-height: 20px !important;
max-height: 180px !important;
padding: 6px 0 !important;
}
.ai-chat-send {
width: 34px !important;
height: 34px !important;
border-radius: 9px !important;
}
.ai-chat-send svg { width: 16px !important; height: 16px !important; }
.ai-chat-settings {
padding: 8px 12px !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.ai-chat-setting-toggle { font-size: 11px !important; padding: 4px 8px !important; }
.ai-chat-loading-text { font-size: 12px !important; }
.ai-chat-tool-result { margin: 4px 0 !important; }
.ai-chat-tool-result-body pre { font-size: 11px !important; }
.ai-chat-overlay.open {
background: rgba(0, 0, 0, 0.5) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
}
/* ==================== DARK MODE ==================== */
body.dashboard-theme-dark .ai-chat-panel { box-shadow: 2px 0 40px rgba(0,0,0,0.45); }
body.dashboard-theme-dark .ai-chat-overlay { background: rgba(0,0,0,0.6); }
body.dashboard-theme-dark .ai-chat-sidebar { background: var(--bg-secondary); }
body.dashboard-theme-dark .ai-chat-list-item { background: var(--bg-card); }
body.dashboard-theme-dark .ai-chat-list-item:hover { background: var(--bg-hover); }
body.dashboard-theme-dark .ai-chat-list-item.active { background: rgba(8,145,178,0.1); border-color: rgba(8,145,178,0.25); }
body.dashboard-theme-dark .ai-chat-new-btn { background: linear-gradient(135deg, #0e7490 0%, #0d9488 100%); }
body.dashboard-theme-dark .ai-chat-header { background: var(--bg-card); }
body.dashboard-theme-dark .ai-chat-logo {
background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
border: none;
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35);
}
body.dashboard-theme-dark .ai-chat-logo svg { color: #fff; }
body.dashboard-theme-dark .ai-chat-status-dot { box-shadow: 0 0 0 2.5px var(--bg-card); }
body.dashboard-theme-dark .ai-chat-header-btn { color: var(--text-muted); }
body.dashboard-theme-dark .ai-chat-header-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
body.dashboard-theme-dark .ai-chat-settings { background: var(--bg-card); border-bottom-color: var(--border); }
body.dashboard-theme-dark .ai-chat-setting-toggle:hover { background: var(--bg-hover); }
body.dashboard-theme-dark .ai-chat-setting-toggle.active { background: rgba(8,145,178,0.1); border-color: rgba(8,145,178,0.25); }
body.dashboard-theme-dark .ai-chat-messages { background: var(--bg-dark); }
body.dashboard-theme-dark .ai-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
body.dashboard-theme-dark .ai-chat-message.assistant { background: var(--bg-card); border-color: var(--border); }
body.dashboard-theme-dark .ai-chat-message.user { background: linear-gradient(135deg, #0e7490 0%, #0d9488 100%); }
body.dashboard-theme-dark .ai-chat-message.system { background: rgba(255,255,255,0.04); }
body.dashboard-theme-dark .ai-chat-message.error { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); }
body.dashboard-theme-dark .ai-chat-welcome-icon { background: rgba(8,145,178,0.08); border-color: rgba(8,145,178,0.15); }
body.dashboard-theme-dark .ai-chat-example-btn { background: var(--bg-card); border-color: var(--border); }
body.dashboard-theme-dark .ai-chat-example-btn:hover { background: var(--bg-hover); border-color: rgba(8,145,178,0.25); }
body.dashboard-theme-dark .ai-chat-input-area { background: var(--bg-card); border-top-color: var(--border); }
body.dashboard-theme-dark .ai-chat-mode-select { background: var(--bg-secondary); border-color: var(--border); color: var(--text-primary); }
body.dashboard-theme-dark .ai-chat-mode-select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(8,145,178,0.12); }
body.dashboard-theme-dark .ai-chat-input-wrapper { background: var(--bg-secondary); border-color: var(--border); }
body.dashboard-theme-dark .ai-chat-input-wrapper:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(8,145,178,0.1); }
body.dashboard-theme-dark .ai-chat-input { color: var(--text-primary); }
body.dashboard-theme-dark .ai-chat-input::placeholder { color: var(--text-muted); }
body.dashboard-theme-dark .ai-chat-send { background: linear-gradient(135deg, #0e7490 0%, #0d9488 100%); }
body.dashboard-theme-dark .ai-chat-send:hover:not(:disabled) { box-shadow: 0 2px 12px rgba(8,145,178,0.3); }
body.dashboard-theme-dark .ai-chat-tool-result { background: var(--bg-secondary); border-color: var(--border); }
body.dashboard-theme-dark .ai-chat-tool-result-header { border-bottom-color: var(--border); }
body.dashboard-theme-dark .ai-chat-tool-result.success { border-left-color: #10b981; }
body.dashboard-theme-dark .ai-chat-tool-result.error { border-left-color: #ef4444; }
body.dashboard-theme-dark .ai-chat-tool-result.warning { border-left-color: #f59e0b; }
body.dashboard-theme-dark .ai-chat-tool-result-body pre { background: var(--bg-dark); border-color: var(--border); }
body.dashboard-theme-dark .ai-chat-tool-result-body code { background: var(--bg-dark); }
body.dashboard-theme-dark .ai-chat-typing { background: var(--bg-card); border-color: var(--border); }
body.dashboard-theme-dark .ai-chat-typing-dot { background: var(--text-muted); }
/* ==================== Header ==================== */
.ai-chat-header {
display: flex; align-items: center; gap: 14px;
padding: 16px 20px;
background: var(--bg-card);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.ai-chat-header-content { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.ai-chat-logo {
width: 40px; height: 40px;
background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
border: none;
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28);
flex-shrink: 0; position: relative;
}
.ai-chat-logo svg { width: 20px; height: 20px; color: #fff; }
.ai-chat-status-dot {
position: absolute; bottom: -1px; right: -1px;
width: 10px; height: 10px;
background: #10b981; border-radius: 50%;
box-shadow: 0 0 0 2px #6366f1;
animation: aiStatusPulse 3s ease-in-out infinite;
}
@keyframes aiStatusPulse {
0%, 100% { box-shadow: 0 0 0 2px #6366f1; }
50% { box-shadow: 0 0 0 2px #6366f1, 0 0 0 5px rgba(16,185,129,0.2); }
}
.ai-chat-header-text h3 {
font-size: 15px; font-weight: 650; color: var(--text-primary);
margin: 0; letter-spacing: -0.2px; line-height: 1.2;
}
.ai-chat-header-text .ai-chat-subtitle {
font-size: 12px; color: var(--text-muted); margin-top: 2px; font-weight: 400;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px;
}
.ai-chat-header-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.ai-chat-header-btn {
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
background: transparent; border: none; border-radius: 8px;
color: var(--text-muted); cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.ai-chat-header-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.ai-chat-header-btn svg { width: 16px; height: 16px; }
.ai-chat-icon-expand, .ai-chat-icon-collapse { width: 16px; height: 16px; display: block; }
.ai-chat-icon-collapse { display: none; }
#aiChatPanel.expanded .ai-chat-icon-expand { display: none; }
#aiChatPanel.expanded .ai-chat-icon-collapse { display: block; }
/* Settings Bar */
.ai-chat-settings {
display: flex; align-items: center; gap: 12px;
padding: 10px 20px; background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.ai-chat-setting-toggle {
display: flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 500; color: var(--text-secondary);
cursor: pointer; padding: 5px 10px; border-radius: 6px;
transition: background 0.15s ease, color 0.15s ease;
border: 1px solid transparent; user-select: none;
}
.ai-chat-setting-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.ai-chat-setting-toggle input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--primary); cursor: pointer; }
.ai-chat-setting-toggle.active { background: rgba(8,145,178,0.08); border-color: rgba(8,145,178,0.18); color: var(--primary); }
/* ==================== Messages ==================== */
.ai-chat-messages {
flex: 1; overflow-y: auto;
padding: 24px;
display: flex; flex-direction: column; gap: 6px;
background: var(--bg-dark);
}
.ai-chat-messages::-webkit-scrollbar { width: 5px; }
.ai-chat-messages::-webkit-scrollbar-track { background: transparent; }
.ai-chat-messages::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.18); border-radius: 3px; }
.ai-chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.35); }
/* Message Bubbles */
.ai-chat-message {
max-width: 85%; padding: 12px 16px;
font-size: 14px; line-height: 1.65;
word-wrap: break-word; overflow-wrap: break-word;
animation: aiMsgIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
}
@keyframes aiMsgIn {
from { opacity: 0; transform: translateY(8px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.ai-chat-message.user {
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
color: white; align-self: flex-end;
border-radius: 18px 18px 4px 18px;
box-shadow: 0 2px 8px rgba(8,145,178,0.18);
}
.ai-chat-message.assistant {
background: var(--bg-card); color: var(--text-primary); align-self: flex-start;
border-radius: 18px 18px 18px 4px;
border: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.ai-chat-message.system {
background: transparent; align-self: center;
font-size: 11px; color: var(--text-muted); text-align: center;
padding: 6px 16px; border-radius: 20px;
border: 1px solid var(--border);
}
.ai-chat-message.error {
background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.18);
color: #ef4444; border-radius: 18px 18px 18px 4px;
}
/* ==================== Welcome / Examples ==================== */
.ai-chat-examples {
display: flex; flex-direction: column; align-items: center; justify-content: center;
flex: 1; padding: 40px 28px; text-align: center;
animation: aiFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes aiFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.ai-chat-welcome-icon {
width: 56px; height: 56px; margin: 0 auto 16px;
background: linear-gradient(135deg, rgba(8,145,178,0.08) 0%, rgba(20,184,166,0.08) 100%);
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
border: 1px solid rgba(8,145,178,0.12);
}
.ai-chat-welcome-icon svg { width: 26px; height: 26px; color: var(--primary); }
.ai-chat-examples h4 {
font-size: 18px; font-weight: 700; color: var(--text-primary);
margin-bottom: 6px; letter-spacing: -0.3px;
}
.ai-chat-examples-subtitle {
font-size: 14px; color: var(--text-muted); margin-bottom: 16px; max-width: 340px; line-height: 1.5;
}
.ai-chat-ai-act-notice {
display: flex;
align-items: flex-start;
gap: 10px;
max-width: 420px;
width: 100%;
padding: 12px 16px;
margin: 8px 0 20px;
border-radius: 10px;
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.35);
font-size: 12.5px;
line-height: 1.55;
color: #92400e;
text-align: left;
}
.ai-chat-ai-act-notice svg {
flex-shrink: 0;
margin-top: 2px;
color: #d97706;
width: 16px;
height: 16px;
}
body.dashboard-theme-dark .ai-chat-ai-act-notice {
background: rgba(245, 158, 11, 0.10);
border-color: rgba(245, 158, 11, 0.25);
color: #fbbf24;
}
.ai-chat-examples-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px; width: 100%; max-width: 420px;
}
.ai-chat-example-btn {
display: flex; flex-direction: column; align-items: flex-start;
padding: 14px 16px;
background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
color: var(--text-primary); font-size: 13px; text-align: left;
cursor: pointer; position: relative; overflow: hidden;
transition: all 0.2s ease;
}
.ai-chat-example-btn::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(8,145,178,0.04) 0%, rgba(20,184,166,0.04) 100%);
opacity: 0; transition: opacity 0.2s ease;
}
.ai-chat-example-btn:hover { border-color: rgba(8,145,178,0.3); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.ai-chat-example-btn:hover::before { opacity: 1; }
.ai-chat-example-btn:active { transform: translateY(0); }
.ai-chat-example-btn strong {
color: var(--primary); font-size: 13px; font-weight: 600; margin-bottom: 3px;
display: flex; align-items: center; gap: 6px; white-space: nowrap;
position: relative; z-index: 1;
}
.ai-chat-example-btn small { color: var(--text-muted); font-size: 12px; line-height: 1.4; position: relative; z-index: 1; }
@media (max-width: 500px) { .ai-chat-examples-grid { grid-template-columns: 1fr; } }
/* ==================== Input Area ==================== */
.ai-chat-input-area {
padding: 14px 24px 18px;
background: var(--bg-card);
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.ai-chat-input-toolbar {
display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
/* Mode Select - segmented control look */
.ai-chat-mode-control {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 500; color: var(--text-muted); user-select: none;
}
.ai-chat-mode-select {
height: 30px; padding: 0 10px;
border-radius: 8px;
border: 1px solid var(--border); background: var(--bg-secondary);
color: var(--text-primary); font-size: 12px; font-weight: 600;
cursor: pointer; transition: all 0.15s ease;
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 8px center; padding-right: 26px;
}
.ai-chat-mode-select:focus {
outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(8,145,178,0.1);
}
/* Input Wrapper - modern chat bar */
.ai-chat-input-wrapper {
display: flex; align-items: flex-end; gap: 10px;
background: var(--bg-secondary);
border: 1.5px solid var(--border);
border-radius: 14px;
padding: 8px 8px 8px 18px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ai-chat-input-wrapper:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(8,145,178,0.08), 0 2px 8px rgba(8,145,178,0.06);
}
.ai-chat-input {
flex: 1; padding: 8px 0; background: transparent; border: none;
color: var(--text-primary); font-size: 14px; font-family: inherit;
resize: none; min-height: 22px; max-height: 260px; line-height: 1.5;
overflow-y: auto;
}
.ai-chat-input:focus { outline: none; }
.ai-chat-input::placeholder { color: var(--text-muted); }
/* Send Button - circular gradient */
.ai-chat-send {
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
border: none; border-radius: 10px;
color: white; cursor: pointer; flex-shrink: 0;
transition: transform 0.15s ease, box-shadow 0.2s ease;
box-shadow: 0 2px 8px rgba(8,145,178,0.2);
}
.ai-chat-send svg { width: 18px; height: 18px; transition: transform 0.15s ease; }
.ai-chat-send:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(8,145,178,0.3);
}
.ai-chat-send:hover:not(:disabled) svg { transform: translateX(1px); }
.ai-chat-send:active:not(:disabled) { transform: translateY(0) scale(0.95); }
.ai-chat-send:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }
/* Loading Animation */
.ai-chat-loading { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.ai-chat-loading-text { font-size: 13px; color: var(--text-muted); }
.ai-chat-loading-dots { display: flex; gap: 5px; }
.ai-chat-loading-dots span {
width: 7px; height: 7px;
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
border-radius: 50%;
animation: aiChatBounce 1.4s infinite ease-in-out;
}
.ai-chat-loading-dots span:nth-child(1) { animation-delay: 0s; }
.ai-chat-loading-dots span:nth-child(2) { animation-delay: 0.16s; }
.ai-chat-loading-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes aiChatBounce {
0%, 80%, 100% { transform: scale(0.5); opacity: 0.3; }
40% { transform: scale(1.1); opacity: 1; }
}
/* Function Calls */
.ai-chat-functions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.ai-chat-functions-label {
font-size: 10px; font-weight: 700; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px;
}
.ai-chat-function {
background: var(--bg-secondary); padding: 8px 12px; border-radius: 8px;
margin-top: 4px; font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 12px;
border: 1px solid var(--border); display: flex; align-items: center; gap: 8px;
}
.ai-chat-function-icon {
width: 20px; height: 20px;
background: linear-gradient(135deg, rgba(8,145,178,0.1) 0%, rgba(20,184,166,0.1) 100%);
border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ai-chat-function-icon svg { width: 12px; height: 12px; color: var(--primary); }
.ai-chat-function-name { color: var(--primary); font-weight: 600; }
.ai-chat-function-result { color: #10b981; margin-left: auto; font-weight: 600; }
/* AI Chat Button active state */
#aiChatToggleBtn.active {
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
color: white; border-color: transparent;
box-shadow: 0 2px 8px rgba(8,145,178,0.25);
}
/* Legacy close button support */
.ai-chat-close {
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
background: transparent; border: none; border-radius: 8px;
color: var(--text-muted); cursor: pointer;
transition: background 0.15s ease, color 0.15s ease; font-size: 14px;
}
.ai-chat-close:hover { background: var(--bg-hover); color: var(--text-primary); }
/* ==================== AI Advisor Fullscreen Canvas ==================== */
.ai-advisor-fs-overlay {
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: aiFsOverlayIn 0.3s ease-out;
}
@keyframes aiFsOverlayIn {
from { opacity: 0; }
to { opacity: 1; }
}
.ai-advisor-fs-panel {
width: calc(100vw - 48px);
height: calc(100vh - 48px);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow: 0 32px 100px rgba(0, 0, 0, 0.35);
display: flex;
flex-direction: column;
overflow: hidden;
animation: aiFsPanelIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes aiFsPanelIn {
from {
opacity: 0;
transform: scale(0.95) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.ai-advisor-fs-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #14b8a6 100%);
border-bottom: none;
}
.ai-advisor-fs-title {
font-size: 16px;
font-weight: 700;
color: white;
display: flex;
align-items: center;
gap: 10px;
}
.ai-advisor-fs-header .btn-icon {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
color: white;
border-radius: 10px;
}
.ai-advisor-fs-header .btn-icon:hover {
background: rgba(255, 255, 255, 0.25);
}
.ai-advisor-fs-body {
flex: 1;
background: var(--bg-dark);
padding: 0;
}
.ai-advisor-fs-iframe {
width: 100%;
height: 100%;
border: none;
display: block;
background: var(--bg-dark);
}
/* ==================== Social System UI ==================== */
/* ==================== Explore Toolbar – Redesign ==================== */
.xpl-bar {
position: sticky;
top: 0;
z-index: 20;
background: var(--bg-card);
border-bottom: 1px solid var(--border);
margin: 0 -32px;
padding: 0 32px;
}
@media (max-width: 600px) { .xpl-bar { margin: 0 -16px; padding: 0 16px; } }
.xpl-bar-row { padding: 12px 0; }
.xpl-bar-row--search { padding-top: 18px; padding-bottom: 8px; }
.xpl-bar-row--filters {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 14px;
flex-wrap: wrap;
}
/* Search */
.xpl-search {
position: relative;
display: flex;
align-items: center;
}
.xpl-search-icon {
position: absolute;
left: 14px;
color: var(--text-muted);
pointer-events: none;
transition: color 0.15s ease;
}
.xpl-search:focus-within .xpl-search-icon { color: var(--primary); }
.xpl-search-input {
width: 100%;
padding: 11px 38px 11px 42px;
background: var(--bg-secondary);
border: 1.5px solid var(--border);
border-radius: 12px;
font-size: 14px;
font-family: inherit;
color: var(--text-primary);
outline: none;
transition: var(--transition-fast);
}
.xpl-search-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-glow);
background: var(--bg-card);
}
.xpl-search-input::placeholder { color: var(--text-muted); }
.xpl-search-clear {
position: absolute;
right: 8px;
border: none;
background: none;
color: var(--text-muted);
cursor: pointer;
padding: 4px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-fast);
}
.xpl-search-clear:hover { color: var(--text-primary); background: var(--bg-hover); }
/* Filter pill – shared base */
.xpl-filter {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 10px;
transition: var(--transition-fast);
white-space: nowrap;
}
.xpl-filter:hover, .xpl-filter:focus-within {
border-color: var(--primary);
background: rgba(8,145,178,0.04);
}
.xpl-filter-icon { color: var(--text-muted); flex-shrink: 0; }
.xpl-filter:hover .xpl-filter-icon,
.xpl-filter:focus-within .xpl-filter-icon { color: var(--primary); }
.xpl-filter-label {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
}
/* Select inside pill */
.xpl-select {
padding: 0;
background: transparent;
border: none;
font-size: 13px;
font-weight: 600;
font-family: inherit;
color: var(--text-primary);
cursor: pointer;
outline: none;
appearance: none;
-webkit-appearance: none;
padding-right: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0 center;
}
/* DTE inputs inside pill */
.xpl-dte-input {
width: 48px;
padding: 2px 4px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 13px;
font-weight: 600;
font-family: inherit;
color: var(--text-primary);
text-align: center;
outline: none;
transition: var(--transition-fast);
-moz-appearance: textfield;
appearance: textfield;
}
.xpl-dte-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--primary-glow);
}
.xpl-dte-input::placeholder { color: var(--text-muted); font-weight: 400; }
.xpl-dte-input::-webkit-inner-spin-button,
.xpl-dte-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.xpl-dte-sep {
font-size: 12px;
color: var(--text-muted);
margin: 0 2px;
}
/* Reset button */
.xpl-reset-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-card);
font-size: 12px;
font-weight: 600;
font-family: inherit;
color: var(--text-secondary);
cursor: pointer;
transition: var(--transition-fast);
white-space: nowrap;
margin-left: auto;
}
.xpl-reset-btn:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(8,145,178,0.04);
}
.xpl-reset-btn svg { flex-shrink: 0; }
.xpl-fav-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-secondary);
font-size: 12px;
font-weight: 600;
font-family: inherit;
color: var(--text-secondary);
cursor: pointer;
transition: var(--transition-fast);
white-space: nowrap;
}
.xpl-fav-toggle:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(8,145,178,0.04);
}
.xpl-fav-toggle.active {
border-color: #f59e0b;
color: #f59e0b;
background: rgba(245,158,11,0.08);
}
.xpl-fav-toggle svg { flex-shrink: 0; }
.btn-icon.fav-btn svg { transition: transform 0.15s ease; }
.btn-icon.fav-btn.active svg {
fill: #f59e0b;
stroke: #f59e0b;
transform: scale(1.15);
}
@media (max-width: 640px) {
.xpl-bar-row--filters { gap: 8px; }
.xpl-filter { padding: 5px 10px; font-size: 12px; }
.xpl-fav-toggle { padding: 5px 10px; font-size: 12px; }
.xpl-reset-btn { margin-left: 0; width: 100%; justify-content: center; }
}
/* Keep old class refs for pager / DTE range (used by JS pager render) */
.explore-filter-select {
padding: 10px 32px 10px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
cursor: pointer;
outline: none;
transition: all 0.2s ease;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
min-width: 120px;
}
.explore-filter-select:hover { border-color: var(--border-hover); }
.explore-filter-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
/* ==================== Users Tab (Social) – Redesign ==================== */
.up-layout {
display: grid;
grid-template-columns: 300px 1fr;
min-height: 520px;
}
@media (max-width: 900px) {
.up-layout { grid-template-columns: 1fr; min-height: auto; }
.up-sidebar { border-right: none; border-bottom: 1px solid var(--border); max-height: 340px; }
}
/* Sidebar */
.up-sidebar {
display: flex;
flex-direction: column;
border-right: 1px solid var(--border);
background: var(--bg-secondary);
overflow: hidden;
}
.up-search-wrap {
position: relative;
padding: 16px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.up-search-icon {
position: absolute;
left: 28px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
}
.up-search-input {
width: 100%;
padding: 10px 36px 10px 40px;
border: 1.5px solid var(--border);
border-radius: 12px;
background: var(--bg-card);
color: var(--text-primary);
font-size: 14px;
font-family: inherit;
outline: none;
transition: var(--transition-fast);
}
.up-search-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-glow);
}
.up-search-input::placeholder { color: var(--text-muted); }
.up-search-clear {
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
border: none;
background: none;
color: var(--text-muted);
cursor: pointer;
padding: 4px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-fast);
}
.up-search-clear:hover { color: var(--text-primary); background: var(--bg-hover); }
/* Results list */
.up-results {
flex: 1;
overflow-y: auto;
padding: 8px;
}
.up-results-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 40px 16px;
color: var(--text-muted);
font-size: 13px;
text-align: center;
}
.up-result-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
text-align: left;
padding: 10px 12px;
border: none;
border-radius: 12px;
background: transparent;
cursor: pointer;
transition: var(--transition-fast);
color: inherit;
font-family: inherit;
}
.up-result-item:hover { background: var(--bg-hover); }
.up-result-item.active { background: rgba(8, 145, 178, 0.1); }
.up-result-item .user-avatar { flex-shrink: 0; }
.up-result-info { flex: 1; min-width: 0; }
.up-result-name {
font-weight: 700;
font-size: 14px;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.up-result-sub {
font-size: 12px;
color: var(--text-secondary);
margin-top: 1px;
}
.up-result-arrow {
flex-shrink: 0;
color: var(--text-muted);
opacity: 0;
transform: translateX(-4px);
transition: var(--transition-fast);
}
.up-result-item:hover .up-result-arrow { opacity: 1; transform: translateX(0); }
/* Main / Profile area */
.up-main {
flex: 1;
overflow-y: auto;
padding: 28px 32px;
}
@media (max-width: 600px) { .up-main { padding: 20px 16px; } }
.up-profile-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 300px;
color: var(--text-muted);
font-size: 14px;
text-align: center;
}
/* Profile header – compact bar */
.up-profile-hero {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 14px;
margin-bottom: 20px;
}
.up-profile-avatar-wrap {
flex-shrink: 0;
position: relative;
}
.up-profile-avatar-wrap .user-avatar {
width: 44px;
height: 44px;
font-size: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.up-profile-avatar-ring {
position: absolute;
inset: -3px;
border-radius: 50%;
border: 2px solid var(--primary);
opacity: 0.25;
}
.up-profile-details { flex: 1; min-width: 0; }
.up-profile-username {
font-weight: 800;
font-size: 16px;
color: var(--text-primary);
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
}
.up-profile-meta-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 3px;
flex-wrap: wrap;
}
.up-profile-uid-badge {
display: inline-flex;
padding: 1px 7px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 5px;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.up-profile-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 8px;
font-size: 11px;
font-weight: 700;
border-radius: 5px;
font-variant-numeric: tabular-nums;
}
.up-profile-chip svg { flex-shrink: 0; }
.up-profile-chip--strat { background: rgba(8,145,178,0.1); color: var(--primary); }
.up-profile-chip--likes { background: rgba(16,185,129,0.1); color: var(--success); }
.up-profile-chip--comments { background: rgba(59,130,246,0.1); color: var(--info); }
.up-profile-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.up-profile-action-btn {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-secondary);
cursor: pointer;
transition: var(--transition-fast);
font-size: 14px;
}
.up-profile-action-btn:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(8,145,178,0.06);
transform: translateY(-1px);
}
/* Section headings in profile */
.up-section-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.up-section-title {
font-weight: 700;
font-size: 14px;
color: var(--text-primary);
}
.up-section-count {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1px 8px;
font-size: 11px;
font-weight: 700;
background: var(--primary);
color: white;
border-radius: 20px;
min-width: 20px;
}
/* Profile published strategies use .strategies-grid from dashboard */
.up-empty-published {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 32px 16px;
color: var(--text-muted);
font-size: 13px;
text-align: center;
}
/* Loading spinner for profile */
.up-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 60px 16px;
color: var(--text-secondary);
font-size: 14px;
}
.up-spinner {
width: 20px;
height: 20px;
border: 2.5px solid var(--border);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
.up-results-searching {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px 16px;
color: var(--text-secondary);
font-size: 13px;
}
/* Keep backward compat for old class refs */
.users-muted { color: var(--text-secondary); font-size: 13px; }
.users-icon-btn {
width: 26px; height: 26px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 9px; border: 1px solid var(--border);
background: var(--bg-card); color: var(--text-secondary);
cursor: pointer; transition: var(--transition-fast);
box-shadow: var(--shadow-sm); font-size: 12px;
}
.users-icon-btn:hover { border-color: var(--border-hover); background: var(--bg-hover); color: var(--text-primary); }
/* (old DTE range styles removed – replaced by .xpl-dte-* in toolbar redesign) */
/* Explore Pagination */
.explore-pager {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border);
gap: 16px;
flex-wrap: wrap;
}
.explore-pager-info {
color: var(--text-secondary);
font-size: 13px;
}
.explore-pager-buttons {
display: flex;
gap: 8px;
align-items: center;
}
/* Sparkline Container */
.social-sparkline {
width: 80px;
height: 28px;
flex-shrink: 0;
}
.social-sparkline svg {
width: 100%;
height: 100%;
}
.social-sparkline-positive {
stroke: #10b981;
fill: rgba(16, 185, 129, 0.12);
}
.social-sparkline-negative {
stroke: #ef4444;
fill: rgba(239, 68, 68, 0.12);
}
/* Performance Badges */
.social-badges {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.social-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.social-badge-return {
background: rgba(16, 185, 129, 0.12);
color: #10b981;
}
.social-badge-risk {
background: rgba(59, 130, 246, 0.12);
color: #3b82f6;
}
.social-badge-trending {
background: rgba(249, 115, 22, 0.12);
color: #f97316;
}
/* Explore Card Info Section */
.explore-card-info {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.explore-card-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 13px;
}
.explore-card-row:last-child {
margin-bottom: 0;
}
.explore-card-label {
color: var(--text-secondary);
}
.explore-card-value {
color: var(--text-primary);
font-weight: 500;
}
.explore-card-value.positive { color: #10b981; font-weight: 600; }
.explore-card-value.negative { color: #ef4444; font-weight: 600; }
/* Explore Card Author Tag */
.explore-card-author {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 12px;
color: var(--text-secondary);
margin-top: 8px;
}
.explore-card-author-name {
color: var(--text-primary);
font-weight: 600;
}
/* User Avatar (Generated from initials) */
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: white;
flex-shrink: 0;
text-transform: uppercase;
}
.user-avatar-sm {
width: 24px;
height: 24px;
font-size: 10px;
}
.user-avatar-lg {
width: 40px;
height: 40px;
font-size: 14px;
}
/* Card Header with Avatar */
.explore-card-header-row {
display: flex;
align-items: flex-start;
gap: 12px;
}
.explore-card-header-text {
flex: 1;
min-width: 0;
}
/* Explore Card Actions */
.explore-card-actions {
display: flex;
gap: 6px;
}
.explore-card-actions .btn-icon {
width: 32px;
height: 32px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid var(--border);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s ease;
}
.explore-card-actions .btn-icon:hover {
background: var(--bg-secondary);
color: var(--text-primary);
border-color: var(--border-hover);
}
.explore-card-actions .btn-icon.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.explore-card-actions .btn-icon svg {
width: 14px;
height: 14px;
}
/* Published Detail: Like/Dislike mit Count unter dem Icon */
.pub-reaction-btn {
display: flex !important;
flex-direction: column;
gap: 2px;
width: 44px !important;
height: 44px !important;
padding: 6px 0 !important;
justify-content: center;
align-items: center;
}
.pub-reaction-btn svg {
width: 14px;
height: 14px;
}
.pub-reaction-count {
font-size: 11px;
font-weight: 800;
line-height: 1;
opacity: 0.95;
}
.pub-reaction-btn.active .pub-reaction-count {
color: white;
}
/* Modal Slide Animation */
@keyframes socialModalSlideIn {
from {
opacity: 0;
transform: translateY(20px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modal-overlay.show .modal {
animation: socialModalSlideIn 0.2s ease-out;
}
/* Enhanced Detail Modal */
#publishedDetailModal .modal {
max-width: 1100px;
}
.social-detail-layout {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 20px;
margin-top: 16px;
}
@media (max-width: 800px) {
.social-detail-layout {
grid-template-columns: 1fr;
}
}
.social-detail-left {
display: flex;
flex-direction: column;
gap: 16px;
}
.social-detail-right {
min-height: 300px;
}
/* KPI Grid in Detail */
.social-kpi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
@media (max-width: 600px) {
.social-kpi-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.social-kpi-item {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
text-align: center;
}
.social-kpi-label {
font-size: 11px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.social-kpi-value {
font-size: 18px;
font-weight: 800;
color: var(--text-primary);
}
.social-kpi-value.positive { color: #10b981; }
.social-kpi-value.negative { color: #ef4444; }
/* Equity Chart Container */
.social-equity-chart {
width: 100%;
height: 300px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-card);
overflow: hidden;
}
.social-equity-chart-title {
font-weight: 700;
font-size: 14px;
color: var(--text-primary);
margin-bottom: 10px;
}
/* Description box */
.social-description-box {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.5;
white-space: pre-wrap;
max-height: 120px;
overflow-y: auto;
}
.social-description-box:empty::before {
content: 'Keine Beschreibung vorhanden.';
font-style: italic;
}
/* Modern Comments Section */
.comments-section {
margin-top: 20px;
border-top: 1px solid var(--border);
padding-top: 16px;
}
.comments-header {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 14px;
color: var(--text-primary);
margin-bottom: 12px;
}
.comments-header svg {
color: var(--text-secondary);
}
.comments-list {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 280px;
overflow-y: auto;
padding-right: 6px;
scrollbar-width: thin;
overscroll-behavior: contain;
touch-action: pan-y;
}
.comments-list::-webkit-scrollbar {
width: 6px;
}
.comments-list::-webkit-scrollbar-track {
background: transparent;
}
.comments-list::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
.comment-input-wrapper {
display: flex;
align-items: flex-end;
gap: 8px;
margin-top: 12px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 12px;
padding: 8px 8px 8px 14px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.comment-input-wrapper:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.comment-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--text-primary);
font-size: 14px;
font-family: inherit;
resize: none;
min-height: 24px;
max-height: 120px;
line-height: 1.5;
padding: 0;
}
.comment-input::placeholder {
color: var(--text-secondary);
opacity: 0.7;
}
.comment-send-btn {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--accent);
border: none;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, transform 0.1s ease;
}
.comment-send-btn:hover {
background: var(--accent-hover, #4f46e5);
transform: scale(1.05);
}
.comment-send-btn:active {
transform: scale(0.95);
}
.comment-send-btn svg {
width: 16px;
height: 16px;
}
/* Comment Items */
.comment-empty {
color: var(--text-secondary);
font-size: 13px;
text-align: center;
padding: 16px;
}
.comment-item {
display: flex;
gap: 10px;
padding: 10px 12px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
transition: border-color 0.15s ease;
}
.comment-item:hover {
border-color: var(--border-hover, var(--border));
}
.comment-item:hover .comment-delete-btn {
opacity: 1;
}
.comment-item:hover .comment-report-btn {
opacity: 1;
}
.comment-avatar {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: white;
text-transform: uppercase;
}
.comment-body {
flex: 1;
min-width: 0;
}
.comment-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.comment-author {
font-weight: 600;
font-size: 13px;
color: var(--text-primary);
}
.comment-time {
font-size: 11px;
color: var(--text-secondary);
}
.comment-content {
font-size: 13px;
color: var(--text-primary);
line-height: 1.4;
white-space: pre-wrap;
word-break: break-word;
}
.comment-delete-btn {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 6px;
background: transparent;
border: none;
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.comment-report-btn {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 6px;
background: transparent;
border: none;
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.comment-delete-btn:hover {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
.comment-report-btn:hover {
background: rgba(245, 158, 11, 0.12);
color: #f59e0b;
}
.comment-delete-btn svg {
width: 14px;
height: 14px;
}
.comment-report-btn svg {
width: 14px;
height: 14px;
}
/* Flag-Icon soll so klein wirken wie bei users-icon-btn */
.comment-report-btn {
font-size: 12px;
font-weight: 600;
line-height: 1;
}
/* Flag-Buttons innerhalb btn-icon (Explore/Published Detail) */
.btn-icon.report-flag-btn {
font-size: 12px;
font-weight: 600;
line-height: 1;
}
.comment-admin-actions {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
.comment-filter-bar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.comment-filter-select {
height: 30px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-primary);
font-size: 12px;
padding: 4px 8px;
}
.comment-filter-chip {
height: 28px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-secondary);
font-size: 12px;
padding: 0 10px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.comment-filter-chip.active {
border-color: var(--accent);
color: var(--text-primary);
background: rgba(20, 184, 166, 0.1);
}
.comment-actions {
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
font-size: 12px;
color: var(--text-secondary);
}
.comment-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
padding: 2px 0;
}
.comment-action-btn.active {
color: var(--accent);
}
.comment-action-btn svg {
width: 14px;
height: 14px;
fill: none;
}
.comment-action-btn.active svg {
fill: var(--error);
stroke: var(--error);
animation: heartPop 0.18s ease;
}
.comment-replies {
margin-top: 8px;
padding-left: 8px;
border-left: 2px solid var(--border);
display: none;
}
.comment-replies.open {
display: block;
}
.reply-item {
display: flex;
gap: 8px;
padding: 8px 10px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 10px;
margin-top: 8px;
}
.reply-avatar {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: white;
text-transform: uppercase;
}
.reply-body {
flex: 1;
min-width: 0;
}
.reply-meta {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 2px;
}
.reply-author {
font-weight: 600;
font-size: 12px;
color: var(--text-primary);
}
.reply-time {
font-size: 11px;
color: var(--text-secondary);
}
.reply-content {
font-size: 12px;
color: var(--text-primary);
line-height: 1.4;
white-space: pre-wrap;
word-break: break-word;
}
.reply-actions {
display: flex;
align-items: center;
gap: 10px;
margin-top: 4px;
font-size: 12px;
}
.reply-more-btn {
margin-top: 8px;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-primary);
border-radius: 8px;
padding: 4px 10px;
font-size: 12px;
cursor: pointer;
}
.comments-more-btn {
width: 100%;
margin-top: 10px;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-primary);
border-radius: 8px;
padding: 8px 12px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.comments-more-btn:hover {
background: var(--bg-hover, var(--bg-card));
}
.comments-more-btn:disabled {
opacity: 0.6;
cursor: default;
}
.comment-reply-composer {
margin-top: 8px;
display: none;
}
.comment-reply-composer.open {
display: block;
}
.comment-reply-input-wrapper {
display: flex;
align-items: flex-end;
gap: 8px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 12px;
padding: 8px 8px 8px 12px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.comment-reply-input-wrapper:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.comment-reply-input {
width: 100%;
min-height: 28px;
max-height: 100px;
resize: none;
border: none;
background: transparent;
padding: 0;
font-size: 12px;
color: var(--text-primary);
outline: none;
}
.comment-reply-error {
margin-top: 4px;
font-size: 11px;
color: var(--error);
}
@keyframes heartPop {
0% { transform: scale(1); }
60% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* ==================== SLIDE-OUT PANEL SYSTEM ==================== */
/* Overlay hinter dem Panel - klickbar zum Schließen */
.slide-out-overlay {
position: fixed;
top: var(--bbt-header-offset, 0px); /* Unter der Menüleiste */
left: 0;
width: 100%;
height: calc(100vh - var(--bbt-header-offset, 0px));
background: rgba(0, 0, 0, 0.70);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
z-index: 900;
}
.slide-out-overlay.active {
opacity: 1;
visibility: visible;
}
/*
* Spotlight-Modus: Sobald eine Strategy-Card geoeffnet wird, uebernimmt ein
* SVG-Overlay (per JS injiziert) die Abdunklung und laesst nur die gerade
* bearbeitete Karte hell. Der flaechige CSS-Hintergrund wird dann transparent,
* damit die Karte nicht doppelt abgedunkelt wird.
*/
.slide-out-overlay.has-spotlight {
background: transparent;
}
/* Haupt-Panel Container */
.slide-out-panel {
position: fixed;
top: calc(var(--bbt-header-offset, 0px) + 16px); /* Mehr Abstand zur Menüleiste */
right: 0;
height: calc(100vh - (var(--bbt-header-offset, 0px) + 16px));
width: 600px;
background: var(--bg-card);
border-left: 1px solid var(--border);
border-top-left-radius: 20px; /* Abgerundete Ecke oben links */
border-bottom-left-radius: 20px; /* Abgerundete Ecke unten links */
box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
display: flex;
flex-direction: column;
overflow: hidden;
}
.slide-out-panel.active {
transform: translateX(0);
}
/* Level 2 - Panel erweitert sich (Trigger: volle Breite) */
.slide-out-panel.level-2 {
width: 1600px;
}
/* Level 2 Legs - Panel schmaler für Leg-Einstellungen */
.slide-out-panel.level-2.level-2-legs {
width: 1250px;
}
/* Panel Header */
.slide-out-header {
display: flex;
align-items: center;
gap: 16px;
padding: 24px 28px;
border-bottom: 1px solid var(--border);
background: var(--bg-card);
border-top-left-radius: 20px;
flex-shrink: 0;
}
.slide-out-back-btn {
display: none;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text-primary);
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s ease, transform 0.15s ease;
}
.slide-out-back-btn:hover {
background: var(--bg-hover);
transform: translateX(-2px);
}
@media (max-width: 768px) {
.slide-out-back-btn {
display: flex;
}
}
.slide-out-header .btn-back {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text-secondary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.slide-out-header .btn-back:hover {
background: var(--bg-hover);
color: var(--text-primary);
border-color: var(--primary);
}
.slide-out-header .strategy-title {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
flex: 1;
margin: 0;
}
/* Zwei-Spalten Layout im Panel */
.slide-out-content {
display: flex;
flex: 1;
overflow: hidden;
}
/* Linke Spalte - Detail-Formulare (initial versteckt) */
.slide-out-detail {
width: 0;
min-width: 0;
overflow: hidden;
opacity: 0;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s ease-out,
min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-right: 1px solid transparent;
display: flex;
flex-direction: column;
background: var(--bg-secondary);
}
body.dashboard-theme-dark .slide-out-detail {
background: color-mix(in srgb, var(--bg-card) 70%, var(--bg-secondary));
}
.slide-out-panel.level-2 .slide-out-detail {
width: 1000px;
min-width: 700px;
opacity: 1;
border-right: 1px solid var(--border);
box-shadow: 4px 0 12px rgba(0,0,0,0.08);
}
body.dashboard-theme-dark .slide-out-panel.level-2 .slide-out-detail {
border-right-color: color-mix(in srgb, var(--primary, #0891b2) 20%, var(--border));
box-shadow: 4px 0 20px rgba(0,0,0,0.25);
}
.slide-out-panel.level-2.level-2-legs .slide-out-detail {
width: 700px;
min-width: 500px;
}
.slide-out-detail-inner {
padding: 24px;
overflow-y: auto;
flex: 1;
}
.slide-out-detail-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid var(--border);
background: var(--bg-card);
flex-shrink: 0;
}
body.dashboard-theme-dark .slide-out-detail-header {
border-bottom: 2px solid color-mix(in srgb, var(--primary, #0891b2) 25%, var(--border));
background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #0891b2) 10%, var(--bg-tertiary)), var(--bg-tertiary));
}
.slide-out-detail-title {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: 0.2px;
}
.slide-out-detail-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-secondary);
cursor: pointer;
font-size: 18px;
transition: all 0.2s ease;
}
.slide-out-detail-close:hover {
background: var(--error);
border-color: var(--error);
color: white;
}
/* Rechte Spalte - Accordions (immer sichtbar) */
.slide-out-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.slide-out-main-inner {
padding: 28px 28px 24px 28px;
overflow-y: auto;
overflow-x: hidden;
flex: 1;
}
/* Animation für Panel-Inhalt */
@keyframes slideOutFadeIn {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.slide-out-panel.active .slide-out-main-inner {
animation: slideOutFadeIn 0.4s ease-out 0.1s both;
}
.slide-out-panel.level-2 .slide-out-detail-inner {
animation: slideOutFadeIn 0.3s ease-out both;
}
/* ===== CONTEXT DIMMING — Tutorial-style cutout (Compact Mode) ===== */
#detailDimmingOverlay {
position: fixed;
z-index: 9999;
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
}
#detailDimmingOverlay.active {
opacity: 1;
pointer-events: all;
cursor: pointer;
}
.slide-out-panel.detail-dimming .slide-out-main-inner * {
pointer-events: none !important;
}
/* ===== STRATEGY OVERVIEW MODE ===== */
/*
* Visual depth hierarchy (dark theme):
* Level 0 – Panel background → inherits slide-out bg
* Level 1 – Section cards → elevated, distinct bg + strong shadow
* Level 2 – Item cards → recessed into section, subtle inset look
* Level 3 – Inline editors → accent-bordered, deepest layer
*/
.slide-out-panel.strategy-overview-mode {
width: 75vw !important;
background: color-mix(in srgb, var(--bg-card) 92%, #000);
}
body.dashboard-theme-dark .slide-out-panel.strategy-overview-mode {
background: color-mix(in srgb, var(--bg-secondary) 82%, #000);
}
.slide-out-panel.strategy-overview-mode .slide-out-content {
flex-direction: column !important;
height: 100%;
}
.slide-out-panel.strategy-overview-mode .slide-out-detail {
display: none !important;
}
.slide-out-panel.strategy-overview-mode .slide-out-main {
flex: 1;
width: 100%;
min-width: 0;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.slide-out-panel.strategy-overview-mode .slide-out-main-inner {
max-width: 100%;
margin: 0;
padding: 0 24px 40px 24px;
}
/* ── Column layout ── */
.slide-out-panel.strategy-overview-mode .accordion {
display: flex;
flex-wrap: wrap;
gap: 18px;
padding: 6px;
}
.slide-out-panel.strategy-overview-mode .accordion > .ov-column {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.slide-out-panel.strategy-overview-mode .accordion > .accordion-item,
.slide-out-panel.strategy-overview-mode .accordion > #backtestRunsSection,
.slide-out-panel.strategy-overview-mode .ov-column > .accordion-item,
.slide-out-panel.strategy-overview-mode .ov-column > #backtestRunsSection {
min-width: 0;
max-width: 100%;
}
.slide-out-panel.strategy-overview-mode .accordion > #backtestRunsSection {
width: 100%;
}
/* ── Accordion always open ── */
.slide-out-panel.strategy-overview-mode .accordion-content {
max-height: none !important;
overflow: visible !important;
opacity: 1 !important;
}
.slide-out-panel.strategy-overview-mode .accordion-content .accordion-body {
opacity: 1 !important;
}
/* ── Level 1: Section cards ── */
.slide-out-panel.strategy-overview-mode .accordion-item {
background: var(--bg-card);
border: none;
border-radius: 12px;
margin-bottom: 0;
padding: 0;
overflow: visible;
box-shadow:
0 0 0 2.5px color-mix(in srgb, var(--accent, #6366f1) 65%, var(--border)),
0 4px 18px rgba(0,0,0,0.12);
}
body.dashboard-theme-dark .slide-out-panel.strategy-overview-mode .accordion-item {
background: var(--bg-secondary);
box-shadow:
0 0 0 2.5px color-mix(in srgb, var(--accent, #6366f1) 70%, var(--border)),
0 6px 20px rgba(0,0,0,0.30),
0 1px 3px rgba(0,0,0,0.18);
}
/* Section headers — colored top bar for each section */
.slide-out-panel.strategy-overview-mode .accordion-header {
cursor: pointer;
background: color-mix(in srgb, var(--accent, #6366f1) 6%, var(--bg-tertiary));
padding: 16px 22px;
border-bottom: 2px solid color-mix(in srgb, var(--accent, #6366f1) 20%, var(--border));
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
body.dashboard-theme-dark .slide-out-panel.strategy-overview-mode .accordion-header {
background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #6366f1) 15%, var(--bg-tertiary)), var(--bg-tertiary));
border-bottom-color: color-mix(in srgb, var(--accent, #6366f1) 30%, var(--border));
}
.slide-out-panel.strategy-overview-mode .accordion-header:hover {
background: color-mix(in srgb, var(--accent, #6366f1) 10%, var(--bg-tertiary));
}
body.dashboard-theme-dark .slide-out-panel.strategy-overview-mode .accordion-header:hover {
background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #6366f1) 22%, var(--bg-tertiary)), var(--bg-tertiary));
}
.slide-out-panel.strategy-overview-mode .accordion-icon {
display: none;
}
.slide-out-panel.strategy-overview-mode .accordion-title {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
color: var(--text-primary);
}
.slide-out-panel.strategy-overview-mode .accordion-body {
padding: 20px 22px 24px 22px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
body.dashboard-theme-dark .slide-out-panel.strategy-overview-mode .accordion-body {
background: color-mix(in srgb, var(--bg-card) 55%, var(--bg-secondary));
}
/* ── Step numbers ── */
.slide-out-panel.strategy-overview-mode .accordion-header .overview-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--accent, #6366f1);
color: #fff;
font-size: 13px;
font-weight: 800;
position: absolute;
left: 22px;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(99,102,241,0.4);
}
.slide-out-panel:not(.strategy-overview-mode) .overview-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--primary, #0891b2);
color: #fff;
font-size: 12px;
font-weight: 800;
position: absolute;
left: 22px;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(8,145,178,0.35);
}
/* ── Step icons (passend zum jeweiligen Einstellungsbereich) ── */
.accordion-header .overview-step-icon {
position: absolute;
left: 66px;
top: 50%;
transform: translateY(-50%);
font-size: 26px;
line-height: 1;
color: var(--primary, #0891b2);
opacity: 0.95;
pointer-events: none;
}
.slide-out-panel:not(.strategy-overview-mode) .accordion-header .overview-step-icon {
font-size: 24px;
}
/* ── Level 2: Item cards (LegGroup, Indicator) ── */
.slide-out-panel.strategy-overview-mode .leggroup-card,
.slide-out-panel.strategy-overview-mode .indicator-card {
border-radius: 8px;
margin-bottom: 10px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-left: 4px solid #d4781f;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), 0 3px 14px rgba(0,0,0,0.12), 0 6px 22px rgba(0,0,0,0.07);
}
body.dashboard-theme-dark .slide-out-panel.strategy-overview-mode .leggroup-card,
body.dashboard-theme-dark .slide-out-panel.strategy-overview-mode .indicator-card {
background: color-mix(in srgb, var(--bg-card) 60%, var(--bg-secondary));
box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 7px 28px rgba(0,0,0,0.70), 0 4px 12px rgba(0,0,0,0.50);
}
.slide-out-panel.strategy-overview-mode .leggroup-card-header,
.slide-out-panel.strategy-overview-mode .indicator-card-header {
padding: 12px 16px;
}
.slide-out-panel.strategy-overview-mode .leggroup-card-title,
.slide-out-panel.strategy-overview-mode .indicator-card-title {
font-size: 15px;
font-weight: 600;
}
.slide-out-panel.strategy-overview-mode .leggroup-card-info,
.slide-out-panel.strategy-overview-mode .indicator-card-info {
font-size: 13px;
}
/* Leg rows */
.slide-out-panel.strategy-overview-mode .leg-row {
padding: 7px 14px;
font-size: 14px;
border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.slide-out-panel.strategy-overview-mode .leg-row:last-child {
border-bottom: none;
}
/* Leg info tags – only visible in overview mode */
.leg-info-tags {
display: none;
}
.slide-out-panel.strategy-overview-mode .leg-row {
grid-template-columns: max-content max-content 1fr auto;
align-items: center;
}
.slide-out-panel.strategy-overview-mode .leg-cell--criterion {
display: none;
}
.slide-out-panel.strategy-overview-mode .leg-info-tags {
display: flex;
flex-wrap: wrap;
gap: 5px 8px;
align-items: center;
min-width: 0;
}
.leg-info-tag {
display: inline-block;
font-size: 12.5px;
line-height: 1.2;
padding: 3px 9px;
border-radius: 5px;
background: color-mix(in srgb, var(--primary, #0891b2) 10%, transparent);
color: var(--text-primary);
white-space: nowrap;
font-weight: 500;
}
body.dashboard-theme-dark .leg-info-tag {
background: color-mix(in srgb, var(--primary, #0891b2) 18%, transparent);
}
/* Trigger rows */
.slide-out-panel.strategy-overview-mode .trigger-row {
padding: 6px 14px;
font-size: 13px;
border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.slide-out-panel.strategy-overview-mode .trigger-row:last-of-type {
border-bottom: none;
}
/* ── Level 3: Inline detail editors ── */
.overview-inline-detail {
margin: 12px 0 0 0;
padding: 18px 20px;
background: var(--bg-tertiary);
border: 1px solid var(--border);
border-left: 4px solid var(--accent, #6366f1);
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
body.dashboard-theme-dark .overview-inline-detail {
background: var(--bg-card);
box-shadow: inset 0 2px 8px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.1);
}
.overview-inline-detail[id^="triggersPanel_"] {
margin-left: 8px;
}
.overview-inline-detail[id^="triggersPanel_"] > .accordion-header {
padding-left: 14px !important;
padding-right: 14px !important;
}
[id^="triggersPanel_"] h3[data-help-id="trg_panel_title"] {
padding-left: 14px;
}
/* ── Preset chips ── */
.slide-out-panel.strategy-overview-mode .lg-presets-window {
margin-bottom: 14px;
}
.slide-out-panel.strategy-overview-mode .lg-presets-chip-row {
gap: 6px;
}
/* ── Backtest Runs card ── */
.slide-out-panel.strategy-overview-mode #backtestRunsSection {
background: var(--bg-card);
border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent, #6366f1) 20%);
border-radius: 12px;
padding: 22px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
body.dashboard-theme-dark .slide-out-panel.strategy-overview-mode #backtestRunsSection {
background: var(--bg-secondary);
box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.15);
}
.slide-out-panel.strategy-overview-mode #backtestRunsSection > h3 {
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 16px;
}
/* ── Section Nav (hidden) ── */
.strategy-section-nav {
display: none !important;
}
/* ── Mode Toggle ── */
.fullscreen-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg-secondary);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.fullscreen-toggle-btn:hover {
background: var(--bg-hover);
color: var(--primary, #0891b2);
border-color: var(--primary, #0891b2);
transform: scale(1.05);
}
.fullscreen-toggle-btn .fs-icon-compress {
display: none;
}
.strategy-overview-mode .fullscreen-toggle-btn .fs-icon-expand {
display: none;
}
.strategy-overview-mode .fullscreen-toggle-btn .fs-icon-compress {
display: block;
}
/* ── Add-Buttons (Overview Mode) ── */
/* ── Responsive ── */
@media (max-width: 1400px) {
.slide-out-panel.strategy-overview-mode {
width: 85vw !important;
}
.slide-out-panel.strategy-overview-mode .slide-out-main-inner {
padding: 0 16px 30px 16px;
}
.slide-out-panel.strategy-overview-mode .accordion {
gap: 14px;
}
}
@media (max-width: 1000px) {
.slide-out-panel.strategy-overview-mode .accordion {
flex-direction: column;
}
.slide-out-panel.strategy-overview-mode .accordion > .ov-column {
flex: 1 1 100%;
}
}
@media (max-width: 768px) {
.slide-out-panel.strategy-overview-mode {
width: 100vw !important;
}
.slide-out-panel.strategy-overview-mode .slide-out-main-inner {
padding: 0 10px 24px 10px;
}
.slide-out-panel.strategy-overview-mode .accordion-body {
padding: 14px 16px 18px 16px;
}
.slide-out-panel.strategy-overview-mode .accordion-header {
padding: 12px 16px;
}
}
/* ===== END STRATEGY OVERVIEW MODE ===== */
/* Responsive Anpassungen für Slide-Out */
@media (max-width: 1700px) {
.slide-out-panel.level-2 {
width: 95%;
}
.slide-out-panel.level-2 .slide-out-detail {
width: 60%;
min-width: 500px;
}
}
@media (max-width: 1350px) {
.slide-out-panel.level-2 {
width: 95%;
}
.slide-out-panel.level-2.level-2-legs {
width: 95%;
}
.slide-out-panel.level-2 .slide-out-detail {
width: 55%;
min-width: 400px;
}
}
@media (max-width: 1200px) {
.slide-out-panel.level-2 {
width: 100%;
}
.slide-out-panel.level-2 .slide-out-detail {
width: 55%;
min-width: 400px;
}
}
@media (max-width: 768px) {
.slide-out-panel {
width: 100%;
top: 0;
height: 100vh;
height: 100dvh;
border-radius: 0;
}
.slide-out-header {
padding: 14px 16px;
gap: 10px;
border-radius: 0;
}
.slide-out-header .strategy-title {
font-size: 16px;
}
.slide-out-header .btn-action,
.slide-out-header #publishStrategyBtn {
padding: 8px 12px;
font-size: 12px;
}
.slide-out-main-inner {
padding: 12px;
}
.slide-out-detail-inner {
padding: 12px;
}
.slide-out-detail-header {
padding: 12px 16px;
}
.slide-out-detail-title {
font-size: 14px;
}
.accordion-header {
padding: 14px 16px;
}
.accordion-title {
font-size: 15px;
}
.accordion-icon {
font-size: 16px;
}
.accordion-body {
padding: 14px;
}
.form-row {
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 12px;
}
.form-field input,
.form-field textarea {
padding: 10px 12px;
font-size: 13px;
border-radius: 8px;
border-width: 1.5px;
}
.form-field select {
padding: 10px 32px 10px 12px;
font-size: 13px;
border-radius: 8px;
border-width: 1.5px;
}
.form-field label {
font-size: 11px;
margin-bottom: 5px;
}
.leg-row {
grid-template-columns: auto auto minmax(0, 1fr) auto;
column-gap: 6px;
padding: 10px 12px;
border-radius: 8px;
}
.leg-cell {
font-size: 12px;
}
.leg-cell--exec {
font-size: 11px;
font-weight: 600;
}
.leg-cell--type.type-call,
.leg-cell--type.type-put {
font-size: 9px;
padding: 2px 6px;
border-radius: 4px;
width: fit-content;
}
.trigger-row {
grid-template-columns: max-content minmax(0, 1fr) auto;
column-gap: 8px;
padding: 10px 12px;
border-radius: 8px;
}
.trigger-cell {
font-size: 12px;
}
.trigger-cell--fire-type {
font-size: 10px;
padding: 2px 6px;
}
.trigger-card {
padding: 10px;
}
.slide-out-panel.level-2 .slide-out-detail {
width: 100%;
min-width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
background: var(--bg-card);
z-index: 10;
}
.btn-action {
padding: 10px 16px;
font-size: 13px;
}
.btn-icon {
width: 32px;
height: 32px;
}
.leg-editor-section {
padding: 12px;
border-radius: 10px;
}
.leg-editor-section-header {
font-size: 12px;
gap: 6px;
}
.criterion-row {
gap: 8px;
}
.criterion-row > .criterion-value-field {
flex: 0 0 80px;
max-width: 100px;
}
.leg-exit-row {
flex-wrap: wrap;
gap: 6px;
}
.leg-exit-row .toggle-checkbox {
min-width: 90px;
padding: 5px 10px;
font-size: 12px;
}
.leg-exit-row .optional-field {
max-width: none;
flex: 1 1 100%;
}
.toggle-checkbox {
padding: 8px 14px;
font-size: 12px;
border-radius: 8px;
}
.checkbox-field {
margin-top: 14px;
}
.checkbox-field label {
font-size: 13px;
}
.adv-opt-group {
padding: 8px 10px;
}
.adv-opt-group-label {
font-size: 10px;
margin-bottom: 6px;
}
.adv-opt-toggles-row {
gap: 6px;
}
.adv-opt-child {
margin-left: 8px;
padding-left: 8px;
}
}
@media (max-width: 480px) {
.slide-out-header {
padding: 10px 12px;
gap: 8px;
}
.slide-out-header .strategy-title {
font-size: 14px;
}
.slide-out-main-inner {
padding: 8px;
}
.slide-out-detail-inner {
padding: 8px;
}
.accordion-header {
padding: 12px;
}
.accordion-title {
font-size: 14px;
}
.accordion-body {
padding: 8px;
}
.form-field input,
.form-field textarea {
padding: 8px 10px;
font-size: 12px;
}
.form-field select {
padding: 8px 28px 8px 10px;
font-size: 12px;
}
.leg-row {
padding: 8px 10px;
column-gap: 4px;
}
.leg-cell {
font-size: 10px;
}
.leg-cell--type.type-call,
.leg-cell--type.type-put {
font-size: 8px;
padding: 1px 4px;
}
.trigger-row {
padding: 8px 10px;
column-gap: 4px;
}
.trigger-cell {
font-size: 10px;
}
.leg-editor-section {
padding: 8px;
}
.criterion-row > .criterion-value-field {
flex: 1 1 100%;
max-width: none;
}
}
/* Wenn die UI keinen Platz hat (Mobile / schmales Fenster): Detail-Spalte als Overlay über dem Hauptbereich */
.slide-out-panel.level-2.bbt-detail-overlay .slide-out-detail {
width: 100%;
min-width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
background: var(--bg-card);
z-index: 10;
}
.slide-out-panel.level-2.bbt-detail-overlay .slide-out-main {
pointer-events: none;
}
/* ==================== MASS BACKTEST PANEL (LEFT) ==================== */
.mass-backtest-overlay {
position: fixed;
top: var(--bbt-header-offset, 0px);
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.25);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease;
z-index: 1000;
}
.mass-backtest-overlay.active {
opacity: 1;
visibility: visible;
}
.mass-backtest-sidebar {
--mass-sidebar-width: 240px;
position: fixed;
top: calc(var(--bbt-header-offset, 0px) + 12px);
left: 0;
height: calc(100vh - (var(--bbt-header-offset, 0px) + 24px));
width: var(--mass-sidebar-width);
background: var(--bg-card);
border-right: 1px solid var(--border);
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
box-shadow: var(--shadow-lg), 4px 0 12px rgba(0, 0, 0, 0.06);
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1002;
display: flex;
flex-direction: column;
overflow: hidden;
}
.mass-backtest-sidebar.active {
transform: translateX(0);
}
.mass-sidebar-header {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.mass-sidebar-title {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.6px;
}
.mass-sidebar-add-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg-secondary);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
}
.mass-sidebar-add-btn:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(8, 145, 178, 0.06);
}
.mass-sidebar-add-btn:active {
background: rgba(8, 145, 178, 0.1);
}
.mass-sidebar-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 12px;
}
.mass-sets-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.mass-set-item {
background: var(--bg-secondary);
border: 1px solid transparent;
border-radius: 8px;
padding: 10px 12px;
cursor: pointer;
transition: all 0.15s ease;
display: flex;
flex-direction: column;
gap: 4px;
}
.mass-set-item:hover {
background: var(--bg-hover);
border-color: var(--border);
}
.mass-set-item.active {
background: rgba(8, 145, 178, 0.08);
border-color: var(--primary);
}
.mass-set-item-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.mass-set-item-name {
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mass-set-item.active .mass-set-item-name {
color: var(--primary);
}
.mass-set-item-id {
font-size: 10px;
color: var(--text-muted);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.mass-set-item-actions {
display: flex;
gap: 2px;
align-items: center;
opacity: 0;
transition: opacity 0.15s ease;
}
.mass-set-item:hover .mass-set-item-actions {
opacity: 1;
}
.mass-set-item-btn {
padding: 2px 6px;
font-size: 11px;
border-radius: 4px;
border: none;
cursor: pointer;
transition: all 0.15s ease;
background: transparent;
color: var(--text-muted);
line-height: 1;
}
.mass-set-item-btn:hover {
background: rgba(239, 68, 68, 0.1);
color: var(--error);
}
.mass-set-item-meta {
font-size: 10px;
color: var(--text-muted);
display: flex;
gap: 8px;
}
.mass-backtest-panel {
--mass-sidebar-width: 240px;
--mass-panel-gap: 16px;
position: fixed;
top: calc(var(--bbt-header-offset, 0px) + 12px);
left: var(--mass-sidebar-width);
height: calc(100vh - (var(--bbt-header-offset, 0px) + 24px));
width: calc(60vw - var(--mass-sidebar-width));
background: var(--bg-card);
border-right: 1px solid var(--border);
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
box-shadow: var(--shadow-xl);
transform: translateX(calc(-100% - var(--mass-sidebar-width)));
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1001;
display: flex;
flex-direction: column;
overflow: hidden;
}
.mass-backtest-panel.active {
transform: translateX(0);
}
.mass-backtest-panel.blueprint-visible {
width: calc(85vw - var(--mass-sidebar-width));
}
.mass-backtest-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.mass-backtest-header svg {
color: var(--primary);
flex-shrink: 0;
}
.mass-panel-close-btn {
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
}
.mass-panel-close-btn:hover {
background: var(--bg-secondary);
color: var(--text-primary);
}
.mass-panel-close-btn:active {
background: var(--bg-hover);
}
.mass-backtest-title {
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mass-backtest-body {
display: flex;
flex: 1;
min-height: 0;
overflow: hidden;
}
.mass-backtest-column {
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
padding: 16px 20px;
min-width: 0;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.mass-backtest-column.mass-params-column {
flex: 0 0 100%;
min-width: 0;
padding-right: 16px;
position: relative;
transition: none;
}
.mass-backtest-column.mass-blueprint-column {
flex: 0 0 0px;
width: 0;
min-width: 0;
padding: 0;
opacity: 0;
overflow: hidden;
border-left: 1px solid transparent;
transition: flex-basis 0.35s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.25s ease-out 0.15s;
}
.mass-backtest-panel.blueprint-visible .mass-params-column {
flex: 0 0 calc(60vw - var(--mass-sidebar-width));
}
.mass-backtest-panel.blueprint-visible .mass-blueprint-column {
flex: 1 1 auto;
padding: 16px 20px;
opacity: 1;
border-left: 1px solid var(--border);
}
/* ===== Parameter Rows ===== */
.mass-param-row {
display: grid;
grid-template-columns: 20px minmax(140px, 1.2fr) minmax(200px, 2fr) minmax(50px, 0.4fr) minmax(160px, 2fr);
gap: 8px;
align-items: center;
padding: 5px 0;
border-bottom: 1px solid var(--border);
}
.mass-param-row > * {
min-width: 0;
overflow: hidden;
}
.mass-param-row.mass-param-compact > *:first-child {
overflow: visible;
}
.mass-param-row.mass-param-header {
font-weight: 600;
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
border-bottom: 1px solid var(--border);
padding: 0 0 6px;
position: sticky;
top: 0;
background: var(--bg-card);
z-index: 1;
}
.mass-param-row .mass-param-name,
.mass-param-row .mass-param-type {
font-size: 11px;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mass-param-row .mass-param-name {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 10px;
color: var(--text-secondary);
}
.mass-param-row.mass-param-compact .mass-param-type {
white-space: normal;
word-break: break-word;
overflow: visible;
text-overflow: unset;
line-height: 1.35;
}
.mass-param-row.mass-param-header .mass-param-name,
.mass-param-row.mass-param-header .mass-param-type {
color: var(--text-muted);
font-family: inherit;
font-size: 10px;
}
.mass-param-divider {
margin: 10px 0 6px;
border-top: 1px solid var(--border);
padding-top: 8px;
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ===== Accordion ===== */
.mass-accordion {
display: flex;
flex-direction: column;
gap: 6px;
}
.mass-accordion details {
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-card);
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mass-accordion details:hover {
border-color: var(--border-hover);
}
.mass-accordion details[open] {
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(8, 145, 178, 0.08);
}
.mass-accordion details > summary {
list-style: none;
cursor: pointer;
user-select: none;
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: transparent;
border-bottom: 1px solid transparent;
font-weight: 600;
font-size: 12px;
color: var(--text-primary);
transition: background 0.15s ease;
position: relative;
}
.mass-accordion details > summary::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary);
border-radius: 0 2px 2px 0;
opacity: 0;
transition: opacity 0.2s ease;
}
.mass-accordion details[open] > summary::before {
opacity: 1;
}
.mass-accordion details > summary:hover {
background: var(--bg-secondary);
}
.mass-accordion details[open] > summary {
background: var(--bg-secondary);
border-bottom-color: var(--border);
}
.mass-accordion details > summary::-webkit-details-marker {
display: none;
}
.mass-accordion details > summary::after {
content: '';
width: 16px;
height: 16px;
flex-shrink: 0;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891b2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='9 18 15 12 9 6'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;
background-size: 12px;
transition: transform 0.2s ease;
}
.mass-accordion details[open] > summary::after {
transform: rotate(90deg);
}
.mass-accordion details > summary .mass-acc-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
display: flex;
align-items: center;
gap: 6px;
}
.mass-accordion details > summary .mass-acc-hint {
font-weight: 600;
font-size: 10px;
color: var(--text-muted);
padding: 2px 8px;
background: var(--bg-secondary);
border-radius: 10px;
transition: all 0.15s ease;
}
.mass-accordion details[open] > summary .mass-acc-hint {
background: rgba(8, 145, 178, 0.1);
color: var(--primary);
}
.mass-acc-body {
padding: 10px 12px;
animation: massAccordionSlideIn 0.2s ease;
}
@keyframes massAccordionSlideIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.mass-acc-subtitle {
margin: 8px 0 6px;
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
}
.mass-acc-subtitle::before {
content: '';
width: 4px;
height: 4px;
background: var(--primary);
border-radius: 1px;
flex-shrink: 0;
}
.mass-acc-subtitle::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.mass-param-row.mass-param-compact {
grid-template-columns: minmax(90px, 130px) minmax(140px, 1.3fr) minmax(50px, 0.4fr) minmax(200px, 3fr);
padding-right: 4px;
transition: background-color 0.15s ease;
border-radius: 4px;
margin: 1px 0;
}
.mass-param-row.mass-param-compact:hover {
background: var(--bg-secondary);
}
.mass-param-row.mass-param-compact .mass-param-type {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 10px;
color: var(--text-primary);
}
.mass-param-row.mass-param-compact.mass-param-header .mass-param-type {
font-family: inherit;
font-size: 10px;
color: var(--text-muted);
}
/* ===== Inputs ===== */
.mass-param-row input[type="text"],
.mass-param-row input[type="number"],
.mass-param-row textarea,
.mass-param-row select {
width: 100%;
padding: 5px 8px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-primary);
font-size: 11px;
font-weight: 500;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mass-param-row input[type="text"]:hover,
.mass-param-row input[type="number"]:hover,
.mass-param-row textarea:hover,
.mass-param-row select:hover {
border-color: var(--border-hover);
}
.mass-param-row input[type="text"]:focus,
.mass-param-row input[type="number"]:focus,
.mass-param-row textarea:focus,
.mass-param-row select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.1);
}
.mass-param-row textarea {
resize: vertical;
min-height: 54px;
line-height: 1.35;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.mass-param-row.mass-param-bundle {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.08), rgba(20, 184, 166, 0.05));
border: 1px solid rgba(8, 145, 178, 0.16);
padding: 8px 6px;
}
.mass-param-bundle-badge {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 2px 7px;
border-radius: 999px;
background: rgba(8, 145, 178, 0.12);
color: var(--primary);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
}
.mass-param-row select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 24px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 6px center;
background-size: 12px;
cursor: pointer;
}
/* ===== Checkboxes ===== */
.mass-param-row input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 15px;
height: 15px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-card);
cursor: pointer;
transition: all 0.15s ease;
position: relative;
flex-shrink: 0;
}
.mass-param-row input[type="checkbox"]:hover {
border-color: var(--primary);
}
.mass-param-row input[type="checkbox"]:checked {
background: var(--primary);
border-color: var(--primary);
}
.mass-param-row input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.mass-param-row input[type="checkbox"]:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.12);
}
/* Nested Accordions */
.mass-accordion .mass-accordion {
margin-top: 4px;
gap: 4px;
}
.mass-accordion .mass-accordion details {
border-radius: 8px;
background: var(--bg-secondary);
}
.mass-accordion .mass-accordion details > summary {
padding: 8px 10px;
font-size: 11px;
}
.mass-accordion .mass-accordion .mass-acc-body {
padding: 8px 10px;
}
.mass-acc-body .mass-param-row {
animation: massParamRowSlideIn 0.2s ease backwards;
}
.mass-acc-body .mass-param-row:nth-child(1) { animation-delay: 0.01s; }
.mass-acc-body .mass-param-row:nth-child(2) { animation-delay: 0.02s; }
.mass-acc-body .mass-param-row:nth-child(3) { animation-delay: 0.03s; }
.mass-acc-body .mass-param-row:nth-child(4) { animation-delay: 0.04s; }
.mass-acc-body .mass-param-row:nth-child(5) { animation-delay: 0.05s; }
.mass-acc-body .mass-param-row:nth-child(6) { animation-delay: 0.06s; }
.mass-acc-body .mass-param-row:nth-child(7) { animation-delay: 0.07s; }
.mass-acc-body .mass-param-row:nth-child(8) { animation-delay: 0.08s; }
.mass-acc-body .mass-param-row:nth-child(9) { animation-delay: 0.09s; }
.mass-acc-body .mass-param-row:nth-child(10) { animation-delay: 0.1s; }
@keyframes massParamRowSlideIn {
from { opacity: 0; transform: translateX(-4px); }
to { opacity: 1; transform: translateX(0); }
}
.mass-param-row input:not([type="checkbox"]).changed,
.mass-param-row select.changed {
animation: massInputPulse 0.3s ease;
}
@keyframes massInputPulse {
0% { box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.3); }
50% { box-shadow: 0 0 0 4px rgba(8, 145, 178, 0); }
100% { box-shadow: 0 0 0 0 rgba(8, 145, 178, 0); }
}
body.dashboard-theme-dark .mass-accordion details {
background: var(--bg-secondary);
}
body.dashboard-theme-dark .mass-accordion details > summary {
background: transparent;
}
body.dashboard-theme-dark .mass-accordion details[open] > summary {
background: rgba(255, 255, 255, 0.03);
}
body.dashboard-theme-dark .mass-param-row input[type="text"],
body.dashboard-theme-dark .mass-param-row input[type="number"],
body.dashboard-theme-dark .mass-param-row textarea,
body.dashboard-theme-dark .mass-param-row select {
background: var(--bg-hover);
}
body.dashboard-theme-dark .mass-param-row input[type="checkbox"] {
background: var(--bg-hover);
}
.mass-param-row [data-role="range"] {
display: flex;
gap: 3px;
min-width: 0;
flex-wrap: nowrap;
}
.mass-param-row [data-role="range"] input {
flex: 1;
min-width: 40px;
}
/* ===== Column Header & Scrollable ===== */
.mass-column-header {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.mass-params-scrollable {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 8px;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
/* ===== Sticky Footer ===== */
.mass-sticky-footer {
position: sticky;
bottom: 0;
left: 0;
right: 0;
background: var(--bg-card);
border-top: 1px solid var(--border);
padding: 10px 16px;
margin: 0;
z-index: 10;
box-sizing: border-box;
}
.mass-summary {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
font-size: 13px;
color: var(--text-secondary);
}
.mass-summary-item {
display: flex;
align-items: baseline;
gap: 6px;
white-space: nowrap;
}
.mass-summary-label {
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
}
.mass-summary-value {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
line-height: 1;
}
.mass-summary-highlight {
color: var(--primary);
}
.mass-summary-item.warning .mass-summary-value {
color: var(--warning);
}
.mass-summary-item.danger {
animation: massPulseWarning 2s ease-in-out infinite;
}
.mass-summary-item.danger .mass-summary-value {
color: var(--error);
}
@keyframes massPulseWarning {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.mass-warning-text {
font-size: 10px;
color: var(--warning);
margin-top: 2px;
display: flex;
align-items: center;
gap: 4px;
white-space: normal;
line-height: 1.3;
}
.mass-warning-text.danger {
color: var(--error);
}
.mass-generate-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 20px;
font-size: 13px;
font-weight: 600;
border-radius: 8px;
background: var(--gradient-primary);
border: none;
color: white;
white-space: nowrap;
cursor: pointer;
transition: var(--transition-fast);
box-shadow: var(--shadow-sm);
flex-shrink: 0;
}
.mass-generate-btn:hover {
box-shadow: var(--shadow-md);
filter: brightness(1.05);
}
.mass-generate-btn:active {
filter: brightness(0.95);
}
.mass-generate-btn svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
/* ===== Blueprint Controls ===== */
.mass-blueprint-controls {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.mass-blueprint-control-group {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.mass-blueprint-label {
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
.mass-blueprint-input {
width: 70px;
padding: 5px 8px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-primary);
font-size: 11px;
transition: border-color 0.15s ease;
}
.mass-blueprint-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.1);
}
@keyframes mass-input-shake {
0%, 100% { border-color: var(--border); box-shadow: none; }
20%, 60% { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); transform: translateX(-3px); }
40%, 80% { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); transform: translateX(3px); }
}
.mass-input-shake {
animation: mass-input-shake 0.4s ease;
}
.mass-start-btn,
.mass-cancel-btn {
padding: 6px 12px;
font-size: 11px;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
flex-shrink: 0;
width: auto;
margin-bottom: 0;
box-shadow: none;
}
.mass-view-analysis-btn {
padding: 6px 14px;
font-size: 11px;
font-weight: 600;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
flex-shrink: 0;
width: auto;
margin-bottom: 0;
box-shadow: none;
background: var(--success, #10b981);
color: #fff;
border: none;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
animation: mass-view-pulse 2s ease-in-out 1;
}
.mass-view-analysis-btn:hover {
background: #059669;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
@keyframes mass-view-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.25); }
}
/* ===== Blueprint Column ===== */
.mass-blueprint-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.mass-blueprint-header-left {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.mass-blueprint-notice {
display: none;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(245, 158, 11, 0.28);
background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.06));
color: var(--text-primary);
}
.mass-blueprint-notice.show {
display: flex;
}
.mass-blueprint-notice.danger {
border-color: rgba(239, 68, 68, 0.28);
background: linear-gradient(180deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.07));
}
.mass-blueprint-notice-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: #f59e0b;
margin-top: 1px;
}
.mass-blueprint-notice.danger .mass-blueprint-notice-icon {
color: #ef4444;
}
.mass-blueprint-notice-text {
min-width: 0;
}
.mass-blueprint-notice-title {
font-size: 12px;
font-weight: 700;
line-height: 1.35;
margin-bottom: 2px;
color: var(--text-primary);
}
.mass-blueprint-notice-body {
font-size: 11px;
line-height: 1.45;
color: var(--text-secondary);
}
.mass-blueprint-running-marker {
display: none;
align-items: center;
gap: 10px;
margin-bottom: 10px;
padding: 10px 12px;
border: 1px solid rgba(14, 165, 233, 0.28);
border-radius: 10px;
background: linear-gradient(180deg, rgba(14, 165, 233, 0.12), rgba(14, 165, 233, 0.06));
color: var(--primary);
box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.04) inset;
}
.mass-blueprint-running-marker.show {
display: flex;
}
.mass-blueprint-running-spinner {
width: 16px;
height: 16px;
border: 3px solid var(--primary);
border-top-color: transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
flex-shrink: 0;
}
.mass-blueprint-running-text {
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: var(--primary);
}
.mass-blueprint-running-subtext {
margin-top: 2px;
font-size: 11px;
line-height: 1.35;
color: var(--text-secondary);
}
.mass-blueprint-table-wrap {
flex: 1;
overflow: auto;
width: 100%;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.mass-blueprint-table-wrap::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.mass-blueprint-table-wrap::-webkit-scrollbar-track {
background: transparent;
}
.mass-blueprint-table-wrap::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
.mass-blueprint-table {
width: 100%;
border-collapse: collapse;
font-size: 11px;
table-layout: auto;
}
.mass-blueprint-table th,
.mass-blueprint-table td {
padding: 5px 8px;
border-bottom: 1px solid var(--border);
text-align: left;
vertical-align: middle;
}
.mass-blueprint-table th {
font-weight: 600;
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
position: sticky;
top: 0;
background: var(--bg-card);
z-index: 1;
}
.mass-blueprint-table td:not(:last-child),
.mass-blueprint-table th:not(:last-child) {
min-width: 60px;
max-width: 110px;
}
.mass-blueprint-table td.mass-blueprint-actions-col,
.mass-blueprint-table th.mass-blueprint-actions-col {
min-width: 120px;
width: 120px;
white-space: nowrap;
background: var(--bg-card);
}
.mass-blueprint-table td.mass-blueprint-status-col,
.mass-blueprint-table th.mass-blueprint-status-col {
min-width: 56px;
width: 56px;
text-align: center;
position: sticky;
left: 0;
background: var(--bg-card);
z-index: 1;
}
.mass-blueprint-status-col {
white-space: nowrap;
}
.mass-blueprint-view-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
margin-left: 2px;
border: none;
border-radius: 4px;
background: transparent;
color: var(--primary);
cursor: pointer;
vertical-align: middle;
transition: background 0.15s, color 0.15s;
}
.mass-blueprint-view-btn:hover {
background: var(--primary);
color: #fff;
}
.mass-blueprint-view-btn svg {
width: 13px;
height: 13px;
}
.mass-blueprint-status-icon {
display: inline-flex;
width: 16px;
height: 16px;
align-items: center;
justify-content: center;
}
.mass-blueprint-status-icon svg {
width: 14px;
height: 14px;
}
.mass-blueprint-status-not_started svg { color: var(--text-muted); }
.mass-blueprint-status-running svg { color: var(--primary); }
.mass-blueprint-status-finished svg { color: var(--success); }
.mass-blueprint-status-error svg { color: var(--error); }
.mass-blueprint-status-running svg {
animation: mass-spin 1s linear infinite;
}
@keyframes mass-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.mass-blueprint-table input[type="number"] {
width: 100%;
min-width: 50px;
padding: 3px 5px;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-primary);
font-size: 11px;
appearance: textfield;
-moz-appearance: textfield;
}
.mass-blueprint-table input[type="number"]::-webkit-outer-spin-button,
.mass-blueprint-table input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.mass-blueprint-table input:disabled {
background: var(--bg-secondary);
color: var(--text-muted);
cursor: not-allowed;
}
.mass-blueprint-actions {
display: flex;
gap: 6px;
align-items: center;
margin: 6px 0 10px;
flex-wrap: wrap;
}
.mass-actions-cell {
display: flex;
gap: 4px;
align-items: center;
justify-content: flex-start;
}
.mass-actions-cell .btn {
width: auto;
padding: 4px 8px;
font-size: 10px;
margin: 0;
white-space: nowrap;
}
.mass-actions-cell .btn-icon-only {
padding: 4px 6px;
min-width: unset;
}
/* ===== Focus States ===== */
.mass-set-item:focus-visible,
.mass-accordion details > summary:focus-visible,
.mass-sidebar-add-btn:focus-visible,
.mass-panel-close-btn:focus-visible,
.mass-generate-btn:focus-visible,
.mass-start-btn:focus-visible,
.mass-cancel-btn:focus-visible,
.mass-set-item-btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* ===== Media Queries ===== */
@media (max-width: 1599px) {
.mass-backtest-sidebar { --mass-sidebar-width: 220px; }
.mass-backtest-panel {
--mass-sidebar-width: 220px;
max-width: 1100px;
}
.mass-param-row {
grid-template-columns: 18px minmax(90px, 1fr) minmax(140px, 1.5fr) minmax(40px, 0.4fr) minmax(140px, 2fr);
gap: 6px;
}
.mass-param-row.mass-param-compact {
grid-template-columns: minmax(90px, 130px) minmax(130px, 1.2fr) minmax(45px, 0.4fr) minmax(160px, 2fr);
}
}
@media (max-width: 1365px) {
.mass-backtest-sidebar { --mass-sidebar-width: 200px; }
.mass-backtest-panel {
--mass-sidebar-width: 200px;
max-width: calc(100vw - 210px);
}
.mass-backtest-column { padding: 12px 14px; }
.mass-param-row {
grid-template-columns: 18px minmax(80px, 1fr) minmax(120px, 1.4fr) minmax(36px, 0.3fr) minmax(120px, 2fr);
gap: 5px;
font-size: 10px;
}
.mass-param-row.mass-param-compact {
grid-template-columns: minmax(80px, 120px) minmax(110px, 1.2fr) minmax(40px, 0.3fr) minmax(140px, 2fr);
}
.mass-param-row input[type="text"],
.mass-param-row input[type="number"],
.mass-param-row select {
padding: 3px 5px;
font-size: 10px;
}
.mass-param-row [data-role="range"] input { min-width: 34px; }
.mass-blueprint-table { font-size: 10px; }
.mass-blueprint-table th,
.mass-blueprint-table td { padding: 4px 6px; }
.mass-blueprint-table td.mass-blueprint-actions-col,
.mass-blueprint-table th.mass-blueprint-actions-col {
min-width: 100px;
width: 100px;
}
.mass-actions-cell .btn { padding: 3px 6px; font-size: 9px; }
.mass-summary { gap: 12px; }
.mass-summary-label { font-size: 12px; }
.mass-summary-value { font-size: 14px; }
.mass-generate-btn { padding: 4px 10px; font-size: 10px; }
}
@media (max-width: 1199px) {
.mass-backtest-sidebar { --mass-sidebar-width: 180px; }
.mass-backtest-panel {
--mass-sidebar-width: 180px;
max-width: calc(100vw - 190px);
}
.mass-backtest-body {
flex-direction: column;
overflow-y: auto;
}
.mass-backtest-column:first-child,
.mass-backtest-column:last-child {
flex: 0 0 auto;
min-width: 0;
max-width: 100%;
width: 100%;
max-height: 50%;
padding: 12px 14px;
}
.mass-backtest-column:first-child {
border-bottom: 1px solid var(--border);
}
.mass-backtest-column + .mass-backtest-column {
border-left: none;
}
.mass-param-row {
grid-template-columns: 18px minmax(90px, 1fr) minmax(130px, 1.4fr) minmax(40px, 0.4fr) minmax(140px, 2fr);
gap: 5px;
}
.mass-param-row.mass-param-compact {
grid-template-columns: minmax(90px, 130px) minmax(120px, 1.2fr) minmax(40px, 0.3fr) minmax(160px, 2fr);
}
}
@media (max-width: 1023px) {
.mass-backtest-sidebar { --mass-sidebar-width: 160px; }
.mass-backtest-panel { --mass-sidebar-width: 160px; }
.mass-backtest-header { padding: 10px 12px; }
.mass-backtest-title { font-size: 13px; }
}
/* ==================== Enterprise Command Hub ==================== */
/* Footer unterhalb des Viewports: nur beim Scrollen sichtbar */
#bbtFooterMount {
margin-top: 160px !important;
}
.bbt-command-hub {
/* Im Dashboard-Header (.panel-header, position: relative) verankert.
Feste Offsets -> native Skalierung mit dem Header, ohne JS-Positionierung.
top = vertikale Feinjustierung (mittig in der Header-Zeile). */
position: absolute;
top: 24px;
left: 134px;
bottom: auto;
z-index: 5;
display: flex;
gap: 12px;
padding: 10px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(24px) saturate(1.4);
-webkit-backdrop-filter: blur(24px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.12),
0 2px 8px rgba(0, 0, 0, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
animation: bbt-hub-entrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Saubere, stufenweise Verschlankung – reagiert auf die tatsaechliche HEADER-Breite
(Container Query), damit sie auch greift, wenn der Help-Mode den Content verschmaelert
(nicht nur bei kleinem Viewport/Zoom):
gross : volle Karten (Icon + Titel + Untertitel)
<= 1750px Header : Untertitel ausblenden (Icon + Titel)
<= 1300px Header : nur Icons (Texte ausblenden)
<= 850px Header : Leiste aus der absoluten Verankerung loesen und gestapelt zentrieren
Hinweis: Diese 3 Schwellen sind die Stellschrauben fuer das Verschlanken.
(Header-Breite ~ Viewport minus Seiten-Padding bzw. minus 438px im Help-Mode.) */
@container bbtPanelHeader (max-width: 1750px) {
.bbt-command-hub .bbt-cmd-sub {
display: none;
}
}
@container bbtPanelHeader (max-width: 1300px) {
.bbt-command-hub .bbt-cmd-text {
display: none;
}
}
@container bbtPanelHeader (max-width: 850px) {
.bbt-command-hub {
position: static;
top: auto;
left: auto;
margin: 8px auto 0;
width: fit-content;
max-width: 100%;
}
}
/* ===== Hilfemodus: Command-Hub behaelt seine NORMALE Position =====
Bewusste Entscheidung: Der Hub bleibt im Hilfemodus exakt an derselben Stelle wie im
Normalmodus (absolutes Overlay, top:24px/left:134px). Frueher wechselte er hier auf
`position: static` und fiel dadurch in den Dokumentfluss -> er sprang sichtbar nach
unten und schob die darunterliegende Tabelle mit. Da es jetzt keinen Positions-Wechsel
zwischen den Modi mehr gibt, bleibt die Leiste mit und ohne Hilfepanel identisch stehen.
Die Container-Queries verschlanken die Karten bei engem Header weiterhin (Untertitel ->
Titel -> nur Icons), damit das Overlay kompakt bleibt und nicht mit Titel/Suche kollidiert.
Hoehere Spezifitaet als die `@container (max-width: 850px)`-Regel -> verhindert, dass der
Hub im schmaleren Hilfemodus-Header doch wieder in den Fluss faellt. */
.container.help-mode .bbt-command-hub {
position: absolute;
top: 24px;
left: 134px;
margin: 0;
}
/* Hub: Dark Mode */
html.dashboard-theme-dark .bbt-command-hub {
background: rgba(10, 10, 14, 0.55);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
0 2px 8px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Hub: Light Mode */
html:not(.dashboard-theme-dark) .bbt-command-hub {
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.08),
0 2px 8px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
@keyframes bbt-hub-entrance {
from {
opacity: 0;
transform: translateY(-24px) scale(0.92);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
body.login-mode .bbt-command-hub {
display: none;
}
/* Oberen Auswertungs-Button ausblenden */
#btnStrategyAnalysisTop {
display: none;
}
/* --- Command Card (einzelne Kachel) --- */
.bbt-cmd-card {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.06);
cursor: pointer;
overflow: hidden;
font-family: inherit;
white-space: nowrap;
transition:
transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.25s ease,
background 0.25s ease;
animation: bbt-card-stagger 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bbt-cmd-card:nth-child(1) { animation-delay: 0.08s; }
.bbt-cmd-card:nth-child(2) { animation-delay: 0.16s; }
.bbt-cmd-card:nth-child(3) { animation-delay: 0.24s; }
@keyframes bbt-card-stagger {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bbt-cmd-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 14px;
opacity: 0.45;
transition: opacity 0.32s ease;
z-index: 0;
pointer-events: none;
}
.bbt-cmd-card:hover {
transform: translateY(-3px);
}
/* Cards: Dark Mode */
html.dashboard-theme-dark .bbt-cmd-card {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.09);
}
html.dashboard-theme-dark .bbt-cmd-card:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
}
/* Cards: Light Mode */
html:not(.dashboard-theme-dark) .bbt-cmd-card {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.07);
}
html:not(.dashboard-theme-dark) .bbt-cmd-card:hover {
background: rgba(0, 0, 0, 0.06);
border-color: rgba(0, 0, 0, 0.12);
}
.bbt-cmd-card:hover::before {
opacity: 1;
}
.bbt-cmd-card:active {
transform: translateY(-1px) scale(0.98);
transition-duration: 0.1s;
}
.bbt-cmd-card.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
width: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
/* --- AI Chat Card --- */
.bbt-cmd-card--chat::before {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%);
}
.bbt-cmd-card--chat:hover {
box-shadow:
0 8px 24px rgba(139, 92, 246, 0.25),
0 2px 8px rgba(139, 92, 246, 0.1);
}
.bbt-cmd-card--chat .bbt-cmd-icon {
background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
}
.bbt-cmd-card--chat:hover .bbt-cmd-icon {
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
}
/* --- Auswertung Card --- */
.bbt-cmd-card--eval::before {
background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%);
}
.bbt-cmd-card--eval:hover {
box-shadow:
0 8px 24px rgba(14, 165, 233, 0.25),
0 2px 8px rgba(14, 165, 233, 0.1);
}
.bbt-cmd-card--eval .bbt-cmd-icon {
background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}
.bbt-cmd-card--eval:hover .bbt-cmd-icon {
box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
}
/* --- Indikatoren Card --- */
.bbt-cmd-card--ind::before {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(20, 184, 166, 0.08) 100%);
}
.bbt-cmd-card--ind:hover {
box-shadow:
0 8px 24px rgba(16, 185, 129, 0.25),
0 2px 8px rgba(16, 185, 129, 0.1);
}
.bbt-cmd-card--ind .bbt-cmd-icon {
background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}
.bbt-cmd-card--ind:hover .bbt-cmd-icon {
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}
/* --- Icon-Container --- */
.bbt-cmd-icon {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
transition:
box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.bbt-cmd-card:hover .bbt-cmd-icon {
transform: scale(1.08);
}
.bbt-cmd-icon svg {
width: 20px;
height: 20px;
color: #fff;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
/* --- Text-Block --- */
.bbt-cmd-text {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 1px;
}
.bbt-cmd-title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
line-height: 1.2;
}
.bbt-cmd-sub {
font-size: 11px;
font-weight: 400;
color: var(--text-secondary, #94a3b8);
line-height: 1.3;
}
/* --- Keyboard Shortcut Badge --- */
.bbt-cmd-kbd {
position: relative;
z-index: 1;
margin-left: 6px;
padding: 2px 6px;
font-size: 10px;
font-weight: 500;
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
border-radius: 5px;
background: rgba(255, 255, 255, 0.06);
color: var(--text-secondary, #94a3b8);
border: 1px solid rgba(255, 255, 255, 0.08);
opacity: 0;
transition: opacity 0.2s ease;
}
html:not(.dashboard-theme-dark) .bbt-cmd-kbd {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
}
.bbt-cmd-card:hover .bbt-cmd-kbd {
opacity: 1;
}
/* Command-Hub ausblenden solange Strategie-Panel offen */
.slide-out-panel.active ~ .main-content .bbt-command-hub,
body:has(.slide-out-panel.active) .bbt-command-hub {
display: none;
}
/* Command-Hub ausblenden solange Massenbacktest-Panel offen */
body:has(.mass-backtest-overlay.active) .bbt-command-hub {
display: none;
}
/* --- Responsive: Schmaler Bildschirm -> nur Icons --- */
@media (max-width: 768px) {
body:has(.slide-out-panel.active) #mainHeader {
display: none;
}
body:has(.slide-out-panel.active) .slide-out-panel {
top: 0;
height: 100vh;
height: 100dvh;
}
}
@media (max-width: 680px) {
.bbt-command-hub {
gap: 8px;
padding: 8px;
border-radius: 16px;
}
.bbt-cmd-card {
padding: 10px;
gap: 0;
}
.bbt-cmd-text,
.bbt-cmd-kbd {
display: none;
}
}
|