/* Rajdhani — self-hosted (SIL OFL), no external CDN */ @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/rajdhani-400.woff2') format('woff2'); } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/rajdhani-500.woff2') format('woff2'); } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/rajdhani-600.woff2') format('woff2'); } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/rajdhani-700.woff2') format('woff2'); } :root { --bg: #0a0e12; --glass: rgba(255, 255, 255, 0.045); --glass-strong: rgba(255, 255, 255, 0.07); --glass-border: rgba(255, 255, 255, 0.11); --glass-border-bright: rgba(255, 255, 255, 0.22); --text: #f3f6f8; --muted: #9aa3ad; --muted2: #646c75; --accent: #18d6ba; --accent2: #19bcb9; --accent-grad: linear-gradient(135deg, #19bcb9, #18d6ba); --rose: #f5657f; --amber: #f5994a; --emerald: #18d6ba; --radius: 14px; --font: 'Rajdhani', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* The hidden attribute always wins, even over a class that sets display (e.g. flex/grid). */ [hidden] { display: none !important; } html, body { height: 100%; margin: 0; } /* Always reserve the scrollbar so centered content keeps the same width across pages (short pages were otherwise slightly wider). */ html { scrollbar-gutter: stable; } body { background-color: var(--bg); background-image: radial-gradient(60% 50% at 18% 12%, rgba(24, 214, 186, 0.13), transparent 60%), radial-gradient(55% 45% at 85% 60%, rgba(214, 134, 58, 0.10), transparent 60%), radial-gradient(70% 60% at 50% 110%, rgba(24, 214, 186, 0.07), transparent 60%); background-attachment: fixed; color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.5; letter-spacing: .2px; -webkit-font-smoothing: antialiased; } a { color: inherit; } .link { color: var(--accent); text-decoration: none; font-weight: 600; } .link:hover { text-decoration: underline; } .muted { color: var(--muted); } .small { font-size: 13px; } .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0; } .mb { margin-bottom: 16px; } .mt { margin-top: 16px; } @media (max-width: 640px) { .hide-sm { display: none; } } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 18px; } .wrap.narrow { max-width: 560px; } /* Dashboard and settings share the full-bleed chrome (logo, top menu, sidebar at the edges). On settings only the content column is capped + centered. */ body.view-dash .wrap, body.view-dash .topbar-inner, body.view-admin .wrap, body.view-admin .topbar-inner { max-width: none; } .main { padding-top: 17px; padding-bottom: 48px; } /* Glass surface mixin via .card. No backdrop-filter: it interacted with the toast's transform-driven slide-in to leave Chromium re-tiling seams along card edges (a faint white-to-transparent band) that only cleared on the next repaint. Border + the radial body glows still carry the HUD feel without the GPU compositing cost. */ .card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 24px; } /* Headings — Rajdhani, slightly condensed, uppercase flavor for the HUD look */ h1 { font-size: 27px; font-weight: 700; margin: 0 0 6px; letter-spacing: .5px; } h2 { font-size: 19px; font-weight: 600; margin: 0 0 10px; letter-spacing: .5px; text-transform: uppercase; } .subhead { font-size: 13px; font-weight: 700; margin: 0 0 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } /* Topbar */ .topbar { position: sticky; top: 0; z-index: 10; background: rgba(10, 14, 18, 0.55); backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%); border-bottom: 1px solid var(--glass-border); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; gap: 12px; max-width: 1200px; margin: 0 auto; } .brand { font-weight: 700; font-size: 21px; color: var(--text); text-decoration: none; letter-spacing: 1.5px; } .brand-accent { color: var(--accent); } .nav { display: flex; gap: 4px; } .nav a { padding: 8px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .15s, background .15s; } .nav a:hover { color: var(--text); } .nav a.active { color: var(--accent); background: var(--glass-strong); } .topbar-right { display: flex; align-items: center; gap: 14px; } .topbar-right a { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); text-decoration: none; } .topbar-right a:hover { color: var(--text); } /* Right-side Aktions-Gruppe in der Topbar: globaler „Neu"-CTA + Avatar-Menü. Wrapper hält beide zusammen, damit der space-between aus .topbar-inner weiterhin Brand links / Aktionen rechts pusht. */ .topbar-actions { display: flex; align-items: center; gap: 8px; } /* Mic-Pill links vom Avatar-Menü: Teal-Icon + Teal-Label auf einem dezenten Glass-Strong-Pill — gleicher Padding/Radius-Rhythmus wie .menu-trigger, damit beide als visuelle Gruppe wirken. Hover legt einen schmalen Teal- Innen-Ring drüber (kein Layout-Sprung). */ .topbar-rec { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; background: var(--glass-strong); color: var(--accent); text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; transition: background .15s, box-shadow .15s; } .topbar-rec:hover { box-shadow: 0 0 0 1px var(--accent) inset; } .topbar-rec .ico { width: 16px; height: 16px; } /* Nav-Pill in derselben Aktions-Gruppe (Meldungen-Schnellsprung neben dem Neu-CTA). Gleiche Shape wie .topbar-rec, aber gedämpftes Label-Grau — so bleibt Neu der visuelle Anker und die Nav dient als „du bist hier"-Indikator. .is-active färbt Icon + Text Teal, wenn man bereits auf /dashboard steht. */ .topbar-nav { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; background: var(--glass-strong); color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; transition: color .15s, box-shadow .15s; } .topbar-nav:hover { color: var(--text); } .topbar-nav.is-active { color: var(--accent); } .topbar-nav .ico { width: 16px; height: 16px; } /* Avatar dropdown menu (details/summary) */ .menu { position: relative; } .menu-trigger { display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; padding: 5px 8px; border-radius: 10px; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } .menu-trigger::-webkit-details-marker { display: none; } .menu-trigger::marker { content: ""; } .menu-trigger:hover { color: var(--text); } .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-grad); color: #04201c; display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: 0; } .caret { font-size: 10px; transition: transform .15s; } .menu[open] .caret { transform: rotate(180deg); } .menu-dropdown { position: absolute; right: 0; top: calc(100% + 10px); min-width: 190px; background: rgba(16, 22, 28, 0.9); backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%); border: 1px solid var(--glass-border); border-radius: 12px; padding: 7px; display: flex; flex-direction: column; gap: 2px; z-index: 30; } .menu-dropdown a { padding: 11px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .15s, background .15s; } .menu-dropdown a:hover { color: var(--accent); background: var(--glass-strong); } /* Push-Discovery-Banner: erscheint zwischen Topbar und Content, bis der User entweder aktiviert oder den × dauerhaft dismissed (localStorage). push_ui.js injiziert das Element zur Laufzeit, daher hier nur Style. */ .push-banner { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: rgba(24,214,186,.08); border-bottom: 1px solid rgba(24,214,186,.25); color: #c2c8d0; font-size: 13px; } .push-banner-text { flex: 1; min-width: 0; } .push-banner-ico { color: var(--accent); margin-right: 6px; vertical-align: -0.2em; } .push-banner-act { color: var(--accent); text-decoration: none; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; font-size: 12px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--accent); background: transparent; transition: background .15s; } .push-banner-act:hover { background: rgba(24,214,186,.15); } .push-banner-dismiss { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; padding: 4px 8px; transition: color .15s; } .push-banner-dismiss:hover { color: var(--text); } /* Mein Konto: kompakte Profil-/Settings-Seite (layout_employee, für alle). .mc-row gruppiert einen Button mit seinem Erklärungstext daneben/darunter; .kv ist eine readonly Key/Value-Darstellung (Name, E-Mail). */ .mc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 8px; } .mc-push-note { display: block; min-width: 0; } .kv { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--glass-border); } .kv:last-of-type { border-bottom: none; } .kv-label { flex: 0 0 110px; color: var(--muted); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; font-weight: 600; align-self: center; } .kv-value { flex: 1; color: var(--text); } /* Push-Toggle in Mein Konto: .btn-secondary wechselt im subscribed-State auf einen klar erkennbaren Teal-Ring (Outline-Look). */ .btn[data-push-state="subscribed"] { border-color: var(--accent); color: var(--accent); } /* Horizontal sub-nav at the top of a content area (e.g. inside /system). Underline-on-active tabs that match the dark theme. */ .subnav { display: flex; gap: 4px; border-bottom: 1px solid var(--glass-border); margin-bottom: 22px; flex-wrap: wrap; } .subnav a { padding: 10px 14px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; } .subnav a:hover { color: var(--text); } .subnav a.active { color: var(--accent); border-color: var(--accent); } /* Settings area: left sidebar + content */ .admin-wrap { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: start; } .admin-side { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 92px; } .admin-side-title { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted2); padding: 6px 14px 10px; } .admin-side a { padding: 12px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); text-decoration: none; border: 1px solid transparent; transition: color .15s, background .15s, border-color .15s; } .admin-side a:hover { color: var(--text); } .admin-side a.active { color: var(--accent); background: var(--glass-strong); border-color: var(--glass-border); } /* The grid item fills its track (auto margins on a grid item would shrink it to content). Cap + center the content on the normal block children instead, so every settings page is the same width. */ .admin-content { min-width: 0; } .admin-content .narrow-col, .admin-content .cols2 { max-width: 960px; margin: 0 auto; } @media (max-width: 720px) { .admin-wrap { grid-template-columns: 1fr; gap: 18px; } .admin-side { flex-direction: row; position: static; overflow-x: auto; gap: 6px; padding-bottom: 4px; } .admin-side-title { display: none; } .admin-side a { white-space: nowrap; } } /* Auth pages */ .center-page { display: grid; place-items: center; min-height: 100%; } .auth-wrap { width: 100%; max-width: 410px; padding: 24px; } /* Form */ .label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 16px 0 7px; } .card > form > .label:first-of-type:not(.mt), .label:first-child:not(.mt) { margin-top: 0; } .input { width: 100%; border: 1px solid var(--glass-border); border-radius: 10px; background: rgba(0, 0, 0, 0.25); padding: 12px 14px; color: var(--text); font-size: 16px; font-family: var(--font); letter-spacing: .3px; } .input::placeholder { color: var(--muted2); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(24,214,186,.25); } textarea.input { resize: vertical; } /* Dark scrollbar inside textareas (the default white bar clashes with the theme). */ textarea.input { scrollbar-width: thin; scrollbar-color: var(--glass-border-bright) transparent; } textarea.input::-webkit-scrollbar { width: 10px; } textarea.input::-webkit-scrollbar-track { background: transparent; } textarea.input::-webkit-scrollbar-thumb { background: var(--glass-border-bright); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } textarea.input::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; } /* The native resize grip renders as a light triangle that clashes — blend it. */ textarea.input::-webkit-resizer { background: transparent; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Direkt aufeinander folgende grid2-Blöcke brauchen vertikalen Abstand (innerhalb eines Blocks deckt das grid-gap das ab — zwischen zwei Blöcken greift es nicht). Sonst kleben die Labels der zweiten Reihe am Input darüber. */ .grid2 + .grid2 { margin-top: 14px; } /* .subhead und .label setzen ihre eigene margin-shorthand (zero-top) und überschreiben damit das .mt-Utility. Mit höherer Spezifität wieder Luft schaffen, sonst kleben Unter-Überschrift und Folge-Label am Input drüber. */ .subhead.mt, .label.mt { margin-top: 22px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; padding: 12px 22px; font-weight: 600; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; font-family: var(--font); text-decoration: none; transition: transform .1s, box-shadow .15s, background .15s, border-color .15s; } .btn:hover, .btn:focus, .btn:active { text-decoration: none; } .btn:disabled { opacity: .4; cursor: not-allowed; } .btn:active:not(:disabled) { transform: scale(.98); } /* Suppress the default browser focus outline on mouse click (looks like a white ring on the dark theme); keep a clear accent ring for keyboard users. */ .btn:focus { outline: none; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--accent-grad); color: #04201c; box-shadow: 0 0 22px rgba(24,214,186,.4); } .btn-primary:hover:not(:disabled) { box-shadow: 0 0 30px rgba(24,214,186,.6); } .btn-secondary { background: var(--glass-strong); color: var(--text); border-color: var(--glass-border-bright); } .btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .full { width: 100%; } .small-btn { padding: 8px 15px; font-size: 12px; } .divider { height: 1px; background: var(--glass-border); margin: 22px 0 16px; border: none; } /* Install / welcome steps */ .install-steps { margin: 0 0 8px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; } .install-steps li { font-size: 15px; color: #c2c8d0; } .install-steps strong { color: var(--text); } /* Alerts */ .alert { margin-top: 14px; padding: 12px 15px; border-radius: 10px; font-size: 14px; border: 1px solid; } .alert.error { background: rgba(245,101,127,.1); border-color: rgba(245,101,127,.35); color: #fca5b4; } .alert.warn { background: rgba(245,153,74,.1); border-color: rgba(245,153,74,.35); color: #fcc995; } .alert.ok-msg, .ok-msg { background: rgba(24,214,186,.1); border-color: rgba(24,214,186,.35); color: var(--accent); } /* Settings-URL im Push-Error-Panel (z. B. brave://settings/privacy): selektierbarer Code-Block + „Kopieren"-Button daneben. Browser blockieren die direkte Navigation zu brave://-URLs, daher der Clipboard-Weg. */ .push-error-url-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .push-error-url { flex: 1 1 auto; padding: 6px 10px; border-radius: 6px; background: rgba(0,0,0,.35); border: 1px solid rgba(245,101,127,.35); color: inherit; word-break: break-all; font-size: 13px; min-width: 0; } .push-error-copy { flex: 0 0 auto; } .ok { color: var(--accent); } .row-end { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .row-between { display: flex; justify-content: space-between; align-items: center; } /* Recorder */ .recorder { max-width: 560px; margin: 0 auto; } .mic-area { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 14px 0 18px; } .mic-rings { position: relative; display: grid; place-items: center; width: 188px; height: 188px; } .mic-btn { position: relative; width: 132px; height: 132px; border-radius: 50%; border: 1px solid var(--glass-border-bright); background: var(--glass-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--accent); cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; transition: transform .15s, box-shadow .15s, background .15s, color .15s; } .mic-btn:active:not(:disabled) { transform: scale(.97); } .mic-btn:disabled { color: var(--muted2); border-color: var(--glass-border); cursor: not-allowed; } .mic-rings.live .mic-btn { background: var(--accent-grad); color: #04201c; border-color: transparent; box-shadow: 0 0 40px rgba(24,214,186,.55); transform: scale(1.06); } .mic-rings.live::before, .mic-rings.live::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(24,214,186,.4); animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; } .mic-rings.live::before { width: 188px; height: 188px; } .mic-rings.live::after { width: 152px; height: 152px; animation-delay: .4s; } @keyframes ping { 75%, 100% { transform: scale(1.4); opacity: 0; } } .mic-hint { text-align: center; min-height: 18px; } /* While the recording is being transcribed: pulse the button to signal work. */ .mic-rings.busy .mic-btn { animation: mic-pulse 1s ease-in-out infinite; } @keyframes mic-pulse { 50% { opacity: .5; } } /* Tasks list (employee view + manager overview) */ .tasks { display: flex; flex-direction: column; gap: 16px; } .task { position: relative; } .task-subject { font-weight: 600; font-size: 16px; letter-spacing: .3px; margin-top: 4px; } .task-desc { font-size: 14px; color: #c2c8d0; margin-top: 4px; white-space: pre-wrap; } .task-note { margin-top: 8px; white-space: pre-wrap; font-size: 14px; } /* Mitarbeiter „Aufgaben" Compact-Modus: nur Meta + Titel sichtbar, Klick öffnet die Karte. Hide-Set spiegelt die in my_reports.compact verwendeten Regeln. */ #myt-list .report-toggle { display: none; } #myt-list.compact .report-toggle { display: block; } .task.open .report-toggle { transform: rotate(180deg); } #myt-list:not(.compact) .report-toggle + .report-meta { padding-right: 0; } .tasks.compact .task-desc, .tasks.compact .task-note, .tasks.compact .report-reco, .tasks.compact .report-emp, .tasks.compact .task-reply, .tasks.compact .status-btns { display: none; } .tasks.compact .task.open .task-desc, .tasks.compact .task.open .task-note, .tasks.compact .task.open .report-reco, .tasks.compact .task.open .report-emp, .tasks.compact .task.open .task-reply { display: block; } .tasks.compact .task.open .status-btns { display: flex; } .tasks.compact .task { padding-top: 16px; padding-bottom: 16px; cursor: pointer; } .tasks.compact .status-btns, .tasks.compact .task-reply { cursor: auto; } .task-done-state { display: inline-flex; align-items: center; gap: 8px; } .task-done-label { font-size: 13px; color: var(--accent); font-weight: 600; } /* Compact inline mic for forms (task note, report delegation): the mic sits inside the full-width textarea (top-right); padding-right keeps the text clear of it. */ .voice-row { position: relative; } .voice-row .input { width: 100%; padding-right: 56px; } .voice-row .mic-inline { position: absolute; top: 11px; right: 11px; } .mic-inline { position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 20px; border: 1px solid var(--glass-border-bright); background: var(--glass-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--accent); cursor: pointer; display: grid; place-items: center; transition: transform .15s, background .15s, color .15s, box-shadow .15s, opacity .15s; } .mic-inline:active:not(:disabled) { transform: scale(.97); } .mic-inline:disabled { color: var(--muted2); border-color: var(--glass-border); cursor: not-allowed; opacity: .6; } .mic-inline.live { background: var(--accent-grad); color: #04201c; border-color: transparent; box-shadow: 0 0 22px rgba(24,214,186,.55); transform: scale(1.06); } /* Same expanding rings as the big record button, scaled to the inline size. */ .mic-inline.live::before, .mic-inline.live::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 1px solid rgba(24,214,186,.4); animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; pointer-events: none; } .mic-inline.live::after { animation-delay: .4s; } .mic-inline.busy { animation: mic-pulse 1s ease-in-out infinite; } /* Delegation: own row below the report actions, with assigned / form states */ .dlg-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--glass-border); } .dlg-caret { display: inline-block; transition: transform .15s; } .dlg-btn[aria-expanded="true"] .dlg-caret { transform: rotate(180deg); } .dlg-form { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; } .dlg-hint:empty { display: none; } /* don't let the empty status line add an extra gap */ .dlg-assigned { display: flex; flex-direction: column; gap: 8px; } .dlg-assigned-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .dlg-assigned-text { color: var(--accent); font-size: 14px; } .dlg-assigned-note { white-space: pre-wrap; color: var(--muted); font-size: 14px; } .dlg-reply { margin-top: 8px; white-space: pre-wrap; color: #c2c8d0; font-size: 14px; } /* Native select dropdowns: dark option list (default is light grey on some OSes) */ select option { background: #0f172a; color: var(--text); } /* Drop the native control chrome and draw our own chevron, so .input selects match the rest of the dark theme instead of the OS style. */ select.input { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; } /* Custom dropdown (app.js enhanceSelect): a fully themed replacement for the native select popup. The real ein data-group hat — gleiche Höhe wie die Pillen-Buttons, gleiche Uppercase-Typografie. */ .fselect-compact .fselect-btn { width: auto; min-width: 160px; padding: 7px 12px; border-radius: 9px; background: transparent; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .fselect-compact .fselect-label { text-overflow: ellipsis; } /* Inline-Variante für die Kategorie-Auswahl in der report-meta-Zeile: noch schmaler als .fselect-compact, damit sie zwischen Status-Badge, Datum und Mitarbeiter-Name nicht dominiert. Panel ist breiter als der Trigger, damit längere Kategorienamen lesbar bleiben. */ .fselect-inline { display: inline-block; vertical-align: middle; } .fselect-inline .fselect-btn { width: auto; min-width: 0; gap: 4px; /* Padding/font-size mit den Status-/Prio-Triggern angeglichen, damit alle drei Pillen in der report-meta-Zeile auf gleicher Höhe sitzen. */ padding: 5px 6px 4px 10px; border-radius: 6px; background: var(--glass-strong); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; } .fselect-inline .fselect-caret svg { width: 14px; height: 14px; } .fselect-inline .fselect-panel { left: 0; right: auto; min-width: 200px; max-width: 320px; } .fselect-inline .fselect-option { font-size: 13px; padding: 8px 10px; } /* Status-Indikator-als-Dropdown in der Meta-Zeile — kombiniert .fselect-inline (Größe) mit der bisherigen .badge.status-*-Farbgebung. enhanceSelect setzt data-status auf den Wrapper, hier wird daraus die Tönung. Ersetzt die alten drei sbtn-Buttons in der report-actions-Zeile. */ .fselect-status .fselect-btn { border: 1px solid; background: transparent; } .fselect-status[data-status="open"] .fselect-btn { background: rgba(245,153,74,.12); color: var(--amber); border-color: rgba(245,153,74,.4); } .fselect-status[data-status="in_progress"] .fselect-btn { background: rgba(24,214,186,.12); color: var(--accent); border-color: rgba(24,214,186,.4); } .fselect-status[data-status="review"] .fselect-btn { background: rgba(167,139,250,.16); color: #b9a7ff; border-color: rgba(167,139,250,.5); } .fselect-status[data-status="done"] .fselect-btn { background: rgba(24,214,186,.12); color: var(--accent); border-color: rgba(24,214,186,.4); } /* Hover-Border anheben — der Trigger ist ein Action-Element, nicht nur Label. */ .fselect-status .fselect-btn:hover { filter: brightness(1.15); } /* „Prüfen" pulsiert weiter wie die alte Badge — Aufmerksamkeit, dass eine Meldung Aktion vom TL verlangt. */ #dash .fselect-status[data-status="review"] .fselect-btn { animation: review-pulse 1.6s ease-in-out infinite; } .fselect-status .fselect-caret { color: inherit; } .fselect-status .fselect-caret svg { width: 12px; height: 12px; } /* Prioritäts-Indikator-als-Dropdown — selbe Mechanik wie Status: data-priority auf dem Wrapper färbt den Trigger (low = muted, medium = amber, high = rose). */ .fselect-prio .fselect-btn { border: 1px solid; background: transparent; } .fselect-prio[data-priority="low"] .fselect-btn { background: rgba(160,170,180,.10); color: var(--muted); border-color: rgba(160,170,180,.35); } .fselect-prio[data-priority="medium"] .fselect-btn { background: rgba(245,153,74,.12); color: var(--amber); border-color: rgba(245,153,74,.4); } .fselect-prio[data-priority="high"] .fselect-btn { background: rgba(244,63,94,.12); color: var(--rose); border-color: rgba(244,63,94,.45); } .fselect-prio .fselect-btn:hover { filter: brightness(1.15); } .fselect-prio .fselect-caret { color: inherit; } .fselect-prio .fselect-caret svg { width: 12px; height: 12px; } /* Toggle switch (iOS-style): off = light track, on = accent */ .send-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .send-col { display: flex; flex-direction: column; align-items: center; gap: 16px; } .btn-block { width: 100%; } /* One central size for every switch in the app. */ .switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch-track { position: relative; width: 34px; height: 19px; border-radius: 10px; background: #e6e9ec; transition: background .2s; flex-shrink: 0; } .switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: #0a0e12; transition: transform .2s; } .switch input:checked + .switch-track { background: var(--accent-grad); } .switch input:checked + .switch-track::after { transform: translateX(15px); background: #fff; } .switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; } .switch-text { font-size: 12px; font-weight: 600; letter-spacing: .3px; color: var(--muted); text-transform: uppercase; } .switch input:checked ~ .switch-text { color: var(--accent); } /* No-FOUC: cover #dash until JS applied view/filter state (set by dashboard.php's inline script, removed in app.js after applyViewState() + document.fonts.ready). Opacity (not visibility) ermöglicht den sanften Fade-in beim Reveal; Layout und Scrollbar bleiben stabil, weil opacity nichts am Box-Modell ändert. */ body.view-dash #dash { opacity: 1; transition: opacity 280ms ease-out; } html.dash-loading body.view-dash #dash { opacity: 0; transition: none; } .reports { display: flex; flex-direction: column; gap: 16px; } /* Layout modes. Default (no class) and .view-detailed match the flex column. */ /* No align-items: grid items default to stretch, so tiles in the same row match the tallest card's height (e.g. a neighbour with a two-line description). */ /* position:relative macht den Grid-Container zum Containing-Block für die abs-positionierte offene Karte (siehe Tiles-Overlay-Block weiter unten). align-items kann auf default (stretch) bleiben: die offene Karte ist out-of- flow, treibt den Row-Track also nicht in die Höhe. Damit dehnen sich die verbleibenden Karten einer Zeile wie früher auf die gleiche Höhe — schöneres Grid-Bild ohne Lücken unter kürzeren Beschreibungen. */ .reports.view-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(600px, 1fr)); gap: 16px; position: relative; } /* Lists stay readable at full-bleed width; tiles fill the full width. */ .reports:not(.view-tiles) .report { max-width: 900px; } .reports.view-simple .report-desc { display: none; } .reports.view-simple .report { padding-top: 16px; padding-bottom: 16px; } .reports.view-simple .report-subject { font-size: 16px; } /* Employee "compact" overview: each card collapses to meta + subject and expands on tap (chevron). "full" shows everything and hides the chevron. */ .reports.compact .report-desc, .reports.compact .report-rating, .reports.compact .report-reco, .reports.compact .report-actions { display: none; } .reports.compact .report.open .report-desc { display: block; } .reports.compact .report.open .report-rating { display: flex; } .reports.compact .report.open .report-reco { display: block; } .reports.compact .report.open .report-actions { display: flex; } .reports.compact .report { padding-top: 16px; padding-bottom: 16px; cursor: pointer; } .reports.compact .report-actions { cursor: auto; } #myr-list .report-toggle { display: none; } #myr-list.compact .report-toggle { display: block; } /* Chevron only takes meta space while it is visible (compact). */ #myr-list:not(.compact) .report-toggle + .report-meta { padding-right: 0; } .report { position: relative; } .report-toggle { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; line-height: 1; font-size: 20px; transition: transform .2s, color .15s; z-index: 1; } .report-toggle:hover { color: var(--text); } .report.open .report-toggle { transform: rotate(180deg); } .report-body { display: none; } .report.open .report-body { display: block; } .report-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; letter-spacing: .5px; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; } /* Only cards with the collapse toggle (dashboard) need room for it; keeps the meta from wrapping early on employee cards, which have no toggle. */ .report-toggle + .report-meta { padding-right: 32px; } .report-subject { font-weight: 600; font-size: 18px; letter-spacing: .3px; } .report:hover { z-index: 5; } /* lift the hovered card so its tooltip overlays neighbours */ /* Originaltext-Toggle (opt-in pro Karte): erscheint im Karten-Body unter der KI-Empfehlung. Im Default zu, ein Klick auf den Button öffnet den Callout- Block. Stil-Vokabular bewusst dezent (muted Link statt farbiger Button), damit es nicht mit den Status-Aktionen konkurriert. */ .report-orig-wrap { margin-top: 14px; } .orig-toggle { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); transition: color .15s; } .orig-toggle:hover { color: var(--accent); } .orig-toggle::before { content: '▸ '; display: inline-block; } .orig-toggle[aria-expanded="true"]::before { content: '▾ '; } .report-orig { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--glass-border); color: #c2c8d0; font-size: 14px; line-height: 1.5; } .orig-label { color: var(--muted); font-weight: 600; } .orig-text { white-space: pre-wrap; } .cat-select { font: inherit; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--text); background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 6px; padding: 2px 6px; cursor: pointer; } .cat-select:hover:not(:disabled) { border-color: var(--accent); } .cat-select:disabled { opacity: .5; cursor: wait; } .cat-select option { text-transform: none; color: var(--text); background: #0a0e12; } .report-desc { font-size: 15px; color: #c2c8d0; margin-top: 5px; } .report-reco { margin-top: 14px; font-size: 14px; padding: 12px 14px; border-radius: 10px; background: rgba(24,214,186,.07); border: 1px solid rgba(24,214,186,.2); color: #c2c8d0; } .ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; } .ico-mic { width: 54px; height: 54px; vertical-align: middle; } .reco-label { color: var(--accent); font-weight: 600; } .report-emp { margin-top: 14px; font-size: 14px; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--glass-border-bright); color: #c2c8d0; line-height: 1.5; } .emp-label { color: var(--text); font-weight: 600; } .report-solution { margin-top: 14px; font-size: 14px; padding: 12px 14px; border-radius: 10px; background: rgba(24,188,185,.1); border: 1px solid rgba(24,214,186,.35); color: #d6dce2; line-height: 1.5; } .report-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--glass-border); } .badge { padding: 5px 11px 3px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; border: 1px solid; } .status-open { background: rgba(245,153,74,.12); color: var(--amber); border-color: rgba(245,153,74,.4); } .status-in_progress { background: rgba(24,214,186,.12); color: var(--accent); border-color: rgba(24,214,186,.4); } .status-done { background: rgba(24,214,186,.12); color: var(--accent); border-color: rgba(24,214,186,.4); } /* "Prüfen": assignee finished, awaiting TL review — distinct violet from open/in-progress. */ .status-review { background: rgba(167,139,250,.16); color: #b9a7ff; border-color: rgba(167,139,250,.5); } /* On the dashboard the "Prüfen" badge pulses to draw the TL's attention. */ #dash .status-review { animation: review-pulse 1.6s ease-in-out infinite; } @keyframes review-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(167,139,250,0); } 50% { box-shadow: 0 0 12px 1px rgba(167,139,250,.7); border-color: #b9a7ff; } } @media (prefers-reduced-motion: reduce) { #dash .status-review { animation: none; } } .badge-noai { background: rgba(245,153,74,.12); color: var(--amber); border-color: rgba(245,153,74,.4); cursor: help; } .badge-unread { background: rgba(245,101,127,.14); color: var(--rose); border-color: rgba(245,101,127,.45); } /* Unread-tasks count on the Aufgaben tab. */ .tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 1.5px 5px 0; margin-left: 7px; border-radius: 9px; background: var(--rose); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; vertical-align: middle; } /* Read receipt in the dashboard delegation area. */ .dlg-read { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; } .dlg-read-yes { color: var(--accent); } .dlg-read-no { color: var(--muted); } /* Unread "Gelesen" button pulses to invite the one-time acknowledgement. */ .task-read { color: var(--accent); border-color: rgba(24,214,186,.5); animation: read-pulse 1.6s ease-in-out infinite; } .task-read:hover { color: var(--accent); } @keyframes read-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(24,214,186,0); } 50% { box-shadow: 0 0 12px 1px rgba(24,214,186,.6); border-color: var(--accent); } } @media (prefers-reduced-motion: reduce) { .task-read { animation: none; } } .task-read-done { color: var(--accent); } .badge-draft { background: rgba(255,255,255,.06); color: var(--muted2); border-color: var(--glass-border-bright); } .prio-low { color: var(--muted); } .prio-med { color: var(--amber); } .prio-high { color: var(--rose); } .stars { display: flex; gap: 3px; } .star { background: none; border: none; font-size: 21px; line-height: 1; color: var(--muted2); cursor: pointer; padding: 0; transition: color .1s; } .star:hover { color: var(--muted); } .star.on { color: var(--amber); } /* Read-only star display (employee's own reports) */ .report-rating { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .stars.readonly .star { cursor: default; } .stars.readonly .star:hover { color: var(--muted2); } .stars.readonly .star.on, .stars.readonly .star.on:hover { color: var(--amber); } .actions-right { display: flex; align-items: center; gap: 10px; } .status-btns { display: flex; gap: 7px; } /* Archive-Button in der Karte — flach, einfarbig, dezenter als die alte Mülltonne. font-size = Icon-Größe (15px statt 18px), padding kompakt, damit es sich in die actions-right-Zeile einfügt wie ein normales sbtn-Element. */ .archive-btn { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--muted); padding: 4px; line-height: 1; display: inline-flex; align-items: center; transition: color .15s, opacity .15s; } .archive-btn:hover { color: var(--accent); } .archive-btn:disabled { opacity: .45; cursor: default; } /* Nur erledigte Meldungen lassen sich archivieren — Karten in anderen Status zeigen den Button gemutet (Server enforct ebenfalls; siehe Reports::archive). */ .report:not([data-status="done"]) .archive-btn { opacity: .3; cursor: not-allowed; } .report:not([data-status="done"]) .archive-btn:hover { color: var(--muted); } /* Archiv-Pill — eigenständiger Icon-Button im rechten Cluster der page-head, links neben dem Viewswitcher. margin-left:auto schiebt den ganzen Cluster nach rechts; auf dem Phone, wenn page-head umbricht, bleibt der Pill mit eigenem Rahmen für sich. Optisch im selben Gewicht wie .viewswitch. */ .archive-pill { display: grid; place-items: center; padding: 8px 12px; border: 1px solid var(--glass-border); border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; text-decoration: none; margin-left: auto; transition: color .15s, border-color .15s, background .15s; } .archive-pill:hover { color: var(--accent); border-color: var(--accent); background: var(--glass-strong); } .archive-pill .ico { width: 18px; height: 18px; } /* Wenn der Pill direkt vor dem Viewswitcher steht, übernimmt er die auto-margin, und der Viewswitcher rückt mit gap:10px (page-head) direkt rechts daneben. */ .archive-pill + .viewswitch { margin-left: 0; } /* Archiv-Seite: gleiches Karten-Layout wie das Dashboard, nur leicht desaturiert — historischer Charakter. .page-head bekommt einen mittigen Titel zwischen den beiden Aktions-Buttons (Zurück links, Archiv leeren rechts). */ .archive-title { font-size: 18px; margin: 0; flex: 1; text-align: center; letter-spacing: 1px; } .archive-title .muted { font-weight: 400; } /* Zurück-Button: chevron um 90° gedreht (zeigt nach links). */ .ico-back { transform: rotate(90deg); } .report.archived { opacity: .82; } #archive-purge, .user-delete { color: var(--rose); border-color: rgba(244,63,94,.35); } #archive-purge:hover:not(:disabled), .user-delete:hover:not(:disabled) { border-color: var(--rose); background: rgba(244,63,94,.08); } .sbtn { font-size: 11px; padding: 6px 12px; border-radius: 7px; border: 1px solid var(--glass-border); background: transparent; color: var(--muted); cursor: pointer; font-family: var(--font); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; transition: color .15s, border-color .15s; } .sbtn:hover:not(:disabled) { color: var(--text); border-color: var(--glass-border-bright); } .sbtn.current { color: var(--accent); border-color: var(--accent); background: rgba(24,214,186,.1); } .sbtn:disabled { cursor: default; opacity: .45; } /* Users */ .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } @media (max-width: 820px) { .cols2 { grid-template-columns: 1fr; } } .user-list { display: flex; flex-direction: column; gap: 12px; } /* Each user is a collapsible card: only the head shows until expanded. */ .user-row > .user-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; user-select: none; } .user-row > .user-head::-webkit-details-marker { display: none; } .user-row > .user-head::marker { content: ""; } /* Same focus-outline policy as buttons: quiet on click, visible on keyboard. */ .user-row > .user-head:focus { outline: none; } .user-row > .user-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 10px; } .user-row[open] > .user-head { margin-bottom: 14px; } .user-name { font-weight: 600; font-size: 17px; } /* Permission switches: two columns, with a thin divider above. */ .perm-form { border-top: 1px solid var(--glass-border); padding-top: 14px; } .perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-bottom: 14px; } .perm-switch .switch-text { text-transform: none; letter-spacing: .2px; } .user-actions { display: flex; flex-wrap: wrap; gap: 8px; } .perm-form + .user-actions { margin-top: 12px; } /* Same chevron look as the report cards (.report-toggle): muted, 20px, rotates open. */ .user-toggle { color: var(--muted); font-size: 20px; line-height: 1; flex-shrink: 0; transition: transform .2s, color .15s; } .user-row > .user-head:hover .user-toggle { color: var(--text); } .user-row[open] > .user-head .user-toggle { transform: rotate(180deg); } @media (max-width: 560px) { .perm-grid { grid-template-columns: 1fr; } } .qr-box { background: #fff; padding: 16px; border-radius: 12px; display: inline-block; } .qr-box svg { display: block; width: 220px; height: 220px; } .code-block { margin-top: 14px; font-size: 12px; } .code-block code { display: block; padding: 10px 12px; border-radius: 8px; background: rgba(0,0,0,.3); border: 1px solid var(--glass-border); word-break: break-all; margin-top: 5px; color: #c2c8d0; font-family: ui-monospace, Menlo, monospace; } /* Settings */ .narrow-col { max-width: 640px; margin: 0 auto; } .server-list { display: flex; flex-direction: column; gap: 10px; } .server-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border: 1px solid var(--glass-border); border-radius: 11px; } .server-row.is-active { border-color: rgba(24,214,186,.4); background: rgba(24,214,186,.06); } .server-info { min-width: 0; } .server-head { display: flex; align-items: center; gap: 8px; } .server-name { font-weight: 600; font-size: 16px; } .server-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .server-actions form { display: inline; margin: 0; } .form-actions { display: flex; gap: 8px; } .input-eye { position: relative; } .input-eye .input { padding-right: 46px; } .eye-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; opacity: .5; padding: 4px; transition: opacity .15s; } .eye-btn:hover, .eye-btn.on { opacity: 1; } #ping-result { margin-top: 14px; } .ping-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--glass-border); font-size: 14px; } .ping-ok { color: var(--accent); } .ping-bad { color: #fca5b4; } /* Categories management */ .cat-list { display: flex; flex-direction: column; gap: 10px; } .cat-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .cat-rename { display: flex; flex: 1 1 260px; gap: 8px; margin: 0; min-width: 0; } .cat-rename .input { flex: 1; min-width: 0; } .cat-count { flex: 0 0 85px; text-align: right; white-space: nowrap; color: var(--muted); } .cat-row form:last-child { margin: 0; display: flex; } /* Icon-only delete button (trash). Muted by default, rose on hover. */ .del-btn { background: none; border: none; cursor: pointer; color: var(--muted); padding: 6px; line-height: 1; display: inline-flex; align-items: center; border-radius: 6px; transition: color .15s, background .15s; } .del-btn:hover { color: #fca5b4; background: rgba(244,63,94,.08); } .del-btn .ico { width: 18px; height: 18px; } .cat-add { display: flex; gap: 8px; flex-wrap: wrap; } .cat-add .input { flex: 1 1 200px; min-width: 0; } @media (max-width: 560px) { /* On narrow screens drop the count to keep the rename input + actions on one row; the count is informational, not action-critical. */ .cat-count { display: none; } } /* System page */ .kv { padding: 5px 0; font-size: 15px; } .kv code { padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.3); border: 1px solid var(--glass-border); font-family: ui-monospace, Menlo, monospace; } .kv.ok { color: var(--accent); } .warn-text { color: var(--amber); } .log { border-radius: 8px; background: rgba(0,0,0,.3); border: 1px solid var(--glass-border); padding: 12px; font-size: 12px; white-space: pre-wrap; word-break: break-word; margin-top: 10px; color: #c2c8d0; font-family: ui-monospace, Menlo, monospace; } /* Lightbox-Modal (Desktop): „Neu"-Pill öffnet den Recorder hier statt zur eigenständigen /record-Seite zu navigieren. Auf Phone via media query komplett ausgeblendet — dort folgt der Browser dem Link wie gehabt. */ .modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 96px 24px 24px; background: rgba(8, 12, 16, .30); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity 220ms ease-out; overflow-y: auto; } .modal-overlay.open { opacity: 1; } .modal-overlay[hidden] { display: none; } .modal-dialog { position: relative; width: min(560px, 100%); } .modal-close { position: absolute; top: -36px; right: 0; background: none; border: none; cursor: pointer; color: var(--muted); padding: 6px; line-height: 1; display: inline-flex; align-items: center; border-radius: 6px; transition: color .15s, background .15s; } .modal-close:hover { color: var(--text); background: rgba(255,255,255,.05); } .modal-close .ico { width: 22px; height: 22px; } /* Segnav im Modal: kein margin-top (sitzt direkt unter dem Close-Button), leichte Abgrenzung zum Pane darunter. Tab-Switching steuert app.js. */ .modal-segnav { margin-top: 0; margin-bottom: 14px; } /* Tab-Panes im Modal — nur der aktive sichtbar; iframes werden lazy gefüllt. */ .modal-pane { width: 100%; } .modal-pane[hidden] { display: none !important; } .modal-frame { width: 100%; height: min(70dvh, 720px); border: 1px solid var(--glass-border); border-radius: 12px; background: transparent; display: block; } /* Embed-Variante von layout_employee (?embed=1): kein Topbar/Segnav. Body bleibt halbtransparent (var(--bg) mit ~85% Alpha) — der Overlay- Blur schimmert dezent durch, ohne dass der Content unleserlich wird. Horizontal-Padding der .wrap bleibt erhalten, nur das Top-Padding fällt weg (keine Topbar darüber). */ body.embed { background: rgba(10, 14, 18, .85); } body.embed .main { padding-top: 14px; } /* Scrollbar im Embed-Document (iframe-Inhalt): dünn, im Glass-Border-Ton. Chrome scrollt html (Document-Root), nicht body — daher html.embed; das inline-Script in layout_employee setzt die Klasse beim Render. */ html.embed { scrollbar-width: thin; scrollbar-color: var(--glass-border-bright) transparent; scrollbar-gutter: auto; } html.embed::-webkit-scrollbar { width: 10px; } html.embed::-webkit-scrollbar-track { background: transparent; } html.embed::-webkit-scrollbar-thumb { background: var(--glass-border-bright); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } html.embed::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; } /* Recorder-Karte im Modal: dasselbe halbtransparente Treatment wie der Embed-Body, damit der Recorder-Pane visuell zu den iframe-Panes passt. */ .modal-pane .card { background: rgba(10, 14, 18, .85); } /* Recorder-Lightbox (Topbar „Neu"-Pill) ist nur Desktop — auf Phones gibt's die Vollseiten-/record-Navigation. Negative Selektion, damit andere Lightboxen mit derselben Basis-Klasse (z. B. .att-lightbox) auf Mobile sichtbar bleiben. */ @media (max-width: 640px) { #rec-modal.modal-overlay { display: none !important; } } /* === Datei-Anhänge ====================================================== */ /* Picker (Auswahl-UI vor Upload): Button im Sekundär-Stil + Liste der pending Files mit Entfernen-Buttons. Hidden bekommt den Klick per