/* _content/Filo.Web/Components/Account/AccountLayout.razor.rz.scp.css */
.filo-auth[b-p7jhmqgxkw] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--filo-bg);
}

.filo-auth-card[b-p7jhmqgxkw] {
    width: 100%;
    max-width: 24rem;
    background-color: var(--filo-surface);
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius);
    box-shadow: var(--filo-shadow);
    padding: 2rem;
}

.filo-auth-brand[b-p7jhmqgxkw] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
}

.filo-auth-mark[b-p7jhmqgxkw] {
    width: 2rem;
    height: 2rem;
    border-radius: var(--filo-radius-sm);
    background-color: var(--filo-accent-weak);
    color: var(--filo-accent-fg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.filo-auth-mark svg[b-p7jhmqgxkw] {
    width: 1.125rem;
    height: 1.125rem;
}

.filo-auth-name[b-p7jhmqgxkw] {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
/* _content/Filo.Web/Components/Layout/MainLayout.razor.rz.scp.css */
.filo-shell[b-kuv3wbu2h6] {
    min-height: 100vh;
    display: flex;
    background-color: var(--filo-bg);
}

/* CSS-only mobile drawer: the peer checkbox + scrim drive the sidebar transform. */
.filo-nav-toggle[b-kuv3wbu2h6] {
    display: none;
}

.filo-scrim[b-kuv3wbu2h6] {
    display: none;
}

/* --- Sidebar --- */
.filo-sidebar[b-kuv3wbu2h6] {
    width: var(--filo-sidebar-w);
    background-color: var(--filo-surface);
    border-right: 1px solid var(--filo-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s ease-in-out;
}

.filo-nav-toggle:checked ~ .filo-sidebar[b-kuv3wbu2h6] {
    transform: translateX(0);
}

.filo-nav-toggle:checked ~ .filo-scrim[b-kuv3wbu2h6] {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--filo-scrim);
    z-index: 40;
}

.filo-brand[b-kuv3wbu2h6] {
    height: var(--filo-header-h);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--filo-border);
}

.filo-brand-mark[b-kuv3wbu2h6] {
    width: 2rem;
    height: 2rem;
    border-radius: var(--filo-radius-sm);
    background-color: var(--filo-accent-tint); /* indigo-100 (wireframe line 65) */
    color: var(--filo-accent-fg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.filo-brand-mark svg[b-kuv3wbu2h6] {
    width: 1.25rem;
    height: 1.25rem;
}

.filo-brand-text[b-kuv3wbu2h6] {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.filo-userbox[b-kuv3wbu2h6] {
    margin-top: auto;
    border-top: 1px solid var(--filo-border);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filo-avatar[b-kuv3wbu2h6] {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background-color: var(--filo-avatar-bg);
    color: var(--filo-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex: 0 0 auto;
}

.filo-usermeta[b-kuv3wbu2h6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.filo-username[b-kuv3wbu2h6] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--filo-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filo-signout-form[b-kuv3wbu2h6] {
    margin: 0;
}

/* Sign-out is a real form submit (the auth cookie can only clear in a live request),
   styled as the quiet secondary line under the username — the affordance the wireframe
   user box implies without a separate confirm step. */
.filo-signout[b-kuv3wbu2h6] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.75rem;
    color: var(--filo-muted);
    cursor: pointer;
}

.filo-signout:hover[b-kuv3wbu2h6] {
    color: var(--filo-text);
    text-decoration: underline;
}

/* --- Main column --- */
.filo-main[b-kuv3wbu2h6] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.filo-header[b-kuv3wbu2h6] {
    height: var(--filo-header-h);
    background-color: var(--filo-surface);
    border-bottom: 1px solid var(--filo-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.filo-header-left[b-kuv3wbu2h6] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.filo-burger[b-kuv3wbu2h6] {
    display: inline-flex;
    color: var(--filo-muted);
    cursor: pointer;
}

.filo-burger svg[b-kuv3wbu2h6] {
    width: 1.5rem;
    height: 1.5rem;
}

.filo-search[b-kuv3wbu2h6] {
    position: relative;
    display: none;
    align-items: center;
}

.filo-search svg[b-kuv3wbu2h6] {
    width: 1rem;
    height: 1rem;
    position: absolute;
    left: 0.75rem;
    color: var(--filo-faint);
    pointer-events: none;
}

.filo-search input[b-kuv3wbu2h6] {
    width: 18rem;
    max-width: 60vw;
    padding: 0.5rem 0.875rem 0.5rem 2.25rem;
    background-color: var(--filo-bg);
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius-sm);
    font-size: 0.875rem;
    color: var(--filo-text);
}

.filo-search input:focus[b-kuv3wbu2h6] {
    outline: none;
    background-color: var(--filo-surface);
    border-color: var(--filo-accent-fg);
    box-shadow: 0 0 0 2px var(--filo-accent-weak);
}

/* The search submits on Enter; this button keeps an explicit submit affordance
   for assistive tech without altering the header's visual design. */
.filo-visually-hidden[b-kuv3wbu2h6] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.filo-header-right[b-kuv3wbu2h6] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.filo-bell[b-kuv3wbu2h6] {
    color: var(--filo-faint);
    display: inline-flex;
}

.filo-bell svg[b-kuv3wbu2h6] {
    width: 1.25rem;
    height: 1.25rem;
}

.filo-cta[b-kuv3wbu2h6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--filo-accent);
    color: var(--filo-on-accent);
    padding: 0.5rem 1rem;
    border-radius: var(--filo-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--filo-shadow);
}

.filo-cta:hover[b-kuv3wbu2h6] {
    background-color: var(--filo-accent-hover);
    text-decoration: none;
}

.filo-canvas[b-kuv3wbu2h6] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* --- Responsive: pin the sidebar open from md up. --- */
@media (min-width: 768px) {
    .filo-sidebar[b-kuv3wbu2h6] {
        position: sticky;
        top: 0;
        height: 100vh;
        transform: none;
    }

    .filo-burger[b-kuv3wbu2h6] {
        display: none;
    }

    .filo-search[b-kuv3wbu2h6] {
        display: flex;
    }

    .filo-canvas[b-kuv3wbu2h6] {
        padding: 2rem;
    }
}

@media (min-width: 640px) {
    .filo-search[b-kuv3wbu2h6] {
        display: flex;
    }
}
/* _content/Filo.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.filo-nav[b-w23gm7gsgf] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0.75rem;
}

.filo-nav-group[b-w23gm7gsgf] {
    margin: 1.25rem 0.75rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--filo-faint);
}

.filo-nav-group:first-child[b-w23gm7gsgf] {
    margin-top: 0.5rem;
}

/* The nav links are <NavLink> components, not plain elements, so they do NOT carry
   this component's scoped-CSS attribute — a bare `.filo-nav-link` rule never matches
   them (the symptom: the links render as wrapping inline text). `::deep` drops the
   scope requirement for descendants of the scoped <nav>, so these rules reach the
   rendered <a> and lay each link out as a vertical, padded row (wireframe lines 495–519). */
.filo-nav[b-w23gm7gsgf]  .filo-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--filo-radius-sm);
    color: var(--filo-muted);
    font-size: 0.875rem;
    text-decoration: none;
}

.filo-nav[b-w23gm7gsgf]  .filo-nav-link svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--filo-faint);
    flex: 0 0 auto;
}

.filo-nav[b-w23gm7gsgf]  .filo-nav-link:hover {
    background-color: var(--filo-hover);
    color: var(--filo-text);
    text-decoration: none;
}

.filo-nav[b-w23gm7gsgf]  .filo-nav-link:hover svg {
    color: var(--filo-muted);
}

.filo-nav[b-w23gm7gsgf]  .filo-nav-link.active {
    background-color: var(--filo-accent-weak);
    color: var(--filo-accent-text);
    font-weight: 500;
}

.filo-nav[b-w23gm7gsgf]  .filo-nav-link.active svg {
    color: var(--filo-accent-fg);
}
/* _content/Filo.Web/Components/Pages/Calendar/Index.razor.rz.scp.css */
/* Calendar surface styles (scoped — §2.1 convention; app.css untouched). */
.filo-calendar-list[b-4kogsmak2h] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.filo-calendar-link[b-4kogsmak2h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--filo-border);
}

.filo-calendar-link:last-child[b-4kogsmak2h] {
    border-bottom: none;
}

.filo-calendar-main[b-4kogsmak2h] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.filo-calendar-title[b-4kogsmak2h] {
    font-weight: 600;
}

.filo-calendar-flags[b-4kogsmak2h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.filo-calendar-error[b-4kogsmak2h] {
    color: var(--filo-danger-fg);
    font-size: 0.85rem;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filo-select[b-4kogsmak2h] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--filo-border);
    border-radius: 0.5rem;
    background: var(--filo-surface);
}
/* _content/Filo.Web/Components/Pages/Commitments/Inbox.razor.rz.scp.css */
/* The commitment inbox (scoped — plan §2.1 scoped-CSS convention; app.css untouched).
   Two columns by direction on wide screens, stacking on narrow (M5.1 responsive pass). */

.filo-inbox[b-23osrds3p8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (max-width: 48rem) {
    .filo-inbox[b-23osrds3p8] {
        grid-template-columns: 1fr;
    }
}

.filo-inbox-heading[b-23osrds3p8] {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--filo-faint);
}

.filo-inbox-list[b-23osrds3p8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.filo-inbox-item[b-23osrds3p8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--filo-surface);
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius-sm);
    box-shadow: var(--filo-shadow);
    padding: 0.875rem 1rem;
}

.filo-inbox-main[b-23osrds3p8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.filo-inbox-desc[b-23osrds3p8] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--filo-text);
}

