/* ============================================================ Sourcing Hub — Design System ============================================================ */ :root { color-scheme: light; /* Colors */ --color-primary: #2a8fa3; --color-primary-light: #3aa8be; --color-primary-hover: #1f7a8c; --color-secondary: #38a169; --color-danger: #e53e3e; --color-warning: #d69e2e; --color-info: #3182ce; --color-text: #1a202c; --color-text-muted: #718096; --color-border: #e2e8f0; --color-bg: #f7f8fa; --color-white: #ffffff; --color-card: #ffffff; /* Input-States (HI-befüllt / Pflichtfeld leer) */ --inp-hi-bg: #f0fdf4; --inp-hi-border: #86efac; --inp-req-bg: #fef2f2; --inp-req-border: #fca5a5; /* Status */ --color-new: #3182ce; --color-reviewed: #d69e2e; --color-exported: #38a169; --color-irrelevant: #718096; --color-running: #d69e2e; --color-completed: #38a169; --color-error: #e53e3e; /* Spacing */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; /* Border */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* Shadow */ --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05); /* Font */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Layout */ --container-max: 1280px; } @media (min-width: 1600px) { :root { --container-max: 1536px; } } @media (min-width: 1920px) { :root { --container-max: 1800px; } } @media (min-width: 2400px) { :root { --container-max: 2200px; } } /* ============================================================ Dark Mode ============================================================ */ /* Explizit dunkel: data-theme="dark" auf gesetzt */ [data-theme="dark"] { color-scheme: dark; --color-primary: #38b2cc; --color-primary-light: #4fc3d7; --color-primary-hover: #2a9ab3; --color-text: #e2e8f0; --color-text-muted: #94a3b8; --color-border: #2d3748; --color-bg: #0f1117; --color-white: #1a1d27; --color-card: #1a1d27; --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 4px 6px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2); --inp-hi-bg: #0a2318; --inp-hi-border: #166534; --inp-req-bg: #3b1212; --inp-req-border: #7f1d1d; } /* Auto: folgt Systemeinstellung, außer wenn explizit hell gewählt */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --color-primary: #38b2cc; --color-primary-light: #4fc3d7; --color-primary-hover: #2a9ab3; --color-text: #e2e8f0; --color-text-muted: #94a3b8; --color-border: #2d3748; --color-bg: #0f1117; --color-white: #1a1d27; --color-card: #1a1d27; --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 4px 6px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2); --inp-hi-bg: #0a2318; --inp-hi-border: #166534; --inp-req-bg: #3b1212; --inp-req-border: #7f1d1d; } } /* Dark Mode: Overrides für hardcodierte Farben (Badges, Alerts, Chips, Mode-Tiles) */ :is([data-theme="dark"], @media (prefers-color-scheme: dark) :root:not([data-theme="light"]):not([data-theme="dark"])) { } [data-theme="dark"] .badge-new, [data-theme="dark"] .badge-blue { background: #1e3a5f; color: #93c5fd; } [data-theme="dark"] .badge-reviewed, [data-theme="dark"] .badge-yellow { background: #3b2e0a; color: #fbbf24; } [data-theme="dark"] .badge-exported, [data-theme="dark"] .badge-completed, [data-theme="dark"] .badge-active, [data-theme="dark"] .badge-green { background: #14351f; color: #4ade80; } [data-theme="dark"] .badge-irrelevant, [data-theme="dark"] .badge-inactive, [data-theme="dark"] .badge-gray { background: #1f2937; color: #9ca3af; } [data-theme="dark"] .badge-error, [data-theme="dark"] .badge-red { background: #3b1212; color: #f87171; } [data-theme="dark"] .badge-running { background: #3b2e0a; color: #fbbf24; } [data-theme="dark"] .badge-orange { background: #3b1f0a; color: #fb923c; } [data-theme="dark"] .badge-purple { background: #2d1f5e; color: #c084fc; } [data-theme="dark"] .alert-warning { background: #2d2000; border-color: #78500a; color: #fbbf24; } [data-theme="dark"] .alert-info { background: #0c1f3b; border-color: #1d4ed8; color: #93c5fd; } [data-theme="dark"] .alert-success { background: #0a2318; border-color: #166534; color: #4ade80; } [data-theme="dark"] .alert-danger { background: #3b1212; border-color: #7f1d1d; color: #f87171; } [data-theme="dark"] .chip-pending { background: #1f2937 !important; border-color: #374151 !important; color: #9ca3af !important; } [data-theme="dark"] .chip-uploading { background: #0d2f38 !important; border-color: #2a7a8c !important; color: #38b2cc !important; } [data-theme="dark"] .chip-ok { background: #0a2318 !important; border-color: #166534 !important; color: #4ade80 !important; } [data-theme="dark"] .chip-duplicate { background: #2d2000 !important; border-color: #78500a !important; color: #fbbf24 !important; } [data-theme="dark"] .chip-skipped { background: #2a1500 !important; border-color: #7c3d12 !important; color: #fb923c !important; } [data-theme="dark"] .chip-error { background: #3b1212 !important; border-color: #7f1d1d !important; color: #f87171 !important; } [data-theme="dark"] .mode-tile-icon { filter: brightness(0.7); } [data-theme="dark"] .mode-tile.active { background: #0d2f38; } /* Formularfelder */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #1e2433; color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--color-text-muted); } /* Navigation: aktiver Punkt + Hover */ [data-theme="dark"] .nav-link.active { background: #0d2f38; color: var(--color-primary); } [data-theme="dark"] .nav-dropdown-btn.active { background: #0d2f38; color: var(--color-primary); } [data-theme="dark"] .nav-dropdown-menu a.active { background: #0d2f38; color: var(--color-primary); } [data-theme="dark"] .nav-dropdown-menu { background: var(--color-card); border-color: var(--color-border); } [data-theme="dark"] .nav-count-badge { background: #0d2f38; color: var(--color-primary); } /* Tabelle: Hover + Header */ [data-theme="dark"] tbody tr:hover td { background: #1e2433; } [data-theme="dark"] thead th { background: #1a1d27; border-color: var(--color-border); } /* Löschen-Button */ [data-theme="dark"] .btn-delete { background: #3b1212; border-color: #7f1d1d; } [data-theme="dark"] .btn-delete:hover { background: #4a1515; border-color: var(--color-danger); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .badge-new, :root:not([data-theme="light"]):not([data-theme="dark"]) .badge-blue { background: #1e3a5f; color: #93c5fd; } :root:not([data-theme="light"]):not([data-theme="dark"]) .badge-reviewed, :root:not([data-theme="light"]):not([data-theme="dark"]) .badge-yellow { background: #3b2e0a; color: #fbbf24; } :root:not([data-theme="light"]):not([data-theme="dark"]) .badge-exported, :root:not([data-theme="light"]):not([data-theme="dark"]) .badge-completed, :root:not([data-theme="light"]):not([data-theme="dark"]) .badge-active, :root:not([data-theme="light"]):not([data-theme="dark"]) .badge-green { background: #14351f; color: #4ade80; } :root:not([data-theme="light"]):not([data-theme="dark"]) .badge-irrelevant, :root:not([data-theme="light"]):not([data-theme="dark"]) .badge-inactive, :root:not([data-theme="light"]):not([data-theme="dark"]) .badge-gray { background: #1f2937; color: #9ca3af; } :root:not([data-theme="light"]):not([data-theme="dark"]) .badge-error, :root:not([data-theme="light"]):not([data-theme="dark"]) .badge-red { background: #3b1212; color: #f87171; } :root:not([data-theme="light"]):not([data-theme="dark"]) .badge-running { background: #3b2e0a; color: #fbbf24; } :root:not([data-theme="light"]):not([data-theme="dark"]) .badge-orange { background: #3b1f0a; color: #fb923c; } :root:not([data-theme="light"]):not([data-theme="dark"]) .badge-purple { background: #2d1f5e; color: #c084fc; } :root:not([data-theme="light"]):not([data-theme="dark"]) .alert-warning { background: #2d2000; border-color: #78500a; color: #fbbf24; } :root:not([data-theme="light"]):not([data-theme="dark"]) .alert-info { background: #0c1f3b; border-color: #1d4ed8; color: #93c5fd; } :root:not([data-theme="light"]):not([data-theme="dark"]) .alert-success { background: #0a2318; border-color: #166534; color: #4ade80; } :root:not([data-theme="light"]):not([data-theme="dark"]) .alert-danger { background: #3b1212; border-color: #7f1d1d; color: #f87171; } :root:not([data-theme="light"]):not([data-theme="dark"]) .chip-pending { background: #1f2937 !important; border-color: #374151 !important; color: #9ca3af !important; } :root:not([data-theme="light"]):not([data-theme="dark"]) .chip-uploading { background: #0d2f38 !important; border-color: #2a7a8c !important; color: #38b2cc !important; } :root:not([data-theme="light"]):not([data-theme="dark"]) .chip-ok { background: #0a2318 !important; border-color: #166534 !important; color: #4ade80 !important; } :root:not([data-theme="light"]):not([data-theme="dark"]) .chip-duplicate { background: #2d2000 !important; border-color: #78500a !important; color: #fbbf24 !important; } :root:not([data-theme="light"]):not([data-theme="dark"]) .chip-skipped { background: #2a1500 !important; border-color: #7c3d12 !important; color: #fb923c !important; } :root:not([data-theme="light"]):not([data-theme="dark"]) .chip-error { background: #3b1212 !important; border-color: #7f1d1d !important; color: #f87171 !important; } :root:not([data-theme="light"]):not([data-theme="dark"]) .mode-tile-icon { filter: brightness(0.7); } :root:not([data-theme="light"]):not([data-theme="dark"]) .mode-tile.active { background: #0d2f38; } /* Formularfelder */ :root:not([data-theme="light"]):not([data-theme="dark"]) input, :root:not([data-theme="light"]):not([data-theme="dark"]) select, :root:not([data-theme="light"]):not([data-theme="dark"]) textarea { background: #1e2433; color: var(--color-text); border-color: var(--color-border); } :root:not([data-theme="light"]):not([data-theme="dark"]) input::placeholder, :root:not([data-theme="light"]):not([data-theme="dark"]) textarea::placeholder { color: var(--color-text-muted); } /* Navigation */ :root:not([data-theme="light"]):not([data-theme="dark"]) .nav-link.active { background: #0d2f38; color: var(--color-primary); } :root:not([data-theme="light"]):not([data-theme="dark"]) .nav-dropdown-btn.active { background: #0d2f38; color: var(--color-primary); } :root:not([data-theme="light"]):not([data-theme="dark"]) .nav-dropdown-menu a.active { background: #0d2f38; color: var(--color-primary); } :root:not([data-theme="light"]):not([data-theme="dark"]) .nav-dropdown-menu { background: var(--color-card); border-color: var(--color-border); } :root:not([data-theme="light"]):not([data-theme="dark"]) .nav-count-badge { background: #0d2f38; color: var(--color-primary); } /* Tabelle */ :root:not([data-theme="light"]):not([data-theme="dark"]) tbody tr:hover td { background: #1e2433; } :root:not([data-theme="light"]):not([data-theme="dark"]) thead th { background: #1a1d27; border-color: var(--color-border); } /* Löschen-Button */ :root:not([data-theme="light"]):not([data-theme="dark"]) .btn-delete { background: #3b1212; border-color: #7f1d1d; } :root:not([data-theme="light"]):not([data-theme="dark"]) .btn-delete:hover { background: #4a1515; border-color: var(--color-danger); } } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--color-bg); color: var(--color-text); font-size: 14px; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } .main-container { flex: 1; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font: inherit; } input, select, textarea { font: inherit; } /* ---- Header ---- */ .app-header { background: var(--color-white); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); } .header-container { max-width: var(--container-max); margin: 0; padding: 0 var(--spacing-xl); display: flex; align-items: center; height: 56px; gap: var(--spacing-xl); } .header-logo { display: flex; align-items: center; gap: var(--spacing-sm); } .header-logo-text { font-weight: var(--font-weight-bold); font-size: 15px; color: var(--color-text); } .header-nav { display: flex; gap: var(--spacing-xs); flex: 1; } .nav-link { display: flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-md); color: var(--color-text-muted); font-weight: var(--font-weight-medium); font-size: 13px; transition: background .15s, color .15s; } .nav-link:hover { background: var(--color-bg); color: var(--color-text); } .nav-link.active { background: #e6f6f9; color: var(--color-primary); } .nav-count-badge { margin-left:3px;font-size:10px;background:#e6f6f9;border-radius:10px;padding:1px 6px;color:var(--color-primary); } .header-actions { margin-left: auto; } /* ---- Main Layout ---- */ .main-container { max-width: var(--container-max); margin: 0; padding: var(--spacing-xl) var(--spacing-xl); } .footer-container { max-width: var(--container-max); margin: 0; padding: 0 var(--spacing-xl); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-sm); } .page-title { font-size: 24px; font-weight: var(--font-weight-bold); margin: 0 0 var(--spacing-xs); } .page-subtitle { color: var(--color-text-muted); margin: 0 0 var(--spacing-xl); font-size: 13px; } /* ---- Pipeline Stage Bar ---- */ .pipeline-stages { display: flex; align-items: center; overflow-x: auto; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-sm) var(--spacing-md); gap: 0; } .pipeline-stage-link { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap; flex-shrink: 0; color: var(--color-text-muted); font-size: 12px; transition: background .15s; } .pipeline-stage-link:hover { background: var(--color-bg); } .pipeline-stage-link.active { color: #fff; } .pipeline-stage-sep { width: 24px; height: 1px; flex-shrink: 0; margin: 0 4px; background: var(--color-border); } .pipeline-stage-count { font-size: 10px; padding: 1px 6px; border-radius: 10px; background: var(--color-bg); color: var(--color-text-muted); } .pipeline-stage-link.active .pipeline-stage-count { background: rgba(255,255,255,.25); color: #fff; } /* ---- Cards ---- */ .card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); box-shadow: var(--shadow-sm); } .card-title { font-size: 15px; font-weight: var(--font-weight-semibold); margin: 0 0 var(--spacing-md); } .card-subtitle { font-size: 12px; color: var(--color-text-muted); margin: calc(-1 * var(--spacing-xs)) 0 var(--spacing-md); } /* ---- Grid ---- */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); } @media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* ---- Burger / Mobile Nav ---- */ .burger-btn { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text-muted); margin-left: auto; } .burger-btn:hover { background: var(--color-bg); color: var(--color-text); } @media (max-width: 768px) { /* Header */ .header-container { gap: var(--spacing-md); } .header-nav { display: none; position: absolute; top: 56px; left: 0; right: 0; background: var(--color-white); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md); flex-direction: column; gap: 0; padding: var(--spacing-sm); z-index: 99; } .header-nav.open { display: flex; } .nav-link { padding: var(--spacing-sm) var(--spacing-md); } .burger-btn { display: flex; } .header-actions .version-badge { display: none; } /* Layout */ .main-container { padding: var(--spacing-md); } .page-title { font-size: 20px; } .card { padding: var(--spacing-md); } /* Inline grids → single column */ div[style*="grid-template-columns:repeat(3,1fr)"], div[style*="grid-template-columns:repeat(3, 1fr)"], div[style*="grid-template-columns:repeat(5,1fr)"], div[style*="grid-template-columns:repeat(4,1fr)"], div[style*="grid-template-columns:1fr 1fr"], div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } /* Tables: horizontally scrollable */ table { display: block; overflow-x: auto; white-space: nowrap; } thead, tbody, tr { min-width: max-content; } .table-wrap { overflow-x: auto; } /* Allgemeine Scroll-Container: nichts überschreiben (Flow-Diagramm via .flow-diagram Klasse) */ /* Footer */ footer > div { flex-direction: column !important; align-items: center !important; text-align: center; } footer { padding: var(--spacing-md) !important; } /* Stat row */ .stat-row { flex-wrap: wrap; gap: var(--spacing-md); } /* Filter form */ .filter-row { flex-direction: column; } .filter-group.grow input { min-width: 100%; width: 100%; } /* Workflow cards */ .workflow-cards { grid-template-columns: 1fr; } /* Flow-Diagramm: vertikal stapeln statt horizontal scrollen */ .flow-diagram { flex-direction: column; gap: 0; overflow-x: visible; } .flow-step { flex-direction: column; align-items: flex-start; } .flow-step .flow-arrow { transform: rotate(90deg); align-self: flex-start; padding: 2px 0 2px 14px; } /* Docs: langer Text umbrechen */ .card code, .card pre { overflow-x: auto; display: block; white-space: pre-wrap; word-break: break-all; } div[style*="overflow-x:auto"][style*="font-size:12px"] { overflow-x: auto !important; } } /* ---- Flow Diagram ---- */ .flow-diagram { display: flex; align-items: stretch; gap: 0; overflow-x: auto; } .flow-arrow { flex-shrink: 0; } /* ---- Docs ---- */ .docs-content { overflow-wrap: break-word; word-break: break-word; } /* ---- Beta Badge ---- */ .beta-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; background: #fefce8; color: #a16207; border: 1px solid #fde047; user-select: none; flex-shrink: 0; } /* ---- Footer ---- */ .footer-powered-link { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--color-text-muted); text-decoration: none; white-space: nowrap; } .footer-powered-link:hover { color: var(--color-primary); } /* ---- Stat Numbers ---- */ .stat-number { font-size: 36px; font-weight: var(--font-weight-bold); color: var(--color-primary); line-height: 1; } .stat-number.green { color: var(--color-secondary); } .stat-label { font-size: 12px; color: var(--color-text-muted); margin-top: var(--spacing-xs); } .stat-row { display: flex; gap: var(--spacing-xl); margin-bottom: var(--spacing-lg); } /* ---- Badges / Status ---- */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--spacing-sm); border-radius: var(--radius-full); font-size: 11px; font-weight: var(--font-weight-semibold); white-space: nowrap; } .badge-new { background: #ebf8ff; color: var(--color-new); } .badge-reviewed { background: #fffff0; color: var(--color-reviewed); } .badge-exported { background: #f0fff4; color: var(--color-exported); } .badge-irrelevant { background: #f7fafc; color: var(--color-irrelevant); } .badge-running { background: #fffff0; color: var(--color-running); } .badge-completed { background: #f0fff4; color: var(--color-completed); } .badge-error { background: #fff5f5; color: var(--color-error); } .badge-active { background: #f0fff4; color: var(--color-completed); } .badge-inactive { background: #f7fafc; color: var(--color-irrelevant); } /* Color-Aliases */ .badge-green { background: #f0fff4; color: #276749; } .badge-blue { background: #ebf8ff; color: #2b6cb0; } .badge-yellow { background: #fffff0; color: #744210; } .badge-gray { background: #f7fafc; color: #718096; } .badge-red { background: #fff5f5; color: #c53030; } .badge-orange { background: #fffaf0; color: #c05621; } .badge-purple { background: #f5f0ff; color: #6b46c1; } /* ---- Workflow List ---- */ .workflow-list { list-style: none; margin: 0; padding: 0; } .workflow-item { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-border); font-size: 13px; } .workflow-item:last-child { border-bottom: none; } .workflow-name { color: var(--color-text); } .workflow-count { background: var(--color-bg); border-radius: var(--radius-full); padding: 2px var(--spacing-sm); font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--color-text-muted); } /* ---- Progress Bar ---- */ .progress-bar-wrap { background: var(--color-border); border-radius: var(--radius-full); height: 8px; overflow: hidden; } .progress-bar { height: 100%; border-radius: var(--radius-full); background: var(--color-secondary); transition: width .3s; } .progress-bar.error { background: var(--color-danger); } .progress-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-muted); margin-top: 4px; } /* ---- Run Detail ---- */ .run-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .run-meta-item label { display: block; font-size: 11px; color: var(--color-text-muted); margin-bottom: 2px; } .run-meta-item span { font-weight: var(--font-weight-semibold); font-size: 14px; } /* ---- Table ---- */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } thead th { text-align: left; padding: var(--spacing-sm) var(--spacing-md); border-bottom: 2px solid var(--color-border); font-weight: var(--font-weight-semibold); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); } tbody td { padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--color-border); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: #f8f9fa; } .text-muted { color: var(--color-text-muted); } .text-sm { font-size: 12px; } /* ---- List Controls (zentral für alle Listen) ---- */ /* Einheitliche Filter-/Suchleiste im Card-Kopf (ersetzt list-search + list-filters) */ .table-filter-bar { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; align-items: center; padding: var(--spacing-sm) var(--spacing-lg); border-bottom: 1px solid var(--color-border); background: var(--color-bg); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .table-filter-bar .tfb-label { font-size: 11px; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); white-space: nowrap; } .table-filter-bar input[type="text"], .table-filter-bar select { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 12px; background: var(--color-card); color: var(--color-text); transition: border-color .15s; } .table-filter-bar input[type="text"]:focus, .table-filter-bar select:focus { outline: none; border-color: var(--color-primary-light); } .table-filter-bar input[type="text"] { width: 180px; } .table-filter-bar .tfb-search { display: flex; align-items: center; gap: 5px; } .table-filter-bar .tfb-count { margin-left: auto; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; } /* Legacy — beibehalten für Stellen die noch nicht migriert sind */ .list-search { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-md) var(--spacing-lg); margin-bottom: var(--spacing-sm); box-shadow: var(--shadow-sm); display: flex; gap: var(--spacing-sm); align-items: center; } .list-search input[type="text"] { flex: 1; padding: 6px var(--spacing-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-white); font-size: 13px; color: var(--color-text); transition: border-color .15s; } .list-search input[type="text"]:focus { outline: none; border-color: var(--color-primary-light); } .list-filters { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-md) var(--spacing-lg); margin-bottom: var(--spacing-lg); box-shadow: var(--shadow-sm); display: flex; gap: var(--spacing-md); flex-wrap: wrap; align-items: flex-end; } .list-filters select { padding: 6px var(--spacing-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-card); font-size: 13px; color: var(--color-text); transition: border-color .15s; } .list-filters select:focus { outline: none; border-color: var(--color-primary-light); } .list-filter-group { display: flex; flex-direction: column; gap: 4px; } .list-filter-group label { font-size: 11px; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); } /* Sortierbare Spaltenheader */ .th-sort { cursor: pointer; user-select: none; white-space: nowrap; } .th-sort a { color: var(--color-text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .th-sort a:hover { color: var(--color-text); } .th-sort.active a { color: var(--color-primary); } .th-sort .sort-icon { font-size: 10px; opacity: .5; } .th-sort.active .sort-icon { opacity: 1; } /* Pagination (zentral) */ .list-pagination { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-text-muted); } /* Filter Form (legacy, beibehalten für Kompatibilität) ---- */ .filter-form { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); box-shadow: var(--shadow-sm); } .filter-row { display: flex; gap: var(--spacing-md); flex-wrap: wrap; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 4px; } .filter-group label { font-size: 12px; font-weight: var(--font-weight-medium); color: var(--color-text-muted); } .filter-group input, .filter-group select { padding: 6px var(--spacing-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-card); font-size: 13px; color: var(--color-text); transition: border-color .15s; } .filter-group input:focus, .filter-group select:focus { outline: none; border-color: var(--color-primary-light); } .filter-group.grow input { min-width: 280px; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 7px var(--spacing-md); border-radius: var(--radius-sm); font-size: 13px; font-weight: var(--font-weight-medium); border: 1px solid transparent; transition: all .15s; } .btn-primary { background: var(--color-primary); color: var(--color-white); } .btn-primary:hover { background: var(--color-primary-hover); } .btn-secondary { background: var(--color-white); color: var(--color-text); border-color: var(--color-border); } .btn-secondary:hover { background: var(--color-bg); } .btn-sm { padding: 4px var(--spacing-sm); font-size: 12px; } .btn-danger { background: var(--color-danger); color: var(--color-white); } /* Standardmuster für Löschen-Buttons: immer mit Icon + Text + onsubmit confirm() */ .btn-delete { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 12px; font: inherit; border: 1px solid #fecaca; border-radius: var(--radius-sm); background: #fff5f5; color: var(--color-danger); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; } .btn-delete:hover { background: #fee2e2; border-color: var(--color-danger); } /* ---- Pagination ---- */ .pagination { display: flex; align-items: center; gap: var(--spacing-xs); justify-content: center; margin-top: var(--spacing-lg); } .pagination a, .pagination span { padding: 5px 10px; border-radius: var(--radius-sm); font-size: 13px; border: 1px solid var(--color-border); } .pagination a:hover { background: var(--color-bg); } .pagination .active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .pagination .disabled { color: var(--color-text-muted); cursor: default; } /* ---- n8n Workflow Cards ---- */ .workflow-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-md); } .workflow-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-md); box-shadow: var(--shadow-sm); } .workflow-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-sm); } .workflow-card-name { font-weight: var(--font-weight-semibold); font-size: 14px; } .workflow-card-meta { font-size: 12px; color: var(--color-text-muted); } .workflow-card-stats { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-sm); font-size: 12px; } .stat-ok { color: var(--color-completed); } .stat-fail { color: var(--color-danger); } .stat-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-sm) var(--spacing-md); min-width: 100px; } .stat-card .stat-value { font-size: 24px; font-weight: var(--font-weight-bold); color: var(--color-primary); line-height: 1; } .stat-card .stat-label { font-size: 12px; color: var(--color-text-muted); margin-top: var(--spacing-xs); } /* ---- Upload-Chips ---- */ .chip { display:inline-flex;align-items:center;gap:5px;font-size:12px;border-radius:var(--radius-full);padding:3px 8px;border:1px solid; } .chip-pending { background:#f3f4f6; border-color:#d1d5db; color:#6b7280; } .chip-uploading { background:#e6f6f9; border-color:#b2dfe8; color:var(--color-primary); } .chip-ok { background:#f0fdf4; border-color:#86efac; color:#16a34a; } .chip-duplicate { background:#fffbeb; border-color:#fcd34d; color:#92400e; } .chip-skipped { background:#fff7ed; border-color:#fdba74; color:#c2410c; } .chip-error { background:#fef2f2; border-color:#fecaca; color:#dc2626; } /* ---- Alert / Notice ---- */ .alert { padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-md); margin-bottom: var(--spacing-lg); font-size: 13px; line-height: 1.5; } .alert-warning { background: #fffff0; border: 1px solid #f6e05e; color: #744210; } .alert-info { background: #ebf8ff; border: 1px solid #90cdf4; color: #2c5282; } .alert-success { background: #f0fff4; border: 1px solid #9ae6b4; color: #276749; } .alert-danger { background: #fef2f2; border: 1px solid #fecaca; color: var(--color-danger); } /* ---- Empty State ---- */ .empty-state { text-align: center; padding: var(--spacing-2xl) var(--spacing-xl); color: var(--color-text-muted); } .empty-state i { display: block; font-size: 32px; margin-bottom: var(--spacing-md); opacity: .4; } /* ---- Result count ---- */ .result-count { font-size: 13px; color: var(--color-text-muted); margin-bottom: var(--spacing-md); } /* ---- Nav Dropdown ---- */ .nav-dropdown { position: relative; } .nav-dropdown-btn { display: flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-md); color: var(--color-text-muted); font-weight: var(--font-weight-medium); font-size: 13px; background: none; border: none; cursor: pointer; transition: background .15s, color .15s; } .nav-dropdown-btn:hover { background: var(--color-bg); color: var(--color-text); } .nav-dropdown-btn.active { background: #e6f6f9; color: var(--color-primary); } .nav-dropdown-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width: 180px; z-index: 150; padding: 4px 0; white-space: nowrap; } .nav-dropdown-menu.open { display: block; } .nav-dropdown-menu a { display: flex; align-items: center; gap: var(--spacing-sm); padding: 8px var(--spacing-md); font-size: 13px; color: var(--color-text); text-decoration: none; transition: background .1s; } .nav-dropdown-menu a:hover { background: var(--color-bg); } .nav-dropdown-menu a.active { color: var(--color-primary); background: #e6f6f9; } @media (max-width: 768px) { .nav-dropdown-menu { position: static; display: block; box-shadow: none; border: none; border-left: 2px solid var(--color-border); margin-left: var(--spacing-md); padding: 0; border-radius: 0; } .nav-dropdown-btn { width: 100%; } } /* ── Inline Editing ──────────────────────────────────────────────────────── */ .ie-cell { cursor: text; border-radius: 3px; transition: background .1s; padding: 5px 0; font-size: 13px; } .ie-cell:hover { background: rgba(42,143,163,.06); } .ie-cell.ie-editing { background: transparent; cursor: default; } .ie-input { width: 100%; padding: 3px 7px; border: 1px solid var(--color-primary); border-radius: 3px; font-size: 13px; background: var(--color-card); outline: none; box-shadow: 0 0 0 2px rgba(42,143,163,.15); font-family: inherit; } .ie-input[data-monospace] { font-family: monospace; } textarea.ie-input { resize: vertical; min-height: 60px; } .ie-save-btn { padding: 3px 10px; font-size: 12px; display: none; /* hidden until needed */ align-items: center; gap: 4px; transition: background .2s, color .2s, border-color .2s; } .ie-save-btn.ie-editing-active { display: flex; /* show while a field is being edited */ } .ie-save-btn.ie-saved { display: flex; background: #16a34a !important; color: #fff !important; border-color: #16a34a !important; } .ie-save-btn.ie-error { display: flex; background: #dc2626 !important; color: #fff !important; border-color: #fca5a5 !important; } /* ---- Bulk Action Bar ---- */ .bulk-action-bar { display: none; position: fixed; bottom: 24px; left: 0; right: 0; margin-left: auto; margin-right: auto; width: fit-content; z-index: 500; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 10px 16px; align-items: center; gap: 16px; white-space: nowrap; min-width: 480px; max-width: calc(100vw - 48px); } .bulk-action-bar.visible { display: flex; } /* Row highlight when checked */ tr.bulk-selected td { background: #f0f9ff; } [data-theme="dark"] tr.bulk-selected td { background: #0d2535; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) tr.bulk-selected td { background: #0d2535; } } /* Checkbox column */ .th-bulk-check, .td-bulk-check { width: 36px; padding-left: var(--spacing-md) !important; padding-right: 0 !important; }