/* /Components/Custom/AccountListPanel.razor.rz.scp.css */
/* Sibling of ProjectListPanel.razor.css. The two panels are near-identical by
   design; the duplication is worth collapsing into a generic
   SelectableListPanel<T> once the visual work has settled. */

.account-panel[b-2a8sc6zcce] {
    display: flex;
    flex-direction: column;
    /* Was calc(100vh - 60px) against a 50px appbar - a magic number that no
       longer matched the bar even before this redesign. dvh also avoids the
       mobile address-bar overflow that 100vh causes. */
    height: calc(100dvh - var(--mud-appbar-height) - var(--fp-space-4));
    min-height: 0;
    padding: var(--fp-panel-pad);
    border-radius: var(--fp-radius-lg);
    background-color: var(--fp-surface);
    box-shadow: var(--fp-shadow-sm);
}

.account-panel__scroll[b-2a8sc6zcce] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;

    /* See ProjectListPanel.razor.css for the reasoning: the scrollbar is moved
       into the panel's right padding so it stops taking width out of the row
       column, which otherwise leaves rows ~15px short of the search field and
       footer button. */
    margin-right: calc(var(--fp-panel-pad) * -1);
    scrollbar-gutter: stable;
    /* No scrollbar-width/scrollbar-color - see ProjectListPanel.razor.css:
       either one makes Chrome ignore the exact ::-webkit-scrollbar width. */
}

.account-panel__scroll[b-2a8sc6zcce]::-webkit-scrollbar {
    width: var(--fp-panel-pad);
}

.account-panel__scroll[b-2a8sc6zcce]::-webkit-scrollbar-track {
    background: var(--fp-scroll-track);
}

.account-panel__scroll[b-2a8sc6zcce]::-webkit-scrollbar-thumb {
    background: var(--fp-scroll-thumb);
    border-radius: var(--fp-radius-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}

/* --- search ------------------------------------------------------------- */

.account-panel[b-2a8sc6zcce]  .account-search-field {
    flex: 0 0 auto;
    margin-bottom: var(--fp-space-2);
}

.account-panel[b-2a8sc6zcce]  .account-search-field .mud-input-outlined-border {
    border-radius: var(--fp-radius-pill);
    border-color: transparent;
}

/* See ProjectListPanel.razor.css - the fill belongs on .mud-input, which wraps
   the start adornment as well as the input, so the pill encloses the magnifier
   rather than starting after it. The padding puts the search icon on the same
   12px text column as the row titles and the footer label. */
.account-panel[b-2a8sc6zcce]  .account-search-field .mud-input {
    padding-left: var(--fp-space-3);
    background-color: var(--fp-surface-sunken);
    border-radius: var(--fp-radius-pill);
}

.account-panel[b-2a8sc6zcce]  .account-search-field .mud-input-slot {
    background-color: transparent;
}

.account-panel[b-2a8sc6zcce]  .account-search-field .mud-input-adornment .mud-icon-root {
    color: var(--fp-text-faint);
}

/* --- rows ---------------------------------------------------------------- */

.account-panel[b-2a8sc6zcce]  .account-list-item {
    padding: var(--fp-space-2) var(--fp-space-3);
    margin: 2px 0;
    border-radius: var(--fp-radius-md);
    transition: background-color var(--fp-dur-fast) var(--fp-ease);
}

.account-panel[b-2a8sc6zcce]  .account-list-item:hover {
    background-color: var(--fp-surface-sunken);
}

.account-panel[b-2a8sc6zcce]  .account-list-item.mud-selected-item {
    background-color: var(--fp-surface-sunken);
    color: var(--fp-text);
}

.account-panel[b-2a8sc6zcce]  .account-list-item.mud-selected-item::before {
    content: none;
}

.account-list-item__row[b-2a8sc6zcce] {
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
    width: 100%;
}

.account-list-item__text[b-2a8sc6zcce] {
    min-width: 0;
    flex: 1;
}

.account-panel[b-2a8sc6zcce]  .account-list-item__title {
    font-weight: 600;
    color: var(--fp-text);
}

.account-panel[b-2a8sc6zcce]  .account-list-item__subtitle {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--fp-text-faint);
}

/* --- delete -------------------------------------------------------------- */