.filo-inbox-sub[b-23osrds3p8] {
    font-size: 0.8125rem;
    color: var(--filo-muted);
}

.filo-inbox-aside[b-23osrds3p8] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
    font-size: 0.8125rem;
}

.filo-badge-overdue[b-23osrds3p8] {
    background: var(--filo-danger-bg); /* red-50 */
    color: var(--filo-danger);
}
/* _content/Filo.Web/Components/Pages/Commitments/Resolve.razor.rz.scp.css */
/* The resolve-commitment page (scoped — plan §2.1 scoped-CSS convention; app.css untouched). */

.filo-resolve-actions[b-mvfg3vfqi3] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filo-card textarea[b-mvfg3vfqi3] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius-sm);
    font-size: 0.9rem;
    color: var(--filo-text);
    background-color: var(--filo-surface);
    font-family: inherit;
}

.filo-card textarea:focus[b-mvfg3vfqi3],
.filo-card input[type="date"]:focus[b-mvfg3vfqi3] {
    outline: none;
    border-color: var(--filo-accent-fg);
    box-shadow: 0 0 0 2px var(--filo-accent-weak);
}

.filo-card input[type="date"][b-mvfg3vfqi3] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius-sm);
    font-size: 0.9rem;
    background-color: var(--filo-surface);
}

