/* Bookpipe — the building blocks of the custom admin pages (Start, Aufgaben,
   the onboarding view) in Markus' „Bookpipe Design System“ (state
   20.10.2026): card, key figure, pipeline, task row, connections, small
   figures, progress, checklist, steps and callout. The Blade components
   under resources/views/components/bp/ render this markup.

   The measures are those of the design system's components.css with a bp-
   prefix on every block. Colours, radii, shadows and type sizes come only
   from the tokens that admin-theme.css declares in :root.

   why the leading .fi: Filament prints its compiled theme AFTER the panel
   stylesheets, so it would win every tie in specificity. The .fi class on
   <html> of every panel page lifts each rule above it without !important. */

/* Motion from the design system's components.css (tokens.json has none):
   150 ms for colours, 220 ms for shadows, on one curve. */
:root{
--ease-standard:cubic-bezier(.2, .8, .2, 1);
--dur-fast:150ms;
--dur-base:220ms;
--transition-control:background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}


/* Page layout: the column of a custom page (sections 20 px apart) and the
   1.6 : 1 split below the key figures; the columns wrap below their width. */

.fi .bp-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fi .bp-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.fi .bp-split > .wide {
    display: flex;
    flex: 1.6 1 520px;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.fi .bp-split > .narrow {
    display: flex;
    flex: 1 1 320px;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.fi .bp-split > .half {
    flex: 1 1 380px;
    min-width: 0;
}


/* Small type: micro labels over figures, sublines, ids and times */

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

.fi .bp-sub {
    font-size: 13px;
    color: var(--text-secondary);
}

.fi .bp-mono {
    font-family: var(--font-mono);
    font-size: 12.5px;
}


/* Ghost link: Filament's <x-filament::link> in the measures of a small
   ghost button — no underline, grey-100 on hover. */

.fi .bp-ghost {
    min-height: var(--control-h-sm);
    padding: 0 12px;
    border-radius: var(--radius-sm);
    transition: var(--transition-control);
}

.fi .bp-ghost > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.fi .bp-ghost svg {
    width: 16px;
    height: 16px;
}

.fi .bp-ghost:hover {
    background-color: var(--grey-100);
}

.fi .bp-ghost:hover > span,
.fi .bp-ghost:focus-visible > span {
    color: var(--text-primary);
    text-decoration-line: none;
}

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


/* Status badges with a leading dot (stat cards, pipeline, task rows):
   class bp-dot on <x-filament::badge>. */

.fi .bp-dot::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}


/* Card; its rows inherit the admin's standard text size (Filament's body
   text is 16 px). */

.fi .bp-card {
    font-size: var(--text-body-sm);
    padding: 24px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--surface-card);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}

.fi .bp-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.fi .bp-card-head .titles {
    min-width: 0;
}

.fi .bp-card-head h2 {
    font-size: var(--text-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
    text-wrap: balance;
}

.fi .bp-card-head .desc {
    font-size: 13px;
    color: var(--text-secondary);
}

.fi .bp-card-head + * {
    margin-top: 16px;
}

/* Rows with their own top line follow: the head keeps the distance. */
.fi .bp-card-head.rows {
    padding-bottom: 12px;
}

.fi .bp-card-head.rows + * {
    margin-top: 0;
}

.fi .bp-card-head + .bp-pipe,
.fi .bp-progress + .bp-figures {
    margin-top: 18px;
}

.fi .bp-progress + .bp-checklist {
    margin-top: 12px;
}


/* Key figure cards (Start): the whole card is a link. why .bp-card.bp-stat
   and not .bp-stat alone: the order detail's figures are <div class="bp-stat">
   too, and must neither lift on hover nor turn into columns on the phone. */

.fi .bp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;
}

.fi .bp-card.bp-stat {
    display: block;
}

/* A clickable card lifts on hover (README „Flächen, Radien, Schatten“). */
.fi .bp-card.bp-stat:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.fi .bp-card.bp-stat:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-strong);
}

.fi .bp-stat .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.fi .bp-stat .value {
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: var(--fw-extrabold);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.fi .bp-stat .detail {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}


/* Production pipeline: one linked step per stage */

.fi .bp-pipe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.fi .bp-stage {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--surface-subtle);
    transition: var(--transition-control);
}

.fi .bp-stage:hover {
    border-color: var(--border-default);
    background-color: var(--grey-0);
}

