/* Bookpipe — Filament's own chrome in Markus' „Bookpipe Design System“
   (state 20.10.2026; source of truth resources/design-system/tokens.json).

   The :root block is the design system's tokens.css, copied verbatim: every
   token under its own name, for this sheet and every bp- component to use
   through var(). Below it only overrides of Filament 3.3's fi-* hooks —
   no Tailwind build, no hard-coded colours.

   why the leading .fi: Filament prints its compiled theme AFTER the panel
   stylesheets and styles elements with one-class Tailwind utilities, so it
   would win every tie. The .fi class on <html> of every panel page lifts
   each rule above those utilities without !important. Where Filament sets a
   state through hover:, focus-within: or group-hover:, the rule here names
   that state too. */

:root{
--violet-50:#f3f0ff;
--violet-100:#ebe5ff;
--violet-200:#ddd4fe;
--violet-300:#c4b2fd;
--violet-400:#a48afb;
--violet-500:#7a5af8;
--violet-600:#6842f5;
--violet-700:#5b31e8;
--violet-800:#4a28c2;
--violet-900:#3b219b;
--ink-950:#000207;
--ink-900:#080a12;
--ink-800:#12141d;
--ink-700:#1c1f2a;
--ink-600:#282c39;
--grey-0:#ffffff;
--grey-25:#fcfcfd;
--grey-50:#f8f8fb;
--grey-100:#f1f1f6;
--grey-200:#e6e6ee;
--grey-300:#d3d4df;
--grey-400:#a9abbc;
--grey-500:#7c7f93;
--grey-600:#5a5d70;
--grey-700:#40424f;
--grey-800:#2e3238;
--grey-900:#1b1d24;
--green-100:#dcfae6;
--green-500:#17b26a;
--green-700:#0e7a47;
--amber-100:#fef0c7;
--amber-500:#f79009;
--amber-700:#b54708;
--red-100:#fee4e2;
--red-500:#f04438;
--red-700:#b42318;
--blue-100:#d9ebff;
--blue-500:#2e90fa;
--blue-700:#175cd3;
--text-primary:var(--ink-900);
--text-secondary:var(--grey-600);
--text-tertiary:var(--grey-500);
--text-disabled:var(--grey-400);
--text-inverse:var(--grey-0);
--text-brand:var(--violet-600);
--text-on-brand:#ffffff;
--text-success:var(--green-700);
--text-warning:var(--amber-700);
--text-danger:var(--red-700);
--surface-page:var(--grey-0);
--surface-subtle:var(--grey-50);
--surface-card:var(--grey-0);
--surface-sunken:var(--grey-100);
--surface-inverse:var(--ink-950);
--surface-inverse-raised:var(--ink-800);
--surface-brand:var(--violet-500);
--surface-brand-subtle:var(--violet-50);
--surface-overlay:rgba(8,10,18,0.6);
--surface-glass:rgba(255,255,255,0.85);
--border-subtle:var(--grey-200);
--border-default:var(--grey-300);
--border-strong:var(--grey-400);
--border-brand:var(--violet-500);
--border-inverse:rgba(255,255,255,0.12);
--shadow-xs:0 1px 2px rgba(16,18,28,0.06);
--shadow-sm:0 1px 3px rgba(16,18,28,0.08), 0 1px 2px rgba(16,18,28,0.04);
--shadow-md:0 4px 12px rgba(16,18,28,0.08), 0 1px 3px rgba(16,18,28,0.04);
--shadow-lg:0 12px 32px rgba(16,18,28,0.10), 0 2px 6px rgba(16,18,28,0.04);
--shadow-xl:0 24px 60px rgba(16,18,28,0.14), 0 4px 10px rgba(16,18,28,0.05);
--shadow-brand:0 8px 24px rgba(122,90,248,0.28);
--shadow-inset-subtle:inset 0 -1px 0 rgba(16,18,28,0.05);
--focus-ring:0 0 0 4px #ddd4fe;
--focus-ring-strong:0 0 0 2px #ffffff, 0 0 0 4px #7a5af8;
--focus-ring-inverse:0 0 0 4px rgba(122,90,248,0.45);
--space-0:0px;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--space-32:128px;
--container-max:1200px;
--container-narrow:720px;
--gutter:24px;
--control-h-sm:32px;
--control-h-md:40px;
--control-h-lg:48px;
--radius-xs:4px;
--radius-sm:6px;
--radius-md:10px;
--radius-lg:14px;
--radius-xl:20px;
--radius-2xl:28px;
--radius-full:999px;
--text-display-lg:64px;
--text-display-md:52px;
--text-display-sm:40px;
--text-h1:32px;
--lh-h1:1.16;
--ls-h1:-0.024em;
--text-h2:26px;
--lh-h2:1.22;
--ls-h2:-0.02em;
--text-h3:21px;
--lh-h3:1.3;
--ls-h3:-0.015em;
--text-h4:17px;
--lh-h4:1.4;
--ls-h4:-0.01em;
--text-body-lg:18px;
--text-body:16px;
--text-body-sm:14px;
--text-caption:13px;
--text-micro:11px;
--ls-micro:0.06em;
--text-eyebrow:12px;
--ls-eyebrow:0.12em;
--fw-regular:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;
--fw-extrabold:800;
--sidebar-width:248px;
--content-pad-x:28px;
--header-pad-y:14px;
--subnav-width:240px;
--palette-width:640px;
--dialog-width:480px;
--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
--font-display:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}