.filo-resolve-notes[b-mvfg3vfqi3] {
    color: var(--filo-muted);
    font-size: 0.9rem;
}

/* Resolution-state badges. */
.filo-resolve-badge-kept[b-mvfg3vfqi3] {
    background: var(--filo-success-bg); /* green-100 */
    color: var(--filo-success-fg);
}

.filo-resolve-badge-broken[b-mvfg3vfqi3] {
    background: var(--filo-danger-bg); /* red-50 */
    color: var(--filo-danger);
}

.filo-resolve-badge-waived[b-mvfg3vfqi3] {
    background: var(--filo-badge-neutral-bg); /* slate-100 */
    color: var(--filo-muted);
}
/* _content/Filo.Web/Components/Pages/Dashboard.razor.rz.scp.css */
.filo-dash[b-xpb8r32pj4] {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Greeting block on the left, today's-date pill on the right (wireframe lines 149–157). */
.filo-dash-head[b-xpb8r32pj4] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.filo-dash-head h1[b-xpb8r32pj4] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.filo-dash-head p[b-xpb8r32pj4] {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
}

.filo-dash-date[b-xpb8r32pj4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--filo-surface);
    border: 1px solid var(--filo-border);
    border-radius: 999px;
    box-shadow: var(--filo-shadow);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--filo-muted);
    white-space: nowrap;
}

.filo-dash-date svg[b-xpb8r32pj4] {
    width: 0.9375rem;
    height: 0.9375rem;
}

/* The open-loops layout: a wide column (urgent commitments + the timeline panels) and a
   narrower one (finance + quick tasks), the wireframe's 2/3 + 1/3 split. Each column stacks
   its panels; the grid collapses to a single column below the desktop breakpoint (AD-1). */
.filo-dash-grid[b-xpb8r32pj4] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.filo-dash-col[b-xpb8r32pj4] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

@media (max-width: 64rem) {
    .filo-dash-grid[b-xpb8r32pj4] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* _content/Filo.Web/Components/Pages/Documents/Index.razor.rz.scp.css */
/* Documents vault page (DOC-1). Reuses the global .filo-card / .filo-table /
   .filo-form primitives; only the vault's own affordances live here. */

/* A warning surface per the fixed warning tokens: yellow tint + border carry
   the colour, the text stays neutral, the icon takes the amber. */
.filo-doc-banner[b-qbrgvt27bn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--filo-warning-border);
    background: var(--filo-warning-bg);
    color: var(--filo-text);
}

.filo-doc-banner[b-qbrgvt27bn]  .filo-icon {
    color: var(--filo-warning-fg);
    flex-shrink: 0;
}

.filo-doc-anchor-row[b-qbrgvt27bn] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.filo-doc-anchor-row .filo-field[b-qbrgvt27bn] {
    min-width: 14rem;
}

.filo-doc-notes-field[b-qbrgvt27bn] {
    flex: 1;
}

.filo-doc-notes[b-qbrgvt27bn] {
    font-size: 0.8125rem;
    margin-top: 0.125rem;
}

.filo-doc-actions[b-qbrgvt27bn] {
    white-space: nowrap;
}

.filo-doc-confirm[b-qbrgvt27bn] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--filo-danger);
}

/* No global danger button exists yet (deletes are new here) — style it locally
   from the danger tokens rather than widening app.css for one page. */
.filo-doc-confirm .filo-btn-danger[b-qbrgvt27bn] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: var(--filo-radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--filo-danger-border);
    background-color: var(--filo-danger-bg);
    color: var(--filo-danger-fg);
}

.filo-doc-edit-row td[b-qbrgvt27bn] {
    background: var(--filo-surface-sunken);
}

/* Folder navigation (DOC-2). */

.filo-doc-breadcrumb[b-qbrgvt27bn] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.5rem 0 0.25rem;
    font-size: 0.875rem;
}

.filo-doc-crumb[b-qbrgvt27bn] {
    border: none;
    background: none;
    padding: 0.125rem 0.25rem;
    border-radius: var(--filo-radius-sm);
    color: var(--filo-accent-text);
    font-size: 0.875rem;
    cursor: pointer;
}

.filo-doc-crumb:hover[b-qbrgvt27bn] {
    background: var(--filo-hover);
}

.filo-doc-crumb-sep[b-qbrgvt27bn] {
    color: var(--filo-faint);
}

.filo-doc-search-note[b-qbrgvt27bn] {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.875rem;
}

.filo-doc-folder-open[b-qbrgvt27bn] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 500;
    color: var(--filo-text);
    cursor: pointer;
}

.filo-doc-folder-open:hover[b-qbrgvt27bn] {
    text-decoration: underline;
}
/* _content/Filo.Web/Components/Pages/Finance/Cashflow.razor.rz.scp.css */
/* Scoped layout for the Cashflow view (plan §2.1 — facet styles out of app.css). Reuses
   the global .filo-card / .filo-page primitives; the net banner, two-column layout and the
   surplus/deficit colours live here. */

.filo-cashflow-month[b-snq554nkj4] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--filo-text);
    align-self: center;
}

.filo-cashflow-net[b-snq554nkj4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
}

.filo-cashflow-net-label[b-snq554nkj4] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--filo-faint);
}

