/* FlowSuite — Salon Design System
Custom styles that Tailwind CDN cannot handle. Token reference: CLAUDE.md. */
/* ── Self-hosted fonts (OFL-licensed) ───────────────────────────── */
@font-face {
font-family: 'Geist';
src: url("/static/fonts/Geist-Regular.c7c6c5403943.woff2") format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Geist';
src: url("/static/fonts/Geist-Medium.217fdb926a60.woff2") format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Geist Mono';
src: url("/static/fonts/GeistMono-Regular.aedf2d1c7257.woff2") format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Geist Mono';
src: url("/static/fonts/GeistMono-Medium.7bf7a1dfc74d.woff2") format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* ── Body baseline ──────────────────────────────────────────────── */
html, body {
font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
}
/* Theme-aware baseline (fs-Tokens schalten in .dark). Die Tailwind-Utility
bg-fs-bg/text-fs-fg auf gewinnt per Spezifitaet, dies ist der
robuste Fallback fuer den Moment vor Stylesheet-Parse + Druck/Mail. */
body {
background: var(--color-fs-bg, #F6F1EA);
color: var(--color-fs-fg, #241B14);
}
/* ── Salon utility classes ──────────────────────────────────────── */
.tnum {
font-variant-numeric: tabular-nums;
}
.placeholder-stripes {
background-image: repeating-linear-gradient(
135deg,
rgba(0, 0, 0, 0.04) 0,
rgba(0, 0, 0, 0.04) 1px,
transparent 1px,
transparent 8px
);
}
.sidebar-transition {
transition: width 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav-label-transition {
transition: opacity 160ms ease;
white-space: nowrap;
overflow: hidden;
}
/* ── Alpine.js cloak (hide elements until Alpine initializes) ──── */
[x-cloak] {
display: none !important;
}
/* ── Sidebar scrollbar ──────────────────────────────────────────
War bis 2026-07-30 ein 4px breiter Balken in #3A2C1F — einem
Salon-Braun aus dem retired Design, das auf der dunklen Leiste
praktisch unsichtbar blieb. Damit gab es kein Signal, dass unter
der Fensterkante noch Einträge kommen: gemessen lagen 19 von 38
dort. Jetzt 8px in einem Ton, der sich vom Sidebar-Hintergrund
abhebt.
Das Sichtbarmachen ist die RÜCKFALLLINIE, nicht die Lösung — die
trägt der Gruppen-Zuschnitt in _sidebar.html. Ein Menü, in dem man
scrollen muss, um ein Modul zu finden, ist auch mit gutem Balken
kaputt. */
.sidebar-scroll {
scrollbar-width: thin;
scrollbar-color: var(--color-fs-border-strong, #6B5B4D) transparent;
}
.sidebar-scroll::-webkit-scrollbar {
width: 8px;
}
.sidebar-scroll::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
background-color: var(--color-fs-border-strong, #6B5B4D);
border-radius: 4px;
/* Rand in Sidebar-Farbe: lässt den Balken schlanker wirken, ohne
ihn wieder unsichtbar zu machen. */
border: 2px solid var(--color-fs-sidebar-bg, #1A1613);
background-clip: padding-box;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
background-color: var(--color-fs-fg-hint, #8A7B6D);
}
/* Verlauf am unteren Rand der Navigation: zeigt an, dass unterhalb
der sichtbaren Fläche noch etwas kommt. Wird von Alpine nur dann
eingeblendet, wenn der Inhalt wirklich überläuft — ein dauerhaft
sichtbarer Verlauf würde den letzten Eintrag verwaschen, obwohl
nichts folgt. */
.sidebar-fade {
background: linear-gradient(
to bottom,
transparent,
var(--color-fs-sidebar-bg, #1A1613)
);
}
/* ── Hover-only behaviours (skip on touch devices) ─────────────── */
@media (hover: none) {
aside[data-sidebar] {
pointer-events: auto;
}
}
/* ── Auth form inputs ──────────────────────────────────────────── */
/* Styles for Django-rendered form widgets inside .auth-form containers.
Required because {{ field }} outputs raw without Tailwind classes,
and CDN Tailwind does not support @apply. */
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="number"],
.auth-form input[type="tel"],
.auth-form input[type="url"],
.auth-form select,
.auth-form textarea,
.auth-input {
width: 100%;
border-radius: 0.5rem;
border: 1px solid var(--color-fs-input-border);
padding: 0.625rem 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: var(--color-fs-fg);
background-color: var(--color-fs-surface);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-form input::placeholder,
.auth-input::placeholder {
color: var(--color-fs-fg-hint);
}
.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus,
.auth-input:focus {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-fs-tenant) 30%, transparent);
border-color: var(--color-fs-tenant);
}
/* Error state */
.auth-form .errorlist + input,
.auth-form input.is-invalid {
border-color: var(--color-fs-danger-500);
}
.auth-form .errorlist + input:focus,
.auth-form input.is-invalid:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-fs-danger-500) 30%, transparent);
border-color: var(--color-fs-danger-500);
}
/* Django error list styling */
.auth-form .errorlist {
list-style: none;
padding: 0;
margin: 0 0 0.25rem 0;
}
.auth-form .errorlist li {
font-size: 0.875rem;
color: var(--color-fs-danger-500);
}
/* ── Global form inputs (all app forms inside main content) ────── */
/* Styles for Django-rendered form widgets inside .
Works alongside @tailwindcss/forms plugin reset.
Scoped to main to avoid interference with admin panel, sidebar, cluster. */
main input[type="text"],
main input[type="email"],
main input[type="password"],
main input[type="number"],
main input[type="tel"],
main input[type="url"],
main input[type="search"],
main input[type="date"],
main select,
main textarea {
width: 100%;
border-radius: 0.5rem;
border: 1px solid var(--color-fs-input-border);
padding: 0.625rem 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: var(--color-fs-fg);
background-color: var(--color-fs-surface);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Schmale Zahlen-/Mengeneingaben (Minuten am Werktisch, Menge in einer Zeile).
Die Feldregel darueber setzt `width: 100%` ueber einen Typ-Selektor
(Spezifitaet 0,0,1,1). Eine einzelne Utility-Klasse am Element (`w-20`,
Spezifitaet 0,0,1,0) verliert dagegen — das Feld wird trotzdem breit, und
zwar lautlos: nichts schlaegt fehl, die Zeile bricht nur um. Deshalb hier
mit ausreichender Spezifitaet statt am Element. */
main input.eingabe-schmal {
width: 5.5rem;
}
/* ── Terminal: Finger statt Maus ────────────────────────────────────────
Die Feldregel oben gilt fuer die ganze App und setzt `font-size: 0.875rem`
sowie ein Padding, das auf etwa 38 px Hoehe hinauslaeuft. Am Tablet ist das
zu klein: Doc 07 (Terminal-PWA) macht **44 px Trefferflaeche und eine
Schriftstufe groesser** zur Auflage — und genau diese Auflage wurde an
Eingabefeldern bisher lautlos unterlaufen. Eine Utility am Element
(`text-base`, Spezifitaet 0,0,1,0) verliert gegen den Typ-Selektor der
App-Regel (0,0,1,1), ohne dass etwas fehlschlaegt; dieselbe Mechanik wie bei
`eingabe-schmal` eine Regel weiter oben.
Gefunden beim Bau der Zaehlflaeche (W-6) — der ersten Terminal-Flaeche,
deren Hauptbedienelement ein Eingabefeld ist (die Werkbank arbeitet mit
Knoepfen). Die Regel wirkt auf JEDE Terminal-Flaeche, also auch rueckwirkend
auf die Werkbank; ausserhalb von `.terminal-flaeche` aendert sie nichts.
Bewusst KEINE `width` hier: die Breite bleibt Sache von `eingabe-schmal`
bzw. der App-Regel, sonst haette diese Regel zwei Zustaendigkeiten. */
main.terminal-flaeche input[type="text"],
main.terminal-flaeche input[type="email"],
main.terminal-flaeche input[type="password"],
main.terminal-flaeche input[type="number"],
main.terminal-flaeche input[type="tel"],
main.terminal-flaeche input[type="url"],
main.terminal-flaeche input[type="search"],
main.terminal-flaeche input[type="date"],
main.terminal-flaeche select,
main.terminal-flaeche textarea {
min-height: 44px;
font-size: 1rem;
line-height: 1.5rem;
}
/* Suchfelder in Werkzeugleisten. Sie sollen die Zeile nicht auffuellen, aber
auch nicht so schmal sein, dass man den Suchbegriff nicht mehr liest. Auf
schmalen Geraeten faellt die Breite wieder auf die volle Zeile zurueck. */
main input.eingabe-suche {
width: 14rem;
max-width: 100%;
}
@media (max-width: 640px) {
main input.eingabe-suche {
width: 10rem;
}
}
main input::placeholder,
main textarea::placeholder {
color: var(--color-fs-fg-hint);
}
/* Ein Platzhalter in einem Zahlenfeld darf nie wie ein Wert aussehen (TL-347).
Im Beleg stand grau eine „19" als Platzhalter, direkt daneben eine „1" als
echter Wert — auf dem Bildschirm nicht zu unterscheiden. Wer die Zeile so
speicherte, bekam sie mit 0,00 € heraus, und ab dann JEDE weitere Position
ebenfalls. Die Kursivstellung ist das Merkmal, das die Farbe allein nicht
liefert: Grau ist auch die Farbe eines deaktivierten Feldes. */
main input[inputmode="decimal"]::placeholder,
main input[inputmode="numeric"]::placeholder,
main input[type="number"]::placeholder {
font-style: italic;
opacity: 0.75;
}
main input:focus,
main select:focus,
main textarea:focus {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-fs-tenant) 30%, transparent);
border-color: var(--color-fs-tenant);
}
/* Checkboxes */
main input[type="checkbox"] {
width: 1rem;
height: 1rem;
border-radius: 0.25rem;
border: 1px solid var(--color-fs-input-border);
accent-color: var(--color-fs-tenant);
cursor: pointer;
}
main input[type="checkbox"]:focus {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-fs-tenant) 30%, transparent);
}
main input[type="checkbox"]:checked {
background-color: var(--color-fs-tenant);
border-color: var(--color-fs-tenant);
}
/* Error states for form fields */
main .errorlist + input,
main .errorlist + select,
main .errorlist + textarea {
border-color: var(--color-fs-danger-500);
}
main .errorlist + input:focus,
main .errorlist + select:focus,
main .errorlist + textarea:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-fs-danger-500) 30%, transparent);
border-color: var(--color-fs-danger-500);
}
main .errorlist {
list-style: none;
padding: 0;
margin: 0 0 0.25rem 0;
}
main .errorlist li {
font-size: 0.875rem;
color: var(--color-fs-danger-500);
}
/* ── Lead-Board Drag & Drop (SortableJS) ────────────────────────── */
/* Platzhalter-Karte während des Ziehens (ghostClass). */
.lead-card-ghost {
opacity: 0.4;
}
/* Aktive Spalte hebt sich beim Drüberziehen leicht ab. */
.lead-column.sortable-drag-over {
background-color: var(--color-fs-surface-sunken);
}
/* ── Klebende Aktionsspalte einer Liste (U-26) ──────────────────── */
/*
* Die Spalte mit dem Zeilenmenü bleibt am rechten Rand stehen, wenn die
* Tabelle waagerecht rollt. Ohne sie ist das Menü genau dann weg, wenn man es
* am ehesten braucht: bei einer breiten Tabelle auf einem schmalen Schirm.
* Beim Vorbild (zeitgenau) steht es bei x = 1163 fest.
*
* WARUM ALS CSS-KLASSE UND NICHT ALS SECHS TAILWIND-KLASSEN JE LISTE:
* Es sind sechs zusammengehörige Angaben (Haftung, Rand, Ebene, Hintergrund
* hell, Hintergrund beim Überfahren, Trennlinie). Sechsmal abgeschrieben
* driften sie — und der Fehler wäre unauffällig: ein durchscheinender
* Hintergrund fällt erst auf, wenn tatsächlich gerollt wird. Eine Klasse gibt
* dem Guard außerdem einen Anker, an dem er JEDE Liste prüfen kann.
*
* DER HINTERGRUND IST PFLICHT, NICHT SCHMUCK: Eine klebende Zelle ohne eigene
* Fläche lässt den darunter wegrollenden Zelleninhalt durchscheinen.
* `var(--color-fs-*)` schaltet mit dem Dunkelmodus um — rohe Farben täten das
* nicht.
*/
.zeilenmenue-kopf,
.zeilenmenue-zelle {
position: sticky;
right: 0;
z-index: 10;
border-left: 1px solid var(--color-fs-border);
}
.zeilenmenue-kopf {
background-color: var(--color-fs-surface-sunken);
}
.zeilenmenue-zelle {
background-color: var(--color-fs-surface);
}
/*
* Die Zeile färbt sich beim Überfahren; die klebende Zelle trägt ihre eigene
* Fläche und bekäme davon nichts mit — sie bliebe als heller Block in einer
* eingefärbten Zeile stehen.
*/
tr:hover > .zeilenmenue-zelle {
background-color: var(--color-fs-surface-sunken);
}
/*
* Ein geöffnetes Menü muss über den Zeilen DARUNTER liegen. Alle klebenden
* Zellen teilen sich `z-index: 10`; bei Gleichstand gewinnt die spätere im
* Dokument — das Menü der ersten Zeile verschwände also hinter der zweiten.
* `:has()` hebt genau die Zelle an, deren Menü offen ist.
*/
.zeilenmenue-zelle:has(details[open]) {
z-index: 20;
}
/* ── Print styles ───────────────────────────────────────────────── */
@media print {
aside,
[data-floating-cluster],
[aria-label="Seitenleiste"] {
display: none !important;
}
main {
padding: 0 !important;
}
}