/*
  Inter, Sniglet and Comfortaa, served by the application itself.

  They are not fetched from Google Fonts at run time: the portal has to look the same wherever
  it runs, and serving a font from Google means every visitor's browser calling Google — which
  is a privacy question in the European Union and one less thing to explain before the public
  opening of phase 14.

  Both are variable fonts under the SIL Open Font License 1.1 (the licence travels beside them
  in OFL.txt), cut down to Latin and Latin Extended — everything Portuguese writes — plus the
  ▲ and ▼ the panel puts on its own figures. Inter is the face of the whole interface;
  Sniglet writes the product's name and nothing else; Comfortaa writes the company's.
*/

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2-variations'),
         url('fonts/inter-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Sniglet';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/sniglet-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/comfortaa-latin.woff2') format('woff2-variations'),
         url('fonts/comfortaa-latin.woff2') format('woff2');
}

/*
  What the MudTheme cannot say on its own. Section 8.1 of the plan:
  10 px corners on buttons and fields (the theme), 14 px on cards, and every figure
  written with fixed-width digits so columns of numbers line up.
*/

/* **Every window is a `.bf-card`, whatever MudBlazor component draws it**, and the class is
   written twice so it outweighs a component's own corner: `.mud-tabs.mud-tabs-rounded` carries
   two classes and gave the administration's tab strip 10 px corners beside 14 px cards
   (owner, 2026-09-21: every page looks the same). */
.mud-card,
.bf-card.bf-card {
    border-radius: 14px;
}

/* **Whatever opens over the page carries a line around it** — dialogs, menus and the lists
   of a select (owner, 2026-09-27: in the dark theme a dialog could not be told apart from the
   page under it). The same line as the windows, in both themes; the tooltips keep none — they
   are a word, not a window. */
.mud-dialog,
.mud-popover.mud-paper:not(.mud-tooltip) {
    border: 1px solid var(--mud-palette-lines-default);
}

/* A number is a column of digits, never proportional text. */
.bf-number,
.bf-card td,
.bf-card th {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* An amount is never cut in two: «797,79 €» stays on one line, sign and euro included.
   **Only a figure**: a rule over every cell of a card stops a description wrapping too, and on
   a phone — where MudBlazor stacks each row as label and value — it pushes the whole table into
   a sideways scroll. */
.bf-number {
    white-space: nowrap;
}

/* Green and red mean positive and negative, and nothing else. **No colour is written in this
   stylesheet**: every one comes from the theme (`BFreeTheme`) through MudBlazor's
   `--mud-palette-*` variables, so a colour is changed in one place and every page follows. The
   only exceptions are the company's name, whose colours are the brand's and not the theme's, and
   the white behind the QR code, which is what a camera reads. */
.bf-gain {
    color: var(--mud-palette-success);
}

.bf-loss {
    color: var(--mud-palette-error);
}

/* Neither up nor down — the accent, which is the theme's and changes with it. */
.bf-accent {
    color: var(--mud-palette-primary);
}

/* The label of a figure: quieter than the figure itself. */
.bf-label {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
    opacity: .7;
}

.bf-figure {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
}

/* The product's name beside the logo, at the size of a heading. */
.bf-product {
    font-size: 1.35rem;
    line-height: 1.2;
    /* «B-FREE» has no descender, so all of its ink sits above the baseline and the line
       box centres about 2 px above the letters. Centring the boxes against the 40 px logo
       therefore leaves the word looking high; this puts the ink back on the logo's axis. */
    position: relative;
    top: 2px;
}

/* Who is signed in, beside the photo in the top bar. */
.bf-user {
    cursor: pointer;
}

.bf-user-name {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
}

.bf-user .bf-label {
    line-height: 1.2;
}

/*
  The top bar is separated from the content by a line and a shadow, not by a colour — which is
  exactly what Syndron UI does: its header carries the page's own background, a 1 px bottom
  border and a small shadow. Without them the bar and the content run into each other in the
  dark theme.
*/
.bf-appbar .mud-appbar,
.mud-appbar.bf-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

/* In the light theme the sidebar is white on a grey page and needs its own edge. */
.mud-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}


/*
  In the dark theme a black shadow over a dark page cannot be seen, so the bar and the content
  ran into each other — the owner said so. MudBlazor writes the same CSS variables in both
  modes, so nothing in the DOM says which is showing: the layout carries `bf-dark`, and that
  is what a heavier shadow and a brighter line hang from.
*/
.bf-dark .mud-appbar.bf-appbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .60);
}

