/* ── Design Tokens ────────────────────────────────────── */ :root { /* Bootstrap-Overrides */ --bs-body-bg: #070d1a; --bs-body-color: #f8fafc; --bs-primary: #34d399; --bs-primary-rgb: 52, 211, 153; --bs-secondary-bg: #1e293b; --bs-border-color: #334155; --bs-link-color: #34d399; --bs-link-hover-color: #6ee7b7; --bs-danger: #ef4444; --bs-danger-rgb: 239, 68, 68; --bs-warning: #f59e0b; --bs-warning-rgb: 245, 158, 11; /* Surfaces */ --tp-bg-deep: #070d1a; --tp-bg-base: #0f172a; --tp-surface: #1e293b; --tp-surface-hover: #293548; --tp-border: #334155; --tp-border-subtle: #1a2540; --tp-border-hover: #475569; /* Semantic colours */ --tp-success: #34d399; --tp-info: #3b82f6; --tp-accent: #a78bfa; --tp-warning: #f59e0b; --tp-danger: #ef4444; /* Text */ --tp-text-primary: #f8fafc; --tp-text-secondary: #cbd5e1; --tp-text-muted: #64748b; /* Legacy aliases (keep for backward compat) */ --tp-border-color: #334155; --tp-accent-color: #34d399; /* Note: --tp-accent was #34d399 (green) in v1. It is now #a78bfa (purple/violet). Use --tp-success (#34d399) for green, --tp-accent for violet. */ --tp-amber: #f59e0b; --tp-text: #f8fafc; --tp-muted: #64748b; /* Spacing */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; /* Note: --sp-5 (20px) and --sp-7 (28px) are intentionally omitted — only the commonly needed steps in this scale are defined. */ /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Brand color (overridable per club) */ --tp-brand-primary: #34d399; --tp-brand-on-primary: #0f172a; --tp-brand-primary-hover: #6ee7b7; } /* Theme toggle: show only the icon matching */ .tp-theme-icon { display: none; } [data-theme-preference="System"] .tp-theme-icon[data-theme-show="System"], [data-theme-preference="Light"] .tp-theme-icon[data-theme-show="Light"], [data-theme-preference="Dark"] .tp-theme-icon[data-theme-show="Dark"] { display: inline; } /* ── Light theme overrides ────────────────────────────── */ [data-theme="light"] { --bs-body-bg: #ffffff; --bs-body-color: #0f172a; --bs-secondary-bg: #f1f5f9; --bs-border-color: #e2e8f0; --tp-bg-deep: #f8fafc; --tp-bg-base: #ffffff; --tp-surface: #ffffff; --tp-surface-hover: #f1f5f9; --tp-border: #e2e8f0; --tp-border-subtle: #f1f5f9; --tp-border-hover: #cbd5e1; --tp-text-primary: #0f172a; --tp-text-secondary: #334155; --tp-text-muted: #64748b; --tp-text: #0f172a; --tp-muted: #64748b; --tp-border-color: #e2e8f0; } [data-theme="light"] body { background-color: var(--tp-bg-deep); color: var(--tp-text-primary); } [data-theme="light"] .form-control, [data-theme="light"] .form-select { background-color: #ffffff; color: var(--tp-text-primary); border-color: var(--tp-border); } [data-theme="light"] .form-control::placeholder { color: #94a3b8; } [data-theme="light"] .table thead th { color: var(--tp-text-secondary); } [data-theme="light"] .badge.bg-primary { background-color: rgba(52,211,153,0.15) !important; color: #047857 !important; } /* ── Base ─────────────────────────────────────────────── */ html, body { font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: var(--tp-bg-deep); color: var(--tp-text-primary); min-height: 100vh; font-size: 87.5%; } h1:focus { outline: none; } /* ── Links ────────────────────────────────────────────── */ a, .btn-link { color: var(--tp-brand-primary); } a:hover, .btn-link:hover { color: var(--tp-brand-primary-hover); } /* ── Buttons ──────────────────────────────────────────── */ .btn-primary { background-color: var(--tp-brand-primary); border-color: var(--tp-brand-primary); color: var(--tp-brand-on-primary); font-weight: 600; } .btn-primary:hover, .btn-primary:focus { filter: brightness(1.08); color: var(--tp-brand-on-primary); } .btn-secondary, .btn-outline-secondary { background-color: transparent; border-color: #334155; color: #94a3b8; } .btn-secondary:hover, .btn-outline-secondary:hover { background-color: #1e293b; border-color: #475569; color: #f1f5f9; } .btn-danger { background-color: #ef4444; border-color: #ef4444; color: #fff; } .btn-danger:hover { background-color: #dc2626; border-color: #dc2626; color: #fff; } .btn-outline-danger { background-color: transparent; border-color: #ef4444; color: #ef4444; } .btn-outline-danger:hover { background-color: rgba(239,68,68,0.1); border-color: #ef4444; color: #ef4444; } .btn-outline-warning { background-color: transparent; border-color: #f59e0b; color: #f59e0b; } .btn-outline-warning:hover { background-color: rgba(245,158,11,0.1); color: #f59e0b; border-color: #f59e0b; } /* Focus ring — keyboard-visible focus (U2: :focus-visible) */ .btn:focus, .btn:active:focus, .form-check-input:focus { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15); } :focus-visible { outline: 2px solid var(--tp-success); outline-offset: 2px; } a:focus-visible, .btn:focus-visible, [tabindex]:focus-visible:not(h1) { outline: 2px solid var(--tp-success); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15); } h1:focus-visible { outline: none; box-shadow: none; } /* ── Forms ────────────────────────────────────────────── */ .form-control, .form-select { background-color: #0f172a; border-color: #334155; color: #f1f5f9; border-radius: 6px; } .form-check-input { background-color: #0f172a; border-color: #334155; color: #f1f5f9; } .form-control:focus, .form-select:focus { background-color: #0f172a; border-color: #34d399; color: #f1f5f9; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15); } .form-control::placeholder { color: #64748b; } .form-label { color: #94a3b8; font-size: 0.875rem; } .valid.modified:not([type=checkbox]) { outline: 1px solid #34d399; } .invalid { outline: 1px solid #ef4444; } .validation-message { color: #dc2626; font-size: 0.875rem; } .validation-message::before { content: "⚠ "; } /* ── Tables ───────────────────────────────────────────── */ .table { color: var(--tp-text-secondary); border-color: var(--tp-border); } .table > :not(caption) > * > * { background-color: transparent; border-bottom-color: var(--tp-border-subtle); color: inherit; } .table thead th { color: var(--tp-text-muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid var(--tp-border); } .table-hover > tbody > tr:hover > * { background-color: var(--tp-surface-hover); } /* tp-table: token-native table wrapper */ .tp-table-wrapper { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--radius-lg); overflow: hidden; } /* ── Responsive stacked tables (U4) ────────────────── */ /* Wrap a table-responsive div with tp-stacked-table; add data-label="Spaltenname" to each for mobile labels. */ @media (max-width: 639px) { .tp-stacked-table table, .tp-stacked-table thead, .tp-stacked-table tbody, .tp-stacked-table th, .tp-stacked-table td, .tp-stacked-table tr { display: block; } .tp-stacked-table thead { display: none; } .tp-stacked-table tbody tr { border: 1px solid var(--tp-border); border-radius: var(--radius-md); margin-bottom: 0.75rem; overflow: hidden; } .tp-stacked-table td { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.45rem 0.75rem; border: none !important; border-bottom: 1px solid var(--tp-border-subtle) !important; text-align: left !important; } .tp-stacked-table td:last-child { border-bottom: none !important; } .tp-stacked-table td::before { content: attr(data-label); min-width: 110px; flex-shrink: 0; font-weight: 600; font-size: 0.7rem; color: var(--tp-text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; } .tp-stacked-table td[data-label=""]::before, .tp-stacked-table td:not([data-label])::before { display: none; } } /* ── Alerts ───────────────────────────────────────────── */ .alert-danger { background-color: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; border-radius: 6px; } .table-warning, .table-danger{ color: #ffffff; } .alert-warning { background-color: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); color: #fde68a; border-radius: 6px; } .alert-success { background-color: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.3); color: #6ee7b7; border-radius: 6px; } /* ── Badges (semantic pill system) ───────────────────── */ .tp-badge { display: inline-flex; align-items: center; gap: 0.2em; font-size: 0.65rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; } .tp-badge-success { background: rgba(52,211,153,0.12); color: var(--tp-success); border: 1px solid rgba(52,211,153,0.25); } .tp-badge-info { background: rgba(59,130,246,0.12); color: var(--tp-info); border: 1px solid rgba(59,130,246,0.25); } .tp-badge-accent { background: rgba(167,139,250,0.12); color: var(--tp-accent); border: 1px solid rgba(167,139,250,0.25); } .tp-badge-warning { background: rgba(245,158,11,0.12); color: var(--tp-warning); border: 1px solid rgba(245,158,11,0.25); } .tp-badge-danger { background: rgba(239,68,68,0.12); color: var(--tp-danger); border: 1px solid rgba(239,68,68,0.25); } .tp-badge-muted { background: rgba(100,116,139,0.12); color: var(--tp-text-muted); border: 1px solid rgba(100,116,139,0.25); } .tp-badge-secondary { background: rgba(52,211,153,0.12); color: var(--tp-success); border: 1px solid rgba(52,211,153,0.25); } /* Keep Bootstrap badge compat */ .badge.bg-primary { background-color: rgba(52,211,153,0.15) !important; color: #34d399 !important; font-weight: 600; } .badge.bg-info { background-color: rgba(59,130,246,0.15) !important; color: #3b82f6 !important; font-weight: 600; } .badge.bg-warning { background-color: rgba(245,158,11,0.15) !important; color: #f59e0b !important; font-weight: 600; } .badge.bg-danger { background-color: rgba(239,68,68,0.15) !important; color: #ef4444 !important; font-weight: 600; } .badge.bg-secondary{ background-color: rgba(148,163,184,0.15) !important; color: #94a3b8 !important; } .text-dark { color: #f1f5f9 !important; } /* ── Empty states ─────────────────────────────────── */ .tp-empty { padding: var(--sp-6); font-size: 0.8rem; color: var(--tp-text-muted); text-align: center; } .tp-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-8) var(--sp-6); text-align: center; } .tp-empty-state-icon { font-size: 2rem; color: var(--tp-text-muted); opacity: 0.5; } .tp-empty-state-text { margin: 0; font-size: 0.875rem; color: var(--tp-text-muted); } .tp-empty-state-action { margin-top: var(--sp-1); } /* ── Loading states ───────────────────────────────── */ .tp-loading { padding: var(--sp-6); display: flex; justify-content: center; color: var(--tp-text-muted); } /* ── Cards ────────────────────────────────────────────── */ /* Deprecated: .card — use .tp-card instead */ .card { background-color: var(--tp-surface); border-color: var(--tp-border); border-radius: var(--radius-lg); color: var(--tp-text-primary); } .card-header, .card-footer { background-color: rgba(255,255,255,0.04); border-color: var(--tp-border); } /* Standard card system — .tp-card is the preferred card component */ .tp-card { display: block; background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.15s, transform 0.15s; color: var(--tp-text-primary); } .tp-card:hover { border-color: var(--tp-border-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } .tp-card-accent { height: 4px; } .tp-card-accent-success { background: var(--tp-success); } .tp-card-accent-info { background: var(--tp-info); } .tp-card-accent-warning { background: var(--tp-warning); } .tp-card-accent-accent { background: var(--tp-accent); } .tp-card-accent-danger { background: var(--tp-danger); } .tp-card-body { padding: var(--sp-6); } .tp-card-title { font-size: 0.875rem; font-weight: 600; color: var(--tp-text-primary); margin-bottom: var(--sp-1); } .tp-card-sub { font-size: 0.75rem; color: var(--tp-text-muted); margin-bottom: var(--sp-4); } .tp-card-footer-row { display: flex; align-items: center; justify-content: space-between; } /* ── Surface helper ───────────────────────────────────── */ .tp-surface { background-color: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1.5rem; } /* ── Page layout ──────────────────────────────────────── */ .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; } .page-header h2 { margin: 0; font-size: 1.25rem; font-weight: 600; } /* ── Stat tiles ───────────────────────────────────────── */ .stat-tile { background-color: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1rem 1.25rem; } .stat-tile .stat-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #64748b; margin-bottom: 0.4rem; } .stat-tile .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1; } .stat-tile .stat-value.accent { color: #34d399; } .stat-tile .stat-value.amber { color: #f59e0b; } .stat-tile .stat-value.plain { color: #f1f5f9; } /* ── Dashboard grid (Club/Team home) ───────────────────── */ /* Shared across multiple components (Club/Index.razor, Team/Home.razor) - must live in the global stylesheet, not a component-scoped .razor.css, or Blazor's CSS isolation strips it from every component but the first. */ .tp-dashboard-greeting { margin-bottom: var(--sp-6); } .tp-dashboard-greeting h1 { font-size: 1.4rem; font-weight: 700; color: var(--tp-text-primary); margin: 0 0 var(--sp-1) 0; } .tp-dashboard-greeting .tp-sub { font-size: 0.8rem; color: var(--tp-text-muted); } .tp-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); } @media (max-width: 768px) { .tp-stat-grid { grid-template-columns: repeat(2, 1fr); } } .tp-stat-card { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--radius-lg); padding: var(--sp-6); position: relative; overflow: hidden; } .tp-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .tp-stat-card.success::before { background: var(--tp-success); } .tp-stat-card.info::before { background: var(--tp-info); } .tp-stat-card.warning::before { background: var(--tp-warning); } .tp-stat-card.accent::before { background: var(--tp-accent); } .tp-stat-card.danger::before { background: var(--tp-danger); } .tp-stat-value { font-size: 2rem; font-weight: 700; color: var(--tp-text-primary); line-height: 1; margin-bottom: var(--sp-1); } .tp-stat-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tp-text-muted); } .tp-stat-icon { position: absolute; right: var(--sp-4); top: var(--sp-4); font-size: 1.25rem; opacity: 0.25; } .tp-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } @media (max-width: 900px) { .tp-dashboard-grid { grid-template-columns: 1fr; } } .tp-panel { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--radius-lg); overflow: hidden; } .tp-panel-header { padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--tp-border-subtle); display: flex; align-items: center; justify-content: space-between; } .tp-panel-title { font-size: 0.8rem; font-weight: 600; color: var(--tp-text-primary); } .tp-panel-link { font-size: 0.75rem; color: var(--tp-success); text-decoration: none; } .tp-panel-link:hover { color: #6ee7b7; } .tp-event-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--tp-border-subtle); } .tp-event-item:last-child { border-bottom: none; } .tp-event-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .tp-event-dot.match { background: var(--tp-info); } .tp-event-dot.training { background: var(--tp-success); } .tp-event-dot.appointment { background: var(--tp-accent); } .tp-event-name { font-size: 0.8rem; color: var(--tp-text-secondary); flex: 1; } .tp-event-date { font-size: 0.7rem; color: var(--tp-text-muted); white-space: nowrap; } .tp-task-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--tp-border-subtle); } .tp-task-item:last-child { border-bottom: none; } .tp-task-check { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--tp-border); flex-shrink: 0; } .tp-task-name { font-size: 0.8rem; color: var(--tp-text-secondary); flex: 1; } .tp-task-group-header { padding: var(--sp-2) var(--sp-6); background: var(--tp-bg); border-bottom: 1px solid var(--tp-border-subtle); } .tp-task-group-link { font-size: 0.7rem; font-weight: 600; color: var(--tp-text-muted); text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; } .tp-task-group-link:hover { color: var(--tp-success); } /* ── Blazor error UI ──────────────────────────────────── */ #blazor-error-ui { background: rgba(239, 68, 68, 0.15); border-top: 1px solid #ef4444; color: #fca5a5; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.4); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1060; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* ── Blazor validation ────────────────────────────────── */ .blazor-error-boundary { background-color: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; padding: 1rem 1rem 1rem 1.25rem; border-radius: 6px; } .blazor-error-boundary::after { content: "An error has occurred."; } /* ── Quill Editor dark theme ──────────────────────────── */ .ql-toolbar.ql-snow { background-color: var(--tp-surface); border-color: var(--tp-border); border-radius: var(--radius-md) var(--radius-md) 0 0; font-family: inherit; } .ql-container.ql-snow { background-color: #0f172a; border-color: var(--tp-border); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); color: var(--tp-text-primary); font-family: inherit; font-size: 0.875rem; } .ql-editor { color: var(--tp-text-primary); } .ql-editor.ql-blank::before { color: var(--tp-text-muted); font-style: normal; } .ql-snow .ql-stroke { stroke: var(--tp-text-primary); } .ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: var(--tp-text-primary); } .ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover { color: var(--tp-success); } .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke { stroke: var(--tp-success); } .ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill { fill: var(--tp-success); } .ql-snow .ql-picker { color: var(--tp-text-secondary); } .ql-snow .ql-picker-options { background-color: var(--tp-surface); border-color: var(--tp-border); } /* ── Modal backdrop ───────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; z-index: 1040; background-color: rgba(0, 0, 0, 0.5); } /* ── Misc ─────────────────────────────────────────────── */ .text-muted { color: #64748b !important; } .border { border-color: #334155 !important; } .darker-border-checkbox.form-check-input { border-color: #475569; } /* ── Kabinen-Zeitstrahl ── */ .tp-timeline-block:hover .tp-remove-btn { opacity: 1 !important; } /* ── Event confirmation status ─────────────────────────────────────────── */ .tp-cal-event-pending { border: 2px dashed #f59e0b !important; opacity: 0.85; } .tp-cal-event-rejected { text-decoration: line-through !important; color: #ef4444 !important; opacity: 0.65; } .tp-week-block-pending { border: 2px dashed #f59e0b !important; opacity: 0.85; } .tp-week-block-rejected { text-decoration: line-through !important; opacity: 0.65; background-color: #7f1d1d !important; } /* ── App Shell ────────────────────────────────────────────── */ @media (max-width: 767px) { .tp-body > .tp-sidebar { display: none !important; } .tp-main { padding-bottom: 64px; } } /* ── Tablet breakpoint (768px–1024px) ─────────────────────── */ @media (min-width: 768px) and (max-width: 1024px) { .tp-sidebar { width: 52px; } .tp-sidebar-label { display: none; } .tp-sidebar-group-label { display: none; } .tp-sidebar .nav-link { justify-content: center; padding-left: 0; } .tp-sidebar-build-info { display: none; } .tp-main { padding: 0 0.5rem; } .conversation-list { width: 220px; } .tp-card-body { padding: var(--sp-4); } } .tp-app-shell { display: flex; flex-direction: column; height: 100dvh; } .tp-topbar { background-color: var(--tp-bg-base); border-bottom: 1px solid var(--tp-border-subtle); height: 52px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; z-index: 100; position: sticky; top: 0; } .tp-topbar-brand { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; text-decoration: none; border-right: 1px solid var(--tp-border-subtle); flex-shrink: 0; color: var(--tp-text-primary); } .tp-topbar-brand img { width: 28px; height: 28px; border-radius: 7px; transition: opacity 0.15s ease; } .tp-topbar-brand:hover img { opacity: 0.85; } .tp-topbar-back { color: var(--tp-text-muted); font-size: 0.8rem; text-decoration: none; } .tp-topbar-back:hover { color: var(--tp-text-primary); } .tp-topbar-divider { display: none; } .tp-breadcrumb { display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem; font-size: 1.05rem; color: var(--tp-text-muted); } .tp-breadcrumb a { color: var(--tp-text-muted); text-decoration: none; } .tp-breadcrumb a:hover { color: var(--tp-text-primary); } .tp-breadcrumb .tp-breadcrumb-active { color: var(--tp-text-primary); font-weight: 700; } .tp-breadcrumb-sep { color: var(--tp-border); } .tp-ctx-badge { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; padding: 2px 7px; border-radius: var(--radius-full); background: rgba(52,211,153,0.1); color: var(--tp-success); border: 1px solid rgba(52,211,153,0.25); } .tp-topbar-right { display: flex; align-items: center; gap: 0.75rem; padding-right: 1rem; } .tp-topbar-club { display: none; } .tp-topbar-team { display: none; } /* ── Sidebar ───────────────────────────────────────────── */ .tp-body { display: flex; flex: 1; min-height: 0; overflow: hidden; } .tp-sidebar { width: 180px; flex-shrink: 0; background-color: var(--tp-bg-base); border-right: 1px solid var(--tp-border-subtle); display: flex; flex-direction: column; overflow-y: auto; gap: 0; padding: 0; } .tp-sidebar-group-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tp-border); padding: 0.6rem 0 0.2rem 17px; white-space: nowrap; overflow: hidden; } .tp-sidebar .nav-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0; padding-left: 14px; color: var(--tp-text-muted); text-decoration: none; font-size: 0.8rem; font-weight: 500; border-left: 3px solid transparent; white-space: nowrap; overflow: hidden; transition: color 0.12s, background 0.12s; } .tp-sidebar .nav-link:hover { color: var(--tp-text-secondary); background: rgba(41,53,72,0.5); } .tp-sidebar .nav-link.active { color: var(--tp-success); background: rgba(52,211,153,0.08); border-left-color: var(--tp-success); } .tp-sidebar-icon { font-size: 1rem; width: 22px; text-align: center; flex-shrink: 0; } .tp-sidebar-label { white-space: nowrap; display: flex; align-items: center; gap: 0.4rem; flex: 1; } .sidebar-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--tp-success); color: var(--tp-bg-base); font-size: 0.6rem; font-weight: 700; border-radius: 999px; padding: 0.1rem 0.35rem; min-width: 16px; line-height: 1.4; margin-left: auto; margin-right: 5px; } .sidebar-badge-danger { display: inline-flex; align-items: center; justify-content: center; background: var(--tp-danger); color: var(--tp-bg-base); font-size: 0.6rem; font-weight: 700; border-radius: 999px; padding: 0.1rem 0.35rem; min-width: 16px; line-height: 1.4; margin-left: auto; margin-right: 5px; } .tp-sidebar-divider { height: 1px; background: var(--tp-border-subtle); margin: 0.4rem 0.65rem; } .tp-sidebar-build-info { margin-top: auto; padding: 0.6rem 14px 0.75rem; border-top: 1px solid var(--tp-border-subtle); display: flex; flex-direction: column; gap: 0.15rem; } .tp-sidebar-build-info span { font-size: 0.75rem; color: var(--tp-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: monospace; letter-spacing: 0.02em; } .club-logo-xs { height:30px; width:30px; object-fit:contain; border-radius:8px; flex-shrink:0 } .club-logo-s { height:48px; width:48px; object-fit:contain; border-radius:8px; flex-shrink:0 } /* ── Main content ──────────────────────────────────────── */ .tp-main { flex: 1; min-height: 0; overflow-y: auto; background: var(--tp-bg-deep); } /* ── Avatar ────────────────────────────────────────────── */ .tp-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--tp-success), #059669); color: var(--tp-bg-base); font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .tp-avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } /* ═══════════════════════════════════════════════════════════ MESSAGING ═══════════════════════════════════════════════════════════ */ /* ── Page layout ─────────────────────────────────────────── */ .messages-layout { display: flex; height: 100%; overflow: hidden; background: var(--tp-bg-base); } .messages-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--tp-text-muted); font-size: 0.95rem; } @media (max-width: 767px) { .messages-layout { flex-direction: column; } .conversation-list { width: 100%; border-right: none; border-bottom: 1px solid var(--tp-border); } .conversation-list-wrapper { width: 100%; } } .tp-mobile-back { background: none; border: none; border-bottom: 1px solid var(--tp-border-subtle); color: var(--tp-text-muted); font-size: 0.85rem; padding: 0.75rem 1rem; cursor: pointer; text-align: left; flex-shrink: 0; width: 100%; } .tp-mobile-back:hover { color: var(--tp-text-primary); } /* ── Conversation list ───────────────────────────────────── */ .conversation-list { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--tp-border); background: var(--tp-bg-base); overflow: hidden; } .conversation-list-header { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; border-bottom: 1px solid var(--tp-border); font-weight: 600; font-size: 0.95rem; color: var(--tp-text-primary); flex-shrink: 0; } .btn-new-chat { background: var(--tp-success); color: var(--tp-bg-base); border: none; border-radius: 0.375rem; padding: 0.25rem 0.625rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .btn-new-chat:hover { opacity: 0.85; } /* ── Conversation list item ──────────────────────────────── */ .conversation-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; cursor: pointer; border-bottom: 1px solid var(--tp-border-subtle); transition: background 0.1s; } .conversation-item:hover { background: var(--tp-surface-hover); } .conversation-item.active { background: var(--tp-surface); } .conversation-avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--tp-surface); border: 1px solid var(--tp-border); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--tp-text-secondary); } .dm-icon { color: var(--tp-success); } .group-icon { color: var(--tp-accent); } .conversation-info { flex: 1; min-width: 0; } .conversation-name { font-size: 0.875rem; font-weight: 600; color: var(--tp-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conversation-preview { font-size: 0.775rem; color: var(--tp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.1rem; } .conversation-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0; } .conversation-time { font-size: 0.7rem; color: var(--tp-text-muted); } .unread-badge { background: var(--tp-success); color: var(--tp-bg-base); font-size: 0.65rem; font-weight: 700; border-radius: 999px; padding: 0.1rem 0.4rem; min-width: 18px; text-align: center; } /* ── Chat window ─────────────────────────────────────────── */ .chat-window { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--tp-bg-deep); } /* ── Chat header ─────────────────────────────────────────── */ .chat-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--tp-border); background: var(--tp-bg-base); flex-shrink: 0; } .chat-header-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--tp-surface); border: 1px solid var(--tp-border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: var(--tp-success); flex-shrink: 0; } .chat-header-name { font-size: 0.9rem; font-weight: 600; color: var(--tp-text-primary); } .chat-header-sub { font-size: 0.75rem; color: var(--tp-text-muted); } /* ── Message list ────────────────────────────────────────── */ .message-list { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.375rem; } .load-more { align-self: center; background: transparent; border: 1px solid var(--tp-border); color: var(--tp-text-muted); font-size: 0.775rem; border-radius: 0.375rem; padding: 0.25rem 0.75rem; cursor: pointer; margin-bottom: 0.5rem; } .load-more:hover { background: var(--tp-surface-hover); } /* ── Message bubble ──────────────────────────────────────── */ .message-bubble { display: flex; flex-direction: column; max-width: 70%; position: relative; } .message-bubble.own { align-self: flex-end; align-items: flex-end; } .message-bubble.other { align-self: flex-start; align-items: flex-start; } .bubble-sender { font-size: 0.7rem; font-weight: 600; color: var(--tp-success); margin-bottom: 0.15rem; padding-left: 0.25rem; } .bubble-body { border-radius: 1rem; padding: 0.5rem 0.875rem; word-break: break-word; position: relative; } .message-bubble.own .bubble-body { background: var(--tp-success); color: var(--tp-bg-base); border-bottom-right-radius: 0.25rem; } .message-bubble.other .bubble-body { background: var(--tp-surface); color: var(--tp-text-primary); border-bottom-left-radius: 0.25rem; } .bubble-text { margin: 0; font-size: 0.875rem; line-height: 1.45; } .bubble-footer { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.2rem; } .bubble-time { font-size: 0.65rem; opacity: 0.7; } .read-receipt { font-size: 0.65rem; opacity: 0.8; } .bubble-actions { display: flex; gap: 0.25rem; margin-top: 0.25rem; } .bubble-actions button { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 0.375rem; color: var(--tp-text-secondary); font-size: 0.75rem; padding: 0.15rem 0.4rem; cursor: pointer; } .bubble-actions button:hover { background: var(--tp-surface-hover); } .emoji-picker { display: flex; gap: 0.25rem; background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 0.5rem; padding: 0.375rem; margin-top: 0.25rem; } .emoji-picker button { background: transparent; border: none; font-size: 1.1rem; cursor: pointer; border-radius: 0.25rem; padding: 0.1rem 0.2rem; line-height: 1; } .emoji-picker button:hover { background: var(--tp-surface-hover); } /* ── Quoted message (inside bubble) ─────────────────────── */ .quoted-message { border-left: 3px solid var(--tp-accent); padding: 0.25rem 0.5rem; border-radius: 0 0.25rem 0.25rem 0; margin-bottom: 0.35rem; background: rgba(0,0,0,0.8); font-size: 0.775rem; display: flex; flex-direction: column; gap: 0.1rem; } .quoted-sender { font-weight: 600; color: var(--tp-accent); } .quoted-content { color: var(--tp-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Quote preview (composer) ────────────────────────────── */ .quote-preview { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: var(--tp-surface); border-top: 1px solid var(--tp-border); border-left: 3px solid var(--tp-accent); } .quote-preview-content { flex: 1; min-width: 0; display: flex; gap: 0.5rem; align-items: baseline; } .quote-author { font-size: 0.75rem; font-weight: 600; color: var(--tp-accent); flex-shrink: 0; } .quote-text { font-size: 0.75rem; color: var(--tp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .quote-dismiss { background: transparent; border: none; color: var(--tp-text-muted); cursor: pointer; font-size: 0.8rem; flex-shrink: 0; padding: 0; } .quote-dismiss:hover { color: var(--tp-text-primary); } /* ── Reaction bar ────────────────────────────────────────── */ .reaction-bar { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; } .reaction { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.75rem; cursor: pointer; transition: background 0.1s; } .reaction:hover { background: var(--tp-surface-hover); } .reaction.reacted { border-color: var(--tp-success); background: rgba(52,211,153,0.15); } /* ── Message attachment ──────────────────────────────────── */ .message-attachment { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(0,0,0,0.2); border-radius: 0.375rem; padding: 0.3rem 0.6rem; margin-top: 0.25rem; text-decoration: none; color: inherit; font-size: 0.8rem; border: 1px solid rgba(255,255,255,0.1); max-width: 240px; } .message-attachment:hover { background: rgba(0,0,0,0.35); } .attachment-icon { flex-shrink: 0; opacity: 0.7; } .attachment-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attachment-size { flex-shrink: 0; opacity: 0.6; font-size: 0.7rem; } /* ── Attachment picker ───────────────────────────────────── */ .attachment-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; padding: 0 0.25rem; } .attachment-picker input[type="file"] { width: 0.1px; height: 0.1px; opacity: 0; position: absolute; } .attachment-chip { display: flex; align-items: center; gap: 0.25rem; background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.75rem; color: var(--tp-text-secondary); } .attachment-chip button { background: transparent; border: none; color: var(--tp-text-muted); cursor: pointer; font-size: 0.7rem; padding: 0; line-height: 1; } /* ── Message composer ────────────────────────────────────── */ .message-composer { border-top: 1px solid var(--tp-border); background: var(--tp-bg-base); flex-shrink: 0; } .composer-body { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.625rem 0.875rem; } .composer-input { flex: 1; background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 1.25rem; color: var(--tp-text-primary); font-size: 0.875rem; padding: 0.5rem 0.875rem; resize: none; max-height: 120px; outline: none; line-height: 1.45; font-family: inherit; } .composer-input:focus { border-color: var(--tp-border-hover); } .composer-input::placeholder { color: var(--tp-text-muted); } .composer-send { width: 36px; height: 36px; border-radius: 50%; background: var(--tp-success); color: var(--tp-bg-base); border: none; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.15s; } .composer-send:hover { opacity: 0.85; } .composer-send:disabled { opacity: 0.35; cursor: default; } /* ── New conversation modal extras ──────────────────────── */ .modal-tabs { display: flex; gap: 0.5rem; margin-bottom: 0.25rem; } .modal-tabs button { flex: 1; background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 0.375rem; color: var(--tp-text-secondary); padding: 0.375rem; cursor: pointer; font-size: 0.85rem; transition: background 0.1s; } .modal-tabs button.active, .modal-tabs button:hover { background: var(--tp-surface-hover); color: var(--tp-text-primary); border-color: var(--tp-border-hover); } .member-search input { margin-bottom: 0.5rem; } .member-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.25rem; } .member-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem; color: var(--tp-text-primary); background: var(--tp-surface); border: 1px solid transparent; transition: background 0.1s; } .member-item:hover { background: var(--tp-surface-hover); } .member-item.selected { border-color: var(--tp-success); background: rgba(52,211,153,0.1); } .modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem; } .modal-footer button { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 0.375rem; color: var(--tp-text-primary); padding: 0.4rem 1rem; cursor: pointer; font-size: 0.875rem; } .modal-footer button:hover { background: var(--tp-surface-hover); } .modal-footer .btn-primary { background: var(--tp-success); border-color: var(--tp-success); color: var(--tp-bg-base); font-weight: 600; } .modal-footer .btn-primary:hover { opacity: 0.85; } /* ═══════════════════════════════════ Chat Drawer ═══════════════════════════════════ */ .chat-drawer-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(0, 0, 0, 0.25); } .chat-drawer { position: fixed; right: 0; top: 0; bottom: 0; width: 340px; z-index: 1050; background: var(--bs-body-bg, #fff); box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; animation: chat-drawer-slide-in 0.25s ease forwards; } @keyframes chat-drawer-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @media (max-width: 639px) { .chat-drawer { width: 100vw; } } .chat-drawer-header { background: #1e293b; color: #f8fafc; padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; font-weight: 600; font-size: 0.9rem; } .chat-drawer-header button { background: none; border: none; color: #f8fafc; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; } .chat-drawer-subject-hint { background: #eff6ff; border-bottom: 1px solid #bfdbfe; padding: 0.5rem 0.875rem; font-size: 0.75rem; color: #1d4ed8; flex-shrink: 0; } .chat-drawer-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; } /* ═══════════════════════════════════ Topbar dropdown (avatar / admin / verwaltung menus) ═══════════════════════════════════ */ .tp-topbar-dropdown { position: relative; display: flex; } .tp-topbar-dropdown-trigger { background: none; border: none; cursor: pointer; color: var(--tp-text-muted); font-size: 1.1rem; padding: 0.25rem 0.375rem; display: flex; align-items: center; line-height: 1; border-radius: 0.25rem; transition: color 0.15s; } .tp-topbar-dropdown-trigger:hover, .tp-topbar-dropdown-trigger.active { color: var(--tp-text-primary); } .tp-topbar-dropdown-backdrop { position: fixed; inset: 0; z-index: 150; background: transparent; } .tp-topbar-dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 230px; background: var(--tp-bg-base); border: 1px solid var(--tp-border-subtle); border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 151; padding: 0.35rem 0; display: flex; flex-direction: column; } .tp-topbar-dropdown-header { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tp-border); padding: 0.35rem 0.9rem 0.25rem; } .tp-topbar-dropdown-divider { height: 1px; background: var(--tp-border-subtle); margin: 0.3rem 0; } .tp-topbar-dropdown-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.9rem; color: var(--tp-text-secondary, var(--tp-text-muted)); text-decoration: none; font-size: 0.85rem; background: none; border: none; width: 100%; text-align: left; cursor: pointer; } .tp-topbar-dropdown-item:hover { color: var(--tp-text-primary); background: rgba(41,53,72,0.5); } .tp-topbar-dropdown-item i { width: 18px; text-align: center; flex-shrink: 0; } /* ═══════════════════════════════════ Topbar chat button + badge ═══════════════════════════════════ */ .tp-topbar-chat-btn { position: relative; cursor: pointer; background: none; border: none; color: var(--tp-text-muted, #94a3b8); font-size: 1.1rem; padding: 0.25rem 0.375rem; display: flex; align-items: center; line-height: 1; border-radius: 0.25rem; transition: color 0.15s; text-decoration: none; } .tp-topbar-chat-btn:hover { color: var(--tp-text, #f8fafc); } .tp-topbar-chat-badge { position: absolute; top: -2px; right: -2px; background: #ef4444; color: #fff; border-radius: 50%; min-width: 16px; height: 16px; font-size: 10px; display: flex; align-items: center; justify-content: center; padding: 0 3px; font-weight: 600; pointer-events: none; } .modal-footer .btn-primary:disabled { opacity: 0.4; cursor: default; } /* ═══════════════════════════════════ Bottom Navigation Bar ═══════════════════════════════════ */ .tp-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--tp-bg-base); border-top: 1px solid var(--tp-border-subtle); display: flex; align-items: stretch; z-index: 200; } @media (min-width: 768px) { .tp-bottom-nav { display: none; } } .tp-bottom-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--tp-text-muted); text-decoration: none; font-size: 0.6rem; font-weight: 500; border: none; background: none; cursor: pointer; transition: color 0.12s; padding: 0; } .tp-bottom-tab:hover, .tp-bottom-tab.active { color: var(--tp-success); } .tp-bottom-icon { font-size: 1.2rem; position: relative; line-height: 1; } .tp-bottom-label { font-size: 0.6rem; white-space: nowrap; } .tp-bottom-badge { position: absolute; top: -4px; right: -6px; background: var(--tp-danger); color: #fff; border-radius: 50%; min-width: 14px; height: 14px; font-size: 9px; display: flex; align-items: center; justify-content: center; padding: 0 2px; font-weight: 700; pointer-events: none; } .tp-bottom-more { color: var(--tp-text-muted); } .tp-bottom-more:hover { color: var(--tp-text-primary); } /* ═══════════════════════════════════ Mobile Drawer ═══════════════════════════════════ */ .tp-mobile-drawer-backdrop { display: none; position: fixed; inset: 0; z-index: 1040; background: rgba(0, 0, 0, 0.5); } .tp-mobile-drawer-backdrop.active { display: block; } .tp-mobile-drawer { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; z-index: 1050; background: var(--tp-bg-base); border-right: 1px solid var(--tp-border); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.25s ease; overflow-y: auto; } .tp-mobile-drawer--open { transform: translateX(0); } @media (max-width: 359px) { .tp-mobile-drawer { width: 100vw; } } @media (min-width: 768px) { .tp-mobile-drawer { display: none; } .tp-mobile-drawer-backdrop { display: none; } } .tp-mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; height: 52px; border-bottom: 1px solid var(--tp-border-subtle); flex-shrink: 0; font-weight: 600; font-size: 0.875rem; color: var(--tp-text-primary); } .tp-mobile-drawer-header button { background: none; border: none; color: var(--tp-text-muted); cursor: pointer; font-size: 1rem; padding: 0.25rem; line-height: 1; } .tp-mobile-drawer-header button:hover { color: var(--tp-text-primary); } .tp-mobile-drawer-nav { flex: 1; display: flex; flex-direction: column; padding: 0.5rem 0; /* override tp-sidebar fixed width and border inside the drawer */ width: auto !important; border-right: none !important; overflow-y: visible; } /* ── Global Search Bar ─────────────────────────────────── */ .tp-search { position: relative; display: flex; align-items: center; } .tp-search-toggle { background: none; border: none; cursor: pointer; padding: 0.25rem 0.4rem; font-size: 1rem; color: var(--tp-text-muted); line-height: 1; border-radius: var(--radius-md); transition: background 0.15s; } .tp-search-toggle:hover { background: var(--tp-surface-hover); } .tp-search-overlay { position: fixed; inset: 0; z-index: 1040; } .tp-search-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 1050; width: min(420px, 90vw); background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); overflow: hidden; } .tp-search-input { width: 100%; padding: 0.6rem 0.75rem; border: none; border-bottom: 1px solid var(--tp-border); background: var(--tp-surface); color: var(--tp-text-primary); font-size: 0.95rem; outline: none; } .tp-search-input::placeholder { color: var(--tp-text-muted); } .tp-search-status { padding: 0.75rem; font-size: 0.85rem; color: var(--tp-text-muted); text-align: center; } .tp-search-results { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; } .tp-search-group-label { padding: 0.4rem 0.75rem 0.2rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tp-text-muted); background: var(--tp-bg-deep); border-top: 1px solid var(--tp-border); } .tp-search-results li:first-child.tp-search-group-label { border-top: none; } .tp-search-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0.75rem; cursor: pointer; transition: background 0.1s; } .tp-search-item:hover, .tp-search-item--active { background: var(--tp-surface-hover); } .tp-search-item-icon { font-size: 1rem; flex-shrink: 0; margin-top: 0.05rem; } .tp-search-item-body { display: flex; flex-direction: column; min-width: 0; } .tp-search-item-title { font-size: 0.875rem; color: var(--tp-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tp-search-item-sub { font-size: 0.75rem; color: var(--tp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tp-search-item-actions { margin-left: auto; display: flex; gap: 0.25rem; flex-shrink: 0; align-items: center; } .tp-search-qa-btn { background: none; border: 1px solid var(--tp-border); border-radius: 0.25rem; padding: 0.15rem 0.4rem; font-size: 0.7rem; color: var(--tp-text-muted); cursor: pointer; display: flex; align-items: center; gap: 0.2rem; white-space: nowrap; transition: background 0.1s, color 0.1s, border-color 0.1s; } .tp-search-qa-btn:hover { background: var(--tp-primary); color: white; border-color: var(--tp-primary); } /* ── Toast notifications ─────────────────────────────── */ .tp-toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 1100; display: flex; flex-direction: column-reverse; gap: 0.5rem; max-width: 360px; pointer-events: none; } .tp-toast { pointer-events: auto; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 0.375rem; box-shadow: 0 4px 12px rgba(0,0,0,.15); animation: tp-toast-in 0.2s ease forwards; } @keyframes tp-toast-in { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: translateX(0); } } .tp-toast-success { background: #d1e7dd; color: #0a3622; border-left: 4px solid #198754; } .tp-toast-error { background: #f8d7da; color: #58151c; border-left: 4px solid #dc3545; } .tp-toast-warning { background: #fff3cd; color: #664d03; border-left: 4px solid #ffc107; } .tp-toast-info { background: #cff4fc; color: #055160; border-left: 4px solid #0dcaf0; } .tp-toast-message { flex: 1; font-size: 0.875rem; } .tp-toast-close { background: none; border: none; padding: 0; opacity: 0.5; cursor: pointer; line-height: 1; font-size: 1rem; } .tp-toast-close:hover { opacity: 1; } /* ── Statistics / Heatmap ────────────────────────────────────────────────── */ .tp-chart-wrapper canvas { width: 100% !important; } .tp-heatmap-wrapper { overflow-x: auto; } .tp-heatmap { border-collapse: separate; border-spacing: 2px; min-width: max-content; font-size: 0.8rem; } .tp-heatmap th, .tp-heatmap td { padding: 0; border: none; } .tp-heatmap-player-col { padding: 4px 10px 4px 0 !important; white-space: nowrap; color: var(--tp-text-secondary); font-weight: 500; min-width: 120px; } .tp-heatmap-date { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; padding: 6px 4px !important; color: var(--tp-text-muted); font-weight: 400; font-size: 0.75rem; min-width: 24px; text-align: center; } .tp-heatmap-cell { width: 22px; height: 22px; border-radius: 4px; cursor: default; } .tp-heatmap-present { background-color: var(--tp-success); opacity: 0.85; } .tp-heatmap-absent { background-color: var(--tp-danger); opacity: 0.7; } .tp-heatmap-unknown { background-color: var(--tp-warning); opacity: 0.6; } .tp-heatmap-noresponse { background-color: var(--tp-border); opacity: 0.9; }