.account-panel[b-2a8sc6zcce]  .account-list-item__delete {
    opacity: 0;
    /* See ProjectListPanel.razor.css - cancels the icon button's own 3px padding
       so the glyph and the title share a 12px inset. */
    margin-right: -3px;
    color: var(--fp-text-faint);
    transition: opacity var(--fp-dur-fast) var(--fp-ease),
                color var(--fp-dur-fast) var(--fp-ease);
}

.account-panel[b-2a8sc6zcce]  .account-list-item:hover .account-list-item__delete,
.account-panel[b-2a8sc6zcce]  .account-list-item:focus-within .account-list-item__delete {
    opacity: 1;
}

.account-panel[b-2a8sc6zcce]  .account-list-item__delete:hover {
    color: var(--fp-danger);
    background-color: var(--fp-danger-soft);
}

/* --- empty and loading states --------------------------------------------- */

.account-panel__state[b-2a8sc6zcce] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fp-space-2);
    padding: var(--fp-space-6) var(--fp-space-4);
    text-align: center;
    color: var(--fp-text-faint);
}

.account-panel[b-2a8sc6zcce]  .account-panel__state-icon {
    color: var(--fp-text-faint);
    opacity: .7;
}

/* --- footer --------------------------------------------------------------- */

.account-panel__footer[b-2a8sc6zcce] {
    flex: 0 0 auto;
    padding-top: var(--fp-space-2);
    margin-top: var(--fp-space-1);
    border-top: 1px solid var(--fp-line);
}

.account-panel[b-2a8sc6zcce]  .account-panel__add {
    justify-content: flex-start;
    padding-left: var(--fp-space-3);
    color: var(--fp-text-muted);
    font-weight: 500;
}

.account-panel[b-2a8sc6zcce]  .account-panel__add:hover {
    color: var(--fp-brand);
    background-color: var(--fp-brand-softer);
}
/* /Components/Custom/ProjectListPanel.razor.rz.scp.css */
/* The project list, soft warm: a white panel floating on the warm canvas, with
   rows separated by rhythm rather than by rules.

   Everything below .project-panel needs ::deep - MudPaper, MudList, MudListItem
   and MudTextField all render markup this component does not own. */

.project-panel[b-51qdnzgg1o] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: var(--fp-panel-pad);
    border-radius: var(--fp-radius-lg);
    background-color: var(--fp-surface);
    box-shadow: var(--fp-shadow-sm);
}

.project-panel__scroll[b-51qdnzgg1o] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;

    /* A classic scrollbar takes its width out of this element's content box, so
       rows would end ~15px short of the right edge while the search field and
       the footer button - which do not scroll - keep the full width. That gap
       is what made a selected row look inset on the right.

       Fix: pull the scroller out into the panel's right padding and pin the
       scrollbar to exactly that padding width, so it occupies the gutter rather
       than any of the row column. Rows, search field and footer then share one
       right edge. scrollbar-gutter keeps the space reserved when the list is
       short, so nothing shifts as items are added or filtered away. */
    margin-right: calc(var(--fp-panel-pad) * -1);
    scrollbar-gutter: stable;
}

/* Deliberately NOT setting scrollbar-width/scrollbar-color here. Chrome treats
   either of those as opting in to standard scrollbar rendering and then ignores
   the ::-webkit-scrollbar width below - measured: the gutter comes out 10px
   instead of 12px and rows overhang the column by 2px. WebKit/Blink honours an
   exact width, which is what keeps the gutter equal to --fp-panel-pad.
   Firefox falls back to its default scrollbar, so alignment there is close but
   not to the pixel. */
.project-panel__scroll[b-51qdnzgg1o]::-webkit-scrollbar {
    width: var(--fp-panel-pad);
}

.project-panel__scroll[b-51qdnzgg1o]::-webkit-scrollbar-track {
    background: var(--fp-scroll-track);
}

.project-panel__scroll[b-51qdnzgg1o]::-webkit-scrollbar-thumb {
    background: var(--fp-scroll-thumb);
    border-radius: var(--fp-radius-pill);
    /* Inset the thumb inside its track so it reads as a slim pill. */
    border: 3px solid transparent;
    background-clip: content-box;
}

