/* ==========================================================================
Design Tokens — KS21 Verwaltung Design System
Single source of truth for color. See DESIGN_CATALOG.md for usage rules.
Everything below reads these variables instead of literal colors so that
light/dark theming and future brand-color changes happen in one place.
========================================================================== */
:root {
/* Brand accent (orange, from the logo) - replaces the legacy PrimeNG-era green */
--color-accent: #f97316;
--color-accent-rgb: 249, 115, 22;
--color-accent-hover: #ea580c;
--color-accent-active: #c2410c;
--color-accent-lighter: #fff7ed;
--color-accent-light: #ffedd5;
--color-accent-contrast: #ffffff;
/* Neutral surfaces & text (light theme) */
--color-bg: #f9fafb;
--color-surface: #ffffff;
--color-surface-alt: #f3f4f6;
--color-border: #e5e7eb;
--color-border-strong: #d1d5db;
--color-text: #111827;
--color-text-secondary: #374151;
--color-text-muted: #6b7280;
--color-text-faint: #9ca3af;
/* Semantic status colors - meaning stays constant across themes */
--color-success: #10b981;
--color-success-strong: #047857;
--color-warning: #f59e0b;
--color-danger: #ef4444;
--color-info: #3b82f6;
--color-tag-purple: #9333ea;
color-scheme: light;
}
:root[data-theme="dark"] {
--color-accent: #fb923c;
--color-accent-rgb: 251, 146, 60;
--color-accent-hover: #f97316;
--color-accent-active: #ea580c;
--color-accent-lighter: #431407;
--color-accent-light: #7c2d12;
--color-accent-contrast: #1c1006;
--color-bg: #15171b;
--color-surface: #1e2126;
--color-surface-alt: #262a31;
--color-border: #33373e;
--color-border-strong: #454a52;
--color-text: #e5e7eb;
--color-text-secondary: #cbd5e1;
--color-text-muted: #9ca3af;
--color-text-faint: #71767f;
--color-success: #34d399;
--color-success-strong: #6ee7b7;
--color-warning: #fbbf24;
--color-danger: #f87171;
--color-info: #60a5fa;
--color-tag-purple: #c084fc;
color-scheme: dark;
}
html, body {
background-color: var(--color-bg);
color: var(--color-text);
}
body {
transition: background-color 0.2s ease, color 0.2s ease;
}
/* Essential Blazor Error Boundary - Cannot be replaced with Tailwind easily */
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI6NjMuNTc2IDg2LjA1NDdaIiBmaWxsPSIjRkZFNTAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L2c+PC9zdmc+) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
/* Dashboard Component Styles */
.section-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--color-accent);
display: inline-block;
}
.stat-card {
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 1.25rem;
background: var(--color-surface);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.stat-card:hover {
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
transform: translateY(-2px);
}
.stat-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.stat-info { flex: 1; }
.stat-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-muted);
margin: 0 0 0.5rem 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.stat-value {
font-size: 2rem;
font-weight: 800;
margin: 0;
line-height: 1.2;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--color-text);
}
.stat-description {
font-size: 0.875rem;
color: var(--color-text-faint);
margin: 0.25rem 0 0 0;
}
.stat-icon {
padding: 0.75rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
min-width: 3rem;
min-height: 3rem;
}
.stat-link {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.25rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-accent);
text-decoration: none;
padding-top: 0.75rem;
border-top: 1px solid var(--color-surface-alt);
transition: color 0.2s ease;
}
.stat-link:hover { color: var(--color-accent-hover); }
.portal-card { padding: 1rem; }
.portal-card .stat-value { font-size: 1.5rem; }
.portal-card .stat-icon { min-width: 2.5rem; min-height: 2.5rem; padding: 0.5rem; }
.portal-card .stat-label { font-size: 0.75rem; margin-bottom: 0.25rem; }
.portal-link {
display: inline-flex;
align-items: center;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-accent);
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
background: var(--color-accent-lighter);
transition: all 0.2s ease;
}
.portal-link:hover { background: var(--color-accent-light); color: var(--color-accent-hover); }
.health-app-tile {
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-border-strong);
border-radius: 0.5rem;
background: var(--color-surface);
padding: 0.75rem 0.875rem;
transition: border-color 0.2s ease;
}
.health-app-tile.is-up { border-left-color: var(--color-success); }
.health-app-tile.is-down { border-left-color: var(--color-danger); }
.health-app-tile-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
}
.health-app-name {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text);
}
.health-app-status {
font-size: 0.6875rem;
font-weight: 600;
white-space: nowrap;
}
.health-app-status.is-up { color: var(--color-success); }
.health-app-status.is-down { color: var(--color-danger); }
.health-app-status.is-unknown { color: var(--color-text-faint); }
.health-app-tile.is-unavailable { border-left-color: var(--color-border-strong); }
.health-app-meta {
font-size: 0.75rem;
color: var(--color-text-faint);
margin: 0.25rem 0 0 0;
}
.health-app-error {
font-size: 0.75rem;
color: var(--color-danger);
margin: 0.25rem 0 0 0;
}
.health-app-metric-value {
font-size: 0.9375rem;
font-weight: 700;
color: var(--color-text);
white-space: nowrap;
}
.health-status-details { margin-top: 0.625rem; }
.health-status-summary {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-muted);
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 0.25rem;
user-select: none;
}
.health-status-summary::-webkit-details-marker { display: none; }
.health-status-summary::before {
content: "▸";
font-size: 0.625rem;
transition: transform 0.15s ease;
}
.health-status-details[open] > .health-status-summary::before { transform: rotate(90deg); }
.health-status-summary-count { color: var(--color-text-faint); font-weight: 500; }
.health-status-list {
list-style: none;
margin: 0.5rem 0 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.health-status-item { border-top: 1px solid var(--color-surface-alt); padding-top: 0.375rem; }
.health-status-item:first-child { border-top: none; padding-top: 0; }
.health-status-item-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.health-status-badge {
font-size: 0.6875rem;
font-weight: 600;
padding: 0.0625rem 0.5rem;
border-radius: 999px;
}
.health-status-count {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-secondary);
}
.health-status-endpoints {
list-style: none;
margin: 0.375rem 0 0 0;
padding: 0 0 0 0.75rem;
border-left: 2px solid var(--color-surface-alt);
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.health-status-endpoint {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.6875rem;
color: var(--color-text-faint);
}
.health-status-endpoint-name {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
overflow-wrap: anywhere;
}
.health-status-endpoint-count { color: var(--color-text-muted); font-weight: 600; white-space: nowrap; }
.health-job-group { margin-bottom: 1.5rem; }
.health-job-group:last-child { margin-bottom: 0; }
.health-job-group-title {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary);
margin: 0 0 0.5rem 0;
}
.health-job-list {
border: 1px solid var(--color-border);
border-radius: 0.625rem;
background: var(--color-surface);
overflow: hidden;
}
.health-job-row {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--color-surface-alt);
}
.health-job-row:last-child { border-bottom: none; }
.health-job-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
.health-job-dot.is-success { background: var(--color-success); }
.health-job-dot.is-failed { background: var(--color-danger); }
.health-job-dot.is-unknown { background: var(--color-text-faint); }
.health-job-main { flex: 1; min-width: 0; }
.health-job-name {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text);
margin: 0;
}
.health-job-error {
font-size: 0.75rem;
color: var(--color-danger);
margin: 0.125rem 0 0 0;
}
.health-job-status {
font-size: 0.6875rem;
font-weight: 600;
border-radius: 999px;
padding: 0.1875rem 0.625rem;
white-space: nowrap;
}
.health-job-status.is-success { color: #166534; background: #f0fdf4; }
.health-job-status.is-failed { color: #991b1b; background: #fef2f2; }
.health-job-status.is-unknown { color: var(--color-text-secondary); background: var(--color-surface-alt); }
[data-theme="dark"] .health-job-status.is-success { color: #34d399; background: rgba(16, 185, 129, 0.18); }
[data-theme="dark"] .health-job-status.is-failed { color: #fca5a5; background: rgba(153, 27, 27, 0.35); }
.health-job-right {
text-align: right;
font-size: 0.75rem;
color: var(--color-text-faint);
min-width: 150px;
}
.stat-card {
animation: fadeIn 0.5s ease-out forwards;
}
.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.2s; }
.stat-card:nth-child(5) { animation-delay: 0.25s; }
.stat-card:nth-child(6) { animation-delay: 0.3s; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Global fix for unwanted focus outlines on non-interactive elements */
/* This prevents the black border issue on page titles during Blazor app startup */
div:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]),
span:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]),
p:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]),
h1:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]),
h2:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]),
h3:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]),
h4:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]),
h5:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]),
h6:not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]) {
outline: none !important;
-webkit-tap-highlight-color: transparent;
}
/* Ensure focus styles are completely removed for title elements during page load */
.text-3xl:focus,
.text-2xl:focus,
.text-xl:focus,
.font-bold:focus {
outline: none !important;
box-shadow: none !important;
border: none !important;
background: none !important;
}
/* Prevent any element from showing unwanted focus styles unless it's interactive */
*:not(input):not(button):not(a):not(select):not(textarea):not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]) {
outline: none !important;
-webkit-tap-highlight-color: transparent;
}
*:not(input):not(button):not(a):not(select):not(textarea):not([tabindex]):not([contenteditable]):not([role="button"]):not([role="link"]):focus {
outline: none !important;
box-shadow: none !important;
border: inherit !important;
}
/* Logo and title styling */
.ks21-logo-link {
display: flex;
align-items: center;
gap: 0.75rem;
margin-right: 1.5rem;
text-decoration: none;
}
.ks21-logo {
height: 36px;
width: 36px;
border-radius: 0.5rem;
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
padding: 4px;
box-shadow: 0 2px 8px rgb(249 115 22 / 0.3);
}
.ks21-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text-secondary);
}
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.login-card {
background: var(--color-surface);
padding: 2rem;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
text-align: center;
max-width: 400px;
}
.login-card h1 {
color: #2c3e50;
margin-bottom: 1rem;
}
.login-card p {
color: #666;
margin-bottom: 1.5rem;
}
.app-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.plain-layout-container {
width: 100%;
min-height: 100vh;
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.page-content {
flex: 1;
overflow-y: auto;
padding: 1.5rem;
margin-top: 1rem;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
margin-bottom: 1.5rem;
border-left: 4px solid var(--color-accent);
padding-left: 1rem;
}
.header-content {
display: flex;
flex-direction: column;
gap: 0.25rem;
border: none !important;
}
.header-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-accent);
margin: 0;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
.header-subtitle {
font-size: 1rem;
color: var(--color-text-muted);
margin: 0;
}
.header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.e-grid .e-toolbar,
.e-grid .e-toolbar .e-toolbar-items,
.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item,
.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item button {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
}
.e-grid .e-tbar-btn .e-icons,
.e-grid .e-toolbar-items .e-toolbar-item .e-tbar-btn {
background: transparent;
}
/* ==========================================================================
Grid Toolbar (Components/Shared/GridToolbar.razor)
========================================================================== */
.ks21-grid-toolbar.e-toolbar {
min-height: 64px;
}
.ks21-grid-toolbar .e-toolbar-items {
align-items: center;
height: 100%;
}
.ks21-grid-toolbar .e-toolbar-items .e-toolbar-item {
display: flex;
align-items: center;
margin: 0 1rem 0 0;
}
.ks21-grid-toolbar .e-toolbar-items .e-toolbar-item:last-child {
margin-right: 0;
}
.ks21-toolbar-search {
position: relative;
display: flex;
align-items: center;
}
.ks21-toolbar-search-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: var(--color-text-muted);
pointer-events: none;
z-index: 1;
}
.ks21-toolbar-search-input.e-input-group {
padding-left: 2.25rem;
border-radius: 9999px;
background-color: var(--color-surface-alt);
}
.ks21-toolbar-search-input.e-input-group.e-input-focus {
background-color: var(--color-surface);
box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
}
.ks21-toolbar-multiselect.e-multiselect.e-input-group {
flex-wrap: nowrap;
overflow: hidden;
}
.ks21-toolbar-multiselect .e-delim-values,
.ks21-toolbar-multiselect .e-delim-values .e-delimeter {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ks21-toolbar-checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.875rem;
color: var(--color-text-secondary);
white-space: nowrap;
}
.ks21-toolbar-checkbox input[type="checkbox"] {
accent-color: var(--color-accent);
}
/* Syncfusion tooltip popups are appended to , so these stay unscoped. */
.ks21-group-tooltip.e-tooltip-wrap.e-popup {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
max-width: 22rem;
}
.ks21-group-tooltip.e-tooltip-wrap .e-tip-content {
padding: 0;
line-height: normal;
}
.ks21-group-tooltip.e-tooltip-wrap .e-tooltip-close {
background-color: var(--color-surface);
border-color: var(--color-border);
}
.e-grid .e-gridcontent .e-table tbody tr:nth-child(odd) {
background-color: var(--color-surface);
}
.e-grid .e-gridcontent .e-table tbody tr:nth-child(even) {
background-color: var(--color-surface-alt);
}
/* Must differ from BOTH zebra-stripe tones (--color-surface on odd rows,
--color-surface-alt on even rows) so hover is visible on either row -
--color-border sits one step further, past both. Selection uses the next
step up again so it stays visually distinct from a mere hover. */
.e-grid .e-row:hover .e-rowcell {
background-color: var(--color-border) !important;
}
.e-grid .e-selectionbackground,
.e-grid .e-gridcontent .e-active {
background-color: var(--color-border-strong) !important;
}
.e-grid .e-detailrow,
.e-grid .e-detailcell {
background-color: var(--color-surface);
}
/* ==========================================================================
GaLaMobil Statistiken (moved from GmStatistics.razor.css)
========================================================================== */
.gm-statistics-page .stat-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.gm-statistics-page .stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text);
}
.gm-statistics-page .stat-label {
font-size: 0.8rem;
color: var(--color-text-muted);
}
.stat-card-title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-secondary);
margin: 0 0 1rem 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.stat-panel-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-secondary);
margin: 0 0 0.75rem 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.stat-title-text {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.stat-title-text .material-symbols-outlined {
font-size: 20px;
}
.info-icon-button {
border: none;
background: transparent;
color: var(--color-text-muted);
padding: 0;
width: 1.75rem;
height: 1.75rem;
border-radius: 9999px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.info-icon-button:hover {
background: #eff6ff;
color: #2563eb;
}
.info-icon-button:focus-visible {
outline: 2px solid #93c5fd;
outline-offset: 2px;
}
.info-icon-button .material-symbols-outlined {
font-size: 20px;
}
/* CRM Applikations-Info-Icon: blinkt rot, wenn beim Speichern ein Pflichtfeld fehlt */
@keyframes crm-info-icon-blink {
0%, 100% {
color: #dc2626;
background-color: transparent;
}
50% {
color: #ffffff;
background-color: #dc2626;
}
}
.crm-info-icon-error {
animation: crm-info-icon-blink 1s ease-in-out infinite;
}
.info-dialog-text {
margin: 0;
color: var(--color-text-secondary);
line-height: 1.6;
}
.combined-stats-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1%;
}
.stat-panel {
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 0.875rem;
background: var(--color-surface-alt);
min-width: 0;
width: 100%;
height: 100%;
}
.stat-panel-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.chart-container-small {
width: 34%;
min-width: 0;
max-width: 100%;
aspect-ratio: 1 / 1;
height: auto;
flex-shrink: 0;
position: relative;
display: block;
}
.chart-container-medium {
width: 100%;
height: 300px;
position: relative;
display: block;
}
.chart-container-large {
width: 100%;
height: 420px;
position: relative;
display: block;
}
.stat-details {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
width: 100%;
}
.customer-type-list {
display: flex;
flex-direction: column;
gap: 0.375rem;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--color-border);
}
.customer-type-row {
display: flex;
justify-content: space-between;
gap: 0.75rem;
font-size: 0.8rem;
color: var(--color-text-secondary);
}
.customer-type-label {
font-weight: 500;
}
.stat-percentage {
font-size: 0.8rem;
color: #10b981;
font-weight: 500;
}
.stat-row {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
color: var(--color-text-secondary);
}
.stat-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.stat-dot.normal {
background-color: #10b981;
}
.stat-dot.test {
background-color: #f59e0b;
}
.error-banner {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 8px;
color: #ef4444;
font-size: 0.875rem;
}
.error-banner .material-symbols-outlined {
font-size: 20px;
}
@media (max-width: 767px) {
.combined-stats-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.stat-panel-content {
flex-direction: column;
align-items: flex-start;
}
.chart-container-small {
width: 55%;
max-width: 100%;
min-width: 0;
}
.customer-type-row {
flex-direction: column;
gap: 0.25rem;
}
}
/* ==========================================================================
KS21 Mobil Statistiken
========================================================================== */
.ks21mobil-statistics-page .overview-top-row {
display: flex;
align-items: flex-start;
gap: 1.5rem;
width: 100%;
margin-bottom: 1rem;
}
.ks21mobil-statistics-page .overview-revenue-block {
flex: 1 1 0;
min-width: 0;
}
.ks21mobil-statistics-page .stat-panel-title-sub {
margin-bottom: 0.5rem;
}
.ks21mobil-statistics-page .stat-details-horizontal {
flex-direction: row;
align-items: stretch;
gap: 1rem;
}
.ks21mobil-statistics-page .stat-group {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.ks21mobil-statistics-page .trends-card {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.ks21mobil-statistics-page .trend-section .chart-container-medium {
height: 200px;
}
@media (max-width: 767px) {
.ks21mobil-statistics-page .overview-top-row {
flex-direction: column;
}
.ks21mobil-statistics-page .overview-revenue-block {
width: 100%;
}
.ks21mobil-statistics-page .stat-details-horizontal {
flex-direction: column;
}
}
/* ==========================================================================
Lizenz-Historie /history (moved from LicenseHistory.razor.css)
========================================================================== */
.licence-history-container {
padding: 1.5rem;
}
/* ==========================================================================
Native form controls — base styling
The app has ~70 ad-hoc ``
style text fields across dialogs/forms (outside of Syncfusion's SfTextBox).
None of them set an explicit background, so they fell back to the browser's
own native light/dark form-control rendering, which doesn't match our
surface color — this is why text fields looked inconsistent from page to
page. This single rule gives every plain text input/textarea/select an
explicit, token-driven background, text color and focus ring, without
having to touch each call site. `:not(.e-input)` excludes Syncfusion's own
inputs (SfTextBox etc.), which are styled by the Fluent2 theme instead.
========================================================================== */
input[type="text"]:not(.e-input),
input[type="search"]:not(.e-input),
input[type="email"]:not(.e-input),
input[type="password"]:not(.e-input),
input[type="number"]:not(.e-input),
input[type="tel"]:not(.e-input),
input[type="url"]:not(.e-input),
input[type="date"]:not(.e-input),
textarea:not(.e-input),
select:not(.e-input) {
background-color: var(--color-surface);
color: var(--color-text);
}
input[type="text"]:not(.e-input):disabled,
input[type="search"]:not(.e-input):disabled,
input[type="email"]:not(.e-input):disabled,
input[type="password"]:not(.e-input):disabled,
input[type="number"]:not(.e-input):disabled,
input[type="tel"]:not(.e-input):disabled,
input[type="url"]:not(.e-input):disabled,
input[type="date"]:not(.e-input):disabled,
textarea:not(.e-input):disabled,
select:not(.e-input):disabled,
input[type="text"]:not(.e-input):read-only,
input[type="search"]:not(.e-input):read-only,
input[type="email"]:not(.e-input):read-only,
input[type="number"]:not(.e-input):read-only,
input[type="tel"]:not(.e-input):read-only,
input[type="url"]:not(.e-input):read-only,
input[type="date"]:not(.e-input):read-only,
textarea:not(.e-input):read-only {
background-color: var(--color-surface-alt);
color: var(--color-text-muted);
}
input[type="text"]:not(.e-input):focus,
input[type="search"]:not(.e-input):focus,
input[type="email"]:not(.e-input):focus,
input[type="password"]:not(.e-input):focus,
input[type="number"]:not(.e-input):focus,
input[type="tel"]:not(.e-input):focus,
input[type="url"]:not(.e-input):focus,
input[type="date"]:not(.e-input):focus,
textarea:not(.e-input):focus,
select:not(.e-input):focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
}
input[type="text"]::placeholder,
input[type="search"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
color: var(--color-text-faint);
}
.grid-container {
background: var(--color-surface);
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.e-grid {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
.e-grid .e-gridheader {
background-color: var(--color-surface-alt);
}
.e-grid .e-headercell {
background-color: var(--color-surface-alt);
color: var(--color-text-secondary);
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.025em;
padding: 0.875rem 1rem;
border-bottom: 2px solid var(--color-border);
}
.e-grid .e-headercell:hover {
background-color: var(--color-surface-alt);
}
.e-grid .e-rowcell {
padding: 1rem;
border-bottom: 1px solid var(--color-surface-alt);
vertical-align: middle;
}
.e-grid .e-row {
transition: background-color 0.15s ease;
}
.e-grid .e-pagercontainer {
border-top: 1px solid var(--color-border);
background-color: var(--color-surface-alt);
padding: 0.75rem 1rem;
}
.e-grid .e-pagercontainer .e-pageritem {
color: var(--color-text-muted);
}
.e-grid .e-pagercontainer .e-pageritem.e-active {
background-color: var(--color-accent);
color: var(--color-accent-contrast);
}
.licence-type-badge {
display: inline-block;
padding: 0.375rem 0.75rem;
background: linear-gradient(135deg, #dbeafe, #ede9fe);
color: #4f46e5;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
border: 1px solid #c7d2fe;
white-space: nowrap;
}
.licence-type-badge[data-type="1"] {
/* Exchange / Austausch */
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
color: #1e40af;
border-color: #93c5fd;
}
.licence-type-badge[data-type="2"] {
/* Extension / Nachkauf */
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
color: #065f46;
border-color: #6ee7b7;
}
.licence-type-badge[data-type="3"] {
/* Purchase / Kauf */
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #92400e;
border-color: #fcd34d;
}
.licence-type-badge[data-type="4"] {
/* Student / Schüler */
background: linear-gradient(135deg, #fce7f3, #fbcfe8);
color: #9f1239;
border-color: #f9a8d4;
}
.licence-type-badge[data-type="5"] {
/* PlantaPro */
background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
color: #3730a3;
border-color: #a5b4fc;
}
.licence-type-badge[data-type="0"] {
/* None */
background: linear-gradient(135deg, var(--color-surface-alt), var(--color-border));
color: var(--color-text-muted);
border-color: var(--color-border-strong);
}
.count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
height: 2rem;
padding: 0 0.5rem;
background: var(--color-surface-alt);
color: var(--color-text-secondary);
border-radius: 0.375rem;
font-weight: 600;
font-size: 0.875rem;
}
.empty-state-container {
padding: 2rem;
text-align: center;
background: var(--color-surface);
border-radius: 0.5rem;
}
.empty-state-icon {
font-size: 3rem;
color: var(--color-border-strong);
margin-bottom: 1rem;
}
.empty-state-text {
font-size: 0.95rem;
color: var(--color-text-faint);
margin: 0;
}
@media (max-width: 768px) {
.licence-history-container {
padding: 1rem;
}
.search-container {
max-width: 100%;
}
.e-grid .e-headercell {
padding: 0.75rem 0.5rem;
font-size: 0.75rem;
}
.e-grid .e-rowcell {
padding: 0.75rem 0.5rem;
}
}
/* ==========================================================================
Lizenzierung /licensing (moved from Licensing.razor.css)
========================================================================== */
.licensing-page .section-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 0.95rem;
padding: 1.5rem;
box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.15);
}
.licensing-page .section-card.history-card {
display: flex;
flex-direction: column;
height: 100%;
}
.licensing-page .section-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.licensing-page .section-header > div {
flex: 1;
}
.licensing-page .step-badge {
width: 2.5rem;
height: 2.5rem;
min-width: 2.5rem;
max-width: 2.5rem;
border-radius: 50%;
background: var(--color-surface);
border: 2px solid var(--color-accent);
color: var(--color-accent);
font-weight: 700;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px -4px rgba(var(--color-accent-rgb), 0.3);
flex-shrink: 0;
line-height: 1;
}
.licensing-page .subtext {
color: var(--color-text-muted);
font-size: 0.95rem;
margin: 0;
}
.licensing-page .field-label {
display: block;
font-weight: 600;
color: var(--color-text);
margin-bottom: 0.3rem;
}
.licensing-page .input-hint {
color: var(--color-text-faint);
font-size: 0.9rem;
}
.licensing-page .validation {
color: #b91c1c;
font-size: 0.9rem;
}
.licensing-page .history-table-wrapper {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.licensing-page .history-table-wrapper .e-grid {
display: flex;
flex-direction: column;
height: 100%;
}
.licensing-page .history-table-wrapper .e-gridcontent {
flex: 1;
overflow: auto;
}
/* Syncfusion Component Adjustments */
.licensing-page .e-textbox {
border-radius: 0.5rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.licensing-page .e-textbox:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
}
.licensing-page .e-btn {
border-radius: 0.5rem;
font-weight: 500;
transition: all 0.2s ease;
}
.licensing-page .e-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.licensing-page .e-primary {
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)) !important;
border-color: var(--color-accent) !important;
}
.licensing-page .e-danger {
background: linear-gradient(135deg, #ef4444, #dc2626) !important;
border-color: #ef4444 !important;
}
/* SfButton IsPrimary="true": use the brand accent (matches Ks21Button's Primary="true") instead of the Fluent2 theme blue.
!important is required here: fluent2.css is linked after app.css in App.razor, so its same-specificity
".e-btn.e-primary" rule would otherwise win the cascade regardless of source order in this file. */
.e-btn.e-primary {
background-color: var(--color-accent) !important;
border-color: var(--color-accent) !important;
}
.e-btn.e-primary:hover,
.e-btn.e-primary:focus {
background-color: var(--color-accent-hover) !important;
border-color: var(--color-accent-hover) !important;
}
.e-btn.e-primary:active {
background-color: var(--color-accent-active) !important;
border-color: var(--color-accent-active) !important;
}
.e-btn.e-outline.e-primary {
background-color: transparent !important;
color: var(--color-accent) !important;
border-color: var(--color-accent) !important;
}
.e-btn.e-outline.e-primary:hover,
.e-btn.e-outline.e-primary:focus {
background-color: rgba(var(--color-accent-rgb), 0.1) !important;
color: var(--color-accent-hover) !important;
border-color: var(--color-accent-hover) !important;
}
.licensing-page .e-datepicker {
border-radius: 0.5rem;
}
/* ==========================================================================
Go360 Demo Kunden /go360-demo-clients
========================================================================== */
.demo-clients-page .page-wrapper {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.demo-clients-page .section-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 0.95rem;
padding: 1.5rem;
box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.15);
}
.demo-clients-page .section-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.demo-clients-page .section-header > div {
flex: 1;
}
.demo-clients-page .step-badge {
width: 2.5rem;
height: 2.5rem;
min-width: 2.5rem;
max-width: 2.5rem;
border-radius: 50%;
background: var(--color-surface);
border: 2px solid var(--color-accent);
color: var(--color-accent);
font-weight: 700;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px -4px rgba(var(--color-accent-rgb), 0.3);
flex-shrink: 0;
line-height: 1;
}
.demo-clients-page .subtext {
color: var(--color-text-muted);
font-size: 0.95rem;
margin: 0;
}
.demo-clients-page .field-label {
display: block;
font-weight: 600;
color: var(--color-text);
margin-bottom: 0.3rem;
}
.demo-clients-page .input-hint {
color: var(--color-text-faint);
font-size: 0.9rem;
}
.demo-clients-page .validation {
color: #b91c1c;
font-size: 0.9rem;
}
.demo-clients-page .current-date-badge {
display: inline-block;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
color: #065f46;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
border: 1px solid #6ee7b7;
}
.demo-clients-page .notes-history {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--color-border);
max-height: 320px;
overflow-y: auto;
}
.demo-clients-page .note-entry {
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.75rem 1rem;
}
.demo-clients-page .note-date {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-muted);
margin-bottom: 0.25rem;
}
.demo-clients-page .note-text {
font-size: 0.9rem;
color: var(--color-text-secondary);
white-space: pre-line;
}
.licensing-page .e-numericupdown {
border-radius: 0.5rem;
}
@media (max-width: 1023px) {
.licensing-page .flex.flex-col.lg\:flex-row {
flex-direction: column;
}
.licensing-page .lg\:w-\[500px\],
.licensing-page .xl\:w-\[600px\] {
width: 100% !important;
}
}
/* Dialog Styling (Kundenauswahl-Dialog) */
.licensing-page .e-dialog {
border-radius: 0.75rem;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.licensing-page .e-dialog .e-dlg-header {
background: var(--color-surface-alt);
border-bottom: 1px solid var(--color-border);
padding: 1rem 1.5rem;
}
.licensing-page .e-dialog .e-dlg-header .e-dlg-header-content {
font-weight: 600;
color: var(--color-text);
}
/* Toast Styling */
.licensing-page .e-toast {
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.licensing-page .e-toast-success {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
}
.licensing-page .e-toast-error {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
}
.licensing-page .e-toast-info {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
}
/* ==========================================================================
Bericht Layouts /bsb-layouts (migriert von bsb-layouts.component)
========================================================================== */
.bsb-layouts-page .controls-card {
background: var(--color-surface);
border-radius: 0.5rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
padding: 1rem;
margin-bottom: 1.5rem;
}
.bsb-layouts-page .controls-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
width: 100%;
}
.bsb-layouts-page .stats-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
color: var(--color-text-faint);
}
.bsb-layouts-page .stat-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.25rem;
}
.bsb-layouts-page .stat-item .material-symbols-outlined {
font-size: 1.15rem;
}
.bsb-dialog .field-label {
display: block;
font-weight: 600;
color: var(--color-text);
margin-bottom: 0.3rem;
}
.bsb-dialog .native-select {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border-strong);
border-radius: 0.375rem;
font-size: 0.95rem;
color: var(--color-text);
background-color: var(--color-surface);
}
.bsb-dialog .native-select:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
}
.bsb-layouts-page .layouts-table-wrapper {
background: var(--color-surface);
border-radius: 0.5rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.bsb-layouts-page table {
width: 100%;
border-collapse: collapse;
}
.bsb-layouts-page .layouts-table-wrapper > table > thead th {
text-align: left;
padding: 0.875rem 1rem;
font-weight: 600;
font-size: 0.875rem;
color: var(--color-text-secondary);
background-color: var(--color-surface-alt);
border-bottom: 2px solid var(--color-border);
}
.bsb-layouts-page .group-row {
cursor: pointer;
transition: background-color 0.15s ease;
border-bottom: 1px solid var(--color-surface-alt);
}
.bsb-layouts-page .group-row:hover {
background-color: var(--color-surface-alt);
}
.bsb-layouts-page .group-row td {
padding: 0.875rem 1rem;
}
.bsb-layouts-page .expand-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 9999px;
border: none;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
}
.bsb-layouts-page .expand-btn:hover {
background-color: var(--color-surface-alt);
}
.bsb-layouts-page .nested-row {
padding: 0 !important;
background-color: var(--color-surface-alt);
}
.bsb-layouts-page .nested-table-wrapper {
padding: 0.75rem;
}
.bsb-layouts-page .nested-table th {
text-align: left;
padding: 0.625rem 0.75rem;
font-weight: 600;
font-size: 0.8rem;
color: var(--color-text-secondary);
background-color: var(--color-surface-alt);
border-bottom: 1px solid var(--color-border);
}
.bsb-layouts-page .nested-table td {
padding: 0.75rem;
font-size: 0.875rem;
border-bottom: 1px solid var(--color-surface-alt);
vertical-align: middle;
}
.bsb-layouts-page .color-swatch {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid var(--color-border);
}
.bsb-layouts-page .layout-type-tag {
display: inline-block;
padding: 0.25rem 0.6rem;
background: #dbeafe;
color: #1d4ed8;
border-radius: 0.375rem;
font-size: 0.8rem;
font-weight: 500;
white-space: nowrap;
}
.bsb-layouts-page .presence-tag {
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.2rem 0.5rem;
border-radius: 0.375rem;
font-size: 0.75rem;
font-weight: 500;
}
.bsb-layouts-page .presence-tag .material-symbols-outlined {
font-size: 0.9rem;
}
.bsb-layouts-page .presence-tag--success {
background: #d1fae5;
color: #065f46;
}
[data-theme="dark"] .bsb-layouts-page .presence-tag--success {
background: rgba(16, 185, 129, 0.18);
color: #34d399;
}
.bsb-layouts-page .presence-tag--secondary {
background: var(--color-surface-alt);
color: var(--color-text-muted);
}
.bsb-layouts-page .icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 9999px;
border: none;
background: transparent;
cursor: pointer;
transition: background-color 0.15s ease;
}
.bsb-layouts-page .icon-btn:hover {
background-color: var(--color-surface-alt);
}
.bsb-dialog .assign-layout-banner {
background: linear-gradient(135deg, #ecfdf5, #eff6ff);
border: 1px solid #d1fae5;
border-radius: 0.75rem;
padding: 1rem 1.25rem;
margin-bottom: 1.25rem;
}
.bsb-dialog .assign-layout-name {
display: flex;
align-items: center;
gap: 0.6rem;
}
.bsb-dialog .assign-layout-name > .material-symbols-outlined {
font-size: 1.5rem;
color: #059669;
background: var(--color-surface);
border-radius: 9999px;
padding: 0.4rem;
}
.bsb-dialog .assign-layout-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-muted);
}
.bsb-dialog .assign-layout-value {
font-size: 1.05rem;
font-weight: 700;
color: var(--color-text);
}
.bsb-dialog .assign-layout-hint {
margin: 0.6rem 0 0;
font-size: 0.85rem;
color: var(--color-text-secondary);
line-height: 1.5;
}
.bsb-dialog .assign-groups-list {
display: flex;
flex-direction: column;
gap: 1rem;
max-height: 55vh;
overflow-y: auto;
padding-right: 0.25rem;
}
.bsb-dialog .app-group-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 1rem 1.1rem;
}
.bsb-dialog .app-group-header {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.85rem;
}
.bsb-dialog .app-group-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 0.5rem;
background: #eff6ff;
color: #2563eb;
font-size: 1.15rem;
}
.bsb-dialog .app-group-title {
font-weight: 700;
color: var(--color-text);
flex: 1;
}
.bsb-dialog .app-group-count {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-muted);
background: var(--color-surface-alt);
border-radius: 9999px;
padding: 0.2rem 0.65rem;
}
.bsb-dialog .app-group-empty {
margin: 0;
padding-left: 2.6rem;
font-size: 0.85rem;
color: var(--color-text-faint);
}
.bsb-dialog .oauth-user-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.bsb-dialog .oauth-user-row {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.75rem 0.9rem;
border-radius: 0.6rem;
border: 1px solid var(--color-border);
background-color: var(--color-surface-alt);
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.bsb-dialog .oauth-user-row:hover {
border-color: #a7f3d0;
box-shadow: 0 2px 8px -4px rgba(16, 185, 129, 0.25);
}
.bsb-dialog .oauth-user-row--assigned {
border-color: #6ee7b7;
background-color: #f0fdf4;
}
.bsb-dialog .oauth-user-row--unmapped {
cursor: default;
opacity: 0.65;
}
.bsb-dialog .oauth-user-row--unmapped:hover {
border-color: var(--color-border);
box-shadow: none;
}
.bsb-dialog .oauth-user-checkbox {
flex-shrink: 0;
width: 1.2rem;
height: 1.2rem;
accent-color: var(--color-accent);
cursor: pointer;
}
.bsb-dialog .oauth-user-checkbox:disabled {
cursor: not-allowed;
}
.bsb-dialog .oauth-user-info {
flex: 1;
min-width: 0;
}
.bsb-dialog .oauth-user-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 1.25rem;
}
.bsb-dialog .oauth-user-field-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-text-faint);
margin-bottom: 0.1rem;
}
.bsb-dialog .oauth-user-field-value {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text);
}
.bsb-dialog .oauth-user-field-value--muted {
font-weight: 500;
color: var(--color-text-muted);
font-size: 0.8rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bsb-dialog .oauth-user-unmapped-hint {
font-size: 0.85rem;
color: var(--color-text-faint);
font-style: italic;
}
/* Transfer Monitoring: console-style log output.
Colors below are written light-mode-first (readable on the light
`--color-surface-alt` panel background) with `[data-theme="dark"]`
overrides restoring the original bright-on-black terminal palette - the
original rules were all tuned for a permanently-dark `bg-gray-900`
container and read as low-contrast/invisible once that container became
theme-aware (see ConsoleLogs.razor). */
.console-output {
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
font-size: 0.75rem;
line-height: 1.6;
display: flex;
flex-direction: column;
min-height: 0;
}
.console-line {
padding: 0.2rem 0;
border-bottom: 1px solid var(--color-border);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem;
}
.console-line--error {
background: rgba(239, 68, 68, 0.08);
border-left: 2px solid #ef4444;
padding-left: 0.5rem;
}
.console-line--processing {
border-left: 2px solid #3b82f6;
padding-left: 0.5rem;
}
.console-line--success .console-message {
color: #15803d;
}
[data-theme="dark"] .console-line--success .console-message {
color: #86efac;
}
.console-timestamp {
color: var(--color-text-muted);
font-size: 0.65rem;
min-width: 4rem;
}
.console-badge {
font-size: 0.6rem;
font-weight: 700;
padding: 0.05rem 0.35rem;
border-radius: 0.2rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.console-badge--success { background: #dcfce7; color: #166534; }
.console-badge--warn { background: #fef9c3; color: #854d0e; }
.console-badge--error { background: #fee2e2; color: #991b1b; }
.console-badge--processing { background: #dbeafe; color: #1d4ed8; }
.console-badge--retrying { background: var(--color-accent-light); color: var(--color-accent-active); }
.console-badge--pending { background: #fef9c3; color: #854d0e; }
.console-badge--default { background: var(--color-border); color: var(--color-text-muted); }
[data-theme="dark"] .console-badge--success { background: rgba(34, 197, 94, 0.2); color: #86efac; }
[data-theme="dark"] .console-badge--warn,
[data-theme="dark"] .console-badge--pending { background: rgba(234, 179, 8, 0.2); color: #fde047; }
[data-theme="dark"] .console-badge--error { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
[data-theme="dark"] .console-badge--processing { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
[data-theme="dark"] .console-badge--retrying { background: rgba(249, 115, 22, 0.2); color: #fdba74; }
[data-theme="dark"] .console-badge--default { background: rgba(107, 114, 128, 0.2); color: var(--color-border-strong); }
.console-type {
color: var(--color-text-muted);
font-size: 0.7rem;
}
.console-message {
color: var(--color-text-secondary);
flex: 1;
min-width: 0;
}
.console-retry {
color: var(--color-accent);
font-size: 0.65rem;
font-weight: 600;
}
.console-error {
width: 100%;
color: #b91c1c;
font-size: 0.65rem;
padding-left: 4.5rem;
margin-top: 0.1rem;
}
[data-theme="dark"] .console-error {
color: #fca5a5;
}
.console-org {
color: #4338ca;
font-size: 0.65rem;
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
background: rgba(67, 56, 202, 0.1);
padding: 0 0.25rem;
border-radius: 0.15rem;
}
[data-theme="dark"] .console-org {
color: #818cf8;
background: rgba(129, 140, 248, 0.1);
}
.console-user {
color: #6d28d9;
font-size: 0.65rem;
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
background: rgba(109, 40, 217, 0.1);
padding: 0 0.25rem;
border-radius: 0.15rem;
}
[data-theme="dark"] .console-user {
color: #a78bfa;
background: rgba(167, 139, 250, 0.1);
}
/* Transfer Monitoring: next-execution countdown */
.next-execution-countdown {
display: flex;
align-items: center;
gap: 0.5rem;
}
.countdown-bar {
width: 5rem;
height: 0.35rem;
background: var(--color-border);
border-radius: 0.25rem;
overflow: hidden;
}
.countdown-fill {
height: 100%;
background: #3b82f6;
border-radius: 0.25rem;
transition: width 1s linear;
}
.countdown-text {
font-size: 0.7rem;
font-weight: 600;
color: #3b82f6;
font-variant-numeric: tabular-nums;
min-width: 2.5rem;
}
/* Transfer Monitoring: job timeline */
.timeline-track-wrapper {
overflow-x: auto;
padding-bottom: 0.5rem;
width: 100%;
}
.timeline-track {
display: flex;
align-items: flex-start;
gap: 0;
position: relative;
flex-wrap: nowrap;
padding: 1rem 0.5rem 0;
width: 100%;
min-height: 4.5rem;
min-width: max-content;
}
.timeline-line {
position: absolute;
top: 1.75rem;
left: 0;
right: 0;
height: 2px;
background: var(--color-border);
z-index: 0;
}
.timeline-entry {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
padding: 0 0.125rem;
cursor: pointer;
position: relative;
z-index: 1;
transition: transform 0.15s ease;
flex: 0 1 auto;
min-width: 2.5rem;
max-width: 4rem;
}
.timeline-entry:hover { transform: translateY(-2px); }
.timeline-entry--selected { transform: translateY(-3px); }
.timeline-entry--selected .timeline-dot {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
transform: scale(1.2);
}
.timeline-entry--last .timeline-dot {
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}
.timeline-entry--next {
flex-shrink: 0;
opacity: 0.5;
cursor: default;
}
.timeline-entry--next:hover { transform: none; }
.timeline-dot {
width: 0.875rem;
height: 0.875rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
border: 2px solid white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
flex-shrink: 0;
}
.timeline-dot--done { background: #22c55e; }
.timeline-dot--failed { background: #ef4444; }
.timeline-dot--completed-with-errors { background: #f59e0b; }
.timeline-dot--processing { background: #3b82f6; }
.timeline-dot--default { background: var(--color-text-faint); }
.timeline-dot--next {
background: transparent;
border: 2px dashed var(--color-text-faint);
box-shadow: none;
}
/* Höhere Spezifität nötig: Googles Material-Symbols-Stylesheet setzt .material-symbols-outlined
auf font-size:24px und wird nach app.css geladen, wodurch eine einzelne Klasse hier verlieren würde. */
.timeline-dot .timeline-dot-icon {
font-size: 0.5rem;
line-height: 1;
}
.timeline-time {
font-size: 0.5rem;
color: var(--color-text-muted);
white-space: nowrap;
margin-top: 0.05rem;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.timeline-count {
font-size: 0.45rem;
font-weight: 700;
color: var(--color-text-secondary);
background: var(--color-surface-alt);
border-radius: 0.25rem;
padding: 0 0.15rem;
line-height: 1.2;
flex-shrink: 0;
}
.timeline-label-last,
.timeline-label-next {
font-size: 0.4rem;
font-weight: 600;
color: #3b82f6;
text-transform: uppercase;
letter-spacing: 0.03em;
}
@media (min-width: 640px) {
.timeline-entry { padding: 0 0.2rem; min-width: 3rem; max-width: 5rem; }
.timeline-dot { width: 0.95rem; height: 0.95rem; }
.timeline-time { font-size: 0.55rem; }
.timeline-count { font-size: 0.5rem; }
.timeline-label-last, .timeline-label-next { font-size: 0.45rem; }
}
@media (min-width: 1024px) {
.timeline-entry { padding: 0 0.4rem; min-width: 3.5rem; max-width: 6rem; }
.timeline-dot { width: 1.1rem; height: 1.1rem; }
.timeline-time { font-size: 0.65rem; }
.timeline-count { font-size: 0.6rem; }
.timeline-label-last, .timeline-label-next { font-size: 0.55rem; }
}
@media (min-width: 1536px) {
.timeline-entry { padding: 0 0.6rem; min-width: 4rem; max-width: 8rem; }
.timeline-dot { width: 1.35rem; height: 1.35rem; }
.timeline-time { font-size: 0.75rem; }
.timeline-count { font-size: 0.7rem; }
.timeline-label-last, .timeline-label-next { font-size: 0.65rem; }
}
/* ==========================================================================
Lizenzportal Registrierung /lizenzportal-registrierung/{Id}
========================================================================== */
.lizenzportal-registration-page .loading-banner {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 8px;
color: #1d4ed8;
font-size: 0.875rem;
}
.lizenzportal-registration-page .status-section {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 1rem;
margin-bottom: 1.5rem;
border-radius: 0.5rem;
border-left: 4px solid #3b82f6;
}
.lizenzportal-registration-page .status-section--info {
background: #eff6ff;
color: #1d4ed8;
}
.lizenzportal-registration-page .status-section--success {
background: #ecfdf5;
border-left-color: #10b981;
color: #047857;
}
.lizenzportal-registration-page .section-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 0.95rem;
padding: 1.5rem;
box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.15);
}
.lizenzportal-registration-page .section-card--muted {
opacity: 0.6;
}
.lizenzportal-registration-page .section-title {
display: flex;
align-items: center;
background-color: var(--color-surface-alt);
border-radius: 0.375rem;
padding: 0.5rem 0.75rem;
width: 100%;
min-height: 2.5rem;
margin-bottom: 1rem;
font-weight: 600;
}
.lizenzportal-registration-page .section-title-hint {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-left: 0.5rem;
color: var(--color-text-muted);
font-size: 0.875rem;
font-weight: 400;
}
.lizenzportal-registration-page .section-title-hint .material-symbols-outlined {
font-size: 1rem;
}
.lizenzportal-registration-page .section-title-hint--success {
color: #059669;
}
.lizenzportal-registration-page .field-label {
display: block;
font-weight: 600;
color: var(--color-text-secondary);
font-size: 0.875rem;
margin-bottom: 0.4rem;
}
.lizenzportal-registration-page .required-marker {
color: #ef4444;
}
.lizenzportal-registration-page .input-invalid.e-input-group,
.lizenzportal-registration-page .input-invalid.e-input-group.e-control-wrapper {
border-color: #ef4444;
border-width: 2px;
}
.lizenzportal-registration-page .hint {
display: flex;
align-items: center;
gap: 0.3rem;
margin-top: 0.4rem;
font-size: 0.85rem;
}
.lizenzportal-registration-page .hint .material-symbols-outlined {
font-size: 1rem;
}
.lizenzportal-registration-page .hint--success {
color: #059669;
}
.lizenzportal-registration-page .hint--info {
color: #2563eb;
}
.customer-selection-dialog {
display: flex;
flex-direction: column;
height: 100%;
gap: 1rem;
}
.customer-selection-dialog__list {
flex: 1;
overflow-y: auto;
border: 1px solid var(--color-border);
border-radius: 0.75rem;
background-color: var(--color-surface-alt);
padding: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.customer-selection-dialog__item {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1rem;
border: 1px solid transparent;
border-radius: 0.6rem;
background-color: var(--color-surface);
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.customer-selection-dialog__item:hover {
border-color: #c7d2fe;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
.customer-selection-dialog__item--selected,
.customer-selection-dialog__item--selected:hover {
background-color: var(--color-accent-lighter);
border-color: var(--color-accent);
box-shadow: 0 0 0 1px var(--color-accent), 0 4px 10px rgba(var(--color-accent-rgb), 0.18);
transform: none;
}
.customer-selection-dialog__avatar {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #e0e7ff;
color: #4338ca;
font-weight: 700;
font-size: 1rem;
}
.customer-selection-dialog__item--selected .customer-selection-dialog__avatar {
background-color: var(--color-accent);
color: var(--color-accent-contrast);
}
.customer-selection-dialog__info {
flex: 1;
min-width: 0;
}
.customer-selection-dialog__title {
font-weight: 600;
color: var(--color-text);
}
.customer-selection-dialog__sub {
font-size: 0.875rem;
color: var(--color-text-muted);
margin-top: 0.15rem;
}
.customer-selection-dialog__status {
flex-shrink: 0;
white-space: nowrap;
padding: 0.3rem 0.8rem;
border-radius: 0.4rem;
background-color: #2563eb;
color: #ffffff;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
box-shadow: 0 1px 2px rgba(37, 99, 235, 0.35);
}
.customer-selection-dialog__check {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background-color: var(--color-accent);
color: var(--color-accent-contrast);
font-size: 0.8rem;
}
.customer-selection-dialog__empty {
padding: 2.5rem 1.5rem;
text-align: center;
color: var(--color-text-muted);
}
.customer-selection-dialog__empty--muted {
color: var(--color-text-faint);
}
/* ==========================================================================
Public APIs Statistiken
========================================================================== */
.public-apis-statistics-page .filter-bar {
display: flex;
align-items: flex-end;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.public-apis-statistics-page .filter-field {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.public-apis-statistics-page .filter-field label {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.public-apis-statistics-page .month-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem;
flex: 1;
min-width: min(100%, 36rem);
}
.public-apis-statistics-page .month-summary-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.75rem 1rem;
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
}
.public-apis-statistics-page .month-summary-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.public-apis-statistics-page .month-summary-value {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text);
}
.public-apis-statistics-page .org-card {
border: 1px solid var(--color-border);
border-radius: 0.75rem;
margin-bottom: 1rem;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.public-apis-statistics-page .org-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.875rem 1.25rem;
background: #f0fdf4;
cursor: pointer;
user-select: none;
transition: background 0.15s;
}
.public-apis-statistics-page .org-header:hover {
background: #dcfce7;
}
.public-apis-statistics-page .org-header .material-symbols-outlined {
color: #059669;
}
.public-apis-statistics-page .org-title {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.public-apis-statistics-page .org-matchcode {
font-weight: 700;
font-size: 1rem;
color: #064e3b;
}
.public-apis-statistics-page .org-guid {
font-size: 0.75rem;
color: var(--color-text-muted);
background: var(--color-surface-alt);
padding: 0.1rem 0.4rem;
border-radius: 0.25rem;
}
.public-apis-statistics-page .org-meta {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--color-text-muted);
}
.public-apis-statistics-page .meta-badge {
font-size: 0.75rem;
background: #d1fae5;
color: #065f46;
border-radius: 9999px;
padding: 0.15rem 0.6rem;
font-weight: 600;
}
.public-apis-statistics-page .org-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.75rem;
margin-bottom: 0.25rem;
}
.public-apis-statistics-page .org-summary-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.75rem 1rem;
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
}
.public-apis-statistics-page .org-summary-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.public-apis-statistics-page .org-summary-value {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text);
}
.public-apis-statistics-page .keys-container {
padding: 0.75rem 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.public-apis-statistics-page .key-card {
border: 1px solid var(--color-border);
border-radius: 0.5rem;
overflow: hidden;
}
.public-apis-statistics-page .key-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.625rem 1rem;
background: #eff6ff;
cursor: pointer;
user-select: none;
transition: background 0.15s;
}
.public-apis-statistics-page .key-header:hover {
background: #dbeafe;
}
.public-apis-statistics-page .key-header .material-symbols-outlined {
color: #3b82f6;
}
.public-apis-statistics-page .key-title {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
min-width: 0;
flex-wrap: wrap;
}
.public-apis-statistics-page .key-value {
font-size: 0.85rem;
color: #1e40af;
background: #dbeafe;
padding: 0.1rem 0.4rem;
border-radius: 0.25rem;
white-space: normal;
word-break: break-all;
}
.public-apis-statistics-page .key-note {
font-size: 0.8rem;
color: var(--color-text-muted);
font-style: italic;
}
.public-apis-statistics-page .key-summary {
display: flex;
align-items: center;
gap: 1rem;
color: var(--color-text-muted);
font-size: 0.85rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.public-apis-statistics-page .summary-item {
display: flex;
align-items: center;
gap: 0.25rem;
}
.public-apis-statistics-page .summary-item .material-symbols-outlined {
font-size: 16px;
}
.public-apis-statistics-page .stats-table-wrapper {
padding: 0.5rem;
background: var(--color-surface);
}
.public-apis-statistics-page .endpoint-text {
font-size: 0.78rem;
color: var(--color-text-secondary);
max-width: 300px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
.public-apis-statistics-page .api-badge {
font-size: 0.72rem;
font-weight: 700;
padding: 0.1rem 0.45rem;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.public-apis-statistics-page .badge-graphql {
background: #f3e8ff;
color: #6b21a8;
}
.public-apis-statistics-page .badge-rest {
background: #e0f2fe;
color: #0369a1;
}
.public-apis-statistics-page .status-badge {
font-size: 0.72rem;
font-weight: 700;
padding: 0.1rem 0.5rem;
border-radius: 9999px;
}
.public-apis-statistics-page .status-badge--success {
background: #d1fae5;
color: #065f46;
}
.public-apis-statistics-page .status-badge--warn {
background: #fef3c7;
color: #92400e;
}
.public-apis-statistics-page .status-badge--danger {
background: #fee2e2;
color: #991b1b;
}
.public-apis-statistics-page .status-badge--secondary {
background: var(--color-surface-alt);
color: var(--color-text-secondary);
}
.public-apis-statistics-page .graphql-query-inline {
display: flex;
align-items: baseline;
gap: 0.35rem;
max-width: 100%;
}
.public-apis-statistics-page .graphql-query-truncated {
font-family: monospace;
font-size: 0.78rem;
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.public-apis-statistics-page .query-toggle-btn {
background: none;
border: none;
cursor: pointer;
color: #2563eb;
font-size: 0.75rem;
padding: 0;
text-decoration: underline;
white-space: nowrap;
flex-shrink: 0;
}
.public-apis-statistics-page .query-toggle-btn:hover {
color: #1d4ed8;
}
/* Dialog content is rendered outside the page wrapper by Syncfusion, so these stay unscoped. */
.query-dialog-toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: 0.5rem;
}
.query-copy-btn {
display: flex;
align-items: center;
gap: 0.35rem;
background: var(--color-surface-alt);
border: 1px solid var(--color-border-strong);
border-radius: 0.375rem;
padding: 0.3rem 0.75rem;
font-size: 0.8rem;
cursor: pointer;
color: var(--color-text-secondary);
transition: background 0.15s, color 0.15s;
}
.query-copy-btn:hover {
background: var(--color-border);
}
.query-copy-btn .material-symbols-outlined {
font-size: 16px;
}
.query-dialog-code {
margin: 0;
padding: 1rem;
background: #1e1e1e;
color: #d4d4d4;
border-radius: 0.5rem;
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
font-size: 0.82rem;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-all;
max-height: 60vh;
overflow-y: auto;
}
/* ==========================================================================
Dark Mode
Repaints the Tailwind neutrals and project-specific "card" classes that are
used directly in .razor markup, so pages get dark mode without per-page
edits. Toggled via , set by the inline script in
App.razor and the theme switch in Header.razor. Syncfusion component chrome
(SfGrid, SfButton, dialogs, etc.) comes from swapping in the official
fluent2-dark.css theme instead of being repainted here.
========================================================================== */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-slate-50 { background-color: var(--color-surface) !important; }
[data-theme="dark"] .bg-gray-50 { background-color: var(--color-bg) !important; }
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-slate-100,
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--color-surface-alt) !important; }
[data-theme="dark"] .bg-gray-200,
[data-theme="dark"] .bg-gray-400,
[data-theme="dark"] .hover\:bg-gray-200:hover,
[data-theme="dark"] .hover\:bg-gray-500:hover { background-color: var(--color-border-strong) !important; }
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-slate-200 { border-color: var(--color-border) !important; }
/* Tailwind's colorless border utilities (`border`, `border-t/-b/-l/-r` with no
color suffix) fall back to Tailwind's fixed default border color
(gray-200), which never changes with the theme unless remapped here too. */
[data-theme="dark"] .border,
[data-theme="dark"] .border-t,
[data-theme="dark"] .border-b,
[data-theme="dark"] .border-l,
[data-theme="dark"] .border-r { border-color: var(--color-border) !important; }
/* Tailwind's divide-* utilities compile to a compound child-combinator selector
(.divide-gray-100 > :not([hidden]) ~ :not([hidden])), so the plain .border-gray-100
remap above never matches it - needs its own rule. */
[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-border) !important; }
[data-theme="dark"] .border-gray-300 { border-color: var(--color-border-strong) !important; }
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .hover\:text-gray-900:hover { color: var(--color-text) !important; }
[data-theme="dark"] .text-gray-700 { color: var(--color-text-secondary) !important; }
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-slate-500 { color: var(--color-text-muted) !important; }
[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-slate-400 { color: var(--color-text-faint) !important; }
/* Category "chip"/badge/pill colors: the light-theme pastel (e.g. bg-blue-100 +
text-blue-800) reads as either a washed-out blob or unreadable dark-on-dark
text on a dark card, so every hue gets one dark-mode pairing: a translucent
tint of the hue behind (any -50/-100/-200 background shade), and ONE bright,
legible shade of that hue for ALL of its text weights (-500 through -900 -
action icons use -500, badges commonly use -600/-700/-800). Precise shade
distinctions don't matter in dark mode; being reliably readable does. */
[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-blue-100,
[data-theme="dark"] .bg-blue-200 { background-color: rgba(59, 130, 246, 0.18) !important; }
[data-theme="dark"] .text-blue-500,
[data-theme="dark"] .text-blue-600,
[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-blue-900 { color: #60a5fa !important; }
[data-theme="dark"] .bg-purple-50,
[data-theme="dark"] .bg-purple-100,
[data-theme="dark"] .bg-purple-200 { background-color: rgba(168, 85, 247, 0.18) !important; }
[data-theme="dark"] .text-purple-500,
[data-theme="dark"] .text-purple-600,
[data-theme="dark"] .text-purple-700,
[data-theme="dark"] .text-purple-800,
[data-theme="dark"] .text-purple-900 { color: #c084fc !important; }
[data-theme="dark"] .bg-violet-50,
[data-theme="dark"] .bg-violet-100,
[data-theme="dark"] .bg-violet-200 { background-color: rgba(139, 92, 246, 0.18) !important; }
[data-theme="dark"] .text-violet-500,
[data-theme="dark"] .text-violet-600,
[data-theme="dark"] .text-violet-700,
[data-theme="dark"] .text-violet-800,
[data-theme="dark"] .text-violet-900 { color: #a78bfa !important; }
[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-green-100,
[data-theme="dark"] .bg-green-200 { background-color: rgba(34, 197, 94, 0.18) !important; }
[data-theme="dark"] .hover\:bg-green-200:hover { background-color: rgba(34, 197, 94, 0.28) !important; }
[data-theme="dark"] .text-green-500,
[data-theme="dark"] .text-green-600,
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-green-800,
[data-theme="dark"] .text-green-900 { color: #4ade80 !important; }
[data-theme="dark"] .bg-emerald-50,
[data-theme="dark"] .bg-emerald-100,
[data-theme="dark"] .bg-emerald-200 { background-color: rgba(16, 185, 129, 0.18) !important; }
[data-theme="dark"] .text-emerald-500,
[data-theme="dark"] .text-emerald-600,
[data-theme="dark"] .text-emerald-700,
[data-theme="dark"] .text-emerald-800,
[data-theme="dark"] .text-emerald-900 { color: #34d399 !important; }
[data-theme="dark"] .bg-orange-50,
[data-theme="dark"] .bg-orange-100,
[data-theme="dark"] .bg-orange-200 { background-color: rgba(249, 115, 22, 0.18) !important; }
[data-theme="dark"] .text-orange-500,
[data-theme="dark"] .text-orange-600,
[data-theme="dark"] .text-orange-700,
[data-theme="dark"] .text-orange-800,
[data-theme="dark"] .text-orange-900 { color: #fb923c !important; }
[data-theme="dark"] .bg-amber-50,
[data-theme="dark"] .bg-amber-100,
[data-theme="dark"] .bg-amber-200 { background-color: rgba(245, 158, 11, 0.18) !important; }
[data-theme="dark"] .text-amber-500,
[data-theme="dark"] .text-amber-600,
[data-theme="dark"] .text-amber-700,
[data-theme="dark"] .text-amber-800,
[data-theme="dark"] .text-amber-900 { color: #fbbf24 !important; }
[data-theme="dark"] .border-amber-200,
[data-theme="dark"] .border-amber-500 { border-color: rgba(245, 158, 11, 0.45) !important; }
[data-theme="dark"] .bg-yellow-50,
[data-theme="dark"] .bg-yellow-100,
[data-theme="dark"] .bg-yellow-200 { background-color: rgba(234, 179, 8, 0.18) !important; }
[data-theme="dark"] .text-yellow-500,
[data-theme="dark"] .text-yellow-600,
[data-theme="dark"] .text-yellow-700,
[data-theme="dark"] .text-yellow-800,
[data-theme="dark"] .text-yellow-900 { color: #facc15 !important; }
[data-theme="dark"] .bg-indigo-50,
[data-theme="dark"] .bg-indigo-100,
[data-theme="dark"] .bg-indigo-200 { background-color: rgba(99, 102, 241, 0.18) !important; }
[data-theme="dark"] .text-indigo-500,
[data-theme="dark"] .text-indigo-600,
[data-theme="dark"] .text-indigo-700,
[data-theme="dark"] .text-indigo-800,
[data-theme="dark"] .text-indigo-900 { color: #818cf8 !important; }
[data-theme="dark"] .bg-cyan-50,
[data-theme="dark"] .bg-cyan-100,
[data-theme="dark"] .bg-cyan-200 { background-color: rgba(6, 182, 212, 0.18) !important; }
[data-theme="dark"] .text-cyan-500,
[data-theme="dark"] .text-cyan-600,
[data-theme="dark"] .text-cyan-700,
[data-theme="dark"] .text-cyan-800,
[data-theme="dark"] .text-cyan-900 { color: #22d3ee !important; }
[data-theme="dark"] .bg-sky-50,
[data-theme="dark"] .bg-sky-100,
[data-theme="dark"] .bg-sky-200 { background-color: rgba(14, 165, 233, 0.18) !important; }
[data-theme="dark"] .text-sky-500,
[data-theme="dark"] .text-sky-600,
[data-theme="dark"] .text-sky-700,
[data-theme="dark"] .text-sky-800,
[data-theme="dark"] .text-sky-900 { color: #38bdf8 !important; }
[data-theme="dark"] .bg-teal-50,
[data-theme="dark"] .bg-teal-100,
[data-theme="dark"] .bg-teal-200 { background-color: rgba(20, 184, 166, 0.18) !important; }
[data-theme="dark"] .text-teal-500,
[data-theme="dark"] .text-teal-600,
[data-theme="dark"] .text-teal-700,
[data-theme="dark"] .text-teal-800,
[data-theme="dark"] .text-teal-900 { color: #2dd4bf !important; }
[data-theme="dark"] .bg-lime-50,
[data-theme="dark"] .bg-lime-100,
[data-theme="dark"] .bg-lime-200 { background-color: rgba(132, 204, 22, 0.18) !important; }
[data-theme="dark"] .text-lime-500,
[data-theme="dark"] .text-lime-600,
[data-theme="dark"] .text-lime-700,
[data-theme="dark"] .text-lime-800,
[data-theme="dark"] .text-lime-900 { color: #a3e635 !important; }
[data-theme="dark"] .bg-pink-50,
[data-theme="dark"] .bg-pink-100,
[data-theme="dark"] .bg-pink-200 { background-color: rgba(236, 72, 153, 0.18) !important; }
[data-theme="dark"] .text-pink-500,
[data-theme="dark"] .text-pink-600,
[data-theme="dark"] .text-pink-700,
[data-theme="dark"] .text-pink-800,
[data-theme="dark"] .text-pink-900 { color: #f472b6 !important; }
[data-theme="dark"] .bg-rose-50,
[data-theme="dark"] .bg-rose-100,
[data-theme="dark"] .bg-rose-200 { background-color: rgba(244, 63, 94, 0.18) !important; }
[data-theme="dark"] .text-rose-500,
[data-theme="dark"] .text-rose-600,
[data-theme="dark"] .text-rose-700,
[data-theme="dark"] .text-rose-800,
[data-theme="dark"] .text-rose-900 { color: #fb7185 !important; }
/* Red gets a dedicated, slightly darker/more saturated dark-mode red (rather than
the same bright #f87171 used for e.g. delete icons) for "not connected"/negative
status pills specifically, so they read as clearly negative rather than just "pink". */
[data-theme="dark"] .bg-red-50,
[data-theme="dark"] .bg-red-100,
[data-theme="dark"] .bg-red-200 { background-color: rgba(153, 27, 27, 0.35) !important; }
[data-theme="dark"] .hover\:bg-red-200:hover { background-color: rgba(153, 27, 27, 0.5) !important; }
[data-theme="dark"] .text-red-500,
[data-theme="dark"] .text-red-600 { color: #f87171 !important; }
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-800,
[data-theme="dark"] .text-red-900 { color: #fca5a5 !important; }
[data-theme="dark"] .border-red-300,
[data-theme="dark"] .border-red-400,
[data-theme="dark"] .border-red-500 { border-color: #f87171 !important; }
[data-theme="dark"] .ring-red-100 { --tw-ring-color: rgba(248, 113, 113, 0.25) !important; }
/* Heading/label shade that sits between the covered -900 and -700 grays */
[data-theme="dark"] .text-gray-800 { color: var(--color-text) !important; }
/* Project-specific "card"/"panel" classes that hardcode a white surface */
[data-theme="dark"] .grid-container,
[data-theme="dark"] .empty-state-container,
[data-theme="dark"] .login-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .gm-statistics-page .stat-card,
[data-theme="dark"] .licensing-page .section-card,
[data-theme="dark"] .licensing-page .step-badge,
[data-theme="dark"] .demo-clients-page .section-card,
[data-theme="dark"] .demo-clients-page .step-badge,
[data-theme="dark"] .lizenzportal-registration-page .section-card,
[data-theme="dark"] .bsb-layouts-page .controls-card,
[data-theme="dark"] .bsb-layouts-page .layouts-table-wrapper,
[data-theme="dark"] .bsb-dialog .app-group-card,
[data-theme="dark"] .bsb-dialog .assign-layout-name > .material-symbols-outlined,
[data-theme="dark"] .customer-selection-dialog__item,
[data-theme="dark"] .public-apis-statistics-page .stats-table-wrapper {
background-color: var(--color-surface);
}
/* Syncfusion grid: our own zebra-stripe/detail-row overrides use literal colors
and need a dark pass (base component chrome comes from the fluent2-dark.css swap) */
[data-theme="dark"] .e-grid .e-gridcontent .e-table tbody tr:nth-child(odd) { background-color: var(--color-surface); }
[data-theme="dark"] .e-grid .e-gridcontent .e-table tbody tr:nth-child(even) { background-color: var(--color-surface-alt); }
[data-theme="dark"] .e-grid .e-detailrow,
[data-theme="dark"] .e-grid .e-detailcell { background-color: var(--color-surface); }
/* Collapsible section (e.g. PortalSettings' "UI-Texte" block) - hide the
native marker, use our own Material Symbol chevron that rotates on open instead. */
.settings-disclosure > summary { list-style: none; }
.settings-disclosure > summary::-webkit-details-marker { display: none; }
.settings-disclosure > summary .material-symbols-outlined { transition: transform 0.15s ease; }
.settings-disclosure[open] > summary .material-symbols-outlined { transform: rotate(90deg); }
/* Theme switch, top bar */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 9999px;
border: 1px solid var(--color-border);
background: var(--color-surface-alt);
color: var(--color-text-secondary);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.theme-toggle:hover {
background: var(--color-accent-lighter);
color: var(--color-accent);
border-color: var(--color-accent-light);
transform: translateY(-1px);
}
.theme-toggle .material-symbols-outlined {
font-size: 20px;
}