/* frontend/css/np.theme.css NAVIPRAX – Theme Tokens (Tenant colors + Dark/Light) WICHTIG: - Tenant-Farben kommen weiterhin aus der DB und überschreiben zur Laufzeit: --color-primary --color-primary-secondary - Theme Umschaltung über: */ /* ------------------------------ DEFAULT THEME = DARK (Fallbacks ohne color-mix) ------------------------------ */ :root{ /* Tenant Farben (DB überschreibt diese beiden) */ --color-primary: #ec4899; --color-primary-secondary: #4f46e5; /* App Background (Fallback, ohne color-mix) */ --app-bg-gradient: var(--color-bg); /* Derived (Fallback, ohne color-mix) */ --color-primary-soft: rgba(255,255,255,0.10); --color-primary-strong: var(--color-primary); --color-primary-secondary-soft: rgba(255,255,255,0.10); --color-primary-secondary-deep: var(--color-primary-secondary); --color-primary-secondary-hover: var(--color-primary-secondary); --color-primary-secondary-border: var(--color-border); /* Neutrals – Dark */ --color-bg: #1e1e1e; --color-bg-elevated: #131313; --color-surface: #101010; --color-surface-alt: #151515; --color-border: #313131; --color-border-soft: #202020; --color-text: #e5e7eb; --color-text-muted: #d7d9dd; --color-on-primary: #ffffff; --color-on-secondary: #ffffff; /* Icons: in Dark immer einheitlich hell (egal ob SVG hell/dunkel geliefert wird) */ --icon-filter-ui: brightness(0) invert(1); --icon-filter-on-primary: brightness(0) invert(1); --icon-filter-on-secondary: brightness(0) invert(1); /* Status / Feedback */ --color-danger: #ef4444; --color-danger-soft: rgba(239, 68, 68, 0.12); --color-status-ok: #22c55e; --color-status-warn: #eab308; --color-status-info: #3b82f6; --color-status-waiting: #0ea5e9; --color-status-neutral: #94a3b8; /* Shadows / Radius / Spacing */ --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.55); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif; --transition-fast: 0.15s ease-out; /* Harmonische surfaces (Fallback) */ --color-ink: #020202; --tint-weak: 8%; --tint-med: 12%; --tint-strong: 18%; /* Ohne color-mix müssen diese IMMER gültig sein */ --surface-primary-weak: var(--color-bg-elevated); --surface-primary-med: var(--color-bg-elevated); --surface-primary-strong: var(--color-bg-elevated); --surface-secondary-med: var(--color-ink); --surface-secondary-med-a92: #020202; /* wird in mehreren Bereichen genutzt (Sidebar, Inputs etc.) */ --surface-primary-med-a55: rgba(255,255,255,0.06); /* Outline / Highlight (Fallback) */ --shadow-primary-outline-soft: 0 0 0 1px rgba(255,255,255,0.10); --shadow-primary-outline-strong: 0 0 0 1px rgba(255,255,255,0.18); --shadow-primary-elevated: 0 10px 22px rgba(0,0,0,0.25); --shadow-primary-elevated-strong: 0 14px 28px rgba(0,0,0,0.30); } /* ------------------------------ LIGHT THEME (Fallback, ohne color-mix) ------------------------------ */ html[data-theme="light"], :root[data-theme="light"]{ --color-bg: #f6f7fb; --color-bg-elevated: #ffffff; --color-surface: #ffffff; --color-surface-alt: #f1f5f9; --color-border: #e5e7eb; --color-border-soft: #eef2f7; --color-text: #0f172a; --color-text-muted: #475569; /* Icons in Light: einheitlich dunkel */ --icon-filter-ui: brightness(0); --shadow-soft: 0 18px 45px rgba(2, 6, 23, 0.16); /* Light surfaces: mehr subtil */ --color-ink: var(--color-bg-elevated); --tint-weak: 4%; --tint-med: 6%; --tint-strong: 10%; --surface-secondary-med: var(--color-bg-elevated); --surface-secondary-med-a92: rgba(2,6,23,0.02); --surface-primary-med-a55: rgba(2,6,23,0.04); --shadow-primary-outline-soft: 0 0 0 1px rgba(2,6,23,0.10); --shadow-primary-outline-strong: 0 0 0 1px rgba(2,6,23,0.16); --shadow-primary-elevated: 0 10px 22px rgba(2,6,23,0.10); --shadow-primary-elevated-strong: 0 14px 28px rgba(2,6,23,0.14); } /* ------------------------------ Upgrades: wenn color-mix da ist ------------------------------ */ @supports (color: color-mix(in srgb, #000 50%, #fff)) { :root{ /* Derived (Tenant-abhängig) */ --color-primary-soft: color-mix(in srgb, var(--color-primary) 18%, transparent); --color-primary-strong: color-mix(in srgb, var(--color-primary) 90%, black 15%); --color-primary-secondary-soft: color-mix(in srgb, var(--color-primary-secondary) 22%, transparent); --color-primary-secondary-deep: color-mix(in srgb, var(--color-primary-secondary) 80%, black 20%); --color-primary-secondary-hover: color-mix(in srgb, var(--color-primary-secondary) 100%, white 10%); --color-primary-secondary-border: color-mix(in srgb, var(--color-primary-secondary) 90%, black 10%); /* App Background – Dark */ --app-bg-gradient: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-primary) 20%, transparent), transparent 55%), radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-primary-secondary) 25%, transparent), transparent 55%), #141414; /* Shadows (Tenant-abhängig) */ --shadow-primary-outline-soft: 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, transparent); --shadow-primary-outline-strong: 0 0 0 1px color-mix(in srgb, var(--color-primary) 60%, transparent); --shadow-primary-elevated: 0 10px 22px color-mix(in srgb, var(--color-primary) 26%, transparent); --shadow-primary-elevated-strong: 0 14px 28px color-mix(in srgb, var(--color-primary) 34%, transparent); /* Surfaces – Dark */ --surface-primary-weak: color-mix(in srgb, var(--color-ink) 92%, var(--color-primary) var(--tint-weak)); --surface-primary-med: color-mix(in srgb, var(--color-ink) 88%, var(--color-primary) var(--tint-med)); --surface-primary-strong:color-mix(in srgb, var(--color-ink) 82%, var(--color-primary) var(--tint-strong)); --surface-secondary-med: color-mix(in srgb, var(--color-ink) 88%, var(--color-primary-secondary) var(--tint-med)); --surface-secondary-med-a92: color-mix(in srgb, var(--surface-secondary-med) 92%, transparent); --surface-primary-med-a55: color-mix(in srgb, var(--surface-primary-med) 20%, transparent); } html[data-theme="light"], :root[data-theme="light"]{ /* App Background – Light */ --app-bg-gradient: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 60%), radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-primary-secondary) 16%, transparent), transparent 60%), #f6f7fb; /* Surfaces – Light (subtil getönt) */ --surface-primary-weak: color-mix(in srgb, var(--color-ink) 96%, var(--color-primary) var(--tint-weak)); --surface-primary-med: color-mix(in srgb, var(--color-ink) 94%, var(--color-primary) var(--tint-med)); --surface-primary-strong:color-mix(in srgb, var(--color-ink) 90%, var(--color-primary) var(--tint-strong)); --surface-secondary-med: color-mix(in srgb, var(--color-ink) 94%, var(--color-primary-secondary) var(--tint-med)); --surface-secondary-med-a92: color-mix(in srgb, var(--surface-secondary-med) 88%, transparent); /* in Light-Mode etwas weniger transparent, damit es sichtbar bleibt */ --surface-primary-med-a55: color-mix(in srgb, var(--surface-primary-med) 70%, transparent); /* Shadows in Light: weicher */ --shadow-primary-elevated: 0 10px 22px color-mix(in srgb, var(--color-primary) 10%, transparent); --shadow-primary-elevated-strong: 0 14px 28px color-mix(in srgb, var(--color-primary) 14%, transparent); } } /* ------------------------------ COMPONENT OVERRIDES (v4.2) ------------------------------ */ /* (2) Icons systemweit: in Lightmode dunkel */ img[src*="assets/icons/"][src$=".svg"]{filter:var(--icon-filter-ui)!important;opacity:.95} .icon-svg{filter:var(--icon-filter-ui)!important} .call-icobtn img{filter:var(--icon-filter-ui)!important} .btn .np-icon{filter:var(--icon-filter-ui)!important} /* (3) Navigationen: Light UI im Lightmode */ html[data-theme="light"] .app-sidebar{ background:rgba(255,255,255,.62)!important;border-right:none!important; box-shadow:0 18px 50px rgba(2,6,23,.10)!important; } html[data-theme="light"] .app-nav-item{ background:rgba(255,255,255,.52)!important;color:var(--color-text,#0f172a)!important; border:none!important;box-shadow:0 10px 26px rgba(2,6,23,.10)!important; } html[data-theme="light"] .app-nav-item:hover{background:rgba(255,255,255,.78)!important;color:var(--color-text,#0f172a)!important} html[data-theme="light"] .app-nav-item--active{ background:rgba(255,255,255,.82)!important;border:none!important; box-shadow:0 12px 30px rgba(2,6,23,.12), inset 0 1px 0 rgba(255,255,255,.75)!important; } /* Hub Untermenü */ html[data-theme="light"] .hub-nav{ background:rgba(255,255,255,.55)!important;border:none!important; box-shadow:0 18px 50px rgba(2,6,23,.10)!important; } html[data-theme="light"] .hub-nav__item{ border:none!important;background:rgba(255,255,255,.40)!important; box-shadow:0 10px 24px rgba(2,6,23,.10)!important; color:var(--color-text,#0f172a)!important; } html[data-theme="light"] .hub-nav__item:hover{background:rgba(255,255,255,.72)!important} html[data-theme="light"] .hub-nav__item.is-active, html[data-theme="light"] .hub-nav__item--active{background:rgba(255,255,255,.82)!important} /* (4) Flow > Team: Listenkacheln dreamy im Lightmode */ html[data-theme="light"] .flow-team-tile{ border:none!important;background:rgba(255,255,255,.72)!important; box-shadow:0 16px 40px rgba(2,6,23,.12)!important; } html[data-theme="light"] .flow-team-tile:hover{background:rgba(255,255,255,.84)!important} /* (5) CALLS WAS/WO: Text+Icons konsistent + auto Kontrast pro Tenantfarbe */ #view-calls .calls-tilebtn.preset--normal{color:var(--color-on-secondary,#fff)!important} #view-calls .calls-tilebtn.preset--panic{color:var(--color-on-primary,#fff)!important} #view-calls .calls-tilebtn.preset--normal *, #view-calls .calls-tilebtn.preset--panic *{color:inherit!important} #view-calls .calls-tilebtn.preset--normal img, #view-calls .calls-tilebtn.preset--normal .np-icon, #view-calls .calls-tilebtn.preset--normal .icon-svg{filter:var(--icon-filter-on-secondary)!important} #view-calls .calls-tilebtn.preset--panic img, #view-calls .calls-tilebtn.preset--panic .np-icon, #view-calls .calls-tilebtn.preset--panic .icon-svg{filter:var(--icon-filter-on-primary)!important} /* (5b) CALLS KACHELN + CALLPAD: überall gleiche On-Color/Icons (Primary/Secondary) */ /* CALLPAD = Secondary (Standard) */ #view-calls .callpad-btn{ color: var(--color-on-secondary,#fff) !important; } #view-calls .callpad-btn *{ color: inherit !important; } #view-calls .callpad-btn img, #view-calls .callpad-btn .np-icon, #view-calls .callpad-btn .icon-svg, #view-calls .callpad-btn svg{ filter: var(--icon-filter-on-secondary) !important; } /* CALLPAD Panic = Primary */ #view-calls .callpad-btn--panic{ color: var(--color-on-primary,#fff) !important; } #view-calls .callpad-btn--panic img, #view-calls .callpad-btn--panic .np-icon, #view-calls .callpad-btn--panic .icon-svg, #view-calls .callpad-btn--panic svg{ filter: var(--icon-filter-on-primary) !important; } /* WAS/WO Tiles (Kacheln) */ #view-calls .calls-tilebtn--what{ color: var(--color-on-primary,#fff) !important; } #view-calls .calls-tilebtn--what.is-fav{ color: var(--color-on-secondary,#fff) !important; } #view-calls .calls-tilebtn--where{ color: var(--color-on-secondary,#fff) !important; } #view-calls .calls-tilebtn--what *, #view-calls .calls-tilebtn--where *{ color: inherit !important; } #view-calls .calls-tilebtn--what img, #view-calls .calls-tilebtn--what .np-icon, #view-calls .calls-tilebtn--what .icon-svg, #view-calls .calls-tilebtn--what svg{ filter: var(--icon-filter-on-primary) !important; } #view-calls .calls-tilebtn--what.is-fav img, #view-calls .calls-tilebtn--what.is-fav .np-icon, #view-calls .calls-tilebtn--what.is-fav .icon-svg, #view-calls .calls-tilebtn--what.is-fav svg, #view-calls .calls-tilebtn--where img, #view-calls .calls-tilebtn--where .np-icon, #view-calls .calls-tilebtn--where .icon-svg, #view-calls .calls-tilebtn--where svg{ filter: var(--icon-filter-on-secondary) !important; } /* Active/Outline soll auch “mitkippen” (nicht immer weiß) */ #view-calls .calls-tilebtn.is-active{ box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 35%, transparent) inset, 0 10px 25px rgba(0,0,0,.25) !important; } /* (6) CALLS Feedback Overlay (is-ok) im Lightmode hell */ html[data-theme="light"] #view-calls .calls-tilebtn .calls-ok{ background:rgba(255,255,255,.86)!important;color:#0f172a!important; border-radius:inherit;box-shadow:0 18px 45px rgba(2,6,23,.18)!important; } html[data-theme="light"] #view-calls .calls-tilebtn .calls-ok img, html[data-theme="light"] #view-calls .calls-tilebtn .calls-ok .np-icon, html[data-theme="light"] #view-calls .calls-tilebtn .calls-ok .icon-svg{filter:none!important} /* (7) TV (view-waitroom): Monitor-Boxen dreamy shadow (sehr dezent) */ #view-waitroom #waitroom-mount.hub-tiles > *{box-shadow:0 18px 52px rgba(2,6,23,.16)!important} html[data-theme="light"] #view-waitroom #waitroom-mount.hub-tiles > *{box-shadow:0 18px 52px rgba(2,6,23,.12)!important} /* (8) INSIGHTS: Skalen/Grid im Lightmode wieder sichtbar */ html[data-theme="light"] #view-insights .ins-grid{stroke:rgba(15,23,42,.14)!important} html[data-theme="light"] #view-insights .ins-hbar__track{background:rgba(15,23,42,.08)!important} html[data-theme="light"] #view-insights .ins-donut-bg{stroke:rgba(15,23,42,.12)!important} html[data-theme="light"] #view-insights .ins-donut-value{fill:#0f172a!important} html[data-theme="light"] #view-insights .ins-donut-label{fill:rgba(15,23,42,.68)!important} /* INSIGHTS: X-Achse Datum + Ticks lesbar (Light/Dark) */ #view-insights .ins-xlab{font-size:11px;fill:rgba(255,255,255,.72)} #view-insights .ins-tick{stroke:rgba(255,255,255,.18)} html[data-theme="light"] #view-insights .ins-xlab{fill:rgba(15,23,42,.72)!important} html[data-theme="light"] #view-insights .ins-tick{stroke:rgba(15,23,42,.18)!important} /* (8b) INSIGHTS: einheitliche Textgrößen + Querbalken-Enden rund (nicht oval) */ #view-insights .ins-card__hint{font-size:12px!important;line-height:1.25} #view-insights .ins-hbar__label, #view-insights .ins-hbar__value{font-size:12px!important;line-height:1.25} #view-insights .ins-hbar__track, #view-insights .ins-hbar__fill{ border-radius:6px!important; /* ~ halbe Balkenhöhe => runde Enden */ } #view-insights .ins-hbar__track{overflow:hidden} /* (10/11) Rooms Dropdown borderless (soft shadow) */ #hub-section-rooms #room_type.form__control{border:none!important;box-shadow:0 10px 26px rgba(2,6,23,.10)!important} html[data-theme="light"] #hub-section-rooms #room_type.form__control{background:rgba(255,255,255,.78)!important} /* (14) Hub Checkin / Sicherheit Buttons: immer helle Schrift bei Primary Buttons */ #hub-section-patients .btn--primary, #hub-section-security .btn--primary{color:#fff!important} /* ------------------------------ HOTFIX v4.3 – Room/CALLS Filter wieder sichtbar Hintergrund: einige Filter-Buttons/Hosts wirken im Lightmode "verschwunden", weil Inaktiv-Zustände zu wenig Kontrast haben. -> Nur scoped auf Filter-Container, keine Klassennamen-Änderungen. ------------------------------ */ /* Flow: Calls Filter Leiste (enthält u.a. Räume/WAS/WO Filter) */ #flow-calls-filters{ display: flex !important; flex-wrap: wrap; gap: 10px; align-items: center; } /* Inaktive Filter-Buttons: sichtbar, dreamy, ohne harte Rahmen */ #flow-calls-filters .btn{ display: inline-flex !important; align-items: center; gap: 8px; border: none !important; box-shadow: 0 12px 30px rgba(2,6,23,0.10) !important; } /* Nur NICHT-Primary (also inaktiv/ghost) */ #flow-calls-filters .btn:not(.btn--primary){ background: rgba(255,255,255,0.55) !important; color: var(--color-text, #0f172a) !important; } /* Dark Theme: inaktive Filter bekommen eine leicht helle Fläche */ html[data-theme="dark"] #flow-calls-filters .btn:not(.btn--primary){ background: rgba(255,255,255,0.08) !important; color: var(--color-text, #e5e7eb) !important; box-shadow: 0 12px 30px rgba(0,0,0,0.25) !important; } /* Hosts (falls Räume/Standort Selects dort gerendert werden) */ #flow-location-select-host, #flow-room-select-host{ display: block !important; opacity: 1 !important; visibility: visible !important; } #flow-location-select-host select, #flow-room-select-host select{ display: block !important; width: 100%; border: none !important; box-shadow: 0 12px 30px rgba(2,6,23,0.10) !important; } html[data-theme="dark"] #flow-location-select-host select, html[data-theme="dark"] #flow-room-select-host select{ box-shadow: 0 12px 30px rgba(0,0,0,0.25) !important; } /* ------------------------------------------------------------ ICON BUTTON TOKENS (Unified) Ziel: überall gleich, dreamy + lesbar (Light & Dark) ------------------------------------------------------------ */ :root{ --np-iconbtn-radius: 12px; /* Dark default */ --np-iconbtn-bg: rgba(255,255,255,0.06); --np-iconbtn-bg-hover: rgba(255,255,255,0.10); --np-iconbtn-bg-active: rgba(255,255,255,0.14); --np-iconbtn-border: rgba(148,163,184,0.18); --np-iconbtn-border-hover: rgba(148,163,184,0.34); --np-iconbtn-shadow-hover: 0 10px 22px rgba(0,0,0,0.22); /* 2-Klick / Danger */ --np-iconbtn-danger-bg: color-mix(in srgb, var(--color-danger) 18%, var(--color-bg-elevated)); --np-iconbtn-danger-bg-hover: color-mix(in srgb, var(--color-danger) 24%, var(--color-bg-elevated)); } html[data-theme="light"], :root[data-theme="light"]{ --np-iconbtn-bg: rgba(2,6,23,0.03); --np-iconbtn-bg-hover: rgba(2,6,23,0.06); --np-iconbtn-bg-active: rgba(2,6,23,0.09); --np-iconbtn-border: rgba(2,6,23,0.10); --np-iconbtn-border-hover: rgba(2,6,23,0.18); --np-iconbtn-shadow-hover: 0 10px 22px rgba(2,6,23,0.12); } /* ------------------------------------------------------------ ICON BUTTON TOKENS (Unified) Ziel: überall gleich, dreamy + lesbar (Light & Dark) ------------------------------------------------------------ */ :root{ --np-iconbtn-radius: 12px; /* Dark default */ --np-iconbtn-bg: rgba(255,255,255,0.06); --np-iconbtn-bg-hover: rgba(255,255,255,0.10); --np-iconbtn-bg-active: rgba(255,255,255,0.14); --np-iconbtn-border: rgba(148,163,184,0.18); --np-iconbtn-border-hover: rgba(148,163,184,0.34); --np-iconbtn-shadow-hover: 0 10px 22px rgba(0,0,0,0.22); /* 2-Klick / Danger */ --np-iconbtn-danger-bg: color-mix(in srgb, var(--color-danger) 18%, var(--color-bg-elevated)); --np-iconbtn-danger-bg-hover: color-mix(in srgb, var(--color-danger) 24%, var(--color-bg-elevated)); } html[data-theme="light"], :root[data-theme="light"]{ --np-iconbtn-bg: rgba(2,6,23,0.03); --np-iconbtn-bg-hover: rgba(2,6,23,0.06); --np-iconbtn-bg-active: rgba(2,6,23,0.09); --np-iconbtn-border: rgba(2,6,23,0.10); --np-iconbtn-border-hover: rgba(2,6,23,0.18); --np-iconbtn-shadow-hover: 0 10px 22px rgba(2,6,23,0.12); }