:root { --bg: #0d1117; --surface: #161b22; --surface-2: #1c2330; --border: #30363d; --text: #e6edf3; --muted: #8b949e; --accent: #1f6feb; --accent-2: #388bfd; --field-bg: #11161f; /* Eingabefelder: vertieft (Well) */ --btn-bg: #283040; /* Buttons: erhaben, heller als Felder */ --btn-border: #3d4657; --ok: #3fb950; --warn: #d29922; --danger: #f85149; --stoerung: #f85149; --auftrag: #58a6ff; --wartung: #d29922; --kalibrierung: #a371f7; --scis: #8b949e; --projekt: #3fb950; } /* Light-Theme: aktiv, wenn gesetzt ist (theme.js setzt das Attribut je nach gespeicherter Wahl bzw. OS-Einstellung immer auf light oder dark). Basis oben bleibt das dunkle Schema. */ :root[data-theme="light"] { --bg: #eef1f5; /* Seite: leicht grau, damit weisse Karten abheben */ --surface: #ffffff; /* Karten, Topbar, Drawer, Modal: weiss */ --surface-2: #e7ebf1; /* Tabellenkopf, Hover, Badges, Tracks */ --border: #bcc4cd; /* deutlich sichtbarer Rand (statt fast-weiss) */ --text: #1f2328; --muted: #57606a; --accent: #0969da; --accent-2: #0757ba; --field-bg: #ffffff; --btn-bg: #eef1f5; /* Sekundär-Buttons heben sich von weissen Karten ab */ --btn-border: #aab3bd; /* kräftiger Button-Rand */ --ok: #1a7f37; --warn: #9a6700; --danger: #cf222e; --stoerung: #cf222e; --auftrag: #0969da; --wartung: #9a6700; --kalibrierung: #8250df; --scis: #57606a; --projekt: #1a7f37; } /* Light-Feinschliff: helle Flächen brauchen andere Schatten/Hover als das dunkle Schema. */ /* Eingabefelder: dezenter Inset statt des dunklen (fuer Dark gedachten) Schattens. */ :root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { box-shadow: inset 0 1px 2px rgba(27, 31, 36, .07); } /* Buttons: weiche Erhebung statt der harten 1px-Dunkellinie. */ :root[data-theme="light"] .btn, :root[data-theme="light"] .icon-btn { box-shadow: 0 1px 2px rgba(27, 31, 36, .12); } /* Flaechen: leichte Erhebung, damit sie sich klar vom grauen Hintergrund loesen. */ :root[data-theme="light"] .card, :root[data-theme="light"] .kpi, :root[data-theme="light"] .login-card, :root[data-theme="light"] .modal, :root[data-theme="light"] .toast { box-shadow: 0 1px 3px rgba(27, 31, 36, .1); } /* Hover muss auf Hell ABdunkeln (nicht aufhellen wie im dunklen Schema). */ :root[data-theme="light"] .btn:hover:not(:disabled), :root[data-theme="light"] .icon-btn:hover:not(:disabled) { filter: brightness(0.95); } * { box-sizing: border-box; } /* hidden-Attribut muss ID-Selektoren wie #login/#main schlagen, sonst bleibt der Login-Screen nach dem Anmelden sichtbar. */ [hidden] { display: none !important; } html, body { margin: 0; height: 100%; } body { background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; -webkit-tap-highlight-color: transparent; } button { font: inherit; cursor: pointer; } input, select, textarea { font: inherit; background: var(--field-bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .6rem; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); } a { color: var(--accent-2); } /* ---- Login ---- */ #login { display: grid; place-items: center; min-height: 100vh; padding: 1rem; } .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; width: min(360px, 100%); } .login-card h1 { margin: 0 0 1rem; font-size: 1.4rem; } .login-card form { display: grid; gap: .8rem; } .login-card label { display: grid; gap: .3rem; font-size: .85rem; color: var(--muted); } .login-card button { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: .7rem; font-weight: 600; } .error { color: var(--danger); min-height: 1em; margin: .3rem 0 0; } /* ---- Layout ---- */ #main { display: flex; flex-direction: column; min-height: 100vh; } .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; padding-top: calc(.6rem + env(safe-area-inset-top)); background: var(--surface); border-bottom: 1px solid var(--border); } .topbar .brand { margin-right: auto; } .brand { font-weight: 700; white-space: nowrap; } .status-cluster { display: flex; align-items: center; gap: .5rem; } .badge { font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); } .badge.ok { color: var(--ok); border-color: var(--ok); } .badge.warn { color: var(--warn); border-color: var(--warn); } .sync-status { font-size: .75rem; color: var(--muted); min-width: 5.5em; text-align: right; } .icon-btn { background: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--text); border-radius: 8px; width: 40px; height: 40px; box-shadow: 0 1px 0 rgba(0, 0, 0, .35); transition: filter .12s ease, transform .04s ease; } #view { flex: 1; padding: 1rem; padding-bottom: 2rem; max-width: 1200px; margin: 0 auto; width: 100%; } .loading, .empty { color: var(--muted); text-align: center; padding: 2rem; } /* ---- Drawer-Navigation (Hamburger) ---- */ .menu-btn { font-size: 1.25rem; } .nav-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .nav-backdrop.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 45; width: min(80vw, 300px); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; transform: translateX(-100%); transition: transform .22s ease; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } .drawer.open { transform: translateX(0); } .drawer-head { /* Border-Box-Höhe exakt wie die Topbar (40px Button + .6rem oben/unten + 1px Rand = calc unten), damit die untere Trennlinie von Drawer und Topbar fluchtet. Der Safe-Area-Versatz kommt bei beiden gleichermassen von aussen (topbar padding-top bzw. .drawer padding-top). */ display: flex; align-items: center; min-height: calc(40px + 1.2rem + 1px); padding: 0 1.2rem; font-weight: 700; font-size: 1.05rem; border-bottom: 1px solid var(--border); } .nav-list { display: flex; flex-direction: column; padding: .4rem 0; } .nav-item { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.2rem; min-height: 48px; text-decoration: none; color: var(--text); font-size: 1rem; } .nav-item.active { color: var(--accent-2); background: var(--surface-2); font-weight: 600; } .nav-icon { font-size: 1.2rem; width: 1.6rem; text-align: center; } /* ---- Cards & clock ---- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; margin-bottom: 1rem; } /* Stempeluhr linksbündig, aber nicht über die volle Breite strecken (Konsistenz) */ #clock-root { max-width: 680px; } .clock-status { text-align: center; padding: 1.4rem 1rem; } .clock-status .state { font-size: 1.5rem; font-weight: 700; } .clock-status .sub { color: var(--muted); margin-top: .3rem; } .clock-timer { font-variant-numeric: tabular-nums; font-size: 2.6rem; font-weight: 700; letter-spacing: .04em; margin: .6rem 0; } .state-working .state { color: var(--ok); } .state-break .state { color: var(--warn); } .state-not_started .state { color: var(--muted); } .btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .btn { border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--text); border-radius: 10px; padding: .45rem .8rem; font-weight: 600; font-size: 1rem; box-shadow: 0 1px 0 rgba(0, 0, 0, .35); transition: filter .12s ease, transform .04s ease; } .btn:hover:not(:disabled), .icon-btn:hover:not(:disabled) { filter: brightness(1.16); } .btn:active:not(:disabled), .icon-btn:active:not(:disabled) { transform: translateY(1px); } /* Grosse Aktions-Buttons NUR auf der Stempeluhr. Ohne die #clock-root-Bindung erben alle zweckentfremdeten .btn-grid (Pendenzen, Statistik-/Rapport-Picker) die XL-Grösse und passen dann nicht mehr zu den übrigen Toolbar-Buttons. */ #clock-root .btn-grid .btn { padding: 1rem; border-radius: 12px; } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.ok { background: var(--ok); border-color: var(--ok); color: #04260f; } .btn.warn { background: var(--warn); border-color: var(--warn); color: #241a00; } .btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); } .btn:disabled { opacity: .4; } .btn.wide { grid-column: 1 / -1; } /* Kompakter Button (Tabellen-Aktionen, Inline-Steuerung). Nur EINE Definition – die zweite lag früher im SAP-Abschnitt und hat diese still überschrieben. */ .btn.small { padding: .3rem .6rem; font-size: .82rem; } /* Erinnerung „Vortag nicht beendet" (Stempeluhr) */ .reminder { max-width: 680px; display: flex; flex-wrap: wrap; gap: .6rem .8rem; align-items: center; justify-content: space-between; border-color: var(--warn); } .reminder-text { flex: 1 1 240px; } .reminder-actions { display: flex; gap: .5rem; flex-wrap: wrap; } /* ---- Tables ---- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; } table { border-collapse: collapse; width: 100%; font-size: .85rem; } th, td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; } /* Freitext-Spalten umbrechen statt die Tabelle breit zu ziehen (kein Rechts-Scroll) */ th.wrap, td.wrap { white-space: normal; word-break: break-word; overflow-wrap: anywhere; min-width: 9rem; max-width: 26rem; } th { background: var(--surface-2); color: var(--muted); font-weight: 600; position: sticky; top: 0; } /* Sortierbare Spaltenköpfe */ th.th-sortable { cursor: pointer; user-select: none; } th.th-sortable:hover { color: var(--text); } th.th-sortable::after { content: '⇅'; opacity: .35; margin-left: .35em; font-size: .85em; } th.th-sortable[aria-sort="ascending"]::after { content: '↑'; opacity: .95; } th.th-sortable[aria-sort="descending"]::after { content: '↓'; opacity: .95; } th.th-sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } tbody tr:hover { background: var(--surface-2); } /* Aus der Auftragsübersicht verlinkte Stempelung hervorheben */ tbody tr.row-hl { background: rgba(31, 111, 235, .18); animation: row-hl-flash 1.4s ease-out 1; } tbody tr.row-hl:hover { background: rgba(31, 111, 235, .26); } @keyframes row-hl-flash { from { background: rgba(31, 111, 235, .5); } to { background: rgba(31, 111, 235, .18); } } .chip { display: inline-block; font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--border); } .g-Störung { color: var(--stoerung); border-color: var(--stoerung); } .g-Auftrag { color: var(--auftrag); border-color: var(--auftrag); } .g-Wartung { color: var(--wartung); border-color: var(--wartung); } .g-Kalibrierung { color: var(--kalibrierung); border-color: var(--kalibrierung); } .g-SCIS { color: var(--scis); border-color: var(--scis); } .g-Projekt { color: var(--projekt); border-color: var(--projekt); } .s-offen { color: var(--warn); } .s-erledigt { color: var(--ok); } /* ---- Toolbar / filters ---- */ .toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-bottom: 1rem; } .toolbar input, .toolbar select { flex: 0 1 auto; min-width: 0; } .toolbar label.small { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); } .toolbar .grow { flex: 1 1 160px; } .toolbar .spacer { flex: 1 1 auto; } h2.view-title { margin: 0 0 .8rem; font-size: 1.2rem; } .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .7rem; margin-bottom: 1rem; } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .8rem; } .kpi .label { font-size: .72rem; color: var(--muted); } .kpi .value { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; } .kpi .value.pos { color: var(--ok); } .kpi .value.neg { color: var(--danger); } /* ---- Formularfelder: Beschriftung über dem Feld, Felder ausgerichtet ---- */ form label.small, #pick-create label.small { display: grid; gap: .25rem; align-items: start; } form label.small > input, form label.small > select, form label.small > textarea, #pick-create label.small > input, #pick-create label.small > select { width: 100%; } form label.small:has(> input[type="checkbox"]) { display: inline-flex; flex-direction: row; align-items: center; gap: .4rem; } form label.small:has(> input[type="checkbox"]) > input { width: auto; } /* Vertikaler Rhythmus in Karten (z. B. Import) */ /* Plausibilitätsprüfung (Tagesübersicht) */ .checks .check-item { display: flex; gap: .5rem; align-items: flex-start; padding: .4rem .6rem; margin-bottom: .4rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: .9rem; } .checks .check-item:last-of-type { margin-bottom: 0; } .checks .check-item.error { border-left: 4px solid var(--danger); } .checks .check-item.warn { border-left: 4px solid var(--warn); } .checks .check-item.info { border-left: 4px solid var(--accent); } .checks .check-item .lvl { line-height: 1.4; } .checks-other { margin-top: .6rem; font-size: .85rem; color: var(--muted); } .checks-other a { color: var(--accent-2); cursor: pointer; text-decoration: underline; margin-right: .1rem; } .card > h3 { margin: 0 0 .6rem; font-size: 1.05rem; } .card > p { margin: .2rem 0 .8rem; } .card > label.small { display: block; margin: .7rem 0 .3rem; } .card > .btn { margin: .6rem .5rem 0 0; } /* ---- Bars ---- */ .bar-row { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: .5rem; margin: .35rem 0; font-size: .8rem; } /* Wertespalte an Inhalt anpassen und nicht umbrechen (z. B. „77.9% · 18,50 h"). */ .bar-row > .num { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; } .bar-track { background: var(--surface-2); border-radius: 6px; height: 14px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 6px; } /* ---- Modal / picker ---- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: end center; z-index: 50; } /* Bottom-Sheet: Höhe an dynamischen Viewport (dvh) koppeln, damit Browser-Chrome auf Mobil den Sheet nicht überdeckt; innerer Bereich scrollt, Header/Aktionen bleiben. */ .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 16px 16px 0 0; width: min(720px, 100%); max-height: 85vh; max-height: 85dvh; display: flex; flex-direction: column; overflow: hidden; } /* Bestätigungs-Dialog: schmaler als die grossen Formular-Modals. */ .modal.modal-confirm { width: min(440px, 100%); } .modal header { flex: 0 0 auto; padding: 1rem; border-bottom: 1px solid var(--border); display: flex; gap: .5rem; align-items: center; } /* Scrollbereiche MÜSSEN in der Flex-Spalte schrumpfen dürfen (min-height:0), sonst greift overflow-y nie und die Aktions-Buttons werden nach unten weggedrückt. */ .modal .list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: .5rem; } /* Eingeklapptes „Neuer Auftrag"-Formular im Picker darf scrollen statt zu clippen. */ #pick-create:not([hidden]) { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Formularfelder (auch native date/time-Felder auf Mobil) nie breiter als das Modal → kein Rechts-Scroll. */ .modal input, .modal select, .modal textarea, .modal button { max-width: 100%; min-width: 0; } .modal .fld > input, .modal .fld > select, .modal .fld > textarea { width: 100%; } .form-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: grid; gap: .8rem; align-content: start; padding: 1rem; } .fld { display: grid; gap: .3rem; font-size: .8rem; color: var(--muted); } .fld > input, .fld > select { color: var(--text); } .fld-row { display: flex; gap: .8rem; } .fld-row .fld { flex: 1; min-width: 0; } .modal-actions { flex: 0 0 auto; padding: .8rem 1rem; padding-bottom: calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); display: flex; gap: .5rem; justify-content: flex-end; } .daycard { display: flex; flex-direction: column; gap: .6rem; } .daycard-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; } .daycard-actions { display: flex; gap: .5rem; flex-wrap: wrap; } .daycard-times { display: flex; gap: 1.2rem; flex-wrap: wrap; color: var(--muted); font-size: .9rem; } .daycard-times strong { color: var(--text); font-variant-numeric: tabular-nums; } .daystate { font-weight: 600; } .daystate.open { color: var(--ok); } .daystate.closed { color: var(--muted); } .picker-item { padding: .6rem .7rem; border-radius: 10px; border: 1px solid transparent; } .picker-item:hover { background: var(--surface-2); } .picker-item .title { font-weight: 600; font-size: 1.05rem; } .picker-item .meta { font-size: .75rem; color: var(--muted); margin-top: .1rem; } /* Aktions-Zelle bleibt eine echte Tabellenzelle (KEIN display:flex!) – sonst dehnt sie sich nicht auf die Zeilenhöhe und die Trennlinie sitzt in mehrzeiligen Zeilen zu hoch. */ .row-actions { white-space: nowrap; } .row-actions .icon-btn { vertical-align: middle; } .row-actions .icon-btn + .icon-btn { margin-left: .4rem; } /* Aufgeklappter Auftrag (Auftragsübersicht/SAP): Haupt- + Detailzeile als abgegrenzte Einheit mit Akzent-Balken links und leichtem Farbverlauf, klar von anderen Zeilen getrennt. */ tr.order-open > td { background: rgba(31, 111, 235, .14); } tr.order-open:hover > td { background: rgba(31, 111, 235, .2); } tr.order-open > td:first-child { box-shadow: inset 3px 0 0 var(--accent); } tr.drill-row > td { background: rgba(31, 111, 235, .06); box-shadow: inset 3px 0 0 var(--accent); } /* ✓SAP grün, wenn alle Tageseinträge des Auftrags verbucht sind */ .icon-btn.sap-done { color: var(--ok); border-color: var(--ok); } /* ✓SAP-Button an Textbreite anpassen – der quadratische icon-btn (40px) ist zu schmal für den Text „✓SAP", der sonst über den Rand ragt. */ .icon-btn[data-act="book"] { width: auto; min-width: 40px; padding: 0 .5rem; } /* kleiner Inline-Kopierknopf neben Notiz/Ursache */ .copy-btn { width: auto; height: auto; padding: .05rem .35rem; font-size: .8rem; line-height: 1.2; margin-left: .3rem; vertical-align: middle; } .small { font-size: .78rem; color: var(--muted); } /* Feld-Label in Zweitzeilen (Beschreibung/Notiz/Ursache eindeutig kennzeichnen) */ .fld-lbl { color: var(--muted); opacity: .8; font-weight: 600; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .nowrap { white-space: nowrap; } /* gesperrte Benutzer in der Verwaltung: sichtbar, aber erkennbar inaktiv */ tr.row-inactive { opacity: .55; } /* ---- Abwesenheits-Auswahl im Zeitkonto: feste, EINHEITLICHE Feldbreiten ---- Ein `select` ist so breit wie sein längster Eintrag – hier „Todesfall Lebenspartner*in / Kinder / Eltern / Schwiegereltern" (rund 415 px). Dadurch sprengte das Feld die Zeile, und die beiden Tabellen („Erfasste Abwesenheiten" und „Tage im Zeitraum") waren zudem unterschiedlich breit. Feste Breiten richten beide gleich aus; den vollen Text zeigt die aufgeklappte Liste. */ select.abw, select.yabw { width: 13rem; } select.abwf, select.yabwf { width: 8rem; } /* Abwesenheits-Statistik: Kopftexte und die Bezeichnungs-Spalte dürfen umbrechen. Die Reglement-Wortlaute sind lang („Todesfall Lebenspartner*in / Kinder / …") und sprengten sonst den 680-px-Deckel der Karte – die Tabelle scrollte dann seitlich und die letzte Spalte („davon bezogen") lag ausserhalb. */ table.th-wrap th, table.th-wrap td:first-child { white-space: normal; } /* Der Aufklapp-Pfeil des Browsers sitzt IM Feld: ohne Platz rechts schiebt sich der Text darunter (bei den langen Absenz-Labels gut sichtbar). Reservierter Rand + Ellipse schneiden sauber ab; der volle Text steht in der Liste. */ select.abw, select.yabw, select.abwf, select.yabwf { padding-right: 1.5rem; text-overflow: ellipsis; } /* ---- Zeitkonto-Einstellzeile je Mitarbeiter (Admin) ---- Drei Gruppen statt einer flachen Leiste: Wochenraster, übrige Felder, Speichern. Die sieben Tagesfelder sind ein echtes 7-Spalten-Raster – als frei umbrechende Elemente standen sie auf schmalen Schirmen ragged untereinander. */ .uset { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: flex-end; margin: .2rem 0; } .uset-week { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; } .uset-cap, .uset-sum { padding-bottom: .35rem; white-space: nowrap; } .uset-sum { font-weight: 600; } .wt-grid { display: grid; grid-template-columns: repeat(7, 3.3rem); gap: .25rem; } .wt-grid label { display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .72rem; color: var(--muted); } .wt-grid input { width: 100%; min-width: 0; text-align: center; padding-left: .25rem; padding-right: .25rem; } /* Spinner weg: bei 3.3rem Feldbreite verdecken sie die Zahl, und Schrittweite 0.25 tippt man ohnehin, statt 32-mal zu klicken. */ .wt-grid input::-webkit-outer-spin-button, .wt-grid input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .wt-grid input { -moz-appearance: textfield; appearance: textfield; } .uset-fields { display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: flex-end; } .uset-fields label { display: flex; flex-direction: column; gap: .1rem; font-size: .78rem; color: var(--muted); } .uset-fields input[type="date"] { width: 9.2rem; } .uset-fields input:not([type="date"]) { width: 5.5rem; } .uset-save { align-self: flex-end; } details.drill { margin: 0; } details.drill > summary { cursor: pointer; list-style: none; } pre.legacy { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: .7rem; font-size: .8rem; color: var(--text); } .toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .6rem 1rem; z-index: 60; } @media (min-width: 640px) { .btn-grid { grid-template-columns: repeat(3, 1fr); } } /* ---- Zeitkonto: beide Tabellen auf DIESELBE Spaltenflucht ---- „Erfasste Abwesenheiten" (Datum | Art | Anteil | 🗑) und „Tage im Zeitraum" (Datum | Tag | Netto | Soll | Abwesenheit | Anteil | Gleit | Saldo) stehen direkt untereinander. Gleiche Feldbreiten allein genügen nicht – die Felder müssen auch an derselben Stelle beginnen. Dafür ist die Datums-Spalte oben genau so breit wie Datum+Tag+Netto+Soll unten (7.5+3+5.5+5 = 21rem); ab da sind die Spalten paarweise gleich. Die jeweils letzte Spalte nimmt den Rest. Erst ab 820 px: die festen Breiten ergeben zusammen 43rem (688 px) plus die Aktions-Spalte. Auf schmaleren Schirmen (Tablet quer, 700 px) passte das nicht und die Tabelle scrollte – gemessen 688 bei 666 sichtbar. Darunter gilt wieder die automatische Aufteilung: dann fluchten die Tabellen nicht, laufen aber auch nicht über. Auf Mobil blendet `zk-days` zusätzlich zwei Spalten aus, eine feste Aufteilung würde das zunichtemachen. */ @media (min-width: 820px) { table.zk-days, table.zk-abs { table-layout: fixed; } table.zk-days th:nth-child(1) { width: 7.5rem; } /* Datum ┐ */ table.zk-days th:nth-child(2) { width: 3rem; } /* Tag │ zusammen */ table.zk-days th:nth-child(3) { width: 5.5rem; } /* Netto │ 21rem */ table.zk-days th:nth-child(4) { width: 5rem; } /* Soll ┘ */ table.zk-days th:nth-child(5) { width: 13.5rem; } /* Abwesenheit */ table.zk-days th:nth-child(6) { width: 8.5rem; } /* Anteil */ table.zk-days th:nth-child(7) { width: 5.5rem; } /* Gleit (Saldo = Rest) */ table.zk-abs th:nth-child(1) { width: 21rem; } /* = die vier oben */ table.zk-abs th:nth-child(2) { width: 13.5rem; } /* Art */ table.zk-abs th:nth-child(3) { width: 8.5rem; } /* Anteil (🗑 = Rest) */ } /* Kalender-Wochenansicht (Outlook-artig) */ .cal-weeklabel { margin: .1rem 0 .5rem; } .cal-head, .cal-body { display: grid; grid-template-columns: 52px repeat(var(--cols), minmax(0, 1fr)); } .cal-dayhead { padding: .3rem .2rem; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; cursor: pointer; } .cal-dayhead.today { background: var(--surface-2); } .cal-wd { font-weight: 600; font-size: .85rem; } .cal-wd span { color: var(--muted); font-weight: 400; } .cal-dh { font-size: .7rem; color: var(--accent-2); min-height: .95rem; } .cal-body { position: relative; } .cal-gutter { position: relative; } .cal-hour { position: absolute; right: 4px; transform: translateY(-50%); font-size: .68rem; color: var(--muted); white-space: nowrap; } .cal-col { position: relative; border-left: 1px solid var(--border); } .cal-col.today { background: rgba(56, 139, 253, .06); } .cal-col.absent { background: rgba(210, 153, 34, .09); } .cal-abw { color: var(--warn); font-weight: 600; } /* Störungs-Zeilen in der Equipment-Historie hervorheben */ tbody tr.st-row { background: rgba(248, 81, 73, .07); } tbody tr.st-row:hover { background: rgba(248, 81, 73, .13); } .cal-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); opacity: .45; } .cal-seg { position: absolute; left: 3px; right: 3px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: 6px; padding: 1px 5px; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .28); } .cal-seg:hover { filter: brightness(1.18); } .cal-seg-t { font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-seg-s { font-size: .64rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-seg.break { border-left-style: dashed; background: var(--surface-2); opacity: .85; } .cal-seg.g-Störung { border-left-color: var(--stoerung); } .cal-seg.g-Auftrag { border-left-color: var(--auftrag); } .cal-seg.g-Wartung { border-left-color: var(--wartung); } .cal-seg.g-Kalibrierung { border-left-color: var(--kalibrierung); } .cal-seg.g-SCIS { border-left-color: var(--scis); } .cal-seg.g-Projekt { border-left-color: var(--projekt); } /* Anhang-Indikator in Übersichten */ .att-flag { color: var(--accent-2); font-size: .8rem; margin-left: .35rem; white-space: nowrap; } /* Anhang-Vorschau (read-only) in aufgeklappten Bereichen */ .att-cap { font-size: .72rem; color: var(--muted); margin: .2rem 0 .3rem; } .att-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; } .att-thumb { display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 92px; text-decoration: none; color: var(--muted); } .att-thumb img { width: 92px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); } .att-thumb .att-doc { width: 92px; height: 72px; display: flex; align-items: center; justify-content: center; font-size: 2rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); } .att-thumb .att-name { font-size: .64rem; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .att-thumb:hover img, .att-thumb:hover .att-doc { border-color: var(--accent); } /* Anhang-Liste im Bearbeiten-Dialog: Thumbnail + Löschbutton feste Breite, Dateiname schrumpfbar (min-width:0 + Umbruch) → der 🗑 wird nie abgeschnitten, alles rechtsbündig. */ .att-list-row { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; } .att-list-thumb, .att-list-row .icon-btn { flex: 0 0 auto; } .att-list-info { flex: 1 1 auto; min-width: 0; } .att-list-name { word-break: break-word; overflow-wrap: anywhere; } /* ---- Kompakte Topbar auf kleinen Bildschirmen ---- */ @media (max-width: 560px) { .topbar { padding-left: .6rem; padding-right: .6rem; gap: .4rem; } .brand { font-size: .95rem; } .brand-icon { display: none; } .sync-status { display: none; } .status-cluster { gap: .35rem; } h2.view-title { font-size: 1.1rem; } } /* ---- Toolbar & Tabellen auf Mobil ---- */ @media (max-width: 640px) { #view { padding: .8rem; } .toolbar { gap: .4rem .5rem; align-items: stretch; } .toolbar > span.spacer, .toolbar > span.grow { display: none; } .toolbar > input, .toolbar > select { flex: 1 1 46%; } .toolbar > input.grow { flex-basis: 100%; } .toolbar > label.small { flex: 1 1 46%; display: flex; flex-direction: column; align-items: stretch; gap: .15rem; } .toolbar > label.small input, .toolbar > label.small select { width: 100%; } /* Checkbox-Labels inline lassen (nicht als Spalte) */ .toolbar > label.small:has(input[type="checkbox"]) { flex: 0 0 auto; flex-direction: row; align-items: center; gap: .35rem; } .toolbar > label.small:has(input[type="checkbox"]) input { width: auto; } .toolbar > button { flex: 0 0 auto; } /* Aktions-Buttons gleichmäßig 2-spaltig (allein → volle Breite, paarweise → je halb) */ .toolbar > button.btn { flex: 1 1 46%; } /* Die zwei Gruppen-Container der Zeitraum-Leiste bekommen je eine EIGENE Zeile. Vorher galten die Toolbar-Regeln nur für input/select/label/button – die beiden `div`s behielten `flex: 0 1 auto` und brachen je nach Gerätebreite anders um: auf 390 px lagen Modus-Umschalter und Blätter-Navigation nebeneinander, auf 378 px (z. B. Galaxy A56) rutschte „von" neben die Navigation und die Leiste wurde stufig. Feste Zeilen sind auf jeder Breite gleich und ruhiger. */ .toolbar > .seg { display: flex; flex: 1 1 100%; } .toolbar > .seg .seg-btn { flex: 1 1 0; } /* Modus-Knöpfe gleich breit */ .toolbar > .period-nav { flex: 1 1 100%; justify-content: space-between; } th, td { padding: .4rem .45rem; } table { font-size: .8rem; } th.wrap, td.wrap { min-width: 7rem; } /* Statistik-Balken: Namensspalte schmaler, Wert (auto) bleibt einzeilig */ .bar-row { grid-template-columns: 84px 1fr auto; gap: .4rem; } /* ---- Objekt-Tabellen auf Mobil: Zeile → Karte (`table.cards-sm`) ---- Sechs bis acht Spalten passen auf 390 px nicht nebeneinander; als Tabelle liegen Freitext und die rechten Spalten ausserhalb des Sichtfelds, und mit einer schmalen Umbruch-Spalte werden die Zeilen absurd hoch. Die Zeile wird deshalb zur Karte umgeflowt. Inhalt bleibt derselbe – es wird nichts doppelt gerendert und nichts ausgeblendet, nur neu angeordnet. Rollen-Klassen je Zelle (die Ansicht vergibt sie, nicht die Spaltenposition): .c-title Überschrift der Karte, eigene Zeile, fett .c-meta kurze Angabe (Chip, Nummer, Datum, Status) – Meta-Zeile darunter .c-num hervorgehobene Zahl, steht in derselben Meta-Zeile .c-text Freitext, eigene volle Zeile, gedämpft .row-actions Knopfzeile, eigene Zeile, rechtsbündig Leere Zellen fallen weg, damit keine Lücken im Meta-Streifen entstehen. Kind-Kombinatoren (`>`) sind Absicht: Tabellen INNERHALB einer Karte (Detail-Aufklappung in der SAP-Verbuchung) sollen die Regeln nur bekommen, wenn sie selbst `cards-sm` tragen. */ table.cards-sm, table.cards-sm > tbody, table.cards-sm > thead { display: block; } /* Sortieren bleibt auch als Karte möglich: der Tabellenkopf wird NICHT versteckt, sondern zur Chip-Leiste umgeflowt. Dadurch bleiben Klick-/Tastatur-Handler, `aria-sort` und die ↑/↓-Anzeige aus makeSortable unverändert erhalten – es braucht kein zweites Bedienelement, das mit dem Kopf synchron gehalten werden müsste. */ /* Nur Tabellen MIT Sortierung bekommen die Chip-Leiste. Ohne `makeSortable` (z. B. die Detail-Aufklappung der SAP-Verbuchung) gibt es keine klickbaren Köpfe – dort wäre eine Leiste „Sortieren:" eine Lüge, also entfällt der Kopf. `th.th-sortable` setzt makeSortable erst nach dem Rendern; die Regel greift danach automatisch. */ table.cards-sm > thead:not(:has(th.th-sortable)) { display: none; } table.cards-sm > thead > tr { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .45rem .5rem; background: var(--surface-2); } table.cards-sm > thead > tr::before { content: 'Sortieren:'; font-size: .7rem; color: var(--muted); margin-right: .1rem; } table.cards-sm > thead > tr > th { position: static; padding: .18rem .5rem; border: 1px solid var(--border); border-radius: 999px; font-size: .72rem; background: var(--bg); text-align: left; } table.cards-sm > thead > tr > th:empty { display: none; } /* Aktions-Spalte hat keinen Titel */ table.cards-sm > thead > tr > th.wrap { min-width: 0; max-width: none; } table.cards-sm > thead > tr > th[aria-sort] { color: var(--text); border-color: var(--accent); } table.cards-sm > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; padding: .7rem .75rem; border-bottom: 1px solid var(--border); } /* `hidden` MUSS gewinnen: die Aufklapp-Zeilen der SAP-Verbuchung sind `` und würden sonst durch `display:flex` sichtbar. */ table.cards-sm > tbody > tr[hidden] { display: none; } table.cards-sm > tbody > tr:last-child { border-bottom: none; } table.cards-sm > tbody > tr > td { border: none; padding: 0; white-space: normal; text-align: left; min-width: 0; } table.cards-sm > tbody > tr > td.c-title { flex: 1 1 100%; order: 1; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; /* Equipment/Auftrag sind Freitext */ } table.cards-sm > tbody > tr > td.c-meta { order: 2; color: var(--muted); } /* Ohne Spaltenkopf sind gleichartige Werte (zwei Datumsangaben, zwei Zahlen) in der Meta-Zeile nicht auseinanderzuhalten. `data-label` beschriftet sie – nur hier, die Tabellen-Ansicht am Desktop hat ja ihren Kopf. */ table.cards-sm > tbody > tr > td[data-label]::before { content: attr(data-label) ' '; color: var(--muted); font-size: .72rem; } table.cards-sm > tbody > tr > td.c-num { order: 2; font-variant-numeric: tabular-nums; } table.cards-sm > tbody > tr > td.c-text { flex: 1 1 100%; order: 3; max-width: none; color: var(--muted); overflow-wrap: anywhere; } table.cards-sm > tbody > tr > td.c-title:empty, table.cards-sm > tbody > tr > td.c-meta:empty, table.cards-sm > tbody > tr > td.c-num:empty, table.cards-sm > tbody > tr > td.c-text:empty { display: none; } table.cards-sm > tbody > tr > td.row-actions { flex: 1 1 100%; order: 4; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; margin-top: .1rem; } table.cards-sm > tbody > tr > td.row-actions .icon-btn + .icon-btn { margin-left: 0; } /* Zellen über die ganze Breite: Aufklapp-Zeilen, Zwischenüberschriften, die Einstellzeile je Mitarbeiter und der Leerzustand – alle per `colspan`. */ table.cards-sm > tbody > tr > td[colspan], table.cards-sm > tbody > tr > td.empty { flex: 1 1 100%; } table.cards-sm > tbody > tr > td.empty { padding: .8rem 0; } /* ---- Zeitkonto „Tage im Zeitraum": Spalten sparen statt Karten ---- Hier wäre eine Karte je Tag falsch: man vergleicht Netto/Soll/Gleit/Saldo SPALTENWEISE, und ein Monat ergäbe 20–30 Karten. Stattdessen fallen die zwei entbehrlichen Spalten weg, damit Gleit und Saldo ins Bild rücken – die waren bisher abgeschnitten, obwohl sie der Kern der Ansicht sind. „Tag" ist aus dem Datum ablesbar; „Anteil" ist nur bei gesetzter Abwesenheit sinnvoll und bleibt in der Tabelle „Erfasste Abwesenheiten" bedienbar. */ .zk-days th.z-weekday, .zk-days td.z-weekday, .zk-days th.z-fraction, .zk-days td.z-fraction { display: none; } /* Das Abwesenheits-Auswahlfeld richtete sich an seinem LÄNGSTEN Eintrag aus (Katalog der bezahlten Absenzen) und war dadurch 415 px breit – es allein schob Gleit und Saldo aus dem Bild. Gedeckelt; die volle Bezeichnung zeigt das Gerät beim Antippen ohnehin in der nativen Liste. */ /* Auf Mobil zählt jedes Pixel: die festen Breiten von oben werden gedeckelt. `.zk-days` hat sechs Spalten und braucht das engste Feld, `.zk-abs` nur vier. */ .zk-days td select { width: 5rem; } /* „Erfasste Abwesenheiten" bleibt auch auf Mobil eine Tabelle (Wunsch des Users). Damit die vier Spalten auf 350 px passen, werden die beiden Auswahlfelder gedeckelt und die Datums-Spalte gekürzt. Lange Bezeichnungen schneidet die Ellipse ab – die gängigen (Feiertag, Urlaub, Krankheit) stehen vollständig da, den Rest zeigt die aufgeklappte Liste. */ .zk-abs td select.yabw { width: 6.6rem; } /* „Feiertag"/„Urlaub" ganz lesbar */ .zk-abs td select.yabwf { width: 7.4rem; } /* „Ganzer Tag" ganz lesbar */ .zk-abs th, .zk-abs td { padding: .4rem .25rem; } /* Jahr und Wochentag weg: das Jahr steht in der Überschrift, der Wochentag ist entbehrlich – der „geplant"-Chip bleibt sichtbar. */ .zk-abs .d-year, .zk-abs .d-wd { display: none; } /* Acht Spalten auf 378 px: die letzten Pixel kommen aus der Polsterung, nicht aus noch schmaleren Feldern (gemessen 354 → 325 bei 350 sichtbar). */ .zk-days th, .zk-days td { padding: .4rem .3rem; } /* Jahreszahl im Datum weglassen: der Zeitraum steht in der Leiste darüber. */ .zk-days .d-year { display: none; } /* ---- Admin: Zeitkonto-Einstellzeile je Mitarbeiter ---- Jede Gruppe bekommt eine eigene volle Zeile; das Wochenraster teilt die Breite in sieben gleiche Spalten (statt fixer 3.3rem), die übrigen Felder liegen zu zweit nebeneinander, Speichern über die volle Breite. */ .uset { gap: .7rem; } .uset-week, .uset-fields { flex: 1 1 100%; } .uset-cap, .uset-sum { flex: 1 1 100%; padding-bottom: 0; } .wt-grid { width: 100%; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .2rem; } .wt-grid input { padding-left: .1rem; padding-right: .1rem; font-size: .85rem; } .uset-fields label { flex: 1 1 46%; } .uset-fields input, .uset-fields input[type="date"], .uset-fields input:not([type="date"]) { width: 100%; } .uset-save { flex: 1 1 100%; } /* Benutzer-Karte und ihre Einstellzeile sind EIN Block: die Trennlinie dazwischen liesse die Einstellungen sonst zum nächsten Namen gehören. */ table.cards-sm > tbody > tr:has(+ tr.user-settings) { border-bottom: none; padding-bottom: .2rem; } table.cards-sm > tbody > tr.user-settings { padding-top: 0; } } /* ---- Modals auf Mobil: mehr Höhe, Felder untereinander, volle Breite ---- */ @media (max-width: 640px) { .modal { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 18px 18px 0 0; } /* Zwei-Spalten-Feldzeilen (z. B. Start/Ende) untereinander statt nebeneinander */ .fld-row { flex-direction: column; gap: .8rem; } .form-grid { padding: .9rem; gap: .7rem; } .modal header { padding: .8rem .9rem; } /* Aktions-Buttons volle Breite, gut mit dem Daumen erreichbar */ .modal-actions { padding: .7rem .9rem; padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); gap: .6rem; } .modal-actions .btn { flex: 1 1 0; padding: .7rem; } /* Picker-Header umbrechen: Suchfeld volle Zeile, Rest darunter — kein Rechts-Scroll */ .modal header { flex-wrap: wrap; } .modal header .grow { flex: 1 1 100%; } } /* ---- Desktop: Sidebar dauerhaft offen (kein Hamburger) ---- */ @media (min-width: 1024px) { #menu-btn { display: none; } #nav-backdrop { display: none !important; } #main { padding-left: 248px; } .drawer { transform: none; width: 248px; z-index: 20; transition: none; } .drawer-head { position: sticky; top: 0; background: var(--surface); z-index: 1; } /* Marke steht schon im Sidebar-Kopf → Topbar-Marke entfällt, Status rechts */ .topbar .brand { display: none; } .topbar .status-cluster { margin-left: auto; } } /* ---- Zwei-Spalten-Karten (z. B. Zeitkonto: Erfassen + Statistik) ---- */ /* align-items:start – jede Karte nur so hoch wie ihr Inhalt; sonst würde die kürzere (Statistik) auf die Höhe der längeren gestreckt und stünde halb leer. */ .two-col { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; } @media (min-width: 760px) { .two-col { grid-template-columns: 1fr 1fr; } } /* ---- Zeitkonto: einheitliche Abschnitts-Überschriften und Planungsformular ---- */ /* Standalone-Überschriften zwischen den Blöcken bekommen denselben vertikalen Rhythmus (früher ad-hoc per Inline-Style mit uneinheitlichen Werten). */ h3.view-sec { margin: 1.4rem 0 .5rem; font-size: 1.05rem; } h3.view-sec:first-of-type { margin-top: .4rem; } /* Das „Art"-Dropdown listet lange Absenz-Bezeichnungen; ohne Deckelung setzt der Browser die Select-Breite auf die längste Option und sprengt die Toolbar-Zeile. Feste, zu den übrigen Feldern passende Breite → aufgeräumte, ausgerichtete Zeile. Bewusst per width (nicht flex-basis): in der mobilen Spalten-Anordnung der Toolbar wäre eine flex-basis die HÖHE des Felds; width bleibt achsenunabhängig und wird auf Mobil ohnehin von der 100%-Regel überschrieben. */ .abs-plan #pl-type { width: 14rem; max-width: 100%; } .abs-plan #pl-from, .abs-plan #pl-to { width: 9.5rem; } /* ---- Statistik: Tabs (Arbeitszeit / Equipment) ---- */ .tabbar { margin-bottom: 1rem; } /* ---- Statistik: Zeitraum-Navigation ---- */ .stat-toolbar { align-items: center; } .seg { display: inline-flex; } .seg-btn { border-radius: 0; box-shadow: none; } .seg .seg-btn:first-child { border-radius: 8px 0 0 8px; } .seg .seg-btn:last-child { border-radius: 0 8px 8px 0; } .seg .seg-btn + .seg-btn { border-left: 0; } .seg-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } .period-nav { display: inline-flex; align-items: center; gap: .5rem; } .period-label { min-width: 9.5ch; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; } .btn.icon-only { padding: .4rem .65rem; } /* ---- Statistik: Diagramme ---- */ .stat-results { position: relative; } .stat-charts { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1rem 0; } @media (min-width: 900px) { /* Donut + Gauge links kompakt, Zeit-Charts (Balken/Linie) rechts in voller Breite */ .stat-charts { grid-template-columns: minmax(300px, 360px) 1fr; } } .chart-card { margin-bottom: 0; } .stat-charts .span-2 { grid-column: 1 / -1; } .chart-title { margin: 0 0 .1rem; font-size: 1rem; } .chart-sub { font-size: .75rem; color: var(--muted); margin-bottom: .7rem; } .chart-sub .pos { color: var(--ok); } .chart-sub .neg { color: var(--danger); } .chart-scroll { overflow-x: auto; } .ch-svg { width: 100%; height: auto; display: block; max-height: 240px; } /* Equipment-Diagramme */ .chart-host { position: relative; } .eq-charts { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: .4rem 0 1rem; } @media (min-width: 760px) { .eq-charts { grid-template-columns: minmax(280px, 360px) 1fr; } } .rankbars { display: flex; flex-direction: column; gap: .2rem; } .rankbars .rb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Produktivitäts-Gauge */ .gauge-wrap { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } .gauge { width: 168px; height: auto; flex: 0 0 auto; } .ga-track { fill: none; stroke: var(--surface-2); stroke-width: 16; stroke-linecap: round; } .ga-val { fill: none; stroke: var(--accent-2); stroke-width: 16; stroke-linecap: round; } .ga-num { fill: var(--text); font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; } .donut-wrap { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } .donut { width: 148px; height: 148px; flex: 0 0 auto; } .donut-seg { transition: opacity .12s ease; cursor: default; } .donut-seg:hover { opacity: .8; } .donut-total { fill: var(--text); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .donut-sub { fill: var(--muted); font-size: 10px; letter-spacing: .04em; } .chart-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; flex: 1 1 150px; font-size: .8rem; } .chart-legend li { display: flex; align-items: center; gap: .5rem; } .chart-legend .sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; } .chart-legend .lg-name { flex: 1 1 auto; } .chart-legend .lg-val { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .ch-grid { stroke: var(--border); stroke-width: 1; opacity: .4; } .ch-axis { stroke: var(--border); stroke-width: 1; } .ch-zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; } .ch-ytick, .ch-xtick { fill: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; } .ch-bar { fill: var(--accent-2); transition: opacity .12s ease; } .ch-bar:hover { opacity: .8; } .ch-line { fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .ch-area { fill: var(--accent-2); opacity: .12; stroke: none; } .ch-dot { fill: var(--accent-2); } .ch-dot.last { stroke: var(--surface); stroke-width: 2; } .chart-tip { position: absolute; transform: translate(-50%, -145%); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .25rem .5rem; font-size: .72rem; white-space: nowrap; pointer-events: none; z-index: 5; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); } /* ---- Rapport (Punkt 10) -------------------------------------------------- */ .rp-sheet { margin-bottom: 1.6rem; } .rp-head { margin-bottom: .6rem; } .rp-head h3 { margin: 0 0 .15rem; } .rp-meta { font-size: .8rem; color: var(--muted); } .rp-sub { margin: 1.1rem 0 .4rem; font-size: .95rem; } .rp-table { width: 100%; border-collapse: collapse; } .rp-table .pos { color: var(--ok); } .rp-table .neg { color: var(--danger); } .rp-table tfoot th { border-top: 2px solid var(--border); } /* Buchungszeilen gehören optisch zum Tag darüber, nicht in dessen Spaltenraster. */ .rp-booking td { font-size: .8rem; color: var(--muted); border-top: none; } .rp-indent { padding-left: 1.6rem !important; } .rp-day td { font-weight: 600; } .rp-sign { margin-top: 1rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; } .rp-sign-line { border-top: 1px solid var(--border); min-width: 16rem; padding-top: .3rem; font-size: .78rem; color: var(--muted); } /* ---- Druck (Rapport als PDF) --------------------------------------------- */ @media print { /* Bedienelemente gehören nicht aufs Papier. */ .topbar, .drawer, .nav-backdrop, .no-print, .stat-toolbar, .btn, .icon-btn { display: none !important; } /* Feste helle Farben: das Dunkel-Thema würde sonst als schwarze Fläche gedruckt – unlesbar und ein Tonerfresser. */ :root, body, #main, #view { background: #fff !important; color: #000 !important; } .rp-meta, .rp-booking td, .rp-sign-line { color: #333 !important; } .rp-table .pos, .rp-table .neg, .rp-sign .pos, .rp-sign .neg { color: #000 !important; } .table-wrap { overflow: visible !important; border: none !important; border-radius: 0 !important; } .rp-table { font-size: 9.5pt; } .rp-table th, .rp-table td { border-bottom: 1px solid #bbb; padding: .18rem .3rem; } .rp-table thead th { border-bottom: 1.5px solid #000; } /* Kopfzeile auf jeder Folgeseite wiederholen. */ .rp-table thead { display: table-header-group; } /* Einen Tag nicht von seinen Buchungen trennen. */ .rp-day, .rp-booking, .rp-sign { break-inside: avoid; page-break-inside: avoid; } /* Je Mitarbeiter eine neue Seite (der erste Rapport bekommt kein rp-break). */ .rp-break { break-before: page; page-break-before: always; } .rp-sheet { margin-bottom: 0; } @page { margin: 14mm 12mm; } } /* --- SAP-Import ---------------------------------------------------------- */ .import-controls { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: flex-end; margin: .6rem 0; } .import-controls label { margin: 0; } /* Bereits vorhandene Zeilen: ausgegraut, nicht wählbar. */ tr.row-exists td { opacity: .55; } tr.row-exists td:nth-child(2) { text-decoration: line-through; } tr.row-skip td { opacity: .5; font-style: italic; }