/* --- search ------------------------------------------------------------- */

/* A recessed pill rather than an outlined box: one less border in a panel that
   already has a lot of edges. The brand-coloured magnifier is gone too - a
   navy search icon on every panel was pure decoration. */
.project-panel[b-51qdnzgg1o]  .project-search-field {
    flex: 0 0 auto;
    margin-bottom: var(--fp-space-2);
}

.project-panel[b-51qdnzgg1o]  .project-search-field .mud-input-outlined-border {
    border-radius: var(--fp-radius-pill);
    border-color: transparent;
}

/* The fill goes on .mud-input, the wrapper that holds the start adornment AND
   the input. Putting it on .mud-input-slot - the <input> itself - starts the
   pill after the magnifier, because the adornment sits outside that element.

   The search icon, the row titles and the footer label all sit on one text
   column, 12px inside the panel's content edge. Without the padding here the
   three land at 50 / 48 / 44 and the panel reads as slightly ragged. */
.project-panel[b-51qdnzgg1o]  .project-search-field .mud-input {
    padding-left: var(--fp-space-3);
    background-color: var(--fp-surface-sunken);
    border-radius: var(--fp-radius-pill);
}

.project-panel[b-51qdnzgg1o]  .project-search-field .mud-input-slot {
    background-color: transparent;
}

.project-panel[b-51qdnzgg1o]  .project-search-field .mud-input-adornment .mud-icon-root {
    color: var(--fp-text-faint);
}

/* --- rows ---------------------------------------------------------------- */

.project-panel[b-51qdnzgg1o]  .project-list-item {
    padding: var(--fp-space-2) var(--fp-space-3);
    margin: 2px 0;
    border-radius: var(--fp-radius-md);
    transition: background-color var(--fp-dur-fast) var(--fp-ease);
}

.project-panel[b-51qdnzgg1o]  .project-list-item:hover {
    background-color: var(--fp-surface-sunken);
}

/* Selected reads as a filled tile, not as a brand-coloured row. */
.project-panel[b-51qdnzgg1o]  .project-list-item.mud-selected-item {
    background-color: var(--fp-surface-sunken);
    color: var(--fp-text);
}

.project-panel[b-51qdnzgg1o]  .project-list-item.mud-selected-item::before {
    content: none;
}

.project-list-item__row[b-51qdnzgg1o] {
    display: flex;
    align-items: center;
    gap: var(--fp-space-2);
    width: 100%;
}

.project-list-item__text[b-51qdnzgg1o] {
    min-width: 0;
    flex: 1;
}

.project-panel[b-51qdnzgg1o]  .project-list-item__title {
    font-weight: 600;
    color: var(--fp-text);
}

/* Was a hardcoded #b0b0b0 - invisible against the dark palette, and slightly
   wrong against the light one. */
.project-panel[b-51qdnzgg1o]  .project-list-item__subtitle {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--fp-text-faint);
}

/* --- delete -------------------------------------------------------------- */

/* A red trash icon on every row is noise, and an easy misclick. Revealed on
   hover, and on focus-within so keyboard users keep access to it. */
.project-panel[b-51qdnzgg1o]  .project-list-item__delete {
    opacity: 0;
    /* Optical alignment. MudBlazor's icon button carries 3px of its own padding,
       so with the button box flush against the row's 12px inset the glyph lands
       15px from the right edge while the title sits 12px from the left. Pulling
       the button out by exactly that padding puts both marks on 12px. */
    margin-right: -3px;
    color: var(--fp-text-faint);
    transition: opacity var(--fp-dur-fast) var(--fp-ease),
                color var(--fp-dur-fast) var(--fp-ease);
}

.project-panel[b-51qdnzgg1o]  .project-list-item:hover .project-list-item__delete,
.project-panel[b-51qdnzgg1o]  .project-list-item:focus-within .project-list-item__delete {
    opacity: 1;
}

.project-panel[b-51qdnzgg1o]  .project-list-item__delete:hover {
    color: var(--fp-danger);
    background-color: var(--fp-danger-soft);
}

/* --- empty and loading states --------------------------------------------- */

.project-panel__state[b-51qdnzgg1o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fp-space-2);
    padding: var(--fp-space-6) var(--fp-space-4);
    text-align: center;
    color: var(--fp-text-faint);
}

