/* * EnoBill-Bausteine auf Basis von eno-tokens.css. Nur Klassennamen, keine * Werte hier hart codieren - Farben/Abstaende/Radien kommen ausschliesslich * aus den Tokens, damit ein Wechsel dort automatisch ueberall greift. * * Die eno-topbar/eno-wordmark-Klassennamen sind bewusst identisch zu denen * in /var/www/abrechnung (pb277q), damit das Vokabular ueber alle Dinlok- * Anwendungen hinweg gleich bleibt, auch wenn die Umsetzung hier in * eigenem CSS statt Bootstrap-Overrides erfolgt. */ *{box-sizing:border-box} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-core); font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; } a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-hover)} /* ═══ Topbar ═══════════════════════════════════════════════════════════ */ .eno-topbar{ background:var(--surface); border-bottom:var(--hairline) solid var(--line); min-height:var(--topbar-h); } .eno-topbar-inner{ max-width:var(--content-max-width);margin:0 auto;padding:0 var(--pad-screen-x); min-height:var(--topbar-h); display:flex;align-items:center;gap:var(--gap-xl); } .eno-wordmark{ /* Traegt seit der Wortmarke ein Inline-SVG statt Text. color bleibt gesetzt, weil der Schriftzug "Eno" darin auf currentColor steht und so dem hellen wie dem dunklen Thema folgt. */ display:inline-flex;align-items:center;flex:0 0 auto;color:var(--text); } .eno-wordmark svg{display:block;height:32px;width:auto} .eno-wordmark:hover{opacity:.85} .eno-nav{display:flex;gap:var(--gap-xs);flex:1 1 auto} .eno-nav a{ font-size:var(--fs-body);color:var(--muted);padding:8px 10px;border-radius:var(--r-button); transition:background .12s linear,color .12s linear;font-weight:500;white-space:nowrap; } .eno-nav a:hover{color:var(--text);background:var(--surface2)} .eno-nav a.aktiv{color:var(--accent);background:var(--accent-soft);font-weight:600} .eno-nav a.eno-nav-verwaltung{margin-left:auto} .eno-topbar-icons{display:flex;gap:var(--gap-xs)} .eno-icon-btn{ width:32px;height:32px;border-radius:var(--r-button);display:inline-flex; align-items:center;justify-content:center;color:var(--muted);border:var(--hairline) solid transparent; font-size:16px;font-weight:600;line-height:1; } .eno-icon-btn:hover{background:var(--surface2);color:var(--text)} /* ═══ Seitenkopf ═══════════════════════════════════════════════════════ */ .eno-page-header{ max-width:var(--content-max-width);margin:0 auto;padding:var(--pad-screen-y) var(--pad-screen-x) 0; display:flex;align-items:center;justify-content:space-between;gap:var(--gap-lg);flex-wrap:wrap; } .eno-page-header h1{ margin:0;font-size:var(--fs-screen-title);font-weight:var(--fw-screen-title);color:var(--ink); } .eno-page-header .untertitel{color:var(--muted);font-size:var(--fs-meta);font-weight:400;margin-left:8px} .eno-page-header .aktionen{display:flex;gap:var(--gap-sm)} main{max-width:var(--content-max-width);margin:0 auto;padding:var(--pad-screen-y) var(--pad-screen-x) var(--pad-screen-bottom); display:grid;gap:var(--gap-2xl)} /* ═══ Karten ═══════════════════════════════════════════════════════════ */ .card{background:var(--surface);border:var(--hairline) solid var(--line);border-radius:var(--r-card-lg); padding:var(--pad-card);min-width:0} .card h2{margin:0 0 var(--gap-md);font-size:var(--fs-section);font-weight:var(--fw-section);color:var(--ink)} /* Dezenter Aufklapper (details/summary) - z.B. Beleg-Upload. Der sichtbare Knopf dafuer sitzt im Seitenkopf (.eno-page-header .aktionen, wie bei den anderen Seiten); dieses summary hier ist nur ein leiser Text-Trigger fuer alle, die schon zur Liste heruntergescrollt sind - keine zweite grosse Schaltflaeche. Oeffnet nativ per Browser, wenn ein Link auf #id zeigt (Fragment-Ziel in einem details -> Browser setzt open von selbst, kein JS noetig). */ details.beleg-hochladen summary{ list-style:none;width:max-content;color:var(--muted);font-size:var(--fs-meta);cursor:pointer; } details.beleg-hochladen summary:hover{color:var(--accent)} details.beleg-hochladen summary::-webkit-details-marker{display:none} details.beleg-hochladen summary::marker{display:none} details.beleg-hochladen[open] summary{margin-bottom:var(--gap-lg)} details.beleg-hochladen form.card{margin:0} .card .hinweis{margin:0 0 var(--gap-lg);color:var(--muted);font-size:var(--fs-meta)} .leer{color:var(--muted);padding:8px 0} .inaktiv{color:var(--faint)} /* ═══ Belegliste: Suche + Zeitraum ══════════════════════════════════════ */ .beleg-suche{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:14px} .beleg-suche input[type=text]{flex:0 1 220px;width:220px} .beleg-suche input,.beleg-suche select{ font:inherit;font-size:var(--fs-meta);padding:6px 9px;border-radius:var(--r-input); border:var(--hairline) solid var(--line);background:var(--surface2);color:var(--text); } .beleg-suche input::placeholder{color:var(--faint)} .beleg-suche input:focus,.beleg-suche select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 .15rem var(--accent-soft)} .beleg-suche button,.beleg-suche a{ font-size:var(--fs-meta);padding:6px 10px;border-radius:var(--r-input); border:var(--hairline) solid var(--line);background:none;color:var(--muted); cursor:pointer;font-family:inherit;text-decoration:none; } .beleg-suche button:hover,.beleg-suche a:hover{color:var(--accent);border-color:var(--accent)} .zeitraum-von-bis{display:flex;align-items:center;gap:6px;color:var(--muted)} .zeitraum-nav{display:inline-flex;align-items:center;gap:4px} .zeitraum-pfeil{padding:5px 8px !important;line-height:1} .zeitraum-anzeige{font-size:var(--fs-meta);color:var(--muted);white-space:nowrap} /* ═══ Belegliste: frei waehlbare Spalten ═══════════════════════════════ */ .spalten-auswahl{margin-bottom:12px} .spalten-auswahl summary{list-style:none;width:max-content;color:var(--muted);font-size:var(--fs-meta); font-weight:400;cursor:pointer} .spalten-auswahl summary:hover{color:var(--accent)} .spalten-auswahl summary::-webkit-details-marker{display:none} .spalten-auswahl summary::marker{display:none} .spalten-optionen{ display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px;padding:12px 14px; border:var(--hairline) solid var(--line);border-radius:var(--r-input);background:var(--surface2); } .spalten-optionen label{display:flex;align-items:flex-start;gap:6px;font-size:var(--fs-meta);color:var(--text);cursor:pointer} .spalten-optionen input{width:auto;margin-top:2px} /* Checkboxen app-weit: der native Browser-Standard ist oft winzig und je nach Betriebssystem/Theme kaum zu erkennen (duenner grauer Rahmen auf hellem Grund) - deshalb feste Groesse + Akzentfarbe statt Browser-Default. */ input[type=checkbox]{width:16px;height:16px;flex-shrink:0;accent-color:var(--accent);cursor:pointer} /* ═══ Buttons ══════════════════════════════════════════════════════════ */ .btn{ display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-button);font-size:var(--fs-button); border-radius:var(--r-button);padding:var(--pad-button-y) var(--pad-button-x);border:var(--hairline) solid transparent; cursor:pointer;font-family:inherit;transition:background .12s linear,color .12s linear,border-color .12s linear; } .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)} .btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-contrast)} .btn-outline{color:var(--accent);border-color:var(--accent);background:transparent} .btn-outline:hover{background:var(--accent-soft);color:var(--accent)} /* ═══ Tabellen ═════════════════════════════════════════════════════════ */ table{width:100%;border-collapse:collapse;font-size:var(--fs-body)} th,td{text-align:left;padding:var(--pad-row-y) var(--pad-row-x) var(--pad-row-y) 0;border-bottom:var(--hairline) solid var(--line)} th{ color:var(--muted);font-weight:var(--fw-overline);font-size:var(--fs-overline); text-transform:uppercase;letter-spacing:var(--ls-overline);background:var(--surface2); } tr:last-child td{border-bottom:none} .spalte-sortieren{color:inherit;text-decoration:none;white-space:nowrap} .spalte-sortieren:hover{color:var(--accent)} .spalte-sortieren.aktiv{color:var(--accent)} /* Uber Business: Fahrt hat nur eine Seite (Position ohne Rechnung, oder Rechnung ohne passende Position) - siehe belege.php $nurEineSeite. */ tr.beleg-nur-eine-seite td{background:var(--due-bg)} .farb-chip{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px; border:var(--hairline) solid var(--line);vertical-align:middle} .slug{color:var(--muted);font-size:var(--fs-meta)} .keine-rolle{color:var(--faint);font-style:italic} /* ═══ Uber Business: verwandte Belege derselben Fahrt ═══════════════════ */ .verwandte-belege{display:flex;flex-direction:column;gap:4px} .verwandter-beleg{ display:flex;align-items:center;gap:8px;padding:6px 10px;border:var(--hairline) solid var(--line); border-radius:var(--r-input);background:var(--surface2);color:var(--text);font-size:var(--fs-meta); text-decoration:none; } .verwandter-beleg:hover{border-color:var(--accent);color:var(--accent)} /* ═══ Formulare ════════════════════════════════════════════════════════ */ form.eno-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-lg) var(--gap-lg)} form.eno-form .voll{grid-column:1 / -1} form.eno-form label{display:grid;gap:4px;font-size:var(--fs-meta);color:var(--muted);min-width:0} form.eno-form input,form.eno-form select,form.eno-form textarea{ width:100%;font:inherit;font-size:var(--fs-body);padding:8px 10px;border-radius:var(--r-input); border:var(--hairline) solid var(--line);background:var(--surface);color:var(--text); } @media (max-width:520px){form.eno-form{grid-template-columns:1fr}} form.eno-form input[type=color]{padding:2px;height:38px} form.eno-form input:focus,form.eno-form textarea:focus{ outline:none;border-color:var(--accent);box-shadow:0 0 0 .15rem var(--accent-soft); } form.eno-form textarea{resize:vertical;min-height:60px} form.eno-form .rollen-auswahl{grid-column:1 / -1;display:grid;gap:8px;border:var(--hairline) solid var(--line); border-radius:var(--r-input);padding:12px 14px;background:var(--surface2)} form.eno-form .rolle-zeile{display:flex;align-items:flex-start;gap:10px} form.eno-form .rolle-zeile input{width:auto;margin-top:3px} /* Einzelnes Checkbox-Feld in einer Zeile (z.B. "Privat ausgelegt") - ohne diese Klasse gewinnt "form.eno-form label{display:grid}" gegen ein inline flex-direction:row (das ohne display:flex wirkungslos ist) und die Checkbox landet ueber statt neben dem Text, siehe beleg-detail.php. */ form.eno-form label.checkbox-zeile{display:flex !important;flex-direction:row;align-items:flex-start;gap:8px} form.eno-form label.checkbox-zeile input{width:auto;margin-top:2px} form.eno-form .rolle-zeile b{font-weight:600} form.eno-form .rolle-zeile span{display:block;color:var(--muted);font-size:var(--fs-meta)} .fehler{ grid-column:1 / -1;background:var(--overdue-bg);border:var(--hairline) solid var(--overdue-fg); border-radius:var(--r-input);padding:10px 14px;font-size:var(--fs-meta);color:var(--overdue-fg); } .fehler ul{margin:4px 0 0;padding-left:18px} /* ═══ Dashboard: KPI-Kacheln ═══════════════════════════════════════════ */ .stat-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--gap-lg)} .stat-lbl{ font-size:var(--fs-overline);font-weight:var(--fw-overline);letter-spacing:var(--ls-overline); text-transform:uppercase;color:var(--muted); } .stat-num{font-size:var(--fs-kpi);font-weight:var(--fw-kpi);color:var(--ink);line-height:1.1;margin-top:4px} /* ═══ Dashboard: Karten mit Kopfzeile ══════════════════════════════════ */ .card-kopf{display:flex;justify-content:space-between;align-items:center;margin:-4px -4px 12px; padding:0 4px 12px;border-bottom:var(--hairline) solid var(--line)} .card-kopf strong{font-size:var(--fs-card-title)} .card-kopf .anzahl{color:var(--muted);font-size:var(--fs-meta)} /* ═══ Dashboard: Notizenliste ══════════════════════════════════════════ */ .notiz-liste{display:flex;flex-direction:column} .notiz-zeile{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:var(--hairline) solid var(--line)} .notiz-zeile:last-child{border-bottom:none} .notiz-text{flex:1 1 auto} .notiz-meta{color:var(--muted);font-size:var(--fs-meta);margin-top:2px} .notiz-erledigen{ width:20px;height:20px;border-radius:50%;border:var(--hairline) solid var(--line); background:var(--surface);cursor:pointer;flex:0 0 auto;margin-top:2px;padding:0; } .notiz-erledigen:hover{border-color:var(--accent)} .notiz-loeschen{ border:none;background:none;color:var(--faint);cursor:pointer;font-size:14px;line-height:1; padding:2px 4px;flex:0 0 auto; } .notiz-loeschen:hover{color:var(--overdue-fg)} .notiz-form{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:var(--hairline) solid var(--line)} .notiz-form input{ flex:1 1 auto;font:inherit;font-size:var(--fs-body);padding:8px 10px;border-radius:var(--r-input); border:var(--hairline) solid var(--line);background:var(--surface);color:var(--text); } .notiz-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 .15rem var(--accent-soft)} details.notiz-erledigt-details{margin-top:10px} details.notiz-erledigt-details summary{color:var(--muted);font-size:var(--fs-meta);cursor:pointer} details.notiz-erledigt-details ul{list-style:none;margin:8px 0 0;padding:0} details.notiz-erledigt-details li{ display:flex;justify-content:space-between;gap:8px;padding:6px 0; border-bottom:var(--hairline) solid var(--line);color:var(--muted);font-size:var(--fs-meta); } details.notiz-erledigt-details li span.erledigt-text{text-decoration:line-through} /* ═══ Schnellzugriff ═══════════════════════════════════════════════════ */ .schnellzugriff{display:flex;gap:var(--gap-sm);flex-wrap:wrap} /* ═══ Belege: Seiten-Navigation links ══════════════════════════════════ */ .beleg-layout{display:flex;gap:var(--gap-2xl);align-items:flex-start} .beleg-sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);display:flex;flex-direction:column;gap:2px} .beleg-sidebar a{ padding:8px 10px;border-radius:var(--r-button);color:var(--muted);font-size:var(--fs-body); display:flex;justify-content:space-between;align-items:center;gap:6px; } .beleg-sidebar a:hover{background:var(--surface2);color:var(--text)} .beleg-sidebar a.aktiv{background:var(--accent-soft);color:var(--accent);font-weight:600} .beleg-sidebar .zaehler{background:var(--surface2);color:var(--muted);font-size:11px;padding:1px 7px;border-radius:var(--r-chip)} .beleg-sidebar a.aktiv .zaehler{background:var(--surface);color:var(--accent)} .beleg-inhalt{flex:1 1 auto;min-width:0;display:grid;gap:var(--gap-lg)} .beleg-dropzone{ border:2px dashed var(--line);border-radius:var(--r-card);padding:20px;text-align:center; color:var(--muted);background:var(--surface2);font-size:var(--fs-meta);margin-bottom:6px; } @media (max-width:720px){.beleg-layout{flex-direction:column}.beleg-sidebar{width:100%;flex-direction:row;flex-wrap:wrap}} /* ═══ Beleg-Detail: Vorschau + Kacheln + Pfeile ════════════════════════ */ /* Nur auf dieser Seite: Topbar/Kopfzeile behalten ihre natuerliche Hoehe, main faellt genau auf den Rest des Sichtfensters - dadurch scrollt nicht mehr die ganze Seite. */ body.beleg-detail-seite{height:100vh;overflow:hidden;display:flex;flex-direction:column} body.beleg-detail-seite .eno-topbar, body.beleg-detail-seite .eno-page-header{flex:0 0 auto} body.beleg-detail-seite main{flex:1 1 auto;min-height:0;overflow:hidden} /* .eno-page-header und main haben beide max-width:var(--content-max-width) + margin:0 auto. In einem Flex-Column-Elternteil (body) fuehrt margin:auto dazu, dass sich das Element auf die Breite seines INHALTS schrumpft, statt sich bis max-width auszudehnen - je nach Inhalt des jeweiligen Belegs (Textmenge, Felder) also mal schmaler, mal breiter. width:100% erzwingt stattdessen immer die volle verfuegbare Breite (bis zur max-width-Grenze), unabhaengig vom Inhalt. */ body.beleg-detail-seite .eno-page-header, body.beleg-detail-seite main{width:100%} /* Zweispaltig bleibt es bei JEDER Fensterbreite (wie im Vorbild) - kein Umschalten auf eine gestapelte Ansicht mehr. Ein Umschalten hatte hier vorher zu kollabierter Hoehe gefuehrt (Zeilenhoehe eines mehrzeiligen Grids haengt von genau dem Element ab, das gleichzeitig auf diese Zeilenhoehe warten sollte - ein Zirkelbezug). */ .beleg-detail-layout{display:grid;grid-template-columns:1fr 380px;gap:var(--gap-2xl);align-items:start} /* Feste, direkt aus der Fensterhoehe berechnete Werte statt einer ueber mehrere Flex-/Grid-Ebenen vererbten Prozenthoehe - ein iframe kann leer haengen bleiben, wenn er beim allerersten Layout-Durchlauf auch nur kurz 0 Hoehe hatte (bekannte Eigenart eingebetteter PDF-Betrachter). Ein direkter calc()-Wert steht sofort fest, ohne mehrstufige Vererbung, die dieses Risiko hatte. Die Werte sind grosszuegig geschaetzt (Topbar + Kopfzeile + Rand oben/unten bzw. Beschriftung+Kacheln unter der Vorschau) - lieber ein paar Pixel Luft/eigenes Scrollen in der Spalte als Kollaps. */ body.beleg-detail-seite .beleg-vorschau{max-height:calc(100vh - 130px);overflow-y:auto} body.beleg-detail-seite .beleg-vorschau-rahmen{height:calc(100vh - 260px);min-height:300px} body.beleg-detail-seite .beleg-detail-layout > .card{height:calc(100vh - 160px);overflow-y:auto} /* position:absolute+inset statt Prozent-Hoehe fuers Bild - bindet direkt an .beleg-vorschau-rahmen (schon position:relative, mit fester eigener Hoehe via calc()), unabhaengig von jeglicher Hoehen-Vererbung. */ body.beleg-detail-seite .beleg-vorschau-rahmen img{ position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0; object-fit:contain; } /* PDFs werden nicht mehr dem nativen Browser-PDF-Betrachter ueberlassen (per