/* ═══════════════════════════════════════════════════════════════════ Teamgeist / SoccerMedia — Mobile-First Design System Phase 1: Token-Layer + Light/Dark-Toggle. Light ist Default. Dark wird via [data-theme="dark"] auf aktiv. Per-Verein-Primary-Farbe kommt aus theme.css (--color-primary). ═══════════════════════════════════════════════════════════════════ */ /* ── Tokens — Light (Default) ─────────────────────────────────────── */ :root { /* Surfaces & Backgrounds */ --bg-base: #f4f6fb; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-card: #ffffff; --bg-input: #ffffff; --bg-hover: #f1f5f9; --bg-secondary: #f8fafc; --bg-subtle: #f1f5f9; --surface: #ffffff; --primary-bg: rgba(var(--color-primary-rgb), 0.08); /* Text */ --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --text-on-primary:#ffffff; /* Borders */ --border: #e2e8f0; --border-color: #e2e8f0; --border-strong: #cbd5e1; /* Status */ --success-bg: #d1fae5; --success-text: #065f46; --success-border: #6ee7b7; --warning-bg: #fef3c7; --warning-text: #92400e; --warning-border: #fcd34d; --danger-bg: #fee2e2; --danger-text: #991b1b; --danger-border: #fca5a5; --info-bg: #e0f2fe; --info-text: #0c4a6e; --info-border: #7dd3fc; /* Sidebar / Topbar / Bottombar */ --sidebar-bg: #ffffff; --sidebar-border: #e2e8f0; --topbar-bg: rgba(255, 255, 255, 0.92); --topbar-border: #e2e8f0; --bottombar-bg: rgba(255, 255, 255, 0.96); /* Layout */ --sidebar-w: 272px; --topbar-h: 56px; --bottombar-h: 64px; --tap: 44px; /* Shape */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; /* Shadow */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14); --shadow-card: var(--shadow-sm); --shadow-accent: 0 4px 16px rgba(var(--color-primary-rgb), 0.30); /* Typography */ --font-display: 'Barlow Condensed', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* Feld (Aufstellung) */ --feld-bg: #4ade80; --feld-linie: #ffffff; color-scheme: light; } /* ── Tokens — Dark Override ───────────────────────────────────────── */ [data-theme="dark"] { --bg-base: #0a0f1e; --bg-surface: #141a2d; --bg-elevated: #1b2236; --bg-card: #141a2d; --bg-input: #0f1525; --bg-hover: #1f2740; --bg-secondary: #1b2236; --bg-subtle: #1f2740; --surface: #141a2d; --primary-bg: rgba(var(--color-primary-rgb), 0.22); --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --border: rgba(255, 255, 255, 0.08); --border-color: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.18); --success-bg: rgba(16, 185, 129, 0.15); --success-text: #6ee7b7; --success-border: rgba(16, 185, 129, 0.4); --warning-bg: rgba(245, 158, 11, 0.15); --warning-text: #fcd34d; --warning-border: rgba(245, 158, 11, 0.4); --danger-bg: rgba(239, 68, 68, 0.15); --danger-text: #fca5a5; --danger-border: rgba(239, 68, 68, 0.4); --info-bg: rgba(2, 132, 199, 0.18); --info-text: #7dd3fc; --info-border: rgba(2, 132, 199, 0.5); --sidebar-bg: #0d1424; --sidebar-border: rgba(255, 255, 255, 0.06); --topbar-bg: rgba(20, 26, 45, 0.92); --topbar-border: rgba(255, 255, 255, 0.06); --bottombar-bg: rgba(13, 20, 36, 0.96); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55); --shadow-accent: 0 4px 20px rgba(var(--color-primary-rgb), 0.5); color-scheme: dark; } /* ── Reset & Base — Mobile-First ──────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 15px; background: var(--bg-base); color: var(--text-primary); min-height: 100vh; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* iOS prevents zoom on input focus when font-size >= 16px */ input, textarea, select, button { font-family: inherit; font-size: 16px; } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-hover); } ::selection { background: rgba(var(--color-primary-rgb), 0.22); color: inherit; } /* ── Layout: Body / Sidebar / Main-Wrapper ────────────────────────── */ body { display: flex; overflow-x: hidden; } #sidebar { width: var(--sidebar-w); min-height: 100vh; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; overflow-x: hidden; padding-bottom: env(safe-area-inset-bottom); } .sidebar-header { padding: 18px 16px 14px; border-bottom: 1px solid var(--sidebar-border); flex-shrink: 0; } .sidebar-logo { display: flex; align-items: center; gap: 12px; } .logo-icon { width: 40px; height: 40px; background: var(--color-primary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--color-primary-foreground); flex-shrink: 0; box-shadow: var(--shadow-accent); } .logo-text { display: flex; flex-direction: column; line-height: 1; } .logo-title { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: 0.02em; color: var(--text-primary); } .logo-accent { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--color-primary); } .logo-title, .logo-accent { display: inline; } .logo-sub { font-size: 10px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px; display: block; } .sidebar-section-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding: 18px 16px 6px; } .sidebar-nav { list-style: none; padding: 0 8px; } .sidebar-link { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 10px 14px; border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: 14px; transition: background 0.15s, color 0.15s; margin-bottom: 2px; } .sidebar-link i { font-size: 17px; width: 20px; text-align: center; flex-shrink: 0; } .sidebar-link:hover { background: var(--bg-hover); color: var(--text-primary); } .sidebar-link.active { background: var(--primary-bg); color: var(--color-primary); font-weight: 600; } [data-theme="dark"] .sidebar-link.active { color: #93c5fd; } /* Sidebar-Link als Button (z.B. für Logout-Form) */ button.sidebar-link { width: 100%; background: none; border: 0; font-family: var(--font-body); cursor: pointer; text-align: left; } .sidebar-logout-form { margin: 0; padding: 0; } /* Danger-Variante des Sidebar-Links (Logout) */ .sidebar-link-danger { color: var(--danger-text); } .sidebar-link-danger:hover { background: var(--danger-bg); color: var(--danger-text); } .sidebar-footer { margin-top: auto; padding: 12px 8px; border-top: 1px solid var(--sidebar-border); } .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); } .user-avatar { font-size: 30px; color: var(--text-muted); flex-shrink: 0; } .user-info { overflow: hidden; } .user-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role-hint { display: block; font-size: 11px; color: var(--text-muted); } /* ── Main Wrapper ─────────────────────────────────────────────────── */ #main-wrapper { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Topbar ───────────────────────────────────────────────────────── */ .topbar { height: var(--topbar-h); background: var(--topbar-bg); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--topbar-border); display: flex; align-items: center; padding: 0 16px; gap: 12px; position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); } .sidebar-toggle, .topbar-icon-btn { background: transparent; border: 1px solid transparent; color: var(--text-secondary); width: var(--tap); height: var(--tap); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; transition: background 0.15s, color 0.15s; flex-shrink: 0; } .sidebar-toggle:hover, .topbar-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); } /* Sidebar-Toggle-States */ body.sidebar-open #sidebar { transform: translateX(0); } body.sidebar-open #main-wrapper { margin-left: var(--sidebar-w); } body.sidebar-closed #sidebar { transform: translateX(-100%); } body.sidebar-closed #main-wrapper { margin-left: 0; } .topbar-breadcrumb { flex: 1; min-width: 0; } .topbar-breadcrumb .breadcrumb { margin: 0; flex-wrap: nowrap; overflow: hidden; } .topbar-breadcrumb .breadcrumb-item { font-size: 13.5px; white-space: nowrap; } .topbar-breadcrumb .breadcrumb-item a { color: var(--text-secondary); text-decoration: none; } .topbar-breadcrumb .breadcrumb-item a:hover { color: var(--color-primary); } .topbar-breadcrumb .breadcrumb-item.active { color: var(--text-primary); font-weight: 500; } .topbar-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } .topbar-actions { display: flex; gap: 6px; align-items: center; } /* Theme-Toggle icon switch */ .topbar-icon-btn .icon-light-active, .topbar-icon-btn .icon-dark-active { display: none; } :root .topbar-icon-btn .icon-light-active { display: inline-block; } [data-theme="dark"] .topbar-icon-btn .icon-light-active { display: none; } [data-theme="dark"] .topbar-icon-btn .icon-dark-active { display: inline-block; } /* ── Alert Banners ────────────────────────────────────────────────── */ .alert-banner { display: flex; align-items: center; gap: 10px; padding: 12px 20px; font-size: 14px; font-weight: 500; animation: slideDown 0.25s ease; } .alert-banner-success { background: var(--success-bg); border-bottom: 1px solid var(--success-border); color: var(--success-text); } .alert-banner-error { background: var(--danger-bg); border-bottom: 1px solid var(--danger-border); color: var(--danger-text); } .alert-banner-info { background: var(--info-bg); border-bottom: 1px solid var(--info-border); color: var(--info-text); } .alert-close { margin-left: auto; background: none; border: none; color: inherit; opacity: 0.6; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px; } .alert-close:hover { opacity: 1; } @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ── Page Content ─────────────────────────────────────────────────── */ .page-content { padding: 18px 16px 24px; flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; } @media (min-width: 768px) { .page-content { padding: 24px 24px 32px; } } @media (min-width: 1200px) { .page-content { padding: 28px 32px 40px; } } /* ── Page Header ──────────────────────────────────────────────────── */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; } .page-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: 0.01em; color: var(--text-primary); line-height: 1.15; } .page-subtitle { font-size: 13.5px; color: var(--text-secondary); margin-top: 3px; } @media (min-width: 768px) { .page-title { font-size: 32px; } } /* ── Cards ────────────────────────────────────────────────────────── */ .sm-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; } .sm-card:hover { border-color: var(--border-strong); } .sm-card-header { padding: 14px 18px; border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.30); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: var(--color-primary-foreground); } .sm-card-header > * { color: inherit; } .sm-card-header .text-muted, .sm-card-header .text-muted-col { color: var(--color-primary-foreground) !important; opacity: 0.85; } .sm-card-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-primary-foreground); } /* Buttons/Links im farbigen Header lesbar machen */ .sm-card-header .btn-ghost-sm, .sm-card-header .btn-icon, .sm-card-header a:not(.btn-primary-sm):not(.btn-danger-sm) { background: rgba(255, 255, 255, 0.18); color: var(--color-primary-foreground); border-color: rgba(255, 255, 255, 0.30); } .sm-card-header .btn-ghost-sm:hover, .sm-card-header .btn-icon:hover, .sm-card-header a:not(.btn-primary-sm):not(.btn-danger-sm):hover { background: rgba(255, 255, 255, 0.30); color: var(--color-primary-foreground); border-color: rgba(255, 255, 255, 0.50); } .sm-card-body { padding: 18px; } @media (min-width: 768px) { .sm-card-header { padding: 16px 22px; } .sm-card-body { padding: 22px; } } /* Section-Label (Trenner zwischen Bereichen einer Seite) */ .sm-section-label { font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } /* ── Stat Cards ───────────────────────────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; } @media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } } .stat-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; position: relative; overflow: hidden; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; } .stat-card:hover { border-color: var(--color-primary); transform: translateY(-1px); box-shadow: var(--shadow-md); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.2s; } .stat-card:hover::before { transform: scaleX(1); } .stat-icon { font-size: 22px; color: var(--color-primary); margin-bottom: 8px; } .stat-value { font-family: var(--font-display); font-size: 32px; font-weight: 800; line-height: 1; color: var(--text-primary); } .stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-top: 4px; } /* ── Table ────────────────────────────────────────────────────────── */ .sm-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-surface); box-shadow: var(--shadow-card); } /* Solange ein Dropdown-Menü (z.B. Status-Menü im aufgeklappten Event-Roster) offen ist, darf der horizontale Scroll-Container es nicht abschneiden — sonst ragt das Menü unsichtbar nach rechts raus. overflow-x:auto erzwingt sonst auch overflow-y:auto und clippt das Popup. */ .sm-table-wrap:has(.dropdown-menu.show) { overflow: visible; } .sm-table { width: 100%; border-collapse: collapse; } .sm-table thead tr { background: var(--bg-secondary); border-bottom: 1px solid var(--border); } .sm-table thead th { padding: 12px 16px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); white-space: nowrap; text-align: left; } .sm-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.12s; } .sm-table tbody tr:last-child { border-bottom: none; } .sm-table tbody tr:hover { background: var(--bg-hover); } .sm-table td { padding: 12px 16px; font-size: 14px; color: var(--text-primary); vertical-align: middle; } .sm-table td.text-muted-col { color: var(--text-secondary); font-size: 13.5px; } /* ── Buttons ──────────────────────────────────────────────────────── */ .btn-primary-sm, .btn-ghost-sm, .btn-danger-sm { min-height: var(--tap); padding: 0 18px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s; white-space: nowrap; border: 1px solid transparent; line-height: 1; } .btn-primary-sm:active, .btn-ghost-sm:active, .btn-danger-sm:active { transform: translateY(1px); } .btn-primary-sm { background: var(--color-primary); color: var(--color-primary-foreground); } .btn-primary-sm:hover { background: var(--color-primary-hover); color: var(--color-primary-foreground); box-shadow: var(--shadow-accent); } .btn-ghost-sm { background: var(--bg-surface); color: var(--text-secondary); border-color: var(--border-strong); } .btn-ghost-sm:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); } .btn-danger-sm { background: transparent; color: var(--danger-text); border-color: var(--danger-border); padding: 0 14px; font-size: 13px; min-height: 36px; } .btn-danger-sm:hover { background: var(--danger-bg); color: var(--danger-text); } .btn-icon { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border); width: var(--tap); height: var(--tap); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; font-size: 16px; transition: background 0.15s, color 0.15s, border-color 0.15s; } .btn-icon:hover { background: var(--primary-bg); color: var(--color-primary); border-color: rgba(var(--color-primary-rgb), 0.35); } .btn-icon.danger:hover { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); } .action-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } /* ── Aktionen-Modal: Kachel-Funktionsauswahl (feldtauglich) ───────── */ .action-modal-header { align-items: flex-start; gap: 12px; } .action-modal-context { display: flex; align-items: center; gap: 12px; min-width: 0; } .action-modal-context-text { min-width: 0; } .action-modal-context-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--primary-bg); color: var(--color-primary); font-size: 22px; display: inline-flex; align-items: center; justify-content: center; } .action-modal-title { font-weight: 600; color: var(--text-primary); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .action-modal-subtitle { font-size: 13px; color: var(--text-secondary); } .action-section + .action-section { margin-top: 18px; } .action-section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 8px; } .action-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .action-tile-form { margin: 0; display: contents; } .action-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 88px; padding: 12px 8px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); text-decoration: none; cursor: pointer; font-size: 13px; line-height: 1.2; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s; } .action-tile i { font-size: 24px; color: var(--color-primary); } .action-tile:hover { background: var(--primary-bg); border-color: rgba(var(--color-primary-rgb), 0.35); } .action-tile:active { transform: scale(0.97); } .action-tile-danger i { color: var(--danger-text); } .action-tile-danger:hover { background: var(--danger-bg); border-color: var(--danger-border); } /* ── Forms ────────────────────────────────────────────────────────── */ .sm-form-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 6px; display: block; } .sm-form-control { width: 100%; min-height: var(--tap); background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-primary); padding: 10px 14px; font-family: var(--font-body); font-size: 16px; transition: border-color 0.15s, box-shadow 0.15s; outline: none; } .sm-form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18); } .sm-form-control::placeholder { color: var(--text-muted); } select.sm-form-control { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M3.204 5.5h9.592L8 11.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 38px; } select.sm-form-control option { background: var(--bg-elevated); color: var(--text-primary); } .sm-form-group { margin-bottom: 18px; } .form-hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; } /* ── Color Picker ─────────────────────────────────────────────────── */ .color-input-wrap { display: flex; align-items: center; gap: 10px; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 12px; min-height: var(--tap); transition: border-color 0.15s, box-shadow 0.15s; } .color-input-wrap:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18); } .color-swatch { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border-strong); cursor: pointer; flex-shrink: 0; } input[type="color"] { opacity: 0; position: absolute; pointer-events: none; } .color-hex-input { background: none; border: none; color: var(--text-primary); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px; width: 90px; outline: none; text-transform: uppercase; } /* ── Badges ───────────────────────────────────────────────────────── */ .badge-sm { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; } .badge-success { background: var(--success-bg); color: var(--success-text); } .badge-warning { background: var(--warning-bg); color: var(--warning-text); } .badge-danger { background: var(--danger-bg); color: var(--danger-text); } .badge-info { background: var(--info-bg); color: var(--info-text); } .badge-muted { background: var(--bg-hover); color: var(--text-secondary); } .badge-accent { background: var(--primary-bg); color: var(--color-primary); } /* ── Avatar / Spieler-Card ────────────────────────────────────────── */ .avatar-circle { width: 36px; height: 36px; border-radius: 50%; background: var(--primary-bg); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 14px; font-weight: 700; flex-shrink: 0; } .player-cell { display: flex; align-items: center; gap: 12px; } .player-name { font-weight: 600; font-size: 14px; color: var(--text-primary); } .player-meta { font-size: 12px; color: var(--text-muted); } /* ── Modal (Bootstrap-Override) ───────────────────────────────────── */ .modal-content { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-lg) !important; } .modal-header { border-bottom: 1px solid var(--border) !important; padding: 18px 22px !important; } .modal-title { font-family: var(--font-display) !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; } .modal-body { padding: 22px !important; } .modal-footer{ border-top: 1px solid var(--border) !important; padding: 14px 22px !important; } .btn-close { filter: none; } [data-theme="dark"] .btn-close { filter: invert(1); } /* ── Sponsor Slots ────────────────────────────────────────────────── */ .sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .sponsor-slot { background: var(--bg-secondary); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: 16px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .sponsor-slot:hover { border-color: var(--color-primary); background: var(--primary-bg); } .sponsor-slot.filled { border-style: solid; border-color: var(--border-strong); background: var(--bg-surface); } .sponsor-slot.slot-1 { border-color: rgba(var(--color-primary-rgb), 0.40); } .sponsor-slot-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); } .sponsor-slot-name { font-size: 13px; font-weight: 600; color: var(--text-primary); } .sponsor-slot-empty { font-size: 12px; color: var(--text-muted); } /* ── Tag / Pill ───────────────────────────────────────────────────── */ .tag { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border); } /* ── Empty State ──────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 50px 20px; color: var(--text-muted); } .empty-state i { font-size: 48px; opacity: 0.35; margin-bottom: 14px; display: block; color: var(--color-primary); } .empty-state h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; } .empty-state p { font-size: 13.5px; } /* ── Pagination ───────────────────────────────────────────────────── */ .sm-pagination { display: flex; gap: 4px; justify-content: center; margin-top: 22px; } .sm-page-btn { min-width: 36px; min-height: 36px; padding: 0 8px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); font-size: 13.5px; cursor: pointer; text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; } .sm-page-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .sm-page-btn.active { background: var(--color-primary); color: var(--color-primary-foreground); border-color: var(--color-primary); } /* ── Search & Filter Bar ──────────────────────────────────────────── */ .filter-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; } .search-input-wrap { position: relative; flex: 1 1 240px; min-width: 200px; } .search-input-wrap i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 16px; pointer-events: none; } .search-input-wrap input { padding-left: 42px; } /* ── Data-View Toggle ─────────────────────────────────────────────── */ .view-toggle { background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); min-height: var(--tap); padding: 0 12px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13.5px; font-weight: 500; transition: background 0.15s, color 0.15s; flex-shrink: 0; } .view-toggle:hover { background: var(--bg-hover); color: var(--text-primary); } .view-toggle i { font-size: 17px; } .view-toggle .icon-show-table { display: inline; } .view-toggle .icon-show-cards { display: none; } body.data-view-table .view-toggle .icon-show-table { display: none; } body.data-view-table .view-toggle .icon-show-cards { display: inline; } .view-toggle-label { white-space: nowrap; } @media (max-width: 600px) { .view-toggle-label { display: none; } } /* ── Card-View für Tabellen (body.data-view-cards) ────────────────── */ body.data-view-cards .page-content .sm-table-wrap { border: none; border-radius: 0; background: transparent; overflow: visible; box-shadow: none; } body.data-view-cards .page-content table.sm-table:not(.no-card-view), body.data-view-cards .page-content table.table:not(.no-card-view) { display: block; background: transparent; width: 100%; border-collapse: separate; border-spacing: 0; } body.data-view-cards .page-content table.sm-table:not(.no-card-view) thead, body.data-view-cards .page-content table.table:not(.no-card-view) thead { display: none; } body.data-view-cards .page-content table.sm-table:not(.no-card-view) tbody, body.data-view-cards .page-content table.table:not(.no-card-view) tbody { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px) { body.data-view-cards .page-content table.sm-table:not(.no-card-view) tbody, body.data-view-cards .page-content table.table:not(.no-card-view) tbody { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } } body.data-view-cards .page-content table.sm-table:not(.no-card-view) tbody tr, body.data-view-cards .page-content table.table:not(.no-card-view) tbody tr { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin: 0; padding: 0; overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; } body.data-view-cards .page-content table.sm-table:not(.no-card-view) tbody tr:hover, body.data-view-cards .page-content table.table:not(.no-card-view) tbody tr:hover { border-color: rgba(var(--color-primary-rgb), 0.40); box-shadow: var(--shadow-md); } body.data-view-cards .page-content table.sm-table:not(.no-card-view) td, body.data-view-cards .page-content table.table:not(.no-card-view) td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 16px; border: none; white-space: normal; font-size: 14px; text-align: right; } body.data-view-cards .page-content table.sm-table:not(.no-card-view) td::before, body.data-view-cards .page-content table.table:not(.no-card-view) td::before { content: attr(data-label); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); flex-shrink: 0; text-align: left; } /* Hero-Zelle — Vereinsfarben-Streifen analog zu .sm-card-header */ body.data-view-cards .page-content tbody tr > td:first-child { padding: 14px 16px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: var(--color-primary-foreground); border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.40); justify-content: flex-start; text-align: left; } body.data-view-cards .page-content tbody tr > td:first-child::before { content: none; } body.data-view-cards .page-content tbody tr > td:first-child .avatar-circle { width: 44px; height: 44px; font-size: 16px; background: rgba(255, 255, 255, 0.22); color: var(--color-primary-foreground); } body.data-view-cards .page-content tbody tr > td:first-child .player-cell img { width: 44px !important; height: 44px !important; } body.data-view-cards .page-content tbody tr > td:first-child .player-name { font-size: 15.5px; color: var(--color-primary-foreground); } body.data-view-cards .page-content tbody tr > td:first-child .player-meta, body.data-view-cards .page-content tbody tr > td:first-child .text-muted-col { color: var(--color-primary-foreground) !important; opacity: 0.88; } /* Footer-Zelle (mit Actions) */ body.data-view-cards .page-content tbody tr > td:last-child:not(:first-child):has(.action-group) { padding: 10px 12px; background: var(--bg-secondary); border-top: 1px solid var(--border); justify-content: stretch; margin-top: auto; } body.data-view-cards .page-content tbody tr > td:last-child:has(.action-group)::before { content: none; } body.data-view-cards .page-content tbody tr > td:last-child:has(.action-group) .action-group { display: flex; flex: 1; width: 100%; gap: 6px; flex-wrap: wrap; justify-content: flex-start; } body.data-view-cards .page-content tbody tr > td:last-child:has(.action-group) .action-group > * { flex: 1 1 90px; min-width: 0; } body.data-view-cards .page-content tbody tr > td:last-child:has(.action-group) .action-group form { display: flex; min-width: 0; } body.data-view-cards .page-content tbody tr > td:last-child:has(.action-group) .action-group form > .btn-icon { flex: 1; } body.data-view-cards .page-content tbody tr > td:last-child:has(.action-group) .btn-icon[title] { width: auto; height: 38px; padding: 0 10px; gap: 6px; font-size: 13px; font-weight: 600; border-radius: var(--radius-sm); /* Färbig statt grau: Primary-Tint mit Primary-Border */ background: var(--primary-bg); color: var(--color-primary); border-color: rgba(var(--color-primary-rgb), 0.30); } body.data-view-cards .page-content tbody tr > td:last-child:has(.action-group) .btn-icon[title]:hover { background: var(--color-primary); color: var(--color-primary-foreground); border-color: var(--color-primary); } body.data-view-cards .page-content tbody tr > td:last-child:has(.action-group) .btn-icon.danger[title] { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); } body.data-view-cards .page-content tbody tr > td:last-child:has(.action-group) .btn-icon.danger[title]:hover { background: var(--danger-text); color: #fff; border-color: var(--danger-text); } body.data-view-cards .page-content tbody tr > td:last-child:has(.action-group) .btn-icon[title]::after { content: attr(title); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } body.data-view-cards .page-content td[data-label=""]::before, body.data-view-cards .page-content td:not([data-label])::before { content: none; } body.data-view-cards .page-content tbody tr > td:not(:first-child):not(:last-child)[data-label=""], body.data-view-cards .page-content tbody tr > td:not(:first-child):not(:last-child):not([data-label]) { justify-content: flex-end; } /* Bootstrap-Responsive-Klassen auch im Card-View respektieren — so kann eine Tabelle Spalten wie `d-none d-md-table-cell` setzen, die dann auf Mobile in BEIDEN Modi (Tabelle UND Card) versteckt sind. */ body.data-view-cards .page-content table:not(.no-card-view) td.d-none { display: none !important; } @media (min-width: 576px) { body.data-view-cards .page-content table:not(.no-card-view) td.d-sm-table-cell { display: flex !important; } } @media (min-width: 768px) { body.data-view-cards .page-content table:not(.no-card-view) td.d-md-table-cell { display: flex !important; } } @media (min-width: 992px) { body.data-view-cards .page-content table:not(.no-card-view) td.d-lg-table-cell { display: flex !important; } } @media (min-width: 1200px) { body.data-view-cards .page-content table:not(.no-card-view) td.d-xl-table-cell { display: flex !important; } } /* Overflow-Schutz: nichts ragt aus der Card raus */ body.data-view-cards .page-content tbody tr { min-width: 0; max-width: 100%; } /* ── Dichte Card-Variante (.cards-dense) ────────────────────────────── Zwei Werte pro Zeile (sofern Platz), engere Zeilenabstände. Hero (erste Zelle), Aktionen-Footer und .card-full bleiben volle Breite. */ body.data-view-cards .page-content table.cards-dense:not(.no-card-view) tbody { align-items: start; } body.data-view-cards .page-content table.cards-dense:not(.no-card-view) tbody tr { flex-flow: row wrap; align-content: flex-start; } body.data-view-cards .page-content table.cards-dense:not(.no-card-view) tbody tr > td { flex: 1 1 45%; min-width: 45%; padding: 5px 14px; gap: 8px; } /* Label kompakter, Wert rechts */ body.data-view-cards .page-content table.cards-dense:not(.no-card-view) tbody tr > td::before { font-size: 10px; } /* Volle Breite: Spieler-Hero, Aktionen-Footer und explizit markierte Zellen */ body.data-view-cards .page-content table.cards-dense:not(.no-card-view) tbody tr > td:first-child, body.data-view-cards .page-content table.cards-dense:not(.no-card-view) tbody tr > td:last-child:has(.action-group), body.data-view-cards .page-content table.cards-dense:not(.no-card-view) tbody tr > td.card-full { flex: 1 1 100%; min-width: 100%; } /* card-full mit eigenem Label linksbündig (z.B. Event-Chips) */ body.data-view-cards .page-content table.cards-dense:not(.no-card-view) tbody tr > td.card-full { flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; } /* overflow:visible, damit Dropdown-Menüs (z.B. Aktionen-Menü) nicht von der Card abgeschnitten werden. Die Ecken werden stattdessen über Hero- und Footer-Zelle abgerundet. */ body.data-view-cards .page-content table.cards-dense:not(.no-card-view) tbody tr { overflow: visible; } body.data-view-cards .page-content table.cards-dense:not(.no-card-view) tbody tr > td:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } body.data-view-cards .page-content table.cards-dense:not(.no-card-view) tbody tr > td:last-child:has(.action-group) { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } body.data-view-cards .page-content tbody tr td { min-width: 0; overflow-wrap: anywhere; word-break: break-word; } body.data-view-cards .page-content tbody tr .player-cell { min-width: 0; flex-wrap: wrap; } body.data-view-cards .page-content tbody tr .player-cell > * { min-width: 0; } body.data-view-cards .page-content tbody tr .player-cell > div { min-width: 0; overflow: hidden; } body.data-view-cards .page-content tbody tr .player-name { overflow: hidden; text-overflow: ellipsis; } body.data-view-cards .page-content tbody tr .tag, body.data-view-cards .page-content tbody tr .badge-sm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Kader-Liste (inline ausklappbar auf Mannschaften/Edit) ───────── */ .kader-details { margin: 24px 0 22px; } .kader-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 10px 4px; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); user-select: none; } .kader-details > summary::-webkit-details-marker, .kader-details > summary::marker { display: none; content: ''; } .kader-summary-title { display: inline-flex; align-items: center; gap: 8px; } .kader-summary-title i { color: var(--color-primary); font-size: 16px; } .kader-summary-chevron { transition: transform 0.2s ease; color: var(--text-muted); font-size: 14px; } .kader-details[open] > summary .kader-summary-chevron { transform: rotate(180deg); } .kader-card { margin-top: 10px; } /* Kader-Details direkt in einer Card (ohne eigener Summary-Border) */ .kader-details-flush > summary { border-bottom: 1px solid var(--border); padding: 12px 16px; margin: 0; } .kader-details-flush[open] > summary { border-bottom-color: var(--border); } /* ── Teilnehmer-Liste auf Events/Details mit Zu-/Absage-Buttons ──── */ .teilnehmer-list { list-style: none; padding: 0; margin: 0; } .teilnehmer-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .teilnehmer-item:last-child { border-bottom: none; } .teilnehmer-info { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 0; } .teilnehmer-avatar { width: 36px; height: 36px; font-size: 13px; flex-shrink: 0; } .teilnehmer-avatar-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .teilnehmer-text { min-width: 0; flex: 1; } .teilnehmer-name { font-weight: 600; font-size: 14px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .teilnehmer-nom { margin-top: 2px; } .teilnehmer-nom .badge { font-size: 10.5px; } /* Zu-/Absage Button-Group */ .zusage-buttons { display: inline-flex; gap: 4px; margin: 0; flex-shrink: 0; } .zusage-btn { width: 36px; height: 36px; border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.08s; padding: 0; } .zusage-btn:hover { transform: scale(1.06); } .zusage-btn:active { transform: scale(0.95); } .zusage-btn-yes:hover, .zusage-btn-yes.active { background: #d1fae5; color: #047857; border-color: #6ee7b7; } .zusage-btn-maybe:hover, .zusage-btn-maybe.active { background: #fef3c7; color: #b45309; border-color: #fcd34d; } .zusage-btn-no:hover, .zusage-btn-no.active { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; } [data-theme="dark"] .zusage-btn-yes.active { background: rgba(16,185,129,0.20); color: #6ee7b7; border-color: rgba(16,185,129,0.50); } [data-theme="dark"] .zusage-btn-maybe.active { background: rgba(245,158,11,0.20); color: #fcd34d; border-color: rgba(245,158,11,0.50); } [data-theme="dark"] .zusage-btn-no.active { background: rgba(239,68,68,0.20); color: #fca5a5; border-color: rgba(239,68,68,0.50); } .zusage-readonly { font-size: 11.5px; padding: 5px 10px; } /* ── Zusage-Dropdown (Events/Index + Events/Details Teilnehmer-Liste) ── */ .zusage-dropdown { display: inline-block; } .zusage-status-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-primary); border-radius: var(--radius-sm); padding: 5px 10px; font-size: 12.5px; font-weight: 600; line-height: 1.2; min-height: 32px; transition: background 0.12s, color 0.12s, border-color 0.12s; } .zusage-status-btn i { font-size: 15px; } .zusage-status-btn:hover { background: var(--bg-hover); } .zusage-status-btn::after { /* Bootstrap caret kleiner halten */ margin-left: 4px; border-top-width: 0.25em; } .zusage-status-label { white-space: nowrap; } @media (max-width: 480px) { .zusage-status-label { display: none; } } /* Farbvarianten — analog zu zusage-btn-* */ .zusage-status-btn.zusage-status-yes { background: #d1fae5; color: #047857; border-color: #6ee7b7; } .zusage-status-btn.zusage-status-maybe { background: #fef3c7; color: #b45309; border-color: #fcd34d; } .zusage-status-btn.zusage-status-no { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; } .zusage-status-btn.zusage-status-nn { background: var(--bg-tertiary, #e5e7eb); color: var(--text-secondary); border-color: var(--border-strong); } .zusage-status-btn.zusage-status-open { background: var(--bg-surface); color: var(--text-muted); } .zusage-status-btn.zusage-status-other { background: #e0f2fe; color: #0369a1; border-color: #7dd3fc; } [data-theme="dark"] .zusage-status-btn.zusage-status-other { background: rgba(14,165,233,0.20); color: #7dd3fc; border-color: rgba(14,165,233,0.50); } [data-theme="dark"] .zusage-status-btn.zusage-status-yes { background: rgba(16,185,129,0.20); color: #6ee7b7; border-color: rgba(16,185,129,0.50); } [data-theme="dark"] .zusage-status-btn.zusage-status-maybe { background: rgba(245,158,11,0.20); color: #fcd34d; border-color: rgba(245,158,11,0.50); } [data-theme="dark"] .zusage-status-btn.zusage-status-no { background: rgba(239,68,68,0.20); color: #fca5a5; border-color: rgba(239,68,68,0.50); } [data-theme="dark"] .zusage-status-btn.zusage-status-nn { background: rgba(148,163,184,0.18); color: #cbd5e1; border-color: rgba(148,163,184,0.40); } /* Dropdown-Menü und Items */ .zusage-menu { min-width: 200px; padding: 6px 0; } .zusage-menu-form { margin: 0; display: block; } .zusage-menu .dropdown-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 8px 14px; width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; } .zusage-menu .dropdown-item i { font-size: 16px; width: 18px; text-align: center; } .zusage-menu .zusage-item-yes i { color: #047857; } .zusage-menu .zusage-item-maybe i { color: #b45309; } .zusage-menu .zusage-item-no i { color: #b91c1c; } .zusage-menu .zusage-item-nn i { color: var(--text-muted); } [data-theme="dark"] .zusage-menu .zusage-item-yes i { color: #6ee7b7; } [data-theme="dark"] .zusage-menu .zusage-item-maybe i { color: #fcd34d; } [data-theme="dark"] .zusage-menu .zusage-item-no i { color: #fca5a5; } .zusage-item-meta { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); } /* 'Anderes Team' — Inline-Item mit Pflicht-Grund-Feld */ .zusage-item-other { padding: 8px 14px; } .zusage-item-other-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 6px; } .zusage-item-other-head i { font-size: 16px; width: 18px; text-align: center; color: #0369a1; } [data-theme="dark"] .zusage-item-other-head i { color: #7dd3fc; } .zusage-item-other-row { display: flex; gap: 6px; } .zusage-item-other-input { flex: 1 1 auto; min-width: 0; font-size: 13px; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg-surface); color: var(--text-primary); } .zusage-item-other-btn { flex: 0 0 auto; border: 0; background: #e0f2fe; color: #0369a1; border-radius: 6px; padding: 0 10px; cursor: pointer; } .zusage-item-other-btn i { font-size: 16px; } [data-theme="dark"] .zusage-item-other-btn { background: rgba(14,165,233,0.20); color: #7dd3fc; } /* ── Status-Zusammenfassung (Icon + Anzahl je Status, _EventStatusZusammenfassung) ── */ .event-status-summary { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .esz-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .esz-chip i { font-size: 13px; } .esz-chip .esz-count { font-variant-numeric: tabular-nums; } .esz-chip.esz-zero { opacity: 0.4; } .esz-chip.esz-yes { background: #d1fae5; color: #047857; border-color: #6ee7b7; } .esz-chip.esz-maybe { background: #fef3c7; color: #b45309; border-color: #fcd34d; } .esz-chip.esz-no { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; } .esz-chip.esz-other { background: #e0f2fe; color: #0369a1; border-color: #7dd3fc; } .esz-chip.esz-open { background: var(--bg-tertiary, #e5e7eb); color: var(--text-secondary); border-color: var(--border-strong); } .esz-chip.esz-nn { background: var(--bg-tertiary, #e5e7eb); color: var(--text-muted); border-color: var(--border-strong); } [data-theme="dark"] .esz-chip.esz-yes { background: rgba(16,185,129,0.20); color: #6ee7b7; border-color: rgba(16,185,129,0.50); } [data-theme="dark"] .esz-chip.esz-maybe { background: rgba(245,158,11,0.20); color: #fcd34d; border-color: rgba(245,158,11,0.50); } [data-theme="dark"] .esz-chip.esz-no { background: rgba(239,68,68,0.20); color: #fca5a5; border-color: rgba(239,68,68,0.50); } [data-theme="dark"] .esz-chip.esz-other { background: rgba(14,165,233,0.20); color: #7dd3fc; border-color: rgba(14,165,233,0.50); } [data-theme="dark"] .esz-chip.esz-open { background: rgba(148,163,184,0.18); color: #cbd5e1; border-color: rgba(148,163,184,0.40); } [data-theme="dark"] .esz-chip.esz-nn { background: rgba(148,163,184,0.18); color: #94a3b8; border-color: rgba(148,163,184,0.40); } /* ── Kader-Seite (Events/Kader) ───────────────────────────────────── */ .kader-tabs { border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; gap: 2px; } .kader-tabs .nav-link { color: var(--text-secondary); background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 10px 14px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .kader-tabs .nav-link:hover { color: var(--text-primary); background: var(--bg-hover); } .kader-tabs .nav-link.active { color: var(--color-primary); background: transparent; border-bottom-color: var(--color-primary); } .kader-tabs .nav-link i { font-size: 16px; } .kader-tabs .badge { font-size: 11px; } .kader-tab-content { padding-top: 4px; } .kader-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); margin-bottom: 10px; flex-wrap: wrap; } .kader-row-info { display: flex; align-items: center; gap: 12px; flex: 1 1 280px; min-width: 0; } .kader-avatar { width: 44px; height: 44px; font-size: 15px; flex-shrink: 0; } .kader-avatar-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .kader-row-text { flex: 1; min-width: 0; } .kader-row-name { font-weight: 600; font-size: 15px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kader-row-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 12px; } .kader-row-meta .badge { font-size: 10.5px; } .kader-row-grund { font-size: 11.5px; color: var(--text-muted); } .kader-row-kommentar { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; background: var(--bg-secondary); padding: 4px 8px; border-radius: var(--radius-sm); display: inline-block; max-width: 100%; overflow-wrap: anywhere; } .kader-row-kommentar i { color: var(--text-muted); margin-right: 4px; } .kader-row-form { display: flex; gap: 6px; align-items: center; flex: 1 1 360px; justify-content: flex-end; flex-wrap: nowrap; min-width: 0; } .kader-status-select { flex: 0 0 auto; width: auto; min-width: 130px; font-size: 13px; padding: 6px 10px; } .kader-kommentar-input { flex: 1 1 100px; min-width: 0; font-size: 13px; padding: 6px 10px; } .kader-kommentar-input.is-required { border-color: #f59e0b; background: #fffbeb; } [data-theme="dark"] .kader-kommentar-input.is-required { border-color: rgba(245, 158, 11, 0.6); background: rgba(245, 158, 11, 0.08); } .kader-save-btn { flex: 0 0 auto; padding: 6px 12px; font-size: 13px; min-height: 36px; white-space: nowrap; } @media (max-width: 720px) { .kader-row { gap: 10px; } .kader-row-form { flex-wrap: wrap; flex: 1 1 100%; justify-content: stretch; } .kader-status-select { flex: 1 1 130px; } .kader-kommentar-input { flex: 1 1 100%; } .kader-save-btn { flex: 0 0 auto; } } /* ── Filter-Bar Toggle (Checkbox-Style) ───────────────────────────── */ .filter-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; user-select: none; padding: 0 10px; min-height: 38px; border-radius: var(--radius-sm); } .filter-toggle:hover { color: var(--text-primary); background: var(--bg-hover); } .filter-toggle input { margin: 0; cursor: pointer; width: 16px; height: 16px; accent-color: var(--color-primary); } /* Dashboard: nächstes Event Stripe oben in der Mannschaft-Card */ .dashboard-next-event { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--primary-bg); color: var(--text-primary); border-bottom: 1px solid var(--border); font-size: 13.5px; } .dashboard-next-event i { color: var(--color-primary); font-size: 16px; flex-shrink: 0; } .dashboard-next-event a { color: var(--color-primary); text-decoration: none; } .dashboard-next-event a:hover { text-decoration: underline; } /* ── Spieler-Dashboard ───────────────────────────────────────────── */ .dash-profil { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } /* Zahlen-Zeile unter dem Profil — vier Werte, eine Reihe, auch auf schmalen Geräten. */ .dash-kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; text-decoration: none; } .dash-kennzahlen:hover .dkz-wert { color: var(--color-primary-hover, var(--color-primary)); } .dash-kennzahl { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border: 1px solid var(--border); border-radius: var(--radius, 10px); background: var(--surface); } .dkz-wert { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1; color: var(--color-primary); } .dkz-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .dash-profil-avatar img, .dash-profil-avatar .avatar-circle { width: 64px; height: 64px; font-size: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .dash-profil-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } .dash-profil-name { font-size: 1.4rem; font-weight: 700; margin: 0; line-height: 1.1; } .dash-profil-edit { text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } /* Benachrichtigungs-Bereich (gebündelte Hinweise/Zustände aus mehreren Quellen) */ .dash-hinweise { margin-bottom: 18px; } .dash-hinweise-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, 0.25); color: var(--color-primary-foreground); font-size: 0.78rem; font-weight: 700; } .hinweis-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .hinweis-item { border-radius: var(--radius-md); border: 1px solid var(--border); overflow: hidden; } .hinweis-body { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-decoration: none; color: var(--text-primary); border-left: 3px solid transparent; } a.hinweis-body:hover { text-decoration: none; background: var(--bg-hover, rgba(0, 0, 0, 0.03)); } .hinweis-icon { flex-shrink: 0; font-size: 1.15rem; line-height: 1; display: inline-flex; } .hinweis-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .hinweis-titel { font-weight: 600; font-size: 0.9rem; } .hinweis-beschreibung { font-size: 0.8rem; color: var(--text-secondary); } .hinweis-chevron { margin-left: auto; opacity: 0.5; flex-shrink: 0; } /* Farbcodierung je Stufe (linker Balken + Icon-Farbe) */ .hinweis-info .hinweis-body { border-left-color: var(--info-border); } .hinweis-info .hinweis-icon { color: var(--info-text); } .hinweis-aktion .hinweis-body { border-left-color: var(--color-primary); } .hinweis-aktion .hinweis-icon { color: var(--color-primary); } .hinweis-warnung .hinweis-body { border-left-color: var(--warning-border); } .hinweis-warnung .hinweis-icon { color: var(--warning-text); } .hinweis-dringend .hinweis-body { border-left-color: var(--danger-border); background: var(--danger-bg); } .hinweis-dringend .hinweis-icon { color: var(--danger-text); } .hinweis-dringend .hinweis-beschreibung { color: var(--danger-text); opacity: 0.9; } /* Einklappbare Karten-Kopfzeile (z. B. „Meine Aufgaben") */ .dash-collapse-toggle { width: 100%; border: none; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 10px; font: inherit; } .dash-collapse-count { min-width: 22px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, 0.25); color: var(--color-primary-foreground); font-size: 0.78rem; font-weight: 700; } .dash-collapse-chevron { margin-left: auto; transition: transform 0.18s ease; opacity: 0.85; } .dash-collapse-chevron.rotated { transform: rotate(180deg); } .dash-team-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .dash-filter-chip { padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-surface); color: var(--text-secondary); font-size: 13px; text-decoration: none; white-space: nowrap; } .dash-filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary); } .dash-filter-chip.active { background: var(--color-primary); color: var(--color-primary-foreground); border-color: var(--color-primary); } .spieler-termine-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .spieler-termin-item { padding: 10px 0; border-bottom: 1px solid var(--border); } .spieler-termin-item:first-child { padding-top: 0; } .spieler-termin-item:last-child { padding-bottom: 0; border-bottom: none; } .kader-list { list-style: none; padding: 0; margin: 0; } .kader-item { border-bottom: 1px solid var(--border); display: flex; align-items: stretch; flex-wrap: wrap; } .kader-item:last-child { border-bottom: none; } .kader-item-event { flex-basis: 100%; padding: 4px 14px 10px 66px; background: var(--bg-elevated); } .kader-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: var(--text-primary); min-height: var(--tap); transition: background 0.12s; } .kader-item-action { display: flex; align-items: center; gap: 4px; padding: 0 12px 0 4px; flex-shrink: 0; } .kader-link:hover { background: var(--bg-hover); color: var(--text-primary); } .kader-avatar { flex-shrink: 0; } .kader-avatar img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; display: block; } .kader-avatar .avatar-circle { width: 40px; height: 40px; font-size: 14px; } .kader-info { flex: 1; min-width: 0; } .kader-name { font-weight: 600; font-size: 14px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .kader-meta { font-size: 12px; color: var(--text-muted); margin-top: 1px; } .kader-num { font-family: var(--font-display); font-weight: 700; color: var(--color-primary); } .kader-sep { margin: 0 4px; color: var(--text-muted); } .kader-chevron { color: var(--text-muted); font-size: 16px; flex-shrink: 0; } /* ── Spieler-Event-Status (Inline-Status zum nächsten Event) ─────── */ .spieler-event-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; } .spieler-event-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; } .spieler-event-link:hover { color: var(--color-primary); text-decoration: underline; } .spieler-event-titel { font-weight: 600; color: var(--text-primary); } .spieler-event-when { color: var(--text-muted); } .spieler-event-form { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .spieler-event-select { width: auto; min-width: 110px; padding: 2px 6px !important; font-size: 12px !important; min-height: 28px !important; } .spieler-event-kommentar { width: 160px; padding: 2px 6px !important; font-size: 12px !important; min-height: 28px !important; } .spieler-event-form .btn-icon { width: 28px; height: 28px; } .spieler-event-kom-zeile { flex-basis: 100%; color: var(--text-muted); font-size: 12px; display: flex; align-items: center; gap: 4px; margin-top: 2px; } .spieler-event-kom-zeile strong { color: var(--text-secondary); font-weight: 600; } /* Zusatzzeile (Typ · Team · Ort) — nur dort befüllt, wo die Karte allein steht (Spieler-Dashboard). */ .spieler-event-meta { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--text-muted); font-size: 12px; } /* ── Status-Chips (Inline-Zusage in Spieler-Listen) ───────────────── */ [x-cloak] { display: none !important; } .ses-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; } .ses-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; min-height: 32px; /* Daumen-tauglich: Zu-/Absagen ist die häufigste Handlung */ border: 1px solid var(--border-color, #d1d5db); border-radius: 999px; background: var(--surface, #fff); color: var(--text-secondary); font-size: 12.5px; line-height: 1; cursor: pointer; transition: background-color .12s, color .12s, border-color .12s; } .ses-chip i { font-size: 15px; } .ses-chip:hover { border-color: currentColor; } /* Beschriftung immer sichtbar — die reine Icon-Reihe war als Bedienelement nicht erkennbar. */ .ses-chip .ses-chip-label { font-weight: 600; } .ses-more { color: var(--text-muted); padding: 6px 9px; } /* Tönung je Status (Icon-Farbe im Ruhezustand) */ .ses-yes:hover, .ses-yes.ses-active { color: #fff; } .ses-maybe:hover, .ses-maybe.ses-active { color: #1f2937; } .ses-no:hover, .ses-no.ses-active { color: #fff; } .ses-other:hover, .ses-other.ses-active { color: #1f2937; } .ses-open:hover, .ses-open.ses-active { color: #fff; } .ses-nn:hover, .ses-nn.ses-active { color: #fff; } /* Aktiver Zustand: Hintergrundfarbe */ .ses-yes.ses-active { background: #16a34a; border-color: #16a34a; } .ses-maybe.ses-active { background: #fbbf24; border-color: #fbbf24; } .ses-no.ses-active { background: #dc2626; border-color: #dc2626; } .ses-other.ses-active { background: #38bdf8; border-color: #38bdf8; } .ses-open.ses-active { background: #94a3b8; border-color: #94a3b8; } .ses-nn.ses-active { background: #64748b; border-color: #64748b; } .ses-komment { display: inline-flex; align-items: center; gap: 4px; } .ses-komment-input { width: 170px; padding: 2px 6px !important; font-size: 12px !important; min-height: 28px !important; } .ses-komment-ok { width: 28px; height: 28px; } /* ── Foto-Vorschau auf der Event-Detailseite ──────────────────────── */ .event-fotos-vorschau { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .event-fotos-vorschau img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--radius-sm, 8px); display: block; } .event-foto-kachel { position: relative; display: inline-block; } .event-foto-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); background: rgba(0,0,0,.18); border-radius: var(--radius-sm, 8px); pointer-events: none; } .event-fotos-mehr { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 72px; border: 1px dashed var(--border); border-radius: var(--radius-sm, 8px); color: var(--text-muted); font-weight: 600; text-decoration: none; } /* ── Navigation Tiles ─────────────────────────────────────────────── */ .nav-tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* Mobile: immer zwei Kacheln pro Reihe */ gap: 12px; margin-bottom: 24px; } @media (min-width: 768px) { .nav-tile-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } } .nav-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s; min-height: 120px; } .nav-tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.2s; } .nav-tile:hover { border-color: rgba(var(--color-primary-rgb), 0.40); background: var(--bg-surface); color: var(--text-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); } .nav-tile:active { transform: translateY(0); } .nav-tile:hover::before { transform: scaleX(1); } /* Gesperrt = im Abo nicht enthalten. Bewusst noch klickbar (fuehrt auf den Premium-Hinweis) und nicht ausgegraut bis zur Unlesbarkeit — die Kachel soll ja neugierig machen, nicht kaputt wirken. */ .nav-tile-gesperrt { border-style: dashed; } .nav-tile-gesperrt .nav-tile-icon { background: var(--bg-muted, rgba(128,128,128,.14)); color: var(--text-secondary); } .nav-tile-gesperrt .nav-tile-label { color: var(--text-secondary); } .nav-tile-gesperrt .nav-tile-label .bi-lock-fill { font-size: .8em; opacity: .75; margin-left: 2px; } .nav-tile-gesperrt::before { background: var(--text-secondary); } .nav-tile-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--primary-bg); color: var(--color-primary); font-size: 22px; margin-bottom: 4px; transition: background 0.18s, color 0.18s; } .nav-tile:hover .nav-tile-icon { background: var(--color-primary); color: var(--color-primary-foreground); } .nav-tile-label { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-primary); } .nav-tile-sub { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; } /* ── Bootstrap Overrides ──────────────────────────────────────────── */ .form-control, .form-select { background: var(--bg-input) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important; min-height: var(--tap); font-size: 16px !important; } .form-control:focus, .form-select:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18) !important; } .form-control::placeholder { color: var(--text-muted) !important; } .form-select option { background: var(--bg-elevated); color: var(--text-primary); } .dropdown-menu { background: var(--bg-elevated) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-lg) !important; padding: 6px !important; } .dropdown-item { color: var(--text-secondary) !important; font-size: 14px !important; border-radius: var(--radius-sm); padding: 8px 12px !important; } .dropdown-item:hover, .dropdown-item:focus { background: var(--bg-hover) !important; color: var(--text-primary) !important; } .alert { border-radius: var(--radius-md); } .alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); } .alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); } .alert-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); } .alert-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); } /* ── Utility ──────────────────────────────────────────────────────── */ .gap-8 { gap: 8px; } .text-accent { color: var(--color-primary); } .font-display { font-family: var(--font-display); } .divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; } .text-num { font-family: var(--font-display); font-weight: 700; font-size: 16px; } .text-muted, .text-muted-col { color: var(--text-muted) !important; } /* Scrollbar (subtil) */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ── Drawer-Backdrop ──────────────────────────────────────────────── */ #drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 99; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } @media (max-width: 900px) { body.sidebar-open #drawer-backdrop { opacity: 1; pointer-events: auto; } } /* ── Bottom Tab-Bar (Mobile-Navigation) ───────────────────────────── */ .bottom-tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--bottombar-bg); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-top: 1px solid var(--topbar-border); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.06); } [data-theme="dark"] .bottom-tabbar { box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.4); } .tabbar-link { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--bottombar-h); padding: 6px 4px 8px; color: var(--text-muted); text-decoration: none; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; background: transparent; border: none; cursor: pointer; position: relative; transition: color 0.15s, transform 0.1s; font-family: var(--font-body); } .tabbar-link i { font-size: 22px; line-height: 1; } .tabbar-link span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabbar-link:active { transform: scale(0.94); } .tabbar-link.active { color: var(--color-primary); } .tabbar-link.active::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; background: var(--color-primary); border-radius: 0 0 3px 3px; } /* ── Bootstrap Buttons (Touch-Targets) ────────────────────────────── */ .btn { min-height: 40px; padding: 0.5rem 1rem; border-radius: var(--radius-sm); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn-sm { min-height: 34px; padding: 0.35rem 0.75rem; font-size: 13px; } .btn-lg { min-height: 48px; padding: 0.75rem 1.5rem; font-size: 15px; } /* Bootstrap .form-label, .form-text in tokens */ .form-label { color: var(--text-secondary); font-weight: 600; font-size: 13px; margin-bottom: 6px; } .form-text { color: var(--text-muted); font-size: 12.5px; } .invalid-feedback { color: var(--danger-text); font-size: 12.5px; } /* Context-Switcher kompakt */ .context-switcher { font-size: 13px; } .context-switcher select.form-select-sm { min-height: 36px; font-size: 14px !important; } .context-switcher label { white-space: nowrap; } /* ── Bottom-Sheet Modal auf Mobile ────────────────────────────────── */ @media (max-width: 700px) { .modal.fade .modal-dialog { transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); } .modal.show .modal-dialog { transform: translateY(0); } .modal-dialog { margin: 0 !important; max-width: 100% !important; width: 100% !important; min-height: 100vh; display: flex !important; align-items: flex-end; pointer-events: none; } .modal-dialog > * { pointer-events: auto; } .modal-content { border-radius: 18px 18px 0 0 !important; border-bottom: none !important; max-height: 92vh; width: 100%; padding-bottom: env(safe-area-inset-bottom); } /* Drag-Handle-Cue ganz oben */ .modal-content::before { content: ''; display: block; width: 42px; height: 4px; border-radius: 4px; background: var(--border-strong); margin: 10px auto 0; flex-shrink: 0; } .modal-header { padding: 12px 18px !important; border-bottom-color: var(--border) !important; } .modal-body { padding: 16px 18px !important; overflow-y: auto; } .modal-footer { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important; gap: 8px; } .modal-footer .btn { flex: 1 1 auto; min-height: 44px; } } /* ── Responsive: Mobile (<= 900px) ────────────────────────────────── */ @media (max-width: 900px) { /* Sidebar als Overlay, Default zu */ #sidebar { transform: translateX(-100%); box-shadow: none; width: min(86vw, 320px); } #main-wrapper { margin-left: 0; } /* sidebar-open schiebt Content NICHT — Sidebar ist Overlay */ body.sidebar-open #main-wrapper { margin-left: 0; } body.sidebar-open #sidebar { box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); } /* Bottom-Tab-Bar einblenden */ .bottom-tabbar { display: flex; align-items: stretch; } /* Platz unten freihalten, damit Content nicht hinter Tab-Bar verschwindet */ #main-wrapper { padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom)); } /* Topbar kompakter auf Mobile */ .topbar { padding: 0 10px; gap: 8px; } .topbar-breadcrumb { font-size: 13px; } .topbar-breadcrumb .breadcrumb-item:not(.active):not(:last-child) { display: none; } /* Auf Mobile: View-Toggle-Label hat eh kein Platz */ .view-toggle { padding: 0 8px; } .view-toggle-label { display: none; } /* ContextSwitcher schmal halten */ .context-switcher label { display: none; } .context-switcher select.form-select-sm { max-width: 140px; } } /* ── Mobile-Polish: Cards & Spacing (<= 640px) ────────────────────── */ @media (max-width: 640px) { /* Cards: weniger Radius, weniger Padding, näher an Edge-to-Edge */ .sm-card { border-radius: var(--radius-md); box-shadow: none; } .sm-card-header { padding: 12px 14px; } .sm-card-body { padding: 14px; } /* Stat-Cards kompakter */ .stat-card { padding: 14px 16px; } .stat-value { font-size: 26px; } /* Filter-Bar: Suchfeld nimmt volle Breite */ .filter-bar { gap: 8px; } .search-input-wrap { flex-basis: 100%; max-width: 100%; } /* Page-Header: Subtitle eine Zeile tiefer, Titel etwas kleiner */ .page-header { margin-bottom: 16px; } .page-title { font-size: 24px; } /* Action-Group in Listen: Wrap erlauben */ .action-group { row-gap: 8px; } /* Bottom-Sheet-Footer-Buttons schon im Bootstrap-Footer */ } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ── Mannschaften/Statistiken — Teilnahme-Matrix ──────────────────── */ .stat-filter .sm-form-label { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .stat-typ-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-surface); cursor: pointer; user-select: none; font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: background 0.12s, border-color 0.12s, color 0.12s; } .stat-typ-pill:hover { background: var(--bg-hover); } .stat-typ-pill input { display: none; } .stat-typ-pill.active { background: rgba(var(--color-primary-rgb), 0.10); border-color: var(--color-primary); color: var(--color-primary); } .stat-typ-pill i { font-size: 14px; } .stat-summary { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 10px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; } .stat-summary-item { color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; } .stat-summary-item i { color: var(--text-muted); } .stat-matrix-wrap { overflow-x: auto; max-height: 70vh; overflow-y: auto; } .stat-matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; } .stat-matrix thead th { position: sticky; top: 0; z-index: 3; background: var(--bg-secondary); border-bottom: 2px solid var(--border); padding: 8px 6px; text-align: center; font-weight: 600; white-space: nowrap; color: var(--text-secondary); } .stat-matrix tbody td { padding: 6px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; } .stat-matrix tbody tr:hover td { background: var(--bg-hover); } /* Sticky linke Spalten */ .stat-matrix .stat-col-name, .stat-matrix .stat-col-quote { position: sticky; background: var(--bg-surface); text-align: left; z-index: 2; } .stat-matrix thead .stat-col-name, .stat-matrix thead .stat-col-quote { background: var(--bg-secondary); z-index: 4; } .stat-matrix .stat-col-name { left: 0; min-width: 180px; max-width: 240px; } .stat-matrix .stat-col-quote { left: 180px; min-width: 140px; max-width: 180px; border-right: 1px solid var(--border); } .stat-name-cell { display: flex; align-items: center; gap: 8px; } .stat-avatar { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; } .stat-avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .stat-name-cell a { color: var(--text-primary); text-decoration: none; font-weight: 500; } .stat-name-cell a:hover { color: var(--color-primary); } .stat-quote-cell { position: relative; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--bg-secondary); overflow: hidden; min-height: 24px; } .stat-quote-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(var(--color-primary-rgb), 0.18); transition: width 0.3s; } .stat-quote-text { position: relative; font-weight: 600; font-size: 12.5px; } .stat-quote-text small { color: var(--text-muted); font-weight: 400; } .stat-quote-cell.stat-quote-high .stat-quote-bar { background: rgba(16,185,129,0.22); } .stat-quote-cell.stat-quote-mid .stat-quote-bar { background: rgba(245,158,11,0.22); } .stat-quote-cell.stat-quote-low .stat-quote-bar { background: rgba(239,68,68,0.22); } /* Event-Spalten — kompakt */ .stat-matrix .stat-col-event { min-width: 38px; max-width: 48px; font-size: 12px; } .stat-matrix thead .stat-col-event { padding: 8px 4px; } .stat-matrix thead .stat-col-event i { font-size: 13px; color: var(--text-muted); } .stat-col-date { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; } .stat-matrix tbody .stat-col-event i { font-size: 15px; } .stat-cell-yes i { color: #16a34a; } .stat-cell-no i { color: #dc2626; } .stat-cell-maybe i { color: #d97706; } .stat-cell-open i { color: #94a3b8; } .stat-cell-nn i { color: #64748b; } .stat-cell-other i { color: #0ea5e9; } [data-theme="dark"] .stat-cell-yes i { color: #4ade80; } [data-theme="dark"] .stat-cell-no i { color: #f87171; } [data-theme="dark"] .stat-cell-maybe i { color: #fbbf24; } [data-theme="dark"] .stat-cell-other i { color: #38bdf8; } @media (max-width: 768px) { .stat-matrix .stat-col-name { min-width: 140px; max-width: 160px; } .stat-matrix .stat-col-quote { left: 140px; min-width: 110px; max-width: 130px; } .stat-name-cell a { font-size: 12.5px; } .stat-quote-text { font-size: 11.5px; } } /* ── Events/Index — ausklappbare Roster-Zeile pro Event ─────────────── */ .event-roster-row td.event-roster-cell { padding: 0; background: var(--bg-secondary); border-top: none; cursor: default; } .event-roster-row:hover { background: transparent !important; } .event-roster-inner { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; } .event-roster-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .event-roster-avatar { width: 32px; height: 32px; font-size: 12px; flex-shrink: 0; } .event-roster-avatar-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .event-roster-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Roster nach Status gruppiert — Status-Tabs im aufgeklappten Event-Roster */ .event-roster-tabs { display: flex; flex-wrap: wrap; gap: 4px; border: 0; margin: 0; padding: 0; list-style: none; } .event-roster-tabs .nav-item { margin: 0; } .event-roster-tab { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; line-height: 1; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; } .event-roster-tab i { font-size: 14px; } .event-roster-tab .ert-tab-count { font-variant-numeric: tabular-nums; background: var(--bg-tertiary, #e5e7eb); color: var(--text-secondary); border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700; } .event-roster-tab.active { color: #fff; border-color: transparent; } .event-roster-tab.active .ert-tab-count { background: rgba(255,255,255,0.25); color: #fff; } /* Aktive Tab-Farbe je Status */ .event-roster-tab.ert-yes.active { background: #059669; } .event-roster-tab.ert-maybe.active { background: #d97706; } .event-roster-tab.ert-open.active { background: #64748b; } .event-roster-tab.ert-no.active { background: #dc2626; } .event-roster-tab.ert-other.active { background: #0284c7; } .event-roster-tab.ert-nn.active { background: #475569; } @media (max-width: 420px) { .event-roster-tab .ert-tab-label { display: none; } } .event-roster-tabcontent { margin-top: 2px; } .event-roster-tabcontent .tab-pane.active { display: flex; flex-direction: column; gap: 6px; } /* Card-View: Roster-Zeile spannt sich über die volle Grid-Breite */ body.data-view-cards .page-content table.sm-table:not(.no-card-view) tbody tr.event-roster-row { grid-column: 1 / -1; flex-direction: column; background: var(--bg-secondary); border: 1px solid var(--border); box-shadow: none; margin-top: -8px; } /* Eingeklappte Teilnehmer-Zeile belegt keinen Grid-Slot → erlaubt, dass mehrere Event-Cards je nach Breite nebeneinander liegen. Beim Ausklappen (.collapse.show / .collapsing) wird die Zeile wieder volle Breite sichtbar. */ body.data-view-cards .page-content table.sm-table:not(.no-card-view) tbody tr.event-roster-row:not(:has(.collapse.show)):not(:has(.collapsing)) { display: none; } body.data-view-cards .page-content table.sm-table:not(.no-card-view) tr.event-roster-row td.event-roster-cell { display: block; padding: 0; background: transparent; border: none; text-align: left; } body.data-view-cards .page-content tr.event-roster-row td.event-roster-cell::before { content: none; } /* ── Icon-Picker (wiederverwendbare Komponente) ───────────────────────── */ .icon-picker { position: relative; display: inline-block; min-width: 12rem; } .icon-picker-trigger { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; cursor: pointer; } .icon-picker-trigger > .bi:first-child { font-size: 1.15rem; } .icon-picker-empty { color: var(--text-muted); display: inline-flex; align-items: center; gap: .4rem; } .icon-picker-label { color: var(--text-secondary); } .icon-picker-caret { margin-left: auto; color: var(--text-muted); } .icon-picker-panel { /* Position/Breite werden inline als position:fixed gesetzt (icon-picker.js), damit das Panel nicht von Card-/Overflow-Containern abgeschnitten wird. */ z-index: 1080; padding: .6rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .icon-picker-search { margin-bottom: .5rem; } .icon-picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .25rem; max-height: 14rem; overflow-y: auto; } .icon-picker-cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; min-height: var(--tap); background: var(--bg-subtle); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-size: 1.2rem; color: var(--text-primary); } .icon-picker-cell:hover { background: var(--bg-hover); } .icon-picker-cell.active { border-color: var(--color-primary); color: var(--color-primary); } .icon-picker-none { grid-column: 1 / -1; color: var(--text-muted); padding: .5rem; text-align: center; } .icon-picker-clear { margin-top: .5rem; width: 100%; justify-content: center; } /* ============================================================ Stock-Bild-Auswahl (_StockBildPicker.cshtml / stock-picker.js) ============================================================ */ [x-cloak] { display: none !important; } .sm-stock-panel { border: 1px solid var(--border-color); border-radius: 12px; background: var(--surface); padding: 12px; } .sm-stock-hinweis { font-size: 12px; color: var(--text-secondary); background: var(--primary-bg); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; } .sm-stock-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .sm-chip { border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; transition: all .12s ease; } .sm-chip:hover { border-color: var(--color-primary); color: var(--color-primary); } .sm-stock-controls { display: flex; gap: 6px; margin-bottom: 8px; } .sm-stock-search { flex: 1; } .sm-stock-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .sm-toggle { border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); padding: 3px 10px; font-size: 12px; cursor: pointer; } .sm-toggle:first-child { border-radius: 8px 0 0 8px; } .sm-toggle:last-child { border-radius: 0 8px 8px 0; } .sm-toggle.active { background: var(--color-primary); color: var(--color-primary-foreground); border-color: var(--color-primary); } .sm-stock-status { font-size: 13px; color: var(--text-muted); padding: 6px 0; } .sm-stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; max-height: 340px; overflow-y: auto; } .sm-stock-item { position: relative; padding: 0; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 3 / 4; background: var(--primary-bg); } .sm-stock-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .sm-stock-item:hover { border-color: var(--color-primary); } .sm-stock-item:disabled { opacity: .6; cursor: default; } .sm-stock-badge { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.6); color: #fff; border-radius: 6px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 13px; } .sm-stock-cred { position: absolute; bottom: 0; left: 0; right: 0; font-size: 9px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); padding: 8px 4px 3px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .sm-stock-lade { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; } .sm-stock-mehr { text-align: center; margin-top: 10px; } .sm-stock-gewaehlt { display: inline-flex; align-items: center; vertical-align: middle; } .sm-stock-thumb-mini { width: 28px; height: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border-color); }