.project-panel[b-51qdnzgg1o]  .project-panel__state-icon {
    color: var(--fp-text-faint);
    opacity: .7;
}

/* --- footer --------------------------------------------------------------- */

.project-panel__footer[b-51qdnzgg1o] {
    flex: 0 0 auto;
    padding-top: var(--fp-space-2);
    margin-top: var(--fp-space-1);
    border-top: 1px solid var(--fp-line);
}

.project-panel[b-51qdnzgg1o]  .project-panel__add {
    justify-content: flex-start;
    padding-left: var(--fp-space-3);
    color: var(--fp-text-muted);
    font-weight: 500;
}

.project-panel[b-51qdnzgg1o]  .project-panel__add:hover {
    color: var(--fp-brand);
    background-color: var(--fp-brand-softer);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Nav items in the soft warm direction: quiet at rest, and the active one
   lifts off the warm ground as a white pill rather than filling with brand
   colour. Reads as "this panel is the one you're on" instead of shouting.

   ::deep is required throughout - MudNavMenu and MudNavLink render their own
   markup, which does not carry this component's scope attribute. The .app-nav
   div in NavMenu.razor is the only element here that does. */

.app-nav[b-cswvo6budd] {
    padding: var(--fp-space-3) var(--fp-space-2);
}

/* Section headings. Small, faint, and set apart by space rather than a rule. */
.nav-section[b-cswvo6budd] {
    padding: var(--fp-space-4) var(--fp-space-3) var(--fp-space-1);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fp-text-faint);
}

    .nav-section:first-child[b-cswvo6budd] {
        padding-top: var(--fp-space-1);
    }

.app-nav[b-cswvo6budd]  .mud-nav-link {
    gap: var(--fp-space-3);
    padding: 9px var(--fp-space-3);
    margin: 2px 0;
    border-radius: var(--fp-radius-md);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--fp-text-muted);
    transition: background-color var(--fp-dur-fast) var(--fp-ease),
                color var(--fp-dur-fast) var(--fp-ease),
                box-shadow var(--fp-dur-fast) var(--fp-ease);
}

    .app-nav[b-cswvo6budd]  .mud-nav-link:hover {
        background-color: var(--fp-surface-sunken);
        color: var(--fp-text);
    }

    /* The white raised pill. MudBlazor's own active rule tints the background
       with the primary colour; overriding background here is enough to replace
       it, and our sheet loads after MudBlazor's. */
    .app-nav[b-cswvo6budd]  .mud-nav-link.active {
        background-color: var(--fp-surface);
        box-shadow: var(--fp-shadow-xs);
        color: var(--fp-text);
        font-weight: 600;
    }

/* 20px is the Material optical size for a ~13px label. The old global rule
   forced 16px with !important and then nudged it down 3px to compensate for
   the mismatch it had just created. */
.app-nav[b-cswvo6budd]  .mud-nav-link .mud-icon-root {
    font-size: var(--fp-nav-icon);
    width: var(--fp-nav-icon);
    height: var(--fp-nav-icon);
    margin: 0;
    color: var(--fp-text-faint);
    transition: color var(--fp-dur-fast) var(--fp-ease);
}

.app-nav[b-cswvo6budd]  .mud-nav-link:hover .mud-icon-root {
    color: var(--fp-text-muted);
}

.app-nav[b-cswvo6budd]  .mud-nav-link.active .mud-icon-root {
    color: var(--fp-brand);
}

/* --- collapsed rail --------------------------------------------------------
   Kept here rather than in app.css: the padding rule above is (0,3,0) and this
   sheet loads last, so an equal-specificity override in app.css would lose on
   source order. The label itself is clipped by app.css, which can reach it
   because .mud-nav-link-text belongs to MudNavLink, not to this component. */
.mud-drawer--closed .app-nav[b-cswvo6budd]  .mud-nav-link {
    justify-content: center;
    gap: 0;
    padding-inline: 0;
}

.mud-drawer--closed .app-nav[b-cswvo6budd] {
    padding-inline: var(--fp-space-1);
}
/* /Components/Pages/Documents.razor.rz.scp.css */
/* The form panel. Soft warm: a white panel on the warm canvas, separated from
   its header by a hairline on the header itself rather than by a MudDivider
   element - one fewer node, and a tighter join. */