/*
  The footer, as in the template: the copyright on the left, who built it on the right, quiet
  text over a single line and no background of its own. It sits at the bottom of the window
  even when the page is short, which is what the flex column and the automatic top margin do.
*/
.bf-main.bf-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* The whole gutter of the page, and the reason it is not MudBlazor's `pa-4`: the top bar
       is 64 px and fixed, so a padding of exactly that leaves the first line touching its
       edge while every other side has air. The 16 px gutter goes on the top as well — and
       MudBlazor's padding utilities carry `!important`, so they cannot be corrected from
       here and have to be left out. */
    padding: 80px 16px 8px;
}

.bf-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.bf-footer {
    flex-shrink: 0;
    /* 8 px above the line and 8 px under the words (the owner, 2026-09-20): the footer is a
       quiet strip and was taking as much height as a block of content. */
    margin-top: .5rem;
    padding: .5rem .5rem 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
    /* Three columns (the owner, 2026-10-02): the copyright, the version of the application in
       the very middle of the bar - two equal outer columns are what keep it there whatever the
       words on either side - and who built it. On a phone they stack. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .25rem 1rem;
    align-items: center;
}

.bf-footer .bf-version {
    text-align: center;
}

.bf-footer .bf-footer-end {
    justify-self: end;
}

@media (max-width: 959.98px) {
    .bf-footer {
        grid-template-columns: 1fr;
    }

    .bf-footer .bf-version {
        text-align: left;
    }

    .bf-footer .bf-footer-end {
        justify-self: start;
    }
}

/*
  The name of the application, wherever it is written (the owner, 2026-10-03): «B-FREE» in
  Sniglet, spaced out, in the gold of the accent — pale in the dark theme, deep in the light one,
  as the logo draws it. The rule is carried by the `BrandName` component, which is the only thing
  that writes it, so it cannot come out any other way on a page built later.
*/
.bf-brand,
a:hover .bf-brand {
    font-family: Sniglet, "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 400;
    letter-spacing: .14em;
    white-space: nowrap;
    color: var(--mud-palette-primary);
}

/*
  The name of the company that owns B-FREE, wherever it is written (the owner, 2026-09-19, and
  again 2026-10-03): lower case, Comfortaa, and «byte» in red. The rule is carried by the
  `Petabyte` component, which is the only thing that writes it.
*/
.bf-word {
    font-family: Comfortaa, Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: lowercase;
    letter-spacing: .01em;
    /* «peta» is white on the dark theme and black on the light one, wherever the name is
       written — never the quieter grey of the text around it. The two rules below are exact;
       this one is what serves a page rendered outside the application's frame. */
    color: var(--mud-palette-text-primary);
}

.bf-dark .bf-word {
    color: #FFFFFF;
}

.bf-light .bf-word {
    color: #000000;
}

/* A colour set on the ancestor never reaches a child that has one of its own, so «byte» stays
   red in both themes without needing a rule per mode. */
.bf-word-byte {
    color: #FF0000;
}

/*
  The month and the year beside the page's title. MudBlazor reserves 8 px above an outlined
  field for the notch its floating label sits in — and only 4 px below, which pushed the box
  off the row's axis and left it reading as stuck to the top. The room stays (the label needs
  it) and is simply made even, so the box centres in the height the row has.

  The selector carries three classes because MudBlazor's own is
  `.mud-input-control.mud-input-control-margin-dense.mud-input-outlined-with-label`: with two it
  loses on specificity and nothing happens.
*/
.mud-input-control.mud-input-outlined-with-label.bf-picker {
    margin-top: 8px;
    margin-bottom: 8px;
}

/*
  The year and the month sit together at the right-hand end of the page's title row. Left as
  two items of that row they were flex children that grow, so each stretched to its maximum and
  they drifted to opposite ends of the space between the title and the edge.
*/
/*
  The heading of every page (`PageHeading`): the title and its subtitle on the left, whatever
  belongs to them on the right, and **one distance to the content, the same on every page**.
  It is 24 px because that is what «Conta e perfil» had and the owner held up as the model
  (2026-09-21). The content under it brings no top margin of its own — a `MudGrid` with spacing
  pulls itself up by exactly the padding of its items, so its cards land at the same 24 px as a
  card placed directly.
*/
.bf-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 24px;
    /* The distance from the top bar to the title may not depend on what sits beside it: the row is
       as tall as its tallest child, so a page whose heading carries a switch (38 px) had its title
       6 px higher than one carrying a year picker (56 px), and its content 12 px higher. The floor
       is the tallest of them, so every page reads the same. */
    min-height: 56px;
}

.bf-heading-actions {
    margin-left: auto;
}

