/* Front Legal platform interface
   House style (colours, shadows, radii): styles/theme.css, see docs/THEMING.md
   1  Layout tokens and resets
   2  Application shell
   3  Sidebar navigation
   4  Workspace header
   5  Page primitives
   6  Controls
   7  Cards, lists and tables
   8  Dashboard
   9  Messages
   10 Prikbord
   11 Marketplace, checklists, templates, intervisie
   12 Beheer
   13 Drawers, toasts and overlays
   14 Login
   15 Responsive
*/

/* Personal PE reporting and registration history */
.frontlegal-root .frontlegal-pe-toolbar,
.frontlegal-root .frontlegal-pe-years {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.frontlegal-root .frontlegal-pe-toolbar { justify-content: space-between; margin-bottom: 24px; }
.frontlegal-root .frontlegal-pe-years button { padding: 8px 16px; border: 1px solid var(--fl-color-border); border-radius: var(--fl-radius-sm); }
.frontlegal-root .frontlegal-pe-years button.active { background: var(--fl-color-primary); color: var(--fl-color-on-primary); }
.frontlegal-root .frontlegal-pe-years label,
.frontlegal-root .frontlegal-year-field { display: flex; align-items: center; gap: 8px; color: var(--fl-color-text-muted); font-size: .875rem; }
.frontlegal-root .frontlegal-pe-years input,
.frontlegal-root .frontlegal-year-field input { width: 104px; min-width: 0; padding: 8px 12px; }
.frontlegal-root .frontlegal-pe-totals { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin: 16px 0; }
.frontlegal-root .frontlegal-pe-totals strong { font-size: 36px; color: var(--fl-color-primary); line-height: 1.2; }
.frontlegal-root .frontlegal-pe-totals strong small { font-size: 1.25rem; color: var(--fl-color-text-muted); font-weight: 400; }
.frontlegal-root .frontlegal-pe-totals > span { color: var(--fl-color-text-muted); font-size: .875rem; }
.frontlegal-root .frontlegal-pe-summary progress { display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; overflow: hidden; background: var(--fl-color-border); accent-color: var(--fl-color-secondary); }
.frontlegal-root .frontlegal-pe-summary progress::-webkit-progress-bar { background: var(--fl-color-border); }
.frontlegal-root .frontlegal-pe-summary progress::-webkit-progress-value { background: var(--fl-color-secondary); }
.frontlegal-root .frontlegal-pe-summary progress::-moz-progress-bar { background: var(--fl-color-secondary); }
.frontlegal-root ul.frontlegal-pe-certificates,
.frontlegal-root ul.frontlegal-intervision-history { padding: 0; margin: 0; list-style: none; }
.frontlegal-root .frontlegal-pe-certificates > li,
.frontlegal-root .frontlegal-intervision-history > li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--fl-color-border); list-style: none; }
.frontlegal-root .frontlegal-pe-certificates > li:last-child,
.frontlegal-root .frontlegal-intervision-history > li:last-child { border-bottom: 0; }
.frontlegal-root .frontlegal-pe-file-icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; background: var(--fl-color-secondary-soft); color: var(--fl-color-secondary); border-radius: var(--fl-radius-sm); }
.frontlegal-root .frontlegal-pe-certificate-copy,
.frontlegal-root .frontlegal-intervision-history > li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.frontlegal-root .frontlegal-pe-certificates h3,
.frontlegal-root .frontlegal-intervision-history h3 { font-size: 1rem; line-height: 1.4; margin: 0 0 4px; }
.frontlegal-root .frontlegal-pe-certificates p,
.frontlegal-root .frontlegal-intervision-history p { margin: 0 0 4px; font-size: .875rem; }
.frontlegal-root .frontlegal-pe-certificates small,
.frontlegal-root .frontlegal-intervision-history small { color: var(--fl-color-text-muted); font-size: .875rem; }
.frontlegal-root .frontlegal-pe-certificates > li > button,
.frontlegal-root .frontlegal-intervision-history > li > button { flex-shrink: 0; font-size: .875rem; padding: 8px 12px; background: var(--fl-color-secondary-tint); color: var(--fl-color-secondary); border: 0; border-radius: var(--fl-radius-sm); cursor: pointer; }
@media (max-width: 980px) {
    .frontlegal-root .frontlegal-pe-certificates > li { flex-wrap: wrap; }
    .frontlegal-root .frontlegal-pe-certificate-copy { flex-basis: calc(100% - 64px); }
}
@media (max-width: 767px) {
    .frontlegal-root .frontlegal-pe-toolbar { align-items: stretch; }
    .frontlegal-root .frontlegal-pe-toolbar > button { width: 100%; }
    .frontlegal-root .frontlegal-pe-years { gap: 8px; }
    .frontlegal-root .frontlegal-pe-years label { flex-basis: 100%; }
    .frontlegal-root .frontlegal-intervision-history > li { flex-wrap: wrap; }
    .frontlegal-root .frontlegal-intervision-history > li > div { flex-basis: 100%; }
    .frontlegal-root .frontlegal-pe-totals strong { font-size: 30px; }
}

/* 1  Layout tokens and resets
   Only layout, spacing and motion live here. House style tokens: theme.css */

.frontlegal-root,
.frontlegal-root * {
    box-sizing: border-box;
}

.frontlegal-root .frontlegal-pagination:not(:empty) {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.frontlegal-root {
    --frontlegal-navigation-width: 240px;
    --frontlegal-header-height: 84px;
    --frontlegal-card-gap: 24px;
    --frontlegal-space-field: 16px;
    --frontlegal-space-card: 24px;
    --frontlegal-space-section: 32px;
    --frontlegal-gutter: max(32px, calc((100% - 1920px) / 2));
    --frontlegal-motion-fast: 120ms;
    --frontlegal-motion-base: 160ms;
    --frontlegal-motion-panel: 200ms;
    --frontlegal-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --frontlegal-interaction-transition: transform var(--frontlegal-motion-base) var(--frontlegal-motion-ease), opacity var(--frontlegal-motion-fast) var(--frontlegal-motion-ease), color var(--frontlegal-motion-base) var(--frontlegal-motion-ease), background-color var(--frontlegal-motion-base) var(--frontlegal-motion-ease), border-color var(--frontlegal-motion-base) var(--frontlegal-motion-ease), text-decoration-color var(--frontlegal-motion-base) var(--frontlegal-motion-ease);
    --frontlegal-motion-fade: 200ms;
    --frontlegal-motion-skeleton: 1400ms;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--fl-color-text);
    background: var(--fl-color-canvas);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.frontlegal-root[v-cloak] {
    display: block;
}

.frontlegal-root[v-cloak] > :not(.frontlegal-fallback) {
    display: none;
}

.frontlegal-root button,
.frontlegal-root input,
.frontlegal-root textarea,
.frontlegal-root select {
    font: inherit;
    border: 0;
}

.frontlegal-root button {
    color: inherit;
}

/* Keeps action labels consistent across legacy component-specific weights. */
.frontlegal-root button,
.frontlegal-root [role="button"],
.frontlegal-root a.frontlegal-button,
.frontlegal-root input[type="submit"],
.frontlegal-root input[type="button"],
.frontlegal-root input[type="reset"],
.frontlegal-root input::file-selector-button,
.frontlegal-root .frontlegal-stat-action {
    font-weight: var(--fl-font-weight-button) !important;
}

.frontlegal-root :is(button, a[href], input, textarea, select, summary, [role="button"], [role="tab"], [role="option"], [role="menuitem"], [role="menuitemradio"], label[for], label:has(input[type="checkbox"], input[type="radio"])) {
    outline-offset: 2px;
    transition: var(--frontlegal-interaction-transition);
}

.frontlegal-root :is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [role="menuitemradio"]) .frontlegal-icon,
.frontlegal-root input::file-selector-button {
    transition: var(--frontlegal-interaction-transition);
}

.frontlegal-root button:focus-visible,
.frontlegal-root a:focus-visible,
.frontlegal-root input:focus-visible,
.frontlegal-root textarea:focus-visible,
.frontlegal-root select:focus-visible {
    outline: 2px solid var(--fl-color-secondary);
    outline-offset: 2px;
}

.frontlegal-root button:not([disabled]):active,
.frontlegal-root a:active {
    opacity: 0.88;
}

.frontlegal-root h1,
.frontlegal-root h2,
.frontlegal-root h3,
.frontlegal-root p,
.frontlegal-root ul,
.frontlegal-root dl {
    margin-top: 0;
}

.frontlegal-root h1 {
    margin-bottom: 6px;
    color: var(--fl-color-primary);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
}

.frontlegal-root h2 {
    margin-bottom: 0;
    color: var(--fl-color-primary);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.4;
}

.frontlegal-root h3 {
    margin-bottom: 0;
    color: var(--fl-color-primary);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}

.frontlegal-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: currentColor;
}

.frontlegal-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.frontlegal-fallback,
.frontlegal-app-loading,
.frontlegal-loading,
.frontlegal-page-state,
.frontlegal-inline-loading {
    display: flex;
    min-height: 120px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-app-loading {
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
}

.frontlegal-spinner {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 2.5px solid var(--fl-color-border);
    border-top-color: var(--fl-color-secondary);
    border-radius: 50%;
    animation: frontlegal-spin 0.7s linear infinite;
}

@keyframes frontlegal-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes frontlegal-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}

/* 2  Application shell */

.frontlegal-app {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: var(--frontlegal-navigation-width) minmax(0, 1fr);
    background: var(--fl-color-surface);
}

.frontlegal-app.frontlegal-messages-mode {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
}

.frontlegal-workspace {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: 20px;
    padding: 20px 20px 20px 0;
}

.frontlegal-messages-mode .frontlegal-workspace {
    min-height: 0;
    height: 100%;
}

body.admin-bar .frontlegal-app.frontlegal-messages-mode {
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
}

.frontlegal-content {
    flex: 1;
    min-width: 0;
    padding: 34px var(--frontlegal-gutter) 48px;
    background: var(--fl-color-canvas);
    border-radius: var(--fl-radius-lg);
    background-clip: padding-box;
}

.frontlegal-messages-mode .frontlegal-content {
    display: flex;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 28px;
}

/* 3  Sidebar navigation */

.frontlegal-navigation {
    position: sticky;
    z-index: 50;
    top: 0;
    align-self: start;
    display: flex;
    width: var(--frontlegal-navigation-width);
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    flex-direction: column;
    background: var(--fl-color-surface);
}

body.admin-bar .frontlegal-navigation {
    top: 32px;
    height: calc(100dvh - 32px);
    max-height: calc(100dvh - 32px);
}

.frontlegal-navigation > header {
    display: flex;
    height: calc(var(--frontlegal-header-height) + 40px);
    flex: 0 0 calc(var(--frontlegal-header-height) + 40px);
    padding-bottom: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.frontlegal-root .frontlegal-brand {
    padding: 0;
    color: var(--fl-color-secondary);
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.03em;
    cursor: pointer;
}

.frontlegal-brand span,
.frontlegal-login-logo span {
    color: var(--fl-color-primary);
    font-weight: 800;
}

.frontlegal-navigation-close,
.frontlegal-menu-button {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--fl-color-text-muted);
    background: var(--fl-color-secondary-tint);
    border: 0;
    border-radius: var(--fl-radius-sm);
    cursor: pointer;
}

.frontlegal-navigation .frontlegal-navigation-close {
    background: transparent;
}

.frontlegal-navigation-close:hover,
.frontlegal-menu-button:hover {
    color: var(--fl-color-primary);
    background: var(--fl-color-surface-soft);
}

.frontlegal-context-switch {
    display: flex;
    margin: 14px 14px 4px;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    color: var(--fl-color-primary);
    background: var(--fl-color-surface-soft);
    border: 0;
    border-radius: var(--fl-radius-pill);
    font-size: .875rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.frontlegal-context-switch .frontlegal-icon {
    color: var(--fl-color-secondary);
}

.frontlegal-context-switch:hover {
    background: var(--fl-color-surface-soft);
}

.frontlegal-navigation > nav {
    flex: 1;
    padding: 12px 14px 20px;
    overflow-y: auto;
}

.frontlegal-navigation nav section + section {
    margin-top: 20px;
}

.frontlegal-navigation nav h2 {
    margin: 0 0 6px;
    padding: 0 10px;
    color: var(--fl-color-text-subtle);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-navigation nav button {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 13px;
    min-height: 48px;
    padding: 0 14px;
    color: var(--fl-color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--fl-radius-sm);
    font-size: 1rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: transform var(--frontlegal-motion-base) var(--frontlegal-motion-ease), opacity var(--frontlegal-motion-fast) var(--frontlegal-motion-ease);
}

.frontlegal-navigation nav button + button {
    margin-top: 2px;
}

.frontlegal-navigation nav button .frontlegal-icon {
    color: var(--fl-color-text-subtle);
    transition: transform var(--frontlegal-motion-base) var(--frontlegal-motion-ease), opacity var(--frontlegal-motion-fast) var(--frontlegal-motion-ease);
}

.frontlegal-navigation nav button span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frontlegal-navigation nav button:hover {
    color: var(--fl-color-primary);
    background: var(--fl-color-surface-soft);
}

.frontlegal-navigation nav button:hover .frontlegal-icon {
    color: var(--fl-color-secondary);
}

.frontlegal-navigation nav button.active {
    color: var(--fl-color-primary);
    background: var(--fl-gradient-soft);
}

.frontlegal-navigation nav button.active .frontlegal-icon {
    color: var(--fl-color-secondary);
}

.frontlegal-navigation nav button.active::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    background: var(--fl-color-secondary);
    border-radius: var(--fl-radius-pill);
    content: "";
    animation: frontlegal-navigation-indicator var(--frontlegal-motion-base) var(--frontlegal-motion-ease);
}

.frontlegal-navigation-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.frontlegal-navigation-profile:hover {
    background: var(--fl-color-surface-soft);
}

.frontlegal-navigation-profile > span:last-child {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.frontlegal-navigation-profile strong,
.frontlegal-navigation-profile small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frontlegal-navigation-profile strong {
    color: var(--fl-color-primary);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-navigation-profile small {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-navigation-backdrop {
    display: none;
    position: fixed;
    z-index: 45;
    inset: 0;
    padding: 0;
    background: var(--fl-color-overlay);
    animation: frontlegal-fade-in var(--frontlegal-motion-fast) var(--frontlegal-motion-ease);
    border: 0;
}

/* 4  Workspace header */

.frontlegal-app-header {
    position: sticky;
    z-index: 40;
    top: 20px;
    display: flex;
    height: var(--frontlegal-header-height);
    flex: 0 0 var(--frontlegal-header-height);
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 18px 0 var(--frontlegal-gutter);
    background: var(--fl-color-surface);
    border-radius: var(--fl-radius-lg);
}

body.admin-bar .frontlegal-app-header {
    top: 46px;
}

/* Keeps page content from showing through the gaps around the sticky header */
.frontlegal-app-header::before {
    position: absolute;
    z-index: -1;
    top: -20px;
    right: 0;
    bottom: -15px;
    left: 0;
    background: var(--fl-color-surface);
    content: "";
}

.frontlegal-header-title {
    display: flex;
    min-width: 0;
    flex: 0 1 auto;
    align-items: center;
    gap: 12px;
}

.frontlegal-header-title > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 8px;
}

.frontlegal-header-title .frontlegal-breadcrumb-home,
.frontlegal-header-title strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frontlegal-header-title .frontlegal-breadcrumb-home {
    padding: 0;
    color: var(--fl-color-text-muted);
    font: inherit;
    font-size: .875rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    flex: 0 100 auto;
    min-width: 0;
}

.frontlegal-header-title .frontlegal-breadcrumb-home::after {
    padding-left: 8px;
    color: var(--fl-color-border-strong);
    content: "/";
}

.frontlegal-header-title .frontlegal-breadcrumb-home:hover {
    color: var(--fl-color-secondary);
}

.frontlegal-header-title strong {
    color: var(--fl-color-primary);
    font-size: 1rem;
    font-weight: 600;
    flex: 0 1 auto;
    min-width: 0;
}

.frontlegal-header-search {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 340px;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: var(--fl-color-surface);
    border: 1px solid var(--fl-color-control-border);
    border-radius: var(--fl-radius-sm);
}

.frontlegal-header-search .frontlegal-icon {
    color: var(--fl-color-text-subtle);
}

.frontlegal-root .frontlegal-header-search input {
    min-height: 46px;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: .875rem;
}

.frontlegal-header-search input:hover {
    border: 0;
}

.frontlegal-header-search:focus-within {
    background: var(--fl-color-surface-active);
}

.frontlegal-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.frontlegal-network {
    padding: 5px 10px;
    color: var(--fl-color-warning);
    background: var(--fl-color-warning-soft);
    border-radius: var(--fl-radius-pill);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-notification-button {
    position: relative;
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--fl-color-text);
    background: var(--fl-color-secondary-tint);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.frontlegal-notification-button > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.frontlegal-notification-button b {
    position: absolute;
    top: -3px;
    right: -3px;
}

.frontlegal-notification-button .frontlegal-icon {
    color: var(--fl-color-text-muted);
}

.frontlegal-notification-button:hover {
    color: var(--fl-color-primary);
    background: var(--fl-color-surface-soft);
}

.frontlegal-presence {
    position: relative;
}

.frontlegal-presence-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    color: var(--fl-color-text);
    background: var(--fl-color-surface-soft);
    border: 0;
    border-radius: var(--fl-radius-pill);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.frontlegal-presence-button::after {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--frontlegal-motion-fast) var(--frontlegal-motion-ease);
}

.frontlegal-presence-button[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(225deg);
}

.frontlegal-presence-button:hover {
    background: var(--fl-color-secondary-tint);
}

.frontlegal-presence-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    background: var(--fl-color-presence-online);
    border-radius: 50%;
}

.frontlegal-presence-dot[data-status="busy"] {
    background: var(--fl-color-presence-busy);
}

.frontlegal-presence-dot[data-status="away"] {
    background: var(--fl-color-presence-away);
}

.frontlegal-presence-dot[data-status="offline"] {
    background: var(--fl-color-presence-offline);
}

.frontlegal-presence-menu {
    position: absolute;
    z-index: 41;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    width: 178px;
    padding: 6px;
    background: var(--fl-color-surface);
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-sm);
    transform-origin: top right;
}

.frontlegal-presence-menu button {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    color: var(--fl-color-text);
    background: transparent;
    border: 0;
    border-radius: var(--fl-radius-xs);
    font: inherit;
    font-size: .875rem;
    text-align: left;
    cursor: pointer;
}

.frontlegal-presence-menu button:hover,
.frontlegal-presence-menu button.active {
    background: var(--fl-color-surface-soft);
}

.frontlegal-header-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 5px;
    background: transparent;
    border: 0;
    border-radius: var(--fl-radius-pill);
    text-align: left;
    cursor: pointer;
}

.frontlegal-header-profile:hover {
    background: var(--fl-color-surface-soft);
}

.frontlegal-header-profile .frontlegal-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    font-size: .875rem;
}

