*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}.container{width:100%;}@media (min-width: 640px){.container{max-width:640px;}}@media (min-width: 768px){.container{max-width:768px;}}@media (min-width: 1024px){.container{max-width:1024px;}}@media (min-width: 1280px){.container{max-width:1280px;}}@media (min-width: 1536px){.container{max-width:1536px;}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}.visible{visibility:visible;}.invisible{visibility:hidden;}.absolute{position:absolute;}.fixed{position:fixed;}.relative{position:relative;}.sticky{position:sticky;}.static{position:static;}.left-0\.5{left:0.125rem;}.top-0\.5{top:0.125rem;}.grid{display:grid;}.col-span-full{grid-column:1/-1;}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}.m\[0\]{margin:0;}.m\[1\]{margin:1;}.m\[2\]{margin:2;}.m\[badge\]{margin:badge;}.m\[role\]{margin:role;}.m\[s\]{margin:s;}.m\[status\]{margin:status;}.m\[type\]{margin:type;}.m21{margin:5.25rem;}.mx{margin-left:1rem;margin-right:1rem;}.mb-1{margin-bottom:0.25rem;}.mb-1\.5{margin-bottom:0.375rem;}.mb-2{margin-bottom:0.5rem;}.mb-3{margin-bottom:0.75rem;}.mb-4{margin-bottom:1rem;}.me{margin-inline-end:1rem;}.ml-1{margin-left:0.25rem;}.ml-2{margin-left:0.5rem;}.ml-3{margin-left:0.75rem;}.ml-auto{margin-left:auto;}.ms{margin-inline-start:1rem;}.mt-0\.5{margin-top:0.125rem;}.mt-1{margin-top:0.25rem;}.mt-2{margin-top:0.5rem;}.mt-2\.5{margin-top:0.625rem;}.mt-3{margin-top:0.75rem;}.mt-4{margin-top:1rem;}.inline{display:inline;}.block{display:block;}.inline-block{display:inline-block;}.contents{display:contents;}.hidden{display:none;}.h-1\.5{height:0.375rem;}.h-12{height:3rem;}.h-2,.h2{height:0.5rem;}.h-3,.h3{height:0.75rem;}.h-4,.h4{height:1rem;}.h-5{height:1.25rem;}.h-6{height:1.5rem;}.h-8{height:2rem;}.h-full{height:100%;}.h1{height:0.25rem;}.max-w-\[220px\]{max-width:220px;}.max-w-md{max-width:28rem;}.max-w-xl{max-width:36rem;}.max-w-xs{max-width:20rem;}.min-h-\[420px\]{min-height:420px;}.min-h-0{min-height:0;}.min-w-0{min-width:0;}.w-1\/2{width:50%;}.w-10{width:2.5rem;}.w-14{width:3.5rem;}.w-2{width:0.5rem;}.w-20{width:5rem;}.w-24{width:6rem;}.w-3{width:0.75rem;}.w-32{width:8rem;}.w-36{width:9rem;}.w-4{width:1rem;}.w-40{width:10rem;}.w-44{width:11rem;}.w-48{width:12rem;}.w-5{width:1.25rem;}.w-52{width:13rem;}.w-56{width:14rem;}.w-6{width:1.5rem;}.w-8{width:2rem;}.w-full{width:100%;}.flex{display:flex;}.inline-flex{display:inline-flex;}.flex-1{flex:1 1 0%;}.flex-shrink,.shrink{flex-shrink:1;}.shrink-0{flex-shrink:0;}.grow{flex-grow:1;}.flex-col{flex-direction:column;}.flex-wrap{flex-wrap:wrap;}.table{display:table;}.border-collapse{border-collapse:collapse;}.peer:checked~.peer-checked\:translate-x-5{--un-translate-x:1.25rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}@keyframes pulse{0%, 100% {opacity:1} 50% {opacity:.5}}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4,0,.6,1) infinite;}.animate-spin{animation:spin 1s linear infinite;}.cursor-default{cursor:default;}.cursor-pointer{cursor:pointer;}.select-none{-webkit-user-select:none;user-select:none;}.resize{resize:both;}.items-start{align-items:flex-start;}.items-end{align-items:flex-end;}.items-center{align-items:center;}.justify-center{justify-content:center;}.justify-between{justify-content:space-between;}.gap-1{gap:0.25rem;}.gap-1\.5{gap:0.375rem;}.gap-2{gap:0.5rem;}.gap-2\.5{gap:0.625rem;}.gap-3{gap:0.75rem;}.gap-4{gap:1rem;}.gap-6{gap:1.5rem;}.space-y-0\.5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.125rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.125rem * var(--un-space-y-reverse));}.space-y-1\.5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.375rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.375rem * var(--un-space-y-reverse));}.space-y-1>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.25rem * var(--un-space-y-reverse));}.space-y-2>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.5rem * var(--un-space-y-reverse));}.space-y-3>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.75rem * var(--un-space-y-reverse));}.space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1rem * var(--un-space-y-reverse));}.space-y-5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.25rem * var(--un-space-y-reverse));}.space-y-6>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.5rem * var(--un-space-y-reverse));}.overflow-auto{overflow:auto;}.overflow-hidden{overflow:hidden;}.overflow-x-auto{overflow-x:auto;}.overflow-y-auto{overflow-y:auto;}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.whitespace-pre-wrap{white-space:pre-wrap;}.break-words{overflow-wrap:break-word;}.break-all{word-break:break-all;}.b,.border{border-width:1px;}.border-2{border-width:2px;}.border-b{border-bottom-width:1px;}.border-b-2{border-bottom-width:2px;}.border-l-4{border-left-width:4px;}.border-r{border-right-width:1px;}.border-t{border-top-width:1px;}.rounded{border-radius:0.25rem;}.rounded-full{border-radius:9999px;}.rounded-lg{border-radius:0.5rem;}.rounded-md{border-radius:0.375rem;}.rounded-xl{border-radius:0.75rem;}.rounded-r-lg{border-top-right-radius:0.5rem;border-bottom-right-radius:0.5rem;}.rounded-t-lg{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;}.bg-white{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity)) /* #fff */;}.peer:checked~.peer-checked\:bg-\[var\(--iio-accent\)\]{background-color:var(--iio-accent) /* var(--iio-accent) */;}.hover\:bg-\[var\(--iio-surface-2\)\]:hover{background-color:var(--iio-surface-2) /* var(--iio-surface-2) */;}.p-2,.p2{padding:0.5rem;}.p-2\.5{padding:0.625rem;}.p-3,.p3{padding:0.75rem;}.p-4,.p4{padding:1rem;}.p-5{padding:1.25rem;}.p0{padding:0;}.p1{padding:0.25rem;}.p50{padding:12.5rem;}.pa{padding:auto;}.px,.px-4{padding-left:1rem;padding-right:1rem;}.px-1{padding-left:0.25rem;padding-right:0.25rem;}.px-1\.5{padding-left:0.375rem;padding-right:0.375rem;}.px-2{padding-left:0.5rem;padding-right:0.5rem;}.px-2\.5{padding-left:0.625rem;padding-right:0.625rem;}.px-3{padding-left:0.75rem;padding-right:0.75rem;}.px-5{padding-left:1.25rem;padding-right:1.25rem;}.py,.py-4{padding-top:1rem;padding-bottom:1rem;}.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem;}.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}.py-12{padding-top:3rem;padding-bottom:3rem;}.py-14{padding-top:3.5rem;padding-bottom:3.5rem;}.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem;}.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}.py-8{padding-top:2rem;padding-bottom:2rem;}.pb{padding-bottom:1rem;}.pe{padding-inline-end:1rem;}.pe--sm{padding-inline-end:calc(0.875rem * -1);}.pl-3{padding-left:0.75rem;}.pt,.pt-4{padding-top:1rem;}.pt-2{padding-top:0.5rem;}.pt-3{padding-top:0.75rem;}.pt\[0\]{padding-top:0;}.pt\[1\]{padding-top:1;}.text-center{text-align:center;}.text-left{text-align:left;}.text-right{text-align:right;}.indent{text-indent:1.5rem;}.text-\[10\.5px\]{font-size:10.5px;}.text-\[10px\]{font-size:10px;}.text-\[11px\]{font-size:11px;}.text-\[9px\]{font-size:9px;}.text-2xl{font-size:1.5rem;line-height:2rem;}.text-3xl{font-size:1.875rem;line-height:2.25rem;}.text-4xl{font-size:2.25rem;line-height:2.5rem;}.text-5xl{font-size:3rem;line-height:1;}.text-7xl{font-size:4.5rem;line-height:1;}.text-base{font-size:1rem;line-height:1.5rem;}.text-lg{font-size:1.125rem;line-height:1.75rem;}.text-sm{font-size:0.875rem;line-height:1.25rem;}.text-xl{font-size:1.25rem;line-height:1.75rem;}.text-xs{font-size:0.75rem;line-height:1rem;}.text-amber{--un-text-opacity:1;color:rgb(251 191 36 / var(--un-text-opacity)) /* #fbbf24 */;}.text-blue-400{--un-text-opacity:1;color:rgb(96 165 250 / var(--un-text-opacity)) /* #60a5fa */;}.text-gray-400{--un-text-opacity:1;color:rgb(156 163 175 / var(--un-text-opacity)) /* #9ca3af */;}.text-green,.text-green-400{--un-text-opacity:1;color:rgb(74 222 128 / var(--un-text-opacity)) /* #4ade80 */;}.text-red-400{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity)) /* #f87171 */;}.text-yellow-400{--un-text-opacity:1;color:rgb(250 204 21 / var(--un-text-opacity)) /* #facc15 */;}.font-black{font-weight:900;}.font-bold{font-weight:700;}.font-normal{font-weight:400;}.font-semibold{font-weight:600;}.leading-none{line-height:1;}.leading-relaxed{line-height:1.625;}.tracking-wide{letter-spacing:0.025em;}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}.uppercase{text-transform:uppercase;}.capitalize{text-transform:capitalize;}.normal-case{text-transform:none;}.italic{font-style:italic;}.tabular-nums{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction);}.underline{text-decoration-line:underline;}.no-underline{text-decoration:none;}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}.active-tab:active{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}.accent-\[var\(--iio-accent\)\]{accent-color:var(--iio-accent) /* var(--iio-accent) */;}.opacity-60{opacity:0.6;}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.outline{outline-style:solid;}.ring{--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.blur{--un-blur:blur(8px);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.hover\:brightness-110:hover{--un-brightness:brightness(1.1);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.filter{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.active-filter:active{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.backdrop-filter{-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.ease,.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}.ease-in{transition-timing-function:cubic-bezier(0.4, 0, 1, 1);}.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1);}.\@container{container-type:inline-size;}/* IIO Design Tokens — Single Source of Truth * Migrated from node/portal/portal.css (battle-tested) * DO NOT ADD VALUES HERE MANUALLY — extend the token set, don't override */ :root { /* ── Color — Semantic ───────────────────────────────────────────────── */ --bg: #ffffff; --surface: #f7f7f8; --surface-2: #ededef; --border: #e8e8eb; --border-hover: #c0c0c8; /* Fallback vor Theme-Load; agt/midnight/space bridgen --border-hover selbst (R13) */ --text: #0d0d10; --text-2: #6b6b78; --text-3: #a8a8b3; --accent: var(--iio-accent, #2563eb); /* backed by quantum.css / themes.css */ --accent-fg: #ffffff; --tenant-accent: var(--accent); /* ── Color — Status ─────────────────────────────────────────────────── */ --green: #16a34a; --amber: #b45309; --red: #dc2626; --purple: #7c3aed; /* ── Layout ─────────────────────────────────────────────────────────── */ --sidebar-w: 220px; --header-h: 48px; --page-max: min(1200px, calc(100vw - var(--page-pad) * 2)); --page-pad: clamp(16px, 2.5vw, 64px); --content-max: 1100px; --content-pad: clamp(16px, 2vw, 28px); /* ── Spacing ─────────────────────────────────────────────────────────── */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 40px; /* ── Typography (fluid) ─────────────────────────────────────────────── */ --text-xs: clamp(9px, calc(0.2vw + 7px), 11px); --text-sm: clamp(10px, calc(0.3vw + 7px), 13px); --text-base: clamp(11px, calc(0.4vw + 7px), 14px); --text-lg: clamp(14px, calc(0.5vw + 9px), 19px); --text-xl: clamp(18px, calc(0.7vw + 11px), 26px); /* ── Surfaces ───────────────────────────────────────────────────────── */ --r: 12px; --sh: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03); --sh-lift: 0 2px 4px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.08); --sh-xl: 0 8px 16px rgba(0,0,0,.06), 0 24px 56px rgba(0,0,0,.14); --ease: cubic-bezier(.4, 0, .2, 1); /* Semantic surface tints */ --iio-surface-ok: #e8f5e9; --iio-surface-warn: #fff8e1; --iio-surface-err: #ffebee; --iio-surface-info: #e3f2fd; } /* Dark mode */ [data-theme="dark"] { --bg: #0f0f13; --surface: #13141a; --surface-2: #1c1d24; --surface-3: #222330; /* R12: fehlte */ --border: #2a2b33; --border-hover: #363742; --text: #f0f0f4; --text-2: #8b8b9a; --text-3: #50505e; --green: #4ade80; --amber: #fbbf24; --red: #f87171; --purple: #a78bfa; /* R12: fehlte im dark mode */ /* R12: Accent-Varianten für dark mode */ --accent-light: color-mix(in srgb, var(--iio-accent) 15%, transparent); --accent-fg: #ffffff; /* R12: Shadow-Anpassungen für dark mode */ --sh: 0 1px 3px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.3); --sh-lift: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3); /* Semantic surface tints */ --iio-surface-ok: #0d2e14; --iio-surface-warn: #2e1a00; --iio-surface-err: #1a0505; --iio-surface-info: #0a1520; } /* ── Global Reset ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* Ensure app root fills the viewport — prevents body background bleeding through */ html, body { height: 100%; } #app { height: 100%; min-height: 100dvh; display: flex; flex-direction: column; } body { font-family: var(--iio-font-base, var(--iio-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif)); font-size: var(--text-base); /* --bg is bridged from --iio-bg by each theme (agt/midnight). --iio-bg is the fallback in case the bridge hasn't loaded yet. */ background: var(--bg, var(--iio-bg, hsl(0 0% 92%))); color: var(--text, var(--iio-ink, hsl(0 0% 16%))); margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ── Scrollbar ───────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); } /* ── Focus Ring ──────────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ── Selection ───────────────────────────────────────────────────────────── */ ::selection { background: color-mix(in srgb, var(--accent) 20%, transparent); } /* ── Link Reset ──────────────────────────────────────────────────────────── */ a { color: inherit; } /* ── Transition Defaults ─────────────────────────────────────────────────── */ button, a { transition: all 140ms var(--ease); } /* ── Shared Component Classes ────────────────────────────────────────────── */ .iio-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; border: 1px solid var(--border); transition: all 150ms var(--ease); text-decoration: none; white-space: nowrap; } .iio-btn--primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .iio-btn--primary:hover { filter: brightness(1.1); } .iio-btn--secondary { background: var(--surface); color: var(--text); } .iio-btn--secondary:hover { border-color: var(--border-hover); } .iio-btn--danger { background: transparent; color: var(--red); border-color: var(--red); } .iio-btn--danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); } /* ── Badge ──────────────────────────────────────────────────────────────── */ .iio-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; } /* ── --iio-* Bridge (PSP / LIMID v2 / OP-Cube Kompatibilität) ─────────────── * Mappt --iio-* Namespace auf Cockpit-native tokens. * Ermöglicht PSP-Komponenten (StatPanel, StatusPanel) direkt in Cockpit. * Ergänzt 2026-05-26 — iio/theme/_iio-tokens-v2.css ist die SSOT. * ─────────────────────────────────────────────────────────────────────────── */ :root { /* Surfaces */ --iio-surface: var(--bg); --iio-surface-2: var(--surface, #f7f7f8); --iio-surface-3: var(--surface-2, #ededef); /* Ink (Text) */ --iio-ink-1: var(--text, #0d0d10); --iio-ink-2: var(--text-2, #6b6b78); --iio-ink-3: var(--text-3, #a8a8b3); --iio-ink-4: color-mix(in srgb, var(--text-3, #a8a8b3) 60%, transparent); /* Border */ --iio-border: var(--border); --iio-border-strong: var(--border-hover); /* Accent */ --iio-accent-dark: color-mix(in srgb, var(--iio-accent) 70%, #fff); --iio-accent-subtle: color-mix(in srgb, var(--iio-accent) 12%, transparent); /* Status Semantic — PSP Threshold colors */ --iio-ok: var(--iio-green-neon, #00e87a); --iio-warn: var(--iio-yellow-neon, #ffcc00); --iio-error: var(--iio-risk, #ff5555); /* aliases --iio-risk for theme-awareness */ --iio-error-dark: var(--iio-red-600, #dc2626); --iio-critical: #ff8800; --iio-critical-dark: #ea580c; --iio-info: var(--iio-cyan-neon, #00d4ff); --iio-agent: var(--iio-purple-neon, #b47aff); --iio-agent-dark: hsl(118 65% 24%) /* SSOT: dunkles agent-grün */; /* Typography */ --iio-font-sans: var(--font-sans, system-ui, sans-serif); --iio-font-mono: var(--font-mono, ui-monospace, monospace); /* Spacing (passthrough) */ --iio-space-1: var(--sp-xs, 4px); --iio-space-2: var(--sp-sm, 8px); --iio-space-4: var(--sp-md, 16px); --iio-space-6: var(--sp-lg, 24px); --iio-space-8: var(--sp-xl, 40px); } /* ── R07: Mobile Responsive Utilities ───────────────────────────────────── */ /* Touch target minimum (WCAG 2.5.5: ≥44px) */ .touch-target { min-height: 44px; min-width: 44px; } /* UX-TOUCH-001: Touch-target baseline (WCAG 2.5.5) — NUR fuer Touch/Mobile. Bug (bis 2026-07-10): Regel lief ungescoped global und blies JEDEN Button im Desktop-Cockpit (Maus/Trackpad-Bedienung) auf min. 44px Hoehe auf, unabhaengig von size-Klasse (xs/sm/md) — Ursache der "zu hohen" Buttons im ganzen Cockpit (HITL-Gates Y/N/D, Filter-Pills, etc.). Auf echten Touch-Geraeten (pointer: coarse) bzw. schmalen Viewports bleibt der 44px-Mindeststandard bestehen, auf Desktop/Maus gilt die tatsaechliche Groesse der Komponente (siehe IIOButton size-Varianten). */ @media (max-width: 768px), (pointer: coarse) { button:not(.q-btn--dense):not(.icon-btn-sm), a.nav-item, a.router-link-active, [role="button"], [role="link"], input[type="submit"], input[type="button"] { min-height: 44px; } } /* Responsive sidebar width */ :root { --sidebar-w-mobile: 0px; --sidebar-w-tablet: 60px; /* icon-only collapsed */ } /* Global mobile adjustments */ @media (max-width: 768px) { :root { --content-pad: 12px; --sp-lg: 16px; --sp-xl: 24px; } /* Operator layout: full-width on mobile */ .op-layout { grid-template-columns: 1fr !important; } .op-nav { display: none !important; } .op-nav--mobile-open { display: flex !important; position: fixed; inset: 0; z-index: 1000; background: var(--bg); } /* Cards stack vertically */ .cc-analytics-row { grid-template-columns: 1fr !important; } .cc-tiles { grid-template-columns: repeat(2, 1fr) !important; } /* Status bar: hide labels on small screens */ .op-matomo-label, .op-neural-label { display: none; } .op-rate-badge { font-size: 9px; } } @media (max-width: 480px) { :root { --content-pad: 8px; } .cc-tiles { grid-template-columns: repeat(2, 1fr) !important; } /* KPI strip: 2 columns on mobile */ .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; } } /* Scroll improvements on touch devices */ @media (hover: none) and (pointer: coarse) { /* Smooth momentum scrolling */ .iio-view-content, .op-nav__scroll, .queue-view, .iv-feed { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Larger interactive elements */ button, a, [role="button"] { min-height: 44px; } /* Hide hover states */ .thg-card:hover { transform: none; box-shadow: var(--sh); } } /* ── IIO Tab-Icon system (AGT Monochrome, 2026-06-10) ─────────────────────── */ .iio-tab-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-right: 5px; vertical-align: middle; flex-shrink: 0; opacity: 0.75; } .iio-tab-icon svg { width: 14px; height: 14px; fill: currentColor; } /* Active tab: icon gets accent color */ button[style*="var(--iio-accent)"] .iio-tab-icon, .iio-tab-icon.active { opacity: 1; } /* Command/Search icon slot (inline sprite-aware) */ .iio-icon-slot { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; } .iio-icon-slot svg { fill: currentColor; } /* ── Hub Tab-Panel fade transition ──────────────────────────────────────────── */ /* Wraps the content area of each hub; children fade in on tab change. */ .hub-panel-enter-active { transition: opacity 140ms var(--iio-ease-spring, ease-out); } .hub-panel-leave-active { transition: opacity 80ms ease-in; position: absolute; } .hub-panel-enter-from, .hub-panel-leave-to { opacity: 0; } /** * IIO Quantum Design System — v1.1 * The world's first agentic-native CSS token system. * * ═══════════════════════════════════════════════════════ * THEMING ARCHITECTURE — 3 Systeme, eine Wahrheit * ═══════════════════════════════════════════════════════ * * SYSTEM 1: iio/theme/_iio-tokens-v2.css ← SSOT (Single Source of Truth) * Scope: ALLE IIO-Surfaces (Manual-Portal, LIMID, Cockpit, Websites) * Tokens: --iio-blue-*, --iio-green-*, --iio-surface, --iio-accent, ... * Erzeugt: iio-theme-sync.py aus YAML-Sources (tenant-spezifisch) * Tenant-Themes: iio/theme/families/*/style.css (bilz, netplans, mvtec...) * * SYSTEM 2: quantum.css (dieses File) ← Cockpit/App Semantic Layer * Scope: Cockpit-App + @iio/sdk Baukasten (alle Vue-Komponenten) * Tokens: --iio-* (semantic, single namespace post-cutover) * Bridge: --iio-accent → bridged zu --iio-accent (unten in Bridge-Section) * Ergänzt System 1 um: Motion, Z-Index, Type Scale, Component-Tokens * * SYSTEM 3: themes.css ← Cockpit Multi-Theme (Kontext-spezifisch) * Scope: Nur Cockpit-App (midnight, enterprise, vibrant, nature) * Überschreibt: --iio-* tokens per data-theme Attribut * NICHT für Manual-Portal oder Websites * * FAZIT: Kein Chaos — hierarchisches System: * _iio-tokens-v2.css (primitives) → quantum.css (semantics) → themes.css (context) * ═══════════════════════════════════════════════════════ * * Philosophy: * Tokens are not just colors — they encode INTENT. * Every token maps to a semantic meaning that both * humans AND AI agents understand. * * Layer architecture: * L1: Physical (raw hsl values) * L2: Semantic (intent-mapped aliases) * L3: Component (component-scoped overrides) * L4: Context (agent/human/emergency mode) */ /* ═══════════════════════════════════════════════════════ L1: PHYSICAL — Raw color palette (HSL) Never use these directly outside of L2 aliases. ═══════════════════════════════════════════════════════ */ :root { /* Blues — trust, information, interaction */ --iio-blue-400: hsl(214 80% 60%); /* Greens — success, go, health */ --iio-green-400: hsl(142 69% 45%); /* AGT Portal-Mono — kanonischer Accent (SSOT: iio/theme/_iio-tokens-v2.css) */ /* Rename 2026-07-08: agt-green → agt-mono (kein Grün) */ --iio-agt-mono: #0a0a0a; /* primärer Accent (light) */ /* Ambers — warning, review, caution */ --iio-amber-50: hsl(38 100% 96%); --iio-amber-400: hsl(38 92% 55%); --iio-amber-500: hsl(38 88% 46%); /* Reds — error, danger, block */ --iio-red-50: hsl(0 100% 97%); --iio-red-400: hsl(0 84% 60%); --iio-red-500: hsl(0 79% 52%); --iio-red-600: hsl(0 74% 44%); /* Purples — intelligence, AI, neural */ /* Teals — agent, automation, flow */ --iio-teal-50: hsl(180 72% 96%); --iio-teal-500: hsl(180 58% 36%); /* Neutrals */ --iio-gray-0: hsl(220 20% 100%); --iio-gray-50: hsl(220 16% 97%); --iio-gray-100: hsl(220 14% 94%); --iio-gray-200: hsl(220 12% 88%); --iio-gray-300: hsl(220 10% 78%); --iio-gray-400: hsl(220 8% 62%); --iio-gray-500: hsl(220 7% 48%); --iio-gray-600: hsl(220 8% 36%); --iio-gray-700: hsl(220 10% 26%); --iio-gray-800: hsl(220 12% 18%); --iio-gray-900: hsl(220 14% 11%); --iio-gray-950: hsl(220 16% 7%); /* ═══════════════════════════════════════════════════════ POST-CUTOVER COMPAT — missing --iio-* definitions (Phase-1c) Tokens used by components but not defined after bridge removal. 22 SSOT-backed values + 18 semantic aliases → canonical --iio-*. ═══════════════════════════════════════════════════════ */ /* SSOT-backed */ --iio-border: var(--iio-line); --iio-ease: cubic-bezier(0.4, 0, 0.2, 1); --iio-ease-enter: cubic-bezier(0, 0, 0.2, 1); --iio-ease-exit: cubic-bezier(0.4, 0, 1, 1); --iio-ease-fluid: cubic-bezier(0.4, 0, 0.2, 1); --iio-ease-snap: cubic-bezier(0.2, 0, 0, 1.0); --iio-glow-subtle: 0 0 12px; --iio-ink-1: var(--iio-ink); --iio-heartbeat: 1.8s; --iio-neural-dormant: hsl(240 15% 30%); --iio-r-xs: 4px; --iio-radius: 8px; --iio-radius-full: 9999px; /* Semantic aliases → canonical */ --iio-amber: var(--iio-warn); --iio-green: var(--iio-ok); --iio-red: var(--iio-risk); --iio-success: var(--iio-ok); --iio-text: var(--iio-ink); --iio-text-primary: var(--iio-ink); --iio-text-secondary: var(--iio-ink-2); --iio-text-muted: var(--iio-muted); --iio-bg-surface: var(--iio-surface); /* alias: surface für Card-Hintergründe */ --iio-bg-inverse: var(--iio-ink); /* Invertierter Hintergrund */ /* ── SSOT-Aliases (aus _iio-tokens-v2.css) ── */ --iio-error: var(--iio-risk); --iio-error-dark: hsl(0 72% 36%); --iio-critical: hsl(25 90% 46%); --iio-info: hsl(210 80% 44%); --iio-success: var(--iio-ok); --iio-ink-2: var(--iio-text-sub); --iio-ink-3: var(--iio-muted); --iio-ink-4: color-mix(in srgb, var(--iio-muted) 60%, transparent); --iio-accent-subtle: color-mix(in srgb, var(--iio-accent) 8%, transparent); /* --iio-accent-rgb removed — deprecated. Use color-mix(in srgb,var(--iio-accent) X%,transparent) */ --iio-border-rgb: 226, 228, 238; --iio-gradient-hero: linear-gradient(135deg, var(--iio-accent), var(--iio-agent)); --iio-sensor-val: var(--iio-accent); --iio-z-debug: 9000; --iio-z-status: 8000; } /* ═══════════════════════════════════════════════════════ L2: SEMANTIC — Intent-mapped tokens (light mode) ═══════════════════════════════════════════════════════ */ :root { /* ── Backgrounds ── */ --iio-bg: var(--iio-gray-0); --iio-bg-sunken: var(--iio-gray-50); --iio-bg-raised: var(--iio-gray-0); /* ── Surfaces ── */ --iio-surface: var(--iio-gray-0); /* cards, panels */ --iio-surface-mid: var(--iio-gray-50); /* inputs, code blocks */ --iio-surface-2: var(--iio-gray-100); /* hover states */ --iio-surface-3: var(--iio-gray-200); /* dividers, skeletons */ /* ── Borders ── */ --iio-line: var(--iio-gray-200); --iio-border-focus: var(--iio-blue-400); --iio-border-strong:var(--iio-gray-300); /* ── Text ── */ --iio-ink: var(--iio-gray-900); --iio-text-sub: var(--iio-gray-600); --iio-muted: var(--iio-gray-400); --iio-on-accent:var(--iio-gray-0); /* ── Intent: Interaction ── */ /* Accent — monochrom (themes.css [data-theme=agt] overrides sowieso). */ --iio-accent: #0a0a0a; --iio-accent-hover:#000000; --iio-accent-light:rgba(10,10,10,0.08); --iio-accent-mid: #a3a3a3; /* ── Intent: Status ── */ --iio-ok: #0a0a0a; /* mono: kein Grün (user decision 2026-07-08) */ --iio-ok-bg: #f0f0f0; --iio-warn: var(--iio-amber-500); --iio-warn-bg: var(--iio-amber-50); --iio-risk: var(--iio-red-500); --iio-risk-bg: var(--iio-red-50); /* ── Intent: Agent / AI ── */ --iio-agent: var(--iio-agt-mono); /* mono: kein Grün (user decision 2026-07-08) */ --iio-agent-light: rgba(10,10,10,0.06); /* ── Agent-type palette (IADS session types) ── */ --iio-type-ai: var(--iio-agent); /* AI = agent-grün */ --iio-type-ci: var(--iio-accent); /* CI = accent */ /* ── Intent: Automation / Flow ── */ --iio-flow: var(--iio-teal-500); --iio-flow-light: var(--iio-teal-50); /* ── Intent: HITL ── */ --iio-hitl: hsl(38 88% 46%); --iio-hitl-light: hsl(38 100% 96%); /* ── Intent: Governance ── */ /* ── Intent: Nav-Kategorien (Operator-Fund 2026-08-10: "eines ist blau, die anderen schwarz" -- Sidebar-Gruppenfarben zeigten vorher auf --iio-accent/--iio-ok, die im aktiven Mono-Theme [data-theme="agt"] BEIDE auf #0a0a0a faerben ["mono: kein Gruen", Entscheidung 2026-07-08] -- nur --iio-info blieb blau, macht "Plattform" zufaellig zur einzigen farbigen Zeile. Diese 5 Tokens sind BEWUSST eigenstaendig (nicht an --iio-accent/--iio-ok gekoppelt) und theme-uebergreifend fix definiert [kein Override in themes.css noetig] -- garantiert 5 klar unterscheidbare Farben in JEDEM Theme, unabhaengig von der jeweiligen Monochrom-/Brand-Akzent-Entscheidung. Nutzung: IIONavPane.vue GROUP_COLOR_MAP + DOMAIN_COLOR_MAP. Operator-Entscheidung 2026-08-10 hebt fuer diese 5 Zeilen die aeltere "Labor bleibt gedaempft"-Vorgabe [Operator-Fund 2026-08-07] explizit auf: "mach alle Icons mit Farbakzenten". ── */ --iio-nav-control: hsl(226 82% 58%); /* Steuerung — Blau/Indigo (Kommando) */ --iio-nav-tenants: hsl(38 75% 42%); /* Mandanten — Gold/Bernstein (Kunden); Fix 2026-08-10: Operator-Fund "was anderes wie rosa/lila", ersetzt Magenta hsl(330 72% 56%) */ /* FAB-04 (EPIC FAB, 2026-08-23): intelligence/create neu -- Hue aus den beiden groessten freien Luecken zwischen den Bestandsfarben (28,38,154, 189,226,268,350) gewaehlt, damit alle 8 Gruppen unterscheidbar bleiben. */ --iio-nav-intelligence: hsl(309 68% 55%); /* Analyse — Magenta/Pink (Erkenntnis) */ --iio-nav-create: hsl(96 50% 36%); /* Fertigung — Lindgrün (Bau/Fertigung) */ --iio-nav-build: hsl(189 85% 42%); /* Plattform — Teal/Cyan (Infra/Build) */ --iio-nav-grow: hsl(154 62% 38%); /* Geschäft — Smaragd (Umsatz/Growth) */ --iio-nav-labs: hsl(28 90% 52%); /* Labor — Amber/Orange (Experimentell) */ /* Ergaenzt 2026-08-12 (gate.cockpit-scope-change-nav-groups-20260812): zwei weitere Nav-Gruppen (Sicherheit, Entwicklung). Bewusst mit deutlichem Hue-Abstand zu den 5 bestehenden Toenen (226/38/189/154/28) gewaehlt -- Violett 268 und Rot 350 sind die letzten beiden groesseren Luecken im Kreis, damit bleiben alle 7 Gruppen auf einen Blick unterscheidbar. */ --iio-nav-security: hsl(350 70% 50%); /* Sicherheit — Rot/Karmin (Schutz/Nachweis) */ --iio-nav-dev: hsl(268 70% 58%); /* Entwicklung — Violett (Werkzeuge) */ /* ── Shadows ────────────────────────────────────────────────────────────── Premium-Refresh (2026-08): "Untitled UI / Stripe"-Skala — tiefenneutrales Blauschwarz (16,24,40) statt reinem Schwarz wirkt weicher/hochwertiger als harte rgba(0,0,0,x)-Schatten, zwei gestapelte Layer (weiter Blur + enger Kontakt-Schatten) statt einem einzelnen Blur -- das ist der Unterschied zwischen "Karte liegt auf der Seite" (alt: nur Outline) und "Karte schwebt ueber der Seite" (neu). Ruhig genug fuer Operator-Dichte, sichtbar genug fuer "hochwertig". ── */ --iio-shadow-xs: 0 1px 2px rgba(16,24,40,.05); --iio-shadow-sm: 0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.05), 0 0 0 1px rgba(16,24,40,.02); --iio-shadow-md: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06); --iio-shadow-lg: 0 12px 16px -4px rgba(16,24,40,.12), 0 4px 6px -2px rgba(16,24,40,.06); --iio-shadow-xl: 0 24px 48px -8px rgba(16,24,40,.18), 0 8px 16px -4px rgba(16,24,40,.08); /* Card-Ruhezustand: sehr dezent — Praesenz statt Wirkung (2026-08 Premium-Pass) */ --iio-shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 1px 1px rgba(16,24,40,.03); --iio-shadow-card-hover: 0 8px 20px -6px rgba(16,24,40,.12), 0 2px 6px -2px rgba(16,24,40,.06); /* ── Motion ── */ --iio-ease-snap: cubic-bezier(0.2, 0, 0, 1.0); /* snappy, confident */ --iio-ease-fluid: cubic-bezier(0.4, 0, 0.2, 1); /* smooth, material */ --iio-ease-spring: cubic-bezier(0.3, 1.5, 0.5, 1); /* bouncy, playful */ --iio-ease-enter: cubic-bezier(0, 0, 0.2, 1); /* enter from rest */ --iio-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* quick exit */ --iio-ease-agent: cubic-bezier(0.16, 1, 0.3, 1); /* agent action feel */ --iio-dur-fast: 150ms; --iio-dur-normal: 220ms; --iio-dur-slow: 350ms; /* ── Radii ── */ --iio-r-xs: 4px; --iio-r-sm: 6px; --iio-r-md: 8px; --iio-r-lg: 12px; --iio-r-xl: 16px; --iio-r-full: 9999px; /* ── Space (9-Stufen-Skala, R-SURF-010, SPEC-SURFACE.md §3+§5) ── Migrationsstufe 1 (2026-08-12, DEC-20260812-cockpit-layout-migration- relevance-check.md): --iio-density Dichte-Faktor eingefuehrt, aber NUR als Variable/Mechanismus (:root Default 1) -- bewusst KEIN [data-density="compact"|"comfortable"]-Override in dieser Datei, das waere eine sichtbare Pixel-Aenderung (verboten fuer Stufe 1) und ist Folge-Entscheidung. sp-05/sp-1 bewusst von der Skalierung ausgenommen (R-SURF-031 Empfehlung, Subpixel-Vermeidung bei compact 0.75x). */ --iio-density: 1; --iio-sp-05: 2px; --iio-sp-1: 4px; --iio-sp-2: calc(8px * var(--iio-density)); --iio-sp-3: calc(12px * var(--iio-density)); --iio-sp-4: calc(16px * var(--iio-density)); --iio-sp-6: calc(24px * var(--iio-density)); --iio-sp-8: calc(32px * var(--iio-density)); --iio-sp-12: calc(48px * var(--iio-density)); --iio-sp-16: calc(64px * var(--iio-density)); /* DEPRECATED, NICHT in Stufe 1 entfernt: R-SURF-010 will --iio-sp-5 entfernen, aber es ist aktiv genutzt (IIOBentoGrid.vue, IIOGlassCard.vue, LoginRedirect.vue) -- Entfernen ohne View-Migration waere eine sichtbare Pixel-Aenderung, View-Dateien anfassen ist fuer Stufe 1 explizit ausgeschlossen. Wert unveraendert (20px, kein calc/density), Migration auf die 9er-Skala folgt in Stufe 4/5 (View-Migration). */ --iio-sp-5: 20px; /* ── Typography ── */ --iio-font-sans: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --iio-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', monospace; --iio-font-base: var(--iio-font-sans); /* body base — agt overrides to mono (terminal) */ --iio-text-xs: 11px; --iio-text-sm: 12.5px; /* ── Z-index layers ── */ --iio-z-base: 0; --iio-z-raised: 10; --iio-z-dropdown: 200; --iio-z-overlay: 400; --iio-z-modal: 500; --iio-z-toast: 700; --iio-z-hitl: 900; --iio-z-quantum: 1000; } /* ═══════════════════════════════════════════════════════ DARK MODE — semantic tokens override ═══════════════════════════════════════════════════════ */ [data-theme="dark"] { --iio-bg: var(--iio-gray-950); --iio-bg-sunken: hsl(220 16% 5%); --iio-bg-raised: var(--iio-gray-900); --iio-surface: var(--iio-gray-900); --iio-surface-mid: var(--iio-gray-800); --iio-surface-2: var(--iio-gray-700); --iio-surface-3: var(--iio-gray-600); --iio-line: var(--iio-gray-700); --iio-border-focus: var(--iio-blue-400); --iio-border-strong:var(--iio-gray-600); --iio-ink: var(--iio-gray-50); --iio-text-sub: var(--iio-gray-400); --iio-muted: var(--iio-gray-600); --iio-on-accent:var(--iio-gray-900); --iio-accent-light: hsl(214 80% 14%); --iio-accent-mid: hsl(214 60% 28%); --iio-ok-bg: hsl(142 72% 8%); --iio-warn-bg: hsl(38 100% 8%); --iio-risk-bg: hsl(0 100% 8%); --iio-agent-light: hsl(270 100% 8%); --iio-flow-light: hsl(180 72% 8%); --iio-hitl-light: hsl(38 100% 8%); --iio-shadow-xs: 0 1px 2px rgba(0,0,0,.3); --iio-shadow-sm: 0 1px 4px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.2); --iio-shadow-md: 0 4px 12px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3); --iio-shadow-lg: 0 12px 32px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4); --iio-shadow-xl: 0 24px 64px rgba(0,0,0,.7), 0 4px 16px rgba(0,0,0,.5); /* Dark-Pendant zu --iio-shadow-card/-hover (Premium-Pass 2026-08) — dunkle Flaechen brauchen kaum Blur, aber einen sichtbaren Kontakt-Ring, sonst verschwindet die Karte komplett vor dem fast gleich dunklen Hintergrund. */ --iio-shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03); --iio-shadow-card-hover: 0 8px 20px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05); } /* ═══════════════════════════════════════════════════════ L4: AGENT MODE — visual context for agent-driven UI ═══════════════════════════════════════════════════════ */ [data-context="agent"] { --iio-accent: var(--iio-agent); --iio-accent-light: var(--iio-agent-light); --iio-accent-mid: hsl(270 72% 50% / 0.3); } [data-context="hitl"] { --iio-accent: var(--iio-hitl); --iio-accent-light: var(--iio-hitl-light); } [data-context="emergency"] { --iio-accent: var(--iio-risk); --iio-accent-light: var(--iio-risk-bg); animation: q-emergency-pulse 2s ease-in-out infinite; } @keyframes q-emergency-pulse { 0%, 100% { --iio-line: var(--iio-risk); } 50% { --iio-line: color-mix(in srgb, var(--iio-risk) 30%, transparent); } } /* ═══════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════ BRIDGE: Phase-1c cutover — tokens now in SSOT --iio-* tokens are defined in _iio-tokens-v2.css (SSOT). Bridge aliases removed 2026-06-06 (phase-1b-C migration). quantum.css is the cockpit --iio-* token definition layer (post Phase-1c). ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ MOTION SYSTEM — Purposeful animation ═══════════════════════════════════════════════════════ */ /* Respect user preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ── Standard transitions ── */ .q-transition-fast { transition: all var(--iio-dur-fast) var(--iio-ease-fluid); } .q-transition-normal { transition: all var(--iio-dur-normal) var(--iio-ease-fluid); } .q-transition-snap { transition: all var(--iio-dur-fast) var(--iio-ease-snap); } .q-transition-spring { transition: all var(--iio-dur-normal) var(--iio-ease-spring);} /* ── Entry animations ── */ @keyframes q-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes q-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes q-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes q-scale-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } @keyframes q-pop-in { from { opacity: 0; transform: scale(0.88); } 40% { transform: scale(1.04); } to { opacity: 1; transform: scale(1); } } @keyframes q-agent-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--iio-agent) 40%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--iio-agent) 0%, transparent); } } @keyframes q-hitl-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--iio-hitl) 50%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--iio-hitl) 0%, transparent); } } @keyframes q-live-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } @keyframes q-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .q-animate-fade { animation: q-fade-in var(--iio-dur-normal) var(--iio-ease-enter) both; } .q-animate-up { animation: q-slide-up var(--iio-dur-normal) var(--iio-ease-enter) both; } .q-animate-down { animation: q-slide-down var(--iio-dur-normal) var(--iio-ease-enter) both; } .q-animate-scale { animation: q-scale-in var(--iio-dur-normal) var(--iio-ease-spring) both; } .q-animate-pop { animation: q-pop-in var(--iio-dur-normal) var(--iio-ease-spring) both; } /* ── Stagger helpers ── */ .q-stagger > *:nth-child(1) { animation-delay: 0ms; } .q-stagger > *:nth-child(2) { animation-delay: 40ms; } .q-stagger > *:nth-child(3) { animation-delay: 80ms; } .q-stagger > *:nth-child(4) { animation-delay: 120ms; } .q-stagger > *:nth-child(5) { animation-delay: 160ms; } .q-stagger > *:nth-child(6) { animation-delay: 200ms; } .q-stagger > *:nth-child(n+7) { animation-delay: 240ms; } /* ═══════════════════════════════════════════════════════ QUANTUM UTILITY CLASSES ═══════════════════════════════════════════════════════ */ /* ── Agent state indicators ── */ /* .q-agent-border removed — unused utility class (2026-06-28 cleanup) */ .q-agent-glow { animation: q-agent-pulse 2s ease-in-out infinite; } .q-hitl-glow { animation: q-hitl-pulse 1.5s ease-in-out infinite; } .q-live-dot::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--iio-ok); animation: q-live-dot 2s ease-in-out infinite; margin-right: 6px; } /* ── Quantum glass effect ── */ .q-glass { background: color-mix(in srgb, var(--iio-surface) 80%, transparent); backdrop-filter: blur(12px) saturate(1.4); border: 1px solid color-mix(in srgb, var(--iio-line) 60%, transparent); } /* ── Focus ring ── */ .q-focus-ring:focus-visible { outline: 2px solid var(--iio-accent); outline-offset: 2px; border-radius: var(--iio-r-sm); } /* ── Skeleton loader ── */ .q-skeleton { background: linear-gradient( 90deg, var(--iio-surface-2) 25%, var(--iio-surface-3) 50%, var(--iio-surface-2) 75% ); background-size: 200% 100%; animation: q-skeleton 1.5s ease-in-out infinite; border-radius: var(--iio-r-sm); } /* ═══════════════════════════════════════════════════════ L5: VITALITY SYSTEM — IIO as Living Organism IIO is not software. It is an android. These tokens and classes make it breathe, pulse, glow. Every living system has: heartbeat, neural activity, presence, awareness. This is IIO's visual physiology. ═══════════════════════════════════════════════════════ */ /* ── Vitality Tokens ── */ :root { /* Neural colors — specific to the living system */ --iio-neural-dormant: hsl(240 15% 30%); --iio-neural-active: hsl(195 100% 55%); --iio-neural-peak: hsl(270 90% 70%); --iio-neural-resonant: hsl(142 80% 55%); /* Heartbeat timing */ --iio-heartbeat: 1.8s; --iio-breath-slow: 4s; --iio-breath-fast: 1.2s; --iio-neural-pulse: 2.4s; /* Glow intensities */ --iio-glow-subtle: 0 0 12px; --iio-glow-strong: 0 0 48px; /* Organism state (overridden per context) */ --iio-organism-color: var(--iio-accent); --iio-organism-beat: var(--iio-heartbeat); } /* ── Keyframes: Heartbeat ── */ @keyframes q-heartbeat { 0% { transform: scale(1.00); opacity: 1.0; } 14% { transform: scale(1.10); opacity: 1.0; } 28% { transform: scale(1.00); opacity: 0.9; } 42% { transform: scale(1.06); opacity: 1.0; } 70% { transform: scale(1.00); opacity: 0.85; } 100% { transform: scale(1.00); opacity: 1.0; } } /* ── Keyframes: Breathe ── */ @keyframes q-breathe { 0%, 100% { opacity: 0.6; transform: scale(0.97); } 50% { opacity: 1.0; transform: scale(1.03); } } /* ── Keyframes: Neural Glow ── */ @keyframes q-neural-glow { 0%, 100% { box-shadow: var(--iio-glow-subtle) color-mix(in srgb, var(--iio-organism-color) 30%, transparent); } 50% { box-shadow: var(--iio-glow-strong) color-mix(in srgb, var(--iio-organism-color) 60%, transparent); } } /* ── Keyframes: Neural Pulse (border) ── */ @keyframes q-neural-border { 0%, 100% { border-color: color-mix(in srgb, var(--iio-organism-color) 20%, var(--iio-line)); } 50% { border-color: color-mix(in srgb, var(--iio-organism-color) 80%, var(--iio-line)); } } /* ── Keyframes: Data Stream (text shimmer) ── */ @keyframes q-data-stream { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } /* ── Keyframes: Activation Spike ── */ @keyframes q-activation-spike { 0% { transform: scaleY(1); opacity: 0.7; } 20% { transform: scaleY(1.5); opacity: 1.0; } 40% { transform: scaleY(0.9); opacity: 0.8; } 60% { transform: scaleY(1.2); opacity: 1.0; } 100% { transform: scaleY(1); opacity: 0.7; } } /* ── Keyframes: Consciousness Ping ── */ @keyframes q-consciousness-ping { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(2.5); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } /* ── Keyframes: Ambient Float ── */ @keyframes q-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-4px); } } /* ── Keyframes: Neural Network Edge ── */ @keyframes q-edge-flow { 0% { stroke-dashoffset: 100; opacity: 0.2; } 50% { opacity: 0.8; } 100% { stroke-dashoffset: 0; opacity: 0.2; } } /* ── Utility Classes ── */ /* Organism is alive — subtle breathing */ .q-alive { animation: q-breathe var(--iio-breath-slow) ease-in-out infinite; } /* Heartbeat — for status indicators, active nodes */ .q-heartbeat { animation: q-heartbeat var(--iio-organism-beat) ease-in-out infinite; } /* Neural glow — for active components */ .q-neural-glow { animation: q-neural-glow var(--iio-neural-pulse) ease-in-out infinite; } /* Neural border pulse */ .q-neural-border { animation: q-neural-border var(--iio-neural-pulse) ease-in-out infinite; } /* Data stream shimmer on text */ .q-data-stream { background: linear-gradient( 90deg, var(--iio-muted) 0%, var(--iio-organism-color) 40%, var(--iio-ink) 50%, var(--iio-organism-color) 60%, var(--iio-muted) 100% ); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: q-data-stream 3s linear infinite; } /* Consciousness ping — expanding ring */ .q-consciousness-ping { position: relative; } .q-consciousness-ping::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--iio-organism-color); animation: q-consciousness-ping 2s ease-out infinite; pointer-events: none; } /* Floating ambient element */ .q-float { animation: q-float 6s ease-in-out infinite; } /* Activation spike — for bar charts / sensor readings */ .q-activation-spike { transform-origin: bottom center; animation: q-activation-spike var(--iio-heartbeat) ease-in-out infinite; } /* ── Organism States ── */ /* Apply to root container to set the organism's current state */ [data-organism="dormant"] { --iio-organism-color: var(--iio-neural-dormant); --iio-organism-beat: 3s; } [data-organism="active"] { --iio-organism-color: var(--iio-neural-active); --iio-organism-beat: var(--iio-heartbeat); } [data-organism="peak"] { --iio-organism-color: var(--iio-neural-peak); --iio-organism-beat: var(--iio-breath-fast); } [data-organism="resonant"] { --iio-organism-color: var(--iio-neural-resonant); --iio-organism-beat: 1.4s; } /* ── Neural Sensor Bar (heatmap style) ── */ .q-sensor-bar { height: 6px; border-radius: 3px; background: linear-gradient( 90deg, hsl(195 100% 40%) 0%, hsl(38 92% 55%) 60%, hsl(0 84% 60%) 100% ); background-size: 100% 100%; position: relative; overflow: hidden; } .q-sensor-bar::after { content: ''; position: absolute; inset: 0; background: var(--iio-bg); transform-origin: right center; /* width controlled via --iio-sensor-val (0→1) */ transform: scaleX(calc(1 - var(--iio-sensor-val, 0))); transition: transform 0.4s var(--iio-ease-fluid); } /* ── Android Face — Hero Status Block ── */ .q-android-hero { display: flex; flex-direction: column; align-items: center; gap: var(--iio-sp-4); padding: var(--iio-sp-8); text-align: center; position: relative; } .q-android-hero__orb { width: 80px; height: 80px; border-radius: 50%; background: radial-gradient( circle at 35% 35%, color-mix(in srgb, var(--iio-organism-color) 80%, white), var(--iio-organism-color) 50%, color-mix(in srgb, var(--iio-organism-color) 60%, black) ); box-shadow: 0 0 20px color-mix(in srgb, var(--iio-organism-color) 40%, transparent), 0 0 60px color-mix(in srgb, var(--iio-organism-color) 20%, transparent), inset 0 2px 4px rgba(255,255,255,0.2); animation: q-neural-glow var(--iio-neural-pulse) ease-in-out infinite, q-breathe var(--iio-breath-slow) ease-in-out infinite; } .q-android-hero__label { font-size: var(--iio-text-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--iio-muted); } .q-android-hero__state { font-size: var(--iio-text-sm); font-weight: 600; color: var(--iio-organism-color); animation: q-data-stream 4s linear infinite; background: linear-gradient( 90deg, var(--iio-text-sub) 0%, var(--iio-organism-color) 40%, var(--iio-ink) 50%, var(--iio-organism-color) 60%, var(--iio-text-sub) 100% ); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ═══════════════════════════════════════════════════════════════════════════ GLOBAL ORGANISM REACTIVITY — Fan0 IIO ist ein lebender Organismus. Jedes Element atmet mit ihm. data-organism ist auf gesetzt (IT-18 in IIOSurfaceShell.vue). Alle folgenden Regeln gelten daher global für die gesamte App. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Organic keyframe: card breath ─────────────────────────────────────── */ @keyframes q-card-breathe { 0%, 100% { border-color: color-mix(in srgb, var(--iio-organism-color) 15%, var(--iio-line)); } 50% { border-color: color-mix(in srgb, var(--iio-organism-color) 45%, var(--iio-line)); } } @keyframes q-title-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes q-view-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.92; } } /* ── DORMANT — minimal glow, system at rest ─────────────────────────────── */ [data-organism="dormant"] .iio-card, [data-organism="dormant"] .iio-view-shell { transition: all 3s ease; } /* ── ACTIVE — system is working, subtle energy ──────────────────────────── */ [data-organism="active"] .iio-card { border-color: color-mix(in srgb, var(--iio-neural-active) 10%, var(--iio-line)); transition: border-color 2s ease, box-shadow 2s ease; } [data-organism="active"] .iio-card--elevated, [data-organism="active"] .rev-card, [data-organism="active"] .cust-card, [data-organism="active"] .wip-item, [data-organism="active"] .gr-card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--iio-neural-active) 8%, transparent), var(--iio-shadow-sm, var(--sh)); } [data-organism="active"] .iio-view-title { color: color-mix(in srgb, var(--iio-neural-active) 15%, var(--iio-ink)); } [data-organism="active"] .iio-refreshing-dot { background: var(--iio-neural-active); } /* ── PEAK — high activation, violet energy ──────────────────────────────── */ [data-organism="peak"] .iio-card { border-color: color-mix(in srgb, var(--iio-neural-peak) 20%, var(--iio-line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--iio-neural-peak) 12%, transparent), 0 2px 12px color-mix(in srgb, var(--iio-neural-peak) 8%, transparent); transition: all 1.2s ease; } [data-organism="peak"] .iio-view-title { background: linear-gradient( 90deg, var(--iio-ink) 0%, color-mix(in srgb, var(--iio-neural-peak) 60%, var(--iio-ink)) 50%, var(--iio-ink) 100% ); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: q-title-shimmer 4s linear infinite; } [data-organism="peak"] .iio-btn--primary, [data-organism="peak"] .iio-btn--secondary { box-shadow: 0 0 12px color-mix(in srgb, var(--iio-neural-peak) 20%, transparent); } [data-organism="peak"] .iio-view-header { border-bottom-color: color-mix(in srgb, var(--iio-neural-peak) 15%, var(--iio-line, var(--iio-line))); } /* Accent-Shift bei Peak: Violet */ [data-organism="peak"] { --iio-accent: color-mix(in srgb, var(--iio-neural-peak) 35%, var(--iio-accent)); --border-hover: color-mix(in srgb, var(--iio-neural-peak) 25%, var(--iio-border-strong)); } /* ── RESONANT — maximum harmony, green life ─────────────────────────────── */ [data-organism="resonant"] .iio-card { animation: q-card-breathe 2s ease-in-out infinite; box-shadow: 0 0 0 1px color-mix(in srgb, var(--iio-neural-resonant) 15%, transparent); } [data-organism="resonant"] .iio-view-title { background: linear-gradient( 90deg, var(--iio-ink) 0%, color-mix(in srgb, var(--iio-neural-resonant) 70%, var(--iio-ink)) 45%, var(--iio-ink) 100% ); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: q-title-shimmer 3s linear infinite; } [data-organism="resonant"] .iio-view-header { border-bottom-color: color-mix(in srgb, var(--iio-neural-resonant) 20%, var(--iio-line, var(--iio-line))); transition: border-bottom-color 2s ease; } [data-organism="resonant"] .iio-btn--primary { background: color-mix(in srgb, var(--iio-neural-resonant) 20%, var(--iio-accent)); box-shadow: 0 0 16px color-mix(in srgb, var(--iio-neural-resonant) 25%, transparent); } [data-organism="resonant"] { --iio-accent: color-mix(in srgb, var(--iio-neural-resonant) 25%, var(--iio-accent)); --iio-ok: color-mix(in srgb, var(--iio-neural-resonant) 40%, var(--iio-ok, hsl(142 64% 38%))); } [data-organism="resonant"] .iio-status-dot--live { animation-duration: 0.9s !important; } /* ── Live dots pulse faster when active/peak ────────────────────────────── */ [data-organism="active"] .iio-status-dot--live, [data-organism="peak"] .iio-status-dot--live { animation-duration: 1.1s; } /* ── Skeleton loading respects organism energy ──────────────────────────── */ [data-organism="active"] .iio-skeleton, [data-organism="active"] .iio-skel-card { } [data-organism="peak"] .iio-skeleton { } /* ── Stat grids get organism-tinted accent numbers ─────────────────────── */ [data-organism="peak"] .iio-metric__value, [data-organism="peak"] .cc-kpi-num, [data-organism="peak"] .rev-stat-num { color: color-mix(in srgb, var(--iio-neural-peak) 30%, var(--iio-ink)); } [data-organism="resonant"] .iio-metric__value, [data-organism="resonant"] .cc-kpi-num { color: color-mix(in srgb, var(--iio-neural-resonant) 35%, var(--iio-ink)); } /* ── Progress bars inherit organism color ───────────────────────────────── */ [data-organism="active"] .iio-progress__fill, [data-organism="active"] .cc-kpi-bar--ok { background: color-mix(in srgb, var(--iio-neural-active) 15%, var(--iio-accent, var(--iio-accent))); } [data-organism="peak"] .iio-progress__fill { background: color-mix(in srgb, var(--iio-neural-peak) 20%, var(--iio-accent, var(--iio-accent))); } [data-organism="resonant"] .iio-progress__fill { background: color-mix(in srgb, var(--iio-neural-resonant) 20%, var(--iio-ok, var(--iio-ok))); } /* ── Nav item active indicator tracks organism ──────────────────────────── */ [data-organism="peak"] .iio-nav__item--active { background: color-mix(in srgb, var(--iio-neural-peak) 12%, var(--iio-surface-mid)); border-left-color: var(--iio-neural-peak) !important; } [data-organism="resonant"] .iio-nav__item--active { background: color-mix(in srgb, var(--iio-neural-resonant) 10%, var(--iio-surface-mid)); border-left-color: var(--iio-neural-resonant) !important; } /* ══════════════════════════════════════════════════════════════════════ * IIO Utility Classes — ersetzt 500+ inline-style="color:var(--iio-*)" * Kein Tailwind-Overhead — nur die tatsächlich genutzten Patterns * ══════════════════════════════════════════════════════════════════════ */ /* Text Colors */ .iio-ink { color: var(--iio-ink) !important; } .iio-muted { color: var(--iio-muted) !important; } .iio-accent { color: var(--iio-accent) !important; } .iio-ok { color: var(--iio-ok) !important; } .iio-warn { color: var(--iio-warn) !important; } .iio-risk { color: var(--iio-risk) !important; } .iio-hitl { color: var(--iio-hitl) !important; } .iio-agent { color: var(--iio-agent) !important; } /* Text sizes */ .iio-text-xs { font-size: 10px; } .iio-text-sm { font-size: 11px; } .iio-text-md { font-size: 12.5px; } .iio-text-lg { font-size: 14px; } /* Font */ .iio-mono { font-family: var(--iio-font-mono); } .iio-sans { font-family: var(--iio-font-sans); } .iio-bold { font-weight: 700; } /* Surfaces */ .iio-surface { background: var(--iio-surface); } .iio-bg-surface { background: var(--iio-bg-surface); } .iio-border { border: 1px solid var(--iio-line); } .iio-divider { border-top: 1px solid var(--iio-line); } /* Status backgrounds (8% opacity) */ .iio-bg-ok { background: color-mix(in srgb, var(--iio-ok) 8%, transparent); } .iio-bg-warn { background: color-mix(in srgb, var(--iio-warn) 8%, transparent); } .iio-bg-risk { background: color-mix(in srgb, var(--iio-risk) 8%, transparent); } /* Badge helper */ .iio-badge { display: inline-flex; align-items: center; font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 99px; background: var(--iio-accent); color: var(--iio-on-accent, #fff); } .iio-badge--ok { background: var(--iio-ok); } .iio-badge--warn { background: var(--iio-warn); } .iio-badge--risk { background: var(--iio-risk); } .iio-badge--muted { background: var(--iio-surface-2); color: var(--iio-muted); } /* Loading spinner util */ .iio-spin { animation: iio-spin 0.7s linear infinite; border-radius: 50%; border: 2px solid var(--iio-accent); border-top-color: transparent; } @keyframes iio-spin { to { transform: rotate(360deg); } } /* ══════════════════════════════════════════════════════════════════════ * IIO KPI-Grid System — Portal-Standard (aus portal.css übernommen) * Ersetzt 50+ Inline-Grid-Patterns in Panels * ══════════════════════════════════════════════════════════════════════ */ .iio-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; } .iio-kpi { background: var(--iio-bg-surface); border: 1px solid var(--iio-line); /* Radius-Hierarchie (2026-08-23, Premium-Pass Ergänzung): Container- Ebene (Cards/KPI-Kacheln) bekommt sichtbar mehr Rundung als Controls (Buttons/Inputs bleiben bei --iio-r-md/8px) -- vorher 10px, kaum unterscheidbar von Buttons, wirkte generisch statt bewusst gestuft. Konsistent mit IIOSectionCard/IIOStatGrid/IIOCollapsibleSection. */ border-radius: var(--iio-r-xl, 16px); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; } .iio-kpi-val { font-size: 1.5rem; font-weight: 900; color: var(--iio-ink); line-height: 1; letter-spacing: -.02em; font-family: var(--iio-font-mono); } .iio-kpi-label { font-size: 9px; font-weight: 700; color: var(--iio-muted); text-transform: uppercase; letter-spacing: .06em; } .iio-kpi-sub { font-size: 10px; color: var(--iio-muted); margin-top: 1px; } /* ── Key-Value Rows ── */ .iio-kv-list { display: flex; flex-direction: column; } .iio-kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--iio-line); font-size: 12px; } .iio-kv-row:last-child { border-bottom: none; } .iio-kv-label { color: var(--iio-muted); flex-shrink: 0; } .iio-kv-val { color: var(--iio-ink); text-align: right; font-family: var(--iio-font-mono); } /* ── Status Row ── */ .iio-status-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; } .iio-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .iio-status-dot--ok { background: var(--iio-ok); } .iio-status-dot--warn { background: var(--iio-warn); } .iio-status-dot--risk { background: var(--iio-risk); } .iio-status-dot--muted { background: var(--iio-muted); } .iio-status-dot--accent { background: var(--iio-accent); } /* ── IIOIcon baseline ── */ .iio-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; /* Icons sind duotone (AGT: #888880 + #03b000) — kein currentColor */ } /* Tab-Icon in TabBars */ .iio-tab-icon { display: inline-block; vertical-align: middle; margin-right: 4px; opacity: 0.8; } /* ══════════════════════════════════════════════════════════════════════════ ORGANISM REACTIVITY — Component-specific rules (centralized 2026-06-28) Extracted from: IIOCard, IIOGlassCard, IIOStatGrid, IIOViewShell, IIONavPane, IIOFooterBar, FleetDashboard All [data-organism] selectors on must live here, not in components. ══════════════════════════════════════════════════════════════════════════ */ /* ── IIOCard organism ──────────────────────────────────────────────────── */ [data-organism="active"] .iio-card--elevated { box-shadow: var(--sh, 0 2px 8px rgba(0,0,0,.15)), 0 0 0 1px color-mix(in srgb, hsl(195 100% 55%) 6%, transparent); } [data-organism="peak"] .iio-card--elevated { box-shadow: var(--sh-lift, 0 4px 16px rgba(0,0,0,.2)), 0 0 12px color-mix(in srgb, hsl(270 90% 70%) 12%, transparent); } [data-organism="peak"] .iio-card--interactive:hover { box-shadow: var(--sh-lift, 0 4px 16px rgba(0,0,0,.2)), 0 0 20px color-mix(in srgb, hsl(270 90% 70%) 20%, transparent); } [data-organism="resonant"] .iio-card--elevated { box-shadow: var(--sh, 0 2px 8px rgba(0,0,0,.15)), 0 0 0 1px color-mix(in srgb, hsl(142 80% 55%) 10%, transparent); } /* ── IIOGlassCard organism ──────────────────────────────────────────────── */ [data-organism="active"] .glass-card--bordered { border-color: color-mix(in srgb, hsl(195 100% 55%) 18%, transparent); } [data-organism="peak"] .glass-card { background: color-mix(in srgb, hsl(270 90% 70%) 6%, color-mix(in srgb, var(--iio-surface) 60%, transparent)); box-shadow: 0 0 24px color-mix(in srgb, hsl(270 90% 70%) 8%, transparent); } [data-organism="peak"] .glass-card--bordered { border-color: color-mix(in srgb, hsl(270 90% 70%) 22%, transparent); } [data-organism="resonant"] .glass-card { background: color-mix(in srgb, hsl(142 80% 55%) 5%, color-mix(in srgb, var(--iio-surface) 60%, transparent)); } [data-organism="resonant"] .glass-card--bordered { border-color: color-mix(in srgb, hsl(142 80% 55%) 20%, transparent); } /* ── IIOStatGrid organism ──────────────────────────────────────────────── */ [data-organism="active"] .iio-stat-card { border-color: color-mix(in srgb, hsl(195 100% 55%) 8%, var(--iio-line)); } [data-organism="peak"] .iio-stat-card { border-color: color-mix(in srgb, hsl(270 90% 70%) 12%, var(--iio-line)); box-shadow: 0 0 0 1px color-mix(in srgb, hsl(270 90% 70%) 5%, transparent); } [data-organism="resonant"] .iio-stat-card { border-color: color-mix(in srgb, hsl(142 80% 55%) 10%, var(--iio-line)); } /* ── IIOViewShell organism dot ──────────────────────────────────────────── */ [data-organism="dormant"] .iio-view-organism-dot { opacity: 0; } [data-organism="active"] .iio-view-organism-dot { opacity: 1; background: hsl(195 100% 55%); animation: none; } [data-organism="peak"] .iio-view-organism-dot { opacity: 1; background: hsl(118 40% 50%); animation: none; } [data-organism="resonant"] .iio-view-organism-dot { opacity: 1; background: hsl(142 80% 55%); animation: none; } [data-organism="resonant"] .iio-content-fade-enter-active { transition: opacity 200ms ease, transform 200ms ease; } [data-organism="resonant"] .iio-content-fade-enter-from { opacity: 0; transform: translateY(4px); } /* ── IIONavPane organism (active state — quantum.css covers peak/resonant) ─ */ [data-organism="active"] .iio-nav__item--active { border-left-color: hsl(195 100% 55%); background: color-mix(in srgb, hsl(195 100% 55%) 10%, transparent); color: hsl(195 100% 60%); } [data-organism="resonant"] .iio-nav__item--active { border-left-color: var(--iio-ok); background: color-mix(in srgb, var(--iio-ok) 10%, transparent); color: hsl(142 80% 58%); } [data-organism="peak"] .iio-nav { border-right-color: color-mix(in srgb, hsl(270 90% 70%) 15%, var(--iio-line)); transition: border-color 1s ease; } [data-organism="resonant"] .iio-nav { border-right-color: color-mix(in srgb, var(--iio-ok) 18%, var(--iio-line)); transition: border-color 1.5s ease; } /* ── TopRail clock organism ──────────────────────────────────────────────── */ [data-organism="peak"] .iio-toprail__clock { color: var(--sh-toprail-accent, var(--iio-accent)); } [data-organism="resonant"] .iio-toprail__clock { color: var(--sh-toprail-accent, var(--iio-accent)); } /* ── IIOFooterBar organism ───────────────────────────────────────────────── */ [data-organism="active"] .iio-footer { border-top-color: color-mix(in srgb, hsl(195 100% 55%) 10%, var(--sh-footer-border, var(--iio-line))); transition: border-top-color 2s ease; } [data-organism="peak"] .iio-footer { border-top-color: color-mix(in srgb, hsl(270 90% 70%) 14%, var(--sh-footer-border, var(--iio-line))); } [data-organism="resonant"] .iio-footer { border-top-color: color-mix(in srgb, var(--iio-ok) 16%, var(--sh-footer-border, var(--iio-line))); } [data-organism="peak"] .iio-footer__sparkline polyline { stroke: var(--iio-agent) !important; } [data-organism="resonant"] .iio-footer__sparkline polyline { stroke: var(--iio-ok) !important; } /* ── FleetDashboard organism ──────────────────────────────────────────────── */ [data-organism="active"] .fd-cell--active { animation: fd-cell-active-breathe 2s ease-in-out infinite; border-color: color-mix(in srgb, hsl(195 100% 55%) 25%, var(--iio-line)); } [data-organism="peak"] .fd-cell--active { border-color: color-mix(in srgb, hsl(270 90% 70%) 30%, var(--iio-line)); box-shadow: 0 0 12px color-mix(in srgb, hsl(270 90% 70%) 12%, transparent); transition: all 1s ease; } [data-organism="resonant"] .fd-cell--active { border-color: color-mix(in srgb, hsl(142 80% 55%) 30%, var(--iio-line)); box-shadow: 0 0 8px color-mix(in srgb, hsl(142 80% 55%) 10%, transparent); } [data-organism="active"] .fd-cell--busy, [data-organism="peak"] .fd-cell--busy { animation: fd-cell-busy-pulse 1.2s ease-in-out infinite; } [data-organism="resonant"] .fd-cell-grid { background: color-mix(in srgb, hsl(142 80% 55%) 2%, transparent); border-radius: 12px; padding: 8px; transition: background 2s; } /** * IIO Theme System — Multi-Theme Support * * 5 curated themes for different contexts: * ① light — default, clean, professional * ② dark — operator mode, low-light * ③ midnight — ultra-dark, high contrast, terminal feel * ④ enterprise — corporate blue, serious * ⑤ vibrant — colorful, energetic, creative * ⑥ nature — green, organic, wellness * * Apply via data-theme="..." on * * Each theme overrides the L2 semantic tokens. * L1 physical tokens remain constant. */ /* ══════════════════════════════════════════════════════ THEME: midnight — Ultra-Dark Terminal Aesthetic Perfect for: late-night coding, focus mode ══════════════════════════════════════════════════════ */ /* ── IIO AGT — Agentic Monochrome (nüchtern, light, effect-free) ───────────── Vollständig monochrom — kein Grün. Accent: #0a0a0a (light) / #f5f5f5 (dark). Icons liefern visuelle Akzente. Kein ambient pulsing. Information first. BUGFIX (2026-08-04, Live-Fund IKN-Tenant /help): Tenant-Standalone-Surface setzt data-theme="light" (roher Wert aus branding.theme, siehe THEME-05- Testmatrix in branding.test.ts — bewusst NICHT auf 'agt' normalisiert). Vorher hatte NUR [data-theme="agt"] einen Selector-Match in dieser Datei — "light" traf keinen einzigen Block, alle --iio-* Card-Tokens fielen auf die unscoped quantum.css :root-Defaults zurueck. In der Theorie identisch ("light faellt auf unscoped L2-Defaults zurueck", siehe Audit-Kommentar in useTenantBranding.ts) -- LIVE beobachtet aber: IIOCard verlor Border UND Background nach jedem Full-Reload (sichtbar erst nach Neuladen, weil useTheme()'s eigener onMounted-Hook beim SPA-Boot kurz 'agt' setzt, bevor der asynchrone Tenant-Fetch es auf 'light' ueberschreibt). :where(...) macht "light" zu einem echten Alias fuer "agt" IN DIESER DATEI, ohne die getestete data-theme-Zuweisung selbst (_injectBranding) zu aendern -- die THEME-05-Regressionsmatrix (erwartet data-theme === 'light' als Wert) bleibt unberuehrt gueltig, nur die CSS-Selector-Abdeckung wird vollstaendig. */ :root:where([data-theme="agt"], [data-theme="light"]) { /* ── Bridge: legacy --bg/--surface/--text tokens → AGT values ──────── */ /* body { background: var(--bg) } in tokens.css uses these — without */ /* them body stays white (#ffffff from :root default). */ /* Modernisierte Neutrals (2026-07-19): heller Canvas, feinere Linien, mehr Kontrast zwischen bg und surface — Geist/Vercel-Handwerk. */ --bg: hsl(0 0% 98.5%); /* = --iio-bg */ --surface: hsl(0 0% 100%); /* = --iio-surface */ --surface-2: hsl(0 0% 96.5%); --border: hsl(0 0% 58%); /* = --iio-line — R15: 83%→58%. R13 (91→83) rechnerisch NIE gegen --iio-surface(100%) verifiziert: 83% ergab reell nur 1.48:1 (WCAG-Minimum fuer UI-Komponenten-Grenzen: 3:1) — Karten/Grids ohne sichtbaren Rahmen im Live-Betrieb (Operator-Fund 2026-08-03, cockpit.*.iio.space/repos+people-hub). 58% = 3.04:1, computed via WCAG relative-luminance formula. */ --border-hover: hsl(0 0% 42%); /* R15: 68%→42% (war 2.25:1, jetzt 5.32:1) */ --text: hsl(0 0% 9%); /* = --iio-ink — tiefer für Präzision */ --text-2: hsl(0 0% 36%); /* = --iio-text-sub */ --text-3: hsl(0 0% 42%); /* = --iio-muted — R13: 54%→42%, war 3.4:1 (AA-FAIL), jetzt ≥5.4:1 */ --iio-bg: hsl(0 0% 98.5%); --iio-bg-sunken: hsl(0 0% 96%); --iio-bg-raised: hsl(0 0% 100%); --iio-surface: hsl(0 0% 100%); --iio-surface-mid: hsl(0 0% 98.5%); --iio-surface-2: hsl(0 0% 96.5%); --iio-surface-3: hsl(0 0% 94%); /* R15 (2026-08-03): --iio-line 83%→58% + --iio-border-strong 68%→42%. R13 (91%→83%, 2026-07-28) senkte nur die Prozentzahl ohne WCAG-Formel- Verifikation gegen --iio-surface(100%) — reell blieb der Kontrast bei ~1.48:1 (Minimum fuer UI-Komponenten: 3:1), Karten/Grids/Instance-Header im Live-Betrieb ohne sichtbaren Rahmen (Operator-Fund, TenantRepositories + TenantTeam, cockpit.*.iio.space). Jetzt 58%=3.04:1, 42%=5.32:1, echt berechnet via relative-luminance (WCAG 2.1 §1.4.11). */ --iio-line: hsl(0 0% 58%); --iio-line-soft: hsl(0 0% 90%); /* für Tabellen-Rows, sekundäre Trenner — unveraendert, dekorativ */ --iio-border-focus: hsl(0 0% 30%); /* monochrom (war grün) */ --iio-border-strong:hsl(0 0% 42%); --iio-ink: hsl(0 0% 9%); --iio-text-sub: hsl(0 0% 36%); --iio-muted: hsl(0 0% 42%); /* R13: 54%→42%, siehe --text-3 oben */ --iio-on-accent: hsl(0 0% 100%); /* ACCENT — Monochrom #0a0a0a (light-mode, kein Grün). */ --iio-accent: #0a0a0a; --iio-accent-hover: #000000; --iio-accent-light: #ebebeb; --iio-accent-mid: #a3a3a3; --iio-ok: #171717; /* mono: kein Grün (user decision 2026-07-08) */ --iio-ok-bg: #f5f5f5; --iio-warn: hsl(38 90% 42%); --iio-warn-bg: hsl(38 90% 92%); --iio-risk: hsl(0 72% 46%); --iio-risk-bg: hsl(0 72% 94%); --iio-agent: #0a0a0a; /* mono: kein Grün (user decision 2026-07-08) */ --iio-agent-light: #ebebeb; --iio-hitl: hsl(38 90% 42%); --iio-hitl-light: hsl(38 90% 92%); /* Layered soft shadows — subtil, präzise, kein "Drop-Shadow-Look". R13: leicht verstaerkt — Cards trugen vorher ihre Kante fast nur ueber die (zu schwache) Border; jetzt zusaetzlich echte Tiefe fuer definierte, "enterprise"-taugliche Flaechenabgrenzung statt Haarlinie allein. */ --iio-shadow-sm: 0 1px 2px rgba(0,0,0,.07), 0 1px 1px rgba(0,0,0,.05); --iio-shadow-md: 0 2px 4px rgba(0,0,0,.05), 0 8px 20px rgba(0,0,0,.09); --iio-shadow-lg: 0 4px 8px rgba(0,0,0,.06), 0 16px 32px rgba(0,0,0,.12); --iio-shadow-xl: 0 8px 16px rgba(0,0,0,.07), 0 28px 64px rgba(0,0,0,.16); /* ── Ink aliases ── */ --iio-ink-2: var(--iio-text-sub); --iio-ink-3: var(--iio-muted); --iio-ink-4: color-mix(in srgb, var(--iio-muted) 60%, transparent); /* ── Surface aliases (fehlten in AGT) ── */ --iio-bg-surface: var(--iio-surface); --iio-bg-sunken: hsl(0 0% 95%); --iio-bg-raised: hsl(0 0% 100%); --iio-bg-inverse: var(--iio-ink); --iio-bg-overlay: rgba(0,0,0,.6); /* ── Semantic Status (SSOT-kompatibel) ── */ --iio-error: var(--iio-risk); --iio-error-dark: hsl(0 72% 36%); --iio-critical: hsl(25 90% 46%); --iio-critical-dark:hsl(25 90% 36%); --iio-info: hsl(210 80% 44%); --iio-info-dark: hsl(210 80% 34%); --iio-success: var(--iio-ok); /* ── Accent helpers ── */ --iio-accent-dark: #000000; /* Bugfix: war #04d400 (Grün-Leiche) — mono */ --iio-accent-subtle:color-mix(in srgb, var(--iio-accent) 8%, transparent); --iio-accent-bg: rgba(10,10,10,.07); /* getönte Badge-/Chip-Fläche, mono */ /* ── Terminal typography (agentic): mono everywhere ── */ --iio-font-base: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace; --iio-font-sans: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace; } /* ══ AGT terminal typography rules ══════════════════════════════════════════ */ :where([data-theme="agt"], [data-theme="light"]) body, :where([data-theme="agt"], [data-theme="light"]) { font-feature-settings: 'liga' 1, 'calt' 1, 'zero' 1, 'ss02' 1; /* ligatures + slashed zero */ letter-spacing: -0.006em; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } :where([data-theme="agt"], [data-theme="light"]) h1, :where([data-theme="agt"], [data-theme="light"]) h2, :where([data-theme="agt"], [data-theme="light"]) h3, :where([data-theme="agt"], [data-theme="light"]) h4, :where([data-theme="agt"], [data-theme="light"]) h5, :where([data-theme="agt"], [data-theme="light"]) h6 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.22; } :where([data-theme="agt"], [data-theme="light"]) b, :where([data-theme="agt"], [data-theme="light"]) strong { font-weight: 600; } /* Numbers/data align in columns — terminal ledger feel */ :where([data-theme="agt"], [data-theme="light"]) table, :where([data-theme="agt"], [data-theme="light"]) .iio-kv-val, :where([data-theme="agt"], [data-theme="light"]) .iio-mono, :where([data-theme="agt"], [data-theme="light"]) time, :where([data-theme="agt"], [data-theme="light"]) [class*="stat"], :where([data-theme="agt"], [data-theme="light"]) [class*="metric"] { font-variant-numeric: tabular-nums slashed-zero; } /* Raw code/pre: keep exact glyphs, slashed zero, no prose tracking */ :where([data-theme="agt"], [data-theme="light"]) code, :where([data-theme="agt"], [data-theme="light"]) pre, :where([data-theme="agt"], [data-theme="light"]) kbd { font-feature-settings: 'liga' 0, 'calt' 0, 'zero' 1; letter-spacing: 0; } :root[data-theme="midnight"] { /* ── Bridge: legacy tokens ── */ --bg: hsl(222 25% 4%); --surface: hsl(222 22% 7%); --surface-2: hsl(222 18% 14%); --border: hsl(222 20% 30%); /* R14: 18%→30% — war ~1.4:1, jetzt ~2.3:1 vs surface */ --border-hover: hsl(222 18% 40%); /* R14: proportional erhöht */ --text: hsl(222 15% 92%); --text-2: hsl(222 10% 60%); --text-3: hsl(222 8% 40%); --iio-bg: hsl(222 25% 4%); --iio-bg-sunken: hsl(222 25% 2%); --iio-bg-raised: hsl(222 20% 7%); --iio-surface: hsl(222 22% 7%); --iio-surface-mid: hsl(222 20% 10%); --iio-surface-2: hsl(222 18% 14%); --iio-surface-3: hsl(222 16% 18%); /* R14 (2026-08-03): --iio-line 18%→30% + --border-strong 24%→40%. Surface(7%) → line(18%) war ~1.4:1, kaum sichtbar. Analoges Problem wie R13 im Light-Mode (91%→83%). Jetzt ~2.3:1 vs surface. */ --iio-line: hsl(222 20% 30%); --iio-line-soft: hsl(222 20% 22%); /* sekundäre Trenner, etwas zurückhaltender */ --iio-border-focus: hsl(195 100% 60%); --iio-border-strong:hsl(222 18% 40%); --iio-ink: hsl(195 20% 92%); --iio-text-sub: hsl(195 14% 72%); /* aufgehellt: 65%→72% für AA auf surface-1/2 */ --iio-muted: hsl(222 10% 55%); /* aufgehellt: 40%→55% — war FAIL (2.6:1), jetzt ≥4.5:1 */ --iio-on-accent: hsl(222 25% 4%); --iio-accent: hsl(195 100% 50%); /* cyan */ --iio-accent-hover: hsl(195 100% 42%); --iio-accent-light: hsl(195 100% 8%); --iio-accent-mid: hsl(195 100% 20%); --iio-ok: hsl(142 80% 55%); --iio-ok-bg: hsl(142 80% 6%); --iio-warn: hsl(50 100% 55%); --iio-warn-bg: hsl(50 100% 6%); --iio-risk: hsl(0 85% 60%); --iio-risk-bg: hsl(0 85% 7%); --iio-agent: hsl(280 90% 70%); --iio-agent-light: hsl(280 90% 8%); --iio-hitl: hsl(38 100% 55%); --iio-hitl-light: hsl(38 100% 7%); --iio-shadow-sm: 0 1px 4px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.3); --iio-shadow-md: 0 4px 16px rgba(0,0,0,.7), 0 1px 4px rgba(0,0,0,.5); --iio-shadow-lg: 0 12px 40px rgba(0,0,0,.8), 0 4px 12px rgba(0,0,0,.6); --iio-shadow-xl: 0 24px 80px rgba(0,0,0,.85), 0 8px 24px rgba(0,0,0,.7); /* Bridge + fehlende Tokens */ --iio-ink-2: var(--iio-text-sub); --iio-ink-3: var(--iio-muted); --iio-ink-4: color-mix(in srgb, var(--iio-muted) 60%, transparent); --iio-bg-surface: var(--iio-surface); --iio-bg-overlay: rgba(0,0,0,.72); --iio-bg-inverse: var(--iio-ink); --iio-error: var(--iio-risk); --iio-critical: hsl(25 90% 55%); --iio-info: hsl(210 90% 60%); --iio-success: var(--iio-ok); --iio-accent-dark: color-mix(in srgb, var(--iio-accent) 140%, #fff); --iio-accent-subtle:color-mix(in srgb, var(--iio-accent) 8%, transparent); } /* ══════════════════════════════════════════════════════ THEME: space — IIO Raumschiff / Agentic OS Deep black + violet accent. The "real" operator feel. ══════════════════════════════════════════════════════ */ :root[data-theme="space"] { --iio-bg: hsl(260 18% 4%); --iio-bg-sunken: hsl(260 20% 2%); --iio-bg-raised: hsl(260 16% 7%); --iio-surface: hsl(260 16% 7%); --iio-surface-mid: hsl(260 14% 10%); --iio-surface-2: hsl(260 12% 14%); --iio-surface-3: hsl(260 10% 18%); --iio-line: hsl(260 16% 18%); --iio-border-focus: hsl(270 90% 70%); --iio-border-strong:hsl(260 14% 26%); --iio-ink: hsl(270 15% 94%); --iio-text-sub: hsl(270 8% 74%); /* aufgehellt: 68%→74% für AA auf surface-1/2 */ --iio-muted: hsl(260 6% 56%); /* aufgehellt: 42%→56% — war FAIL (2.8:1), jetzt ≥4.5:1 */ --iio-on-accent: hsl(0 0% 100%); --iio-accent: hsl(270 90% 68%); /* violet */ --iio-accent-hover: hsl(270 90% 58%); --iio-accent-light: hsl(270 90% 9%); --iio-accent-mid: hsl(270 80% 22%); --iio-ok: hsl(142 80% 55%); --iio-ok-bg: hsl(142 80% 6%); --iio-warn: hsl(50 100% 55%); --iio-warn-bg: hsl(50 100% 6%); --iio-risk: hsl(0 85% 60%); --iio-risk-bg: hsl(0 85% 7%); --iio-agent: hsl(195 100% 55%); /* cyan agent */ --iio-agent-light: hsl(195 100% 7%); --iio-hitl: hsl(38 100% 55%); --iio-hitl-light: hsl(38 100% 7%); --iio-shadow-sm: 0 1px 4px rgba(0,0,0,.7), 0 0 0 1px rgba(80,40,160,.12); --iio-shadow-md: 0 4px 16px rgba(0,0,0,.8), 0 1px 4px rgba(80,40,160,.15); --iio-shadow-lg: 0 12px 40px rgba(0,0,0,.85), 0 4px 12px rgba(80,40,160,.2); --iio-shadow-xl: 0 24px 80px rgba(0,0,0,.9), 0 0 60px rgba(120,60,200,.12); --iio-ink-2: var(--iio-text-sub); --iio-ink-3: var(--iio-muted); --iio-ink-4: color-mix(in srgb, var(--iio-muted) 60%, transparent); --iio-bg-surface: var(--iio-surface); --iio-bg-overlay: rgba(0,0,0,.8); --iio-bg-inverse: var(--iio-ink); --iio-error: var(--iio-risk); --iio-critical: hsl(25 90% 55%); --iio-info: hsl(210 90% 60%); --iio-success: var(--iio-ok); --iio-accent-dark: color-mix(in srgb, var(--iio-accent) 120%, #fff); --iio-accent-subtle:color-mix(in srgb, var(--iio-accent) 8%, transparent); /* Space-spezifisch: leichter Star-Dust-Glow auf TopRail */ --sh-toprail-bg: hsl(260 22% 5%); --sh-toprail-border:hsl(270 30% 14%); --sh-toprail-accent:hsl(270 90% 68%); } /* ══════════════════════════════════════════════════════ THEME: knight-rider — Persona-Theme (Typ 3, RG-007) Terminal-Gruen auf Matte-Black, Scanner-Rot als sekundaerer Signal-Akzent. Quelle: iio/theme/families/storyworld/knight-rider/ MANIFEST.yaml (farbe_primaer #1A1A1A, farbe_akzent #00FF41, farbe_sekundaer #C00000). IP: inspired_by Knight Rider (NBC 1982-1986) -- internal_dev_only, RG-007 genehmigt 2026-07-28 (Operator zolo). Nur ueber Opt-in sichtbar, kein Default. ══════════════════════════════════════════════════════ */ :root[data-theme="knight-rider"] { --iio-bg: hsl(0 0% 5%); --iio-bg-sunken: hsl(0 0% 3%); --iio-bg-raised: hsl(0 0% 8%); --iio-surface: hsl(0 0% 10%); --iio-surface-mid: hsl(0 0% 13%); --iio-surface-2: hsl(0 0% 16%); --iio-surface-3: hsl(0 0% 20%); --iio-line: hsl(135 30% 20%); --iio-line-soft: hsl(135 20% 14%); --iio-border-focus: hsl(135 100% 50%); --iio-border-strong:hsl(135 25% 30%); --iio-ink: hsl(0 0% 91%); --iio-text-sub: hsl(135 15% 70%); --iio-muted: hsl(0 0% 55%); --iio-on-accent: hsl(0 0% 5%); --iio-accent: hsl(135 100% 50%); /* terminal green — KITT scanner core */ --iio-accent-hover: hsl(135 100% 42%); --iio-accent-light: hsl(135 100% 8%); --iio-accent-mid: hsl(135 100% 20%); --iio-ok: hsl(135 100% 50%); --iio-ok-bg: hsl(135 100% 6%); --iio-warn: hsl(50 100% 55%); --iio-warn-bg: hsl(50 100% 6%); --iio-risk: hsl(0 100% 38%); /* scanner red */ --iio-risk-bg: hsl(0 100% 7%); --iio-agent: hsl(0 100% 45%); /* KITT scanner-sweep red for agent-activity */ --iio-agent-light: hsl(0 100% 7%); --iio-hitl: hsl(38 100% 55%); --iio-hitl-light: hsl(38 100% 7%); --iio-shadow-sm: 0 1px 4px rgba(0,0,0,.7), 0 0 0 1px rgba(0,255,65,.08); --iio-shadow-md: 0 4px 16px rgba(0,0,0,.8), 0 1px 4px rgba(0,255,65,.1); --iio-shadow-lg: 0 12px 40px rgba(0,0,0,.85), 0 4px 12px rgba(0,255,65,.12); --iio-shadow-xl: 0 24px 80px rgba(0,0,0,.9), 0 0 60px rgba(0,255,65,.1); --iio-ink-2: var(--iio-text-sub); --iio-ink-3: var(--iio-muted); --iio-ink-4: color-mix(in srgb, var(--iio-muted) 60%, transparent); --iio-bg-surface: var(--iio-surface); --iio-bg-overlay: rgba(0,0,0,.8); --iio-bg-inverse: var(--iio-ink); --iio-error: var(--iio-risk); --iio-critical: hsl(0 100% 45%); --iio-info: hsl(210 90% 60%); --iio-success: var(--iio-ok); --iio-accent-dark: color-mix(in srgb, var(--iio-accent) 120%, #fff); --iio-accent-subtle:color-mix(in srgb, var(--iio-accent) 8%, transparent); /* Knight-Rider-spezifisch: Scanner-Rot auf TopRail statt Gruen-Akzent (Signature Animation Referenz: MANIFEST.yaml signature_animation) */ --sh-toprail-bg: hsl(0 0% 4%); --sh-toprail-border:hsl(0 60% 16%); --sh-toprail-accent:hsl(0 100% 45%); font-family: 'JetBrains Mono', ui-monospace, monospace; } /* KITT-Scanner aktivieren -- IIOTopRail.vue rendert .iio-kr-scanner IMMER (kostet in anderen Themes nichts, display:none per Default dort), diese Regel schaltet ihn nur unter data-theme="knight-rider" auf sichtbar. War der fehlende Teil beim Erst-Rollout (2026-08-10): Theme hatte bisher nur Farbvariablen, nicht die MANIFEST.yaml signature_animation selbst ("das Wichtigste" -- Operator-Fund im selben Chat). */ :root[data-theme="knight-rider"] .iio-kr-scanner { display: block; } /* ══════════════════════════════════════════════════════ THEME: enterprise — Corporate Blue Perfect for: boardrooms, enterprise sales, compliance ══════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════ THEME: vibrant — High Energy, Creative Perfect for: marketing, growth, product demos ══════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════ THEME: nature — Organic Green Perfect for: sustainability, wellness, environmental ══════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════ VISUAL ENHANCEMENTS — Glass, Gradients, Effects Apply these utility classes for premium look ══════════════════════════════════════════════════════ */ /* Glass morphism */ .q-glass-sm { background:color-mix(in srgb,var(--iio-surface) 70%,transparent); backdrop-filter:blur(8px) saturate(1.3); border:1px solid color-mix(in srgb,var(--iio-line) 50%,transparent); } .q-glass-md { background:color-mix(in srgb,var(--iio-surface) 60%,transparent); backdrop-filter:blur(16px) saturate(1.5); border:1px solid color-mix(in srgb,var(--iio-line) 40%,transparent); } .q-glass-lg { background:color-mix(in srgb,var(--iio-surface) 40%,transparent); backdrop-filter:blur(24px) saturate(1.8); border:1px solid color-mix(in srgb,var(--iio-line) 30%,transparent); } .q-glass-dark{ background:color-mix(in srgb,var(--iio-gray-900) 60%,transparent); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.08); } /* Gradient text */ .q-gradient-text { background: var(--iio-gradient-hero, linear-gradient(135deg, var(--iio-accent), var(--iio-agent))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .q-gradient-text-warm { background:linear-gradient(135deg,var(--iio-warn),var(--iio-risk)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .q-gradient-text-cool { background:linear-gradient(135deg,var(--iio-accent),var(--iio-agent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .q-gradient-text-nature{ background:linear-gradient(135deg,#16a34a,#0891b2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } /* Gradient backgrounds */ .q-gradient-accent { background:linear-gradient(135deg, var(--iio-accent), color-mix(in srgb,var(--iio-accent) 70%,var(--iio-agent))); } .q-gradient-surface { background:linear-gradient(180deg, var(--iio-surface), var(--iio-surface-mid)); } .q-gradient-hero { background:var(--iio-gradient-hero, linear-gradient(135deg, var(--iio-accent), var(--iio-agent))); } /* Glow effects */ .q-glow-accent { box-shadow:0 0 20px color-mix(in srgb,var(--iio-accent) 35%,transparent), 0 0 60px color-mix(in srgb,var(--iio-accent) 15%,transparent); } .q-glow-ok { box-shadow:0 0 20px color-mix(in srgb,var(--iio-ok) 35%,transparent); } .q-glow-warn { box-shadow:0 0 20px color-mix(in srgb,var(--iio-warn) 35%,transparent); } .q-glow-error { box-shadow:0 0 20px color-mix(in srgb,var(--iio-risk) 35%,transparent); } .q-glow-agent { box-shadow:0 0 20px color-mix(in srgb,var(--iio-agent) 35%,transparent); } /* Noise/texture overlay */ .q-noise::after { content:''; position:absolute; inset:0; pointer-events:none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); opacity:.03; border-radius:inherit; } /* Shimmer animation for premium cards */ .q-shimmer { position:relative; overflow:hidden; } .q-shimmer::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%); animation:q-shimmer-move 3s ease-in-out infinite; } @keyframes q-shimmer-move { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } } /* Card elevation system */ .q-elevation-0 { box-shadow:none; } .q-elevation-1 { box-shadow:0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); } .q-elevation-2 { box-shadow:0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06); } .q-elevation-3 { box-shadow:0 8px 16px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06); } .q-elevation-4 { box-shadow:0 16px 32px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.08); } .q-elevation-5 { box-shadow:0 32px 64px rgba(0,0,0,.16), 0 16px 32px rgba(0,0,0,.10); } /* Border gradients */ .q-border-gradient { border:1px solid transparent; background: linear-gradient(var(--iio-surface), var(--iio-surface)) padding-box, linear-gradient(135deg, var(--iio-accent), var(--iio-agent)) border-box; } /* Hover lift effect */ .q-hover-lift { transition:transform var(--iio-dur-fast) var(--iio-ease-spring), box-shadow var(--iio-dur-fast); } .q-hover-lift:hover { transform:translateY(-3px); box-shadow:var(--iio-shadow-lg); } /* Smooth corners (adaptive radius) */ .q-smooth-xs { border-radius:var(--iio-r-xs); } .q-smooth-sm { border-radius:var(--iio-r-sm); } .q-smooth-md { border-radius:var(--iio-r-md); } .q-smooth-lg { border-radius:var(--iio-r-lg); } .q-smooth-xl { border-radius:var(--iio-r-xl); } .q-smooth-2xl { border-radius:24px; } .q-smooth-full { border-radius:var(--iio-r-full); } /* Type scale utilities */ .q-text-display { font-size:clamp(2.5rem,6vw,4.5rem); font-weight:900; line-height:1.05; letter-spacing:-.04em; } .q-text-hero { font-size:clamp(2rem,4vw,3.5rem); font-weight:900; line-height:1.1; letter-spacing:-.03em; } .q-text-title { font-size:clamp(1.5rem,3vw,2.5rem); font-weight:800; line-height:1.15; letter-spacing:-.02em; } .q-text-heading { font-size:clamp(1.2rem,2vw,1.8rem); font-weight:800; line-height:1.2; letter-spacing:-.01em; } .q-text-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--iio-muted); } .q-text-mono { font-family:var(--iio-font-mono); font-size:.9em; } /* Vibrant mode special effects */ /* Midnight mode terminal cursor */ [data-theme="midnight"] .q-cursor-blink::after { content:'▊'; animation:cursor-blink 1.2s step-end infinite; color:var(--iio-accent); } @keyframes cursor-blink { 0%,100%{opacity:1} 50%{opacity:0} } /* Enterprise mode subtle pattern */ /* ────────────────────────────────────────────────────────────────────────── IIO Calm Mode — single control point for ambient motion. The cockpit "quantum" layer (quantum.css + themes.css) defines ~20 INFINITE ambient animations (heartbeat, breathe, neural-glow, agent/hitl pulse, live-dot, shimmer, consciousness-ping, float, data-stream, card-breathe, cursor-blink, hue-rotate, emergency-pulse). They are decorative and were reported as visually nervous/distracting on cockpit.iio.space. Motion is NOT part of the theme (themes only set colors/tokens) — that is why re-theming never removed the pulsing. This file is the dedicated motion layer. DEFAULT = calm (no infinite ambient motion). To restore full ambient motion: add class "iio-motion-full" to . Accessibility: prefers-reduced-motion always forces calm regardless of toggle. Loaded LAST in main.ts so it wins the cascade. Reversible: remove the import. ────────────────────────────────────────────────────────────────────────── */ html:not(.iio-motion-full) .q-activation-spike, html:not(.iio-motion-full) .q-agent-glow, html:not(.iio-motion-full) .q-alive, html:not(.iio-motion-full) .q-android-hero__orb, html:not(.iio-motion-full) .q-android-hero__state, html:not(.iio-motion-full) .q-consciousness-ping::after, html:not(.iio-motion-full) .q-data-stream, html:not(.iio-motion-full) .q-float, html:not(.iio-motion-full) .q-heartbeat, html:not(.iio-motion-full) .q-hitl-glow, html:not(.iio-motion-full) .q-live-dot::before, html:not(.iio-motion-full) .q-neural-border, html:not(.iio-motion-full) .q-neural-glow, html:not(.iio-motion-full) .q-shimmer::before, html:not(.iio-motion-full) .q-skeleton, html:not(.iio-motion-full) [data-context="emergency"], html:not(.iio-motion-full) [data-organism="peak"] .iio-view-title, html:not(.iio-motion-full) [data-organism="resonant"] .iio-card, html:not(.iio-motion-full) [data-organism="resonant"] .iio-view-title, html:not(.iio-motion-full) [data-theme="midnight"] .q-cursor-blink::after, html:not(.iio-motion-full) [data-theme="vibrant"] .q-gradient-text { animation: none !important; } /* Static end-states so disabled animations don't freeze mid-motion */ html:not(.iio-motion-full) .q-skeleton { opacity: 1 !important; } html:not(.iio-motion-full) .q-live-dot::before, html:not(.iio-motion-full) .q-consciousness-ping::after { opacity: 1 !important; transform: none !important; } /* ── Robust catch-all ─────────────────────────────────────────────────────── The selectors above only cover the global quantum classes. Many components reference the same infinite keyframes under their OWN selectors (e.g. .app-header__agent-dot uses q-live-dot, IIOQuantumProvider uses q-pulse, PulseRing uses pulse-expand, OperatorSessionsPanel uses pulse-dot) — and Vue scoped styles hash keyframe names, so they can't be targeted globally. This rule stops EVERY looping animation (scoped or not) after a single cycle. One-shot entrance animations (fade/slide/scale-in) are unaffected — they already run once. This is the definitive kill for the nervous purple pulsing. */ html:not(.iio-motion-full), html:not(.iio-motion-full) *, html:not(.iio-motion-full) *::before, html:not(.iio-motion-full) *::after { /* Nuclear: no animation at all (not even a single cycle). Covers status dots (qos-dot/OEP, toprail heartbeat, footer dot) and anything re-triggered by reconnect/poll loops. Reversible via html.iio-motion-full. */ animation: none !important; animation-iteration-count: 1 !important; /* Also neutralize transition-driven pulsing: a ~1s poll toggling a class on an element with transition:transform/opacity replays a "pump" that animation-iteration-count cannot stop. Kill transform/opacity transitions. */ transition-property: none !important; } /* Accessibility: reduced-motion users always get calm, even with toggle on */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Ausnahme: Knight-Rider KITT-Scanner (RG-007 Persona-Theme, signature_ animation aus MANIFEST.yaml -- "The visual heartbeat of the car", kein dekoratives Nebengeraeusch sondern der ganze Grund, das Theme zu waehlen). Die Nuclear-Regel oben (Zeile 58ff) killt ihn wie jede andere Loop- Animation -- ohne diese Ausnahme laeuft das Theme nie, unabhaengig vom Motion-Toggle. Hoehere Spezifitaet (Klasse statt Universal-Selektor) gewinnt unabhaengig von der Reihenfolge im File. Reduced-Motion (oben) bleibt unberuehrt uebergeordnet -- Accessibility schlaegt Theme-Wahl immer. Operator-Fund 2026-08-10: "ist da aber bewegt sich nicht". WICHTIG: eigene @keyframes hier, NICHT den Namen aus IIOTopRail.vue wiederverwenden -- Vue haengt scoped-styles automatisch einen Datei-Hash an @keyframes-Namen an (dort effektiv "iio-kr-scanner-sweep-"), diese Datei ist aber plain global CSS (kein Vue-SFC, keine Umbenennung). Ein Verweis auf den unhashten Namen waere ein ungueltiger animation-name -> Browser ignoriert ihn stillschweigend, exakt derselbe "sichtbar aber starr"-Effekt wie der urspruengliche Bug. Eigene, hier deklarierte Keyframes vermeiden die Cross-File-Hash-Abhaengigkeit komplett. */ @keyframes iio-kr-calm-scanner-sweep { 0% { left: -8%; } 50% { left: 92%; } 100% { left: -8%; } } html:not(.iio-motion-full) .iio-kr-scanner::after { animation: iio-kr-calm-scanner-sweep 4000ms linear infinite !important; } /* ============================================================================ settings.css — Gemeinsame Layout-Sprache aller Einstellungen-Panels Classification: own | AGT-A49F3929 | 2026-08-03 WARUM DIESE DATEI: Vor dieser Datei hatte jeder Settings-Tab seine eigene Layout-Sprache (os-* / pref-* / td-* / mcp-* / aihub-* / ocp-*) mit eigenen Abstaenden, Schriftgroessen (px vs rem vs var(--text-xs)) und teils NICHT existierenden Tokens (--iio-neutral-*, --iio-*-light, --iio-shadow-light). Ergebnis: flache, unstrukturierte Panels + dreifaches Padding + 720px-Spalte auf 2000px-Screens. REGEL AB JETZT: Settings-Panels definieren KEINE eigenen Layout-Primitive mehr. Nur .set-* aus dieser Datei. Panel-scoped CSS ist ausschliesslich fuer echte Sonderfaelle erlaubt (z.B. Theme-Swatch-Preview). TOKEN-CONTRACT (nur diese verwenden, alle in quantum.css definiert): Flaechen : --iio-surface --iio-surface-mid --iio-surface-2 Linien : --iio-line Text : --iio-ink --iio-ink-2 --iio-muted Semantik : --iio-accent --iio-ok --iio-warn --iio-risk --iio-info Radius : --iio-r-sm(6) --iio-r-md(8) --iio-r-lg(12) ========================================================================== */ /* ── Typo-Skala: EINE Skala fuer alle Settings-Panels ────────────────────── */ :root { --set-fs-xs: 10.5px; /* Tags, Typ-Marker, Fussnoten */ --set-fs-sm: 11.5px; /* Beschreibungen, Hints, Tabellen-Header */ --set-fs-base: 12.5px; /* Werte, Inputs, Standardtext */ --set-fs-title: 13px; /* Card-Titel */ --set-fs-head: 15px; /* Tab-Kopfzeile */ --set-gap: 14px; /* Grid-/Card-Abstand */ --set-pad: 14px; /* Card-Innenabstand */ } /* ============================================================================ 1) SEITE — jeder Tab-Inhalt ist eine .set-page ========================================================================== */ .set-page { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 1360px; /* statt 720px — nutzt Breite, bleibt lesbar */ box-sizing: border-box; } /* Kopfzeile: Titel links, Aktionen rechts. Jeder Tab hat sie — daher wirken alle Tabs "aus einem Guss", egal ob Formular, Tabelle oder Status-Ansicht. */ .set-page__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .set-page__titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .set-page__title { font-size: var(--set-fs-head); font-weight: 700; color: var(--iio-ink); letter-spacing: -0.01em; line-height: 1.25; } .set-page__sub { font-size: var(--set-fs-sm); color: var(--iio-muted); line-height: 1.45; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .set-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* ============================================================================ 2) GRID — Raumnutzung. Karten fliessen in Spalten statt zu stapeln. ========================================================================== */ .set-grid { display: grid; gap: var(--set-gap); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; } /* fuer inhaltsreichere Karten (Formulare, Code-Bloecke). 520px ist bewusst gewaehlt: bei max-width 1360px ergibt auto-fill damit IMMER genau 2 Spalten. Mit 440px waren es 3 — dann brach jede .set-span-2 Karte die Reihe auf und das Raster wirkte ausgefranst. */ .set-grid--wide { grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); } /* fuer volle Breite (Tabellen) */ .set-grid--full { grid-template-columns: 1fr; } /* Karte darf 2 Spalten belegen — nur wenn genug Platz da ist */ @media (min-width: 1100px) { .set-span-2 { grid-column: span 2; } } /* ============================================================================ 3) KARTE — einheitlicher Rahmen fuer JEDEN Inhaltsblock ========================================================================== */ .set-card { display: flex; flex-direction: column; background: var(--iio-surface); border: 1px solid var(--iio-line); border-radius: var(--iio-r-lg, 12px); overflow: hidden; min-width: 0; /* Premium-Pass (2026-08): jede Settings-Karte bekommt dieselbe dezente Schwebe-Tiefe wie IIOCard/IIOStatGrid/IIOTable — vorher waren Settings- Panels die einzige Flaeche im Cockpit mit reiner Outline, das brach den sonst konsistenten "erhabene Flaeche"-Eindruck. */ box-shadow: var(--iio-shadow-card, none); transition: box-shadow 160ms ease, border-color 160ms ease; } .set-card--accent { border-color: color-mix(in srgb, var(--iio-accent) 35%, var(--iio-line)); } .set-card--danger { border-color: color-mix(in srgb, var(--iio-risk) 32%, var(--iio-line)); } .set-card__head { display: flex; align-items: center; gap: 8px; padding: 9px var(--set-pad); border-bottom: 1px solid var(--iio-line); background: var(--iio-surface-mid); min-height: 34px; box-sizing: border-box; } .set-card__icon { flex-shrink: 0; color: var(--iio-muted); display: flex; } .set-card__title { font-size: var(--set-fs-title); font-weight: 700; color: var(--iio-ink); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .set-card__sub { font-size: var(--set-fs-sm); color: var(--iio-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .set-card__meta { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .set-card__body { padding: var(--set-pad); display: flex; flex-direction: column; gap: 12px; min-width: 0; } .set-card__body--flush { padding: 0; } .set-card__foot { padding: 9px var(--set-pad); border-top: 1px solid var(--iio-line); background: var(--iio-surface-mid); font-size: var(--set-fs-sm); color: var(--iio-muted); line-height: 1.45; } /* ============================================================================ 4) SEKTION — Gliederung INNERHALB einer Karte (ohne neue Karte) ========================================================================== */ .set-section { display: flex; flex-direction: column; gap: 10px; } .set-section__label { font-size: var(--set-fs-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--iio-muted); } .set-divider { height: 1px; background: var(--iio-line); opacity: 0.6; } /* ============================================================================ 5) DEFINITIONSLISTE — Schluessel/Wert-Paare, kompakt und ausgerichtet Ersetzt die vorher 3 unterschiedlichen Key/Value-Muster (aihub-row, mcp-row, pref-field) durch EINE dichte, tabellarische Darstellung. ========================================================================== */ .set-dl { display: grid; grid-template-columns: minmax(104px, 32%) 1fr; gap: 1px; background: var(--iio-line); border: 1px solid var(--iio-line); border-radius: var(--iio-r-md, 8px); overflow: hidden; } .set-dl__k, .set-dl__v { background: var(--iio-surface); padding: 7px 10px; font-size: var(--set-fs-base); display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 30px; box-sizing: border-box; } .set-dl__k { color: var(--iio-muted); font-weight: 600; line-height: 1.3; } .set-dl__v { color: var(--iio-ink); overflow-wrap: anywhere; } /* einspaltig bei sehr schmalen Karten */ @media (max-width: 560px) { .set-dl { grid-template-columns: 1fr; } .set-dl__k { padding-bottom: 2px; } } /* ============================================================================ 6) FELD — Label + Beschreibung + Control ========================================================================== */ .set-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .set-field__label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--set-fs-sm); font-weight: 600; color: var(--iio-ink); } .set-field__desc { font-size: var(--set-fs-sm); color: var(--iio-muted); line-height: 1.4; } .set-field__hint { font-size: var(--set-fs-xs); color: var(--iio-muted); line-height: 1.4; } .set-field__err { font-size: var(--set-fs-xs); color: var(--iio-risk); line-height: 1.4; } /* Feld-Reihe: Label links, Control rechts (fuer Toggles) */ .set-field--row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; } .set-field--row .set-field__label { flex: 1; min-width: 0; } /* ── Controls ── */ .set-input, .set-select, .set-textarea { width: 100%; box-sizing: border-box; background: var(--iio-surface-mid); border: 1px solid var(--iio-line); border-radius: var(--iio-r-sm, 6px); padding: 6px 9px; font-size: var(--set-fs-base); font-family: inherit; color: var(--iio-ink); outline: none; transition: border-color 120ms, box-shadow 120ms; } .set-textarea { resize: vertical; font-family: var(--iio-font-mono, ui-monospace, monospace); line-height: 1.5; } .set-input:focus-visible, .set-select:focus-visible, .set-textarea:focus-visible { border-color: var(--iio-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--iio-accent) 16%, transparent); } .set-input:disabled, .set-select:disabled, .set-textarea:disabled { opacity: 0.5; cursor: not-allowed; } .set-select { appearance: none; cursor: pointer; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b8b96' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; } .set-input--narrow { max-width: 130px; } /* Input mit Einheit dahinter */ .set-input-group { display: flex; align-items: center; gap: 8px; } .set-input-group__unit { font-size: var(--set-fs-sm); color: var(--iio-muted); white-space: nowrap; } /* ── Toggle-Switch ── */ .set-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; flex-shrink: 0; } .set-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; } .set-toggle__track { width: 34px; height: 19px; border-radius: 10px; background: var(--iio-surface-2); border: 1px solid var(--iio-line); position: relative; transition: background 160ms, border-color 160ms; flex-shrink: 0; } .set-toggle__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--iio-muted); transition: transform 160ms, background 160ms; } .set-toggle__input:checked + .set-toggle__track { background: color-mix(in srgb, var(--iio-accent) 22%, transparent); border-color: var(--iio-accent); } .set-toggle__input:checked + .set-toggle__track::after { transform: translateX(15px); background: var(--iio-accent); } .set-toggle__input:focus-visible + .set-toggle__track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--iio-accent) 18%, transparent); } /* ── Auswahl-Kacheln (Theme, Dichte, Sprache, Optionen) ── */ .set-choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } /* R-SURF-024 (2026-08-22, Migrationsstufe 3): Auswahl wird durch FLAECHE angezeigt, nicht durch Rahmen. Eine Optionskachel ist kein Objekt mit Kante -- sie ist ein Feld, das gefuellt ist oder nicht. Vorher trug jede Kachel einen 1px-Rahmen: allein auf /settings 16 Linien (3 Themes, 3 Dichten, 10 Sprachen), die keine Information trugen. Fokus bleibt sichtbar (outline, kein Rahmen) -- Tastaturbedienung unveraendert, WCAG 2.4.7 erfuellt. */ .set-choice { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: var(--iio-r-md, 8px); border: none; background: var(--iio-surface-mid); cursor: pointer; text-align: left; position: relative; transition: background 130ms, color 130ms; min-width: 0; } .set-choice:hover { background: color-mix(in srgb, var(--iio-accent) 7%, var(--iio-surface-mid)); } .set-choice:focus-visible { outline: 2px solid var(--iio-accent); outline-offset: 1px; } .set-choice--active { background: color-mix(in srgb, var(--iio-accent) 16%, var(--iio-surface-mid)); color: var(--iio-ink); } .set-choice__label { font-size: var(--set-fs-base); font-weight: 600; color: var(--iio-ink); } .set-choice__desc { font-size: var(--set-fs-xs); color: var(--iio-muted); line-height: 1.35; } .set-choice__check { position: absolute; top: 8px; right: 8px; color: var(--iio-accent); } /* Variante: eine Zeile, Icon + Label + Meta rechts */ .set-choice--row { flex-direction: row; align-items: center; gap: 10px; padding: 7px 11px; } .set-choice--row .set-choice__label { flex: 1; min-width: 0; } /* ── Chips / Tags ── */ .set-chips { display: flex; flex-wrap: wrap; gap: 5px; } /* Chips: ebenfalls Flaeche statt Kante (R-SURF-024). Ein Chip ist ein Etikett, kein umrandetes Objekt. */ .set-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 20px; border: none; background: var(--iio-surface-mid); font-size: var(--set-fs-xs); font-weight: 600; color: var(--iio-ink-2); white-space: nowrap; } .set-chip--mono { font-family: var(--iio-font-mono, ui-monospace, monospace); font-weight: 500; letter-spacing: -0.01em; } .set-chip--active { background: color-mix(in srgb, var(--iio-accent) 18%, var(--iio-surface-mid)); color: var(--iio-ink); } .set-chip--warn { background: color-mix(in srgb, var(--iio-warn) 16%, var(--iio-surface-mid)); color: var(--iio-warn); } .set-chip--btn { cursor: pointer; transition: background 120ms; } .set-chip--btn:hover { background: color-mix(in srgb, var(--iio-accent) 12%, var(--iio-surface-mid)); } .set-chip input { width: 11px; height: 11px; margin: 0; cursor: pointer; accent-color: var(--iio-accent); } /* ============================================================================ 7) MONO / CODE ========================================================================== */ .set-mono { font-family: var(--iio-font-mono, ui-monospace, monospace); font-size: var(--set-fs-sm); letter-spacing: -0.01em; overflow-wrap: anywhere; } .set-code { display: block; background: var(--iio-surface-mid); border: 1px solid var(--iio-line); border-radius: var(--iio-r-md, 8px); padding: 10px 11px; font-family: var(--iio-font-mono, ui-monospace, monospace); font-size: var(--set-fs-sm); line-height: 1.55; color: var(--iio-ink); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; box-sizing: border-box; width: 100%; } /* ============================================================================ 8) HINWEIS-BLOECKE ========================================================================== */ .set-note { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border-radius: var(--iio-r-md, 8px); border: 1px solid var(--iio-line); background: var(--iio-surface-mid); font-size: var(--set-fs-sm); line-height: 1.5; color: var(--iio-ink-2); } .set-note--info { border-color: color-mix(in srgb, var(--iio-info) 32%, var(--iio-line)); background: color-mix(in srgb, var(--iio-info) 7%, transparent); } .set-note--ok { border-color: color-mix(in srgb, var(--iio-ok) 32%, var(--iio-line)); background: color-mix(in srgb, var(--iio-ok) 7%, transparent); } .set-note--warn { border-color: color-mix(in srgb, var(--iio-warn) 34%, var(--iio-line)); background: color-mix(in srgb, var(--iio-warn) 8%, transparent); color: var(--iio-ink); } .set-note--error { border-color: color-mix(in srgb, var(--iio-risk) 34%, var(--iio-line)); background: color-mix(in srgb, var(--iio-risk) 8%, transparent); color: var(--iio-risk); } .set-note__icon { flex-shrink: 0; line-height: 1.4; } .set-note p { margin: 0; } .set-note p + p { margin-top: 4px; } .set-hint { font-size: var(--set-fs-sm); color: var(--iio-muted); line-height: 1.5; margin: 0; } /* ============================================================================ 9) BUTTONS — Settings-lokale Aktionen (Speichern/Zuruecksetzen/Kopieren) ========================================================================== */ .set-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 13px; border-radius: var(--iio-r-sm, 6px); border: 1px solid var(--iio-line); background: var(--iio-surface-mid); color: var(--iio-ink); font-size: var(--set-fs-base); font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background 120ms, border-color 120ms, opacity 120ms; } .set-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--iio-accent) 45%, var(--iio-line)); } .set-btn:focus-visible { outline: 2px solid var(--iio-accent); outline-offset: 1px; } .set-btn:disabled { opacity: 0.4; cursor: not-allowed; } .set-btn--primary { background: var(--iio-accent); border-color: var(--iio-accent); color: var(--iio-bg, #fff); /* Premium-Pass: primaere Aktion bekommt einen dezenten Farb-Schatten (Akzent-getoent statt neutral) -- hebt den einen CTA pro Karte optisch ab, ohne laut zu wirken. */ box-shadow: 0 1px 2px color-mix(in srgb, var(--iio-accent) 35%, transparent); } .set-btn--primary:hover:not(:disabled) { opacity: 0.92; box-shadow: 0 2px 6px color-mix(in srgb, var(--iio-accent) 40%, transparent); } .set-btn--danger { border-color: color-mix(in srgb, var(--iio-risk) 45%, var(--iio-line)); color: var(--iio-risk); background: color-mix(in srgb, var(--iio-risk) 7%, transparent); } .set-btn--ghost { background: transparent; border-color: transparent; color: var(--iio-muted); } .set-btn--ghost:hover:not(:disabled) { background: var(--iio-surface-mid); color: var(--iio-ink); } .set-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ============================================================================ 10) ZUSTAENDE — Laden / Leer / Fehler (vorher 5x unterschiedlich) ========================================================================== */ .set-state { display: flex; align-items: center; gap: 9px; padding: 22px 14px; font-size: var(--set-fs-base); color: var(--iio-muted); justify-content: center; } .set-spinner { width: 14px; height: 14px; border: 2px solid var(--iio-line); border-top-color: var(--iio-accent); border-radius: 50%; animation: set-spin 0.8s linear infinite; flex-shrink: 0; } @keyframes set-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .set-spinner { animation-duration: 2.4s; } } /* ============================================================================ 11) FORTSCHRITT (Budget etc.) ========================================================================== */ .set-meter { width: 100%; height: 6px; border-radius: 3px; background: var(--iio-surface-2); overflow: hidden; } .set-meter__fill { height: 100%; border-radius: 3px; background: var(--iio-accent); transition: width 300ms ease, background 300ms ease; } .set-meter__fill--warn { background: var(--iio-warn); } .set-meter__fill--risk { background: var(--iio-risk); } /* ============================================================================ 12) TABELLE ========================================================================== */ .set-table { width: 100%; border-collapse: collapse; font-size: var(--set-fs-base); } .set-table th { text-align: left; padding: 8px var(--set-pad); font-size: var(--set-fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--iio-muted); background: var(--iio-surface-mid); border-bottom: 1px solid var(--iio-line); white-space: nowrap; } .set-table td { padding: 9px var(--set-pad); border-bottom: 1px solid var(--iio-line); vertical-align: top; color: var(--iio-ink); } .set-table tbody tr:last-child td { border-bottom: none; } .set-table tbody tr:hover td { background: var(--iio-surface-mid); } .set-table__scroll { overflow-x: auto; } /* ============================================================================ 13) STICKY SAVE-BAR — erscheint nur bei ungespeicherten Aenderungen ========================================================================== */ .set-savebar { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-top: 4px; border: 1px solid color-mix(in srgb, var(--iio-accent) 35%, var(--iio-line)); border-radius: var(--iio-r-lg, 12px); background: var(--iio-surface); box-shadow: 0 -2px 14px rgb(0 0 0 / 0.10); } .set-savebar__text { font-size: var(--set-fs-base); color: var(--iio-ink); flex: 1; min-width: 0; } .set-savebar__ok { font-size: var(--set-fs-base); font-weight: 600; color: var(--iio-ok); } /* ============================================================================ 14) TAB-CHROME — sticky Tab-Leiste ueber den .set-page-Tabs Extrahiert AGT-795C92E6 (2026-08-03) aus OperatorSettings.vue (.os-tabs/ .os-tab, war dort scoped) -- damit TenantSettings.vue (Tab "Mein Zugang") dieselbe Chrome nutzen kann statt sie zu duplizieren. Voller-Bleed: hebt das Content-Padding per negativem Margin auf, damit die Leiste ueber die volle Breite sitzt und beim Scrollen oben klebt. ========================================================================== */ .set-tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--content-pad, 28px) * -1); padding: 0 var(--content-pad, 28px); background: var(--iio-bg); border-bottom: 1px solid var(--iio-line); } .set-tabs::-webkit-scrollbar { display: none; } .set-tab { display: flex; align-items: center; gap: 6px; padding: 0 13px; height: 36px; border: none; /* Aktiv-Markierung als inset-Schatten statt transparentem 2px-Rahmen an JEDEM Tab (R-SURF-021: keine unsichtbaren Kanten, die nur Platz halten). Kein Layout-Shift, weil box-shadow keinen Raum belegt. */ background: none; cursor: pointer; font-size: 12.5px; font-weight: 500; font-family: inherit; color: var(--iio-muted); transition: color 120ms, box-shadow 120ms; white-space: nowrap; flex-shrink: 0; margin-bottom: -1px; } .set-tab:hover { color: var(--iio-ink); } .set-tab:focus-visible { outline: 2px solid var(--iio-accent); outline-offset: -3px; } .set-tab--active { color: var(--iio-accent); box-shadow: inset 0 -2px 0 var(--iio-accent); font-weight: 600; } .set-tabs-body { padding-top: 20px; } /* IIO Instrument Deck — Token-Bereich für Instrumentenflächen * =========================================================== * Wird von IIOInstrumentDeck.vue über die Klasse `.iio-deck` aufgespannt. * * THEME-FOLGE STATT EIGENER DUNKELFLÄCHE (2026-08-12) * --------------------------------------------------- * Ursprung (2026-08-07, DEC-20260807-cockpit-instrument-baukasten.md): die * Tafel war eine bewusst DUNKLE, "diegetische" Gerätefläche — Begründung * damals: ein 3-%-Ring ist gegen Weiß nicht auffindbar, ein Alarm muss aus dem * Dunkeln treten. Der Bereich überschrieb dafür ~25 `--iio-*`-Tokens innerhalb * von `.iio-deck` mit Werten aus dem Theme `space`. * * Operator-Entscheidung 2026-08-12 (Chat, im selben Zug mit der LAB→CORE- * Promotion von /panels): "nimm instrumente rein wie vorgeschlagen aber änder * den dunklen hintergrund". Sachlicher Grund: als Labor-Fläche war die dunkle * Insel ein Detail, als tägliches CORE-Nav-Ziel in der Gruppe "Plattform" ist * sie ein Stilbruch — dieselbe Ansicht, die ein Operator neben Infrastruktur * und Publishing öffnet, kam als schwarzer Block im hellen Cockpit. * * Was jetzt gilt: * • Flächen und Schrift kommen aus dem AKTIVEN App-Theme (keine Überschreibung * von --iio-bg/--iio-surface*/--iio-ink*/--iio-ok/--iio-warn/--iio-risk mehr). * Im dunklen Theme (`space`, `night`, `knight-rider`) ist das Deck damit * weiterhin dunkel — nur eben WEIL das Theme dunkel ist, nicht dagegen. * • Die frühere Begründung bleibt technisch adressiert, ohne Dunkelfläche: * die Ringbahn (`--iio-instr-track`) wird aus der Tinte des Themes gemischt * statt hart gesetzt, damit eine 3-%-Füllung auch auf Hell Kontrast gegen * die Bahn hat; der Selbstleucht-Filter (`--iio-instr-glow`) ist auf Hell * bewusst NICHT gesetzt (Glow auf Weiß erzeugt Schmutz, keine Lesbarkeit) * und wird nur in dunklen Themes aktiviert (Media-unabhängig via * [data-theme]-Selektoren unten). * • Das Deck bleibt als eigene FLÄCHE erkennbar (sunken Hintergrund + Rahmen * + feines Raster), damit "Brett mit eingelassenen Geräten" als Metapher * erhalten bleibt — nur nicht mehr über Helligkeit erzwungen. */ .iio-deck { /* ── Instrument-spezifische Tokens (die EINZIGEN Überschreibungen) ───── */ /* Bahn eines Rings: aus der Theme-Tinte gemischt, damit sie in JEDEM Theme sichtbar ist, ohne mit der Füllung verwechselt zu werden. Hell: ~12 % Grau auf der Deckfläche; Dunkel: dieselbe Mischung wirkt als Aufhellung. */ --iio-instr-track: color-mix(in srgb, var(--iio-ink) 12%, transparent); /* Feld-Raster: gibt der Fläche Tiefe und macht sie als zusammenhängendes Brett lesbar statt als Sammlung schwebender Karten. */ --iio-deck-grid: color-mix(in srgb, var(--iio-ink) 5%, transparent); --iio-deck-grid-sz: 56px; /* --iio-instr-glow bewusst NICHT hier gesetzt: Kindkomponenten fallen auf `none` zurück (siehe IIOInstrument). Nur dunkle Themes schalten ihn unten wieder ein. */ position: relative; isolation: isolate; color: var(--iio-ink); /* Sunken statt eigener Dunkelwert: hebt das Brett vom Seitenhintergrund ab und folgt dabei dem Theme (hell: hsl(0 0% 96%), dunkel: fast schwarz). */ background: var(--iio-bg-sunken, var(--iio-bg)); border: 1px solid var(--iio-line); border-radius: var(--iio-r-lg, 16px); padding: clamp(14px, 1.6vw, 26px); overflow: hidden; } /* Selbstleuchtende Instrumente nur in dunklen Themes — dort ist der Glanz der Grund, warum ein 2-%-Ring überhaupt gefunden wird (Begründung der 2026-08-07-DEC, hier auf die Themes eingeschränkt, in denen sie gilt). */ :where([data-theme="space"], [data-theme="night"], [data-theme="dark"], [data-theme="knight-rider"]) .iio-deck { --iio-instr-glow: drop-shadow(0 0 3px color-mix(in srgb, var(--iio-instr-accent, var(--iio-ok)) 70%, transparent)) drop-shadow(0 0 9px color-mix(in srgb, var(--iio-instr-accent, var(--iio-ok)) 35%, transparent)); } /* Hintergrund in zwei Schichten, beide hinter dem Inhalt (z-index: -1): Raster zwei lineare Gradienten, keine Bilddatei Vignette radialer Abfall nach außen — lenkt den Blick zur Mitte, dieselbe Funktion wie die Abdunklung am Rand einer Kanzel Rein dekorativ, deshalb aria-versteckt via ::before (kein DOM-Knoten). */ .iio-deck::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, var(--iio-deck-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--iio-deck-grid) 1px, transparent 1px); background-size: var(--iio-deck-grid-sz) var(--iio-deck-grid-sz); /* Raster nach außen ausblenden, damit es nicht an den Rändern abschneidet. */ mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 100%); } .iio-deck::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; /* Vignette aus der Theme-Tinte statt hart hsl(260 25% 1% / .75) -- auf Hell ein zarter Abfall nach aussen, auf Dunkel wie vorher eine Abdunklung. */ background: radial-gradient(90% 60% at 50% -10%, color-mix(in srgb, var(--iio-accent) 9%, transparent), transparent 70%), radial-gradient(120% 120% at 50% 50%, transparent 45%, color-mix(in srgb, var(--iio-ink) 10%, transparent) 100%); } /* Instrumente auf dem Deck: eigene Fläche, nicht die Deck-Fläche. Ein Instrument, dessen Hintergrund gleich dem Brett ist, ist kein Gerät — es ist eine Beschriftung. Der leichte Aufhellungsverlauf simuliert die Wölbung eines eingelassenen Geräts. */ .iio-deck .iio-instr { background: linear-gradient(180deg, color-mix(in srgb, var(--iio-surface) 94%, var(--iio-accent) 6%) 0%, var(--iio-surface-mid, var(--iio-surface)) 100%); border-color: var(--iio-line); /* Schatten aus der Theme-Tinte -- auf Hell eine feine Kante, auf Dunkel dieselbe Tiefe wie zuvor. */ box-shadow: inset 0 1px 0 color-mix(in srgb, var(--iio-surface) 60%, transparent), 0 1px 3px color-mix(in srgb, var(--iio-ink) 12%, transparent); } .iio-deck .iio-instr--clickable:hover { border-color: color-mix(in srgb, var(--iio-instr-accent) 45%, var(--iio-line)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--iio-surface) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--iio-instr-accent) 20%, transparent), 0 6px 18px color-mix(in srgb, var(--iio-ink) 16%, transparent); } /* Die Bewertungskante leuchtet auf dem Brett, statt nur zu färben. */ .iio-deck .iio-instr::before { box-shadow: 0 0 8px 0 var(--iio-instr-accent); } .iio-deck .iio-instr--unwired::before { box-shadow: none; } /* Titel im Instrument: als eingravierte Beschriftung, nicht als Fließtext. */ .iio-deck .iio-instr__title { font-family: var(--iio-font-mono); color: var(--iio-ink-2); } @media (prefers-reduced-transparency: reduce) { .iio-deck::before, .iio-deck::after { display: none; } } .iio-icon[data-v-dfecff3e] { display: inline-block; vertical-align: middle; flex: none; } .toast[data-v-e51e552e] { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; min-width: 240px; max-width: 400px; box-shadow: 0 4px 20px rgba(0,0,0,.35); font-size: 13px; animation: slide-in-e51e552e .2s ease; } @keyframes slide-in-e51e552e { from { transform: translateX(110%); opacity: 0 } to { transform: none; opacity: 1 } } .toast--success[data-v-e51e552e] { background: color-mix(in srgb,var(--iio-ok) 12%,var(--iio-surface)); border: 1px solid color-mix(in srgb,var(--iio-ok) 25%,transparent); } .toast--error[data-v-e51e552e] { background: color-mix(in srgb,var(--iio-risk) 12%,var(--iio-surface)); border: 1px solid color-mix(in srgb,var(--iio-risk) 25%,transparent); } .toast--warn[data-v-e51e552e] { background: color-mix(in srgb,var(--iio-warn) 12%,var(--iio-surface)); border: 1px solid color-mix(in srgb,var(--iio-warn) 25%,transparent); } .toast--info[data-v-e51e552e] { background: color-mix(in srgb,var(--iio-accent)12%,var(--iio-surface)); border: 1px solid color-mix(in srgb,var(--iio-accent)25%,transparent); } .toast__icon[data-v-e51e552e] { font-size: 14px; flex-shrink: 0; } .toast--success .toast__icon[data-v-e51e552e] { color: var(--iio-ok); } .toast--error .toast__icon[data-v-e51e552e] { color: var(--iio-risk); } .toast--warn .toast__icon[data-v-e51e552e] { color: var(--iio-warn); } .toast--info .toast__icon[data-v-e51e552e] { color: var(--iio-accent); } .toast__msg[data-v-e51e552e] { flex: 1; color: var(--iio-ink); line-height: 1.4; } .toast__close[data-v-e51e552e] { background: none; border: none; cursor: pointer; color: var(--iio-muted); padding: 0 2px; font-size: 12px; flex-shrink: 0; } .toast__close[data-v-e51e552e]:hover { color: var(--iio-ink); } /* Global — these live outside scoped because they're inside Teleport */ .iio-toast-list { display: flex; flex-direction: column; gap: 6px; pointer-events: none; width: 100%; } .iio-toast-list > * { pointer-events: all; } /* Transitions */ .toast-enter-active { transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } .toast-leave-active { transition: all 160ms cubic-bezier(0.4, 0, 1, 1); } .toast-enter-from { transform: translateX(110%); opacity: 0; } .toast-leave-to { transform: translateX(110%); opacity: 0; max-height: 0; margin: 0; } .toast-move { transition: transform 200ms ease; } .quantum-root[data-v-4970c7e1] { display: contents; } .quantum-oep-status[data-v-4970c7e1] { position: fixed; top: 12px; right: 12px; z-index: var(--iio-z-status, 500); display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--iio-surface); border: 1px solid var(--iio-line); border-radius: var(--iio-r-full); font-size: 11px; color: var(--iio-muted); box-shadow: var(--iio-shadow-sm); transition: all 0.2s ease; } .quantum-oep-status--connected[data-v-4970c7e1] { border-color: var(--iio-success); color: var(--iio-success); } .qos-dot[data-v-4970c7e1] { width: 5px; height: 5px; border-radius: 50%; background: var(--iio-muted); flex-shrink: 0; animation: none; } .quantum-oep-status--connected .qos-dot[data-v-4970c7e1] { background: var(--iio-success); } .qos-text[data-v-4970c7e1] { font-weight: 500; } /* Global HITL queue */ .quantum-hitl-queue { position: fixed; bottom: 80px; right: 20px; z-index: var(--iio-z-hitl, 900); display: flex; flex-direction: column; gap: 8px; max-width: 340px; } .quantum-hitl-item { background: var(--iio-surface); border-radius: var(--iio-r-lg); box-shadow: var(--iio-shadow-xl); overflow: hidden; border-left: 4px solid var(--iio-hitl); animation: q-slide-up 0.22s var(--iio-ease-spring) both; } .quantum-hitl-item--high { border-left-color: var(--iio-risk); } .quantum-hitl-item--medium { border-left-color: var(--iio-hitl); } .quantum-hitl-item--low { border-left-color: var(--iio-warn); } .qhi-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px 6px; font-size: 12px; } .qhi-icon { font-size: 14px; } .qhi-title { font-weight: 700; color: var(--iio-hitl); } .qhi-component { color: var(--iio-muted); font-family: var(--iio-font-mono); font-size: 11px; margin-left: auto; } .qhi-reason { padding: 0 14px 10px; font-size: 13px; color: var(--iio-text-sub); } .qhi-metadata { display: flex; flex-direction: column; gap: 4px; padding: 0 14px 8px; font-size: 11px; color: var(--iio-muted); border-top: 1px solid var(--iio-line); padding-top: 8px; } .qhi-meta-item { display: flex; gap: 4px; } .qhi-meta-key { font-weight: 600; color: var(--iio-text-sub); } .qhi-meta-val { font-family: var(--iio-font-mono); color: var(--iio-muted); } .qhi-actions { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--iio-line); background: var(--iio-surface-mid); } .qhi-btn-deny { flex: 1; font-size: 12px !important; color: var(--iio-risk) !important; } .qhi-btn-go { flex: 2; font-size: 12px !important; } /* Agent toasts */ .quantum-agent-toasts { position: fixed; bottom: 20px; left: 20px; z-index: var(--iio-z-toast, 700); display: flex; flex-direction: column; gap: 6px; } .quantum-agent-toast { display: flex; align-items: center; gap: 8px; background: var(--iio-surface); border: 1px solid color-mix(in srgb, var(--iio-agent) 25%, transparent); border-radius: var(--iio-r-full); padding: 5px 12px; font-size: 11px; color: var(--iio-text-sub); box-shadow: var(--iio-shadow-md); animation: q-slide-up 0.15s var(--iio-ease-spring) both; } .quantum-agent-toast--warn { border-color: color-mix(in srgb, var(--iio-warn) 25%, transparent); } .quantum-agent-toast--error { border-color: color-mix(in srgb, var(--iio-risk) 25%, transparent); } .qat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--iio-agent); flex-shrink: 0; animation: q-live-dot 2s ease-in-out infinite; } .qat-component { font-weight: 700; color: var(--iio-agent); } .qat-event { color: var(--iio-muted); font-family: var(--iio-font-mono); } .qat-source { color: var(--iio-muted); font-size: 10px; opacity: 0.7; } /* OEP Debug Panel */ .quantum-oep-debug { position: fixed; bottom: 20px; right: 20px; z-index: var(--iio-z-debug, 600); width: 320px; max-height: 300px; background: var(--iio-surface); border: 1px solid var(--iio-line); border-radius: var(--iio-r-lg); box-shadow: var(--iio-shadow-lg); display: flex; flex-direction: column; overflow: hidden; } .qod-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--iio-line); background: var(--iio-surface-mid); } .qod-title { font-weight: 700; font-size: 12px; color: var(--iio-ink); } .qod-close { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--iio-muted); padding: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .qod-close:hover { color: var(--iio-ink); } .qod-list { flex: 1; overflow-y: auto; font-size: 10px; font-family: var(--iio-font-mono); } .qod-entry { display: flex; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--iio-line); color: var(--iio-muted); } .qod-ts { color: var(--iio-text-sub); flex-shrink: 0; } .qod-type { font-weight: 600; color: var(--iio-agent); flex-shrink: 0; } .qod-payload { color: var(--iio-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Transitions */ .hitl-queue-enter-active, .hitl-queue-leave-active { transition: all 0.22s var(--iio-ease-spring); } .hitl-queue-enter-from, .hitl-queue-leave-to { opacity: 0; transform: translateX(20px) scale(0.96); } .agent-toast-enter-active, .agent-toast-leave-active { transition: all 0.15s var(--iio-ease-fluid); } .agent-toast-enter-from, .agent-toast-leave-to { opacity: 0; transform: translateY(6px); } /* Animations */ @keyframes q-slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes q-live-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes q-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .modal-backdrop[data-v-34dab21d] { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: var(--iio-z-modal, 500)0; } .modal[data-v-34dab21d] { background: var(--iio-surface); border: 1px solid var(--iio-line); border-radius: 12px; padding: 24px; width: 380px; max-width: 90vw; box-shadow: 0 8px 32px rgba(0,0,0,.4); } .modal__header[data-v-34dab21d] { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .modal__icon[data-v-34dab21d] { font-size: 18px; } .modal__title[data-v-34dab21d] { font-size: 15px; font-weight: 700; color: var(--iio-ink); } .modal__body[data-v-34dab21d] { font-size: 13px; color: var(--iio-ink-2); margin-bottom: 20px; line-height: 1.5; } .modal__actions[data-v-34dab21d] { display: flex; gap: 8px; justify-content: flex-end; } .modal__btn[data-v-34dab21d] { padding: 7px 18px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--iio-line); transition: opacity 120ms; } .modal__btn--cancel[data-v-34dab21d] { background: var(--iio-surface-mid); color: var(--iio-ink-2); } .modal__btn--default[data-v-34dab21d] { background: var(--iio-accent); color: #fff; border-color: transparent; } .modal__btn--danger[data-v-34dab21d] { background: var(--iio-risk); color: #fff; border-color: transparent; } .modal__btn--warn[data-v-34dab21d] { background: var(--iio-warn); color: #fff; border-color: transparent; } .modal__btn[data-v-34dab21d]:hover { opacity: .85; } .modal-enter-active[data-v-34dab21d], .modal-leave-active[data-v-34dab21d] { transition: opacity .15s ease; } .modal-enter-active .modal[data-v-34dab21d], .modal-leave-active .modal[data-v-34dab21d] { transition: transform .15s ease; } .modal-enter-from[data-v-34dab21d], .modal-leave-to[data-v-34dab21d] { opacity: 0; } .modal-enter-from .modal[data-v-34dab21d], .modal-leave-to .modal[data-v-34dab21d] { transform: scale(.95); } /* tokens.css imported in main.ts (L1 primitives, loads before quantum.css L2) */ /* ── Page Transitions (IIO-AGT-506) ────────────────────────────────────────── */ .page-enter-active, .page-leave-active { transition: opacity 120ms ease, transform 120ms ease; } .page-enter-from { opacity: 0; transform: translateY(4px); } .page-leave-to { opacity: 0; transform: translateY(-4px); } /* ── Panel Tab Transition — sanftes Einblenden bei Tab-Wechsel ──────────────── */ .panel-enter-active { transition: opacity 140ms ease, transform 140ms ease; } .panel-leave-active { transition: opacity 80ms ease; position: absolute; width: 100%; } .panel-enter-from { opacity: 0; transform: translateY(6px); } .panel-leave-to { opacity: 0; }