.bf-pickers {
    display: flex;
    align-items: center;
    gap: .5rem;
    /* On a phone the year, «Importar ficheiro» and «Novo movimento» do not fit one line, and
       without this the last of them hangs off the right edge. */
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Under «Plano de reforço»: «Adicionar ativo», then the assets taken out. The owner asked for
   air between the button and «Retirados:» (2026-09-28); the list itself keeps its own, tighter,
   spacing between one ticker and the next. */
.bf-plan-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
}

.bf-plan-removed {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}

.bf-pickers .bf-picker {
    flex: 0 0 auto;
}

/*
  The investments' part of the top bar (sub-phase 7.1): «Última atualização» as a label over its
  moment. The account filter left it for the title row of the pages that follow it (2026-09-27).
*/
.bf-investbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: 8px;
    min-width: 0;
}

/*
  The account, at the right-hand end of the title row of the investments' pages that follow it —
  a picker like the budget's year, sized to the longest account name a household is likely to give.
*/
.bf-pickers .bf-account-filter {
    width: 200px;
}

/* The code and the name of the asset (owner, 2026-09-27): wider than the code alone needed. */
.bf-pickers .bf-asset-picker {
    width: 280px;
}

.bf-updated {
    line-height: 1.2;
}

/*
  The deviation of a card and, beside it in brackets, what it is as a share of the plan. Both
  take the line's own colour and size — written as a label the share was drawn at 70% opacity,
  which on the dark theme turned the red almost black (the owner, 2026-09-20).

  The line may break between the two, and neither piece may be broken in itself, which is why
  it is a wrapping flex box and not the plain `nowrap` the other figures use.
*/
.bf-deviation {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .35rem;
    white-space: normal;
}

.bf-deviation > span {
    white-space: nowrap;
}

/* The four cards of the month keep one height, whether or not the share of the plan wraps
   onto a second line under the deviation. */
.bf-figure-card {
    height: 100%;
}