.frontlegal-header-profile > span:last-child {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.frontlegal-header-profile strong,
.frontlegal-header-profile small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frontlegal-header-profile strong {
    color: var(--fl-color-primary);
    font-size: 1rem;
    font-weight: 600;
}

.frontlegal-header-profile small {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-navigation-foot {
    padding: 10px 14px 16px;
}

.frontlegal-navigation-logout {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 13px;
    min-height: 48px;
    padding: 0 14px;
    color: var(--fl-color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--fl-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.frontlegal-navigation-logout .frontlegal-icon {
    color: var(--fl-color-text-subtle);
    transform: rotate(180deg);
}

.frontlegal-navigation-logout:hover {
    color: var(--fl-color-primary);
    background: var(--fl-color-surface-soft);
}

.frontlegal-navigation-logout:hover .frontlegal-icon {
    color: var(--fl-color-secondary);
}

.frontlegal-app-header b,
.frontlegal-mobile-nav b,
.frontlegal-notification-button b,
.frontlegal-navigation nav button b,
.frontlegal-conversation-meta b {
    display: inline-flex;
    min-width: 19px;
    height: 19px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    color: var(--fl-color-on-primary);
    background: var(--fl-color-secondary);
    border-radius: var(--fl-radius-pill);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-notification-menu {
    position: absolute;
    z-index: 41;
    box-shadow: var(--fl-shadow-pop);
    top: calc(100% + 8px);
    right: 18px;
    display: grid;
    width: min(360px, calc(100vw - 32px));
    max-height: 420px;
    overflow-y: auto;
    background: var(--fl-color-surface);
    border-radius: var(--fl-radius-md);
    transform-origin: top right;
}

.frontlegal-notification-menu header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
}

.frontlegal-notification-menu header button {
    padding: 0;
    color: var(--fl-color-secondary);
    background: transparent;
    border: 0;
    font-size: .875rem;
    cursor: pointer;
}

.frontlegal-notification-menu > button {
    display: grid;
    gap: 3px;
    padding: 12px 16px;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.frontlegal-notification-menu > button.message {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.frontlegal-notification-menu > button.message .frontlegal-avatar {
    width: 38px;
    height: 38px;
    font-size: .875rem;
}

.frontlegal-notification-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.frontlegal-notification-copy > span {
    display: -webkit-box;
    overflow: hidden;
    color: var(--fl-color-text);
    font-size: .875rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.frontlegal-notification-copy time {
    margin-top: 3px;
    color: var(--fl-color-text-subtle);
    font-size: .875rem;
}

.frontlegal-notification-menu > button:hover {
    background: var(--fl-color-surface-soft);
}

.frontlegal-notification-menu > button strong {
    color: var(--fl-color-primary);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-notification-menu > button.unread strong::after {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 7px;
    background: var(--fl-color-secondary);
    border-radius: 50%;
    content: "";
    vertical-align: middle;
}

.frontlegal-notification-menu small {
    color: var(--fl-color-text-subtle);
    font-size: .875rem;
}

.frontlegal-mobile-nav {
    display: none;
}

/* 5  Page primitives */

.frontlegal-page {
    display: grid;
    gap: 26px;
    align-content: start;
}

.frontlegal-narrow-page {
    max-width: 760px;
}

.frontlegal-page-heading,
.frontlegal-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.frontlegal-page-heading p,
.frontlegal-page-header p,
.frontlegal-payment-builder fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.frontlegal-payment-builder .frontlegal-section {
    padding: var(--frontlegal-space-field) 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.frontlegal-payment-builder .frontlegal-form label.frontlegal-checkbox-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.frontlegal-payment-builder .frontlegal-row-actions {
    flex-wrap: wrap;
}

/* Keeps the editor spacious without widening unrelated drawers. */
.frontlegal-root .frontlegal-dialog.frontlegal-dialog-editor { width: min(1440px, 96vw); max-width: 96vw; }
.frontlegal-root .frontlegal-dialog-editor .frontlegal-drawer-body { padding: 16px 32px 32px; }
.frontlegal-builder-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.frontlegal-builder-intro > div { min-width: 0; }
.frontlegal-builder-intro h2 { margin: 0 0 8px; overflow-wrap: anywhere; }
.frontlegal-builder-intro p { margin: 0; color: var(--fl-color-text-muted); }
.frontlegal-builder-intro > button { flex-shrink: 0; }
.frontlegal-root .frontlegal-dialog-editor .frontlegal-payment-builder { padding: 0; background: transparent; box-shadow: none; }
.frontlegal-payment-builder > .frontlegal-button { justify-self: start; }
.frontlegal-builder-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.frontlegal-builder-toolbar > label:first-child { flex: 1; min-width: 200px; }
.frontlegal-builder-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "canvas sidebar"; gap: 24px; align-items: start; }
.frontlegal-builder-canvas { grid-area: canvas; min-width: 0; display: grid; gap: 24px; background: var(--fl-color-canvas); border-radius: var(--fl-radius-md); padding: 24px; }
.frontlegal-builder-sidebar { grid-area: sidebar; min-width: 0; position: sticky; top: 0; padding: 20px; background: var(--fl-color-surface-soft); border-radius: 16px; }
.frontlegal-builder-page { min-width: 0; background: var(--fl-color-surface); border-radius: 16px; padding: 20px; }
.frontlegal-builder-page-heading { display: grid; gap: 12px; margin-bottom: 16px; }
.frontlegal-builder-page-heading .frontlegal-status-label { justify-self: start; }
.frontlegal-builder-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.frontlegal-builder-switch button { border: 0; border-radius: var(--fl-radius-pill); padding: 12px 16px; min-height: 44px; color: var(--fl-color-primary); background: var(--fl-color-secondary-tint); font: inherit; cursor: pointer; }
.frontlegal-builder-switch button[aria-pressed="true"] { background: var(--fl-color-secondary-soft); color: var(--fl-color-secondary); }
.frontlegal-builder-switch button:disabled { opacity: .5; cursor: default; }
.frontlegal-builder-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.frontlegal-builder-library .frontlegal-button { padding: 12px; font-size: .875rem; white-space: normal; }
.frontlegal-builder-help { font-size: .875rem; color: var(--fl-color-text-muted); }
.frontlegal-builder-field { display: grid; gap: 12px; width: 100%; min-width: 0; padding: 16px; border: 1px solid var(--fl-color-border); border-radius: var(--fl-radius-sm); background: var(--fl-color-surface); color: var(--fl-color-text); text-align: left; cursor: grab; font: inherit; transition: border-color 160ms, background-color 160ms; }
.frontlegal-builder-field:hover, .frontlegal-builder-field.selected { border-color: var(--fl-color-secondary); background: var(--fl-color-secondary-tint); }
.frontlegal-builder-field.locked { cursor: pointer; }
.frontlegal-builder-field-heading { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; font-weight: 600; }
.frontlegal-builder-field small { font-size: .875rem; color: var(--fl-color-text-muted); overflow-wrap: anywhere; }
.frontlegal-builder-field-example { display: block; border: 1px solid var(--fl-color-border); border-radius: var(--fl-radius-xs); padding: 12px; color: var(--fl-color-text-muted); font-size: .875rem; background: var(--fl-color-surface); overflow-wrap: anywhere; }
.frontlegal-builder-field-example.multiline { min-height: 80px; }
.frontlegal-builder-fields { position: relative; display: grid; gap: 16px; }
.frontlegal-builder-field-row { position: relative; min-width: 0; }
.frontlegal-builder-card { display: flex; align-items: flex-start; gap: 8px; background: var(--fl-color-surface); border: 1px solid var(--fl-color-border); border-radius: var(--fl-radius-sm); }
.frontlegal-builder-card.selected { border-color: var(--fl-color-secondary); }
.frontlegal-builder-card > .frontlegal-drag-handle { flex: 0 0 44px; margin: 8px 0 0 4px; touch-action: none; cursor: grab; }
.frontlegal-builder-card > .frontlegal-builder-field { flex: 1; border: 0; cursor: pointer; }
.frontlegal-builder-card.is-dragging { z-index: 100; pointer-events: none; box-sizing: border-box; box-shadow: var(--fl-shadow-drag); }
.frontlegal-builder-field-row.drop-before::before, .frontlegal-builder-field-row.drop-after::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; border-radius: var(--fl-radius-pill); background: var(--fl-color-secondary); }
.frontlegal-builder-field-row.drop-before::before { top: -9px; }
.frontlegal-builder-field-row.drop-after::after { bottom: -9px; }
.frontlegal-builder-add-field { display: grid; gap: 12px; justify-items: start; padding-top: 16px; }

/* Shares numbered page steps between the preview and native Gravity Forms. */
.frontlegal-root .frontlegal-form-preview { gap: 24px; width: 100%; max-width: 960px; padding-top: 8px; }
.frontlegal-root .frontlegal-form-preview > :is(h3, h4, p) { margin: 0; }
.frontlegal-root .frontlegal-form-preview > h4 { font-size: 1.25rem; font-weight: 600; }
.frontlegal-root .frontlegal-form-steps,
.frontlegal-root .frontlegal-form-host .gform_wrapper .gf_page_steps { display: flex; align-items: center; flex-wrap: nowrap; gap: 24px; width: 100%; max-width: 100%; overflow-x: auto; padding: 8px 4px 16px; margin: 0 0 24px; border: 0; overflow: hidden; touch-action: pan-y; scrollbar-width: none; -ms-overflow-style: none; }
.frontlegal-root .frontlegal-form-step,
.frontlegal-root .frontlegal-form-host .gform_wrapper .gf_step { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 12px; max-width: 280px; padding: 4px; margin: 0; border: 0; background: transparent; opacity: 1; color: var(--fl-color-text-muted); font: inherit; font-weight: 600; line-height: 1.4; text-align: left; }
.frontlegal-root .frontlegal-form-step { cursor: pointer; border-radius: var(--fl-radius-sm); }
.frontlegal-root .frontlegal-form-step-number,
.frontlegal-root .frontlegal-form-host .gform_wrapper .gf_step_number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--fl-color-border-strong); border-radius: 50%; background: var(--fl-color-secondary-tint); color: var(--fl-color-text-muted); font: inherit; font-weight: 600; }
.frontlegal-root .frontlegal-form-host .gform_wrapper .gf_step_number::before,
.frontlegal-root .frontlegal-form-host .gform_wrapper .gf_step_number::after { display: none; }
.frontlegal-root .frontlegal-form-step[aria-current="step"],
.frontlegal-root .frontlegal-form-host .gform_wrapper .gf_step_active { color: var(--fl-color-primary); }
.frontlegal-root .frontlegal-form-step[aria-current="step"] .frontlegal-form-step-number,
.frontlegal-root .frontlegal-form-host .gform_wrapper .gf_step_active .gf_step_number { background: var(--fl-color-primary); color: var(--fl-color-on-primary); border-color: var(--fl-color-primary); box-shadow: 0 0 0 4px var(--fl-color-border); }
.frontlegal-root .frontlegal-form-host .gform_wrapper .gf_step_label { display: block; padding: 0; font: inherit; color: inherit; white-space: normal; }
.frontlegal-root .frontlegal-form-step:hover { color: var(--fl-color-secondary); background: var(--fl-color-secondary-tint); }
.frontlegal-root .frontlegal-form-step:focus-visible { outline: 2px solid var(--fl-color-secondary); outline-offset: 2px; }
.frontlegal-root .frontlegal-form-preview .frontlegal-form-steps { margin: 0; padding-bottom: 8px; }
.frontlegal-root .frontlegal-form-steps::-webkit-scrollbar,
.frontlegal-root .frontlegal-form-host .gform_wrapper .gf_page_steps::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (max-width: 767px) {
    .frontlegal-root .frontlegal-form-steps, .frontlegal-root .frontlegal-form-host .gform_wrapper .gf_page_steps { gap: 16px; }
    .frontlegal-root .frontlegal-form-step, .frontlegal-root .frontlegal-form-host .gform_wrapper .gf_step { max-width: 220px; }
}
.frontlegal-builder-field:focus-visible, .frontlegal-builder-switch button:focus-visible { outline: 2px solid var(--fl-color-secondary); outline-offset: 2px; }
@media (max-width: 980px) {
    .frontlegal-root .frontlegal-dialog.frontlegal-dialog-editor { width: 100%; max-width: 100%; }
    .frontlegal-root .frontlegal-dialog.frontlegal-dialog-editor .frontlegal-drawer-body { padding: 16px 24px 32px; }
    .frontlegal-builder-workspace { grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; }
    .frontlegal-builder-canvas, .frontlegal-builder-sidebar { padding: 16px; }
    .frontlegal-builder-page { padding: 16px; }
}
@media (max-width: 767px) {
    .frontlegal-root .frontlegal-dialog.frontlegal-dialog-editor .frontlegal-drawer-body { padding: 16px 20px 32px; }
    .frontlegal-builder-intro { align-items: flex-start; flex-direction: column; gap: 16px; }
    .frontlegal-builder-intro > button { align-self: flex-start; }
    .frontlegal-builder-workspace { display: flex; flex-direction: column; }
    .frontlegal-builder-sidebar, .frontlegal-builder-canvas { width: 100%; position: static; }
    .frontlegal-builder-canvas { padding: 0; background: transparent; }
    .frontlegal-builder-page { padding: 0; }
    .frontlegal-builder-sidebar { padding: 16px; }
    .frontlegal-builder-toolbar > * { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .frontlegal-builder-field { transition: none; } }

.frontlegal-section-heading p {
    margin: 0;
    color: var(--fl-color-text-muted);
    font-size: 1rem;
}

.frontlegal-page-actions,
.frontlegal-header-actions,
.frontlegal-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.frontlegal-section {
    display: grid;
    min-width: 0;
    gap: var(--frontlegal-space-field);
    align-content: start;
    padding: var(--frontlegal-space-card);
    background: var(--fl-color-surface);
    border-radius: var(--fl-radius-md);
    box-shadow: var(--fl-shadow-card);
}

.frontlegal-section > h2,
.frontlegal-section > h3 {
    padding: 0;
}

.frontlegal-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0;
}

.frontlegal-section-heading h2 {
    font-size: 1.25rem;
}

.frontlegal-section-heading button {
    padding: 8px 16px;
    color: var(--fl-color-primary);
    background: var(--fl-color-secondary-tint);
    border: 0;
    border-radius: var(--fl-radius-pill);
    font-size: .875rem;
    white-space: nowrap;
    cursor: pointer;
}

.frontlegal-section-heading button:hover {
    background: var(--fl-color-surface-soft);
}

.frontlegal-stack {
    display: grid;
    gap: 18px;
}

.frontlegal-stack.compact {
    gap: 10px;
}

.frontlegal-alert,
.frontlegal-error {
    margin: 0;
    padding: 12px 14px;
    color: var(--fl-color-danger);
    background: var(--fl-color-danger-soft);
    border-radius: var(--fl-radius-sm);
    font-size: .875rem;
}

.frontlegal-alert button {
    margin-left: 6px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.frontlegal-root p.frontlegal-error[role="alert"] {
    width: 100%;
    max-width: 760px;
    text-align: left;
    overflow-wrap: anywhere;
}

.frontlegal-help,
.frontlegal-muted {
    margin: 0;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-empty {
    padding: 14px 12px;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-empty-panel,
.frontlegal-panel-empty,
.frontlegal-dependency-notice,
.frontlegal-board-empty,
.frontlegal-chat-placeholder {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 48px 28px;
    background: var(--fl-color-surface);
    border-radius: var(--fl-radius-md);
    box-shadow: var(--fl-shadow-card);
    text-align: center;
}

.frontlegal-panel-empty,
.frontlegal-conversation-empty {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.frontlegal-empty-panel.compact,
.frontlegal-panel-empty.compact,
.frontlegal-dependency-notice.compact {
    padding: 22px 18px;
}

.frontlegal-empty-panel > .frontlegal-icon,
.frontlegal-dependency-notice > .frontlegal-icon,
.frontlegal-chat-placeholder .frontlegal-placeholder-mark {
    display: flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    padding: 11px;
    color: var(--fl-color-secondary);
    background: var(--fl-color-secondary-soft);
    border-radius: var(--fl-radius-md);
}

.frontlegal-empty-panel h2,
.frontlegal-panel-empty strong,
.frontlegal-dependency-notice h2,
.frontlegal-board-empty h2,
.frontlegal-chat-placeholder h2 {
    color: var(--fl-color-primary);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-empty-panel p,
.frontlegal-panel-empty p,
.frontlegal-dependency-notice p,
.frontlegal-board-empty p,
.frontlegal-chat-placeholder p {
    margin: 0;
    max-width: 44ch;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-empty-panel .frontlegal-button,
.frontlegal-dependency-notice .frontlegal-button,
.frontlegal-board-empty .frontlegal-button,
.frontlegal-chat-placeholder .frontlegal-button,
.frontlegal-panel-empty button {
    margin-top: 10px;
}

.frontlegal-panel-empty > button {
    padding: 8px 14px;
    color: var(--fl-color-primary);
    background: var(--fl-color-secondary-tint);
    border-radius: var(--fl-radius-sm);
    font-size: .875rem;
    cursor: pointer;
}

.frontlegal-panel-empty > button:hover {
    background: var(--fl-color-surface-soft);
}

/* 6  Controls */

.frontlegal-root .frontlegal-button,
.frontlegal-form-actions button,
.frontlegal-comment-form button[type="submit"] {
    --frontlegal-button-hover: var(--fl-gradient-soft-hover);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 20px;
    color: var(--fl-color-secondary);
    background: var(--fl-gradient-soft);
    border-radius: var(--fl-radius-pill);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.frontlegal-root .frontlegal-button:hover,
.frontlegal-form-actions button:hover {
    background: var(--fl-gradient-soft);
}

/* Crossfades gradients without covering button text or intercepting clicks. */
.frontlegal-root .frontlegal-button::before,
.frontlegal-form-actions button::before,
.frontlegal-comment-form button[type="submit"]::before,
.frontlegal-root .frontlegal-pagination > button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: var(--frontlegal-button-hover, var(--fl-gradient-soft-hover));
    opacity: 0;
    transition: opacity var(--frontlegal-motion-panel) ease-in-out;
}

.frontlegal-root .frontlegal-button:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible)::before,
.frontlegal-form-actions button:not(:disabled):is(:hover, :focus-visible)::before,
.frontlegal-comment-form button[type="submit"]:not(:disabled):is(:hover, :focus-visible)::before,
.frontlegal-root .frontlegal-pagination > button:not(:disabled):is(:hover, :focus-visible)::before { opacity: 1; }

.frontlegal-root .frontlegal-button-primary,
.frontlegal-comment-form button[type="submit"],
.frontlegal-form-actions button[type="submit"] {
    --frontlegal-button-hover: var(--fl-gradient-accent-hover);
    color: var(--fl-color-on-primary);
    background: var(--fl-gradient-accent);
}

.frontlegal-root .frontlegal-button-primary:hover,
.frontlegal-comment-form button[type="submit"]:hover,
.frontlegal-form-actions button[type="submit"]:hover {
    background: var(--fl-gradient-accent);
}

.frontlegal-root .frontlegal-button.secondary {
    --frontlegal-button-hover: var(--fl-gradient-soft-hover);
    color: var(--fl-color-secondary);
    background: var(--fl-gradient-soft);
}

.frontlegal-root .frontlegal-button.secondary:hover {
    background: var(--fl-gradient-soft);
}

.frontlegal-root .frontlegal-button.danger {
    color: var(--fl-color-surface);
    background: var(--fl-color-danger);
}

.frontlegal-root .frontlegal-button.danger:hover {
    background: var(--fl-color-danger-hover);
}

.frontlegal-root .frontlegal-button.danger::before { content: none; }

.frontlegal-root .frontlegal-button:disabled {
    color: var(--fl-color-text-subtle);
    background: var(--fl-color-surface-soft);
    box-shadow: none;
    cursor: not-allowed;
}

.frontlegal-icon-button {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--fl-color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--fl-radius-xs);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.frontlegal-icon-button:hover {
    color: var(--fl-color-primary);
    background: var(--fl-color-surface-soft);
}

.frontlegal-text-button,
.frontlegal-back-link,
.frontlegal-text-link,
.frontlegal-row-actions button,
.frontlegal-admin-list > article > button,
.frontlegal-board-actions button,
.frontlegal-comment footer button,
.frontlegal-message-actions button,
.frontlegal-message-bubble footer button,
.frontlegal-inline-edit button,
.frontlegal-comment-form > div button[type="button"] {
    min-height: 44px;
    padding: 10px 9px;
    color: var(--fl-color-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--fl-radius-xs);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.frontlegal-text-button:hover,
.frontlegal-back-link:hover,
.frontlegal-text-link:hover,
.frontlegal-row-actions button:hover,
.frontlegal-admin-list > article > button:hover,
.frontlegal-board-actions button:hover,
.frontlegal-comment footer button:hover,
.frontlegal-message-actions button:hover,
.frontlegal-inline-edit button:hover {
    color: var(--fl-color-primary);
}

.frontlegal-row-actions button:disabled {
    color: var(--fl-color-text-subtle);
    background: transparent;
    cursor: not-allowed;
}

.frontlegal-back-link {
    justify-self: start;
    margin-left: -9px;
}

.frontlegal-root input,
.frontlegal-root textarea,
.frontlegal-root select {
    width: 100%;
    min-height: 48px;
    padding: 11px 16px;
    color: var(--fl-color-text);
    background: var(--fl-color-surface);
    border: 1px solid var(--fl-color-control-border);
    border-radius: var(--fl-radius-sm);
    font-size: 1rem;
    line-height: 1.5;
}

.frontlegal-root input::placeholder,
.frontlegal-root textarea::placeholder {
    color: var(--fl-color-text-muted);
}

/* Keeps native select behavior with an inset, rounded chevron. */
.frontlegal-root select:not([multiple]):not([size]) {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23526579' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 16px center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
}

@media (forced-colors: active) {
    .frontlegal-root select:not([multiple]):not([size]) { appearance: auto; background-image: none; }
}

.frontlegal-root .frontlegal-board-detail :is(button, a, button:hover, a:hover, button:focus-visible, a:focus-visible) {
    text-decoration: none;
}

.frontlegal-stat-grid.frontlegal-admin-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.frontlegal-integration-navigation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.frontlegal-integration-status { display: grid; gap: 24px; }
.frontlegal-news-sources-table td { vertical-align: top; }
.frontlegal-news-sources-table td small { display: block; margin-top: 4px; }
.frontlegal-news-sources-table .frontlegal-news-source-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.frontlegal-news-sources-table .frontlegal-news-source-actions > button { min-height: 44px; padding: 8px 12px; font-size: .875rem; }
.frontlegal-integration-navigation > button { display: grid; gap: 4px; padding: 20px; border: 1px solid transparent; border-radius: var(--fl-radius-md); background: var(--fl-color-surface); color: var(--fl-color-text); text-align: left; }
.frontlegal-integration-navigation > button span { font-size: .875rem; font-weight: 400; color: var(--fl-color-text-muted); }
.frontlegal-integration-navigation > button[aria-pressed="true"] { border-color: var(--fl-color-secondary); background: var(--fl-color-secondary-soft); }
.frontlegal-integration-navigation > button:hover { background: var(--fl-color-secondary-soft); }
.frontlegal-setup-guide > summary { cursor: pointer; min-height: 44px; font-weight: 600; }
.frontlegal-setup-guide[open] > summary { margin-bottom: 16px; }
@media (max-width: 980px) { .frontlegal-integration-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .frontlegal-integration-navigation { grid-template-columns: minmax(0, 1fr); } }
.frontlegal-page:has(.frontlegal-admin-stat-grid) .frontlegal-admin-columns { align-items: stretch; }
.frontlegal-page:has(.frontlegal-admin-stat-grid) .frontlegal-admin-columns > .frontlegal-panel { align-self: stretch; height: 100%; box-sizing: border-box; }
@media (max-width: 980px) {
    .frontlegal-stat-grid.frontlegal-admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .frontlegal-stat-grid.frontlegal-admin-stat-grid { grid-template-columns: minmax(0, 1fr); }
}

.frontlegal-root input:hover,
.frontlegal-root textarea:hover,
.frontlegal-root select:hover {
    border-color: var(--fl-color-secondary);
}

.frontlegal-root textarea {
    min-height: 144px;
    resize: vertical;
}

.frontlegal-root input[type="checkbox"] {
    width: 17px;
    height: 17px;
    min-height: 0;
    flex: 0 0 17px;
    padding: 0;
    accent-color: var(--fl-color-secondary);
    cursor: pointer;
}

.frontlegal-form,
.frontlegal-form-grid {
    display: grid;
    gap: var(--frontlegal-space-card);
}

.frontlegal-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.frontlegal-root fieldset.frontlegal-form-grid {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.frontlegal-app .frontlegal-pagination {
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.frontlegal-root .frontlegal-pagination > button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 20px;
    border: 0;
    border-radius: var(--fl-radius-pill);
    background: var(--fl-gradient-soft);
    color: var(--fl-color-secondary);
    font-size: 1rem;
    line-height: 1.4;
    cursor: pointer;
}

.frontlegal-root .frontlegal-pagination > button:not(:disabled):hover {
    background: var(--fl-gradient-soft);
    color: var(--fl-color-primary);
}

.frontlegal-root .frontlegal-pagination > button:disabled {
    border-color: var(--fl-color-border);
    background: var(--fl-color-surface-soft);
    color: var(--fl-color-text-subtle);
    cursor: not-allowed;
}

.frontlegal-app nav.frontlegal-pagination {
    gap: 8px;
    flex-wrap: nowrap;
}

.frontlegal-root .frontlegal-pagination-pages {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.frontlegal-root .frontlegal-pagination-pages > li {
    display: flex;
    margin: 0;
    padding: 0;
}

.frontlegal-root .frontlegal-pagination > .frontlegal-pagination-arrow,
.frontlegal-root .frontlegal-pagination-pages button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--fl-radius-pill);
    background: var(--fl-gradient-soft);
    color: var(--fl-color-secondary);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: color var(--frontlegal-motion-panel) ease-in-out;
}

.frontlegal-root .frontlegal-pagination > .frontlegal-pagination-arrow svg {
    display: block;
    width: 20px;
    height: 20px;
}

.frontlegal-root .frontlegal-pagination-pages button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: var(--fl-gradient-soft-hover);
    opacity: 0;
    transition: opacity var(--frontlegal-motion-panel) ease-in-out;
}

.frontlegal-root .frontlegal-pagination-pages button:not(:disabled):not(.active):is(:hover, :focus-visible) {
    color: var(--fl-color-primary);
}

.frontlegal-root .frontlegal-pagination-pages button:not(:disabled):not(.active):is(:hover, :focus-visible)::before { opacity: 1; }

.frontlegal-root .frontlegal-pagination-pages button.active {
    background: var(--fl-gradient-accent);
    color: var(--fl-color-on-primary);
    cursor: default;
}

.frontlegal-root .frontlegal-pagination-pages button:disabled:not(.active) {
    background: var(--fl-color-surface-soft);
    color: var(--fl-color-text-subtle);
    cursor: not-allowed;
}

.frontlegal-root .frontlegal-pagination-gap {
    align-items: center;
    justify-content: center;
    min-width: 20px;
    color: var(--fl-color-text-muted);
    font-size: .9375rem;
    user-select: none;
}

@media (max-width: 767px) {
    .frontlegal-app nav.frontlegal-pagination { gap: 4px; }

    .frontlegal-root .frontlegal-pagination > .frontlegal-pagination-arrow,
    .frontlegal-root .frontlegal-pagination-pages button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        font-size: .875rem;
    }

    .frontlegal-root .frontlegal-pagination-gap { min-width: 16px; }
}

.frontlegal-root .frontlegal-row-action-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; min-width: 104px; }
.frontlegal-root .frontlegal-row-action-chevron { display: block; flex: 0 0 20px; width: 20px; height: 20px; }

.frontlegal-root.frontlegal-floating-member-actions {
    position: fixed;
    min-height: 0;
    height: auto;
    align-content: start;
    box-sizing: border-box;
    z-index: 1100;
    display: grid;
    gap: 4px;
    width: min(240px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-sm);
    background: var(--fl-color-surface);
    box-shadow: var(--fl-shadow-pop);
}
.frontlegal-root.frontlegal-floating-member-actions > :is(button, a) {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--fl-radius-xs);
    color: var(--fl-color-text);
    background: transparent;
    text-align: left;
    text-decoration: none;
}
.frontlegal-root.frontlegal-floating-member-actions > :is(button, a):hover { background: var(--fl-color-secondary-soft); }

.frontlegal-app .frontlegal-member-actions summary {
    cursor: pointer;
    padding: 8px 12px;
    color: var(--fl-color-primary);
    background: var(--fl-color-surface-soft);
    border-radius: 8px;
}

.frontlegal-app .frontlegal-member-actions .frontlegal-row-actions {
    display: grid;
    gap: 4px;
    margin-top: 8px;
}

.frontlegal-root .frontlegal-office-assignment {
    display: grid;
    gap: 16px;
    margin-top: 24px;
    padding: 24px 0 0;
    border-top: 1px solid var(--fl-color-border);
    min-width: 0;
}

.frontlegal-root .frontlegal-office-assignment > header {
    display: grid;
    gap: 6px;
}

.frontlegal-root .frontlegal-office-assignment h3 {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.frontlegal-root .frontlegal-office-assignment .frontlegal-help {
    margin: 0;
    padding: 0;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--fl-color-text-muted);
}

.frontlegal-root .frontlegal-office-assignment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.frontlegal-root .frontlegal-office-create {
    padding: 16px;
    border-radius: 10px;
    background: var(--fl-color-surface-soft);
}

.frontlegal-root .frontlegal-office-create input {
    background: var(--fl-color-surface);
}

@media (max-width: 767px) {
    .frontlegal-app .frontlegal-profile-form .frontlegal-form-grid,
    .frontlegal-app .frontlegal-office-assignment .frontlegal-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.frontlegal-form-grid label.wide,
.frontlegal-form-grid label:only-child {
    grid-column: 1 / -1;
}

.frontlegal-form label,
.frontlegal-form-grid label,
.frontlegal-search,
.frontlegal-board-filters label,
.frontlegal-filterbar label,
.frontlegal-inline-form label {
    display: grid;
    min-width: 0;
    gap: 8px;
    color: var(--fl-color-primary);
    font-size: 1rem;
    font-weight: 600;
}

.frontlegal-checkbox,
.frontlegal-checkbox-field {
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: 12px;
    font-size: 1rem;
    font-weight: 600;
}

.frontlegal-checkbox input,
.frontlegal-checkbox-field input {
    width: 17px;
    flex: 0 0 17px;
}

.frontlegal-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.frontlegal-filterbar,
.frontlegal-board-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding: 18px 20px;
    background: var(--fl-color-surface);
    border-radius: var(--fl-radius-md);
    box-shadow: var(--fl-shadow-card);
}

.frontlegal-filterbar label:first-child,
.frontlegal-board-filters label:first-child {
    flex: 1 1 260px;
}

.frontlegal-filterbar label,
.frontlegal-inline-form label {
    flex: 0 1 200px;
}

.frontlegal-board-filters {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.frontlegal-board-count {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
    white-space: nowrap;
}

.frontlegal-inline-form {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.frontlegal-inline-form textarea {
    grid-column: 1 / -1;
}

.frontlegal-form-stack {
    display: grid;
    gap: 14px;
}

.frontlegal-form-stack > label {
    display: grid;
    gap: 6px;
    color: var(--fl-color-primary);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-editor-section {
    display: grid;
    gap: 14px;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.frontlegal-editor-section > header h2,
.frontlegal-editor-section > header p {
    margin: 0;
}

.frontlegal-editor-section > header p {
    margin-top: 4px;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-check-label {
    display: flex !important;
    align-items: center;
    gap: 9px;
}

.frontlegal-status-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 4px 8px;
    color: var(--fl-color-text-muted);
    background: var(--fl-color-surface-soft);
    border-radius: var(--fl-radius-pill);
    font-size: .875rem;
    font-weight: 400;
    letter-spacing: 0.005em;
    white-space: normal;
}

.frontlegal-status-label[data-status="active"],
.frontlegal-status-label[data-status="published"],
.frontlegal-status-label[data-status="paid"],
.frontlegal-status-label[data-status="completed"],
.frontlegal-status-label[data-status="success"],
.frontlegal-status-label[data-status="attended"] {
    color: var(--fl-color-success);
    background: var(--fl-color-success-soft);
}

.frontlegal-status-label[data-status="pending"],
.frontlegal-status-label[data-status="processing"],
.frontlegal-status-label[data-status="registered"],
.frontlegal-status-label[data-status="restricted"] {
    color: var(--fl-color-warning);
    background: var(--fl-color-warning-soft);
}

.frontlegal-status-label[data-status="blocked"],
.frontlegal-status-label[data-status="failed"],
.frontlegal-status-label[data-status="denied"],
.frontlegal-status-label[data-status="expired"],
.frontlegal-status-label[data-status="cancelled"],
.frontlegal-status-label[data-status="rejected"] {
    color: var(--fl-color-danger);
    background: var(--fl-color-danger-soft);
}

.frontlegal-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.frontlegal-chip-list span,
.frontlegal-chip-list button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    color: var(--fl-color-primary);
    background: var(--fl-color-secondary-soft);
    border: 0;
    border-radius: var(--fl-radius-pill);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-chip-list button {
    cursor: pointer;
}

.frontlegal-checklist-editor {
    display: grid;
    gap: 24px;
}

.frontlegal-editor-details {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px;
    background: var(--fl-color-surface-soft);
    border-radius: var(--fl-radius-md);
}

.frontlegal-editor-details label {
    display: grid;
    gap: 7px;
    color: var(--fl-color-primary);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-editor-details label.wide {
    grid-column: 1 / -1;
}

.frontlegal-editor-details input,
.frontlegal-editor-details textarea {
    background: var(--fl-color-surface);
}

.frontlegal-editor-section > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.frontlegal-editor-item-count {
    flex: 0 0 auto;
    padding: 5px 10px;
    color: var(--fl-color-text-muted);
    background: var(--fl-color-surface-soft);
    border-radius: var(--fl-radius-pill);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

.frontlegal-editor-add-item {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.frontlegal-editor-add-item label {
    min-width: 0;
}

.frontlegal-editor-add-item .frontlegal-button {
    min-height: 46px;
}

.frontlegal-sortable-items {
    gap: 8px;
}

.frontlegal-sortable-items li {
    padding: 14px;
    margin: 0 !important;
    min-height: 0;
    overflow: hidden;
    background: var(--fl-color-surface);
    display: block;
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-sm);
    transition: transform var(--frontlegal-motion-panel) var(--frontlegal-motion-ease), border-color 140ms ease, background-color 140ms ease, opacity 140ms ease;
}

.frontlegal-ordered-items.frontlegal-sortable-items li:nth-child(even) {
    background: var(--fl-color-surface-soft);
}

.frontlegal-editor-item {
    display: grid;
    gap: 10px;
    padding: 10px 15px;
}

.frontlegal-editor-item > * {
    margin: 0 !important;
}

.frontlegal-editor-item-heading {
    display: grid;
    align-items: center;
    gap: 10px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
}

.frontlegal-editor-item-field {
    display: block;
    min-width: 0;
}

.frontlegal-editor-item-heading .frontlegal-editor-item-field input {
    min-height: 40px;
    padding: 8px 10px;
}

.frontlegal-editor-item-field input {
    background: var(--fl-color-surface-soft);
}

.frontlegal-editor-required {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.frontlegal-editor-required input {
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
}

.frontlegal-editor-item-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--fl-color-border);
}

.frontlegal-editor-item-actions button {
    padding: 6px 9px;
    color: var(--fl-color-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--fl-radius-xs);
    font-size: .875rem;
    cursor: pointer;
}

.frontlegal-editor-item-actions .frontlegal-editor-remove {
    color: var(--fl-color-danger);
}

.frontlegal-dialog:has(.frontlegal-checklist-editor) .frontlegal-drawer-actions {
    padding: 14px 24px;
    background: var(--fl-color-surface);
    border-top: 1px solid var(--fl-color-border);
}

.frontlegal-chip-list button:hover {
    background: var(--fl-color-border);
}

.frontlegal-avatar {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--fl-color-on-primary);
    background: var(--fl-color-secondary);
    border-radius: 50%;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.frontlegal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.frontlegal-avatar.large {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    font-size: 1.125rem;
}

.frontlegal-avatar.square {
    border-radius: var(--fl-radius-xs);
}

.frontlegal-progress {
    height: 6px;
    overflow: hidden;
    background: var(--fl-color-border);
    border-radius: var(--fl-radius-pill);
}

.frontlegal-progress span {
    display: block;
    height: 100%;
    background: var(--fl-color-secondary);
    border-radius: var(--fl-radius-pill);
}

.frontlegal-progress-label {
    display: grid;
    justify-items: end;
    gap: 1px;
}

.frontlegal-progress-label strong {
    color: var(--fl-color-primary);
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.frontlegal-progress-label span {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-health-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-top: 6px;
    background: var(--fl-color-border-strong);
    border-radius: 50%;
}

.frontlegal-health-dot.active {
    background: var(--fl-color-success);
}

/* 7  Cards, lists and tables */

.frontlegal-card-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.frontlegal-partner-card,
.frontlegal-product-card,
.frontlegal-checklist-card,
.frontlegal-event-card,
.frontlegal-detail-card,
.frontlegal-profile-summary,
.frontlegal-panel,
.frontlegal-admin-list > article,
.frontlegal-integration-cards > article,
.frontlegal-board-row {
    background: var(--fl-color-surface);
    border-radius: var(--fl-radius-md);
    box-shadow: var(--fl-shadow-card);
}

.frontlegal-panel {
    display: grid;
    align-content: start;
    padding: 14px 14px 18px;
}

.frontlegal-panel > header,
.frontlegal-detail-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 10px 12px;
}

.frontlegal-list-row {
    display: flex;
    width: 100%;
    min-height: 60px;
    align-items: center;
    gap: 14px;
    padding: 11px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--fl-radius-sm);
    text-align: left;
    cursor: pointer;
}

.frontlegal-list-row:hover {
    background: var(--fl-color-surface-soft);
    transform: translateY(-1px);
}

.frontlegal-list-row > span:not(.frontlegal-avatar):not(.frontlegal-status-label) {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 2px;
}

.frontlegal-list-row time {
    margin-left: auto;
    color: var(--fl-color-text-subtle);
    font-size: .875rem;
    white-space: nowrap;
}

.frontlegal-list-row strong,
.frontlegal-list-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frontlegal-list-row strong {
    color: var(--fl-color-primary);
    font-size: 1rem;
    font-weight: 600;
}

.frontlegal-list-row small {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-list-row .frontlegal-status-label,
.frontlegal-list-row > b {
    margin-left: auto;
}

.frontlegal-list-row .frontlegal-status-label {
    flex: 0 0 auto;
    font-size: .875rem;
}

.frontlegal-status-label[data-type="vraag"] { background: var(--fl-color-secondary-soft); color: var(--fl-color-secondary); }
.frontlegal-status-label[data-type="casus"] { background: var(--fl-color-warning-soft); color: var(--fl-color-warning); }
.frontlegal-status-label[data-type="update"] { background: var(--fl-color-success-soft); color: var(--fl-color-success); }

.frontlegal-activity-list,
.frontlegal-integration-list,
.frontlegal-checklist-items,
.frontlegal-ordered-items {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.frontlegal-activity-list li,
.frontlegal-integration-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 12px;
}

.frontlegal-activity-list li > div,
.frontlegal-integration-list li > div {
    flex: 1;
    display: grid;
    min-width: 0;
    gap: 2px;
}

.frontlegal-activity-list .frontlegal-status-label {
    flex: 0 0 auto;
    margin-left: auto;
}

.frontlegal-activity-list li + li,
.frontlegal-integration-list li + li {
}

.frontlegal-activity-list strong,
.frontlegal-integration-list strong {
    color: var(--fl-color-primary);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-activity-list small,
.frontlegal-integration-list small {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-activity-list p {
    margin: 4px 0 0;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-ordered-items li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: .875rem;
}

.frontlegal-ordered-items li + li {
}

.frontlegal-sortable-items li.is-dragging {
    position: relative;
    z-index: 2;
    transform: none !important;
    will-change: auto;
    pointer-events: none;
    transition: none;
}

.frontlegal-sortable-items li.is-drop-target {
    border-color: var(--fl-color-secondary);
    background: var(--fl-color-secondary-soft);
}

.frontlegal-sortable-heading {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: end;
    gap: 8px;
}

.frontlegal-drag-handle {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    color: var(--fl-color-text-muted);
    background: transparent;
    border: 0;
    cursor: move;
    touch-action: none;
}

.frontlegal-drag-handle:hover {
    color: var(--fl-color-secondary);
    cursor: move;
}

.frontlegal-drag-handle:active {
    cursor: grabbing;
}

.frontlegal-drag-handle svg {
    width: 20px;
    height: 20px;
}

.frontlegal-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    font-size: .875rem;
}

.frontlegal-person-cell,
.frontlegal-list-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.frontlegal-person-cell > span:not(.frontlegal-avatar),
.frontlegal-list-main > div {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.frontlegal-person-cell strong,
.frontlegal-list-main strong {
    color: var(--fl-color-primary);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-person-cell small,
.frontlegal-list-main small,
.frontlegal-table-wrap td > small {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-table-wrap {
    overflow-x: auto;
    background: var(--fl-color-surface);
    border-radius: var(--fl-radius-md);
    box-shadow: var(--fl-shadow-card);
}

.frontlegal-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.frontlegal-table-wrap th {
    padding: 11px 16px;
    color: var(--fl-color-text-subtle);
    background: var(--fl-color-surface-soft);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
    white-space: nowrap;
}

.frontlegal-table-wrap td {
    padding: 12px 16px;
    vertical-align: middle;
}

.frontlegal-table-wrap tbody tr:last-child td {
    border-bottom: 0;
}

.frontlegal-table-wrap tbody tr:hover td {
    background: var(--fl-color-surface-soft);
}

.frontlegal-admin-list,
.frontlegal-event-list,
.frontlegal-integration-cards {
    display: grid;
    gap: 12px;
}

.frontlegal-admin-list > article,
.frontlegal-integration-cards > article {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
}

.frontlegal-admin-list > article h2,
.frontlegal-integration-cards > article h2 {
    font-size: .875rem;
}

.frontlegal-admin-list > article p,
.frontlegal-admin-list > article small,
.frontlegal-integration-cards > article p,
.frontlegal-integration-cards > article small {
    margin: 3px 0 0;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-app .frontlegal-integration-cards > article {
    justify-content: flex-start;
    flex-direction: row;
}

.frontlegal-app .frontlegal-integration-cards > article > div {
    display: grid;
    gap: 0;
    min-width: 0;
    text-align: left;
    overflow-wrap: anywhere;
}

.frontlegal-integrations-page {
    max-width: 1180px;
}

.frontlegal-app .frontlegal-profile-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    margin: 24px 0 0;
}

.frontlegal-app .frontlegal-profile-details dt {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
    margin: 0 0 4px;
}

.frontlegal-app .frontlegal-profile-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .frontlegal-app .frontlegal-profile-details {
        grid-template-columns: minmax(0, 1fr);
    }
}

.frontlegal-settings-card {
    display: grid;
    gap: 20px;
    padding: 22px;
    background: var(--fl-color-surface);
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-md);
}

.frontlegal-settings-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.frontlegal-settings-card > header h2 {
    font-size: 1.125rem;
}

.frontlegal-settings-card > header p {
    max-width: 680px;
    margin: 3px 0 0;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-connection-state {
    flex: 0 0 auto;
    padding: 6px 10px;
    color: var(--fl-color-text-muted);
    background: var(--fl-color-surface-soft);
    border-radius: var(--fl-radius-pill);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-connection-state[data-state="connected"] {
    color: var(--fl-color-success);
    background: var(--fl-color-success-soft);
}

.frontlegal-connection-state[data-state="failed"],
.frontlegal-connection-state[data-state="unavailable"] {
    color: var(--fl-color-danger);
    background: var(--fl-color-danger-soft);
}

.frontlegal-transport-options {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.frontlegal-transport-options > button {
    display: grid;
    min-height: 126px;
    align-content: start;
    gap: 5px;
    padding: 18px;
    color: var(--fl-color-text);
    background: var(--fl-color-surface-soft);
    border: 1px solid transparent;
    border-radius: var(--fl-radius-sm);
    text-align: left;
    cursor: pointer;
}

.frontlegal-transport-options > button:hover:not(:disabled) {
    background: var(--fl-color-secondary-tint);
}

.frontlegal-transport-options > button.active {
    background: var(--fl-color-secondary-soft);
    border-color: var(--fl-color-secondary);
}

.frontlegal-transport-options > button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.frontlegal-transport-options strong {
    color: var(--fl-color-primary);
    font-size: 1rem;
}

.frontlegal-transport-options span {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-transport-options small {
    margin-top: 8px;
    color: var(--fl-color-secondary);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-settings-facts {
    display: grid;
    margin: 0;
    gap: 1px;
    overflow: hidden;
    background: var(--fl-color-border);
    border-radius: var(--fl-radius-sm);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.frontlegal-settings-facts > div {
    display: grid;
    gap: 3px;
    padding: 14px 16px;
    background: var(--fl-color-surface-soft);
}

.frontlegal-settings-facts dt {
    color: var(--fl-color-text-subtle);
    font-size: .875rem;
}

.frontlegal-settings-facts dd {
    margin: 0;
    color: var(--fl-color-primary);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-setup-guide > header a {
    flex: 0 0 auto;
    color: var(--fl-color-secondary);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.frontlegal-setup-guide ol {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 1px;
    overflow: hidden;
    list-style: none;
    counter-reset: frontlegal-setup;
    border-radius: var(--fl-radius-sm);
}

.frontlegal-setup-guide li {
    display: grid;
    position: relative;
    min-height: 58px;
    align-content: center;
    gap: 2px;
    padding: 12px 16px 12px 54px;
    background: var(--fl-color-surface-soft);
    counter-increment: frontlegal-setup;
}

.frontlegal-setup-guide li::before {
    position: absolute;
    top: 14px;
    left: 16px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--fl-color-secondary);
    background: var(--fl-color-secondary-soft);
    border-radius: 50%;
    content: counter(frontlegal-setup);
    font-size: .875rem;
    font-weight: 700;
}

.frontlegal-setup-guide li strong {
    color: var(--fl-color-primary);
    font-size: .875rem;
}

.frontlegal-setup-guide li span {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-text-button.danger {
    color: var(--fl-color-danger);
}

/* 8  Dashboard */

.frontlegal-stat-grid {
    display: grid;
    gap: var(--frontlegal-card-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.frontlegal-stat,
.frontlegal-stat-grid article {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 24px;
    background: var(--fl-color-surface);
    border-radius: var(--fl-radius-md);
    box-shadow: var(--fl-shadow-card);
    text-align: left;
}

.frontlegal-stat:is(button) {
    width: 100%;
    min-width: 0;
    border: 0;
    font: inherit;
    cursor: pointer;
    transition: transform var(--frontlegal-motion-base) var(--frontlegal-motion-ease), background-color var(--frontlegal-motion-base) var(--frontlegal-motion-ease);
}

@media (hover: hover) and (pointer: fine) {
    .frontlegal-stat:is(button):hover { transform: scale(1.012); }
    .frontlegal-stat:is(button):hover .frontlegal-stat-head .frontlegal-icon { transform: rotate(180deg); }
}

.frontlegal-stat:is(button):focus-visible .frontlegal-stat-head .frontlegal-icon { transform: rotate(180deg); }
.frontlegal-stat:is(button):active { transform: scale(.995); }

.frontlegal-stat-content {
    display: grid;
    gap: 8px;
    min-height: 128px;
    align-content: start;
}

.frontlegal-stat-content > span {
    font-size: 1rem;
    font-weight: 600;
}

.frontlegal-stat-content > .frontlegal-stat-action {
    justify-self: start;
    margin: auto 0 0;
}

.frontlegal-root .frontlegal-stat-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 4px 8px 4px 0;
    color: var(--fl-color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--fl-radius-xs);
    font-size: .875rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.frontlegal-root .frontlegal-stat-action:hover { color: var(--fl-color-secondary); }
.frontlegal-stat-action .frontlegal-icon { transform: rotate(135deg); }
.frontlegal-root .frontlegal-stat.accent .frontlegal-stat-action { color: var(--fl-color-on-primary); }
.frontlegal-root .frontlegal-stat.accent .frontlegal-stat-action:hover { text-decoration: underline; }

.frontlegal-root .frontlegal-button.frontlegal-button-compact {
    min-height: 36px;
    padding: 8px 16px;
    font-size: .875rem;
    line-height: 1.4;
}

@media (max-width: 980px), (pointer: coarse) {
    .frontlegal-root .frontlegal-button.frontlegal-button-compact { min-height: 44px; }
}

.frontlegal-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
}

.frontlegal-stat-head .frontlegal-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    padding: 8px;
    color: var(--fl-color-primary);
    background: var(--fl-color-secondary-tint);
    border-radius: 50%;
    transform: rotate(135deg);
    transition: transform var(--frontlegal-motion-base) var(--frontlegal-motion-ease), color var(--frontlegal-motion-base) var(--frontlegal-motion-ease), background-color var(--frontlegal-motion-base) var(--frontlegal-motion-ease);
}

.frontlegal-stat .frontlegal-stat-action,
.frontlegal-stat .frontlegal-stat-badge { transition: color var(--frontlegal-motion-base) var(--frontlegal-motion-ease), background-color var(--frontlegal-motion-base) var(--frontlegal-motion-ease); }

@media (prefers-reduced-motion: reduce) {
    .frontlegal-stat:is(button):hover,
    .frontlegal-stat:is(button):active { transform: none; }
    .frontlegal-stat:is(button):is(:hover, :focus-visible) .frontlegal-stat-head .frontlegal-icon { transform: rotate(135deg); }
}

.frontlegal-stat:hover .frontlegal-stat-head .frontlegal-icon {
    color: var(--fl-color-secondary);
    background: var(--fl-color-secondary-soft);
}

.frontlegal-stat > span,
.frontlegal-stat-head > span,
.frontlegal-stat-grid > article > span {
    color: var(--fl-color-primary);
    font-size: 1rem;
    font-weight: 600;
}

.frontlegal-stat strong,
.frontlegal-stat-grid strong {
    color: var(--fl-color-primary);
    font-size: 2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.035em;
    line-height: 1.2;
}

.frontlegal-stat small,
.frontlegal-stat-grid > article small {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-stat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    color: var(--fl-color-success);
    background: var(--fl-color-success-soft);
    border-radius: var(--fl-radius-xs);
}

.frontlegal-stat-badge .frontlegal-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.frontlegal-stat-grid .accent .frontlegal-stat-badge {
    color: var(--fl-color-on-primary);
    background: color-mix(in srgb, var(--fl-color-on-primary) 16%, transparent);
}

.frontlegal-stat-grid .accent {
    color: var(--fl-color-on-primary);
    background: var(--fl-color-primary);
    background: var(--fl-gradient-accent);
}

.frontlegal-stat-grid .accent .frontlegal-stat-head > span,
.frontlegal-stat-grid .accent > span,
.frontlegal-stat-grid .accent strong {
    color: var(--fl-color-on-primary);
}

.frontlegal-stat-grid .accent small {
    color: color-mix(in srgb, var(--fl-color-on-primary) 76%, transparent);
}

.frontlegal-stat-grid .accent .frontlegal-stat-head .frontlegal-icon {
    color: var(--fl-color-on-primary);
    background: color-mix(in srgb, var(--fl-color-on-primary) 16%, transparent);
}

.frontlegal-stat-grid .accent:hover .frontlegal-stat-head .frontlegal-icon {
    color: var(--fl-color-on-primary);
}

.frontlegal-stat-grid article button:not(.frontlegal-button):not(.frontlegal-stat-action) {
    justify-self: start;
    margin-left: -11px;
    padding: 4px 11px;
    color: var(--fl-color-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--fl-radius-pill);
    font-size: .875rem;
    cursor: pointer;
}

.frontlegal-stat-grid article button:not(.frontlegal-button):not(.frontlegal-stat-action):hover {
    background: var(--fl-color-secondary-soft);
}

.frontlegal-root .frontlegal-stat-grid article.accent .frontlegal-button {
    color: var(--fl-color-on-primary);
    background: color-mix(in srgb, var(--fl-color-on-primary) 14%, transparent);
}

.frontlegal-root .frontlegal-stat-grid article.accent .frontlegal-button:hover {
    background: color-mix(in srgb, var(--fl-color-on-primary) 22%, transparent);
}

.frontlegal-dashboard-layout {
    display: grid;
    gap: var(--frontlegal-card-gap);
    align-items: start;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.frontlegal-dashboard-activity {
    display: grid;
    gap: var(--frontlegal-card-gap);
    align-content: start;
}

.frontlegal-dashboard-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-height: 92px;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    border-radius: 0;
    text-align: left;
    background: transparent;
    cursor: pointer;
}

.frontlegal-dashboard-row.conversation { grid-template-columns: 44px minmax(0, 1fr) auto; }
.frontlegal-dashboard-row + .frontlegal-dashboard-row { border-top: 1px solid var(--fl-color-border); }
.frontlegal-dashboard-row:hover { background: var(--fl-color-surface-soft); }
.frontlegal-dashboard-row-copy { display: grid; min-width: 0; gap: 4px; }
.frontlegal-dashboard-row-copy strong { font-size: 1rem; font-weight: 600; color: var(--fl-color-primary); overflow-wrap: anywhere; }
.frontlegal-dashboard-row-copy small { font-size: .875rem; color: var(--fl-color-text-muted); overflow-wrap: anywhere; }
.frontlegal-dashboard-row-meta { display: grid; justify-items: end; gap: 8px; color: var(--fl-color-text-muted); font-size: .875rem; }
.frontlegal-dashboard-row-meta time { white-space: nowrap; }

@media (min-width: 981px) and (max-width: 1199px) {
    .frontlegal-header-search { display: none; }
}

@media (max-width: 980px) {
    .frontlegal-root { --frontlegal-gutter: 24px; }
    .frontlegal-navigation > header { height: 84px; flex-basis: 84px; }
}

@media (max-width: 767px) {
    .frontlegal-stat-content { min-height: 128px; }
    .frontlegal-dashboard-row,
    .frontlegal-dashboard-row.conversation { grid-template-columns: minmax(0, 1fr); }
    .frontlegal-dashboard-row.conversation { grid-template-columns: 44px minmax(0, 1fr); }
    .frontlegal-dashboard-row-meta { justify-items: start; grid-auto-flow: column; justify-content: start; }
    .frontlegal-dashboard-row.conversation .frontlegal-dashboard-row-meta { grid-column: 2; }
    .frontlegal-root .frontlegal-app-header { gap: 8px; padding-left: 0; padding-right: 0; }
    .frontlegal-root .frontlegal-header-actions { gap: 4px; }
    .frontlegal-root .frontlegal-header-profile { padding: 2px; }
}

.frontlegal-news-grid {
    display: grid;
    gap: var(--frontlegal-card-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.frontlegal-news-shortcut {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: 0;
}
.frontlegal-news-shortcut > button { max-width: 100%; }
.frontlegal-news-shortcut .frontlegal-news-arrow { transform: rotate(-90deg); }
.frontlegal-news-count { font-variant-numeric: tabular-nums; font-weight: 400; }
.frontlegal-root .frontlegal-button.secondary.frontlegal-button-outline { color: var(--fl-color-primary); background: var(--fl-color-surface); border: 1px solid var(--fl-color-border-strong); }
.frontlegal-root .frontlegal-button.frontlegal-button-outline:hover:not(:disabled) { color: var(--fl-color-secondary); background: var(--fl-color-surface); }
#frontlegal-news-title, #guide-news-title { scroll-margin-top: 48px; }

.frontlegal-dashboard-page { gap: 24px; }
.frontlegal-dashboard-page :is(h1, h2, h3) { overflow-wrap: anywhere; min-width: 0; }
.frontlegal-dashboard-page > .frontlegal-page-header { margin-bottom: 8px; }
.frontlegal-dashboard-page .frontlegal-alert { padding: 16px; border-radius: var(--fl-radius-sm); font-size: 1rem; }
.frontlegal-dashboard-page .frontlegal-alert > button { text-decoration: none; margin: 8px 0 0; display: flex; }

.frontlegal-news {
    display: grid;
    min-width: 0;
    gap: var(--frontlegal-space-card);
}

.frontlegal-news-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    min-height: 300px;
    padding: var(--frontlegal-space-card);
    background: var(--fl-color-surface);
    border-radius: var(--fl-radius-md);
    box-shadow: var(--fl-shadow-card);
    overflow-wrap: anywhere;
}

.frontlegal-news-card > .frontlegal-button {
    align-self: flex-start;
    margin-top: auto;
}

.frontlegal-news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-news-card > p {
    margin: 0;
    font-size: 1rem;
}

.frontlegal-content-reveal {
    animation: frontlegal-content-fade var(--frontlegal-motion-fade) var(--frontlegal-motion-ease) both;
}

@keyframes frontlegal-content-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.frontlegal-skeleton {
    width: 100%;
    min-width: 0;
    align-self: stretch;
}

.frontlegal-skeleton > div,
.frontlegal-skeleton-row {
    display: grid;
    gap: 16px;
}

.frontlegal-skeleton-row {
    padding: 20px 0;
}

.frontlegal-skeleton-line {
    display: block;
    width: 100%;
    height: 16px;
    border-radius: var(--fl-radius-xs);
    background: var(--fl-gradient-skeleton);
    animation: frontlegal-pulse var(--frontlegal-motion-skeleton) ease-in-out infinite;
}

.frontlegal-skeleton-line.short { width: 62%; }
.frontlegal-skeleton-line.number { width: 72px; height: 38px; }
.frontlegal-skeleton-line.action { width: 160px; max-width: 100%; height: 46px; border-radius: var(--fl-radius-pill); }
.frontlegal-skeleton-line.bar { height: 8px; }
.frontlegal-skeleton-stat { min-height: 156px; }
.frontlegal-skeleton-progress { min-height: 140px; }
.frontlegal-skeleton-news { min-height: 252px; }

.frontlegal-dashboard-page .frontlegal-skeleton-stat { min-height: 128px; }
.frontlegal-dashboard-page .frontlegal-skeleton-stat > div { gap: 8px; }
.frontlegal-dashboard-page .frontlegal-skeleton-stat .short { height: 36px; }
.frontlegal-dashboard-page .frontlegal-skeleton-stat .number { height: 38.4px; }
.frontlegal-dashboard-page .frontlegal-skeleton-stat .action { height: 44px; }
.frontlegal-dashboard-page .frontlegal-skeleton-list > div > .short { display: none; }
.frontlegal-dashboard-page .frontlegal-skeleton-list > div { gap: 0; }
.frontlegal-dashboard-page .frontlegal-skeleton-row { min-height: 92px; }
.frontlegal-dashboard-page .frontlegal-board-preview .frontlegal-skeleton-row { min-height: 98px; }
.frontlegal-dashboard-page .frontlegal-board-preview .frontlegal-skeleton-row + .frontlegal-skeleton-row { border-top: 1px solid transparent; min-height: 99px; }
.frontlegal-dashboard-page .frontlegal-skeleton-news > div { gap: 16px; }
.frontlegal-dashboard-page .frontlegal-skeleton-news .frontlegal-skeleton-row { padding: 0; min-height: 56px; }
.frontlegal-dashboard-page .frontlegal-skeleton-news .action { height: 36px; }
.frontlegal-skeleton-gauge > div { position: relative; display: grid; justify-items: center; padding-top: 8px; }
.frontlegal-skeleton-gauge svg { width: 100%; max-width: 240px; height: auto; animation: frontlegal-pulse var(--frontlegal-motion-skeleton) ease-in-out infinite; }
.frontlegal-skeleton-gauge .frontlegal-skeleton-line { position: absolute; width: 80px; height: 32px; bottom: 30px; }
.frontlegal-dashboard-page .frontlegal-pe-summary > .frontlegal-skeleton-line { height: 21px; }
@media (max-width: 767px) {
    .frontlegal-dashboard-page .frontlegal-skeleton-list .frontlegal-skeleton-row { min-height: 122px; }
    .frontlegal-dashboard-page .frontlegal-skeleton-list .frontlegal-skeleton-row + .frontlegal-skeleton-row { min-height: 123px; border-top: 1px solid transparent; }
    .frontlegal-dashboard-page .frontlegal-board-preview .frontlegal-skeleton-row { min-height: 130px; }
    .frontlegal-dashboard-page .frontlegal-board-preview .frontlegal-skeleton-row + .frontlegal-skeleton-row { min-height: 131px; }
}

.frontlegal-checklist-summary > div {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}

.frontlegal-checklist-summary strong { font-size: 1.5rem; color: var(--fl-color-primary); }
.frontlegal-checklist-summary span,
.frontlegal-checklist-summary p { font-size: .875rem; color: var(--fl-color-text-muted); }
.frontlegal-pe-summary .frontlegal-section-heading h2 { display: flex; flex-wrap: wrap; gap: 8px; }
.frontlegal-pe-summary .frontlegal-section-heading h2 span { font-weight: 400; color: var(--fl-color-text-muted); }
.frontlegal-root .frontlegal-pe-summary .frontlegal-pe-totals { margin: 8px 0 0; }
.frontlegal-root .frontlegal-pe-summary .frontlegal-pe-totals strong { font-size: 2rem; font-weight: 600; }
.frontlegal-root .frontlegal-pe-summary > progress { margin: 0; }
.frontlegal-root .frontlegal-pe-summary > p { margin: 0; font-size: .875rem; color: var(--fl-color-text-muted); }

.frontlegal-root progress {
    display: block;
    width: 100%;
    height: 8px;
    margin: 16px 0;
    appearance: none;
    border: 0;
    border-radius: var(--fl-radius-pill);
    background: var(--fl-color-border);
}

.frontlegal-root progress::-webkit-progress-bar { background: var(--fl-color-border); border-radius: var(--fl-radius-pill); }
.frontlegal-root progress::-webkit-progress-value { background: var(--fl-gradient-progress); border-radius: var(--fl-radius-pill); }
.frontlegal-root progress::-moz-progress-bar { background: var(--fl-gradient-progress); border-radius: var(--fl-radius-pill); }

@media (min-width: 1200px) {
    .frontlegal-news-grid:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.frontlegal-dashboard-skeleton,
.frontlegal-admin-skeleton,
.frontlegal-section-skeleton {
    display: grid;
    gap: 14px;
}

.frontlegal-dashboard-skeleton {
    grid-template-columns: repeat(3, 1fr);
}

.frontlegal-admin-skeleton {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.frontlegal-dashboard-skeleton span,
.frontlegal-admin-skeleton span,
.frontlegal-section-skeleton span {
    height: 92px;
    background: var(--fl-color-surface);
    border-radius: var(--fl-radius-md);
    animation: frontlegal-pulse var(--frontlegal-motion-skeleton) ease-in-out infinite;
}

.frontlegal-section-skeleton span {
    height: 46px;
}

.frontlegal-dashboard-skeleton div {
    height: 220px;
    grid-column: span 3;
    background: var(--fl-color-surface);
    border-radius: var(--fl-radius-md);
    animation: frontlegal-pulse var(--frontlegal-motion-skeleton) ease-in-out infinite;
}

/* 9  Messages */

.frontlegal-messages-page {
    display: flex;
    width: 100%;
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
    flex-direction: column;
}

.frontlegal-messages-layout {
    display: grid;
    width: 100%;
    min-height: 0;
    min-width: 0;
    height: 100%;
    flex: 1;
    gap: 16px;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
}

.frontlegal-conversations {
    display: flex;
    min-height: 0;
    flex-direction: column;
    background: var(--fl-color-surface);
    border-radius: var(--fl-radius-md);
    box-shadow: var(--fl-shadow-card);
}

.frontlegal-conversation-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 10px;
}

.frontlegal-conversation-heading h2 {
    font-size: .875rem;
}

.frontlegal-conversation-heading .frontlegal-button {
    min-height: 32px;
    padding: 0 11px;
    font-size: .875rem;
}

.frontlegal-conversations .frontlegal-search {
    padding: 0 16px 12px;
}

.frontlegal-conversations .frontlegal-search span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.frontlegal-conversation-list,
.frontlegal-user-results {
    display: grid;
    align-content: start;
    min-height: 0;
    padding: 8px;
    overflow-y: auto;
}

.frontlegal-conversation-row,
.frontlegal-user-row {
    position: relative;
    display: grid;
    align-items: center;
    gap: 11px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 10px 11px;
    background: transparent;
    border: 0;
    border-radius: var(--fl-radius-sm);
    text-align: left;
    cursor: pointer;
}

.frontlegal-user-row {
    grid-template-columns: auto minmax(0, 1fr);
}

.frontlegal-conversation-row:hover,
.frontlegal-user-row:hover {
    background: var(--fl-color-surface-soft);
}

.frontlegal-conversation-row.active {
    background: var(--fl-color-secondary-soft);
}

.frontlegal-conversation-row.active::before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 3px;
    background: var(--fl-color-secondary);
    border-radius: var(--fl-radius-pill);
    content: "";
}

.frontlegal-conversation-copy,
.frontlegal-user-row > span:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.frontlegal-conversation-copy strong,
.frontlegal-conversation-copy small,
.frontlegal-user-row strong,
.frontlegal-user-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frontlegal-conversation-copy strong,
.frontlegal-user-row strong {
    color: var(--fl-color-primary);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-conversation-copy small,
.frontlegal-user-row small {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-conversation-meta {
    display: grid;
    justify-items: end;
    gap: 5px;
}

.frontlegal-conversation-meta time {
    color: var(--fl-color-text-subtle);
    font-size: .875rem;
    white-space: nowrap;
}

.frontlegal-chat-workspace {
    display: grid;
    width: 100%;
    min-height: 0;
    min-width: 0;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
}

.frontlegal-chat-workspace.chat-count-1 {
    grid-template-columns: minmax(0, 1fr);
}

.frontlegal-chat-workspace.chat-count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.frontlegal-chat-workspace.chat-count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 981px) {
    .frontlegal-chat-workspace.chat-count-1 {
        grid-template-columns: minmax(0, 100%);
    }

    .frontlegal-chat-workspace.chat-count-2 {
        grid-template-columns: repeat(2, minmax(0, calc((100% - 16px) / 2)));
    }

    .frontlegal-chat-workspace.chat-count-3 {
        grid-template-columns: repeat(3, minmax(0, calc((100% - 32px) / 3)));
    }
}

.frontlegal-chat-placeholder {
    align-content: center;
}

.frontlegal-chat-placeholder .frontlegal-placeholder-mark::after {
    display: block;
    width: 22px;
    height: 18px;
    border: 1.8px solid currentColor;
    border-radius: 5px 5px 5px 0;
    content: "";
}

.frontlegal-chat-panel {
    display: flex;
    width: 100%;
    min-height: 0;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--fl-color-secondary-tint);
    border-radius: var(--fl-radius-md);
    box-shadow: var(--fl-shadow-card);
}

.frontlegal-chat-header {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 66px;
    padding: 12px 16px;
    background: var(--fl-color-surface);
}

.frontlegal-chat-header > div {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 1px;
}

.frontlegal-chat-header h2 {
    overflow: hidden;
    font-size: .875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frontlegal-chat-header p {
    overflow: hidden;
    margin: 0;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frontlegal-chat-back {
    display: none;
    padding: 5px 9px;
    color: var(--fl-color-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--fl-radius-xs);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.frontlegal-chat-scroll {
    flex: 1;
    min-height: 0;
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--fl-color-secondary-tint);
}

.frontlegal-message-list {
    display: grid;
    gap: 12px;
    align-content: end;
    min-height: 100%;
}

.frontlegal-message {
    display: grid;
    justify-items: start;
    gap: 3px;
    max-width: min(78%, 620px);
}

.frontlegal-message.mine {
    justify-items: end;
    justify-self: end;
}

.frontlegal-message-bubble {
    display: grid;
    gap: 5px;
    padding: 10px 14px;
    color: var(--fl-color-text);
    background: var(--fl-color-surface);
    border-radius: var(--fl-radius-md) var(--fl-radius-md) var(--fl-radius-md) 4px;
}

.frontlegal-message.mine .frontlegal-message-bubble {
    color: var(--fl-color-on-primary);
    background: var(--fl-color-primary);
    border-radius: var(--fl-radius-md) var(--fl-radius-md) 4px var(--fl-radius-md);
}

.frontlegal-message-bubble p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.frontlegal-message-bubble footer {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fl-color-text-subtle);
    font-size: .875rem;
}

.frontlegal-message.mine .frontlegal-message-bubble footer {
    color: color-mix(in srgb, var(--fl-color-on-primary) 72%, transparent);
}

.frontlegal-message.mine .frontlegal-message-bubble footer button {
    color: var(--fl-color-on-primary);
}

.frontlegal-message-actions {
    display: flex;
    gap: 2px;
}

.frontlegal-message.pending {
    opacity: 0.65;
}

.frontlegal-message.failed .frontlegal-message-bubble {
    background: var(--fl-color-danger-soft);
    color: var(--fl-color-danger);
}

.frontlegal-message-deleted {
    color: var(--fl-color-text-subtle);
    font-style: italic;
}

.frontlegal-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0;
    padding: 12px 16px 16px;
    background: var(--fl-color-surface);
    border-radius: 0;
}

.frontlegal-composer label {
    display: block;
    width: 100%;
}

.frontlegal-composer textarea {
    min-height: 36px;
    max-height: 140px;
    padding: 9px 12px;
    background: var(--fl-color-surface-soft);
    border: 0;
    border-radius: 0;
    resize: none;
}

.frontlegal-composer textarea:hover {
    border: 0;
}

.frontlegal-composer textarea:focus,
.frontlegal-composer textarea:focus-visible {
    outline: 0;
    box-shadow: none;
    background: var(--fl-color-surface-soft);
}

.frontlegal-composer .frontlegal-button {
    justify-self: end;
    min-height: 42px;
    padding: 0 16px;
}

.frontlegal-inline-edit {
    display: grid;
    gap: 8px;
}

.frontlegal-inline-edit div {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* 10  Prikbord */

.frontlegal-board-list {
    display: grid;
    gap: 12px;
}

.frontlegal-board-row {
    overflow: hidden;
}

.frontlegal-board-row:hover {
    background: var(--fl-color-secondary-tint);
}

.frontlegal-board-row > button {
    display: grid;
    width: 100%;
    gap: 9px;
    padding: 18px 20px;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.frontlegal-board-row h2 {
    font-size: 1rem;
    font-weight: 600;
}

.frontlegal-board-row p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
    line-height: 1.5;
}

.frontlegal-board-row footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-board-row footer > * {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.frontlegal-board-row footer > * + *::before {
    margin-right: 8px;
    color: var(--fl-color-text-subtle);
    content: "\00B7";
}

.frontlegal-board-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.frontlegal-board-tags span {
    padding: 3px 9px;
    color: var(--fl-color-primary);
    background: var(--fl-color-secondary-soft);
    border-radius: var(--fl-radius-pill);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-board-tags span:nth-child(2) {
    color: var(--fl-color-text-muted);
    background: var(--fl-color-surface-soft);
}

.frontlegal-board-detail {
    display: grid;
    gap: 0;
    max-width: 900px;
    background: var(--fl-color-surface);
    border-radius: var(--fl-radius-md);
    box-shadow: var(--fl-shadow-card);
}

.frontlegal-board-detail-header,
.frontlegal-board-content,
.frontlegal-board-actions,
.frontlegal-comment-section {
    padding: 20px 24px;
}

.frontlegal-board-detail > .frontlegal-back-link {
    margin: 16px 24px 0;
}

.frontlegal-board-detail-header {
    display: grid;
    gap: 12px;
    padding-top: 12px;
}

.frontlegal-board-detail-header h1 {
    margin: 0;
    font-size: clamp(21px, 1.9vw, 26px);
}

.frontlegal-board-author,
.frontlegal-comment-main,
.frontlegal-comment-child {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.frontlegal-board-author > span:last-child {
    display: grid;
    gap: 1px;
}

.frontlegal-board-author strong {
    color: var(--fl-color-primary);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-board-author small {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-board-content {
    padding-top: 0;
    color: var(--fl-color-text);
    font-size: .875rem;
    line-height: 1.65;
    white-space: pre-line;
}

.frontlegal-board-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 0;
    padding-bottom: 16px;
}

.frontlegal-board-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--fl-color-secondary-tint);
    border-radius: var(--fl-radius-pill);
}

.frontlegal-board-actions button.active {
    color: var(--fl-color-primary);
    background: var(--fl-color-secondary-soft);
}

.frontlegal-comment-section {
    display: grid;
    gap: 16px;
}

.frontlegal-comment-section h2 {
    font-size: .875rem;
}

.frontlegal-comment-form {
    display: grid;
    gap: 10px;
    padding: 14px;
    background: var(--fl-color-surface-soft);
    border-radius: var(--fl-radius-sm);
}

.frontlegal-comment-form p {
    margin: 0;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-comment-form textarea {
    min-height: 76px;
}

.frontlegal-comment-form > div {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.frontlegal-comments {
    display: grid;
    gap: 18px;
}

.frontlegal-comment {
    display: grid;
    gap: 12px;
}

.frontlegal-comment-main > div,
.frontlegal-comment-child > div {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 4px;
}

.frontlegal-comment header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.frontlegal-comment header strong {
    color: var(--fl-color-primary);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-comment time {
    color: var(--fl-color-text-subtle);
    font-size: .875rem;
    white-space: nowrap;
}

.frontlegal-comment p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.55;
}

.frontlegal-comment footer {
    display: flex;
    gap: 2px;
    margin-left: -9px;
}

.frontlegal-comment-child {
    display: flex;
    align-items: flex-start;
    padding: 12px 14px;
    margin-left: 47px;
    background: var(--fl-color-surface-soft);
    border-radius: var(--fl-radius-sm);
}

.frontlegal-comment-child .frontlegal-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    font-size: .875rem;
}

.frontlegal-board-form {
    display: grid;
    gap: 14px;
}

/* 11  Marketplace, checklists, templates, intervisie */

.frontlegal-partner-card,
.frontlegal-product-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
}

.frontlegal-product-card {
    gap: 9px;
}

.frontlegal-partner-card > div:last-child {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.frontlegal-partner-card h2 {
    font-size: 1rem;
}

.frontlegal-partner-card .frontlegal-offer:last-of-type {
    margin-bottom: auto;
}

.frontlegal-partner-logo {
    display: flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--fl-color-secondary);
    background: var(--fl-color-secondary-soft);
    border-radius: var(--fl-radius-sm);
    font-size: 1.125rem;
    font-weight: 700;
}

.frontlegal-partner-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.frontlegal-partner-card p,
.frontlegal-product-card > p {
    margin: 0;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
    line-height: 1.55;
}

.frontlegal-offer {
    display: grid;
    gap: 4px;
    padding: 12px;
    background: var(--fl-color-surface-soft);
    border-radius: var(--fl-radius-sm);
}

.frontlegal-offer strong {
    color: var(--fl-color-primary);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-offer > span {
    justify-self: start;
    padding: 2px 8px;
    color: var(--fl-color-success);
    background: var(--fl-color-success-soft);
    border-radius: var(--fl-radius-pill);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-partner-card .frontlegal-button {
    align-self: flex-start;
    margin-top: 2px;
}

.frontlegal-product-card > .frontlegal-status-label,
.frontlegal-checklist-card .frontlegal-status-label,
.frontlegal-detail-card .frontlegal-status-label {
    align-self: flex-start;
}

.frontlegal-product-card h2 {
    font-size: .875rem;
}

.frontlegal-product-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
}

.frontlegal-product-card footer strong {
    color: var(--fl-color-primary);
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.frontlegal-product-card > small {
    color: var(--fl-color-text-subtle);
    font-size: .875rem;
}

.frontlegal-checklist-card {
    display: grid;
    gap: 14px;
    padding: 20px 22px;
}

.frontlegal-checklist-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.frontlegal-checklist-card > header > div:first-child {
    display: grid;
    justify-items: start;
    gap: 5px;
}

.frontlegal-checklist-card h2 {
    font-size: 1rem;
}

.frontlegal-checklist-card > header p {
    margin: 0;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-checklist-items li {
}

.frontlegal-checklist-items {
    padding-left: 0 !important;
    list-style: none !important;
}

.frontlegal-root .frontlegal-checklist-items > li {
    display: block;
    list-style: none !important;
}

.frontlegal-root .frontlegal-checklist-items > li::marker,
.frontlegal-root .frontlegal-checklist-items > li::before {
    display: none !important;
    content: none !important;
}

.frontlegal-checklist-items label {
    display: grid;
    align-items: center;
    gap: 11px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 11px 4px;
    color: var(--fl-color-text);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
}

.frontlegal-checklist-items label:hover {
    color: var(--fl-color-primary);
}

.frontlegal-checklist-items label > span {
    min-width: 0;
}

.frontlegal-checklist-items input:checked + span {
    color: var(--fl-color-text-muted);
    opacity: 0.72;
}

.frontlegal-checklist-items small {
    padding: 3px 10px;
    color: var(--fl-color-text-muted);
    background: var(--fl-color-surface-soft);
    border-radius: var(--fl-radius-pill);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

.frontlegal-checklist-card > .frontlegal-text-button {
    justify-self: start;
    margin-left: -9px;
}

.frontlegal-event-card {
    display: grid;
    align-items: center;
    gap: 18px;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    padding: 18px 20px;
}

.frontlegal-event-card time {
    display: grid;
    gap: 2px;
    padding: 12px 10px;
    color: var(--fl-color-primary);
    background: var(--fl-color-secondary-soft);
    border-radius: var(--fl-radius-sm);
    font-size: .875rem;
    font-weight: 600;
    text-align: center;
}

.frontlegal-event-card > div {
    display: grid;
    gap: 7px;
}

.frontlegal-event-card h2 {
    font-size: 1rem;
}

.frontlegal-event-card p {
    margin: 0;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-event-card dl,
.frontlegal-detail-card dl {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 2px 0 0;
}

.frontlegal-event-card dl div,
.frontlegal-detail-card dl div {
    display: grid;
    gap: 2px;
}

.frontlegal-event-card dt,
.frontlegal-detail-card dt {
    color: var(--fl-color-text-subtle);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.frontlegal-event-card dd,
.frontlegal-detail-card dd {
    margin: 0;
    color: var(--fl-color-primary);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-detail-card {
    display: grid;
    gap: 14px;
    padding: 20px 22px;
}

.frontlegal-detail-card > header {
    padding: 0;
}

.frontlegal-detail-card > header > div {
    display: grid;
    justify-items: start;
    gap: 6px;
}

.frontlegal-detail-card h2 {
    font-size: 1rem;
}

.frontlegal-detail-card > header p {
    margin: 0;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-detail-card dl {
    padding-top: 14px;
}

.frontlegal-profile-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
}

.frontlegal-profile-summary > div {
    display: grid;
    justify-items: start;
    gap: 5px;
}

.frontlegal-profile-summary h2 {
    font-size: 1.125rem;
}

.frontlegal-profile-summary p {
    margin: 0;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

/* 12  Beheer */

.frontlegal-admin-columns {
    display: grid;
    gap: var(--frontlegal-card-gap);
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.frontlegal-form-host .gform_wrapper .gfield {
    margin-bottom: 14px;
}

.frontlegal-form-host .gform_wrapper label {
    display: block;
    margin-bottom: 8px;
    color: var(--fl-color-primary);
    font-size: 1rem;
    font-weight: 600;
}

.frontlegal-form-host .gform_wrapper input,
.frontlegal-form-host .gform_wrapper select,
.frontlegal-form-host .gform_wrapper textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 16px;
    background: var(--fl-color-surface);
    border: 1px solid var(--fl-color-control-border);
    border-radius: var(--fl-radius-sm);
    font-size: 1rem;
}

.frontlegal-form-host .gform_wrapper textarea {
    min-height: 144px;
}

.frontlegal-form-host .gform_wrapper .gform_button {
    width: auto;
    min-height: 46px;
    padding: 10px 20px;
    color: var(--fl-color-on-primary);
    background: var(--fl-color-primary);
    border-radius: var(--fl-radius-pill);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.frontlegal-form-host .gform_wrapper .gform_button:hover {
    background: var(--fl-color-primary-hover);
}

/* Native submit inputs cannot render a gradient overlay. */
.frontlegal-root input:is([type="submit"], [type="button"]).frontlegal-button {
    background: var(--fl-color-primary);
    color: var(--fl-color-surface);
}

.frontlegal-root input:is([type="submit"], [type="button"]).frontlegal-button:hover:not(:disabled) {
    background: var(--fl-color-primary-hover);
}

.frontlegal-root .gform_wrapper .gform_button,
.frontlegal-root input:is([type="submit"], [type="button"]).frontlegal-button {
    transition: background-color var(--frontlegal-motion-panel) ease-in-out, color var(--frontlegal-motion-base) var(--frontlegal-motion-ease);
}

.frontlegal-form-host .frontlegal-form-grid label {
    align-content: start;
}

.frontlegal-form-host .frontlegal-form-grid label.frontlegal-checkbox-field {
    display: flex;
    align-items: center;
    gap: 9px;
}

.frontlegal-form-host .frontlegal-form input[type="checkbox"] {
    width: 17px;
    min-height: 17px;
    flex: 0 0 17px;
    padding: 0;
}

.frontlegal-form-host .frontlegal-form input[type="file"] {
    padding: 10px 14px;
    font-size: 1rem;
    cursor: pointer;
}

.frontlegal-form-host .frontlegal-form label small {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
    font-weight: 400;
}

.frontlegal-form-host .frontlegal-alert {
    margin-top: 4px;
}

.frontlegal-form-host .frontlegal-error {
    margin-top: 10px;
}

/* 13  Drawers, toasts and overlays */

.frontlegal-modal-backdrop {
    position: fixed;
    z-index: 60;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    background: var(--fl-color-overlay);
}

body.admin-bar .frontlegal-modal-backdrop {
    top: 32px;
}

body.frontlegal-drawer-open {
    overflow: hidden;
}

.frontlegal-dialog {
    display: flex;
    box-shadow: var(--fl-shadow-pop);
    width: min(560px, 100%);
    max-height: 100%;
    flex-direction: column;
    background: var(--fl-color-surface);
    border-radius: var(--fl-radius-lg) 0 0 var(--fl-radius-lg);
}

.frontlegal-dialog.wide {
    width: min(760px, 100%);
}

/* Confirmation modal: centred card above a blurred application */
.frontlegal-confirm-backdrop {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--fl-color-overlay);
    backdrop-filter: blur(var(--fl-blur-overlay));
    -webkit-backdrop-filter: blur(var(--fl-blur-overlay));
}

.frontlegal-confirm {
    display: grid;
    gap: 16px;
    width: min(480px, 100%);
    max-height: 100%;
    overflow: auto;
    padding: 32px;
    color: var(--fl-color-text);
    background: var(--fl-color-surface);
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-lg);
    box-shadow: var(--fl-shadow-pop);
}

.frontlegal-confirm:focus-visible {
    outline: 2px solid var(--fl-color-secondary);
    outline-offset: 2px;
}

.frontlegal-confirm h2 {
    margin: 0;
    color: var(--fl-color-primary);
    font-size: 1.25rem;
}

.frontlegal-confirm p {
    margin: 0;
}

.frontlegal-confirm .frontlegal-confirm-description {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-confirm-field {
    display: grid;
    gap: 8px;
}

.frontlegal-confirm .frontlegal-form-actions {
    margin: 8px 0 0;
}

@media (max-width: 767px) {
    .frontlegal-confirm-backdrop {
        padding: 20px;
    }

    .frontlegal-confirm {
        padding: 24px;
    }

    .frontlegal-confirm .frontlegal-form-actions {
        flex-direction: column-reverse;
    }

    .frontlegal-confirm .frontlegal-form-actions .frontlegal-button {
        width: 100%;
    }
}

.frontlegal-dialog > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 24px 16px;
}

.frontlegal-dialog > header h2 {
    font-size: 1rem;
}

.frontlegal-dialog > header p {
    margin: 4px 0 0;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-drawer-close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    color: var(--fl-color-text-muted);
    background: var(--fl-color-secondary-tint);
    border: 0;
    border-radius: var(--fl-radius-pill);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.frontlegal-drawer-close:hover {
    color: var(--fl-color-primary);
    background: var(--fl-color-surface-soft);
}

.frontlegal-drawer-close .frontlegal-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.frontlegal-drawer-body {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
}

.frontlegal-drawer-body > * + * {
    margin-top: 16px;
}

.frontlegal-drawer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px;
}

.frontlegal-toast {
    position: fixed;
    z-index: 70;
    box-shadow: var(--fl-shadow-pop);
    right: 20px;
    bottom: 20px;
    max-width: 340px;
    padding: 12px 16px;
    color: var(--fl-color-on-primary);
    background: var(--fl-color-primary);
    border-radius: var(--fl-radius-sm);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-toast.error {
    background: var(--fl-color-danger);
}

.frontlegal-message-alert-region {
    position: fixed;
    z-index: 90;
    top: 92px;
    right: 20px;
    display: grid;
    width: min(390px, calc(100vw - 40px));
    gap: 10px;
    pointer-events: none;
}

body.admin-bar .frontlegal-message-alert-region {
    top: 124px;
}

.frontlegal-message-alert {
    position: relative;
    overflow: hidden;
    background: var(--fl-color-surface);
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-md);
    pointer-events: auto;
}

.frontlegal-message-alert-content {
    display: grid;
    width: 100%;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 14px 44px 14px 14px;
    color: inherit;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.frontlegal-message-alert-content:hover {
    background: var(--fl-color-surface-soft);
}

.frontlegal-message-alert .frontlegal-avatar {
    width: 42px;
    height: 42px;
    font-size: .875rem;
}

.frontlegal-message-alert-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.frontlegal-message-alert-copy strong {
    overflow: hidden;
    color: var(--fl-color-primary);
    font-size: .875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frontlegal-message-alert-copy small,
.frontlegal-message-alert-copy time {
    overflow: hidden;
    color: var(--fl-color-text-subtle);
    font-size: .875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frontlegal-message-alert-copy > span {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    color: var(--fl-color-text);
    font-size: .875rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.frontlegal-message-alert-copy time {
    margin-top: 4px;
}

.frontlegal-message-alert-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--fl-color-text-muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.frontlegal-message-alert-close:hover {
    color: var(--fl-color-primary);
    background: var(--fl-color-surface-soft);
}

.frontlegal-message-alert-close .frontlegal-icon {
    width: 16px;
    height: 16px;
}

.frontlegal-chat-load-error {
    display: grid;
    min-height: 180px;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 24px;
    color: var(--fl-color-text-muted);
    text-align: center;
}

/* 14  Login */

.frontlegal-root .frontlegal-login-shell {
    display: flex;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: var(--fl-color-canvas);
}

.frontlegal-root .frontlegal-login-panel {
    display: grid;
    width: min(480px, 100%);
    min-width: 0;
    gap: 28px;
    padding: 40px;
    background: var(--fl-color-surface);
    border-radius: 24px;
    box-shadow: none;
}

.frontlegal-root .frontlegal-login-logo {
    color: var(--fl-color-secondary);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.03em;
}

.frontlegal-root .frontlegal-login-copy {
    display: grid;
    gap: 10px;
}

.frontlegal-root .frontlegal-login-copy h1 {
    margin: 0;
    padding: 0;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.frontlegal-root .frontlegal-login-copy p {
    margin: 0;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
    line-height: 1.6;
}

.frontlegal-root .frontlegal-login-panel .frontlegal-form {
    gap: 20px;
    margin: 0;
}

.frontlegal-root .frontlegal-login-panel .frontlegal-form label {
    gap: 8px;
    font-size: .875rem;
}

.frontlegal-root .frontlegal-login-panel input {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 12px;
}

.frontlegal-root .frontlegal-login-panel .frontlegal-button {
    width: 100%;
    margin-top: 4px;
    min-height: 48px;
}

.frontlegal-root .frontlegal-login-panel .frontlegal-text-link {
    justify-self: center;
    padding: 10px 12px;
    margin: -10px 0;
    min-height: 44px;
    align-content: center;
    text-align: center;
}

.frontlegal-root .frontlegal-login-panel .frontlegal-alert {
    margin: 0;
    overflow-wrap: anywhere;
}

.frontlegal-root .frontlegal-login-panel .frontlegal-alert[data-tone="success"] {
    color: var(--fl-color-success);
    background: var(--fl-color-success-soft);
}

/* 15  Responsive */

@media (max-width: 980px) {
    .frontlegal-messages-layout:has(.frontlegal-chat-placeholder) .frontlegal-chat-workspace {
        display: none;
    }

    .frontlegal-dashboard-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .frontlegal-chat-workspace.chat-count-2,
    .frontlegal-chat-workspace.chat-count-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .frontlegal-app {
        grid-template-columns: minmax(0, 1fr);
    }

    .frontlegal-navigation {
        position: fixed;
        z-index: 50;
        top: 0;
        bottom: 0;
        left: 0;
        width: 296px;
        height: 100dvh;
        max-height: none;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
    }

    body.admin-bar .frontlegal-navigation {
        height: calc(100dvh - 32px);
    }

    .frontlegal-navigation.open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.22s ease;
    }

    .frontlegal-navigation-close,
    .frontlegal-menu-button {
        display: inline-flex;
    }

    .frontlegal-navigation-backdrop {
        display: block;
    }

    .frontlegal-workspace {
        gap: 20px;
        padding: 20px;
    }

    .frontlegal-app-header {
        top: 20px;
    }

    .frontlegal-messages-layout {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .frontlegal-conversations {
        max-height: 360px;
    }

    .frontlegal-chat-panel {
        height: auto;
    }

    .frontlegal-messages-layout.single-open .frontlegal-conversations {
        display: none;
    }

    .frontlegal-messages-layout.single-open {
        display: block;
    }

    .frontlegal-messages-layout.single-open .frontlegal-chat-workspace,
    .frontlegal-messages-layout.single-open .frontlegal-chat-panel {
        height: 100%;
    }

    .frontlegal-chat-back {
        display: inline-flex;
    }

    .frontlegal-event-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .frontlegal-event-card time {
        justify-self: start;
        padding: 8px 14px;
    }

    .frontlegal-event-card > .frontlegal-button {
        justify-self: start;
    }

    .frontlegal-dashboard-skeleton {
        grid-template-columns: repeat(2, 1fr);
    }

    .frontlegal-dashboard-skeleton div {
        grid-column: span 2;
    }
}

@media (max-width: 767px) {
    body.admin-bar .frontlegal-app.frontlegal-messages-mode {
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
        max-height: calc(100vh - 46px);
        max-height: calc(100dvh - 46px);
    }

    body.admin-bar .frontlegal-navigation,
    body.admin-bar .frontlegal-app-header,
    body.admin-bar .frontlegal-modal-backdrop {
        top: 46px;
    }

    body.admin-bar .frontlegal-messages-mode .frontlegal-messages-layout.single-open {
        top: 46px;
        height: calc(100dvh - 46px);
    }
}

@media (max-width: 980px) {
    .frontlegal-header-search {
        display: none;
    }

    .frontlegal-content {
        padding-bottom: 96px;
    }

    .frontlegal-mobile-nav {
        position: fixed;
        z-index: 44;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        background: var(--fl-color-surface);
    }

.frontlegal-mobile-nav button {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 7px 4px;
    color: var(--fl-color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--fl-radius-sm);
    font-size: .875rem;
    cursor: pointer;
    transition: transform var(--frontlegal-motion-fast) var(--frontlegal-motion-ease), opacity var(--frontlegal-motion-fast) var(--frontlegal-motion-ease);
}

    .frontlegal-mobile-nav button.active {
        color: var(--fl-color-secondary);
        background: var(--fl-color-secondary-soft);
    }

    .frontlegal-mobile-nav b {
        position: absolute;
        top: 2px;
        right: 50%;
        margin-right: -20px;
        min-width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .frontlegal-messages-mode:has(.frontlegal-messages-layout.single-open) .frontlegal-mobile-nav {
        display: none;
    }
}

@media (max-width: 767px) {

    .frontlegal-messages-mode .frontlegal-messages-layout.single-open {
        position: fixed;
        z-index: 80;
        inset: 0;
        display: block;
        height: 100dvh;
        background: var(--fl-color-surface);
    }

    body.admin-bar .frontlegal-messages-mode .frontlegal-messages-layout.single-open {
        top: 46px;
        height: calc(100dvh - 46px);
    }

    .frontlegal-messages-layout.single-open .frontlegal-chat-panel {
        border-radius: 0;
    }

    .frontlegal-messages-layout.single-open .frontlegal-chat-scroll {
        padding: 16px;
    }

    .frontlegal-messages-layout.single-open .frontlegal-message {
        max-width: 86%;
    }
}

@media (max-width: 980px) {
    .frontlegal-chat-placeholder h2,
    .frontlegal-chat-placeholder p {
        display: none;
    }
}

@media (max-width: 767px) {
    .frontlegal-root {
        font-size: 1rem;
        --frontlegal-gutter: 20px;
        --frontlegal-card-gap: 24px;
    }

    .frontlegal-root h1 { font-size: 1.75rem; }
    .frontlegal-form-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }

    .frontlegal-workspace {
        gap: 12px;
        padding: 12px;
    }

    .frontlegal-app-header {
        top: 12px;
        height: 68px;
        flex: 0 0 68px;
    }

    .frontlegal-app-header::before {
        top: -11px;
        bottom: -11px;
    }

    .frontlegal-navigation nav button,
    .frontlegal-navigation-logout {
        min-height: 46px;
        font-size: 1rem;
    }

    .frontlegal-header-profile .frontlegal-avatar {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .frontlegal-stat strong,
    .frontlegal-stat-grid strong {
        font-size: 2rem;
    }

    .frontlegal-header-title .frontlegal-breadcrumb-home {
        display: none;
    }

    .frontlegal-notification-button span {
        display: none;
    }

    .frontlegal-notification-button {
        padding: 8px 10px;
    }

    .frontlegal-page-heading,
    .frontlegal-page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .frontlegal-page-actions .frontlegal-button {
        flex: 1 1 auto;
    }

    .frontlegal-stat-grid,
    .frontlegal-dashboard-skeleton,
    .frontlegal-admin-skeleton {
        grid-template-columns: minmax(0, 1fr);
    }

    .frontlegal-dashboard-skeleton div {
        grid-column: span 1;
    }

    .frontlegal-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .frontlegal-checklist-card > header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .frontlegal-progress-label {
        justify-items: start;
    }

    .frontlegal-board-detail-header,
    .frontlegal-board-content,
    .frontlegal-board-actions,
    .frontlegal-comment-section {
        padding-right: 16px;
        padding-left: 16px;
    }

    .frontlegal-board-detail > .frontlegal-back-link {
        margin-right: 16px;
        margin-left: 16px;
    }

    .frontlegal-comment-child {
        margin-left: 16px;
    }

    .frontlegal-admin-list > article,
    .frontlegal-integration-cards > article {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .frontlegal-partner-card {
        flex-direction: column;
    }

    .frontlegal-dialog,
    .frontlegal-dialog.wide {
        width: 100%;
        max-height: 92dvh;
        margin-top: auto;
        border-left: 0;
        border-radius: var(--fl-radius-lg) var(--fl-radius-lg) 0 0;
    }

    .frontlegal-modal-backdrop {
        align-items: flex-end;
    }

    .frontlegal-toast {
        right: 16px;
        bottom: 84px;
        left: 16px;
        max-width: none;
    }

    .frontlegal-message-alert-region {
        top: 90px;
        right: 12px;
        width: calc(100vw - 24px);
    }

    body.admin-bar .frontlegal-message-alert-region {
        top: 136px;
    }

    .frontlegal-table-wrap {
        border: 0;
        background: transparent;
    }

    .frontlegal-table-wrap table,
    .frontlegal-table-wrap tbody,
    .frontlegal-table-wrap tr,
    .frontlegal-table-wrap td {
        display: block;
        width: 100%;
    }

    .frontlegal-table-wrap thead {
        display: none;
    }

    .frontlegal-table-wrap tr {
        margin-bottom: 12px;
        padding: 6px 14px;
        background: var(--fl-color-surface);
            border-radius: var(--fl-radius-md);
    }

    .frontlegal-table-wrap td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 9px 0;
            text-align: right;
    }

    .frontlegal-table-wrap tr td:last-child {
        border-bottom: 0;
    }

    .frontlegal-table-wrap td::before {
        color: var(--fl-color-text-subtle);
        content: attr(data-label);
        font-size: .875rem;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
    }

    .frontlegal-table-wrap td:empty {
        display: none;
    }

    .frontlegal-person-cell {
        justify-content: flex-end;
    }

    .frontlegal-mobile-nav button {
        position: relative;
        display: grid;
        justify-items: center;
        gap: 3px;
        padding: 7px 4px;
        color: var(--fl-color-text-muted);
        background: transparent;
        border: 0;
        border-radius: var(--fl-radius-sm);
        font-size: .875rem;
        cursor: pointer;
    }

    .frontlegal-message {
        max-width: 90%;
    }

    .frontlegal-conversation-heading {
        flex-wrap: wrap;
    }

    .frontlegal-root .frontlegal-login-shell {
        padding: 24px 16px;
    }

    .frontlegal-root .frontlegal-login-panel {
        gap: 24px;
        padding: 28px 24px;
        border-radius: var(--fl-radius-md);
    }

    .frontlegal-root .frontlegal-login-copy h1 {
        font-size: 26px;
    }
}

.frontlegal-root .frontlegal-list-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.frontlegal-root .frontlegal-subscription-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-weight: 400;
}

.frontlegal-root .frontlegal-subscription-consent input[type="checkbox"] {
    flex: 0 0 20px;
    width: 20px;
    min-height: 20px;
    margin-top: 3px;
}

.frontlegal-root .frontlegal-subscription-offices {
    display: grid;
    gap: 8px;
    margin-block: 16px;
}

.frontlegal-root .frontlegal-subscription-page dl.frontlegal-settings-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    background: transparent;
    padding: 0;
    border: 0;
}

.frontlegal-root .frontlegal-subscription-page dl.frontlegal-settings-facts > div {
    min-width: 0;
    padding: 0;
    background: transparent;
}

.frontlegal-root .frontlegal-subscription-page .frontlegal-dependency-notice {
    text-align: left;
    align-items: flex-start;
    justify-items: start;
    box-shadow: none;
    padding: 16px 0;
    margin: 0;
}

.frontlegal-root .frontlegal-subscription-page .frontlegal-dependency-notice p {
    max-width: none;
}

.frontlegal-root .frontlegal-subscription-form .frontlegal-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
    .frontlegal-root .frontlegal-subscription-page dl.frontlegal-settings-facts,
    .frontlegal-root .frontlegal-subscription-form .frontlegal-form-grid {
        grid-template-columns: 1fr;
    }
}

.frontlegal-root .frontlegal-template-order-title {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
}

.frontlegal-root .frontlegal-template-order-title > span,
.frontlegal-root .frontlegal-template-order-title > small {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .frontlegal-root *,
    .frontlegal-root *::before,
    .frontlegal-root *::after,
    .frontlegal-root input::file-selector-button,
    .frontlegal-navigation {
        transition: none !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* 16  Gauges and donuts */

.frontlegal-dashboard-aside {
    display: grid;
    gap: var(--frontlegal-card-gap);
    align-content: start;
}

.frontlegal-gauge {
    position: relative;
    display: grid;
    justify-items: center;
    padding: 8px 0 0;
}

.frontlegal-gauge svg {
    width: 100%;
    max-width: 240px;
    height: auto;
}

.frontlegal-gauge-value {
    display: grid;
    justify-items: center;
    gap: 2px;
    margin-top: -64px;
    text-align: center;
}

.frontlegal-gauge-value strong {
    color: var(--fl-color-primary);
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.frontlegal-gauge-value span {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-donut {
    position: relative;
    display: grid;
    justify-items: center;
    padding: 8px 12px 4px;
}

.frontlegal-donut svg {
    width: 100%;
    max-width: 190px;
    height: auto;
}

.frontlegal-donut-value {
    position: absolute;
    top: 50%;
    display: grid;
    justify-items: center;
    gap: 1px;
    transform: translateY(-50%);
    text-align: center;
}

.frontlegal-donut-value strong {
    color: var(--fl-color-primary);
    font-size: 30px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.frontlegal-donut-value span {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-donut-legend {
    display: grid;
    gap: 2px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.frontlegal-donut-legend li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

.frontlegal-donut-legend li > span {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
}

.frontlegal-donut-legend strong {
    flex: 1;
    color: var(--fl-color-text);
    font-size: .875rem;
    font-weight: 600;
}

.frontlegal-donut-legend small {
    color: var(--fl-color-primary);
    font-size: .875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 17  Quiet lists with explicit hover and selection */

.frontlegal-activity-list li:nth-child(even),
.frontlegal-integration-list li:nth-child(even),
.frontlegal-checklist-items li:nth-child(even),
.frontlegal-ordered-items li:nth-child(even),
.frontlegal-donut-legend li:nth-child(even),
.frontlegal-conversation-list > .frontlegal-conversation-row:nth-of-type(even),
.frontlegal-user-results > .frontlegal-user-row:nth-of-type(even) {
    background: transparent;
    border-radius: var(--fl-radius-sm);
}

.frontlegal-table-wrap tbody tr:nth-child(even) td {
    background: transparent;
}

/* Hover and selection stay a step stronger than the stripe */
.frontlegal-section > .frontlegal-list-row:hover,
.frontlegal-section > .frontlegal-list-row:nth-of-type(even):hover,
.frontlegal-conversation-list > .frontlegal-conversation-row:hover,
.frontlegal-conversation-list > .frontlegal-conversation-row:nth-of-type(even):hover,
.frontlegal-user-results > .frontlegal-user-row:hover,
.frontlegal-user-results > .frontlegal-user-row:nth-of-type(even):hover {
    background: var(--fl-color-secondary-soft);
}

.frontlegal-table-wrap tbody tr:hover td,
.frontlegal-table-wrap tbody tr:nth-child(even):hover td {
    background: var(--fl-color-secondary-soft);
}

.frontlegal-conversation-list > .frontlegal-conversation-row.active,
.frontlegal-conversation-list > .frontlegal-conversation-row:nth-of-type(even).active {
    background: var(--fl-color-secondary-soft);
}

@keyframes frontlegal-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes frontlegal-navigation-indicator {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes frontlegal-content-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes frontlegal-list-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes frontlegal-message-enter {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.frontlegal-route-enter-active {
    transition: transform var(--frontlegal-motion-panel) var(--frontlegal-motion-ease), opacity var(--frontlegal-motion-panel) var(--frontlegal-motion-ease);
}

/* Cached views are ready at once, so the outgoing view leaves faster. */
.frontlegal-route-leave-active {
    transition: transform var(--frontlegal-motion-fast) var(--frontlegal-motion-ease), opacity var(--frontlegal-motion-fast) var(--frontlegal-motion-ease);
}

.frontlegal-route-enter-from {
    opacity: 0;
    transform: translateY(8px);
}

.frontlegal-route-leave-to {
    opacity: 0;
    transform: translateY(-6px);
}

.frontlegal-route-enter-active > .frontlegal-page > *,
.frontlegal-route-enter-active > .frontlegal-messages-page > *,
.frontlegal-route-enter-active > .frontlegal-dashboard-layout > *,
.frontlegal-route-enter-active > .frontlegal-login-shell > * {
    animation: frontlegal-content-enter var(--frontlegal-motion-panel) var(--frontlegal-motion-ease) both;
}

.frontlegal-route-enter-active > .frontlegal-page > :nth-child(2),
.frontlegal-route-enter-active > .frontlegal-messages-page > :nth-child(2),
.frontlegal-route-enter-active > .frontlegal-dashboard-layout > :nth-child(2) {
    animation-delay: 40ms;
}

.frontlegal-route-enter-active > .frontlegal-page > :nth-child(3),
.frontlegal-route-enter-active > .frontlegal-messages-page > :nth-child(3),
.frontlegal-route-enter-active > .frontlegal-dashboard-layout > :nth-child(3) {
    animation-delay: 80ms;
}

.frontlegal-pop-enter-active,
.frontlegal-pop-leave-active {
    transition: transform var(--frontlegal-motion-base) var(--frontlegal-motion-ease), opacity var(--frontlegal-motion-base) var(--frontlegal-motion-ease);
}

.frontlegal-pop-enter-from,
.frontlegal-pop-leave-to {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
}

.frontlegal-drawer-enter-active,
.frontlegal-drawer-leave-active {
    transition: opacity var(--frontlegal-motion-base) var(--frontlegal-motion-ease);
}

.frontlegal-drawer-enter-from,
.frontlegal-drawer-leave-to {
    opacity: 0;
}

.frontlegal-drawer-enter-active .frontlegal-dialog,
.frontlegal-drawer-leave-active .frontlegal-dialog {
    transition: transform var(--frontlegal-motion-panel) var(--frontlegal-motion-ease), opacity var(--frontlegal-motion-panel) var(--frontlegal-motion-ease);
}

.frontlegal-drawer-enter-from .frontlegal-dialog,
.frontlegal-drawer-leave-to .frontlegal-dialog {
    opacity: 0;
    transform: translateX(20px);
}

.frontlegal-toast-enter-active,
.frontlegal-toast-leave-active {
    transition: transform var(--frontlegal-motion-base) var(--frontlegal-motion-ease), opacity var(--frontlegal-motion-base) var(--frontlegal-motion-ease);
}

.frontlegal-toast-enter-from,
.frontlegal-toast-leave-to {
    opacity: 0;
    transform: translateY(10px);
}

.frontlegal-message-alert-enter-active,
.frontlegal-message-alert-leave-active,
.frontlegal-message-alert-move {
    transition: transform 180ms var(--frontlegal-motion-ease), opacity 180ms var(--frontlegal-motion-ease);
}

.frontlegal-message-alert-enter-from,
.frontlegal-message-alert-leave-to {
    opacity: 0;
    transform: translateX(18px);
}

.frontlegal-partner-card,
.frontlegal-product-card,
.frontlegal-checklist-card,
.frontlegal-event-card,
.frontlegal-detail-card,
.frontlegal-profile-summary,
.frontlegal-panel,
.frontlegal-admin-list > article,
.frontlegal-integration-cards > article,
.frontlegal-board-row,
.frontlegal-conversation-row,
.frontlegal-user-row,
.frontlegal-stat,
.frontlegal-stat-grid article {
    transition: transform var(--frontlegal-motion-base) var(--frontlegal-motion-ease), opacity var(--frontlegal-motion-fast) var(--frontlegal-motion-ease);
}

.frontlegal-partner-card:hover,
.frontlegal-product-card:hover,
.frontlegal-checklist-card:hover,
.frontlegal-event-card:hover,
.frontlegal-detail-card:hover,
.frontlegal-profile-summary:hover,
.frontlegal-panel:hover,
.frontlegal-admin-list > article:hover,
.frontlegal-integration-cards > article:hover,
.frontlegal-board-row:hover,
.frontlegal-conversation-row:hover,
.frontlegal-user-row:hover {
    transform: translateY(-2px);
}

.frontlegal-card-grid > article,
.frontlegal-admin-list > article,
.frontlegal-event-list > article,
.frontlegal-board-list > article,
.frontlegal-checklist-card,
.frontlegal-conversation-list > .frontlegal-conversation-row,
.frontlegal-user-results > .frontlegal-user-row {
    animation: frontlegal-list-enter var(--frontlegal-motion-base) var(--frontlegal-motion-ease) both;
}

.frontlegal-card-grid > article:nth-child(2),
.frontlegal-admin-list > article:nth-child(2),
.frontlegal-event-list > article:nth-child(2),
.frontlegal-board-list > article:nth-child(2),
.frontlegal-conversation-list > .frontlegal-conversation-row:nth-child(2),
.frontlegal-user-results > .frontlegal-user-row:nth-child(2) {
    animation-delay: 30ms;
}

.frontlegal-card-grid > article:nth-child(3),
.frontlegal-admin-list > article:nth-child(3),
.frontlegal-event-list > article:nth-child(3),
.frontlegal-board-list > article:nth-child(3),
.frontlegal-conversation-list > .frontlegal-conversation-row:nth-child(3),
.frontlegal-user-results > .frontlegal-user-row:nth-child(3) {
    animation-delay: 60ms;
}

.frontlegal-card-grid > article:nth-child(4),
.frontlegal-admin-list > article:nth-child(4),
.frontlegal-event-list > article:nth-child(4),
.frontlegal-board-list > article:nth-child(4),
.frontlegal-conversation-list > .frontlegal-conversation-row:nth-child(4),
.frontlegal-user-results > .frontlegal-user-row:nth-child(4) {
    animation-delay: 90ms;
}

.frontlegal-message,
.frontlegal-comment {
    animation: frontlegal-message-enter var(--frontlegal-motion-fast) var(--frontlegal-motion-ease) both;
}

.frontlegal-message-bubble,
.frontlegal-checklist-items label,
.frontlegal-progress > span {
    transition: transform var(--frontlegal-motion-fast) var(--frontlegal-motion-ease), opacity var(--frontlegal-motion-fast) var(--frontlegal-motion-ease);
}

.frontlegal-sortable-items li:not(.is-dragging) {
    transition: transform var(--frontlegal-motion-panel) var(--frontlegal-motion-ease), border-color 140ms ease, background-color 140ms ease, opacity 140ms ease;
}

.frontlegal-checklist-items label:has(input:checked) {
    transform: translateX(2px);
}

@media (max-width: 980px) {
    .frontlegal-navigation {
        transition: transform var(--frontlegal-motion-panel) var(--frontlegal-motion-ease);
    }
}

@media (max-width: 767px) {
    .frontlegal-drawer-enter-from .frontlegal-dialog,
    .frontlegal-drawer-leave-to .frontlegal-dialog {
        transform: translateY(20px);
    }

    .frontlegal-editor-details {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
    }

    .frontlegal-editor-section > header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .frontlegal-editor-add-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .frontlegal-editor-add-item .frontlegal-button {
        width: 100%;
    }

    .frontlegal-editor-item-heading {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .frontlegal-editor-required {
        grid-column: 1 / -1;
    }

    .frontlegal-editor-item-actions {
        justify-content: space-between;
    }
}

.frontlegal-ordered-items.frontlegal-sortable-items > li,
.frontlegal-ordered-items.frontlegal-sortable-items > li:nth-child(even) {
    background: var(--fl-color-surface-soft) !important;
}

.frontlegal-ordered-items.frontlegal-sortable-items > li.is-dragging {
    overflow: visible;
    background: transparent !important;
    border-color: transparent;
}

.frontlegal-ordered-items.frontlegal-sortable-items > li.is-dragging > .frontlegal-editor-item {
    position: fixed;
    z-index: 100000;
    box-sizing: border-box;
    padding: 24px 29px;
    background: var(--fl-color-surface-soft);
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-sm);
    pointer-events: none;
    transition: none;
}

@media (max-width: 980px) {
    .frontlegal-transport-options,
    .frontlegal-settings-facts {
        grid-template-columns: 1fr;
    }

    .frontlegal-settings-card {
        padding: 18px;
    }
}

@media (max-width: 767px) {
    .frontlegal-settings-card > header {
        align-items: stretch;
        flex-direction: column;
    }

    .frontlegal-connection-state,
    .frontlegal-setup-guide > header a {
        align-self: flex-start;
    }
}
.frontlegal-app .frontlegal-news-source-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: var(--fl-color-surface-soft);
    border-radius: 12px;
}

.frontlegal-app .frontlegal-news-source-actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.frontlegal-app .frontlegal-news-source-row > input[type="checkbox"] {
    align-self: start;
    margin-top: 4px;
    width: 20px;
    height: 20px;
}

.frontlegal-app .frontlegal-news-bulkbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0;
}

.frontlegal-app .frontlegal-news-bulkbar > select {
    width: auto;
    min-width: 180px;
    margin-left: auto;
}

.frontlegal-app .frontlegal-news-bulkbar > span {
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-app .frontlegal-news-delete-confirm,
.frontlegal-app .frontlegal-news-action-results {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-sm);
    background: var(--fl-color-surface-soft);
    overflow-wrap: anywhere;
}

.frontlegal-app .frontlegal-news-action-results > article + article {
    margin-top: 16px;
}

.frontlegal-app .frontlegal-news-action-results ul {
    margin: 8px 0 16px;
    padding: 0;
    list-style: none;
}

@media (min-width: 981px) {
    .frontlegal-app .frontlegal-news-source-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .frontlegal-app .frontlegal-news-source-actions {
        grid-column: 3;
        grid-row: 1;
        max-width: 360px;
        justify-content: flex-end;
    }
}

@media (max-width: 767px) {
    .frontlegal-app .frontlegal-news-bulkbar > select {
        margin-left: 0;
        flex: 1 1 100%;
        min-width: 0;
    }

    .frontlegal-app .frontlegal-news-bulkbar > button { width: 100%; }

    .frontlegal-app .frontlegal-news-bulkbar > label {
        flex-basis: calc(100% - 120px);
    }

    .frontlegal-app .frontlegal-news-source-actions {
        grid-column: 1 / -1;
    }
}

.frontlegal-app #frontlegal-news-source-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
}

.frontlegal-app #frontlegal-news-source-form > .wide {
    grid-column: 1 / -1;
}

.frontlegal-app #frontlegal-news-source-form label {
    min-width: 0;
    align-content: start;
}

.frontlegal-app #frontlegal-news-source-form small {
    font-weight: 400;
    color: var(--fl-color-text-muted);
}

.frontlegal-app #frontlegal-news-source-form .frontlegal-checkbox-field {
    display: flex;
    align-items: center;
}

.frontlegal-app .frontlegal-news-source-row > div {
    min-width: 0;
    overflow-wrap: anywhere;
}

.frontlegal-app .frontlegal-news-source-row h3,
.frontlegal-app .frontlegal-news-preview h4 {
    margin: 0 0 8px;
}

.frontlegal-app .frontlegal-news-help {
    margin-top: 16px;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
}

.frontlegal-app .frontlegal-news-preview {
    padding: 16px;
    border: 1px solid var(--fl-color-border);
    border-radius: 8px;
    overflow-wrap: anywhere;
}

.frontlegal-app .frontlegal-news-summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 8px;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
    line-height: 1.5;
}

.frontlegal-app .frontlegal-news-mapping-summary dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 0;
}

.frontlegal-app .frontlegal-news-mapping-summary dd {
    margin: 4px 0 0;
    color: var(--fl-color-text-muted);
    overflow-wrap: anywhere;
}

.frontlegal-app .frontlegal-news-mapping-modal {
    width: min(980px, calc(100vw - 48px));
    max-width: none;
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--fl-radius-lg);
    background: var(--fl-color-surface);
    color: var(--fl-color-primary);
    overflow: hidden;
    font: inherit;
}

.frontlegal-app .frontlegal-news-mapping-modal[open] {
    display: flex;
    flex-direction: column;
}

.frontlegal-news-mapping-modal::backdrop {
    background: var(--fl-color-overlay);
}

.frontlegal-app .frontlegal-news-mapping-modal > header,
.frontlegal-app .frontlegal-news-mapping-modal > footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    flex: 0 0 auto;
}

.frontlegal-app .frontlegal-news-mapping-modal h2,
.frontlegal-app .frontlegal-news-mapping-modal h3 {
    margin: 0 0 8px;
}

.frontlegal-app .frontlegal-news-mapping-modal p {
    margin: 0 0 12px;
    color: var(--fl-color-text-muted);
    font-size: .875rem;
    line-height: 1.5;
}

.frontlegal-app .frontlegal-news-mapping-modal > footer {
    border-top: 1px solid var(--fl-color-border);
    align-items: center;
}

.frontlegal-app .frontlegal-news-mapping-modal > footer p {
    max-width: 440px;
    margin: 0;
}

.frontlegal-app .frontlegal-news-mapping-modal > footer > div {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.frontlegal-app .frontlegal-news-mapping-body {
    min-height: 0;
    padding: 0 24px 24px;
    overflow: auto;
    overscroll-behavior: contain;
}

.frontlegal-app .frontlegal-news-mapping-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 32px;
}

.frontlegal-app .frontlegal-news-key-tooltip {
    position: fixed;
    z-index: 2;
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    max-height: 200px;
    overflow: auto;
    overflow-wrap: anywhere;
    background: var(--fl-color-primary);
    color: var(--fl-color-on-primary);
    border-radius: var(--fl-radius-xs);
    font: inherit;
    font-size: .875rem;
    line-height: 1.5;
}

.frontlegal-app .frontlegal-news-key-tooltip strong {
    color: var(--fl-color-on-primary);
    font-size: .875rem;
    opacity: .8;
}

.frontlegal-app .frontlegal-news-key-grip {
    display: grid;
    gap: 3px;
    width: 14px;
    flex: 0 0 14px;
    color: var(--fl-color-text-subtle);
}

.frontlegal-app .frontlegal-news-key-grip i {
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
}

.frontlegal-app .frontlegal-news-key-list {
    display: grid;
    gap: 8px;
    max-height: 320px;
    padding: 4px;
    overflow: auto;
}

.frontlegal-app .frontlegal-news-key-list > button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--fl-color-surface-soft);
    border: 1px solid transparent;
    border-radius: var(--fl-radius-sm);
    text-align: left;
    cursor: grab;
    overflow-wrap: anywhere;
}

.frontlegal-app .frontlegal-news-key-list > button:active {
    cursor: grabbing;
}

.frontlegal-app .frontlegal-news-key-list > button.selected {
    border-color: var(--fl-color-secondary);
    background: var(--fl-color-secondary-soft);
}

.frontlegal-app .frontlegal-news-key-list small {
    font-size: .875rem;
    color: var(--fl-color-text-muted);
    flex-shrink: 0;
}

.frontlegal-app .frontlegal-news-platform-fields > article {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    border: 1px solid var(--fl-color-border);
    border-radius: var(--fl-radius-sm);
    background: var(--fl-color-surface-soft);
}

.frontlegal-app .frontlegal-news-platform-fields > article.drop-active {
    border-color: var(--fl-color-secondary);
    background: var(--fl-color-secondary-soft);
}

.frontlegal-app .frontlegal-news-platform-fields > article > button:first-child {
    display: grid;
    gap: 4px;
    flex: 1;
    min-width: 0;
    padding: 12px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    text-align: left;
    overflow-wrap: anywhere;
}

.frontlegal-app .frontlegal-news-platform-fields code,
.frontlegal-app .frontlegal-news-mapping-summary code,
.frontlegal-app .frontlegal-news-key-list code {
    font: inherit;
    font-size: .875rem;
}

.frontlegal-app .frontlegal-news-unmap {
    margin-right: 8px;
    padding: 8px;
    background: transparent;
    border: 0;
}

@media (max-width: 767px) {
    .frontlegal-app .frontlegal-news-mapping-modal {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 14px;
    }

    .frontlegal-app .frontlegal-news-mapping-modal > header,
    .frontlegal-app .frontlegal-news-mapping-modal > footer {
        padding: 16px;
    }

    .frontlegal-app .frontlegal-news-mapping-modal > footer {
        flex-direction: column;
        gap: 12px;
    }

    .frontlegal-app .frontlegal-news-mapping-body {
        padding: 0 16px 16px;
    }

    .frontlegal-app .frontlegal-news-mapping-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .frontlegal-app .frontlegal-news-key-list {
        max-height: 180px;
    }

    .frontlegal-app #frontlegal-news-source-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .frontlegal-app .frontlegal-news-source-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

.frontlegal-app .frontlegal-templates-page .frontlegal-product-card footer small,
.frontlegal-app .frontlegal-templates-page td > small {
    display: block;
    margin-top: 4px;
    color: var(--fl-color-text-muted);
}

.frontlegal-app .frontlegal-templates-page .frontlegal-filterbar {
    align-items: end;
}

/* Shares the approved dashboard rhythm across member and administration views. */
.frontlegal-root .frontlegal-page { gap: var(--frontlegal-space-card); }
.frontlegal-root .frontlegal-page-heading { margin-bottom: 8px; }
.frontlegal-root :is(.frontlegal-page, .frontlegal-page-heading, .frontlegal-card-grid, .frontlegal-admin-list, .frontlegal-form-grid, .frontlegal-dialog, .frontlegal-drawer-body) > * { min-width: 0; }
.frontlegal-root :is(h1, h2, h3, p, dd, td, .frontlegal-list-main, .frontlegal-page-heading, .frontlegal-page-header) { overflow-wrap: anywhere; }
.frontlegal-root :is(.frontlegal-stack, .frontlegal-admin-list, .frontlegal-event-list, .frontlegal-integration-cards, .frontlegal-card-grid) { gap: var(--frontlegal-space-card); }
.frontlegal-root .frontlegal-stack.compact { gap: 12px; }
.frontlegal-root :is(.frontlegal-partner-card, .frontlegal-product-card, .frontlegal-checklist-card, .frontlegal-event-card, .frontlegal-detail-card, .frontlegal-profile-summary, .frontlegal-settings-card),
.frontlegal-root :is(.frontlegal-admin-list, .frontlegal-integration-cards) > article {
    padding: var(--frontlegal-space-card);
    border: 0;
    border-radius: var(--fl-radius-md);
    background: var(--fl-color-surface);
    box-shadow: var(--fl-shadow-card);
}
.frontlegal-root :is(.frontlegal-section, .frontlegal-dialog) :is(.frontlegal-section, .frontlegal-table-wrap, .frontlegal-event-card) { box-shadow: none; }
.frontlegal-root .frontlegal-section > .frontlegal-event-list > .frontlegal-event-card { padding-inline: 0; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--fl-color-border); }
.frontlegal-root :is(.frontlegal-partner-card, .frontlegal-product-card, .frontlegal-checklist-card, .frontlegal-event-card, .frontlegal-admin-list, .frontlegal-integration-cards) h2 { font-size: 1.125rem; line-height: 1.4; }
.frontlegal-root :is(.frontlegal-partner-card, .frontlegal-product-card, .frontlegal-checklist-card, .frontlegal-event-card, .frontlegal-admin-list, .frontlegal-integration-cards) p,
.frontlegal-root :is(.frontlegal-comment p, .frontlegal-message-bubble p, .frontlegal-person-cell strong, .frontlegal-list-main strong, .frontlegal-offer strong) { font-size: 1rem; line-height: 1.5; }
.frontlegal-root :is(.frontlegal-partner-card, .frontlegal-product-card) .frontlegal-button { align-self: flex-start; }
.frontlegal-root :is(.frontlegal-filterbar, .frontlegal-board-toolbar, .frontlegal-admin-toolbar) { padding: var(--frontlegal-space-card); gap: var(--frontlegal-space-field); }
.frontlegal-root :is(.frontlegal-form-stack, .frontlegal-board-form, .frontlegal-editor-details) { gap: var(--frontlegal-space-field); }
.frontlegal-root :is(.frontlegal-form-stack > label, .frontlegal-editor-details label) { font-size: 1rem; gap: 8px; }
.frontlegal-root :is(.frontlegal-form, .frontlegal-form-grid, .frontlegal-form-stack) small { font-size: .875rem; color: var(--fl-color-text-muted); font-weight: 400; }
.frontlegal-root input[type="file"] { white-space: normal; max-width: 100%; }
.frontlegal-root input::file-selector-button { min-height: 44px; margin-right: 12px; padding: 8px 16px; border: 0; border-radius: var(--fl-radius-pill); background: var(--fl-color-secondary-soft); color: var(--fl-color-secondary); font: inherit; cursor: pointer; }
.frontlegal-root input::file-selector-button:hover { background: var(--fl-color-secondary-soft-hover); }
.frontlegal-root input[type="radio"] { width: 20px; height: 20px; min-height: 0; flex: 0 0 20px; padding: 0; accent-color: var(--fl-color-secondary); }
.frontlegal-root :is(.frontlegal-row-actions, .frontlegal-page-actions, .frontlegal-form-actions) { gap: 8px; }
.frontlegal-root :is(.frontlegal-pe-years button, .frontlegal-drawer-close, .frontlegal-chip-list button, .frontlegal-alert button, .frontlegal-error button, .frontlegal-member-actions summary, .frontlegal-member-actions button, .frontlegal-notification-menu header button) { min-width: 44px; min-height: 44px; white-space: normal; }
.frontlegal-root :is(.frontlegal-pe-certificates, .frontlegal-intervision-history) > li > button { min-height: 44px; border-radius: var(--fl-radius-pill); }
.frontlegal-root :is(.frontlegal-panel-empty > button, .frontlegal-section-heading > button):not(.frontlegal-button-compact) { min-height: 44px; }
.frontlegal-root :is(.frontlegal-alert, .frontlegal-error, p.frontlegal-error[role="alert"]) {
    padding: 16px;
    border: 0;
    border-radius: var(--fl-radius-sm);
    background: var(--fl-color-danger-soft);
    color: var(--fl-color-danger);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.frontlegal-root p.frontlegal-error[role="alert"]::before { content: none; }
.frontlegal-root :is(.frontlegal-alert, .frontlegal-error) button:not(.frontlegal-button) { padding: 8px; color: inherit; background: transparent; text-decoration: underline; }
.frontlegal-root :is(.frontlegal-empty-panel, .frontlegal-panel-empty, .frontlegal-dependency-notice, .frontlegal-board-empty, .frontlegal-chat-placeholder) { gap: 12px; padding: 32px 24px; }
.frontlegal-root :is(.frontlegal-empty-panel, .frontlegal-panel-empty, .frontlegal-dependency-notice, .frontlegal-board-empty, .frontlegal-chat-placeholder) h2 { font-size: 1.125rem; }
.frontlegal-root :is(.frontlegal-empty-panel, .frontlegal-panel-empty, .frontlegal-dependency-notice, .frontlegal-board-empty, .frontlegal-chat-placeholder) p { font-size: 1rem; }
.frontlegal-root .frontlegal-table-wrap table { font-size: 1rem; }
.frontlegal-root .frontlegal-table-wrap th { padding: 16px 20px; color: var(--fl-color-text-muted); font-size: .875rem; white-space: normal; }
.frontlegal-root .frontlegal-table-wrap td { padding: 16px 20px; }
.frontlegal-root .frontlegal-table-wrap td small { display: block; overflow-wrap: anywhere; }
.frontlegal-admin-collection { display: grid; gap: 24px; min-width: 0; }
.frontlegal-root .frontlegal-admin-overview td { vertical-align: top; }
.frontlegal-root .frontlegal-admin-overview td p { margin: 4px 0 0; color: var(--fl-color-text-muted); }
.frontlegal-root .frontlegal-dialog > header { padding: 24px; gap: 16px; }
.frontlegal-root .frontlegal-dialog > header h2 { font-size: 1.25rem; }
.frontlegal-root .frontlegal-dialog > header p { font-size: 1rem; }
.frontlegal-root .frontlegal-drawer-body { padding: 0 24px 24px; }
.frontlegal-root .frontlegal-dialog .frontlegal-form-actions { position: sticky; bottom: -24px; z-index: 2; padding: 16px 0; border-top: 1px solid var(--fl-color-border); background: var(--fl-color-surface); }
.frontlegal-root .frontlegal-dialog .frontlegal-office-assignment { padding-inline: 0; }
.frontlegal-root .frontlegal-notification-menu { width: min(420px, calc(100vw - 32px)); }
.frontlegal-root .frontlegal-notification-menu > button { padding: 16px; gap: 8px; }
.frontlegal-root .frontlegal-notification-menu > button strong,
.frontlegal-root .frontlegal-notification-copy > span { font-size: 1rem; }
.frontlegal-root .frontlegal-notification-menu time,
.frontlegal-root .frontlegal-notification-menu small { color: var(--fl-color-text-muted); }
.frontlegal-root .frontlegal-message-alert-content { font-size: 1rem; }
.frontlegal-root .frontlegal-toast { padding: 16px; border-radius: var(--fl-radius-sm); font-size: 1rem; }
.frontlegal-root :is(.frontlegal-news-source-row, .frontlegal-news-preview, .frontlegal-news-platform-fields > article) { border-radius: var(--fl-radius-sm); }
.frontlegal-root .frontlegal-news-mapping-modal p { font-size: 1rem; }
.frontlegal-root .frontlegal-news-key-list > button { min-height: 44px; }
.frontlegal-root .frontlegal-progress > span { background: var(--fl-gradient-progress); }
.frontlegal-root :is(input, textarea, select) { font-weight: 400; }

.frontlegal-root .frontlegal-integrations-page { max-width: none; width: 100%; }
.frontlegal-root .frontlegal-content:has(.frontlegal-integrations-page) { max-width: none; padding-inline: 32px; }
@media (max-width: 980px) { .frontlegal-root .frontlegal-content:has(.frontlegal-integrations-page) { padding-inline: 24px; } }
@media (max-width: 767px) { .frontlegal-root .frontlegal-content:has(.frontlegal-integrations-page) { padding-inline: 20px; } }
.frontlegal-root .frontlegal-news-sources-table table { table-layout: fixed; }
.frontlegal-news-sources-table th:nth-child(1) { width: 8%; }
.frontlegal-news-sources-table th:nth-child(2) { width: 18%; }
.frontlegal-news-sources-table th:nth-child(3) { width: 12%; }
.frontlegal-news-sources-table th:nth-child(4) { width: 12%; }
.frontlegal-news-sources-table th:nth-child(5) { width: 26%; }
.frontlegal-news-sources-table th:nth-child(6) { width: 24%; }
.frontlegal-news-sources-table .frontlegal-status-label { white-space: nowrap; }
.frontlegal-root .frontlegal-news-sources-table .frontlegal-news-source-actions { justify-content: flex-start; }
.frontlegal-root .frontlegal-board-row > button { padding: 24px; gap: 12px; }
.frontlegal-root .frontlegal-board-row h2 { font-size: 1.125rem; }
.frontlegal-root .frontlegal-board-row p { font-size: 1rem; font-weight: 400; }
.frontlegal-root :is(.frontlegal-board-row footer, .frontlegal-conversation-copy small, .frontlegal-user-row small, .frontlegal-notification-copy > span) { font-weight: 400; }
.frontlegal-root :is(.frontlegal-conversation-copy strong, .frontlegal-user-row strong) { font-size: 1rem; }
.frontlegal-root .frontlegal-message-bubble { padding: 12px 16px; }
.frontlegal-root .frontlegal-pe-page .frontlegal-pe-summary:has(.frontlegal-gauge) { grid-template-columns: minmax(0, 1fr) minmax(180px, 240px); align-items: center; }
.frontlegal-root .frontlegal-pe-page .frontlegal-pe-summary > .frontlegal-gauge { grid-column: 2; grid-row: 1 / 3; }
.frontlegal-root .frontlegal-pe-page .frontlegal-pe-summary > p { grid-column: 1; }
.frontlegal-root .frontlegal-profile-summary > div,
.frontlegal-root .frontlegal-subscription-consent > span { min-width: 0; overflow-wrap: anywhere; }
.frontlegal-root .frontlegal-profile-summary { flex-wrap: wrap; }
.frontlegal-root .frontlegal-panel { padding: var(--frontlegal-space-card); }
.frontlegal-root .frontlegal-panel > header { padding: 0; margin-bottom: 16px; flex-wrap: wrap; }
.frontlegal-root .frontlegal-stat-grid article button:not(.frontlegal-button):not(.frontlegal-stat-action) { min-height: 44px; margin-left: 0; padding: 8px 16px; background: var(--fl-color-secondary-soft); }
.frontlegal-root .frontlegal-stat-grid article.accent button { color: var(--fl-color-surface); background: color-mix(in srgb, var(--fl-color-on-primary) 14%, transparent); }
.frontlegal-root .frontlegal-stat-grid article.accent button:hover { background: color-mix(in srgb, var(--fl-color-on-primary) 22%, transparent); }

@media (max-width: 767px) {
    .frontlegal-root :is(.frontlegal-page-heading, .frontlegal-page-header) { align-items: stretch; gap: 16px; }
    .frontlegal-root .frontlegal-pe-page .frontlegal-pe-summary:has(.frontlegal-gauge) { grid-template-columns: minmax(0, 1fr); }
    .frontlegal-root .frontlegal-pe-page .frontlegal-pe-summary > .frontlegal-gauge { grid-column: auto; grid-row: auto; }
    .frontlegal-root :is(.frontlegal-page-heading, .frontlegal-page-header) > .frontlegal-button { width: 100%; }
    .frontlegal-root :is(.frontlegal-filterbar, .frontlegal-board-toolbar, .frontlegal-admin-toolbar) { padding: 20px; }
    .frontlegal-root .frontlegal-form-grid { row-gap: 20px; }
    .frontlegal-root .frontlegal-table-wrap { box-shadow: none; }
    .frontlegal-root .frontlegal-table-wrap tr { padding: 16px 20px; margin-bottom: 16px; }
    .frontlegal-root .frontlegal-table-wrap td { padding: 8px 0; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
    .frontlegal-root .frontlegal-table-wrap td::before { color: var(--fl-color-text-muted); font-size: .875rem; }
    .frontlegal-root .frontlegal-dialog > header { padding: 24px; }
    .frontlegal-root .frontlegal-drawer-body { padding: 0 24px 24px; }
    .frontlegal-root .frontlegal-dialog .frontlegal-form-actions { bottom: -24px; }
    .frontlegal-root .frontlegal-dialog > header > div { min-width: 0; }
    .frontlegal-root .frontlegal-drawer-close { flex-shrink: 0; }
    .frontlegal-root .frontlegal-news-source-actions { width: 100%; }
    .frontlegal-root .frontlegal-news-source-actions > button { flex: 1 1 100%; }
}

/* Keeps admin datasets tabular at every viewport size. */
.frontlegal-root .frontlegal-admin-scroll-table {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    background:
        linear-gradient(to right, var(--fl-color-surface) 30%, transparent) left center / 48px 100% no-repeat local,
        linear-gradient(to left, var(--fl-color-surface) 30%, transparent) right center / 48px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--fl-color-primary) 22%, transparent), transparent) left center / 20px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--fl-color-primary) 22%, transparent), transparent) right center / 20px 100% no-repeat scroll,
        var(--fl-color-surface);
    scrollbar-color: var(--fl-color-border-strong) var(--fl-color-surface-soft);
}
.frontlegal-root .frontlegal-admin-scroll-table:focus-visible { outline: 2px solid var(--fl-color-secondary); outline-offset: 2px; }
.frontlegal-root .frontlegal-admin-scroll-table table { display: table; width: 100%; min-width: 960px; table-layout: auto; }
.frontlegal-root .frontlegal-admin-scroll-table thead { display: table-header-group; }
.frontlegal-root .frontlegal-admin-scroll-table tbody { display: table-row-group; width: auto; }
.frontlegal-root .frontlegal-admin-scroll-table tr { display: table-row; width: auto; padding: 0; margin: 0; }
.frontlegal-root .frontlegal-admin-scroll-table :is(th, td) { display: table-cell; width: auto; padding: 16px 20px; vertical-align: top; text-align: left; border-bottom: 1px solid var(--fl-color-border); }
.frontlegal-root .frontlegal-admin-scroll-table td::before { display: none; content: none; }
.frontlegal-root .frontlegal-admin-scroll-table td[data-label="Acties"] { width: 144px; }
.frontlegal-root .frontlegal-admin-scroll-table :is(td[data-label="PE"], td[data-label="Bedrag"], td[data-label="Datum"]) { white-space: nowrap; }
.frontlegal-root .frontlegal-admin-scroll-table .frontlegal-status-label { white-space: nowrap; }
.frontlegal-root .frontlegal-admin-scroll-table .frontlegal-person-cell { justify-content: flex-start; }
.frontlegal-root .frontlegal-admin-scroll-table.frontlegal-news-sources-table table { table-layout: fixed; min-width: 960px; }
.frontlegal-root .frontlegal-news-sources-table th:nth-child(1) { width: 56px; }
.frontlegal-root .frontlegal-news-sources-table th:nth-child(2) { width: 200px; }
.frontlegal-root .frontlegal-news-sources-table th:nth-child(3) { width: 128px; }
.frontlegal-root .frontlegal-news-sources-table th:nth-child(4) { width: 136px; }
.frontlegal-root .frontlegal-news-sources-table th:nth-child(5) { width: 296px; }
.frontlegal-root .frontlegal-news-sources-table th:nth-child(6) { width: 144px; }
.frontlegal-root .frontlegal-news-sources-table :is(th, td) { vertical-align: top; padding-inline: 16px; }
.frontlegal-root .frontlegal-news-sources-table td[data-label="Type"] { white-space: nowrap; }
@media (max-width: 767px) {
    .frontlegal-root .frontlegal-news-sources { padding: 20px; }
    .frontlegal-root .frontlegal-news-sources-table { width: calc(100% + 40px); max-width: none; margin-inline: -20px; border-radius: 0; }
    .frontlegal-root .frontlegal-news-bulkbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .frontlegal-root .frontlegal-news-bulkbar > :is(label, span, select, button) { width: 100%; margin: 0; }
    .frontlegal-root .frontlegal-news-bulkbar .frontlegal-checkbox-field { justify-content: flex-start; }
}
.frontlegal-root .frontlegal-table-scroll-hint { display: none; }
@media (max-width: 1100px) {
    .frontlegal-root .frontlegal-table-scroll-hint { display: block; margin: 0 0 12px; color: var(--fl-color-text-muted); font-size: .875rem; }
}

/* Provides live grouped search within the existing platform header. */
.frontlegal-root .frontlegal-app-header:has(.frontlegal-platform-search.is-open) { z-index: 250; }
.frontlegal-root .frontlegal-platform-search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 340px; }
.frontlegal-root .frontlegal-platform-search .frontlegal-header-search { display: flex; width: 100%; max-width: none; gap: 8px; }
.frontlegal-root .frontlegal-platform-search.is-open .frontlegal-header-search { border-color: var(--fl-color-secondary); background: var(--fl-color-surface); box-shadow: 0 0 0 4px var(--fl-color-secondary-soft); }
.frontlegal-root .frontlegal-platform-search .frontlegal-header-search input { flex: 1; width: 100%; font-size: 1rem; }
.frontlegal-root .frontlegal-platform-search .frontlegal-header-search input:focus-visible { outline: 0; box-shadow: none; }
.frontlegal-root .frontlegal-header-search input::-webkit-search-cancel-button { display: none; }
.frontlegal-root .frontlegal-search-close,
.frontlegal-root .frontlegal-search-trigger { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 8px; border: 0; border-radius: var(--fl-radius-sm); background: transparent; color: var(--fl-color-text-muted); cursor: pointer; }
.frontlegal-root .frontlegal-search-trigger { display: none; color: var(--fl-color-secondary); background: var(--fl-color-secondary-soft); }
.frontlegal-root .frontlegal-search-close:hover { color: var(--fl-color-secondary-hover); }
.frontlegal-root .frontlegal-search-panel { position: absolute; z-index: 80; top: calc(100% + 16px); left: 50%; display: flex; flex-direction: column; width: min(760px, calc(100vw - 64px)); max-height: min(720px, calc(100dvh - 160px)); background: var(--fl-color-surface); border: 1px solid var(--fl-color-border); border-radius: var(--fl-radius-md); box-shadow: var(--fl-shadow-pop); transform: translateX(-50%); overflow: hidden; }
.frontlegal-root .frontlegal-search-panel-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; }
.frontlegal-root .frontlegal-search-panel-tools p { margin: 0; color: var(--fl-color-text-muted); font-size: .875rem; }
.frontlegal-root .frontlegal-search-panel-tools > button { flex-shrink: 0; border: 0; background: transparent; color: var(--fl-color-secondary); font: inherit; font-size: .875rem; cursor: pointer; }
.frontlegal-root .frontlegal-search-filters { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 8px; max-height: min(160px, 30dvh); padding: 0 24px 16px; border-bottom: 1px solid var(--fl-color-border); overflow-y: auto; }
.frontlegal-root .frontlegal-search-filters button { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--fl-radius-pill); color: var(--fl-color-secondary); background: var(--fl-color-secondary-tint); font: inherit; font-size: .875rem; cursor: pointer; }
.frontlegal-root .frontlegal-search-filters button[aria-pressed="true"] { color: var(--fl-color-surface); background: var(--fl-color-primary); }
.frontlegal-root .frontlegal-search-filters button span { font-weight: 400; }
.frontlegal-root .frontlegal-search-panel-body { min-height: 0; padding: 24px; overflow-y: auto; overscroll-behavior: contain; }
/* Styles scrollbars only where the platform is present. */
:is(html, body):has(.frontlegal-root)::-webkit-scrollbar,
.frontlegal-root::-webkit-scrollbar,
.frontlegal-root ::-webkit-scrollbar { width: 8px; height: 8px; }
:is(html, body):has(.frontlegal-root)::-webkit-scrollbar-track,
.frontlegal-root::-webkit-scrollbar-track,
.frontlegal-root ::-webkit-scrollbar-track { background: transparent; }
:is(html, body):has(.frontlegal-root)::-webkit-scrollbar-thumb,
.frontlegal-root::-webkit-scrollbar-thumb,
.frontlegal-root ::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: var(--fl-radius-pill); background: var(--fl-color-border-strong); background-clip: padding-box; }
:is(html, body):has(.frontlegal-root)::-webkit-scrollbar-thumb:hover,
.frontlegal-root::-webkit-scrollbar-thumb:hover,
.frontlegal-root ::-webkit-scrollbar-thumb:hover { background-color: var(--fl-color-control-border); }
@supports not selector(::-webkit-scrollbar) {
    :is(html, body):has(.frontlegal-root) { scrollbar-width: thin; scrollbar-color: var(--fl-color-border-strong) transparent; }
    .frontlegal-root, .frontlegal-root * { scrollbar-width: thin; scrollbar-color: var(--fl-color-border-strong) transparent; }
}
.frontlegal-root .frontlegal-search-group + .frontlegal-search-group { margin-top: 32px; }
.frontlegal-root .frontlegal-search-group h2 { margin: 0 0 8px; padding-bottom: 12px; color: var(--fl-color-secondary); border-bottom: 1px solid var(--fl-color-border); font-size: 1rem; font-weight: 600; }
.frontlegal-root .frontlegal-search-group ul { list-style: none; margin: 0; padding: 0; }
.frontlegal-root .frontlegal-search-result { display: grid; gap: 4px; padding: 16px 0; text-decoration: none; color: var(--fl-color-text); overflow-wrap: anywhere; }
.frontlegal-root .frontlegal-search-result strong { color: var(--fl-color-primary); font-size: 1rem; font-weight: 400; }
.frontlegal-root .frontlegal-search-result > span { color: var(--fl-color-text-muted); font-size: .875rem; line-height: 1.5; }
.frontlegal-root .frontlegal-search-result mark { padding: 0; background: transparent; color: var(--fl-color-secondary); font-weight: 600; }
.frontlegal-root .frontlegal-search-result:hover strong { color: var(--fl-color-secondary-hover); }
.frontlegal-root .frontlegal-search-empty { display: grid; justify-items: center; gap: 12px; padding: 32px 0; text-align: center; color: var(--fl-color-text-muted); }
.frontlegal-root .frontlegal-search-empty h2 { margin: 0; color: var(--fl-color-primary); font-size: 1.125rem; }
.frontlegal-root .frontlegal-search-empty p { margin: 0; }
.frontlegal-root .frontlegal-search-more { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 24px; color: var(--fl-color-text-muted); font-size: .875rem; }

@media (max-width: 980px) {
    .frontlegal-root .frontlegal-platform-search { flex: 0 0 44px; }
    .frontlegal-root .frontlegal-platform-search:not(.is-open) .frontlegal-header-search { display: none; }
    .frontlegal-root .frontlegal-search-trigger { display: flex; }
    .frontlegal-root .frontlegal-platform-search.is-open { position: fixed; z-index: 240; top: 24px; left: 24px; right: 24px; width: auto; max-width: 760px; margin-inline: auto; }
    .frontlegal-root .frontlegal-platform-search.is-open .frontlegal-search-trigger { display: none; }
    .frontlegal-root .frontlegal-platform-search.is-open .frontlegal-header-search { display: flex; }
    .frontlegal-root .frontlegal-search-panel { left: 0; width: 100%; max-height: calc(100dvh - 112px); transform: none; }
}

@media (max-width: 767px) {
    body.frontlegal-search-open { overflow: hidden; }
    .frontlegal-root .frontlegal-platform-search.is-open { inset: 0; display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh; max-width: none; padding: calc(16px + env(safe-area-inset-top)) 16px 0; margin: 0; background: var(--fl-color-surface); }
    .frontlegal-root .frontlegal-platform-search.is-open .frontlegal-header-search { flex: 0 0 auto; }
    .frontlegal-root .frontlegal-search-panel { position: static; flex: 1; min-height: 0; width: calc(100% + 32px); max-height: none; margin: 16px -16px 0; border: 0; border-radius: 0; box-shadow: none; }
    .frontlegal-root .frontlegal-search-panel-tools { padding: 16px; }
    .frontlegal-root .frontlegal-search-filters { max-height: none; padding: 0 16px 16px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
    .frontlegal-root .frontlegal-search-filters button { flex: 0 0 auto; min-height: 44px; }
    .frontlegal-root .frontlegal-search-panel-body { flex: 1; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
}

/* Keeps the latest three articles visible on every dashboard viewport. */
.frontlegal-dashboard-news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.frontlegal-news-page .frontlegal-news-archive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--frontlegal-card-gap); }
.frontlegal-news-page .frontlegal-news-card { min-width: 0; }
@media (max-width: 767px) {
    .frontlegal-root .frontlegal-dashboard-news-grid { grid-template-columns: minmax(0, 1fr); }
}

.frontlegal-news-archive-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 24px; }

/* Responsive refinements (1.0.84)
   Found in the full walkthrough at 1920, 980, 768 and 400 px.
   Breakpoints stay mobile 767 px and tablet 980 px. */

/* Status labels in tables never break inside the word. */
.frontlegal-root .frontlegal-table-wrap .frontlegal-status-label { white-space: nowrap; }

@media (min-width: 768px) {
    /* Dashboard statistics: always three equal columns next to each other. */
    .frontlegal-stat-grid:not(.frontlegal-admin-stat-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    /* Closed slide-in navigation is hidden from keyboard and screen readers. */
    .frontlegal-navigation { visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s; }

    /* Header actions use the compact mobile form so the page title fits. */
    .frontlegal-presence-button { width: 44px; padding: 0; justify-content: center; }
    .frontlegal-presence-label,
    .frontlegal-presence-button::after { display: none; }
    .frontlegal-header-profile > span:last-child { display: none; }
    .frontlegal-header-profile { padding: 5px; }
    .frontlegal-header-title .frontlegal-breadcrumb-home { padding-block: 12px; }

    /* Conversation overview without an open chat uses the full page height. */
    .frontlegal-messages-layout:not(.single-open):has(.frontlegal-chat-placeholder) .frontlegal-conversations { max-height: none; }

    /* Pages without the bottom bar (management) need no space reserved for it. */
    .frontlegal-app:not(:has(.frontlegal-mobile-nav)) .frontlegal-content { padding-bottom: 48px; }

    /* Member tables use the card layout up to tablet width; admin tables keep scrolling. */
    .frontlegal-root .frontlegal-table-wrap:not(.frontlegal-admin-scroll-table) { border: 0; background: transparent; box-shadow: none; }
    .frontlegal-root .frontlegal-table-wrap:not(.frontlegal-admin-scroll-table) :is(table, tbody, tr, td) { display: block; width: 100%; }
    .frontlegal-root .frontlegal-table-wrap:not(.frontlegal-admin-scroll-table) thead { display: none; }
    .frontlegal-root .frontlegal-table-wrap:not(.frontlegal-admin-scroll-table) tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); column-gap: 24px; margin-bottom: 16px; padding: 16px 20px; background: var(--fl-color-surface); border: 1px solid var(--fl-color-border); border-radius: var(--fl-radius-md); }
    .frontlegal-root .frontlegal-table-wrap:not(.frontlegal-admin-scroll-table) td { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; padding: 8px 0; text-align: left; }
    .frontlegal-root .frontlegal-table-wrap:not(.frontlegal-admin-scroll-table) tr td:last-child { border-bottom: 0; }
    .frontlegal-root .frontlegal-table-wrap:not(.frontlegal-admin-scroll-table) td::before { color: var(--fl-color-text-muted); content: attr(data-label); font-size: .875rem; font-weight: 600; text-align: left; white-space: nowrap; }
    .frontlegal-root .frontlegal-table-wrap:not(.frontlegal-admin-scroll-table) td:empty { display: none; }
    .frontlegal-root .frontlegal-table-wrap:not(.frontlegal-admin-scroll-table) :is(td:first-child, td[data-label="Acties"]) { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    /* Notification panel spans the header width instead of hugging the left edge. */
    .frontlegal-root .frontlegal-notification-menu { right: 0; left: 0; width: auto; }

    /* Drawer close shows only its icon so the drawer intro gets the full width. */
    .frontlegal-root .frontlegal-dialog > header > .frontlegal-drawer-close { width: 44px; padding: 0; justify-content: center; }
    .frontlegal-root .frontlegal-dialog > header > .frontlegal-drawer-close > span { display: none; }
}

/* Mobile breathing room (1.0.85)
   More space around and between blocks on phones; desktop and tablet are unchanged. */
@media (max-width: 767px) {
    /* Sections and the page heading get a calmer vertical rhythm. */
    .frontlegal-root .frontlegal-page { gap: 32px; }
    .frontlegal-root .frontlegal-page-actions { gap: 12px; }
}

/* Table words (1.0.86)
   A single word in a table cell always stays on one line. Columns grow (or the
   admin table scrolls) instead of squeezing a column down to single letters.
   Member tables only render as a table above 980 px; below that they are cards. */
.frontlegal-root .frontlegal-admin-scroll-table :is(th, td, td *) { overflow-wrap: normal; word-break: normal; }
/* Codes with hyphens (order numbers) would still break at the hyphen. */
.frontlegal-root .frontlegal-table-wrap td[data-label="Bestelling"] strong { white-space: nowrap; }

@media (min-width: 981px) {
    .frontlegal-root .frontlegal-table-wrap:not(.frontlegal-admin-scroll-table) :is(th, td, td *) { overflow-wrap: normal; word-break: normal; }
}

/* Instant platform tooltip for icon-only controls (1.0.92, smaller with a short entrance in 1.0.93). */
.frontlegal-root .frontlegal-tooltip { position: fixed; z-index: 100001; max-width: 200px; padding: 4px 8px; border-radius: var(--fl-radius-xs); background: var(--fl-color-primary); color: var(--fl-color-surface); box-shadow: var(--fl-shadow-pop); font-size: .75rem; font-weight: 600; line-height: 1.35; text-align: center; white-space: normal; pointer-events: none; transform: translate(-50%, -100%); animation: frontlegal-tooltip-above 140ms cubic-bezier(0.2,0.8,0.2,1); }
.frontlegal-root .frontlegal-tooltip.below { transform: translate(-50%, 0); animation-name: frontlegal-tooltip-below; }
@keyframes frontlegal-tooltip-above { from { opacity: 0; transform: translate(-50%, calc(-100% + 4px)) scale(.96); } to { opacity: 1; transform: translate(-50%, -100%); } }
@keyframes frontlegal-tooltip-below { from { opacity: 0; transform: translate(-50%, -4px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .frontlegal-root .frontlegal-tooltip { animation: none; } }