.fi .bp-stage:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-strong);
}

.fi .bp-stage .n {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: var(--fw-extrabold);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.fi .bp-stage .note {
    font-size: 12.5px;
    color: var(--text-secondary);
}


/* Icon tile of task and connection rows */

.fi .bp-chip {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background-color: var(--grey-100);
    color: var(--text-secondary);
}

.fi .bp-chip > svg {
    width: 18px;
    height: 18px;
}

.fi .bp-chip.sm {
    width: 32px;
    height: 32px;
}

.fi .bp-chip.sm > svg {
    width: 17px;
    height: 17px;
}


/* Task row (Aufgaben, „Jetzt handeln“ on Start) */

.fi .bp-task {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 16px 0;
    border-top: 1px solid var(--border-subtle);
}

.fi .bp-task:last-child {
    padding-bottom: 0;
}

.fi .bp-task .body {
    flex: 1 1 240px;
    min-width: 0;
}

.fi .bp-task .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.fi .bp-task .id {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-secondary);
}

.fi .bp-task .title {
    font-size: 14.5px;
    font-weight: var(--fw-semibold);
}

.fi .bp-task .meta + .title {
    margin-top: 2px;
}

.fi .bp-task .why {
    font-size: 13px;
    color: var(--text-secondary);
}

.fi .bp-task .acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


/* Connection row (shop, printers); the first of a run has no top line */

.fi .bp-conn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border-subtle);
}

.fi .bp-conn:not(.bp-conn + .bp-conn) {
    padding-top: 0;
    border-top: none;
}

.fi .bp-conn:last-child {
    padding-bottom: 0;
}

.fi .bp-conn .who {
    flex: 1;
    min-width: 0;
}

.fi .bp-conn .name {
    font-size: 14.5px;
    font-weight: var(--fw-medium);
}

.fi .bp-conn .name > a {
    font-weight: var(--fw-semibold);
    color: var(--text-brand);
}

.fi .bp-conn .name > a:hover {
    text-decoration-line: underline;
    text-underline-offset: 3px;
}

.fi .bp-conn .bp-sub {
    font-size: 12.5px;
}


/* Small figures (Credits & KI-Budget, Heute im Shop) */

.fi .bp-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.fi .bp-figures.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fi .bp-fig .v {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}


/* Progress */

.fi .bp-progress .head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
}

.fi .bp-progress .pct {
    font-family: var(--font-mono);
    font-size: 12.5px;
}

.fi .bp-progress .track {
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background-color: var(--grey-200);
}

.fi .bp-progress .fill {
    height: 100%;
    border-radius: var(--radius-full);
    background-color: var(--violet-500);
}

.fi .bp-progress.success .fill {
    background-color: var(--green-500);
}

.fi .bp-progress.warning .fill {
    background-color: var(--amber-500);
}


/* Setup checklist: rows inside a bp-checklist */

.fi .bp-checklist-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border-subtle);
}

.fi .bp-checklist-row:last-child {
    padding-bottom: 0;
}

.fi .bp-checklist-row > svg {
    flex: none;
    width: 20px;
    height: 20px;
}

.fi .bp-checklist-row .t {
    flex: 1;
    min-width: 0;
}

.fi .bp-checklist-row.done > svg {
    color: var(--text-success);
}

.fi .bp-checklist-row.done .t {
    color: var(--text-secondary);
}

.fi .bp-checklist-row.open > svg {
    color: var(--text-tertiary);
}

.fi .bp-checklist-row.open .t {
    font-weight: var(--fw-semibold);
}


/* Steps: a numbered flow (01, 02, …) */

.fi .bp-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fi .bp-steps li {
    display: flex;
    gap: 12px;
}

.fi .bp-steps .no {
    padding-top: 2px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-brand);
}

.fi .bp-steps .t {
    font-weight: var(--fw-semibold);
}

.fi .bp-steps .d {
    font-size: 13px;
    color: var(--text-secondary);
}


/* Callout: a note in surface-subtle; warning and danger in their tones */

.fi .bp-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--surface-subtle);
    font-size: 14px;
    color: var(--text-secondary);
}

.fi .bp-callout > svg {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--text-brand);
}

.fi .bp-callout.warning {
    border-color: transparent;
    background-color: var(--amber-100);
    color: var(--amber-700);
}