.filo-cashflow-net-value[b-snq554nkj4] {
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.filo-cashflow-net-meta[b-snq554nkj4] {
    font-size: 0.8125rem;
    color: var(--filo-muted);
}

.filo-cashflow-surplus[b-snq554nkj4] {
    color: var(--filo-success-fg);
}

.filo-cashflow-deficit[b-snq554nkj4] {
    color: var(--filo-danger-fg);
}

.filo-cashflow-cols[b-snq554nkj4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 640px) {
    .filo-cashflow-cols[b-snq554nkj4] {
        grid-template-columns: 1fr;
    }
}

.filo-cashflow-list[b-snq554nkj4] {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filo-cashflow-list li[b-snq554nkj4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.filo-cashflow-line-main[b-snq554nkj4] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    margin-right: auto;
}

.filo-cashflow-line-name[b-snq554nkj4] {
    font-weight: 500;
    color: var(--filo-text);
}

.filo-cashflow-line-meta[b-snq554nkj4] {
    font-size: 0.75rem;
    color: var(--filo-muted);
}

.filo-cashflow-line-amount[b-snq554nkj4] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.filo-cashflow-total[b-snq554nkj4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--filo-border);
    padding-top: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.filo-fin-amount-in[b-snq554nkj4] {
    color: var(--filo-success-fg);
}

.filo-fin-amount-out[b-snq554nkj4] {
    color: var(--filo-danger-fg);
}
/* _content/Filo.Web/Components/Pages/Finance/Index.razor.rz.scp.css */
/* Facet-specific layout for the Finance management page (scoped — plan §2.1 keeps facet
   styles out of the global app.css). Reuses the global .filo-card / .filo-form / .filo-btn /
   .filo-badge primitives; only the finance list rows + amount colours live here. */

.filo-section-head[b-6xgcetq3mi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.filo-section-subhead[b-6xgcetq3mi] {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--filo-faint);
}

.filo-fin-list[b-6xgcetq3mi] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filo-fin-list li[b-6xgcetq3mi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.filo-fin-main[b-6xgcetq3mi] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    margin-right: auto;
}

.filo-fin-name[b-6xgcetq3mi] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--filo-text);
}

.filo-fin-meta[b-6xgcetq3mi] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--filo-muted);
}

.filo-fin-amount[b-6xgcetq3mi] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--filo-text);
}

.filo-fin-amount-in[b-6xgcetq3mi] {
    color: var(--filo-success-fg);
}

.filo-fin-amount-out[b-6xgcetq3mi] {
    color: var(--filo-danger-fg);
}

.filo-fin-form[b-6xgcetq3mi] {
    border-top: 1px solid var(--filo-border);
    padding-top: 1rem;
}
/* _content/Filo.Web/Components/Pages/Obligations/Index.razor.rz.scp.css */
/* Scoped layout for the Obligations list (plan §2.1 — facet styles out of app.css).
   Reuses the global .filo-card/.filo-badge/.filo-btn primitives; the list rows and the
   due/overdue badge variants live here (the same shape the profile section uses). */

.filo-obligation-list[b-i4jqhfnt1n] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.filo-obligation-list li[b-i4jqhfnt1n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.filo-obligation-main[b-i4jqhfnt1n] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.filo-obligation-title[b-i4jqhfnt1n] {
    font-weight: 500;
    color: var(--filo-text);
}

.filo-obligation-meta[b-i4jqhfnt1n] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    color: var(--filo-muted);
}

.filo-obligation-flags[b-i4jqhfnt1n] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.filo-obligation-list-muted .filo-obligation-title[b-i4jqhfnt1n] {
    color: var(--filo-muted);
}
/* _content/Filo.Web/Components/Pages/Obligations/New.razor.rz.scp.css */
/* Scoped styling for the new-obligation form's recurrence block (plan §2.1 — facet
   styles out of app.css). The form fields reuse the global .filo-form/.filo-field
   primitives; only the recurrence fieldset + its checkbox row live here. */

.filo-recurrence[b-37vw7ioc11] {
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius-sm);
    padding: 0.875rem 1rem;
}

.filo-check[b-37vw7ioc11] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--filo-text);
    cursor: pointer;
}

.filo-check input[b-37vw7ioc11] {
    width: 1rem;
    height: 1rem;
}
/* _content/Filo.Web/Components/Pages/References/Search.razor.rz.scp.css */
/* Scoped styles for the global References search page (plan §2.1 — facet styles
   stay out of the global app.css). Reuses the global .filo-card / .filo-btn
   primitives; the search row and the result rows are the page's own. */

.filo-reference-search[b-4bylqpbqqf] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filo-reference-search input[b-4bylqpbqqf] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--filo-border);
    border-radius: 0.5rem;
    font: inherit;
}

.filo-reference-results[b-4bylqpbqqf] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filo-reference-results li[b-4bylqpbqqf] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.filo-reference-type[b-4bylqpbqqf] {
    min-width: 9rem;
    color: var(--filo-muted);
}

.filo-reference-label[b-4bylqpbqqf] {
    font-weight: 500;
    color: var(--filo-text);
}

.filo-reference-value[b-4bylqpbqqf] {
    font-variant-numeric: tabular-nums;
    color: var(--filo-text);
}

/* The anchor link (which Provider/Service the reference belongs to) trails each row. */
.filo-reference-anchor[b-4bylqpbqqf] {
    margin-left: auto;
    color: var(--filo-accent-fg);
}
/* _content/Filo.Web/Components/Pages/Tasks/TasksTable.razor.rz.scp.css */
/* Tasks list table — facet-specific styling kept scoped (plan §2.1 scoped-CSS
   convention) so it never collides in app.css. The shared table/badge/button
   classes come from app.css; only the task-specific bits live here. */

.filo-task-title[b-2jwa7a4r7t] {
    font-weight: 500;
    color: var(--filo-text);
}

