:root { color-scheme: light dark; --ink: #131a24; --paper: #f6f7f9; --surface: #ffffff; --surface-2: #eef0f3; --line: #e1e5eb; --muted: #5b6472; --accent: #ac003c; --accent-ink: #ffffff; --sidebar: #ac003c; --sidebar-line: color-mix(in srgb, #ac003c 70%, black); --sidebar-text: #f3d9e0; --sidebar-text-dim: color-mix(in srgb, #f3d9e0 55%, #ac003c); --sidebar-active: rgba(255, 255, 255, 0.16); --ok: #157a4c; --ok-bg: #dcf3e7; --warn: #93590a; --warn-bg: #fbecd2; --err: #b3261e; --err-bg: #fbdedb; --muted-bg: #e9ebee; --focus: #ac003c; --shadow: 0 1px 2px rgba(19, 26, 36, 0.05), 0 1px 12px rgba(19, 26, 36, 0.04); --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; } /* Dunkle Werte gelten per Default schon bei OS-Praeferenz (prefers-color-scheme) UND explizit bei manueller Wahl (data-theme="dark" auf , siehe static/theme.js + /profile "Erscheinungsbild") - :root[data-theme="dark"] gewinnt dank hoeherer Spezifitaet auch dann, wenn das OS hell eingestellt ist. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #e7ebf1; --paper: #0b0f14; --surface: #12171f; --surface-2: #171d26; --line: #232b35; --muted: #8994a3; --accent: color-mix(in srgb, #ac003c 60%, white); --accent-ink: #ffffff; --sidebar: #ac003c; --sidebar-line: color-mix(in srgb, #ac003c 70%, black); --sidebar-text: #f3d9e0; --sidebar-text-dim: color-mix(in srgb, #f3d9e0 55%, #ac003c); --sidebar-active: rgba(255, 255, 255, 0.16); --ok: #49c98a; --ok-bg: #113523; --warn: #e0a94b; --warn-bg: #3a2c10; --err: #f0776e; --err-bg: #3a1613; --muted-bg: #1a202a; --focus: color-mix(in srgb, #ac003c 60%, white); --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 12px rgba(0, 0, 0, 0.3); } } :root[data-theme="dark"] { --ink: #e7ebf1; --paper: #0b0f14; --surface: #12171f; --surface-2: #171d26; --line: #232b35; --muted: #8994a3; --accent: #3fc1d3; --accent-ink: #06232a; --sidebar: #ac003c; --sidebar-line: color-mix(in srgb, #ac003c 70%, black); --sidebar-text: #f3d9e0; --sidebar-text-dim: color-mix(in srgb, #f3d9e0 55%, #ac003c); --sidebar-active: rgba(255, 255, 255, 0.16); --ok: #49c98a; --ok-bg: #113523; --warn: #e0a94b; --warn-bg: #3a2c10; --err: #f0776e; --err-bg: #3a1613; --muted-bg: #1a202a; --focus: #3fc1d3; --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 12px rgba(0, 0, 0, 0.3); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); background: var(--paper); color: var(--ink); font-size: 15px; -webkit-font-smoothing: antialiased; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } h1, h2, h3 { font-weight: 600; margin: 0; text-wrap: balance; } a { color: var(--accent); } button, a, input, select, textarea { font-family: inherit; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ===== app shell ===== */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 236px; flex: none; background: var(--sidebar); color: var(--sidebar-text); display: flex; flex-direction: column; padding: 1.1rem 0.9rem; border-right: 1px solid var(--sidebar-line); } .sb-brand { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.5rem 1.1rem; color: #fff; text-decoration: none; } .sb-brand .name { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; } .sb-group-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sidebar-text-dim); padding: 0.9rem 0.6rem 0.35rem; } .sb-nav { display: flex; flex-direction: column; gap: 1px; } .sb-nav a { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.6rem; border-radius: 7px; color: var(--sidebar-text); text-decoration: none; font-size: 0.88rem; font-weight: 500; } .sb-nav a svg { flex: none; opacity: 0.85; } .sb-nav a:hover { background: rgba(255, 255, 255, 0.04); color: #fff; } .sb-nav a.active { background: var(--sidebar-active); color: #fff; } .sb-nav a.active svg { opacity: 1; } .sb-foot { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--sidebar-line); } .content-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 1rem; padding: 0.95rem 1.75rem; background: var(--accent); color: #fff; } .topbar h1 { font-size: 1.15rem; color: #fff; } .topbar .tb-spacer { flex: 1; } .admin-chip { display: flex; align-items: center; gap: 0.55rem; } .avatar { width: 30px; height: 30px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; flex: none; } .topbar .avatar { background: #fff; color: var(--accent); } .admin-chip .who { line-height: 1.25; } .admin-chip .who .n { font-size: 0.85rem; font-weight: 600; } .admin-chip .who .r { font-size: 0.72rem; color: var(--muted); } .topbar .admin-chip .who .n { color: #fff; } .topbar .admin-chip .who .r { color: rgba(255, 255, 255, 0.75); } main { max-width: 1180px; margin: 0; padding: 1.5rem 1.75rem 3rem; width: 100%; } /* no-nav (public/pre-auth pages): narrower, centered */ .brand-header { display: flex; align-items: center; gap: 0.5rem; justify-content: center; padding: 1.75rem 1rem 0.5rem; color: var(--ink); text-decoration: none; font-weight: 600; } .brand-logo { height: 34px; width: auto; flex: none; } .sb-brand .brand-logo { height: 28px; background: #ffffff; border-radius: 6px; padding: 3px 6px; } body.no-nav main { max-width: 460px; margin: 0 auto; padding: 1rem 1rem 3rem; } /* ===== cards / panels ===== */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.15rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow); } .card > h2:first-child { font-size: 0.92rem; border-bottom: 1px solid var(--line); padding-bottom: 0.65rem; margin: -0.15rem 0 0.9rem; } /* ===== tables ===== */ .table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); font-size: 0.87rem; } th { color: var(--muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--surface-2); } .role-col-active { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; } th.role-col-active { color: var(--accent); } /* ===== status pills (class name "badge" kept for template/test compatibility) ===== */ .badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem 0.2rem 0.5rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600; white-space: nowrap; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; } .badge.requested, .badge.pending_enrollment, .badge.stale { background: var(--warn-bg); color: var(--warn); } .badge.active, .badge.connected { background: var(--ok-bg); color: var(--ok); } .badge.rejected, .badge.disabled { background: var(--err-bg); color: var(--err); } .badge.never, .badge.unknown { background: var(--muted-bg); color: var(--muted); } form.inline { display: inline; } /* ===== Karten-Ansicht fuer Standort-/Client-Listen ===== */ .entity-toolbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .entity-toolbar input[type="search"] { max-width: 320px; } .entity-toolbar .muted { white-space: nowrap; } .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; } .entity-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; box-shadow: var(--shadow); text-decoration: none; color: inherit; display: block; } .entity-card:hover { border-color: var(--accent); } .entity-card .entity-card-title { font-weight: 600; margin-bottom: 0.4rem; } .entity-card .entity-card-meta { color: var(--muted); font-size: 0.82rem; margin: 0.15rem 0; } .entity-card .badge { margin-right: 0.3rem; } .tag-pill { display: inline-flex; align-items: center; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: var(--muted-bg); color: var(--muted); margin: 0.3rem 0.3rem 0 0; } /* ===== forms ===== */ input, textarea, select { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: 0.95rem; } input[type="checkbox"], input[type="radio"] { width: auto; } label { display: block; margin: 0.75rem 0 0.25rem; font-weight: 600; font-size: 0.85rem; } button, .btn { display: inline-block; padding: 0.45rem 0.9rem; border-radius: 7px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 600; cursor: pointer; font-size: 0.85rem; text-decoration: none; } button.secondary, .btn.secondary { background: transparent; color: var(--accent); } button.danger, .btn.danger { background: var(--surface); color: var(--err); border-color: var(--err); } /* Segmented-Control-Look fuer den Theme-Umschalter (/profile) - unausgewaehlte Optionen wie .secondary, die aktive wie der normale Button-Default. */ #theme-switch button { background: transparent; color: var(--muted); border-color: var(--line); } #theme-switch button.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* ===== flashes ===== */ .flash { padding: 0.6rem 0.9rem; border-radius: 8px; margin-bottom: 0.75rem; font-size: 0.88rem; border: 1px solid transparent; } .flash.success { background: var(--ok-bg); color: var(--ok); } .flash.error { background: var(--err-bg); color: var(--err); } .flash.info { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); } .flash.warn { background: var(--warn-bg); color: var(--warn); } .flash a { color: inherit; font-weight: 600; } /* ===== stats ===== */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .stat { text-align: center; } .stat .value { font-size: 1.9rem; font-weight: 700; font-family: var(--font-mono); } .stat .label { color: var(--muted); font-size: 0.82rem; margin-top: 0.15rem; } pre, code { font-family: var(--font-mono); font-size: 0.85rem; } pre { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 0.8rem; overflow-x: auto; } code { background: var(--surface-2); border-radius: 4px; padding: 0.1rem 0.35rem; } .muted { color: var(--muted); } @media (max-width: 760px) { .sidebar { display: none; } }