/* ==========================================================================
   KS21 Lizenzportal - Component Library
   All reusable UI building blocks (prefix `lp-`). Reads tokens from tokens.css.
   Catalog + usage rules: DESIGN_CATALOG.md (project root).

   Cascade: Tailwind v4 (browser build) puts its CSS into the layers
   theme/base/components/utilities. We declare the same order here and put our
   rules into `base` / `components`, so a Tailwind utility on the same element
   (e.g. `lp-btn mt-2`) still wins - exactly as with first-party Tailwind CSS.
   ========================================================================== */
@layer theme, base, components, utilities;

/* Icon font imported INTO the base layer: Google's stylesheet sets
   `.material-symbols-outlined { font-size: 24px }` unlayered, which would
   otherwise beat every Tailwind `text-*` utility and every size rule below. */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200") layer(base);

/* ==========================================================================
   Base
   ========================================================================== */
@layer base {
    /* The rem root for the whole app (icon sizes, --radius-*, Tailwind spacing) -
       see the --root-font-size comment in tokens.css. Deliberately NOT
       --text-base: that is a plain px value for body text, decoupled from this
       on purpose so "scale the boxes" and "scale the text" can be tuned apart. */
    html {
        font-size: var(--root-font-size);
    }

    html, body {
        background-color: var(--color-bg);
        color: var(--color-text);
        font-family: var(--font-sans);
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        font-size: var(--text-base);
        font-feature-settings: "cv11", "ss01";
    }

    a { color: var(--color-accent-text); text-decoration: none; }
    a:hover { text-decoration: underline; }

    code, kbd, pre, samp { font-family: var(--font-mono); }

    /* Keyboard focus ring for every interactive element (mouse clicks stay clean) */
    a:focus-visible,
    button:focus-visible,
    [role="button"]:focus-visible,
    [role="tab"]:focus-visible,
    summary:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
        border-radius: var(--radius-sm);
    }

    /* Native form controls: one consistent look app-wide (excludes Syncfusion .e-input) */
    input[type="text"]:not(.e-input),
    input[type="search"]:not(.e-input),
    input[type="email"]:not(.e-input),
    input[type="password"]:not(.e-input),
    input[type="number"]:not(.e-input),
    input[type="tel"]:not(.e-input),
    input[type="url"]:not(.e-input),
    input[type="date"]:not(.e-input),
    input[type="time"]:not(.e-input),
    input[type="datetime-local"]:not(.e-input),
    textarea:not(.e-input),
    select:not(.e-input) {
        background-color: var(--color-surface);
        color: var(--color-text);
        border-color: var(--color-border-strong);
    }

    input:not(.e-input):focus,
    textarea:not(.e-input):focus,
    select:not(.e-input):focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: var(--focus-ring);
    }

    input:not(.e-input):disabled,
    textarea:not(.e-input):disabled,
    select:not(.e-input):disabled {
        background-color: var(--color-surface-alt);
        color: var(--color-text-muted);
        cursor: not-allowed;
    }

    input::placeholder, textarea::placeholder { color: var(--color-text-faint); }

    input[type="checkbox"], input[type="radio"] { accent-color: var(--color-accent); }

    /* Material Symbols: calm, outlined, optically sized */
    .material-symbols-outlined {
        font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
        line-height: 1;
        vertical-align: middle;
        user-select: none;
    }

    /* Legacy alias: any leftover `material-icons` renders with the same font */
    .material-icons {
        font-family: "Material Symbols Outlined";
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: "liga";
        font-feature-settings: "liga";
        font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
        vertical-align: middle;
    }

    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 999px; border: 2px solid var(--color-bg); }
    ::-webkit-scrollbar-track { background: transparent; }
}