.form-panel[b-z0l3j65t7c] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: var(--fp-space-4);
    border-radius: var(--fp-radius-lg);
    background-color: var(--fp-surface);
    box-shadow: var(--fp-shadow-sm);
}

.form-panel__header[b-z0l3j65t7c] {
    flex-shrink: 0;
    padding-bottom: var(--fp-space-3);
    border-bottom: 1px solid var(--fp-line);
}

.form-panel__title[b-z0l3j65t7c] {
    min-width: 0;
}

.form-panel__meta[b-z0l3j65t7c] {
    display: block;
    color: var(--fp-text-faint);
}

/* Secondary actions: quiet until pointed at. */
.form-panel__actions[b-z0l3j65t7c]  .mud-icon-button {
    color: var(--fp-text-faint);
    transition: color var(--fp-dur-fast) var(--fp-ease),
                background-color var(--fp-dur-fast) var(--fp-ease);
}

.form-panel__actions[b-z0l3j65t7c]  .mud-icon-button:hover {
    color: var(--fp-text);
    background-color: var(--fp-surface-sunken);
}

.form-panel__body[b-z0l3j65t7c] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-top: var(--fp-space-4);
}

.form-panel__empty[b-z0l3j65t7c] {
    color: var(--fp-text-muted);
}

/* Shown instead of the chat/form split when no project is selected. Fills the
   same space so the page does not visibly collapse, with a single quiet prompt
   centred in it. */
.workspace-empty[b-z0l3j65t7c] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--fp-space-5);
    text-align: center;
    color: var(--fp-text-muted);
}
/* /Components/Pages/DocumentsIPET.razor.rz.scp.css */
/* Sibling of Components/Pages/Documents.razor.css. Kept in step with it by
   hand, because the two pages are a compile-time fork rather than one component
   with a flag. Collapsing that fork is a worthwhile follow-up.

   The one addition over the General page is __footer: this form ends in a block
   of generate/download/upload actions that must stay pinned below the scroller. */

.form-panel[b-cd4jb6t392] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: var(--fp-space-4);
    border-radius: var(--fp-radius-lg);
    background-color: var(--fp-surface);
    box-shadow: var(--fp-shadow-sm);
}

.form-panel__header[b-cd4jb6t392] {
    flex-shrink: 0;
    padding-bottom: var(--fp-space-3);
    border-bottom: 1px solid var(--fp-line);
}

.form-panel__title[b-cd4jb6t392] {
    min-width: 0;
}

.form-panel__meta[b-cd4jb6t392] {
    display: block;
    color: var(--fp-text-faint);
}

.form-panel__actions[b-cd4jb6t392]  .mud-icon-button {
    color: var(--fp-text-faint);
    transition: color var(--fp-dur-fast) var(--fp-ease),
                background-color var(--fp-dur-fast) var(--fp-ease);
}

.form-panel__actions[b-cd4jb6t392]  .mud-icon-button:hover {
    color: var(--fp-text);
    background-color: var(--fp-surface-sunken);
}

.form-panel__actions[b-cd4jb6t392]  .form-panel__template-link {
    color: var(--fp-text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.form-panel__actions[b-cd4jb6t392]  .form-panel__template-link:hover {
    color: var(--fp-brand);
    background-color: var(--fp-brand-softer);
}

.form-panel__body[b-cd4jb6t392] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-top: var(--fp-space-4);
}

/* Replaces a MudDivider element with a border on the thing being separated -
   one fewer node, and it cannot drift out of sync with the panel padding. */
.form-panel__footer[b-cd4jb6t392] {
    flex-shrink: 0;
    padding-top: var(--fp-space-4);
    margin-top: var(--fp-space-3);
    border-top: 1px solid var(--fp-line);
}

.form-panel__empty[b-cd4jb6t392] {
    color: var(--fp-text-muted);
}

/* Shown instead of the chat/form split when no project is selected. Fills the
   same space so the page does not visibly collapse, with a single quiet prompt
   centred in it. */
.workspace-empty[b-cd4jb6t392] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--fp-space-5);
    text-align: center;
    color: var(--fp-text-muted);
}