/* A completed/dropped row reads as settled — dim it relative to the open loops. */
.filo-task-closed[b-2jwa7a4r7t] {
    color: var(--filo-muted);
}

.filo-task-closed .filo-task-title[b-2jwa7a4r7t] {
    color: var(--filo-muted);
    text-decoration: line-through;
}

.filo-task-actions[b-2jwa7a4r7t] {
    display: flex;
    gap: 0.375rem;
    justify-content: flex-end;
}
/* _content/Filo.Web/Components/Shared/ActiveCommitmentsPanel.razor.rz.scp.css */
/* The dashboard "Active Commitments" card (scoped — plan §2.1 scoped-CSS convention).
   Composed into the dashboard in M5.1; styled here so it drops in self-contained. */

.filo-commitpanel[b-untz3c11wr] {
    background: var(--filo-surface);
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius);
    box-shadow: var(--filo-shadow);
    overflow: hidden;
}

.filo-commitpanel-head[b-untz3c11wr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--filo-border);
    background: var(--filo-thread-bg);
}

.filo-commitpanel-title[b-untz3c11wr] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--filo-text);
}

/* The panel-header glyph is the wireframe's indigo ArrowRightLeft (line 168). */
.filo-commitpanel-titleicon[b-untz3c11wr] {
    color: var(--filo-accent-fg);
}

.filo-commitpanel-all[b-untz3c11wr] {
    font-size: 0.8125rem;
    font-weight: 500;
}

.filo-commitpanel-list[b-untz3c11wr] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.filo-commitpanel-list li[b-untz3c11wr] {
    border-bottom: 1px solid var(--filo-border-soft);
}

.filo-commitpanel-list li:last-child[b-untz3c11wr] {
    border-bottom: none;
}

.filo-commitpanel-row[b-untz3c11wr] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    color: inherit;
    text-decoration: none;
}

.filo-commitpanel-row:hover[b-untz3c11wr] {
    background: var(--filo-hover);
    text-decoration: none;
}

/* Direction mark: a colour-filled circle holding the ArrowRightLeft glyph (wireframe
   lines 176–186) — orange for "they owe me", blue for "I owe them". */
.filo-commitpanel-mark[b-untz3c11wr] {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    margin-top: 0.125rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filo-commitpanel-mark-theyto[b-untz3c11wr] {
    background: var(--filo-direction-owing-bg); /* orange-100 */
    color: var(--filo-direction-owing-fg);      /* orange-600 */
}

.filo-commitpanel-mark-meto[b-untz3c11wr] {
    background: var(--filo-direction-owed-bg); /* blue-100 */
    color: var(--filo-direction-owed-fg);      /* blue-600 */
}

.filo-commitpanel-body[b-untz3c11wr] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.filo-commitpanel-chevron[b-untz3c11wr] {
    flex: 0 0 auto;
    align-self: center;
    color: var(--filo-faint);
    display: flex;
}

.filo-commitpanel-line[b-untz3c11wr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filo-commitpanel-provider[b-untz3c11wr] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--filo-text);
}

.filo-commitpanel-desc[b-untz3c11wr] {
    font-size: 0.875rem;
    color: var(--filo-muted);
}

/* Direction badges — orange for "awaiting them", blue for "owed by me" (wireframe). */
.filo-commitpanel-dir-theyto[b-untz3c11wr] {
    background: var(--filo-direction-owing-bg); /* orange-100 */
    color: var(--filo-direction-owing-fg-strong);      /* orange-700 */
}

.filo-commitpanel-dir-meto[b-untz3c11wr] {
    background: var(--filo-direction-owed-bg); /* blue-100 */
    color: var(--filo-direction-owed-fg-strong);      /* blue-700 */
}

.filo-badge-overdue[b-untz3c11wr] {
    align-self: flex-start;
    background: var(--filo-danger-bg); /* red-50 */
    color: var(--filo-danger);
}
/* _content/Filo.Web/Components/Shared/AdHocTasksWidget.razor.rz.scp.css */
/* The dashboard "Ad-hoc Tasks" card (scoped — plan §2.1 scoped-CSS convention).
   Composed into the dashboard in M5.1; styled here so it drops in self-contained. */

.filo-adhoc[b-763q6q8vj4] {
    background: var(--filo-surface);
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius);
    box-shadow: var(--filo-shadow);
    padding: 1.25rem;
}

.filo-adhoc-title[b-763q6q8vj4] {
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--filo-text);
}

/* Wireframe line 269: the panel glyph is the indigo CheckSquare. */
.filo-adhoc-titleicon[b-763q6q8vj4] {
    color: var(--filo-accent-fg);
}

.filo-adhoc-list[b-763q6q8vj4] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.filo-adhoc-item[b-763q6q8vj4] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
}

.filo-adhoc-item input[b-763q6q8vj4] {
    margin-top: 0.2rem;
}

.filo-adhoc-text[b-763q6q8vj4] {
    font-size: 0.875rem;
    color: var(--filo-text);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filo-adhoc-add[b-763q6q8vj4] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--filo-accent-text);
}
/* _content/Filo.Web/Components/Shared/CashflowWidget.razor.rz.scp.css */
/* The dashboard Cashflow widget (wireframe lines 244–264): the one dark card on the
   board — a slate gradient with white type — so this month's money reads as a distinct,
   weightier surface beside the white panels. It carries its own token family
   (--filo-cf-*) so the dark card is pixel-identical in light mode and still lifts
   off the dark canvas in dark mode. */

