/* ── Portfolio Manager — Dark Theme ────────────────────────────────────── */
:root {
--pm-bg: #0a0e1a;
--pm-surface: #111827;
--pm-border: #1f2937;
--pm-card: #141d2e;
--pm-accent: #3b82f6;
--pm-green: #10b981;
--pm-red: #ef4444;
--pm-gold: #f59e0b;
--pm-purple: #8b5cf6;
--pm-text: #e5e7eb;
--pm-muted: #6b7280;
--pm-navbar-h: 60px;
}
/* ── Base ────────────────────────────────────────────────────────────── */
html, body {
touch-action: manipulation; /* prevents double-tap zoom on iOS */
-webkit-text-size-adjust: 100%; /* prevents font scaling on orientation change */
overscroll-behavior: none; /* prevents pull-to-refresh bounce on iOS */
}
body {
background-color: var(--pm-bg);
color: var(--pm-text);
font-family: 'Inter', system-ui, sans-serif;
min-height: 100vh;
}
/* ── Navbar ──────────────────────────────────────────────────────────── */
.pm-navbar {
background: rgba(10, 14, 26, 0.95) !important;
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--pm-border);
height: var(--pm-navbar-h);
}
.pm-logo {
font-size: 1.4rem;
color: var(--pm-accent);
line-height: 1;
}
.pm-logo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.text-accent { color: var(--pm-accent) !important; }
.pm-navbar .nav-link {
color: var(--pm-muted) !important;
border-radius: 8px;
padding: 6px 12px;
transition: all 0.2s;
font-size: 0.875rem;
}
.pm-navbar .nav-link:hover,
.pm-navbar .nav-link.active {
color: var(--pm-text) !important;
background: var(--pm-border);
}
.pm-navbar .nav-link.active {
color: var(--pm-accent) !important;
background: rgba(59,130,246,0.12) !important;
border-bottom: 2px solid var(--pm-accent);
font-weight: 600;
}
/* ── Main ────────────────────────────────────────────────────────────── */
/* Volle Breite (kein max-width mehr) — Iter "Vollbreite-Layout": die
Mittelspalte soll bis zum Browserrand gehen statt in der Mitte begrenzt
zu sein. Sinnvolles Innen-Padding bleibt (Inhalt klebt nicht am Glas). */
.pm-main { padding: 1.5rem; }
.pm-footer { border-top: 1px solid var(--pm-border); }
/* Seiten mit linker Filter-Sidebar (Positionen/Dashboard/Advisors/Konten):
linkes Main-Padding weg, damit die Sidebar am Browserrand kleben kann.
Nur ab lg (>=992px) - darunter bleibt das bestehende Mobile-Layout
unangetastet (dort gibt es eigene Filter-Modals statt der Sidebar). */
@media (min-width: 992px) {
.pm-main.pm-main--sidebar { padding-left: 0; }
}
/* Bewusste Lese-Maxbreite fuer reine Text-/Prosa-Seiten (z.B. Handbuch) —
dort waeren ultra-breite Zeilen bei voller Breite schlecht lesbar. */
.pm-main.pm-readwidth { max-width: 1400px; margin: 0 auto; }
/* ── Cards ───────────────────────────────────────────────────────────── */
.pm-card {
background: var(--pm-card);
border: 1px solid var(--pm-border);
border-radius: 12px;
padding: 1.25rem 1.5rem;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.pm-card:hover { border-color: #2d3f6b; box-shadow: 0 4px 24px rgba(59,130,246,0.06); }
a:has(.pm-card):hover .pm-card { transform: translateY(-1px); border-color: var(--pm-accent); }
.pm-card-header {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pm-muted);
margin-bottom: 0.4rem;
}
/* ── KPI Karten ──────────────────────────────────────────────────────── */
.kpi-value {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
}
.kpi-sub {
font-size: 0.8rem;
color: var(--pm-muted);
margin-top: 0.25rem;
}
.kpi-change {
font-size: 0.9rem;
font-weight: 600;
}
/* ── Farben ──────────────────────────────────────────────────────────── */
.text-green { color: #10b981 !important; }
.text-red { color: var(--pm-red) !important; }
.text-gold { color: var(--pm-gold) !important; }
.text-purple { color: var(--pm-purple) !important; }
.text-accent { color: var(--pm-accent) !important; }
.bg-green-subtle { background: rgba(16,185,129,0.1) !important; border: 1px solid rgba(16,185,129,0.2); }
.bg-red-subtle { background: rgba(239,68,68,0.1) !important; border: 1px solid rgba(239,68,68,0.2); }
.bg-gold-subtle { background: rgba(245,158,11,0.1) !important; border: 1px solid rgba(245,158,11,0.2); }
/* ── Tabelle ─────────────────────────────────────────────────────────── */
.pm-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.pm-table th {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pm-muted);
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--pm-border);
white-space: nowrap;
}
.pm-table td {
padding: 0.7rem 0.75rem;
border-bottom: 1px solid rgba(31,41,55,0.5);
font-size: 0.875rem;
vertical-align: middle;
}
.pm-table tbody tr {
transition: background 0.15s;
cursor: pointer;
}
.pm-table tbody tr:hover { background: rgba(59,130,246,0.07); box-shadow: inset 3px 0 0 var(--pm-accent); }
.pm-table td.text-end { font-variant-numeric: tabular-nums; }
.pm-table tbody tr:last-child td { border-bottom: none; }
/* ── Badge Asset Types ───────────────────────────────────────────────── */
.asset-badge {
font-size: 0.65rem;
padding: 2px 8px;
border-radius: 20px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.asset-crypto { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
.asset-stock { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
.asset-etf { background: rgba(139,92,246,0.15); color: #a78bfa; border: 1px solid rgba(139,92,246,0.3); }
.asset-metal { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.asset-commodity{ background: rgba(249,115,22,0.15); color: #fb923c; border: 1px solid rgba(249,115,22,0.3); }
.asset-cash { background: rgba(107,114,128,0.15); color: #9ca3af; border: 1px solid rgba(107,114,128,0.3); }
/* ── Exit Strategy Badges ────────────────────────────────────────────── */
.exit-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.7rem;
padding: 2px 7px;
border-radius: 4px;
font-weight: 600;
}
.exit-target { background: rgba(16,185,129,0.15); color: #34d399; }
.exit-stop { background: rgba(239,68,68,0.15); color: #f87171; }
.exit-dca { background: rgba(59,130,246,0.15); color: #60a5fa; }
.exit-reached { animation: pulse-green 1.5s infinite; }
.exit-stop-reached { animation: pulse-red 1.5s infinite; }
@keyframes pulse-green {
0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}
@keyframes pulse-red {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
/* ── Zahlenfarben ───────────────────────────────────────────────────────
Beträge bleiben neutral, ausser sie sind negativ. Prozentwerte sind
grün/rot. Keine Beträge in Accent/Gold. */
.pnl-positive,
.amount-positive { color: var(--pm-text); font-variant-numeric: tabular-nums; }
.pnl-negative,
.amount-negative { color: var(--pm-red); font-variant-numeric: tabular-nums; }
.pct-positive { color: #10b981 !important; font-variant-numeric: tabular-nums; }
.pct-negative { color: var(--pm-red) !important; font-variant-numeric: tabular-nums; }
.pnl-neutral,
.amount-neutral { color: var(--pm-muted); }
/* ── Positions: critical first paint rules ─────────────────────────────
These rules must be in head-loaded CSS so edit controls never flash
before the large positions template reaches its footer styles. */
.em-portfolio-select,
.tag-remove-btn,
.tag-add-btn,
.em-tag-edit-btn {
display: none;
}
.pm-card.em-active #fullTableBody tr { cursor: default !important; }
.pm-card.em-active #editModeBtn {
background: rgba(99,102,241,0.15);
border-color: #6366f1;
color: #818cf8;
}
.pm-card.em-active #fullTable { min-width: 980px; }
.pm-card.em-active #fullTable th:not(:first-child):not([data-col="portfolio"]):not([data-col="tags"]):not([data-col="watchlist"]):not([data-col="quantity"]):not([data-col="price"]):not([data-col="value"]),
.pm-card.em-active #fullTable td:not(:first-child):not([data-col="portfolio"]):not([data-col="tags"]):not([data-col="watchlist"]):not([data-col="quantity"]):not([data-col="price"]):not([data-col="value"]) {
display: none !important;
}
.pm-card.em-active #fullTable th:first-child { width: 26%; min-width: 240px; }
.pm-card.em-active .portfolio-view-pill { display: none; }
.pm-card.em-active .em-portfolio-select { display: block; }
.pm-card.em-active .tag-remove-btn,
.pm-card.em-active .tag-add-btn,
.pm-card.em-active .em-tag-edit-btn { display: inline-flex; }
.pm-card.em-active .position-tags-cell { min-width: 190px; }
.pm-card.em-active #fullTable th[data-col="portfolio"],
.pm-card.em-active #fullTable td[data-col="portfolio"] { min-width: 150px; }
.pm-card.em-active #fullTable th[data-col="tags"],
.pm-card.em-active #fullTable td[data-col="tags"] { min-width: 210px; }
.pm-card.em-active #fullTable th[data-col="watchlist"],
.pm-card.em-active #fullTable td[data-col="watchlist"] { min-width: 150px; }
.pm-card.em-active #fullTable th[data-col="quantity"],
.pm-card.em-active #fullTable th[data-col="price"],
.pm-card.em-active #fullTable th[data-col="value"],
.pm-card.em-active #fullTable td[data-col="quantity"],
.pm-card.em-active #fullTable td[data-col="price"],
.pm-card.em-active #fullTable td[data-col="value"] {
text-align: right !important;
white-space: nowrap;
}
/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-pm {
background: var(--pm-accent);
border: none;
color: white;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
padding: 8px 16px;
transition: all 0.2s;
}
.btn-pm:hover { background: #2563eb; color: white; transform: translateY(-1px); }
.btn-pm-sm { padding: 4px 10px; font-size: 0.75rem; }
/* ── Currency Toggle ─────────────────────────────────────────────────────── */
#currencyToggle .btn {
font-size: 0.72rem;
padding: 3px 10px;
font-weight: 600;
letter-spacing: .04em;
transition: all .15s;
}
#currencyToggle .btn.active {
background: var(--pm-accent) !important;
color: #fff !important;
border-color: var(--pm-accent) !important;
}
/* ── Market Heatmap Buttons ──────────────────────────────────────────────── */
.mhPeriodBtn, .mhLimitBtn {
font-size: 0.72rem;
padding: 3px 9px;
font-weight: 600;
letter-spacing: .03em;
transition: all .15s;
}
.mhPeriodBtn.active, .mhLimitBtn.active {
background: var(--pm-accent) !important;
color: #fff !important;
border-color: var(--pm-accent) !important;
}
/* ── Forms ───────────────────────────────────────────────────────────── */
.form-control, .form-select {
background: var(--pm-surface) !important;
border: 1px solid var(--pm-border) !important;
color: var(--pm-text) !important;
border-radius: 8px;
}
.form-control:focus, .form-select:focus {
border-color: var(--pm-accent) !important;
box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
}
.form-label { font-size: 0.8rem; color: var(--pm-muted); margin-bottom: 4px; }
/* ── Modal ───────────────────────────────────────────────────────────── */
.modal-content {
background: var(--pm-card) !important;
border: 1px solid var(--pm-border);
border-radius: 16px;
}
.modal-header {
border-bottom: 1px solid var(--pm-border);
}
.btn-close-white { filter: invert(1); }
/* ── Donut Chart Container ───────────────────────────────────────────── */
.chart-container { position: relative; }
.chart-donut-center {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
text-align: center;
pointer-events: none;
}
/* ── Ticker Tag ──────────────────────────────────────────────────────── */
.ticker-tag {
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
font-size: 0.95rem;
color: var(--pm-text);
}
/* ── Progress Bar für Allokation ─────────────────────────────────────── */
.alloc-bar {
height: 4px;
border-radius: 2px;
background: var(--pm-border);
overflow: hidden;
}
.alloc-bar-fill { height: 100%; border-radius: 2px; transition: width 0.5s; }
/* ── Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pm-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--pm-muted); }
/* ── Spin Animation ──────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; display: inline-block; }
/* ── TradingView Wrapper ─────────────────────────────────────────────── */
.tv-chart-wrapper {
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--pm-border);
}
/* ── Ticker Tape ─────────────────────────────────────────────────────── */
/* ── Ticker Tape: fest am unteren Rand, technischer Look ─────────────────── */
/* ── Status Bar (Bottom) ─────────────────────────────────────────────── */
.pm-ticker-tape {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 1000;
background: rgba(6, 8, 16, 0.97);
border-top: 1px solid #1a2744;
display: flex;
align-items: center;
height: 28px;
backdrop-filter: blur(8px);
box-shadow: 0 -2px 20px rgba(0,0,0,0.4);
overflow: hidden;
gap: 0;
}
/* Gemeinsame Zelle */
.sb-cell {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0 10px;
height: 100%;
font-size: 0.7rem;
white-space: nowrap;
border-right: 1px solid #1a2744;
color: #e5e7eb;
cursor: pointer;
user-select: none;
text-decoration: none;
font-variant-numeric: tabular-nums;
transition: background 0.15s;
}
.sb-cell:hover { background: rgba(99,102,241,0.07); color: #e5e7eb; }
.sb-clock { font-weight: 700; letter-spacing: .02em; }
.sb-moon { color: #a78bfa; }
.sb-moon:hover { color: #c4b5fd; background: transparent !important; }
/* "LIVE" Punkt */
.sb-live-dot {
color: #10b981; font-weight: 700; font-size: 0.55rem;
font-family: monospace; letter-spacing: .08em;
}
/* Trennlinie vor den Pills */
.sb-divider {
width: 1px; height: 16px;
background: #1f2937;
margin: 0 4px;
flex-shrink: 0;
}
/* Interaktive Status-Pills */
.sb-pill {
padding: 0 9px;
gap: 4px;
border-right: none;
border-radius: 4px;
margin: 0 2px;
font-size: 0.69rem;
height: 20px;
border: 1px solid transparent;
transition: border-color 0.15s, background 0.15s;
}
.sb-pill:hover { border-color: #2d3a5e; background: rgba(99,102,241,0.1); }
.sb-alerts { border-color: rgba(245,158,11,0.25); background: rgba(245,158,11,0.06); }
.sb-alerts:hover { border-color: #f59e0b; background: rgba(245,158,11,0.14); }
.sb-label { color: #d1d5db; font-weight: 600; }
.sb-delta { font-size: 0.67rem; }
.sb-command-search {
position: fixed;
right: 10px;
bottom: 3px;
z-index: 1002;
width: 126px;
height: 21px;
margin: 0;
padding: 0 7px;
gap: 5px;
border: 1px solid #1f2937;
border-radius: 5px;
background: rgba(9, 14, 25, .86);
color: #7f8b8b;
cursor: text;
flex-shrink: 0;
}
.sb-command-search:focus-within,
.sb-command-search:hover {
border-color: rgba(45, 212, 191, .55);
background: rgba(16, 35, 34, .74) !important;
color: #d9ffff;
}
.sb-command-search i {
font-size: .68rem;
color: inherit;
flex-shrink: 0;
}
.sb-command-search input {
width: 100%;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: #dce7e4;
font-size: .68rem;
font-weight: 700;
line-height: 1;
padding: 0;
}
.sb-command-search input::placeholder {
color: #687574;
}
/* Platz für fixierten Status-Bar unten lassen */
body { padding-bottom: 28px; }
/* ── Mobile Navigation ───────────────────────────────────────────────── */
/* Bottom Tab Bar buttons */
.mob-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: #6b7280;
text-decoration: none;
background: transparent;
border: none;
padding: 8px 4px;
font-size: 0.58rem;
font-weight: 500;
letter-spacing: .02em;
cursor: pointer;
transition: color 0.15s, transform 0.1s;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
outline: none;
min-width: 0;
user-select: none;
}
.mob-tab i { font-size: 1.3rem; line-height: 1; display: block; }
.mob-tab:active { transform: scale(0.9); }
.mob-tab-active { color: var(--pm-accent) !important; }
/* Tab bar: auto height so env(safe-area-inset-bottom) expands the bar, not shrinks content */
#mobTabBar {
height: auto !important;
min-height: 56px;
align-items: flex-start;
}
/* Fullscreen menu — CSS transform-based toggle (iOS Safari reliable) */
#mobileMenu {
display: block !important; /* override inline display:none; hidden via transform instead */
transform: translateX(105%);
visibility: hidden;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
will-change: transform;
overscroll-behavior: contain;
}
#mobileMenu.is-open {
transform: translateX(0);
visibility: visible;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}
/* Mobile menu links — large touch targets */
.mob-menu-link {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 12px;
border-radius: 10px;
color: #d1d5db;
text-decoration: none;
font-size: 0.92rem;
font-weight: 500;
transition: background 0.15s;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
min-height: 52px;
}
.mob-menu-link:hover, .mob-menu-link:active {
background: #111827;
color: #fff;
}
.mob-menu-link i {
font-size: 1.15rem;
color: var(--pm-accent);
width: 26px;
text-align: center;
flex-shrink: 0;
}
.mob-menu-link.active-page {
background: rgba(59,130,246,0.1);
color: var(--pm-accent);
}
/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
.pm-main { padding: 0.75rem; }
.kpi-value { font-size: 1.4rem; }
/* Tab bar is 56px + iOS home indicator (env safe area) */
body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 8px)); }
.pm-footer { display: none; }
.pm-ticker-tape { display: none; }
}
@media (max-width: 768px) {
.pos-mobile-card {
background: var(--pm-card);
border: 1px solid var(--pm-border);
border-radius: 10px;
padding: 0.75rem;
cursor: pointer;
transition: border-color 0.2s;
margin-bottom: 0.5rem;
}
.pos-mobile-card:hover { border-color: var(--pm-accent); }
.pm-table .mobile-hide { display: none; }
/* Reduce card padding on small screens */
.pm-card { padding: 0.9rem 1rem; }
/* KPI font size on very small screens */
.kpi-value { font-size: 1.25rem; }
/* ── Mobile Positions Table: nur essenzielle Spalten ── */
#posTableCard { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#fullTable { font-size: 0.78rem; }
#fullTable thead th,
#fullTable tbody td {
padding: 5px 6px;
}
/* Auf Mobile: Typ, Menge, Preis, Anteil, Avg, P&L, 7T Spark, 7T%, 30T%, CAGR, Tage, Exchange, Zone, Exit, Tags verstecken */
#fullTable th[data-col="type"], #fullTable td[data-col="type"],
#fullTable th[data-col="quantity"], #fullTable td[data-col="quantity"],
#fullTable th[data-col="price"], #fullTable td[data-col="price"],
#fullTable th[data-col="pct_portfolio"], #fullTable td[data-col="pct_portfolio"],
#fullTable th[data-col="avg"], #fullTable td[data-col="avg"],
#fullTable th[data-col="pnl"], #fullTable td[data-col="pnl"],
#fullTable th[data-col="spark7"], #fullTable td[data-col="spark7"],
#fullTable th[data-col="change7d"], #fullTable td[data-col="change7d"],
#fullTable th[data-col="change30d"],#fullTable td[data-col="change30d"],
#fullTable th[data-col="cagr"], #fullTable td[data-col="cagr"],
#fullTable th[data-col="days_held"],#fullTable td[data-col="days_held"],
#fullTable th[data-col="exchange"], #fullTable td[data-col="exchange"],
#fullTable th[data-col="range"], #fullTable td[data-col="range"],
#fullTable th[data-col="exit"], #fullTable td[data-col="exit"],
#fullTable th[data-col="tags"], #fullTable td[data-col="tags"],
#fullTable th:first-child, #fullTable td:first-child { display: none; } /* Checkbox */
/* Asset-Spalte kompakter */
#fullTable td:nth-child(2) .asset-logo-img { width: 18px; height: 18px; }
#fullTable td:nth-child(2) .asset-logo-letter { font-size: 0.55rem; width: 18px; height: 18px; }
/* 24h Change + Wert kompakter */
#fullTable td[data-col="change"] { min-width: 52px; }
#fullTable td[data-col="value"] { min-width: 68px; }
}
/* ── Custom Scrollbar ────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--pm-bg); }
::-webkit-scrollbar-thumb { background: #2d3f6b; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--pm-accent); }
/* ── ITER 173: Sticky Table Header ──────────────────────────────────────── */
#fullTable thead th {
position: sticky;
top: 0;
z-index: 2;
background: var(--pm-card);
box-shadow: 0 1px 0 var(--pm-border);
}
/* ── Card header gradient accent line ────────────────────────────────────── */
.pm-card-header.gradient-accent {
background: linear-gradient(90deg, var(--pm-accent), transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* h4 headings: plain text, no gradient (transparent-text trick removed) */
/* ── Glowing primary button ──────────────────────────────────────────────── */
.btn-pm {
transition: box-shadow 0.2s, transform 0.15s;
}
.btn-pm:hover {
box-shadow: 0 0 14px rgba(59,130,246,0.35);
transform: translateY(-1px);
}
/* ── Card depth on interactive cards ────────────────────────────────────── */
.pm-card.interactive {
cursor: pointer;
}
.pm-card.interactive:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(59,130,246,0.10);
border-color: rgba(99,102,241,0.4);
}
/* ── Badge pulse animation for at-target positions ───────────────────────── */
@keyframes pulse-badge {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.exit-badge.exit-reached {
animation: pulse-badge 2s ease-in-out infinite;
}
/* ── CodeX Facelift B: Wealth OS ───────────────────────────────────────────
Calm, premium, wealth-dashboard feel. This layer intentionally overrides
older page styles without changing template structure. */
:root {
--pm-bg: #090d0d;
--pm-surface: #111817;
--pm-border: #283833;
--pm-card: #141d1b;
--pm-card-2: #18231f;
--pm-accent: #6da7ff;
--pm-accent-2: #56d6b0;
--pm-green: #4fd6a4;
--pm-red: #ff6875;
--pm-gold: #e7c46a;
--pm-purple: #9f8cff;
--pm-text: #eef4f1;
--pm-muted: #879891;
--pm-navbar-h: 58px;
}
body {
background:
radial-gradient(circle at 16% -10%, rgba(79,214,164,.08), transparent 360px),
linear-gradient(180deg, rgba(109,167,255,.035), transparent 300px),
var(--pm-bg);
color: var(--pm-text);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.pm-main {
padding: 1.25rem 1.5rem;
}
.pm-navbar {
background: rgba(9, 13, 13, .94) !important;
border-bottom: 1px solid rgba(79, 214, 164, .14);
box-shadow: 0 1px 0 rgba(255,255,255,.025), 0 16px 42px rgba(0,0,0,.22);
height: 54px;
}
.pm-navbar .navbar-brand {
min-width: 134px;
letter-spacing: -.01em;
}
.pm-navbar .nav-link {
border: 1px solid transparent;
border-radius: 7px;
color: #80918b !important;
font-size: .76rem;
font-weight: 720;
min-width: 66px;
padding: 5px 7px 4px;
text-align: center;
line-height: 1.06;
}
.pm-navbar .nav-link i {
display: block;
font-size: .98rem;
line-height: 1;
margin: 0 0 3px;
opacity: .78;
transition: opacity .15s, transform .15s, color .15s;
}
.pm-navbar .nav-link:hover {
background: rgba(79, 214, 164, .07);
border-color: rgba(79, 214, 164, .18);
color: #d4e2dd !important;
}
.pm-navbar .nav-link:hover i,
.pm-navbar .nav-link.active i {
color: #4fd6a4;
opacity: 1;
transform: translateY(-1px);
}
.pm-navbar .nav-link.active {
background: linear-gradient(180deg, rgba(109,167,255,.18), rgba(79,214,164,.08)) !important;
border: 1px solid rgba(109,167,255,.30);
color: #b8d1ff !important;
box-shadow: inset 0 -2px 0 rgba(79,214,164,.86);
}
.pm-navbar .navbar-nav {
gap: 2px !important;
}
.pm-navbar .dropdown-toggle::after {
margin-left: 3px;
vertical-align: .06em;
}
.pm-navbar .btn.btn-sm {
min-width: 31px;
height: 31px;
padding: 4px 7px;
}
.pm-navbar .d-flex.align-items-center.gap-2 {
gap: 5px !important;
}
.pm-card,
.modal-content,
.dropdown-menu {
background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 54px), var(--pm-card) !important;
border: 1px solid rgba(40,56,51,.92) !important;
border-radius: 8px !important;
box-shadow: 0 14px 36px rgba(0,0,0,.16);
}
.pm-card {
padding: 1rem 1.1rem;
}
.pm-card:hover {
border-color: rgba(79,214,164,.28) !important;
box-shadow: 0 14px 40px rgba(0,0,0,.24), 0 0 0 1px rgba(79,214,164,.035);
}
.pm-card-header,
.fund-table .fund-sep td:first-child {
color: #85978f;
font-size: .66rem;
font-weight: 850;
letter-spacing: .11em;
}
h1, h2, h3, h4, h5, h6,
.screen-title {
color: #f4f7fb;
letter-spacing: -.015em;
}
.kpi-value {
font-size: 1.65rem;
font-weight: 850;
letter-spacing: -.025em;
}
.text-accent { color: var(--pm-accent) !important; }
.text-green { color: #10b981 !important; }
.text-red, .pnl-negative, .amount-negative { color: var(--pm-red) !important; }
.pnl-positive, .amount-positive { color: var(--pm-text) !important; }
.pct-positive { color: #10b981 !important; }
.pct-negative { color: var(--pm-red) !important; }
.text-gold { color: var(--pm-gold) !important; }
.btn,
.btn-pm,
.btn-outline-secondary,
.btn-outline-danger,
.cc-quick-btn,
.cc-swap-btn {
border-radius: 6px !important;
font-weight: 750;
}
.btn-pm,
.btn-primary,
.tool.primary {
background: linear-gradient(180deg, #74aafc, #4e83dc) !important;
border-color: #74aafc !important;
color: #fff !important;
box-shadow: 0 8px 20px rgba(109,167,255,.18);
}
.btn-outline-secondary {
border-color: rgba(135,152,145,.34) !important;
color: #a1b2ac !important;
background: rgba(17,24,23,.56) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
color: #e6edf7 !important;
border-color: rgba(79,214,164,.46) !important;
background: rgba(79,214,164,.08) !important;
}
.form-control,
.form-select,
input[type="date"],
input[type="number"],
input[type="text"],
textarea {
background: #0d1312 !important;
border-color: rgba(40,56,51,.95) !important;
border-radius: 6px !important;
color: var(--pm-text) !important;
font-weight: 650;
}
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
border-color: rgba(109,167,255,.70) !important;
box-shadow: 0 0 0 2px rgba(109,167,255,.18) !important;
}
.form-label {
color: #8795a8;
font-size: .74rem;
font-weight: 700;
}
.pm-table,
.table {
--bs-table-bg: transparent;
--bs-table-color: var(--pm-text);
--bs-table-border-color: rgba(37,50,71,.70);
}
.table-responsive,
#posTableCard,
#txnTableCard {
border-radius: 8px;
}
.pm-table th,
.table th {
background: #0d1312;
color: #84958f !important;
font-size: .66rem;
font-weight: 850;
letter-spacing: .11em;
padding: .58rem .7rem;
}
.pm-table td,
.table td {
padding: .58rem .7rem;
border-bottom-color: rgba(40,56,51,.58) !important;
}
.pm-table tbody tr,
.table tbody tr {
background: rgba(20,29,27,.56);
}
.pm-table tbody tr:nth-child(2n),
.table tbody tr:nth-child(2n) {
background: rgba(15,22,20,.56);
}
.pm-table tbody tr:hover,
.table-hover tbody tr:hover {
background: rgba(79,214,164,.075) !important;
box-shadow: inset 3px 0 0 var(--pm-green);
}
.asset-badge,
.exit-badge,
.badge {
border-radius: 6px !important;
font-weight: 850;
}
.pm-ticker-tape {
background: rgba(7, 11, 10, .98);
border-top: 1px solid rgba(79,214,164,.18);
box-shadow: 0 -10px 28px rgba(0,0,0,.26);
}
.sb-cell {
border-right-color: rgba(40,56,51,.78);
font-weight: 700;
}
.modal-header,
.modal-footer {
border-color: rgba(40,56,51,.92) !important;
}
.dropdown-item {
border-radius: 5px;
margin: 2px 6px;
width: calc(100% - 12px);
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
background: rgba(79,214,164,.12) !important;
color: #e6edf7 !important;
}
/* Wealth OS surface pass: dashboard and transaction-heavy screens. */
.txn-head,
.d-flex.justify-content-between.align-items-center.mb-4:first-child {
padding-bottom: .2rem;
}
.txn-filter-card {
background:
linear-gradient(90deg, rgba(79,214,164,.08), transparent 50%),
rgba(17,24,23,.88) !important;
padding: .78rem .9rem !important;
}
.txn-stat {
position: relative;
min-height: 86px;
overflow: hidden;
}
.txn-stat::before,
#dashGrid .pm-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 2px;
background: linear-gradient(90deg, rgba(79,214,164,.72), rgba(109,167,255,.56), transparent);
opacity: .62;
pointer-events: none;
}
.txn-stat-buy::before { background: linear-gradient(90deg, rgba(79,214,164,.9), transparent); }
.txn-stat-sell::before { background: linear-gradient(90deg, rgba(255,104,117,.82), transparent); }
.txn-stat-fee::before { background: linear-gradient(90deg, rgba(231,196,106,.82), transparent); }
.txn-stat-net::before { background: linear-gradient(90deg, rgba(109,167,255,.86), transparent); }
.txn-table-card {
padding: 0 !important;
overflow: hidden;
}
.txn-toolbar {
background: rgba(13,19,18,.82);
border-bottom: 1px solid rgba(40,56,51,.72);
padding: .72rem .86rem !important;
}
.txn-table-wrap {
border-radius: 0 0 8px 8px !important;
}
#txnTable th {
background: rgba(9,13,13,.96) !important;
}
#txnTable tbody tr[style*="rgba(16,185,129"],
#txnTimeline .txn-tl-item[style*="rgba(16,185,129"] {
background: rgba(79,214,164,.045) !important;
}
#txnTable tbody tr[style*="rgba(239,68,68"],
#txnTimeline .txn-tl-item[style*="rgba(239,68,68"] {
background: rgba(255,104,117,.045) !important;
}
#txnBatchBar {
background: rgba(255,104,117,.105) !important;
border-bottom-color: rgba(255,104,117,.26) !important;
}
#dashSidebar {
background:
linear-gradient(180deg, rgba(79,214,164,.055), transparent 150px),
rgba(17,24,23,.92) !important;
}
.sidebar-filter-btn,
.sidebar-tag-btn {
border-radius: 6px !important;
color: #8ea19a !important;
background: transparent !important;
}
.sidebar-filter-btn:hover,
.sidebar-tag-btn:hover {
background: rgba(79,214,164,.08) !important;
color: #d8e5e0 !important;
border-color: rgba(79,214,164,.20) !important;
}
.sidebar-filter-btn.active,
.sidebar-tag-btn.active {
background: linear-gradient(90deg, rgba(79,214,164,.16), rgba(109,167,255,.08)) !important;
border-color: rgba(79,214,164,.30) !important;
color: #e7f2ef !important;
}
#dashGrid .grid-stack-item-content {
border-radius: 8px !important;
}
#dashGrid .pm-card {
position: relative;
overflow: hidden;
}
#dashGrid .bg-green-subtle {
background: linear-gradient(180deg, rgba(79,214,164,.11), rgba(20,29,27,.86)) !important;
border-color: rgba(79,214,164,.28) !important;
}
#dashGrid .bg-red-subtle {
background: linear-gradient(180deg, rgba(255,104,117,.10), rgba(20,29,27,.86)) !important;
border-color: rgba(255,104,117,.28) !important;
}
#dashGrid .bg-gold-subtle {
background: linear-gradient(180deg, rgba(231,196,106,.10), rgba(20,29,27,.86)) !important;
border-color: rgba(231,196,106,.28) !important;
}
[style*="background:#070c18"],
[style*="background:#0a0e1a"],
[style*="background:#111827"],
[style*="background:#1a2744"] {
background: var(--pm-card-2) !important;
}
[style*="border-color:#1a2744"],
[style*="border:1px solid #1f2937"] {
border-color: rgba(40,56,51,.92) !important;
}
::selection {
background: rgba(79,214,164,.30);
color: #fff;
}
/* CodeX full-app facelift pass: carry Position Detail's Wealth OS language
across the remaining modules while keeping existing templates intact. */
body {
background:
linear-gradient(180deg, rgba(20, 32, 30, .74) 0, rgba(9, 13, 13, .98) 230px),
linear-gradient(90deg, rgba(109, 167, 255, .035), rgba(79, 214, 164, .028), rgba(231, 196, 106, .018)),
#090d0d;
}
#matrixBackground {
position: fixed;
inset: 0;
z-index: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
opacity: 0;
mix-blend-mode: screen;
transition: opacity .45s ease;
}
html.matrix-bg-on #matrixBackground {
opacity: .36;
}
.pm-navbar,
.pm-main,
#mobTabBar,
#mobileMenu,
#statusBar {
position: relative;
z-index: 1;
}
.pm-navbar,
#mobTabBar,
#statusBar {
z-index: 1040;
}
@media (max-width: 760px) {
html.matrix-bg-on #matrixBackground {
opacity: .24;
}
}
@media (prefers-reduced-motion: reduce) {
#matrixBackground {
display: none;
}
}
.pm-main {
padding-top: 1.05rem;
}
@media (min-width: 1200px) {
.pm-main {
padding-left: 1.85rem;
padding-right: 1.85rem;
}
}
.pm-main > .d-flex.justify-content-between.align-items-center.mb-4,
.pm-main > .mb-4:first-child,
.pm-main > .container-fluid > .d-flex.align-items-center.justify-content-between.mb-3,
.pm-main > .d-flex.justify-content-between.align-items-center.mb-3 {
margin-bottom: 1rem !important;
padding: .1rem 0 .82rem;
border-bottom: 1px solid rgba(79, 214, 164, .16);
}
.pm-main h4,
.pm-main h5 {
font-size: 1.24rem;
font-weight: 860 !important;
}
.pm-main h4 i,
.pm-main h5 i {
color: var(--pm-green) !important;
}
.pm-main small.text-muted {
color: #8d9d97 !important;
}
.pm-card,
.card.bg-dark,
.adv-table-card,
.adv-card,
.news-card,
.grid-stack > .grid-stack-item > .grid-stack-item-content {
background:
linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 72px),
linear-gradient(135deg, rgba(79, 214, 164, .038), rgba(109, 167, 255, .018) 44%, transparent),
rgba(18, 27, 25, .94) !important;
border-color: rgba(47, 66, 60, .94) !important;
box-shadow: 0 15px 38px rgba(0, 0, 0, .18) !important;
}
.pm-card:hover,
.adv-card:hover,
.news-card:hover {
border-color: rgba(79, 214, 164, .34) !important;
box-shadow: 0 18px 44px rgba(0, 0, 0, .25), 0 0 0 1px rgba(79, 214, 164, .045) !important;
}
.pm-card.text-center {
min-height: 86px;
}
.pm-card.text-center .fw-bold.fs-4,
.pm-card.text-center .fw-bold.fs-5,
.pm-card.text-center .fw-bold.mt-1 {
font-weight: 880 !important;
letter-spacing: -.015em;
}
.bg-green-subtle {
background: linear-gradient(180deg, rgba(79, 214, 164, .13), rgba(18, 27, 25, .92)) !important;
border-color: rgba(79, 214, 164, .32) !important;
}
.bg-red-subtle {
background: linear-gradient(180deg, rgba(255, 104, 117, .12), rgba(18, 27, 25, .92)) !important;
border-color: rgba(255, 104, 117, .32) !important;
}
.bg-gold-subtle {
background: linear-gradient(180deg, rgba(231, 196, 106, .12), rgba(18, 27, 25, .92)) !important;
border-color: rgba(231, 196, 106, .32) !important;
}
.pm-table,
.adv-table,
.trading-asset-table,
#kontenTable,
#wlTable,
#manualAlertsTable,
#histTable,
#stratTable {
border-collapse: separate !important;
border-spacing: 0 !important;
}
.pm-table thead th,
.adv-table thead th,
.trading-asset-table thead th {
background: linear-gradient(180deg, rgba(14, 22, 20, .98), rgba(9, 14, 13, .98)) !important;
color: #8da099 !important;
border-bottom: 1px solid rgba(79, 214, 164, .16) !important;
}
.pm-table tbody tr,
.adv-table tbody tr,
.trading-asset-table tbody tr {
background: rgba(17, 26, 24, .72) !important;
}
.pm-table tbody tr:nth-child(2n),
.adv-table tbody tr:nth-child(2n),
.trading-asset-table tbody tr:nth-child(2n) {
background: rgba(13, 20, 18, .72) !important;
}
.pm-table td,
.adv-table td,
.trading-asset-table td {
color: #dbe5e1;
}
.table-responsive,
.pm-card.p-0,
#posTableCard,
#txnTableCard,
.adv-table-card {
overflow: hidden;
}
#posSidebar,
#wlSidebar,
#filterSidebar,
.news-sidebar,
.settings-nav {
scrollbar-color: rgba(79, 214, 164, .36) transparent;
}
#posSidebar,
#wlSidebar,
#filterSidebar {
background:
linear-gradient(180deg, rgba(79, 214, 164, .075), transparent 160px),
rgba(13, 21, 19, .96) !important;
border-color: rgba(79, 214, 164, .24) !important;
}
#filterSidebar .pm-card,
.news-sidebar .pm-card,
.sidebar-section {
background: rgba(16, 25, 23, .92) !important;
}
/* ── Einklappbare Filter-Sidebar (wiederverwendbares Muster) ─────────────
Gilt fuer alle Module mit linker Filter-Sidebar: Positionen (#posSidebar),
Dashboard (#dashSidebar), Advisors (#advisorsSidebar), Konten
(#filterSidebar), News (#newsSidebar). Markup-Muster je Seite:
JS: window.pmInitCollapsibleSidebar('') in app.js toggelt die
Klasse 'pm-sidebar-collapsed' auf .pm-filter-layout und merkt den Zustand
pro Seite via pmSetUserPref/pmLoadUserPref (Key ui.sidebar.collapsed..v1).
Desktop-only (>=992px) — Mobile hat weiterhin eigene Filter-Modals und
bleibt hier komplett unangetastet. */
@media (min-width: 992px) {
.pm-filter-toggle {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 22px;
height: 40px;
align-self: flex-start;
position: sticky;
top: var(--pm-ft-top, 76px);
padding: 0;
border: 1px solid var(--pm-border);
border-radius: 8px;
background: var(--pm-card, #141d2e);
color: var(--pm-muted);
cursor: pointer;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pm-filter-toggle:hover,
.pm-filter-toggle:focus-visible {
background: rgba(59, 130, 246, .14);
border-color: var(--pm-accent);
color: var(--pm-accent);
outline: none;
}
.pm-filter-toggle i {
font-size: .8rem;
line-height: 1;
transition: transform .2s ease;
}
#posSidebar,
#dashSidebar,
#advisorsSidebar,
#filterSidebar,
#newsSidebar {
transition: width .22s ease, padding .22s ease, margin-right .22s ease,
opacity .18s ease, border-color .2s ease;
}
.pm-filter-layout.pm-sidebar-collapsed {
gap: .5rem !important;
}
.pm-filter-layout.pm-sidebar-collapsed #posSidebar,
.pm-filter-layout.pm-sidebar-collapsed #dashSidebar,
.pm-filter-layout.pm-sidebar-collapsed #advisorsSidebar,
.pm-filter-layout.pm-sidebar-collapsed #filterSidebar,
.pm-filter-layout.pm-sidebar-collapsed #newsSidebar {
width: 0 !important;
min-width: 0 !important;
padding: 0 !important;
border: 0 !important;
margin-right: -1rem !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
.sidebar-filter-btn,
.sidebar-tag-btn,
.sidebar-cat,
.sidebar-jump {
min-height: 29px;
border-radius: 6px !important;
}
.sidebar-cat,
.sidebar-jump {
color: #95a6a0 !important;
}
.sidebar-cat:hover,
.sidebar-jump:hover {
background: rgba(79, 214, 164, .08) !important;
color: #e2ece8 !important;
}
.sidebar-cat.active,
.sidebar-jump.active,
.sidebar-filter-btn.active {
background: linear-gradient(90deg, rgba(79, 214, 164, .18), rgba(109, 167, 255, .08)) !important;
color: #edf7f3 !important;
}
#fullTable,
#wlTable,
#kontenTable,
#manualAlertsTable,
#histTable {
font-size: .83rem;
}
#fullTable tbody td,
#wlTable tbody td,
#kontenTable tbody td,
#manualAlertsTable tbody td,
#histTable tbody td {
height: 42px;
}
.ticker-tag {
color: #f0f6f3;
letter-spacing: .01em;
}
.asset-badge {
border-radius: 5px !important;
}
.btn-group .btn.active,
.btn.btn-outline-secondary.active,
.mhPeriodBtn.active,
.mhLimitBtn.active {
background: linear-gradient(180deg, rgba(109, 167, 255, .28), rgba(79, 214, 164, .13)) !important;
border-color: rgba(109, 167, 255, .48) !important;
color: #eaf2ff !important;
}
.dropdown-menu {
background:
linear-gradient(180deg, rgba(79, 214, 164, .05), transparent 80px),
rgba(13, 20, 19, .98) !important;
}
.modal-content {
background:
linear-gradient(180deg, rgba(79, 214, 164, .05), transparent 110px),
rgba(16, 24, 23, .98) !important;
}
.alert,
.alert-warning,
.alert-danger,
.alert-info,
.alert-success {
border-radius: 8px !important;
border-color: rgba(79, 214, 164, .20) !important;
background: rgba(18, 27, 25, .92) !important;
color: #dce8e3 !important;
}
.news-layout {
gap: 1rem !important;
}
.news-sidebar {
width: 220px !important;
min-width: 220px !important;
}
.news-card {
border-radius: 8px !important;
}
.news-card img {
filter: saturate(1.06) contrast(1.02);
}
.news-card h6,
.news-card .fw-bold {
letter-spacing: -.01em;
}
#newsGrid {
--bs-gutter-x: .9rem;
--bs-gutter-y: .9rem;
}
#holdingsNewsBar,
#topicCloud,
.news-main > .pm-card {
border-color: rgba(79, 214, 164, .22) !important;
}
.adv-table-card {
border-radius: 8px;
overflow: hidden;
}
.adv-table tbody tr {
cursor: pointer;
}
.adv-avatar {
box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 8px 18px rgba(0,0,0,.26);
}
.adv-card {
border-radius: 8px !important;
}
.settings-nav {
border-left-width: 2px !important;
}
.settings-nav:hover {
background: rgba(79, 214, 164, .07) !important;
color: #e6f0ec !important;
}
.settings-nav.active {
background: linear-gradient(90deg, rgba(79, 214, 164, .18), rgba(109, 167, 255, .06)) !important;
border-left-color: var(--pm-green) !important;
color: #f0f6f3 !important;
}
.settings-panel .pm-card,
.settings-panel .ac-section,
.settings-panel [style*="background: #0f172a"],
.settings-panel [style*="background:#0f172a"] {
background: rgba(14, 22, 20, .92) !important;
border-color: rgba(40, 56, 51, .94) !important;
}
#kontenTable {
min-width: 920px;
}
#kontenTable tfoot tr {
background: rgba(79, 214, 164, .055) !important;
}
.adapter-badge,
.atype-above,
.atype-below,
.atype-pct_up,
.atype-pct_down,
.atype-target,
.atype-stop,
.atype-dca {
border-radius: 5px !important;
font-weight: 850 !important;
}
.alert-row-triggered {
opacity: .48;
}
.alert-type-btn {
background: rgba(13, 20, 19, .84) !important;
border-color: rgba(40, 56, 51, .95) !important;
}
.alert-type-btn.active {
background: linear-gradient(180deg, rgba(109, 167, 255, .23), rgba(79, 214, 164, .12)) !important;
border-color: rgba(109, 167, 255, .50) !important;
}
#tvChart {
background: #0b1211;
}
.trading-asset-table th,
.trading-asset-table td {
white-space: nowrap;
}
.pos-mobile-card {
background:
linear-gradient(180deg, rgba(255,255,255,.025), transparent 70px),
rgba(18, 27, 25, .96) !important;
border-color: rgba(47, 66, 60, .94) !important;
border-radius: 8px !important;
}
#cmdPalette,
#alertPopup,
#mobileMenu {
background:
linear-gradient(180deg, rgba(79, 214, 164, .055), transparent 130px),
#0b1110 !important;
border-color: rgba(79, 214, 164, .20) !important;
}
.alert-popup {
width: min(430px, calc(100vw - 22px)) !important;
max-height: min(560px, calc(100vh - 88px)) !important;
}
.alert-popup-head {
background: linear-gradient(90deg, rgba(79, 214, 164, .08), rgba(109, 167, 255, .05));
}
#alertPopupList {
max-height: min(480px, calc(100vh - 156px)) !important;
padding: .34rem !important;
}
.alert-popup-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: .62rem;
align-items: stretch;
padding: .58rem;
border-bottom: 1px solid rgba(79, 214, 164, .10);
border-radius: 8px;
background: rgba(13, 23, 22, .62);
transition: background .14s, border-color .14s, transform .14s;
}
.alert-popup-row + .alert-popup-row {
margin-top: .34rem;
}
.alert-popup-row:hover {
background: rgba(17, 35, 32, .86);
transform: translateY(-1px);
}
.alert-popup-row.is-acked {
opacity: .52;
}
.alert-popup-main {
min-width: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.alert-popup-topline {
display: flex;
align-items: center;
gap: .38rem;
flex-wrap: wrap;
}
.alert-popup-ticker {
padding: .1rem .46rem;
border-radius: 6px;
background: rgba(109, 167, 255, .16);
color: #dce9ff;
font-size: .75rem;
font-weight: 850;
}
.alert-popup-trigger {
display: inline-flex;
align-items: center;
gap: .26rem;
color: #e7c46a;
font-size: .72rem;
font-weight: 760;
}
.alert-popup-trigger i {
width: .9rem;
height: .9rem;
display: inline-grid;
place-items: center;
border-radius: 999px;
background: rgba(231, 196, 106, .12);
color: #f0d88a;
font-size: .66rem;
}
.alert-popup-target {
color: #4fd6a4;
font-size: .74rem;
font-weight: 850;
}
.alert-popup-acked {
padding: .08rem .34rem;
border-radius: 4px;
background: rgba(127, 145, 137, .12);
color: #8b9b95;
font-size: .64rem;
font-weight: 760;
}
.alert-popup-price-line {
display: flex;
align-items: baseline;
gap: .42rem;
margin-top: .28rem;
color: #7f9189;
font-size: .69rem;
}
.alert-popup-price-line strong {
color: #f2fbf7;
font-size: .82rem;
font-weight: 850;
}
.alert-popup-note {
margin-top: .2rem;
color: #a6b7b0;
font-size: .72rem;
line-height: 1.25;
}
.alert-popup-time {
margin-top: .18rem;
color: #64756e;
font-size: .66rem;
}
.alert-popup-actions {
display: flex;
align-items: center;
gap: .42rem;
}
.alert-popup-btn {
width: 42px;
min-width: 42px;
height: 42px;
border-radius: 8px;
display: inline-grid;
place-items: center;
border: 1px solid rgba(127, 145, 137, .24);
background: rgba(9, 14, 13, .64);
color: #9caea6;
cursor: pointer;
transition: background .14s, border-color .14s, color .14s, transform .14s;
}
.alert-popup-btn:hover {
transform: translateY(-1px);
}
.alert-popup-btn-ok {
border-color: rgba(79, 214, 164, .36);
background: rgba(79, 214, 164, .12);
color: #67e7b6;
}
.alert-popup-btn-ok:hover {
background: rgba(79, 214, 164, .20);
color: #dcfff1;
}
.alert-popup-btn-open {
border-color: rgba(109, 167, 255, .28);
background: rgba(109, 167, 255, .10);
color: #9fc2ff;
}
.alert-popup-btn-open:hover {
background: rgba(109, 167, 255, .17);
color: #e5efff;
}
#mobTabBar,
.d-flex.d-lg-none.pm-navbar {
background: rgba(9, 13, 13, .98) !important;
border-color: rgba(79, 214, 164, .18) !important;
}
@media (max-width: 991.98px) {
.pm-main {
padding: .85rem .75rem;
}
.pm-main > .d-flex.justify-content-between.align-items-center.mb-4,
.pm-main > .mb-4:first-child,
.pm-main > .container-fluid > .d-flex.align-items-center.justify-content-between.mb-3 {
align-items: flex-start !important;
gap: .8rem;
}
.pm-main h4,
.pm-main h5 {
font-size: 1.08rem;
}
.news-sidebar {
width: 100% !important;
min-width: 0 !important;
}
.alert-popup {
right: 10px !important;
bottom: 78px !important;
}
}
/* CodeX GUI tuning pass: cleaner hierarchy, calmer density, sharper app chrome. */
:root {
--pm-ink: #f7fbff;
--pm-blue-soft: rgba(109, 167, 255, .16);
--pm-green-soft: rgba(79, 214, 164, .14);
--pm-gold-soft: rgba(231, 196, 106, .12);
--pm-red-soft: rgba(255, 104, 117, .12);
--pm-ring: 0 0 0 1px rgba(79, 214, 164, .06), 0 18px 46px rgba(0, 0, 0, .24);
}
html {
scroll-padding-top: 78px;
}
body {
text-rendering: geometricPrecision;
}
.pm-navbar {
backdrop-filter: blur(18px) saturate(1.18);
}
.pm-navbar .container-fluid {
min-height: 54px;
}
.pm-logo {
width: 27px;
height: 27px;
display: inline-grid;
place-items: center;
border-radius: 7px;
overflow: hidden;
background:
linear-gradient(135deg, rgba(109, 167, 255, .22), rgba(79, 214, 164, .10)),
rgba(13, 20, 19, .86);
border: 1px solid rgba(109, 167, 255, .22);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.pm-logo-sm {
width: 26px;
height: 26px;
}
.pm-logo i {
color: var(--pm-green) !important;
}
.pm-navbar .navbar-brand {
color: var(--pm-ink) !important;
}
.pm-navbar .nav-link {
position: relative;
min-width: 70px;
color: #91a49d !important;
}
.pm-navbar .nav-link::before {
content: "";
position: absolute;
left: 9px;
right: 9px;
bottom: -1px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, rgba(79, 214, 164, .80), rgba(109, 167, 255, .70), transparent);
opacity: 0;
transform: scaleX(.65);
transition: opacity .16s, transform .16s;
}
.pm-navbar .nav-link:hover::before,
.pm-navbar .nav-link.active::before {
opacity: 1;
transform: scaleX(1);
}
.pm-navbar .nav-link.active {
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.22) !important;
}
.pm-navbar .btn.btn-sm {
display: inline-grid;
place-items: center;
border-radius: 7px !important;
}
#refresh-countdown {
color: #8fa19b !important;
background: rgba(4, 8, 7, .88) !important;
border: 1px solid rgba(79, 214, 164, .18);
}
.pm-main > .d-flex.justify-content-between.align-items-center.mb-4,
.pm-main > .d-flex.justify-content-between.align-items-center.mb-3,
.pm-main > .d-flex.justify-content-between.align-items-center.mb-2 {
background:
linear-gradient(90deg, rgba(79, 214, 164, .095), rgba(109, 167, 255, .052), rgba(231, 196, 106, .025) 58%, transparent),
rgba(13, 20, 19, .78);
border: 1px solid rgba(79, 214, 164, .20);
border-radius: 8px;
padding: .86rem .95rem !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 14px 36px rgba(0,0,0,.14);
}
.pm-screen-head {
background:
linear-gradient(90deg, rgba(79, 214, 164, .115), rgba(109, 167, 255, .060), rgba(231, 196, 106, .024) 58%, transparent),
rgba(13, 20, 19, .82) !important;
border: 1px solid rgba(79, 214, 164, .23) !important;
border-bottom-color: rgba(109, 167, 255, .20) !important;
border-radius: 8px !important;
padding: .86rem .95rem !important;
box-shadow: inset 3px 0 0 rgba(79, 214, 164, .72), inset 0 1px 0 rgba(255,255,255,.055), 0 14px 36px rgba(0,0,0,.16) !important;
margin-bottom: 1rem !important;
}
.pm-screen-head h4,
.pm-screen-head h5 {
text-shadow: 0 1px 0 rgba(0,0,0,.28);
}
.pm-main > .d-flex.justify-content-between.align-items-center.mb-2 + .d-flex.gap-3 {
margin-top: -.35rem;
}
.pm-main > .d-flex.justify-content-between.align-items-center.mb-4 .d-flex.gap-2,
.pm-main > .d-flex.justify-content-between.align-items-center.mb-3 .d-flex.gap-2,
.pm-main > .d-flex.justify-content-between.align-items-center.mb-2 .d-flex.gap-2 {
row-gap: .42rem !important;
}
.flex-grow-1 > .d-flex.justify-content-between.align-items-center.mb-2,
.flex-grow-1 > .d-flex.justify-content-between.align-items-center.mb-3,
.flex-grow-1 > .d-flex.justify-content-between.align-items-center.mb-4 {
background:
linear-gradient(90deg, rgba(79, 214, 164, .095), rgba(109, 167, 255, .05), rgba(231, 196, 106, .02) 58%, transparent),
rgba(13, 20, 19, .78);
border: 1px solid rgba(79, 214, 164, .20);
border-bottom-color: rgba(109, 167, 255, .18);
border-radius: 8px;
padding: .86rem .95rem !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 14px 36px rgba(0,0,0,.14);
}
.flex-grow-1 > .d-flex.gap-3.mb-4.flex-wrap.align-items-center {
margin-top: -.45rem;
margin-bottom: 1rem !important;
padding: 0 .25rem;
}
.flex-grow-1 > .d-flex.gap-3.mb-4.flex-wrap.align-items-center .form-control {
max-width: 320px !important;
background:
linear-gradient(90deg, rgba(109, 167, 255, .055), transparent 56%),
#0d1312 !important;
}
.pm-main h4,
.pm-main h5 {
color: var(--pm-ink);
}
.pm-main small.text-muted,
.text-muted {
color: #93a49e !important;
}
.pm-card,
.card.bg-dark,
.adv-table-card,
.adv-card,
.news-card,
.grid-stack > .grid-stack-item > .grid-stack-item-content {
transition: border-color .16s, box-shadow .16s, transform .16s, background .16s;
}
.pm-card:hover,
.adv-card:hover,
.news-card:hover {
transform: translateY(-1px);
}
.pm-card.text-center {
position: relative;
overflow: hidden;
display: grid;
align-content: center;
gap: .16rem;
}
.pm-card.text-center::after {
content: "";
position: absolute;
inset: 0 0 auto;
height: 2px;
background: linear-gradient(90deg, rgba(79, 214, 164, .72), rgba(109, 167, 255, .46), transparent);
opacity: .72;
}
.pm-card.text-center .fw-bold.fs-5,
.pm-card.text-center .fw-bold.fs-4 {
color: var(--pm-ink);
font-size: clamp(1.15rem, 1.2vw, 1.55rem) !important;
line-height: 1.12;
}
#kpiPnlCard::after,
#kpi24hCard::after,
.bg-red-subtle::after {
background: linear-gradient(90deg, rgba(255, 104, 117, .78), rgba(231, 196, 106, .28), transparent);
}
#posSidebar,
#dashSidebar,
#wlSidebar,
#filterSidebar,
.news-sidebar,
.settings-nav {
box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 14px 34px rgba(0,0,0,.18) !important;
}
#posSidebar,
#dashSidebar,
#wlSidebar,
#filterSidebar {
padding: 1rem !important;
}
#posSidebar .text-uppercase,
#dashSidebar .text-uppercase,
#wlSidebar .text-uppercase,
#filterSidebar .text-uppercase,
.pm-card-header {
color: #81938c !important;
letter-spacing: .13em !important;
}
.sidebar-filter-btn,
.sidebar-tag-btn {
font-weight: 760 !important;
}
.sidebar-filter-btn.active,
.sidebar-tag-btn.active {
box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 18px rgba(79, 214, 164, .08);
}
.form-control,
.form-select,
textarea {
min-height: 32px;
}
.form-control::placeholder {
color: #74857f;
opacity: 1;
}
.btn-outline-success,
.btn-outline-danger,
.btn-outline-secondary {
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.btn-pm,
.btn-primary,
.tool.primary {
background: linear-gradient(180deg, #79adff, #4b7fd8) !important;
box-shadow: 0 10px 24px rgba(109, 167, 255, .20), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn-pm:hover,
.btn-primary:hover,
.tool.primary:hover {
transform: translateY(-1px);
}
.table-responsive,
#posTableCard,
#txnTableCard,
.adv-table-card {
border: 1px solid rgba(47, 66, 60, .88);
box-shadow: var(--pm-ring);
}
.pm-table thead th,
.adv-table thead th,
.trading-asset-table thead th {
position: sticky;
top: 0;
z-index: 2;
}
.pm-table td,
.adv-table td,
.trading-asset-table td {
vertical-align: middle;
}
.pm-table tbody tr:hover,
.table-hover tbody tr:hover {
color: #f7fbff !important;
}
.asset-logo-wrap,
.asset-logo,
.account-logo {
box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 8px 18px rgba(0,0,0,.24);
}
/* Kern-Geometrie + Rundung global (aus positions.html ausgelagert -> auch Watchlist) */
.asset-logo-wrap { position:relative; width:28px; height:28px; flex-shrink:0; transition:transform .15s; }
.asset-logo-img { border-radius:50%; object-fit:contain; background:transparent; }
.asset-logo-letter { width:28px; height:28px; border-radius:50%; background:#374151; color:#e5e7eb; font-weight:700; font-size:0.75rem; align-items:center; justify-content:center; flex-shrink:0; }
.ticker-tag,
.pm-table strong,
.pm-table .fw-bold {
color: #f3faf6 !important;
}
#dashGrid .pm-card {
min-height: 100%;
}
#dashGrid .grid-stack-item-content {
box-shadow: var(--pm-ring) !important;
}
#dashGrid .pm-card-header,
#dashGrid .text-uppercase {
color: #859790 !important;
}
#dashGrid [style*="height:8px"],
#dashGrid [style*="height:6px"] {
border-radius: 999px !important;
}
#dashGrid [style*="background:#ef4444"],
#dashGrid [style*="background: #ef4444"] {
background: linear-gradient(90deg, #ff6875, #e7c46a) !important;
}
#dashGrid [style*="background:#10b981"],
#dashGrid [style*="background: #10b981"] {
background: linear-gradient(90deg, #4fd6a4, #56d6b0) !important;
}
#fullTable th,
#posTable th,
#txnTable th {
white-space: nowrap;
}
#fullTable tbody tr,
#posTable tbody tr,
#txnTable tbody tr {
transition: background .14s, box-shadow .14s, transform .14s;
}
#fullTable tbody tr:hover,
#posTable tbody tr:hover,
#txnTable tbody tr:hover {
transform: translateX(1px);
}
#mobTabBar .mob-tab,
.mob-menu-link {
letter-spacing: 0;
}
#cmdPalette {
box-shadow: 0 24px 70px rgba(0,0,0,.58), 0 0 0 1px rgba(79, 214, 164, .12) !important;
}
.pm-ticker-tape {
color: #a2b3ad;
}
.pm-ticker-tape a,
.sb-cell {
transition: background .14s, color .14s;
}
.pm-ticker-tape a:hover,
.sb-cell:hover {
background: rgba(79, 214, 164, .075) !important;
}
/* News module tuning: put scanning first, keep diagnostics honest. */
.news-screen-head {
margin-bottom: .9rem !important;
}
.news-status-pill,
.news-x-status {
display: inline-flex;
align-items: center;
gap: .42rem;
min-height: 29px;
padding: .28rem .62rem;
border-radius: 6px;
border: 1px solid rgba(79, 214, 164, .22);
background: rgba(13, 20, 19, .72);
color: #9fb0aa;
font-size: .72rem;
font-weight: 760;
}
.news-x-status {
width: fit-content;
max-width: min(520px, 100%);
line-height: 1.35;
}
.news-status-pill.ok,
.news-x-status.ok {
border-color: rgba(79, 214, 164, .34);
color: #9ff0d0;
}
.news-status-pill.warn,
.news-x-status.warn {
border-color: rgba(231, 196, 106, .36);
color: #f0d88a;
}
.news-status-pill.err,
.news-x-status.err {
border-color: rgba(255, 104, 117, .34);
color: #ff9da6;
}
.news-status-dot {
width: .45rem;
height: .45rem;
flex: 0 0 .45rem;
border-radius: 999px;
background: #8a9a94;
box-shadow: 0 0 0 3px rgba(138, 154, 148, .12);
}
.ok .news-status-dot {
background: var(--pm-green);
box-shadow: 0 0 0 3px rgba(79, 214, 164, .13);
}
.warn .news-status-dot {
background: var(--pm-gold);
box-shadow: 0 0 0 3px rgba(231, 196, 106, .13);
}
.err .news-status-dot {
background: var(--pm-red);
box-shadow: 0 0 0 3px rgba(255, 104, 117, .13);
}
.news-top-grid {
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
gap: .82rem;
}
.news-top-grid > .pm-card {
margin-bottom: 0 !important;
}
.news-signal-card {
min-height: 84px;
}
.news-trending-card,
.news-price-card {
grid-column: 1 / -1;
}
.news-trending-card .d-flex.flex-wrap.gap-2 {
gap: .38rem !important;
}
.news-price-card {
padding: .85rem 1rem !important;
}
.news-price-card .pm-card-header {
margin-bottom: .65rem !important;
}
.news-price-grid {
max-height: 158px;
overflow: auto;
padding-right: .12rem;
scrollbar-width: thin;
}
.news-price-grid .pm-card {
padding: .55rem .72rem !important;
}
.news-layout {
align-items: flex-start;
}
.news-main > .pm-card {
margin-bottom: .82rem !important;
}
.news-sidebar .pm-card {
padding-top: .72rem !important;
padding-bottom: .72rem !important;
}
#newsGrid {
--bs-gutter-x: .82rem;
--bs-gutter-y: .82rem;
}
.news-card,
.yt-card,
.x-card {
min-height: 100%;
}
.news-card [style*="height:140px"] {
height: 118px !important;
}
.yt-card [style*="height:148px"] {
height: 126px !important;
}
#sec-press,
#sec-youtube,
#sec-x {
position: sticky;
top: 55px;
z-index: 5;
padding: .45rem .2rem;
background: linear-gradient(180deg, rgba(9, 13, 13, .96), rgba(9, 13, 13, .82));
backdrop-filter: blur(10px);
}
@media (max-width: 991.98px) {
.news-top-grid {
grid-template-columns: 1fr;
}
.news-trending-card,
.news-price-card {
grid-column: auto;
}
#sec-press,
#sec-youtube,
#sec-x {
position: static;
}
}
/* Watchlist + Settings tuning: faster scanning, cleaner control groups. */
.watchlist-layout {
align-items: flex-start;
}
.watchlist-screen-head,
.settings-screen-head {
margin-bottom: .88rem !important;
}
.watchlist-actions {
justify-content: flex-end;
}
.watchlist-actions .form-control {
width: 178px;
min-height: 32px;
border-color: rgba(127, 145, 137, .28) !important;
background: rgba(10, 14, 14, .7) !important;
}
.watchlist-kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .82rem;
}
.watchlist-kpi {
min-height: 84px;
padding: .74rem .86rem !important;
}
.watchlist-kpi .pm-card-header {
margin-bottom: .38rem;
}
.watchlist-kpi .text-muted {
font-size: .74rem;
}
.watchlist-table-card {
overflow: hidden;
}
#wlTable {
margin-bottom: 0;
}
#wlTable th {
white-space: nowrap;
}
#wlTable td {
vertical-align: middle;
}
#wlTable tbody tr {
transition: background .14s, box-shadow .14s, transform .14s;
}
#wlTable tbody tr:hover {
background: rgba(79, 214, 164, .055);
transform: translateX(1px);
}
/* Ticker schlicht wie in der Positions-Tabelle: KEIN Rahmen/Kasten/Hintergrund. */
#wlTable .ticker-tag {
border: none;
background: none;
padding: 0;
border-radius: 0;
}
#wlTable canvas {
max-width: 72px;
}
#wlSidebar {
width: 216px !important;
border-color: rgba(79, 214, 164, .10);
}
#wlSidebar hr {
border-color: rgba(127, 145, 137, .16) !important;
}
#wlSidebar .sidebar-filter-btn {
min-height: 31px;
}
#wlSidebar .sidebar-filter-btn.active {
background: rgba(79, 214, 164, .13) !important;
color: #e8f5ef !important;
box-shadow: inset 3px 0 0 rgba(79, 214, 164, .72);
}
.settings-shell {
display: flex;
align-items: stretch;
min-height: 560px !important;
}
/* ── Onboarding Tour ───────────────────────────────────────────────────── */
.pm-onboarding {
position: fixed;
right: 20px;
bottom: 84px;
z-index: 2500;
}
.pm-onb-launch {
min-height: 52px;
border: 1px solid rgba(79, 214, 164, .46);
border-radius: 16px;
padding: 8px 14px 8px 8px;
display: inline-flex;
align-items: center;
gap: 10px;
color: #e8f5ef;
background:
linear-gradient(145deg, rgba(9, 18, 22, .98), rgba(13, 25, 30, .96)),
radial-gradient(circle at 20% 20%, rgba(79, 214, 164, .18), transparent 38%);
box-shadow: 0 18px 48px rgba(0, 0, 0, .48), 0 0 0 1px rgba(255, 255, 255, .03) inset;
font-size: .8rem;
font-weight: 760;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pm-onb-launch:hover {
transform: translateY(-2px);
border-color: rgba(122, 167, 255, .55);
box-shadow: 0 22px 58px rgba(0, 0, 0, .56), 0 0 0 1px rgba(255, 255, 255, .05) inset;
}
.pm-onb-orb {
width: 36px;
height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #07110e;
background: linear-gradient(135deg, #4fd6a4, #7aa7ff);
box-shadow: 0 8px 20px rgba(79, 214, 164, .22);
}
.pm-onb-launch-text {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.05;
}
.pm-onb-launch-text small {
color: #8ba39a;
font-size: .64rem;
font-weight: 700;
margin-top: 3px;
}
.pm-onb-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #4fd6a4;
box-shadow: 0 0 0 4px rgba(79, 214, 164, .14);
}
.pm-onb-shade {
position: fixed;
inset: 0;
z-index: 2400;
background: rgba(1, 5, 7, .64);
backdrop-filter: blur(4px);
}
.pm-onb-panel {
position: fixed;
right: 18px;
bottom: 148px;
width: min(760px, calc(100vw - 28px));
z-index: 2501;
border: 1px solid rgba(79, 214, 164, .30);
border-radius: 18px;
background:
linear-gradient(180deg, rgba(13, 23, 27, .99), rgba(8, 16, 20, .99)),
radial-gradient(circle at 100% 0, rgba(122, 167, 255, .12), transparent 34%);
box-shadow: 0 34px 110px rgba(0, 0, 0, .68), 0 0 0 1px rgba(255, 255, 255, .035) inset;
padding: 0;
overflow: hidden;
}
.pm-onb-shell {
display: grid;
grid-template-columns: 58px 1fr;
}
.pm-onb-rail {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 10px;
border-right: 1px solid rgba(127, 145, 137, .12);
background: rgba(3, 8, 11, .42);
}
.pm-onb-rail-step {
width: 38px;
height: 38px;
border: 1px solid rgba(127, 145, 137, .18);
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
color: #82968d;
background: rgba(127, 145, 137, .055);
}
.pm-onb-rail-step span {
position: absolute;
right: 5px;
bottom: 2px;
color: #5d7168;
font-size: .56rem;
font-weight: 850;
}
.pm-onb-rail-step.active {
color: #06110d;
border-color: rgba(79, 214, 164, .62);
background: linear-gradient(135deg, #4fd6a4, #7aa7ff);
box-shadow: 0 10px 26px rgba(79, 214, 164, .20);
}
.pm-onb-rail-step.active span {
color: rgba(6, 17, 13, .72);
}
.pm-onb-main {
min-width: 0;
}
.pm-onb-hero,
.pm-onb-foot,
.pm-onb-actions,
.pm-onb-chat,
.pm-onb-stats,
.pm-onb-highlights,
.pm-onb-prompts,
.pm-onb-score,
.pm-onb-step-checks {
display: flex;
align-items: center;
gap: 8px;
}
.pm-onb-hero {
align-items: flex-start;
padding: 18px 18px 15px;
border-bottom: 1px solid rgba(127, 145, 137, .12);
background:
linear-gradient(135deg, rgba(79, 214, 164, .13), rgba(122, 167, 255, .07)),
linear-gradient(90deg, rgba(255, 255, 255, .025), transparent);
}
.pm-onb-hero-icon {
width: 46px;
height: 46px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: #06110d;
background: linear-gradient(135deg, #4fd6a4, #7aa7ff);
font-size: 1.25rem;
box-shadow: 0 12px 28px rgba(79, 214, 164, .18);
}
.pm-onb-hero-copy {
min-width: 0;
flex: 1;
}
.pm-onb-kicker {
color: #7d9188;
font-size: .68rem;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
}
.pm-onb-hero h5 {
margin: 2px 0 0;
font-size: 1.12rem;
letter-spacing: 0;
}
.pm-onb-hero p {
margin: 7px 0 0;
color: #afc3ba;
font-size: .87rem;
line-height: 1.42;
}
.pm-onb-icon {
width: 30px;
height: 30px;
border: 1px solid rgba(127, 145, 137, .28);
border-radius: 8px;
color: #aebdb6;
background: rgba(16, 25, 30, .86);
}
.pm-onb-progress {
height: 5px;
border-radius: 999px;
overflow: hidden;
background: rgba(127, 145, 137, .16);
margin: 0;
}
.pm-onb-progress span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #4fd6a4, #7aa7ff);
}
.pm-onb-answer {
color: #aebdb6;
font-size: .84rem;
margin: 0 0 12px;
}
.pm-onb-grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 12px;
padding: 14px 18px 10px;
}
.pm-onb-score {
align-items: center;
gap: 12px;
border: 1px solid rgba(127, 145, 137, .14);
border-radius: 12px;
padding: 10px;
margin-bottom: 10px;
background: rgba(127, 145, 137, .052);
}
.pm-onb-ring {
width: 58px;
height: 58px;
border-radius: 50%;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
color: #edf8f3;
background:
radial-gradient(circle at center, #0d171b 0 58%, transparent 60%),
conic-gradient(#4fd6a4 var(--pm-score), rgba(127, 145, 137, .18) 0);
}
.pm-onb-ring strong {
font-size: 1.02rem;
line-height: 1;
}
.pm-onb-ring span {
color: #83978e;
font-size: .58rem;
font-weight: 800;
margin-left: 1px;
}
.pm-onb-score-label {
color: #e8f5ef;
font-size: .82rem;
font-weight: 850;
}
.pm-onb-score p {
margin: 3px 0 0;
color: #879b92;
font-size: .72rem;
line-height: 1.35;
}
.pm-onb-highlights {
align-items: stretch;
flex-wrap: wrap;
}
.pm-onb-metric {
flex: 1 1 calc(50% - 6px);
min-width: 96px;
border: 1px solid rgba(127, 145, 137, .14);
border-radius: 12px;
padding: 9px 10px;
background: rgba(127, 145, 137, .055);
}
.pm-onb-metric span {
display: block;
color: #789087;
font-size: .64rem;
font-weight: 850;
text-transform: uppercase;
letter-spacing: 0;
}
.pm-onb-metric strong {
display: block;
margin-top: 3px;
color: #edf8f3;
font-size: .9rem;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pm-onb-metric strong.pos { color: #66e2aa; }
.pm-onb-metric strong.neg { color: #ff7b7b; }
.pm-onb-checklist {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
}
.pm-onb-check {
min-height: 32px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(127, 145, 137, .14);
border-radius: 8px;
padding: 6px 9px;
color: #b7c9c1;
background: rgba(127, 145, 137, .045);
text-decoration: none;
font-size: .78rem;
transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.pm-onb-check:hover {
transform: translateX(2px);
border-color: rgba(122, 167, 255, .28);
background: rgba(122, 167, 255, .06);
}
.pm-onb-check.done {
color: #dbf7ec;
border-color: rgba(79, 214, 164, .24);
background: rgba(79, 214, 164, .075);
}
.pm-onb-check i {
color: #4fd6a4;
}
.pm-onb-step-checks {
flex-wrap: wrap;
align-items: stretch;
padding: 0 18px 12px;
}
.pm-onb-step-checks span {
flex: 1 1 160px;
min-height: 32px;
border: 1px solid rgba(79, 214, 164, .16);
border-radius: 10px;
padding: 7px 9px;
display: inline-flex;
align-items: center;
gap: 6px;
color: #b7c9c1;
background: rgba(79, 214, 164, .045);
font-size: .74rem;
line-height: 1.25;
}
.pm-onb-step-checks i {
color: #4fd6a4;
}
.pm-onb-stats {
flex-wrap: wrap;
margin-bottom: 12px;
}
.pm-onb-stats span {
border: 1px solid rgba(127, 145, 137, .16);
border-radius: 999px;
padding: 3px 9px;
color: #d8e3de;
background: rgba(127, 145, 137, .07);
font-size: .72rem;
}
.pm-onb-agent {
margin: 0 18px 14px;
border-top: 1px solid rgba(127, 145, 137, .14);
border-bottom: 1px solid rgba(127, 145, 137, .14);
padding: 12px 0;
}
.pm-onb-agent-title {
color: #e8f5ef;
font-size: .78rem;
font-weight: 800;
margin-bottom: 8px;
}
.pm-onb-answer a {
color: #7aa7ff;
font-weight: 760;
text-decoration: none;
}
.pm-onb-thinking {
color: #7aa7ff;
}
.pm-onb-prompts {
flex-wrap: wrap;
margin: -2px 0 10px;
}
.pm-onb-prompts button {
border: 1px solid rgba(122, 167, 255, .24);
border-radius: 999px;
padding: 4px 9px;
color: #cfe0ff;
background: rgba(122, 167, 255, .07);
font-size: .7rem;
font-weight: 700;
transition: border-color .16s ease, background .16s ease;
}
.pm-onb-prompts button:hover {
border-color: rgba(79, 214, 164, .38);
background: rgba(79, 214, 164, .075);
}
.pm-onb-chat input {
min-width: 0;
flex: 1;
min-height: 34px;
border: 1px solid rgba(127, 145, 137, .22);
border-radius: 8px;
padding: 0 10px;
color: #e8f5ef;
background: #101920;
font-size: .8rem;
}
.pm-onb-chat button {
width: 36px;
height: 34px;
border: 1px solid rgba(79, 214, 164, .34);
border-radius: 8px;
color: #4fd6a4;
background: rgba(79, 214, 164, .08);
}
.pm-onb-actions {
justify-content: flex-end;
}
.pm-onb-foot {
justify-content: space-between;
padding: 0 18px 16px;
}
.pm-onb-dots {
display: inline-flex;
align-items: center;
gap: 5px;
}
.pm-onb-step-dot {
width: 8px;
height: 8px;
border: 0;
border-radius: 999px;
padding: 0;
background: rgba(127, 145, 137, .32);
}
.pm-onb-step-dot.active {
width: 22px;
background: #4fd6a4;
}
.pm-onb-focus {
position: relative;
z-index: 2502 !important;
outline: 2px solid rgba(79, 214, 164, .78) !important;
outline-offset: 3px;
border-radius: 8px;
}
@media (max-width: 640px) {
.pm-onboarding {
right: 12px;
bottom: 76px;
}
.pm-onb-panel {
left: 14px;
right: 14px;
bottom: 120px;
width: auto;
max-height: calc(100vh - 142px);
overflow: auto;
}
.pm-onb-shell {
grid-template-columns: 1fr;
}
.pm-onb-rail {
flex-direction: row;
overflow-x: auto;
border-right: 0;
border-bottom: 1px solid rgba(127, 145, 137, .12);
}
.pm-onb-grid {
grid-template-columns: 1fr;
}
.pm-onb-foot {
align-items: stretch;
flex-direction: column;
}
.pm-onb-actions {
justify-content: space-between;
}
}
.settings-sidebar-col {
flex: 0 0 232px;
width: 232px !important;
}
.settings-sidebar-card {
position: sticky;
top: 72px;
max-height: calc(100vh - 96px);
overflow: auto;
scrollbar-width: thin;
}
.settings-nav-group {
padding: .76rem 1rem .28rem;
color: #73867f;
font-size: .61rem;
font-weight: 850;
letter-spacing: .12em;
line-height: 1;
text-transform: uppercase;
}
.settings-nav-group:first-of-type {
padding-top: .18rem;
}
.settings-nav {
min-height: 34px;
margin: 1px 0;
border-radius: 0 7px 7px 0;
}
.settings-nav i {
width: 1rem;
opacity: .9;
}
.settings-nav:hover {
background: rgba(79, 214, 164, .07) !important;
color: #e8f5ef !important;
}
.settings-nav.active {
background: rgba(79, 214, 164, .13) !important;
border-left-color: var(--pm-green) !important;
color: #f4fbf8 !important;
}
.settings-content-card {
padding: 1.05rem 1.15rem !important;
}
.settings-panel > h6,
.settings-panel > .d-flex h6 {
color: #ecf6f2;
font-size: .98rem;
letter-spacing: 0;
}
.settings-panel > small,
.settings-panel .form-text {
color: #75867f !important;
}
.settings-panel .row[style*="max-width"] {
max-width: 760px !important;
}
.settings-panel .alert {
border-radius: 8px;
border-color: rgba(127, 145, 137, .20);
}
@media (max-width: 991.98px) {
.watchlist-layout,
.settings-shell {
display: block !important;
}
#wlSidebar,
.settings-sidebar-col {
width: 100% !important;
}
#wlSidebar,
.settings-sidebar-card {
position: static !important;
max-height: none !important;
margin-bottom: .82rem;
}
.watchlist-kpi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.watchlist-actions {
justify-content: flex-start;
}
.watchlist-table-card {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.watchlist-table-card #wlTable {
min-width: 1040px;
}
#wlTable th,
#wlTable td {
padding-left: .56rem;
padding-right: .56rem;
}
.settings-content-card,
.settings-sidebar-card {
border-radius: 8px !important;
border-left: 1px solid rgba(127, 145, 137, .16) !important;
}
.settings-shell > .col {
min-width: 0;
}
.settings-sidebar-card {
display: flex;
flex-wrap: wrap;
gap: .28rem;
padding: .72rem !important;
}
.settings-nav-group {
flex: 0 0 100%;
padding: .7rem .22rem .18rem;
}
.settings-nav {
width: auto !important;
min-height: 42px;
border: 1px solid rgba(127, 145, 137, .14) !important;
border-left-width: 1px !important;
border-radius: 8px !important;
padding: .5rem .7rem !important;
background: rgba(15, 23, 42, .32) !important;
touch-action: manipulation;
}
.settings-nav.active {
border-color: rgba(79, 214, 164, .55) !important;
}
.settings-nav .badge {
margin-left: .3rem !important;
}
.settings-panel .row[style*="max-width"] {
max-width: none !important;
}
.settings-panel .pm-card,
.settings-panel [class*="p-3 rounded"],
.settings-panel .alert {
max-width: 100%;
}
.settings-table-shell {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.settings-users-table,
.settings-exchange-table {
min-width: 720px;
}
.settings-panel .btn,
.settings-panel .btn-pm,
.settings-panel .form-control,
.settings-panel .form-select,
.settings-panel .form-check-input {
min-height: 38px;
}
.settings-panel .btn-sm,
.settings-panel .btn-pm-sm,
.settings-panel .form-control-sm,
.settings-panel .form-select-sm {
min-height: 36px;
}
.settings-panel .d-flex.gap-2,
.settings-panel .d-flex.gap-3 {
row-gap: .55rem !important;
}
.ac-hero {
align-items: flex-start !important;
flex-wrap: wrap;
}
.ac-hero #acGlobalStatus {
width: min(100%, 220px);
}
#acKpiStrip {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#acKpiStrip .ac-stat {
min-width: 0;
}
.ac-section-header {
align-items: flex-start !important;
flex-direction: column;
gap: .4rem;
}
.ac-toggle-row {
align-items: center;
grid-template-columns: auto minmax(0, 1fr) auto auto;
}
.ac-toggle-row .label {
min-width: 0;
}
}
@media (max-width: 575.98px) {
.settings-screen-head {
align-items: stretch !important;
flex-direction: column;
gap: .5rem;
}
.settings-shell {
margin-left: -.35rem;
margin-right: -.35rem;
}
.settings-sidebar-card {
position: sticky !important;
top: 56px;
z-index: 20;
flex-wrap: nowrap;
margin-bottom: .75rem;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.settings-nav-group {
display: none;
}
.settings-nav {
flex: 0 0 auto;
min-height: 44px;
font-size: .8rem !important;
}
.settings-nav i {
width: auto;
}
.settings-content-card {
padding: .82rem !important;
}
.settings-panel > .d-flex.justify-content-between,
.settings-panel .pm-card > .d-flex.justify-content-between,
.settings-panel .d-flex.justify-content-between.align-items-center,
.settings-panel .d-flex.justify-content-between.align-items-start {
align-items: stretch !important;
flex-direction: column;
}
.settings-panel .row > [class*="col-6"],
.settings-panel .row > [class*="col-sm-"],
.settings-panel .row > [class*="col-md-"] {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
}
.settings-panel .d-flex:not(.settings-nav):not(.dropdown-menu):not(.form-check) {
flex-wrap: wrap;
}
.settings-panel .btn,
.settings-panel .btn-pm,
.settings-panel .form-control,
.settings-panel .form-select {
width: 100%;
}
.settings-panel .input-group {
flex-wrap: nowrap;
}
.settings-panel .input-group .form-control {
min-width: 0;
}
.settings-panel .input-group .btn {
width: auto;
}
.settings-panel input[type="time"],
.settings-panel input[type="color"] {
width: 100% !important;
}
.settings-panel .form-check-input {
width: 2.5em;
}
.ac-hero {
padding: 14px !important;
}
.ac-hero-icon {
width: 46px !important;
height: 46px !important;
}
#acKpiStrip {
grid-template-columns: 1fr;
}
.ac-stat {
width: 100%;
}
.ac-quiet-card .d-flex,
.ac-section-header {
align-items: stretch !important;
}
.ac-toggle-row {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: .55rem .7rem;
padding: .78rem !important;
}
.ac-toggle-row .label {
grid-column: 2 / -1;
}
.ac-toggle-row .btn {
grid-column: 2;
width: 44px;
justify-self: start;
}
.ac-toggle-row .form-switch {
grid-column: 3;
justify-self: end;
}
.ac-recent-alarm {
align-items: flex-start !important;
flex-direction: column;
}
.settings-users-table-shell,
.settings-exchange-card {
overflow: visible;
border: 0;
background: transparent !important;
box-shadow: none;
}
.settings-users-table,
.settings-exchange-table {
display: block;
min-width: 0;
width: 100%;
}
.settings-users-table thead {
display: none;
}
.settings-users-table tbody,
.settings-exchange-table tbody {
display: grid;
gap: .7rem;
}
.settings-users-table tr,
.settings-exchange-table tr {
display: grid;
gap: .5rem;
padding: .78rem;
border: 1px solid rgba(47, 66, 60, .86);
border-radius: 8px;
background: rgba(11, 15, 25, .88);
}
.settings-users-table td,
.settings-exchange-table td {
display: flex;
justify-content: space-between;
gap: .75rem;
width: 100% !important;
max-width: none !important;
min-height: 0;
padding: 0 !important;
border: 0 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
text-align: right !important;
}
.settings-users-table td[data-label]::before,
.settings-exchange-table td[data-label]::before {
content: attr(data-label);
flex: 0 0 auto;
color: #73867f;
font-size: .72rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
}
.settings-exchange-logo {
justify-content: flex-start !important;
margin-bottom: .15rem;
}
.settings-table-actions {
justify-content: flex-end !important;
}
.settings-table-actions .btn {
width: 42px;
min-height: 38px;
}
.watchlist-screen-head {
align-items: stretch !important;
flex-direction: column;
gap: .72rem;
}
.watchlist-actions {
width: 100%;
}
.watchlist-actions .btn,
.watchlist-actions .btn-pm {
min-height: 34px;
}
.watchlist-kpi-grid {
grid-template-columns: 1fr;
}
.watchlist-actions .form-control {
width: 100%;
max-width: none !important;
}
.watchlist-table-card {
overflow: visible;
border: 0;
box-shadow: none;
background: transparent !important;
}
.watchlist-table-card #wlTable {
display: block;
min-width: 0;
width: 100%;
font-size: .82rem;
}
#wlTable thead {
display: none;
}
#wlTable tbody {
display: grid;
gap: .72rem;
width: 100%;
}
#wlTable tbody tr[data-ticker] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: .46rem .76rem;
margin: 0;
padding: .78rem;
border: 1px solid rgba(47, 66, 60, .88);
border-radius: 8px;
background: rgba(17, 26, 24, .78) !important;
box-shadow: var(--pm-ring);
}
#wlTable tbody tr[data-ticker]:nth-child(2n) {
background: rgba(13, 20, 18, .78) !important;
}
#wlTable tbody tr[data-ticker]:hover {
transform: none;
box-shadow: var(--pm-ring);
}
#wlTable tbody td {
display: flex;
align-items: center;
justify-content: space-between;
gap: .65rem;
min-width: 0;
height: auto !important;
min-height: 31px;
padding: 0 !important;
border: 0 !important;
text-align: right !important;
}
#wlTable tbody td::before {
content: attr(data-label);
flex: 0 0 auto;
color: #73867f;
font-size: .62rem;
font-weight: 850;
letter-spacing: .08em;
text-align: left;
text-transform: uppercase;
}
#wlTable tbody td:first-child {
grid-column: 1 / -1;
justify-content: flex-start;
padding-bottom: .55rem !important;
margin-bottom: .12rem;
border-bottom: 1px solid rgba(79, 214, 164, .14) !important;
text-align: left !important;
}
#wlTable tbody td:first-child::before {
content: none;
}
#wlTable tbody td[data-label="Watchlist"],
#wlTable tbody td[data-label="Zone"],
#wlTable tbody td[data-label="Tags"],
#wlTable tbody td[data-label="Aktionen"] {
grid-column: 1 / -1;
}
#wlTable tbody td[data-label="Zone"],
#wlTable tbody td[data-label="Tags"] {
align-items: flex-start;
}
#wlTable tbody td[data-label="Aktionen"] {
justify-content: flex-end;
min-height: 34px;
}
#wlTable tbody td[data-label="Aktionen"]::before {
content: none;
}
#wlTable .wl-list-select {
width: min(100%, 210px);
}
#wlTable .asset-logo-wrap,
#wlTable .asset-logo-img,
#wlTable .asset-logo-letter {
width: 30px;
height: 30px;
}
#wlTable canvas {
width: 72px;
height: 28px;
}
#wlTable tbody > tr:not([data-ticker]) {
display: block;
}
}
@media (max-width: 991.98px) {
.pm-main > .d-flex.justify-content-between.align-items-center.mb-4,
.pm-main > .d-flex.justify-content-between.align-items-center.mb-3,
.pm-main > .d-flex.justify-content-between.align-items-center.mb-2 {
padding: .78rem !important;
}
.pm-card.text-center .fw-bold.fs-5,
.pm-card.text-center .fw-bold.fs-4 {
font-size: 1.08rem !important;
}
#mobTabBar {
height: 66px !important;
}
}
/* ── Print / PDF Export ──────────────────────────────────────────────────── */
@media print {
.pm-navbar, .pm-ticker-tape, .pm-footer, .btn, .btn-pm, button,
.modal, .dropdown, [data-bs-toggle], .settings-nav { display: none !important; }
body { background: #fff !important; color: #000 !important; }
.pm-card { border: 1px solid #ccc !important; background: #fff !important; box-shadow: none; }
.pm-main { padding: 0 !important; }
a { color: #000 !important; text-decoration: none !important; }
.text-green { color: #16a34a !important; }
.text-red { color: #dc2626 !important; }
.pnl-positive { color: #000 !important; }
.pnl-negative { color: #dc2626 !important; }
.pct-positive { color: #16a34a !important; }
.pct-negative { color: #dc2626 !important; }
h4 { font-size: 14pt; margin-bottom: 8px; }
.pm-table th, .pm-table td { color: #000 !important; border-color: #ccc !important; }
}
/* ── 2026-05-15: Main menu back to horizontal pro strip ──────────────── */
@media (min-width: 768px) {
:root {
--pm-navbar-h: 78px;
}
.pm-main-menu {
height: var(--pm-navbar-h) !important;
background:
linear-gradient(180deg, rgba(7, 13, 11, .98), rgba(5, 10, 9, .96)) !important;
border-bottom: 1px solid rgba(79, 214, 164, .22) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, .025),
0 18px 44px rgba(0, 0, 0, .34) !important;
}
.pm-main-menu .container-fluid {
height: 100%;
min-height: 0;
display: flex;
align-items: stretch;
gap: 10px;
padding-inline: 10px !important;
}
.pm-main-menu .navbar-brand {
min-width: 92px;
max-width: 112px;
align-self: stretch;
justify-content: center;
margin: 0 2px 0 0;
padding: 0;
color: #9fb0aa !important;
font-size: .78rem;
}
.pm-main-menu .pm-logo {
width: 22px;
height: 22px;
border: 0;
background: transparent;
box-shadow: none;
}
.pm-main-menu .navbar-collapse {
min-width: 0;
align-items: stretch;
}
.pm-main-menu .navbar-nav {
height: 100%;
align-items: stretch;
gap: 2px !important;
}
.pm-main-menu .nav-item {
display: flex;
align-items: stretch;
}
.pm-main-menu .nav-link {
width: 108px;
min-width: 92px;
max-width: 118px;
height: calc(var(--pm-navbar-h) - 10px);
align-self: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 7px 8px 6px !important;
border: 1px solid transparent !important;
border-radius: 9px !important;
background: transparent !important;
color: #8b9b95 !important;
font-size: .74rem !important;
font-weight: 800 !important;
line-height: 1.02 !important;
text-align: center;
white-space: nowrap;
letter-spacing: 0 !important;
box-shadow: none !important;
}
.pm-main-menu .nav-link i {
display: block;
height: 20px;
margin: 0 !important;
color: #7e918b !important;
font-size: 1.17rem !important;
line-height: 1;
opacity: .88;
filter: none;
}
.pm-main-menu .nav-link::before {
left: 12px;
right: 12px;
bottom: 5px;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(79, 214, 164, .90), rgba(109, 167, 255, .70), transparent);
}
.pm-main-menu .nav-link:hover {
background: rgba(79, 214, 164, .055) !important;
border-color: rgba(79, 214, 164, .12) !important;
color: #d6e4df !important;
transform: none;
}
.pm-main-menu .nav-link:hover i {
color: #d6e4df !important;
transform: translateY(-1px);
}
.pm-main-menu .nav-link.active {
background:
radial-gradient(circle at 50% 0%, rgba(79, 214, 164, .20), transparent 62%),
linear-gradient(180deg, rgba(109, 167, 255, .18), rgba(79, 214, 164, .08)) !important;
border-color: rgba(109, 167, 255, .36) !important;
color: #dceaff !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .12),
inset 0 -2px 0 rgba(79, 214, 164, .92),
0 10px 28px rgba(0, 0, 0, .28) !important;
}
.pm-main-menu .nav-link.active i {
color: #4fd6a4 !important;
opacity: 1;
filter: drop-shadow(0 0 10px rgba(79, 214, 164, .30));
}
.pm-main-menu .dropdown-toggle::after {
margin-left: 0;
margin-top: -2px;
font-size: .72rem;
}
.pm-main-menu-right {
margin-left: auto !important;
padding-left: 14px;
}
.pm-main-menu-right .nav-link {
width: 96px;
min-width: 82px;
}
.pm-main-menu .d-flex.align-items-center.gap-2 {
height: 100%;
align-items: center !important;
gap: 6px !important;
padding-left: 8px;
}
.pm-main-menu .btn.btn-sm {
width: 38px;
min-width: 38px;
height: 38px;
padding: 0 !important;
border-radius: 9px !important;
border-color: rgba(127, 145, 137, .20) !important;
background: rgba(7, 13, 11, .78) !important;
color: #96a9a2 !important;
}
.pm-main-menu .btn.btn-sm:hover,
.pm-main-menu .btn.btn-sm.active {
border-color: rgba(79, 214, 164, .42) !important;
background: rgba(79, 214, 164, .10) !important;
color: #e8f5f1 !important;
}
.pm-main-menu #alertBadge,
.pm-main-menu #advisorsBadge {
top: 7px !important;
right: 17px !important;
transform: translateX(50%);
border: 1px solid rgba(255, 255, 255, .20);
}
}
@media (min-width: 992px) and (max-width: 1420px) {
.pm-main-menu .navbar-brand {
min-width: 58px;
}
.pm-main-menu .navbar-brand .fw-bold {
display: none;
}
.pm-main-menu .nav-link {
width: 84px;
min-width: 74px;
font-size: .68rem !important;
}
.pm-main-menu-right .nav-link {
width: 76px;
min-width: 70px;
}
}
/* Show the horizontal main menu already in Codex/tablet-width browser panes. */
@media (min-width: 768px) and (max-width: 991.98px) {
.pm-main-menu.d-none {
display: block !important;
}
.pm-main-menu .navbar-toggler,
.d-flex.d-lg-none.pm-navbar,
#mobTabBar {
display: none !important;
}
.pm-main-menu .navbar-collapse.collapse {
display: flex !important;
}
.pm-main-menu .container-fluid {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
.pm-main-menu .container-fluid::-webkit-scrollbar {
height: 4px;
}
.pm-main-menu .container-fluid::-webkit-scrollbar-thumb {
background: rgba(79, 214, 164, .26);
}
body {
padding-bottom: 28px !important;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.pm-main-menu,
.pm-main-menu .container-fluid,
.pm-main-menu #navMenu,
.pm-main-menu .navbar-nav {
flex-wrap: nowrap !important;
}
.pm-main-menu #navMenu {
height: 100% !important;
flex-basis: auto !important;
flex-grow: 1 !important;
align-items: stretch !important;
}
.pm-main-menu .navbar-nav {
flex-direction: row !important;
}
}
/* Positions: usable table/cards on phones and iPad portrait without changing desktop. */
@media (max-width: 820px) {
.pm-screen-head {
align-items: flex-start !important;
gap: .75rem;
}
.pm-screen-head > .d-flex {
flex-wrap: wrap;
justify-content: flex-start;
}
#posTableCard {
overflow: hidden !important;
}
#posTableCard > .d-flex:first-child {
justify-content: flex-start !important;
flex-wrap: wrap;
gap: .5rem !important;
}
#tableScrollWrap {
max-height: none !important;
overflow-x: auto !important;
overflow-y: visible !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
#fullTable {
min-width: 1120px;
width: max-content;
}
#fullTable th,
#fullTable td {
white-space: nowrap;
}
#fullTable th:first-child,
#fullTable td:first-child {
display: table-cell !important;
min-width: 190px;
}
#fullTable td:first-child .text-muted {
max-width: 132px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#mobileCardsContainer {
margin-top: .75rem;
}
#mobileCards {
--bs-gutter-x: .65rem;
--bs-gutter-y: .65rem;
}
#mobileCards .pos-mobile-card-wrap {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
}
.pos-mobile-card {
min-height: 122px;
padding: .78rem .85rem !important;
touch-action: manipulation;
}
.pos-mobile-card .ticker {
max-width: 42vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 800;
color: #f3faf6;
}
.pos-mobile-card .value {
margin-top: .35rem;
font-size: 1.05rem;
font-weight: 850;
color: #f3faf6;
font-variant-numeric: tabular-nums;
}
}
/* Shared loading affordances for async widgets */
.pm-loading {
position: relative;
overflow: hidden;
border-radius: 6px;
color: transparent !important;
border-color: rgba(148, 163, 184, 0.14) !important;
background:
linear-gradient(90deg, rgba(31, 41, 55, 0.36) 25%, rgba(75, 85, 99, 0.34) 42%, rgba(31, 41, 55, 0.36) 63%);
background-size: 220% 100%;
animation: pm-skeleton-shimmer 1.15s ease-in-out infinite;
}
.pm-loading-line {
display: inline-block;
min-width: 56px;
min-height: 0.78rem;
vertical-align: middle;
}
.pm-loading-chip {
display: inline-flex;
width: 48px;
min-height: 1rem;
vertical-align: middle;
}
.pm-loading-block {
display: block;
min-height: 28px;
}
canvas.pm-loading,
.pm-loading canvas {
background-color: rgba(15, 23, 42, 0.5);
}
.pm-spinner-inline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
color: #9ca3af;
font-size: 0.78rem;
line-height: 1;
white-space: nowrap;
}
.pm-spinner-dot {
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
border: 2px solid rgba(148, 163, 184, 0.24);
border-top-color: #60a5fa;
animation: pm-spinner-rotate 0.75s linear infinite;
}
.pm-skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
gap: 6px;
width: 100%;
}
.pm-skeleton-tile {
min-height: 42px;
border-radius: 7px;
}
@keyframes pm-skeleton-shimmer {
0% { background-position: 120% 0; }
100% { background-position: -120% 0; }
}
@keyframes pm-spinner-rotate {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.pm-loading,
.pm-spinner-dot {
animation: none;
}
}