/* Page */

.fi .fi-body {
    background-color: var(--surface-subtle);
    color: var(--text-primary);
}

/* why: Filament sets descriptions, helper texts, breadcrumbs and inactive
   tabs in gray-500 — the design system's text-tertiary, which fails WCAG AA
   for small text (README „Barrierefreiheit“). */
.fi .text-gray-500 {
    color: var(--text-secondary);
}

/* IDs, times and small figures; Filament has no mono font setting. */
.fi .font-mono {
    font-family: var(--font-mono);
}

.fi .fi-header-heading {
    font-size: var(--text-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

@media (min-width: 1024px) {
    .fi .fi-topbar > nav,
    .fi .fi-main {
        padding-inline: var(--content-pad-x);
    }
}


/* Sidebar */

.fi .fi-sidebar {
    background-color: var(--surface-card);
    border-right: 1px solid var(--border-subtle);
}

.fi .fi-sidebar-header {
    padding-inline: var(--space-5);
    background-color: var(--surface-card);
    box-shadow: none;
}

.fi .fi-sidebar-nav {
    row-gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
}

.fi .fi-sidebar-nav-groups {
    row-gap: var(--space-2);
    margin-inline: 0;
}

/* The unlabelled blocks of the menu (areas · settings and help) are set
   apart by a hairline; a labelled block gets its micro heading instead. */
.fi .fi-sidebar-group + .fi-sidebar-group:not(:has(> .fi-sidebar-group-button))::before {
    content: "";
    height: 1px;
    margin: 6px 10px;
    background-color: var(--border-subtle);
}

.fi .fi-sidebar-group-button {
    padding: var(--space-4) 10px 6px;
}

.fi .fi-sidebar-group-icon {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
}

.fi .fi-sidebar-group-label {
    font-size: var(--text-micro);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-micro);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.fi .fi-sidebar-group-items {
    row-gap: 2px;
}

.fi .fi-sidebar-item-button {
    column-gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-md);
}

.fi .fi-sidebar-item-button:focus-visible {
    box-shadow: var(--focus-ring-strong);
}

.fi .fi-sidebar-item-label {
    font-size: 14.5px;
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
}

.fi .fi-sidebar-item-icon {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.fi .fi-sidebar-item-button:hover > .fi-sidebar-item-label,
.fi .fi-sidebar-item-button:hover > .fi-sidebar-item-icon {
    color: var(--text-primary);
}

/* The place you are: a violet-50 surface, label and icon in violet-700. */
.fi .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background-color: var(--violet-50);
}

.fi .fi-sidebar-item.fi-active > .fi-sidebar-item-button > .fi-sidebar-item-label,
.fi .fi-sidebar-item.fi-active > .fi-sidebar-item-button > .fi-sidebar-item-icon {
    color: var(--violet-700);
}

.fi .fi-sidebar-item.fi-active > .fi-sidebar-item-button > .fi-sidebar-item-label {
    font-weight: var(--fw-semibold);
}

/* Child items: plain indented links, without Filament's dotted tree line. */
.fi .fi-sidebar-sub-group-items {
    row-gap: 1px;
    margin: 2px 0 6px;
    padding-inline-start: 28px;
}

.fi .fi-sidebar-sub-group-items .fi-sidebar-item-grouped-border {
    display: none;
}

.fi .fi-sidebar-sub-group-items .fi-sidebar-item-button {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
}

.fi .fi-sidebar-sub-group-items .fi-sidebar-item-label {
    font-size: 13.5px;
}

/* Counters in the menu are plain numbers, not badges; red only for danger. */
.fi .fi-sidebar-item-button .fi-badge.fi-badge {
    min-width: 0;
    padding: 0;
    background-color: transparent;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.fi .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-badge:not(.fi-color-danger) {
    color: var(--violet-700);
}

.fi .fi-sidebar-item-button .fi-badge.fi-color-danger {
    color: var(--red-700);
}


/* Topbar: frosted glass over the scrolling content */

.fi .fi-topbar > nav {
    background-color: var(--surface-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: none;
}


/* Cards: sections, stats, tables, contained tabs and wizards, the login box */

.fi .fi-section:not(.fi-aside),
.fi .fi-section.fi-aside > .fi-section-content-ctn,
.fi .fi-wi-stats-overview-stat,
.fi .fi-ta-ctn,
.fi .fi-fo-tabs.fi-contained,
.fi .fi-in-tabs.fi-contained,
.fi .fi-fo-wizard.fi-contained,
.fi .fi-simple-main {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--surface-card);
    box-shadow: var(--shadow-sm);
}

.fi .fi-section-header-heading {
    font-size: var(--text-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
}


/* Buttons: 40 px (small 32 px), radius-md (small radius-sm) */

.fi .fi-btn {
    min-height: var(--control-h-md);
}

.fi .fi-btn.fi-size-xs,
.fi .fi-btn.fi-size-sm {
    min-height: var(--control-h-sm);
}

/* why: grouped buttons share one rounded frame — only its ends round. */
.fi .fi-btn:not(.fi-btn-group > *),
.fi .fi-icon-btn {
    border-radius: var(--radius-md);
}

.fi .fi-btn.fi-size-xs:not(.fi-btn-group > *),
.fi .fi-btn.fi-size-sm:not(.fi-btn-group > *) {
    border-radius: var(--radius-sm);
}

.fi .fi-btn:focus-visible,
.fi .fi-icon-btn:focus-visible {
    box-shadow: var(--focus-ring-strong);
}

/* Primary: violet-500, on hover violet-600 with the brand shadow (Filament
   goes 600 → 500). Toggle buttons (label) keep Filament's checked state. */
.fi .fi-btn.fi-color-primary:not(.fi-btn-outlined, label) {
    background-color: var(--violet-500);
}

.fi .fi-btn.fi-color-primary:not(.fi-btn-outlined, label):hover {
    background-color: var(--violet-600);
    box-shadow: var(--shadow-brand);
}

/* Destructive: red-700 — white text on red-500 is too faint. */
.fi .fi-btn.fi-color-danger:not(.fi-btn-outlined, label) {
    background-color: var(--red-700);
}

.fi .fi-btn.fi-color-danger:not(.fi-btn-outlined, label):hover {
    background-color: var(--red-700);
    filter: brightness(0.92);
}

/* Secondary: white with a border-default line and shadow-xs, drawn inside
   so the button stays 40 px. */
.fi .fi-btn.fi-color-gray:not(.fi-btn-outlined, label, .fi-btn-group > *) {
    box-shadow: inset 0 0 0 1px var(--border-default), var(--shadow-xs);
}

.fi .fi-btn.fi-color-gray:not(.fi-btn-outlined, label, .fi-btn-group > *):focus-visible {
    box-shadow: var(--focus-ring-strong);
}


/* Badges: a full pill in the design system's tone pairs — light 100
   surface, 700 text — without Filament's ring */

.fi .fi-badge {
    border-radius: var(--radius-full);
    box-shadow: none;
    font-weight: var(--fw-semibold);
}

.fi .fi-badge .fi-badge-icon {
    color: currentColor;
}

.fi .fi-badge.fi-color-gray {
    background-color: var(--grey-100);
    color: var(--grey-700);
}

.fi .fi-badge.fi-color-info {
    background-color: var(--blue-100);
    color: var(--blue-700);
}

.fi .fi-badge.fi-color-success {
    background-color: var(--green-100);
    color: var(--green-700);
}

.fi .fi-badge.fi-color-warning {
    background-color: var(--amber-100);
    color: var(--amber-700);
}

.fi .fi-badge.fi-color-danger {
    background-color: var(--red-100);
    color: var(--red-700);
}

.fi .fi-badge.fi-color-primary {
    background-color: var(--violet-50);
    color: var(--violet-700);
}


/* Fields: 40 px, radius-md, a border-default line with shadow-xs; in focus
   a border-brand line with the focus ring (README „Zustände“) */

.fi .fi-input-wrp {
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 1px var(--border-default), var(--shadow-xs);
}

.fi .fi-input-wrp:not(.fi-disabled):focus-within:not(:has(.fi-ac-action:focus)) {
    box-shadow: 0 0 0 1px var(--border-brand), var(--focus-ring);
}

.fi .fi-input-wrp.fi-invalid {
    box-shadow: 0 0 0 1px var(--red-500), var(--shadow-xs);
}

.fi .fi-input-wrp.fi-invalid:not(.fi-disabled):focus-within:not(:has(.fi-ac-action:focus)) {
    box-shadow: 0 0 0 1px var(--red-500), 0 0 0 4px var(--red-100);
}

.fi .fi-input-wrp.fi-disabled {
    background-color: var(--grey-100);
    box-shadow: 0 0 0 1px var(--border-default);
}

/* The input's 24 px line plus equal padding makes the 40 px control. */
.fi .fi-input-wrp .fi-input,
.fi .fi-input-wrp .fi-select-input {
    padding-block: calc((var(--control-h-md) - 1.5rem) / 2);
}

/* Labels as in the design system's form field: 13 px/600. why the span:
   Filament sets the label text in a span of its own (text-sm
   font-medium), which a rule on the label would not reach. */
.fi .fi-fo-field-wrp-label > span {
    font-size: var(--text-caption);
    font-weight: var(--fw-semibold);
}


/* Tables: micro column heads on surface-subtle, body-sm cell text, rows
   lighten on hover */

.fi .fi-ta-header-cell {
    padding-block: 10px;
    background-color: var(--surface-subtle);
}

.fi .fi-ta-header-cell-label {
    font-size: var(--text-micro);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-micro);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.fi .fi-ta-row:hover {
    background-color: var(--grey-25);
}

/* Cell text in body-sm, the admin's standard text. why the item label:
   Filament sizes it itself (text-sm), so .fi-ta-text would not reach it. */
.fi .fi-ta-text-item-label {
    font-size: var(--text-body-sm);
}


/* Tabs: a 2 px violet-500 line under the active tab instead of a pill */

.fi .fi-tabs:not(.fi-contained) {
    margin-inline: 0;
    padding: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

.fi .fi-tabs.fi-contained {
    padding-block: 0;
}

.fi .fi-tabs-item {
    padding: 10px 12px;
    border-radius: 0;
    font-size: 14.5px;
    font-weight: var(--fw-semibold);
}

.fi .fi-tabs-item,
.fi .fi-tabs-item:hover,
.fi .fi-tabs-item:focus-visible {
    background-color: transparent;
}

.fi .fi-tabs-item .fi-tabs-item-label {
    color: var(--text-secondary);
}

.fi .fi-tabs-item:hover .fi-tabs-item-label,
.fi .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--text-primary);
}

.fi .fi-tabs-item.fi-active {
    box-shadow: inset 0 -2px 0 var(--violet-500);
}

.fi .fi-tabs-item:focus-visible {
    box-shadow: var(--focus-ring-strong);
}


/* Modals: radius-xl, shadow-xl, a dimmed and blurred page behind */

.fi .fi-modal-close-overlay {
    background-color: var(--surface-overlay);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.fi .fi-modal-window {
    box-shadow: var(--shadow-xl);
}

.fi .fi-modal-window:not(.fi-modal-slide-over-window) {
    border-radius: var(--radius-xl);
}

.fi .fi-modal-heading {
    font-size: var(--text-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
}


/* Notifications: dark toasts; those listed in the notifications panel
   (fi-inline) stay light */

.fi .fi-no-notification:not(.fi-inline) {
    border-radius: var(--radius-lg);
    background-color: var(--surface-inverse-raised);
    box-shadow: inset 0 0 0 1px var(--border-inverse), var(--shadow-xl);
    color: var(--text-inverse);
}

/* Filament tints the inside of coloured notifications; the toast stays dark. */
.fi .fi-no-notification:not(.fi-inline) > div {
    background-color: transparent;
}

.fi .fi-no-notification:not(.fi-inline) .fi-no-notification-title {
    font-size: 14.5px;
    font-weight: var(--fw-semibold);
    color: var(--text-inverse);
}

.fi .fi-no-notification:not(.fi-inline) .fi-no-notification-body,
.fi .fi-no-notification:not(.fi-inline) .fi-no-notification-date,
.fi .fi-no-notification:not(.fi-inline) .fi-no-notification-close-btn {
    color: var(--grey-300);
}

.fi .fi-no-notification:not(.fi-inline) .fi-no-notification-close-btn:hover {
    background-color: var(--border-inverse);
}

/* Links in a toast need a light tone to stay readable on the dark surface. */
.fi .fi-no-notification:not(.fi-inline) .fi-link > span {
    color: var(--violet-300);
}

.fi .fi-no-notification:not(.fi-inline) .fi-no-notification-icon.fi-color-success {
    color: var(--green-500);
}

.fi .fi-no-notification:not(.fi-inline) .fi-no-notification-icon.fi-color-danger {
    color: var(--red-500);
}

.fi .fi-no-notification:not(.fi-inline) .fi-no-notification-icon.fi-color-warning {
    color: var(--amber-500);
}

.fi .fi-no-notification:not(.fi-inline) .fi-no-notification-icon.fi-color-info {
    color: var(--violet-400);
}