/* 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 (walnut tone, subtle) ───────────────────── */
.sidebar-scroll {
scrollbar-width: thin;
scrollbar-color: #3A2C1F transparent;
}
.sidebar-scroll::-webkit-scrollbar {
width: 4px;
}
.sidebar-scroll::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
background-color: #3A2C1F;
border-radius: 2px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
background-color: #4A3A2C;
}
/* ── 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;
}
main input::placeholder,
main textarea::placeholder {
color: var(--color-fs-fg-hint);
}
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);
}
/* ── Print styles ───────────────────────────────────────────────── */
@media print {
aside,
[data-floating-cluster],
[aria-label="Seitenleiste"] {
display: none !important;
}
main {
padding: 0 !important;
}
}