.filo-cashflow-widget[b-tarxs19tae] {
    background: linear-gradient(to bottom right, var(--filo-cf-from), var(--filo-cf-to));
    border: 1px solid var(--filo-cf-to);
    border-radius: 0.75rem;
    box-shadow: var(--filo-cf-shadow);
    padding: 1.25rem;
    color: var(--filo-cf-text);
}

.filo-cashflow-widget-title[b-tarxs19tae] {
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--filo-cf-label); /* slate-300 */
}

.filo-cashflow-widget-title svg[b-tarxs19tae] {
    width: 1rem;
    height: 1rem;
}

.filo-cashflow-widget-loading[b-tarxs19tae] {
    margin: 0;
    color: var(--filo-cf-faint); /* slate-400 */
}

.filo-cashflow-widget-net[b-tarxs19tae] {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Net sign keeps its meaning on the dark card, lightened for contrast. */
.filo-cashflow-surplus[b-tarxs19tae] {
    color: var(--filo-cf-positive); /* green-300 */
}

.filo-cashflow-deficit[b-tarxs19tae] {
    color: var(--filo-cf-negative); /* red-300 */
}

.filo-cashflow-widget-caption[b-tarxs19tae] {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--filo-cf-faint); /* slate-400 */
}

.filo-cashflow-widget-divider[b-tarxs19tae] {
    height: 1px;
    width: 100%;
    background: var(--filo-cf-divider); /* slate-400 @ 30% */
    margin: 1rem 0;
}

.filo-cashflow-widget-rows[b-tarxs19tae] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filo-cashflow-widget-rows > div[b-tarxs19tae] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
}

.filo-cashflow-widget-rows dt[b-tarxs19tae] {
    color: var(--filo-cf-label); /* slate-300 */
}

.filo-cashflow-widget-rows dd[b-tarxs19tae] {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.filo-fin-amount-in[b-tarxs19tae] {
    color: var(--filo-cf-positive); /* green-300 */
}

.filo-fin-amount-out[b-tarxs19tae] {
    color: var(--filo-cf-negative); /* red-300 */
}

/* Full-width translucent action, matching the wireframe's "View Ledger" button. */
.filo-cashflow-widget-all[b-tarxs19tae] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.25rem;
    padding: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    background: var(--filo-cf-action);
    border-radius: var(--filo-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--filo-cf-text);
}

.filo-cashflow-widget-all:hover[b-tarxs19tae] {
    background: var(--filo-cf-action-hover);
    text-decoration: none;
}
/* _content/Filo.Web/Components/Shared/DocumentUploader.razor.rz.scp.css */
/* Upload control (DOC-1). Reuses the global .filo-btn primitives; only the
   uploader's own row layout lives here. */

.filo-doc-uploader[b-dzx1cym0dm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.filo-doc-uploader[b-dzx1cym0dm]  input[type="file"] {
    font-size: 0.875rem;
    color: var(--filo-text);
}

.filo-doc-upload-error[b-dzx1cym0dm] {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.875rem;
    color: var(--filo-danger);
}
/* _content/Filo.Web/Components/Shared/FollowUpActions.razor.rz.scp.css */
/* The step-3 "Follow-up Actions" host on the log form (scoped — plan §2.1). M1.4
   ships the shell; M1.5/M2.1 add their action branches. Only the container and its
   heading live here so the later branches drop in without an app.css change. */

.filo-followups[b-ctk8pjwgr7] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--filo-border);
}

.filo-section-subhead[b-ctk8pjwgr7] {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--filo-faint);
}

/* M1.5 create-Task action: a toggle that reveals the inline draft-task fields. */
.filo-followup-action[b-ctk8pjwgr7] {
    background: var(--filo-bg);
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius-sm);
    padding: 1rem;
}

.filo-followup-toggle[b-ctk8pjwgr7] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
}

.filo-followup-toggle input[b-ctk8pjwgr7] {
    margin-top: 0.2rem;
}

.filo-followup-label[b-ctk8pjwgr7] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--filo-text);
}

.filo-followup-hint[b-ctk8pjwgr7] {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--filo-muted);
}

.filo-followup-fields[b-ctk8pjwgr7] {
    margin-top: 1rem;
    padding-top: 1rem;
    padding-left: 1.625rem;
    border-top: 1px solid var(--filo-border);
}
/* _content/Filo.Web/Components/Shared/NeedsAttention.razor.rz.scp.css */
/* Scoped styles for the needs-attention surface (CSS isolation — keeps facet styles out of
   app.css per the plan's scoped-CSS convention). Reuses the global .filo-card/.filo-badge
   primitives; only the list layout is component-local. */
.filo-attention[b-c6o7lqrc5t] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filo-attention-title[b-c6o7lqrc5t] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.filo-attention-list[b-c6o7lqrc5t] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filo-attention-list li[b-c6o7lqrc5t] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--filo-border);
}

.filo-attention-list li:last-child[b-c6o7lqrc5t] {
    border-bottom: none;
}

.filo-attention-subject[b-c6o7lqrc5t] {
    font-weight: 500;
}

.filo-attention-meta[b-c6o7lqrc5t] {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--filo-muted);
}
/* _content/Filo.Web/Components/Shared/ReferenceEditor.razor.rz.scp.css */
/* Scoped styles for the inline reference editor (plan §2.1 — facet styles stay
   out of the global app.css). Reuses the global .filo-form / .filo-field
   primitives; only the "never secrets" affordance is the editor's own. */