@layer components {

    /* ======================================================================
       App shell: sidebar + topbar + content
       ====================================================================== */
    .lp-shell {
        min-height: 100vh;
        display: flex;
        background: var(--color-bg);
    }

    .lp-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        width: 15.5rem;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        background: var(--color-surface);
        border-right: 1px solid var(--color-border);
        transition: width 0.2s ease;
        z-index: 40;
    }

    .lp-sidebar.is-collapsed { width: 4.25rem; }

    .lp-sidebar-brand {
        height: var(--topbar-height);
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0 1rem;
        border-bottom: 1px solid var(--color-border);
        text-decoration: none !important;
        color: var(--color-text);
        flex-shrink: 0;
    }

    .lp-sidebar-brand img { width: 2rem; height: 2rem; object-fit: contain; flex-shrink: 0; }

    .lp-sidebar-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
    .lp-sidebar-brand-name { font-weight: 700; font-size: var(--text-base); color: var(--color-text); white-space: nowrap; }
    .lp-sidebar-brand-sub { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }

    .lp-sidebar-nav {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0.75rem 0.625rem;
    }

    .lp-nav-section + .lp-nav-section { margin-top: 1.25rem; }

    .lp-nav-section-label {
        padding: 0 0.625rem 0.375rem;
        font-size: var(--text-2xs);
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--color-text-faint);
        white-space: nowrap;
    }

    .lp-nav-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.625rem;
        height: 2.25rem;
        padding: 0 0.625rem;
        margin-bottom: 2px;
        border-radius: var(--radius-md);
        color: var(--color-text-secondary);
        font-size: var(--text-base);
        font-weight: 500;
        text-decoration: none !important;
        white-space: nowrap;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .lp-nav-link:hover { background: var(--color-surface-alt); color: var(--color-text); }

    .lp-nav-link.active {
        background: var(--color-accent-lighter);
        color: var(--color-accent-text);
        font-weight: 600;
    }

    .lp-nav-link.active::before {
        content: "";
        position: absolute;
        left: -0.625rem;
        top: 0.375rem;
        bottom: 0.375rem;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--color-accent);
    }

    .lp-nav-link .material-symbols-outlined { font-size: 1.25rem; flex-shrink: 0; width: 1.5rem; text-align: center; }
    .lp-nav-link.active .material-symbols-outlined { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }

    .lp-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

    .lp-nav-badge {
        min-width: 1.25rem;
        height: 1.25rem;
        padding: 0 0.375rem;
        border-radius: 999px;
        font-size: var(--text-2xs);
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--color-warning-soft);
        color: var(--color-warning-text);
        border: 1px solid var(--color-warning-border);
    }

    .lp-sidebar.is-collapsed .lp-sidebar-brand-text,
    .lp-sidebar.is-collapsed .lp-nav-label,
    .lp-sidebar.is-collapsed .lp-nav-section-label,
    .lp-sidebar.is-collapsed .lp-nav-badge { display: none; }

    .lp-sidebar.is-collapsed .lp-sidebar-brand { justify-content: center; padding: 0; }
    .lp-sidebar.is-collapsed .lp-nav-link { justify-content: center; padding: 0; }
    .lp-sidebar.is-collapsed .lp-nav-section + .lp-nav-section {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--color-border);
    }

    .lp-sidebar-footer {
        border-top: 1px solid var(--color-border);
        padding: 0.5rem 0.625rem;
        flex-shrink: 0;
    }

    .lp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

    .lp-topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        height: var(--topbar-height);
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0 1.5rem;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        /* No backdrop-filter here on purpose: it creates a CSS containing block for
           any `position: fixed` descendant (the click-outside overlay of the help/
           notification/user menus), which then covers only the topbar's own box
           instead of the full viewport - the menus would only close when clicking
           inside the topbar. Also keeps us glass-effect-free per the "no
           glassmorphism" rule in DESIGN_CATALOG.md. */
    }

    .lp-topbar-context {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        color: var(--color-text-secondary);
        font-size: var(--text-sm);
    }

    .lp-topbar-context strong { color: var(--color-text); font-weight: 600; }

    .lp-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; }

    .lp-content {
        flex: 1;
        width: 100%;
        max-width: var(--content-max-width);
        margin: 0 auto;
        padding: 1.5rem 1.5rem 3rem;
    }

    .lp-mobile-only { display: none; }

    @media (max-width: 1023px) {
        .lp-sidebar {
            position: fixed;
            left: 0;
            top: 0;
            transform: translateX(-100%);
            width: 16rem !important;
            box-shadow: var(--shadow-lg);
            transition: transform 0.2s ease;
            z-index: 60;
        }
        .lp-sidebar.is-mobile-open { transform: translateX(0); }
        .lp-sidebar.is-collapsed .lp-sidebar-brand-text,
        .lp-sidebar.is-collapsed .lp-nav-label,
        .lp-sidebar.is-collapsed .lp-nav-section-label,
        .lp-sidebar.is-collapsed .lp-nav-badge { display: revert; }
        .lp-sidebar.is-collapsed .lp-nav-link { justify-content: flex-start; padding: 0 0.625rem; }
        .lp-sidebar-collapse-toggle { display: none !important; }
        .lp-mobile-only { display: inline-flex; }
        .lp-topbar { padding: 0 1rem; }
        .lp-content { padding: 1rem 1rem 2.5rem; }
    }

    .lp-scrim {
        position: fixed;
        inset: 0;
        background: var(--color-overlay);
        z-index: 55;
    }

    /* ======================================================================
       Icon button (topbar, table row actions)
       ====================================================================== */
    .lp-icon-btn {
        position: relative;
        width: 2.25rem;
        height: 2.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        border: 0;
        background: transparent;
        color: var(--color-text-muted);
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease;
        flex-shrink: 0;
    }

    .lp-icon-btn:hover { background: var(--color-surface-alt); color: var(--color-text); }
    .lp-icon-btn .material-symbols-outlined { font-size: 1.25rem; }
    .lp-icon-btn.is-sm { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); }
    .lp-icon-btn.is-sm .material-symbols-outlined { font-size: 1.0625rem; }
    .lp-icon-btn.is-active { color: var(--color-success-text); }
    .lp-icon-btn.is-danger:hover { background: var(--color-danger-soft); color: var(--color-danger-text); }

    .lp-icon-btn-dot {
        position: absolute;
        top: 0.1875rem;
        right: 0.0625rem;
        min-width: 0.875rem;
        height: 0.875rem;
        padding: 0 0.1875rem;
        border-radius: 999px;
        background: var(--color-danger);
        color: #fff;
        font-size: 0.5625rem;
        font-weight: 700;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1.5px solid var(--color-surface);
        box-sizing: content-box;
        pointer-events: none;
    }

    /* User trigger in topbar */
    .lp-user-trigger {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        height: 2.25rem;
        padding: 0 0.5rem 0 0.25rem;
        margin-left: 0.25rem;
        border-radius: var(--radius-md);
        border: 0;
        background: transparent;
        cursor: pointer;
        color: var(--color-text-secondary);
    }

    .lp-user-trigger:hover { background: var(--color-surface-alt); }

    .lp-avatar {
        width: 1.875rem;
        height: 1.875rem;
        border-radius: 999px;
        object-fit: cover;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--color-accent-light);
        color: var(--color-accent-text);
        font-size: var(--text-sm);
        font-weight: 700;
    }

    .lp-avatar.is-lg { width: 2.5rem; height: 2.5rem; font-size: var(--text-base); }

    .lp-user-trigger-name {
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--color-text);
        max-width: 12rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    @media (max-width: 767px) { .lp-user-trigger-name { display: none; } }

    /* ======================================================================
       Dropdown menu (user menu, help menu)
       ====================================================================== */
    .lp-menu-anchor { position: relative; }

    .lp-menu-overlay { position: fixed; inset: 0; z-index: 70; background: transparent; }

    .lp-menu {
        position: absolute;
        right: 0;
        top: calc(100% + 0.375rem);
        z-index: 71;
        min-width: 15rem;
        max-width: calc(100vw - 2rem);
        padding: 0.375rem;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        animation: lp-pop 0.12s ease-out;
    }

    .lp-menu.is-wide { width: 20rem; }

    .lp-menu-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.625rem 0.75rem; }
    .lp-menu-header-meta { min-width: 0; }
    .lp-menu-header-name { font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lp-menu-header-sub { font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .lp-menu-section { padding: 0.5rem 0.625rem; }
    .lp-menu-section-label {
        font-size: var(--text-2xs);
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--color-text-faint);
        margin-bottom: 0.375rem;
    }

    .lp-menu-sep { height: 1px; margin: 0.25rem 0; background: var(--color-border); }

    .lp-menu-item {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.5rem 0.625rem;
        border-radius: var(--radius-md);
        border: 0;
        background: transparent;
        color: var(--color-text-secondary);
        font-size: var(--text-base);
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        text-decoration: none !important;
        transition: background-color 0.15s ease;
    }

    .lp-menu-item:hover { background: var(--color-surface-alt); color: var(--color-text); }
    .lp-menu-item .material-symbols-outlined { font-size: 1.125rem; color: var(--color-text-muted); }
    .lp-menu-item.is-danger:hover { background: var(--color-danger-soft); color: var(--color-danger-text); }
    .lp-menu-item.is-danger:hover .material-symbols-outlined { color: var(--color-danger-text); }
    .lp-menu-item-hint { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-faint); }

    /* Key/value line inside a menu (Firmendaten, Zahlungsdaten) */
    .lp-menu-kv {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.375rem 0.5rem;
        border-radius: var(--radius-sm);
        background: var(--color-surface-alt);
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
        min-width: 0;
    }

    .lp-menu-kv .material-symbols-outlined { font-size: 1rem; color: var(--color-text-muted); }
    .lp-menu-kv-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ======================================================================
       Page header
       ====================================================================== */
    .lp-page-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        margin-bottom: 1.25rem;
    }

    .lp-page-header-main { min-width: 0; }

    .lp-breadcrumb {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        margin-bottom: 0.375rem;
        flex-wrap: wrap;
    }

    .lp-breadcrumb a { color: var(--color-text-muted); }
    .lp-breadcrumb a:hover { color: var(--color-text); text-decoration: none; }
    .lp-breadcrumb .material-symbols-outlined { font-size: 0.875rem; color: var(--color-text-faint); }

    .lp-page-title {
        font-size: var(--text-xl);
        font-weight: 700;
        letter-spacing: -0.015em;
        color: var(--color-text);
        margin: 0;
        line-height: 1.25;
        outline: none;
    }

    .lp-page-subtitle { margin: 0.25rem 0 0; color: var(--color-text-muted); font-size: var(--text-base); max-width: 60rem; }

    .lp-page-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

    .lp-stack { display: flex; flex-direction: column; gap: 1rem; }
    .lp-stack-lg { display: flex; flex-direction: column; gap: 1.5rem; }

    .lp-section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .lp-section-heading h2 {
        margin: 0;
        font-size: var(--text-md);
        font-weight: 600;
        color: var(--color-text);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* ======================================================================
       Card
       ====================================================================== */
    .lp-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xs);
        min-width: 0;
    }

    .lp-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        flex-wrap: wrap;
        padding: 0.875rem 1.25rem;
        border-bottom: 1px solid var(--color-border);
    }

    .lp-card-title {
        margin: 0;
        font-size: var(--text-md);
        font-weight: 600;
        color: var(--color-text);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .lp-card-title .material-symbols-outlined { font-size: 1.25rem; color: var(--color-text-muted); }
    .lp-card-subtitle { margin: 0.125rem 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

    .lp-card-body { padding: 1.25rem; }
    .lp-card-body.is-flush { padding: 0; }

    .lp-card-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5rem;
        padding: 0.75rem 1.25rem;
        border-top: 1px solid var(--color-border);
        background: var(--color-surface-alt);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }

    /* Toolbar row inside a card (filters left, actions right) */
    .lp-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        flex-wrap: wrap;
        padding: 0.75rem 1.25rem;
        border-bottom: 1px solid var(--color-border);
    }

    .lp-toolbar-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    .lp-toolbar-meta { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }

    /* Square icon tile used to identify a product/section */
    .lp-icon-tile {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: var(--radius-md);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: var(--color-accent-lighter);
        color: var(--color-accent-text);
        border: 1px solid var(--color-accent-light);
    }

    .lp-icon-tile .material-symbols-outlined { font-size: 1.25rem; }
    .lp-icon-tile.is-lg { width: 2.75rem; height: 2.75rem; }
    .lp-icon-tile.is-lg .material-symbols-outlined { font-size: 1.5rem; }
    .lp-icon-tile.is-neutral { background: var(--color-surface-alt); color: var(--color-text-secondary); border-color: var(--color-border); }
    .lp-icon-tile.is-success { background: var(--color-success-soft); color: var(--color-success-text); border-color: var(--color-success-border); }
    .lp-icon-tile.is-warning { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: var(--color-warning-border); }
    .lp-icon-tile.is-danger { background: var(--color-danger-soft); color: var(--color-danger-text); border-color: var(--color-danger-border); }
    .lp-icon-tile.is-info { background: var(--color-info-soft); color: var(--color-info-text); border-color: var(--color-info-border); }

    /* ======================================================================
       Buttons
       ====================================================================== */
    .lp-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        height: 2.25rem;
        padding: 0 0.875rem;
        border-radius: var(--radius-md);
        border: 1px solid transparent;
        font-family: inherit;
        font-size: var(--text-base);
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        text-decoration: none !important;
        transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
        user-select: none;
    }

    .lp-btn .material-symbols-outlined { font-size: 1.125rem; margin-left: -0.125rem; }

    .lp-btn:disabled, .lp-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

    /* Primary: one per view - the main action. #ea580c for AA legibility of white text. */
    .lp-btn-primary { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-accent-contrast); box-shadow: var(--shadow-xs); }
    .lp-btn-primary:hover { background: var(--color-accent-active); border-color: var(--color-accent-active); color: var(--color-accent-contrast); }

    .lp-btn-secondary { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text-secondary); box-shadow: var(--shadow-xs); }
    .lp-btn-secondary:hover { background: var(--color-surface-alt); color: var(--color-text); }

    .lp-btn-ghost { background: transparent; color: var(--color-text-secondary); }
    .lp-btn-ghost:hover { background: var(--color-surface-alt); color: var(--color-text); }

    .lp-btn-link { background: transparent; color: var(--color-accent-text); padding: 0 0.25rem; height: auto; }
    .lp-btn-link:hover { text-decoration: underline !important; }

    .lp-btn-danger { background: var(--color-surface); border-color: var(--color-danger-border); color: var(--color-danger-text); }
    .lp-btn-danger:hover { background: var(--color-danger-soft); }

    .lp-btn-danger-solid { background: var(--color-danger-text); border-color: var(--color-danger-text); color: #fff; }
    .lp-btn-danger-solid:hover { background: #991b1b; border-color: #991b1b; }

    .lp-btn-sm { height: 1.875rem; padding: 0 0.625rem; font-size: var(--text-sm); border-radius: var(--radius-sm); }
    .lp-btn-sm .material-symbols-outlined { font-size: 1rem; }
    .lp-btn-lg { height: 2.75rem; padding: 0 1.25rem; font-size: var(--text-md); }
    .lp-btn-block { width: 100%; }

    .lp-spin { animation: lp-spin 0.9s linear infinite; }

    /* ======================================================================
       Badges, counts, chips
       ====================================================================== */
    .lp-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        height: 1.375rem;
        padding: 0 0.5rem;
        border-radius: var(--radius-sm);
        font-size: var(--text-xs);
        font-weight: 600;
        white-space: nowrap;
        border: 1px solid var(--color-neutral-border);
        background: var(--color-neutral-soft);
        color: var(--color-neutral-text);
    }

    .lp-badge .material-symbols-outlined { font-size: 0.875rem; }
    .lp-badge-dot::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 999px; background: currentColor; }

    .lp-badge-success { background: var(--color-success-soft); color: var(--color-success-text); border-color: var(--color-success-border); }
    .lp-badge-warning { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: var(--color-warning-border); }
    .lp-badge-danger { background: var(--color-danger-soft); color: var(--color-danger-text); border-color: var(--color-danger-border); }
    .lp-badge-info { background: var(--color-info-soft); color: var(--color-info-text); border-color: var(--color-info-border); }
    .lp-badge-accent { background: var(--color-accent-lighter); color: var(--color-accent-text); border-color: var(--color-accent-light); }

    .lp-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.375rem;
        height: 1.25rem;
        padding: 0 0.375rem;
        border-radius: 999px;
        background: var(--color-surface-alt);
        color: var(--color-text-muted);
        font-size: var(--text-2xs);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    /* Clickable reference chip (e.g. order number) */
    .lp-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        height: 1.5rem;
        padding: 0 0.5rem;
        border-radius: var(--radius-sm);
        border: 1px solid var(--color-border);
        background: var(--color-surface);
        color: var(--color-text-secondary);
        font-size: var(--text-xs);
        font-weight: 500;
        font-variant-numeric: tabular-nums;
        cursor: pointer;
        white-space: nowrap;
        text-decoration: none !important;
        transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
    }

    .lp-chip .material-symbols-outlined { font-size: 0.875rem; color: var(--color-text-faint); }
    .lp-chip:hover { border-color: var(--color-border-strong); color: var(--color-accent-text); background: var(--color-surface-alt); }
    .lp-chip:hover .material-symbols-outlined { color: var(--color-accent-text); }

    .lp-chip-list { display: flex; flex-wrap: wrap; gap: 0.375rem; }

    /* ======================================================================
       Segmented control (filter tabs inside a toolbar)
       ====================================================================== */
    .lp-segmented {
        display: inline-flex;
        align-items: center;
        padding: 0.1875rem;
        gap: 0.125rem;
        border-radius: var(--radius-md);
        background: var(--color-surface-alt);
        border: 1px solid var(--color-border);
    }

    .lp-segmented button {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        height: 1.75rem;
        padding: 0 0.625rem;
        border: 0;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--color-text-muted);
        font-family: inherit;
        font-size: var(--text-sm);
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .lp-segmented button:hover { color: var(--color-text); }

    .lp-segmented button[aria-pressed="true"] {
        background: var(--color-surface);
        color: var(--color-text);
        font-weight: 600;
        box-shadow: var(--shadow-sm);
    }

    .lp-segmented button .lp-count { height: 1.125rem; min-width: 1.125rem; background: var(--color-border); }
    .lp-segmented button[aria-pressed="true"] .lp-count { background: var(--color-accent-light); color: var(--color-accent-text); }

    /* ======================================================================
       Data table
       ====================================================================== */
    .lp-table-wrap { width: 100%; overflow-x: auto; }

    .lp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }

    .lp-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        text-align: left;
        padding: 0.625rem 1rem;
        background: var(--color-surface-alt);
        color: var(--color-text-muted);
        font-size: var(--text-xs);
        font-weight: 600;
        letter-spacing: 0.02em;
        white-space: nowrap;
        border-bottom: 1px solid var(--color-border);
    }

    .lp-table thead th:first-child { padding-left: 1.25rem; }
    .lp-table thead th:last-child { padding-right: 1.25rem; }
    .lp-table thead th.is-right, .lp-table td.is-right { text-align: right; }
    .lp-table thead th.is-shrink, .lp-table td.is-shrink { width: 1%; white-space: nowrap; }

    /* Sortable header: <th><button class="lp-th-sort">Datum <span class="material-symbols-outlined">arrow_downward</span></button></th> */
    .lp-th-sort {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        border: 0;
        padding: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        letter-spacing: inherit;
        cursor: pointer;
    }

    .lp-th-sort:hover, .lp-th-sort.is-sorted { color: var(--color-text); }
    .lp-th-sort .material-symbols-outlined { font-size: 0.875rem; }

    .lp-table tbody td {
        padding: 0.625rem 1rem;
        color: var(--color-text-secondary);
        vertical-align: middle;
        border-bottom: 1px solid var(--color-border);
    }

    .lp-table tbody td:first-child { padding-left: 1.25rem; }
    .lp-table tbody td:last-child { padding-right: 1.25rem; }
    .lp-table tbody tr:last-child td { border-bottom: 0; }

    .lp-table tbody tr.lp-row { transition: background-color 0.12s ease; }
    .lp-table tbody tr.lp-row:hover td { background: var(--color-bg); }
    .lp-table tbody tr.lp-row.is-expanded td { background: var(--color-bg); border-bottom-color: transparent; }
    .lp-table tbody tr.lp-row.is-muted td { color: var(--color-text-faint); }
    .lp-table tbody tr.lp-row.is-clickable { cursor: pointer; }

    .lp-table tbody tr.lp-row-detail > td {
        background: var(--color-bg);
        padding: 0 1.25rem 1rem 1.25rem;
    }

    .lp-cell-primary { color: var(--color-text); font-weight: 500; }
    .lp-cell-sub { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 0.125rem; }
    .lp-cell-empty { color: var(--color-text-faint); }
    .lp-cell-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.375rem; }
    .lp-num { font-variant-numeric: tabular-nums; }

    .lp-code {
        display: inline-block;
        max-width: 22rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        padding: 0.125rem 0.4375rem;
        border-radius: var(--radius-sm);
        background: var(--color-surface-alt);
        border: 1px solid var(--color-border);
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--color-text);
    }

    /* ======================================================================
       List (dense rows inside a card, e.g. modules, recent documents)
       ====================================================================== */
    .lp-list { list-style: none; margin: 0; padding: 0; }

    .lp-list-item {
        display: flex;
        align-items: center;
        gap: 0.875rem;
        padding: 0.75rem 1.25rem;
        border-bottom: 1px solid var(--color-border);
        min-width: 0;
    }

    .lp-list-item:last-child { border-bottom: 0; }
    .lp-list-item.is-clickable { cursor: pointer; transition: background-color 0.12s ease; }
    .lp-list-item.is-clickable:hover { background: var(--color-bg); }
    .lp-list-item-main { flex: 1; min-width: 0; }
    .lp-list-item-title { color: var(--color-text); font-weight: 500; font-size: var(--text-base); }
    .lp-list-item-sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 0.125rem; }
    .lp-list-item-aside { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

    .lp-clamp-1, .lp-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
    .lp-clamp-1 { -webkit-line-clamp: 1; }
    .lp-clamp-2 { -webkit-line-clamp: 2; }

    /* Sub-grid of small tiles inside an expanded table row */
    .lp-subgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.5rem; }

    .lp-subtile {
        padding: 0.625rem 0.75rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-surface);
    }

    .lp-subtile-title { font-weight: 500; color: var(--color-text); font-size: var(--text-sm); }
    .lp-subtile-text { color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 0.125rem; }

    .lp-detail-label {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.75rem 0 0.5rem;
        font-size: var(--text-xs);
        font-weight: 600;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .lp-detail-label .material-symbols-outlined { font-size: 0.9375rem; }

    /* Key/value description list */
    .lp-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 0; font-size: var(--text-sm); }
    .lp-dl dt { color: var(--color-text-muted); }
    .lp-dl dd { margin: 0; color: var(--color-text); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

    /* ======================================================================
       KPI tiles
       ====================================================================== */
    .lp-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }

    .lp-kpi {
        display: flex;
        align-items: flex-start;
        gap: 0.875rem;
        padding: 1rem 1.125rem;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xs);
        min-width: 0;
    }

    .lp-kpi-body { min-width: 0; }
    .lp-kpi-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.02em; }
    .lp-kpi-value { font-size: 1.625rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-text); font-variant-numeric: tabular-nums; margin-top: 0.125rem; }
    .lp-kpi-meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 0.125rem; }

    /* ======================================================================
       Product tiles (dashboard)
       ====================================================================== */
    .lp-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }

    .lp-product-tile {
        display: flex;
        flex-direction: column;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xs);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
        min-width: 0;
    }

    .lp-product-tile:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }

    .lp-product-tile-head {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem 1.125rem 0.75rem;
        text-decoration: none !important;
        color: inherit;
    }

    .lp-product-tile-title { font-size: var(--text-md); font-weight: 600; color: var(--color-text); line-height: 1.3; }
    .lp-product-tile-desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 0.125rem; }

    .lp-product-tile-stats {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        padding: 0 1.125rem 0.875rem;
        flex-wrap: wrap;
    }

    .lp-product-stat-value { font-size: 1.25rem; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; line-height: 1.2; }
    .lp-product-stat-label { font-size: var(--text-xs); color: var(--color-text-muted); }

    .lp-product-tile-foot {
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.625rem 1.125rem;
        border-top: 1px solid var(--color-border);
    }

    /* ======================================================================
       Alerts / callouts
       ====================================================================== */
    .lp-alert {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-radius: var(--radius-lg);
        border: 1px solid var(--color-info-border);
        background: var(--color-info-soft);
        color: var(--color-text-secondary);
        font-size: var(--text-sm);
    }

    .lp-alert > .material-symbols-outlined { font-size: 1.25rem; color: var(--color-info-text); flex-shrink: 0; margin-top: 0.0625rem; }
    .lp-alert-body { flex: 1; min-width: 0; }
    .lp-alert-title { font-weight: 600; color: var(--color-text); font-size: var(--text-base); }
    .lp-alert-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; align-self: center; }

    .lp-alert-success { border-color: var(--color-success-border); background: var(--color-success-soft); }
    .lp-alert-success > .material-symbols-outlined { color: var(--color-success-text); }
    .lp-alert-warning { border-color: var(--color-warning-border); background: var(--color-warning-soft); }
    .lp-alert-warning > .material-symbols-outlined { color: var(--color-warning-text); }
    .lp-alert-danger { border-color: var(--color-danger-border); background: var(--color-danger-soft); }
    .lp-alert-danger > .material-symbols-outlined { color: var(--color-danger-text); }
    .lp-alert-neutral { border-color: var(--color-border); background: var(--color-surface-alt); }
    .lp-alert-neutral > .material-symbols-outlined { color: var(--color-text-muted); }

    @media (max-width: 767px) {
        .lp-alert { flex-wrap: wrap; }
        .lp-alert-actions { width: 100%; }
    }

    /* ======================================================================
       Empty state & loading
       ====================================================================== */
    .lp-empty { text-align: center; padding: 2.5rem 1.5rem; }

    .lp-empty-icon {
        width: 3rem;
        height: 3rem;
        margin: 0 auto 0.75rem;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-surface-alt);
        color: var(--color-text-faint);
    }

    .lp-empty-icon .material-symbols-outlined { font-size: 1.5rem; }
    .lp-empty-title { font-weight: 600; color: var(--color-text); font-size: var(--text-base); }
    .lp-empty-text { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 0.25rem; max-width: 28rem; margin-left: auto; margin-right: auto; }
    .lp-empty-actions { margin-top: 1rem; display: flex; justify-content: center; gap: 0.5rem; }

    .lp-skeleton {
        display: block;
        border-radius: var(--radius-sm);
        background: linear-gradient(90deg, var(--color-surface-alt) 25%, var(--color-border) 50%, var(--color-surface-alt) 75%);
        background-size: 200% 100%;
        animation: lp-shimmer 1.4s ease-in-out infinite;
    }

    .lp-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        padding: 3rem 1rem;
        color: var(--color-text-muted);
        font-size: var(--text-sm);
    }

    .lp-spinner {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 999px;
        border: 3px solid var(--color-border);
        border-top-color: var(--color-accent);
        animation: lp-spin 0.8s linear infinite;
    }

    /* ======================================================================
       Forms
       ====================================================================== */
    .lp-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
    .lp-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); }
    .lp-required { color: var(--color-danger-text); margin-left: 0.125rem; }

    .lp-input, .lp-select, .lp-textarea {
        width: 100%;
        height: 2.25rem;
        padding: 0 0.75rem;
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        color: var(--color-text);
        font-family: inherit;
        font-size: var(--text-base);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .lp-textarea { height: auto; min-height: 5rem; padding: 0.5rem 0.75rem; resize: vertical; }
    .lp-select { padding-right: 2rem; cursor: pointer; }
    .lp-select.is-sm, .lp-input.is-sm { height: 1.875rem; font-size: var(--text-sm); border-radius: var(--radius-sm); }
    .lp-input.is-mono { font-family: var(--font-mono); font-size: var(--text-sm); }
    .lp-input.is-invalid { border-color: var(--color-danger); }

    .lp-input-group { position: relative; display: flex; align-items: center; }
    .lp-input-group > .material-symbols-outlined { position: absolute; left: 0.625rem; font-size: 1.125rem; color: var(--color-text-faint); pointer-events: none; }
    .lp-input-group > .lp-input { padding-left: 2.125rem; }

    .lp-hint { font-size: var(--text-xs); color: var(--color-text-muted); }
    .lp-error { font-size: var(--text-xs); color: var(--color-danger-text); }

    .lp-check {
        display: flex;
        align-items: flex-start;
        gap: 0.625rem;
        font-size: var(--text-base);
        color: var(--color-text-secondary);
        cursor: pointer;
    }

    .lp-check input { width: 1rem; height: 1rem; margin-top: 0.1875rem; flex-shrink: 0; cursor: pointer; }

    /* Numbered form section inside an order flow card */
    .lp-form-section { padding: 1.25rem; border-bottom: 1px solid var(--color-border); }
    .lp-form-section:last-child { border-bottom: 0; }
    .lp-form-section-head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }

    .lp-step-badge {
        width: 1.625rem;
        height: 1.625rem;
        border-radius: 999px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: var(--text-xs);
        font-weight: 700;
        background: var(--color-accent-lighter);
        color: var(--color-accent-text);
        border: 1px solid var(--color-accent-light);
    }

    .lp-step-badge.is-done { background: var(--color-success-soft); color: var(--color-success-text); border-color: var(--color-success-border); }
    .lp-step-badge.is-upcoming { background: var(--color-surface); color: var(--color-text-faint); border-color: var(--color-border); }

    .lp-form-section-title { margin: 0; font-size: var(--text-md); font-weight: 600; color: var(--color-text); line-height: 1.625rem; }
    .lp-form-section-sub { margin: 0.125rem 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

    /* Selectable option card (module selection etc.) */
    .lp-option {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-surface);
        cursor: pointer;
        transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    }

    .lp-option:hover { border-color: var(--color-border-strong); }
    .lp-option.is-selected { border-color: var(--color-accent); background: var(--color-accent-lighter); box-shadow: 0 0 0 1px var(--color-accent) inset; }
    .lp-option.is-disabled { opacity: 0.55; cursor: not-allowed; }
    .lp-option-title { font-weight: 600; color: var(--color-text); }
    .lp-option-text { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 0.125rem; }
    .lp-option-price { margin-left: auto; font-weight: 600; color: var(--color-text); white-space: nowrap; font-variant-numeric: tabular-nums; }

    /* Summary/pricing box */
    .lp-summary { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-alt); padding: 1rem 1.25rem; }
    .lp-summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; font-size: var(--text-sm); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
    .lp-summary-row.is-total { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border-strong); font-size: var(--text-md); font-weight: 700; color: var(--color-text); }

    /* ======================================================================
       Dialog (hand-rolled modal shell)
       ====================================================================== */
    .lp-dialog-backdrop {
        position: fixed;
        inset: 0;
        z-index: 10010;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background: var(--color-overlay);
        animation: lp-fade 0.12s ease-out;
    }

    .lp-dialog {
        width: 100%;
        max-width: 32rem;
        max-height: calc(100vh - 2rem);
        display: flex;
        flex-direction: column;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
        outline: none;
        animation: lp-pop 0.15s ease-out;
    }

    .lp-dialog.is-sm { max-width: 26rem; }
    .lp-dialog.is-lg { max-width: 44rem; }
    .lp-dialog.is-xl { max-width: 60rem; }

    .lp-dialog-header { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); }
    .lp-dialog-header-main { flex: 1; min-width: 0; }
    .lp-dialog-title { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--color-text); line-height: 1.35; }
    .lp-dialog-subtitle { margin: 0.125rem 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
    .lp-dialog-body { padding: 1.25rem; overflow-y: auto; color: var(--color-text-secondary); }
    .lp-dialog-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.875rem 1.25rem; border-top: 1px solid var(--color-border); background: var(--color-surface-alt); }

    /* Rich text coming from CMS / instructions */
    .lp-prose { color: var(--color-text-secondary); line-height: 1.6; }
    .lp-prose p { margin: 0 0 0.75rem; }
    .lp-prose ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 0.75rem; }
    .lp-prose ol { list-style: decimal; padding-left: 1.25rem; margin: 0 0 0.75rem; }
    .lp-prose a { color: var(--color-accent-text); text-decoration: underline; }
    .lp-prose h1, .lp-prose h2, .lp-prose h3, .lp-prose h4 { color: var(--color-text); font-weight: 600; margin: 1rem 0 0.5rem; }
    .lp-prose img { max-width: 100%; border-radius: var(--radius-md); }

    /* ======================================================================
       Toast
       ====================================================================== */
    .lp-toast-region { position: fixed; top: calc(var(--topbar-height) + 0.75rem); right: 1rem; z-index: 10020; display: flex; flex-direction: column; gap: 0.5rem; max-width: min(26rem, calc(100vw - 2rem)); }

    .lp-toast {
        display: flex;
        align-items: flex-start;
        gap: 0.625rem;
        padding: 0.75rem 1rem;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-left: 4px solid var(--color-info);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        color: var(--color-text-secondary);
        font-size: var(--text-sm);
        animation: lp-slide-in 0.2s ease-out;
    }

    .lp-toast > .material-symbols-outlined { font-size: 1.25rem; color: var(--color-info-text); }
    .lp-toast.is-success { border-left-color: var(--color-success); }
    .lp-toast.is-success > .material-symbols-outlined { color: var(--color-success-text); }
    .lp-toast.is-danger { border-left-color: var(--color-danger); }
    .lp-toast.is-danger > .material-symbols-outlined { color: var(--color-danger-text); }

    /* ======================================================================
       Standalone screens (login, maintenance, goodbye, access denied)
       ====================================================================== */
    .lp-auth-screen {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
        background: var(--color-bg);
    }

    .lp-auth-card {
        width: 100%;
        max-width: 26rem;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        padding: 2rem;
        text-align: center;
    }

    .lp-auth-logo { width: 3rem; height: 3rem; object-fit: contain; margin: 0 auto 1.25rem; }
    .lp-auth-title { font-size: var(--text-xl); font-weight: 700; color: var(--color-text); margin: 0; }
    .lp-auth-text { color: var(--color-text-muted); margin: 0.5rem 0 1.5rem; }

    /* ======================================================================
       Utilities
       ====================================================================== */
    .lp-muted { color: var(--color-text-muted); }
    .lp-faint { color: var(--color-text-faint); }
    .lp-mono { font-family: var(--font-mono); }
    .lp-link { color: var(--color-accent-text); font-weight: 500; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
    .lp-link:hover { text-decoration: underline; }
    .lp-divider { height: 1px; background: var(--color-border); border: 0; margin: 1rem 0; }
    .lp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

/* ==========================================================================
   Syncfusion (Fluent theme) - retarget primary color to the brand accent
   ========================================================================== */
.e-btn.e-primary, .e-css.e-btn.e-primary {
    background-color: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
    color: var(--color-accent-contrast) !important;
}

.e-btn.e-primary:hover, .e-btn.e-primary:focus {
    background-color: var(--color-accent-active) !important;
    border-color: var(--color-accent-active) !important;
}

.e-dialog { border-radius: var(--radius-lg) !important; border: 1px solid var(--color-border) !important; box-shadow: var(--shadow-lg) !important; }
.e-dialog .e-dlg-header-content { border-bottom: 1px solid var(--color-border); }
.e-dialog .e-dlg-header { font-family: var(--font-sans); font-weight: 600; color: var(--color-text); }
.e-dlg-overlay { background-color: var(--color-overlay) !important; opacity: 1 !important; }

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes lp-spin { to { transform: rotate(360deg); } }
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes lp-slide-in { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: none; } }
@keyframes lp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}