/*
  A page whose table is the page — Movimentos, and the grids that follow it.

  On a wide screen the card takes what is left of the window and the table scrolls inside it,
  so the filters, the header row and the total underneath stay where they are while the lines
  move. Below Md the page scrolls as usual: on a phone the height is too precious to spend on a
  frame that never moves.

  MudBlazor's `FixedHeader` already pins the header row with `position: sticky` — what it needs,
  and did not have, is a scroll container with a bounded height. That is what the flex chain
  below gives it, without a single magic number.
*/
@media (min-width: 960px) {
    /* A flex child only shrinks inside a container whose height is really known. `min-height`
       lets the frame grow with its content, so the chain below has to start from a definite
       one — and only on a page that asked for it, which is what `:has()` is for: every other
       page goes on scrolling the way it always did. */
    .bf-main.bf-main:has(.bf-fill) {
        height: 100vh;
        box-sizing: border-box;
    }

    .bf-body:has(.bf-fill) {
        overflow: hidden;
    }

    .bf-fill {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }


    .bf-fill .bf-table.mud-table {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .bf-fill .bf-table .mud-table-container {
        flex: 1 1 auto;
        min-height: 0;
    }
}

/*
  What tells the header row from the lines under it: the accent's own line beneath it (the
  owner, 2026-09-20). The header shares the card's colour, as it should — a second background
  would be one more tone on a screen that already has three.

  The second selector carries three classes' worth of weight on purpose: MudBlazor's own
  `.mud-simple-table table * tr th` is (0,1,3), and anything lighter loses to it in silence.
*/
.bf-table .mud-table-head .mud-table-cell,
.bf-table.mud-simple-table table * tr th {
    font-weight: 600;
    border-bottom: 2px solid var(--mud-palette-primary);
}

/* The card's own padding, rather than MudBlazor's `pa-4`, because that utility is `!important`
   and cannot be narrowed on a phone — where those 8 px a side were enough to push the table
   into a sideways scroll. */
.bf-fill {
    padding: 16px;
}

@media (max-width: 599.98px) {
    .bf-fill {
        padding: 12px;
    }

    /* Stacked on a phone, a row is a label and a value on one line: 16 px a side is width the
       value needs more. */
    .bf-table .mud-table-root .mud-table-cell,
    .bf-table table td,
    .bf-table table th {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* The pager is not something to squeeze. Inside the flex column above it is a flex item like
   any other, and «Linhas por página» came out cut in half. */
.bf-fill .bf-table .mud-table-pagination {
    flex: 0 0 auto;
}

/*
  The total line of a grid: the same figures, read as a sum. A line above it and a heavier
  weight, and no colour of its own — the panel's three tones are already spoken for.
*/
.bf-table .bf-total td,
.bf-table tbody tr.bf-total td {
    font-weight: 600;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/*
  The month being shown, inside the twelve of «Mês a mês», and the asset being shown, among the
  instruments of «Ativos». Marked with the accent and never with green or red: which line is on
  screen is not good news or bad.
*/
.bf-table tbody tr.bf-this-month td:first-child,
.bf-table tbody tr.bf-chosen td:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.bf-table tbody tr.bf-this-month td,
.bf-table tbody tr.bf-chosen td {
    font-weight: 600;
}

/* A line of «Instrumentos da carteira» opens that asset above it. */
.bf-instruments tbody tr {
    cursor: pointer;
}

/* The file to import. Blazor's own input, dressed to sit beside a MudBlazor field. */
.bf-file input[type="file"] {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 10px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
}

/*
  A field that lives inside a table cell — the description and the notes of a line being
  imported. `Class` on a MudBlazor field lands on `.mud-input-control` itself, so the rule
  has to name that class rather than describe a wrapper that does not exist.
*/
.bf-cell.mud-input-control {
    margin: 0;
    /* The cell decides how wide it is, and the field fills it: a minimum of its own left the
       field at 144 px inside a column twice that, with the text cut. */
    min-width: 0;
    width: 100%;
}

/*
  The columns of the import are given their widths (`ColGroup`), and a table only honours them
  when it is told to stop measuring its content.
*/
.bf-import table {
    table-layout: fixed;
    /* Without it the table measures itself from the columns instead of the card, and the
       percentages resolve against a width that is smaller than the space there is. */
    width: 100%;
}

/*
  One size across the whole table (the owner, 2026-09-20): the date's 14 px. A MudBlazor field
  writes its own 16 px and a chip its own 12, so the two have to be brought back to the table's.
*/
.bf-import td,
.bf-import th,
.bf-import .mud-input-control input,
.bf-import .mud-input-control .mud-input-slot,
.bf-rebalance .mud-input-control input,
.bf-rebalance .mud-input-control .mud-input-adornment {
    font-size: .875rem;
}

/*
  A note beside a value — where the rubric came from, what a line looks like. It is quieter than
  what it sits under, but not smaller: `bf-label` shrinks and shouts in capitals, which inside
  a table is exactly the mixture of sizes this rule exists to stop.
*/
.bf-quiet,
.bf-import .bf-label {
    text-transform: none;
    letter-spacing: normal;
    font-size: .875rem;
    opacity: .7;
}

/*
  The account pages (sub-phase 4.1): one card in the middle of the window, the product's mark
  above it and the usual footer underneath. No sidebar and no user corner — nobody has signed
  in yet.
*/

.bf-account {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px 16px 0;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

.bf-account-middle {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.bf-account-mark {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bf-account-card {
    width: 100%;
    max-width: 420px;
}

/* Two links under a form, one at each end; they stack when the card is narrow. */
.bf-account-links {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* «Página não encontrada»: the same block inside the application's window and inside the
   sign-in frame's card, centred, with the 404 said in large figures in the accent — which
   address failed is neither good news nor bad. */
.bf-not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bf-not-found-code {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 12px;
    color: var(--mud-palette-primary);
    font-variant-numeric: tabular-nums;
}

/* A plain checkbox, because one that is not ticked has to post nothing at all. */
.bf-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    cursor: pointer;
}

/*
  The second factor (sub-phase 4.2). The QR is an SVG written into the page, so the secret
  never leaves this machine; it keeps its white background because that is what a camera
  reads best, whatever theme is showing.
*/

.bf-qr svg {
    width: 208px;
    height: 208px;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 8px;
}

.bf-key code,
.bf-codes code {
    font-family: Consolas, "Courier New", monospace;
    letter-spacing: .08em;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 4px 10px;
    display: inline-block;
}

/* Eight one-use codes, laid out so they can be copied or written down without losing one. */
.bf-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

/* «Terminar sessão» is a form, not a link, and has to sit in the menu like any other item. */
/* The row carries MudBlazor's own `mud-list-item` classes, so its padding, its icon column
   and its typography are the menu's; all this has to do is take the native button chrome off. */
.bf-signout button {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.bf-signout button:hover {
    background: var(--mud-palette-action-default-hover);
}

/* The language, offered on the way in: there is no top bar to choose it from yet. */
.bf-account-languages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: center;
}

.bf-account-languages button {
    background: none;
    border: 0;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
    padding: 2px 4px;
}

.bf-account-languages button:hover {
    color: var(--mud-palette-primary);
}

/* A setting: what it is on the left, what it is set to on the right. */
.bf-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.bf-setting > :last-child {
    min-width: 260px;
}

/* «Subscrição» (sub-phases 9.2 and 9.4): the trial and the prices side by side, wrapping on a phone. */
.bf-subscription-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* «Dados de faturação» (sub-phase 9.5): the postal code and the town on one line, the town wider;
   one under the other on a phone. */
.bf-billing-place {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 12px;
}

@media (max-width: 599.98px) {
    .bf-billing-place {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* «Administração › Subscrições» (sub-phase 9.3): the two actions of a household side by side,
   wrapping on a phone rather than pushing the table sideways. */
.bf-household-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

/* «Administração › Tarefas» (sub-phase 8.7): a card per background task. */
.bf-job-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.bf-job-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin-top: 12px;
}

.bf-job-facts > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.bf-job-schedule {
    font-variant-numeric: tabular-nums;
}

.bf-job-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 16px;
}

.bf-job-reschedule {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bf-job-reschedule .bf-job-cron {
    width: 220px;
}

.bf-job-message {
    overflow-wrap: anywhere;
}

/* The theme button of the top bar is a form (a post that is kept in a cookie); the form itself
   takes no room, so the button sits in the bar exactly as the ones beside it. */
.bf-theme {
    display: contents;
}

/*
  The percentages typed into the rebalancing table (sub-phase 7.7): a field no wider than the
  figure it holds, pushed to the right like every other number of the table.
*/
.bf-rebalance .bf-percent-field {
    max-width: 7rem;
    margin-left: auto;
}

.bf-rebalance .bf-percent-field input {
    text-align: right;
}

/*
  A figure that explains itself (sub-phase 7.13): dotted underline and the help cursor, so the
  words with a dica can be found — the workbook marked them with its red triangle.
*/
.bf-hinted {
    cursor: help;
    text-decoration: underline dotted;
    text-decoration-color: var(--mud-palette-text-secondary);
    text-underline-offset: 3px;
}

/* A dica is a few sentences: wrapped at a reading width, never one line across the screen. */
.bf-hint-text {
    max-width: 320px;
    white-space: normal;
    text-align: left;
    line-height: 1.45;
}

/* The glossary's search box stays a search box's width, and takes the line on a phone. */
.bf-glossary-search {
    flex: 0 1 320px;
    min-width: 200px;
}

/* «Administração › IVA» (sub-phase 9.6): the fields of a new rate side by side while they fit. */
.bf-vat-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.bf-vat-fields > * {
    flex: 1 1 160px;
}

/* «Adicionar instrumento» (owner, 28/09/2026): the kind, then the search field with its button beside it. */
.bf-new-instrument {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bf-instrument-search {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.bf-instrument-search .bf-search-text {
    flex: 1 1 auto;
}

.bf-instrument-search .bf-search {
    margin-top: 14px;
    flex: 0 0 auto;
}

/* What was found, to choose from: one line each, the name above what identifies it. */
.bf-candidates {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    max-height: 280px;
    overflow-y: auto;
}

.bf-candidate {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    cursor: pointer;
}

.bf-candidate + .bf-candidate {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.bf-candidate:hover,
.bf-candidate:focus-visible {
    background: var(--mud-palette-action-default-hover);
    outline: none;
}

.bf-candidate-name {
    font-weight: 500;
}

.bf-chosen-candidate {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.bf-preview-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* The language (owner, 28/09/2026), as the template draws it: the flag of the language in use, round,
   in a 40 px round button; a 182 px menu, 8 px inside, 14 px corners; each language a 6 px line with
   its 20 px flag, 12 px from the name, and a tick in the accent on the one in use. */
.bf-language-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.bf-language-button:hover,
.bf-language-button:focus-visible {
    background: var(--mud-palette-action-default-hover);
    outline: none;
}

.bf-language-button img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

/* As wide as the longest language and no wider (owner, 29/09/2026: narrower than the template's
   182 px); a name is never broken in two. */
.bf-language-menu .mud-list {
    width: max-content;
    min-width: 0;
    padding: 8px;
}

.bf-language span {
    white-space: nowrap;
}

.bf-language-menu.mud-popover {
    border-radius: 14px;
}

/* MudBlazor centres the content of every button; a language line starts at the left, so the
   line without the tick does not drift to the middle (owner, 29/09/2026). */
.bf-language {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 6px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: .875rem;
    text-align: left;
    cursor: pointer;
}

.bf-language:hover,
.bf-language:focus-visible,
.bf-language-current {
    background: var(--mud-palette-action-default-hover);
    outline: none;
}

.bf-language img,
.bf-account-languages img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.bf-language-tick.mud-icon-root {
    margin-left: auto;
    padding-left: 12px;
    box-sizing: content-box;
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--mud-palette-primary);
}

.bf-account-languages button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}