/* The "non-secret only" affordance (FR-RF-2 / NG1) — the vault discourages
   secret entry, and there is no password/PIN/CVV field to enter one into. */
.filo-reference-warning[b-592r4kofqi] {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--filo-surface-sunken);
    color: var(--filo-muted);
    font-size: 0.8125rem;
}
/* _content/Filo.Web/Components/Shared/Sections/CommitmentsSection.razor.rz.scp.css */
/* The Commitments facet section on the Provider profile (scoped — plan §2.1 scoped-CSS
   convention; app.css untouched). Reuses the global .filo-card / .filo-badge primitives. */

.filo-commit-head[b-b9ef44eelr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.filo-commit-head .filo-card-title[b-b9ef44eelr] {
    margin: 0;
}

.filo-commit-direction[b-b9ef44eelr] {
    margin: 0.75rem 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--filo-faint);
}

.filo-commit-list[b-b9ef44eelr] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filo-commit-list li[b-b9ef44eelr] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.filo-commit-desc[b-b9ef44eelr] {
    font-size: 0.875rem;
    font-weight: 500;
}

.filo-commit-meta[b-b9ef44eelr] {
    flex: 0 0 auto;
    font-size: 0.8125rem;
}

/* Overdue badge — scoped (the global .filo-badge carries the shape; this tints it). */
.filo-badge-overdue[b-b9ef44eelr] {
    background: var(--filo-danger-bg); /* red-50 */
    color: var(--filo-danger);
}
/* _content/Filo.Web/Components/Shared/Sections/DocumentsSection.razor.rz.scp.css */
/* Facet-specific layout for the Documents section (scoped — plan §2.1 keeps
   facet styles out of the global app.css). Reuses the global .filo-card and
   .filo-btn primitives; only the document rows live here. */

.filo-doc-section-upload[b-tsv1ql5yx1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.filo-doc-list[b-tsv1ql5yx1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filo-doc-list li[b-tsv1ql5yx1] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.filo-doc-name[b-tsv1ql5yx1] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 500;
    color: var(--filo-text);
}

.filo-doc-date[b-tsv1ql5yx1] {
    margin-left: auto;
    color: var(--filo-muted);
}
/* _content/Filo.Web/Components/Shared/Sections/InteractionsSection.razor.rz.scp.css */
/* Facet-specific layout for the Interactions history section (scoped — plan §2.1
   keeps facet styles out of the global app.css). Reuses the global .filo-card,
   .filo-badge and .filo-btn primitives; only the section header, the timeline
   rows and the appointment badge live here. */

.filo-section-head[b-snmhghj196] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.filo-interaction-list[b-snmhghj196] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filo-interaction-list li[b-snmhghj196] {
    padding-left: 0.875rem;
    border-left: 2px solid var(--filo-border);
}

.filo-interaction-head[b-snmhghj196] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.filo-interaction-when[b-snmhghj196] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--filo-text);
}

.filo-interaction-meta[b-snmhghj196] {
    font-size: 0.75rem;
    color: var(--filo-muted);
}

.filo-interaction-subject[b-snmhghj196] {
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
    color: var(--filo-text);
}

.filo-interaction-detail[b-snmhghj196] {
    margin: 0.25rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--filo-text);
}

.filo-interaction-outcome[b-snmhghj196] {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    color: var(--filo-muted);
}

/* Appointment-type (TD-17): a planned, not-yet-happened interaction. */
.filo-badge-appointment[b-snmhghj196] {
    background-color: var(--filo-accent-weak);
    color: var(--filo-accent-text);
}
/* _content/Filo.Web/Components/Shared/Sections/ObligationsSection.razor.rz.scp.css */
/* Facet-specific layout for the Obligations section (scoped — plan §2.1 keeps facet
   styles out of the global app.css). Reuses the global .filo-card, .filo-badge and
   .filo-btn primitives; only the section's own list rows and the due/overdue badge
   variants live here. */

.filo-section-head[b-0vdrxtfl78] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.filo-section-subhead[b-0vdrxtfl78] {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--filo-faint);
}

.filo-obligation-list[b-0vdrxtfl78] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filo-obligation-list li[b-0vdrxtfl78] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.filo-obligation-main[b-0vdrxtfl78] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.filo-obligation-title[b-0vdrxtfl78] {
    font-weight: 500;
    color: var(--filo-text);
}

.filo-obligation-meta[b-0vdrxtfl78] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--filo-muted);
}

.filo-obligation-flags[b-0vdrxtfl78] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.filo-obligation-list-muted .filo-obligation-title[b-0vdrxtfl78] {
    color: var(--filo-muted);
}
/* _content/Filo.Web/Components/Shared/Sections/RecurringOutgoingSection.razor.rz.scp.css */
/* Facet-specific layout for the Service-profile Recurring outgoings section (scoped —
   plan §2.1). Reuses the global .filo-card / .filo-badge / .filo-btn primitives. */

.filo-section-head[b-6rkz56ppma] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.filo-section-subhead[b-6rkz56ppma] {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--filo-faint);
}

.filo-fin-list[b-6rkz56ppma] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filo-fin-list li[b-6rkz56ppma] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.filo-fin-main[b-6rkz56ppma] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    margin-right: auto;
}

.filo-fin-name[b-6rkz56ppma] {
    font-weight: 500;
    color: var(--filo-text);
}

.filo-fin-meta[b-6rkz56ppma] {
    color: var(--filo-muted);
}

.filo-fin-amount[b-6rkz56ppma] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--filo-text);
}

.filo-fin-amount-out[b-6rkz56ppma] {
    color: var(--filo-danger-fg);
}