.fi .bp-callout.danger {
    border-color: transparent;
    background-color: var(--red-100);
    color: var(--red-700);
}

.fi .bp-callout.warning > svg,
.fi .bp-callout.danger > svg {
    color: currentColor;
}


/* Phone (below 600 px, StartHandy): cards 16 px inside, key figures 2 × 2
   with the badge under the value, the pipeline scrolls sideways, task rows
   stack with a full-width action. The design system's .task.stack and
   .pipe.scroll — chosen by the screen here, not by a class. */

@media (max-width: 599px) {
    .fi .bp-card {
        padding: 16px;
    }

    .fi .bp-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .fi .bp-card.bp-stat {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .fi .bp-stat .top {
        display: contents;
    }

    .fi .bp-stat .top .fi-badge {
        order: 1;
        margin-top: 8px;
    }

    .fi .bp-stat .value {
        margin-top: 6px;
        font-size: 30px;
    }

    .fi .bp-stat .detail {
        display: none;
    }

    .fi .bp-pipe {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 4px;
    }

    .fi .bp-stage {
        flex: 0 0 120px;
        gap: 4px;
        padding: 12px;
    }

    .fi .bp-stage .n {
        font-size: 24px;
    }

    .fi .bp-task {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 14px 0;
    }

    .fi .bp-task > .bp-chip {
        display: none;
    }

    /* In a column the desktop basis of 240 px would become a height. */
    .fi .bp-task .body {
        flex: none;
    }

    .fi .bp-task .acts > .fi-btn {
        flex: 1 1 100%;
        min-height: var(--control-h-lg);
    }
}


/* Sidebar account: who is signed in and for which organisation, in the
   sidebar footer below the menu (filament.components.sidebar-account).
   The footer hangs outside the padded menu, so it takes the menu's side
   padding itself. Centred because the collapsed sidebar keeps only the
   avatar, in line with the menu icons; open, the text fills the row. */

.fi .bp-me {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 var(--space-3) var(--space-4);
    padding: 10px 8px;
    border-top: 1px solid var(--border-subtle);
}

.fi .bp-me .who {
    flex: 1;
    min-width: 0;
}

.fi .bp-me .name {
    font-size: 13.5px;
    font-weight: var(--fw-semibold);
}

.fi .bp-me .org {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Avatar: initials on violet-500 only — white on the other avatar tones of
   the design system misses WCAG AA (README „Barrierefreiheit“). */

.fi .bp-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--violet-500);
    color: var(--text-on-brand);
    font-size: 15px;
    font-weight: var(--fw-bold);
    letter-spacing: .01em;
}

.fi .bp-avatar.sm {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

/* A block alone on its row at a readable width — Verbindungen on Start for
   a new organisation, whose rows would stretch over the whole page. */

.fi .bp-readable {
    max-width: 720px;
}

/* Sandbox note below the top bar (filament.components.sandbox-banner):
   amber, because it is a warning — not the brand. */

.fi .bp-sandbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-subtle);
    background-color: var(--amber-100);
    color: var(--amber-700);
    font-size: 13px;
    font-weight: var(--fw-semibold);
    text-align: center;
}

.fi .bp-sandbox > svg {
    flex: none;
    width: 16px;
    height: 16px;
}


/* Status dot before a connection state (sales channel page): green-500
   when connected, grey-400 otherwise; the label next to it says it. */

.fi .bp-status-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background-color: var(--grey-400);
}

.fi .bp-status-dot.on {
    background-color: var(--green-500);
}


/* Record heading: the title line of an order, a product and a sales
   channel (components/bp/record-heading) — name, identifier and status
   side by side inside Filament's page title, which sets the type size. */

.fi .bp-record-heading {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
}

/* The identifier in mono (README: identifiers always in full and in mono),
   a step back in text-secondary. why weight 500: the mono font is hosted up
   to 600 only — the title's 700 would be a faked bold. why anywhere: a
   shop domain has no space to wrap at on a phone. */
.fi .bp-record-heading .id {
    /* why body-lg: the name leads, the identifier follows a step smaller —
       a shop domain in mono at title size outweighed the name. */
    font-size: var(--text-body-lg);
    font-family: var(--font-mono);
    font-weight: var(--fw-medium);
    letter-spacing: normal;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* The texts share a baseline; the badge sits centred on the line. */
.fi .bp-record-heading .fi-badge {
    align-self: center;
}