.filo-fin-list-muted .filo-fin-name[b-6rkz56ppma] {
    color: var(--filo-muted);
}
/* _content/Filo.Web/Components/Shared/Sections/ReferencesSection.razor.rz.scp.css */
/* Facet-specific layout for the References section (scoped — plan §2.1 keeps
   facet styles out of the global app.css). Reuses the global .filo-card,
   .filo-btn and .filo-form primitives; only the section's own header and the
   reference rows live here. */

.filo-section-head[b-4sp5ak4k0u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.filo-reference-list[b-4sp5ak4k0u] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filo-reference-list li[b-4sp5ak4k0u] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.filo-reference-type[b-4sp5ak4k0u] {
    min-width: 9rem;
    color: var(--filo-muted);
}

.filo-reference-label[b-4sp5ak4k0u] {
    font-weight: 500;
    color: var(--filo-text);
}

/* The value is the reference number itself — tabular so digits line up. */
.filo-reference-value[b-4sp5ak4k0u] {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--filo-text);
}
/* _content/Filo.Web/Components/Shared/Sections/ServicesSection.razor.rz.scp.css */
/* Facet-specific layout for the Services section (scoped — plan §2.1 keeps
   facet styles out of the global app.css). Reuses the global .filo-card,
   .filo-badge and .filo-btn primitives; only the section's own list rows
   and header live here. */

.filo-section-head[b-f14qrga0qc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.filo-section-subhead[b-f14qrga0qc] {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--filo-faint);
}

.filo-service-list[b-f14qrga0qc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filo-service-list li[b-f14qrga0qc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.filo-service-name[b-f14qrga0qc] {
    font-weight: 500;
    color: var(--filo-text);
}

.filo-service-kind[b-f14qrga0qc] {
    color: var(--filo-muted);
}

/* Push the status badge to the trailing edge of each row. */
.filo-service-list li .filo-badge[b-f14qrga0qc] {
    margin-left: auto;
}

.filo-service-list-muted .filo-service-name[b-f14qrga0qc] {
    color: var(--filo-muted);
}
/* _content/Filo.Web/Components/Shared/UpcomingAppointmentsPanel.razor.rz.scp.css */
/* Scoped layout for the dashboard "Upcoming Appointments" panel (plan §2.1 — facet styles out of
   app.css). Mirrors the Upcoming Obligations panel's card/date-chip/row shape so the two read as
   one design language; reuses the global --filo-* tokens. */

.filo-appts[b-o579cpznk9] {
    background: var(--filo-surface);
    border: 1px solid var(--filo-border);
    border-radius: 0.75rem;
    box-shadow: var(--filo-shadow);
    padding: 1.25rem;
}

.filo-appts-title[b-o579cpznk9] {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--filo-text);
}

.filo-appts-list[b-o579cpznk9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filo-appts-list li[b-o579cpznk9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filo-appts-date[b-o579cpznk9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--filo-border);
    border-radius: 0.5rem;
    background: var(--filo-thread-bg);
    flex-shrink: 0;
}

.filo-appts-day[b-o579cpznk9] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--filo-text);
    line-height: 1;
}

.filo-appts-mon[b-o579cpznk9] {
    font-size: 0.625rem;
    text-transform: uppercase;
    color: var(--filo-muted);
}

.filo-appts-main[b-o579cpznk9] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    margin-right: auto;
}

.filo-appts-subject[b-o579cpznk9] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--filo-text);
}

.filo-appts-meta[b-o579cpznk9] {
    font-size: 0.75rem;
    color: var(--filo-muted);
}

.filo-appts-all[b-o579cpznk9] {
    display: inline-flex;
    margin-top: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--filo-accent-fg);
}
/* _content/Filo.Web/Components/Shared/UpcomingObligationsPanel.razor.rz.scp.css */
/* Scoped layout for the dashboard "Upcoming Obligations" panel (plan §2.1 — facet
   styles out of app.css). Reuses the global .filo-card/.filo-badge primitives; the
   date chip, rows and the overdue badge variant live here. */

.filo-upcoming[b-o79x7e41sz] {
    background: var(--filo-surface);
    border: 1px solid var(--filo-border);
    border-radius: 0.75rem;
    box-shadow: var(--filo-shadow);
    padding: 1.25rem;
}

.filo-upcoming-title[b-o79x7e41sz] {
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--filo-text);
}

/* Wireframe line 216: the panel glyph is the teal CalendarDays. */
.filo-upcoming-titleicon[b-o79x7e41sz] {
    color: var(--filo-teal); /* teal-500 */
}

.filo-upcoming-list[b-o79x7e41sz] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filo-upcoming-list li[b-o79x7e41sz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filo-upcoming-date[b-o79x7e41sz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--filo-border);
    border-radius: 0.5rem;
    background: var(--filo-thread-bg);
    flex-shrink: 0;
}

.filo-upcoming-day[b-o79x7e41sz] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--filo-text);
    line-height: 1;
}

.filo-upcoming-mon[b-o79x7e41sz] {
    font-size: 0.625rem;
    text-transform: uppercase;
    color: var(--filo-muted);
}

.filo-upcoming-main[b-o79x7e41sz] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    margin-right: auto;
}

.filo-upcoming-subject[b-o79x7e41sz] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--filo-text);
}

.filo-upcoming-meta[b-o79x7e41sz] {
    font-size: 0.75rem;
    color: var(--filo-muted);
}

.filo-upcoming-all[b-o79x7e41sz] {
    display: inline-flex;
    margin-top: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--filo-accent-fg);
}