html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ---------------------------------------------------------------------------
   MV Trader trading screens. Added 14 August 2026 with the IBKR integration.
   --------------------------------------------------------------------------- */

.mvt-lead {
    font-size: 1.1rem;
    color: #444;
    max-width: 60ch;
}

.mvt-section {
    margin: 1.5rem 0;
}

.mvt-section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: .5rem;
}

.mvt-section__header h2 {
    margin: 0;
    font-size: 1.15rem;
}

.mvt-section__meta {
    color: #6c757d;
    font-size: .875rem;
}

.mvt-empty {
    color: #6c757d;
    font-style: italic;
}

.mvt-note {
    color: #495057;
    background: #f8f9fa;
    border-left: 3px solid #adb5bd;
    padding: .65rem .9rem;
    max-width: 90ch;
}

/*
   A short label-and-value list, used in the detail window of an analysis. Two columns on a normal
   screen; the value may carry a model id, so it breaks inside a word rather than pushing the window
   sideways (same reason as .mvt-hint).
*/
.mvt-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .1rem .75rem;
    margin: 0 0 .75rem;
}

.mvt-facts dt {
    color: #6c757d;
    font-weight: 600;
}

.mvt-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/*
   The model's own answer, kept whole so a decision can be judged afterwards. It is JSON with long
   unbroken strings in it, so it scrolls inside its own box instead of stretching the window.
*/
.mvt-raw-answer {
    max-height: 14rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: .65rem .9rem;
    font-size: .8125rem;
    margin: 0;
}

/*
   ⛔ A hint carries a path now and then ("Map: D:\Development\...\Documents" on /documents), and a
   path has no spaces to break on: on a telephone that one line painted 16 pixels outside the page,
   so the whole screen could be dragged sideways. Measured 14 September 2026 by
   GridLayoutTests.EveryGridColumnGetsAUsableWidthOnAPhone, which names the element that sticks out.
   overflow-wrap: anywhere only breaks a word that genuinely does not fit, exactly as on
   .mvt-order-key; an ordinary sentence is untouched.
*/
.mvt-hint {
    color: #6c757d;
    font-size: .8125rem;
    margin: .35rem 0 0;
    overflow-wrap: anywhere;
}

/* The (i) icon that hides an explanation until it is asked for (Components/Shared/InfoHint.razor).
   The icon sits next to a section heading or inside a field label, so it is stripped of the padding
   a normal button carries and aligned on the text line instead of on the box around it. The
   explanation itself opens in a modal window, so it needs no room on the screen at all. */
.mvt-info-hint__button {
    color: #6c757d;
    padding: 0 .15rem;
    min-width: 0;
    line-height: 1;
    vertical-align: middle;
}

/* The refresh line of the option desk and its (i) icon are one unit, for the same reason as
   .mvt-action: without this the icon wraps onto a line of its own and stops pointing at anything.
   Baseline alignment, because the icon sits next to running text here and not next to a button. */
.mvt-quote-status {
    display: flex;
    align-items: baseline;
    gap: .15rem;
    flex-wrap: wrap;
}

.mvt-info-hint__body {
    max-height: 60vh;
    overflow-y: auto;
    line-height: 1.5;
    padding-right: .5rem;
}

.mvt-info-hint__body p {
    margin: .35rem 0;
}

.mvt-info-hint__body ul {
    margin: .35rem 0;
    padding-left: 1.25rem;
}

.mvt-info-hint__body li {
    margin: .2rem 0;
}

.mvt-info-hint__text {
    margin: 0 0 .35rem;
    color: #212529;
}

/* Header status dots and connect actions --------------------------------- */

.mvt-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    font-size: .875rem;
}

.mvt-status__item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.mvt-status__dot {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: #adb5bd;
    flex: 0 0 auto;
}

.mvt-status--ok .mvt-status__dot { background: #198754; }
.mvt-status--busy .mvt-status__dot { background: #fd7e14; }
.mvt-status--down .mvt-status__dot { background: #dc3545; }

.mvt-status__label { font-weight: 600; }

.mvt-status__value { color: #6c757d; }

.mvt-status__account {
    color: #6c757d;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.mvt-status__dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.mvt-status__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.mvt-status__readonly {
    background: #fff3cd;
    border: 1px solid #ffe69c;
    border-radius: .25rem;
    padding: .15rem .5rem;
    font-size: .8125rem;
    white-space: nowrap;
}

/* One line, because the header is a single row. The full text is in the tooltip. */
.mvt-status__notice {
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mvt-status__notice--danger { color: #dc3545; font-weight: 600; }

.mvt-status__notice--warning { color: #b06a00; }

/* Alerts ----------------------------------------------------------------- */

.mvt-alert {
    margin-top: .75rem;
    padding: .65rem .9rem;
    border-radius: .375rem;
    border: 1px solid transparent;
}

.mvt-alert--info { background: #cff4fc; border-color: #9eeaf9; color: #055160; }
.mvt-alert--warning { background: #fff3cd; border-color: #ffe69c; color: #664d03; }
.mvt-alert--danger { background: #f8d7da; border-color: #f1aeb5; color: #58151c; }

/* Order entry form ------------------------------------------------------- */

.mvt-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .75rem;
    margin-bottom: .75rem;
}

/* justify-content, zodat het invulveld van elke kolom op dezelfde regel begint ook wanneer het
   label van de buurkolom hoger uitvalt: de kolommen van een .mvt-form__row zijn even hoog, dus de
   inhoud wordt naar de onderkant geduwd en de velden staan op een lijn. */
.mvt-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .25rem;
}

/* ⛔ Een label met een (i) icoon erin is anders hoger dan een label zonder, en dan begint het
   invulveld van die kolom lager dan dat van de kolom ernaast. Gemeten op "1. Onderliggende waarde"
   van de tab Optie (20 augustus 2026): Symbool en Beurs (met icoon) stonden zichtbaar lager dan
   Van mijn lijst en Valuta (zonder). De labelregel krijgt daarom de hoogte van een tekstregel en
   het icoon staat er verticaal in het midden van, in plaats van de regel op te rekken. */
.mvt-field > span {
    display: flex;
    align-items: center;
    gap: .15rem;
    min-height: 1.25rem;
    line-height: 1.25rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #495057;
}

/* Het icoon in een label mag die regel niet hoger maken dan de tekst zelf: een knop van Kendo
   draagt een eigen minimumhoogte, en die was de 12 pixels waarmee Symbool en Beurs onder hun
   buren zakten. */
.mvt-field > span .mvt-info-hint__button {
    height: 1.25rem;
    min-height: 0;
    padding: 0 .15rem;
}

/* The row of buttons needs air above it. An .mvt-alert carries its spacing as a TOP margin only, so
   whatever follows the last warning sits flush against it: measured on the option desk on 19 August
   2026 the yellow "het verschil tussen bied en laat" band ended at pixel 444 and "Kopen" started at
   445, with nothing in between. A button that spends money must not look like part of the warning
   above it. The margin collapses with the .75rem bottom margin of a preceding .mvt-form__row, so the
   ordinary form rows on /orders and /admin/users keep exactly the spacing they had. */
.mvt-form__actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: .75rem;
}

/* De spinner in een knop die bezig is. Hij staat VÓÓR de tekst en duwt die niet weg: de knop
   houdt zijn breedte, zodat de rij knoppen niet verspringt op het moment dat je hem indrukt.
   currentColor omdat de knop die geld uitgeeft primary (blauw) is en de standaardkleur van de
   loader daarop niet te zien is; !important is hier de toegestane uitzondering, want het overschrijft
   Telerik's eigen themakleur op .k-loader-segment. Zie Components/Shared/BusyButton.razor. */
.mvt-busy-button__spinner {
    display: inline-flex;
    align-items: center;
    margin-right: .35rem;
    vertical-align: middle;
}

.mvt-busy-button__spinner .k-loader-segment {
    background-color: currentColor !important;
}

/* A button and its (i) icon are one unit. Without this wrapper the row wraps between them and the
   icon ends up alone on a line underneath, which is what the screenshot of the tab "Optie" of
   /orders showed on 19 August 2026: three buttons on one line and a lost (i) on the next. The
   small gap also says which button the icon belongs to, since the row itself uses a wider one. */
.mvt-action {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}

/* ⛔ Een ticker bestaat bij Interactive Brokers alleen in hoofdletters, en de eigenaar vroeg op
   19 augustus 2026 om een symboolveld dat er ook geen andere aanneemt. Dit is de helft die je ziet
   terwijl je typt: er gaat geen toetsaanslag over het circuit, dus de cursor kan niet verspringen.
   De andere helft (SetSymbol in Orders.razor) zet de waarde in het model ook echt om, want een
   scherm dat hoofdletters toont terwijl er "googl" naar de broker gaat, is een leugen. */
.mvt-symbol-input input {
    text-transform: uppercase;
}

/* De voorstellen na een mislukte "Contract opzoeken". Ze staan direct onder de melding, buiten de
   tabbladen, en wikkelen naar de volgende regel in plaats van de knoppen samen te drukken: elke
   knop draagt code, naam, beurs en valuta, en juist die vier zijn waar de lezer uit kiest. */
.mvt-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    /* Een eigen bovenmarge, om dezelfde reden als bij .mvt-form__actions: een .mvt-alert zet zijn
       ruimte alleen bóven zichzelf, dus alles eronder plakt er anders tegenaan. Hij klapt samen met
       de ondermarge van de melding, dus dit verdubbelt niets. */
    margin: .75rem 0;
}

/* Dictating ---------------------------------------------------------------
   The microphone button under a text field, plus the line that says what it is doing. A recording
   that is running has to be visible from across the room: the counter next to the button is the
   only thing that distinguishes "listening" from "the click did nothing". */
.mvt-voice {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: .5rem;
}

.mvt-voice__status {
    font-size: .85rem;
    color: #555;
}

.mvt-voice__status--recording {
    color: #b02a37;
    font-weight: 600;
    /* Blinking, because a still red dot reads as a label rather than as a state. */
    animation: mvt-voice-pulse 1.2s ease-in-out infinite;
}

.mvt-voice__status--failed {
    color: #b02a37;
}

.mvt-voice__status--done {
    color: #146c43;
}

.mvt-voice__status--off {
    color: #777;
    font-style: italic;
}

@keyframes mvt-voice-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.mvt-suggestions__button {
    min-height: 40px;
}

/* Inspreken, stellen, wissen en de (i) op EEN regel (eigenaar, 28 augustus 2026). De eigen
   bovenmarge van .mvt-voice zou hem anders een halve regel lager zetten dan de knoppen ernaast. */
.mvt-form__actions .mvt-voice {
    margin-top: 0;
}

/* Numbers and tables ----------------------------------------------------- */

.mvt-number { font-variant-numeric: tabular-nums; }
.mvt-number--up { color: #198754; }
.mvt-number--down { color: #dc3545; }

.mvt-symbol { font-weight: 600; }

.mvt-symbol__meta {
    display: block;
    font-size: .75rem;
    color: #6c757d;
}

/*
   The company behind the ticker (Components/Shared/CompanyLabel.razor). Darker than the meta line
   underneath it on purpose: it is the answer to "wat is LEN", not a technical detail. It breaks
   inside a long name rather than widening the grid, because a grid that gets wider squeezes its
   free column to nothing on a telephone.
*/
.mvt-symbol__name {
    display: block;
    font-size: .8125rem;
    color: #212529;
    overflow-wrap: anywhere;
}

.mvt-reject {
    color: #dc3545;
    font-size: .8125rem;
}

/*
   The idempotency key of a queued order, shown under the instrument rather than in a column of its
   own. It is long and only needed when something has to be traced back to the broker, and a
   separate column for it squeezed the instrument column to nothing.
*/
/*
   overflow-wrap instead of word-break: break-all. break-all splits every line mid-word, and this
   class also carries prose now (the broker's own explanation of what happened to an order), which
   came out as "de orde|r is uitgevoerd, geannuleerd of verv|allen". Seen on a screenshot on
   18 August 2026. overflow-wrap: anywhere only breaks a word that genuinely does not fit, which is
   what the long idempotency keys need and what a sentence does not.
*/
.mvt-order-key {
    color: #6c757d;
    font-size: .75rem;
    overflow-wrap: anywhere;
}

/*
   An order placed by another API session cannot be cancelled from here: IB only lets the session
   that placed an order pull it. Coloured because it is the answer to "why does that button not
   work", which the operator would otherwise only find by pressing it.
*/
.mvt-order-foreign {
    color: #b8860b;
    font-weight: 600;
}

/*
   A Telerik grid row opens its edit screen on click. The grids in this application are read-only
   overviews, so they carry pb-grid-static and must not suggest otherwise.
   Verified against Telerik UI for Blazor 14.1.0: the data row is .k-master-row.
*/
.k-grid:not(.pb-grid-static) .k-master-row { cursor: pointer; }

/*
   ⛔ A grid is never squeezed below the width it was built for; a frame that is narrower scrolls
   sideways instead. A Telerik grid gives every column with a Width exactly that and divides what is
   left between the columns without one, so on a telephone of 390 pixels the fixed columns alone are
   already wider than the screen and the free column gets ZERO. Measured on 14 September 2026 on
   /portfolio (Pending), /orders (Wachtrij), /stocks and /admin/users, after the owner photographed
   the result on his iPhone: rows about fourteen hundred pixels tall with the text at the very bottom
   and no instrument in sight.

   620 pixels is the width GridColumnBudgetTests already holds every grid to, so nothing changes on a
   normal screen; this only stops the squeezing on a narrow one. Verified against Telerik UI for
   Blazor 14.1.0: .k-grid-content carries overflow-x: auto and Telerik keeps .k-grid-header-wrap
   scrolled along with it, which is how the fiscal journal has scrolled sideways from the start.
   Tests: GridLayoutTests.EveryGridColumnGetsAUsableWidthOnAPhone,
   SeededScreenTests.TheGridsWithRowsStayReadableOnAPhone.
*/
.k-grid .k-grid-header .k-table,
.k-grid .k-grid-content .k-table {
    min-width: 620px;
}

/*
   ⛔ A dialog never sticks out of the screen. Every window in this application states a width in
   pixels (480 for Herstarten, 520 for an (i) explanation, 760 for the Handleiding, 920 for the
   fondsen search), and a telephone is 390 wide: half of the Handleiding hung outside the screen on
   the owner's iPhone, and the Handleiding button sits on EVERY screen. Verified against Telerik UI
   for Blazor 14.1.0: .k-window is positioned with top/left 50% plus translate(-50%, -50%), so it
   stays centred when it becomes narrower, and max-width beats the inline width Telerik writes.
   Test: UiSmokeTests.TheManualAndItsExplanationsFitOnAPhone.
*/
.k-window {
    max-width: calc(100vw - 1rem);
}

/*
   A position whose whole quantity is already in an outstanding sell order. It stays on the screen
   because the broker keeps reporting it until the sale is really executed, but there is nothing
   left to sell on it, so it reads as on its way out instead of as an ordinary position.
*/
.k-grid .k-master-row.mvt-row-sold > td {
    opacity: 0.65;
    font-style: italic;
}

.k-grid .k-master-row.mvt-row-sold { cursor: default; }

.mvt-sell-running {
    white-space: nowrap;
    font-style: italic;
}

/*
   A short position: sold without owning the stock, so it is closed by buying it back. A minus sign
   in front of a number is not enough to say that. The owner read "-100" on the portfolio screen on
   27 August 2026 and asked "-100??? Hoe dan?", so the row now carries the word itself.
*/
.mvt-short-badge {
    display: inline-block;
    padding: 0 .35rem;
    border-radius: .25rem;
    background-color: #f8d7da;
    color: #842029;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mvt-short-badge--panel {
    margin-left: .4rem;
    vertical-align: middle;
}

/* Home tiles ------------------------------------------------------------- */

.mvt-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.mvt-tile {
    display: block;
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    background: #fff;
    text-decoration: none;
    color: inherit;
    min-height: 96px;
}

.mvt-tile:hover { border-color: #0d6efd; }

.mvt-tile__title {
    display: block;
    font-weight: 600;
    margin-bottom: .25rem;
}

.mvt-tile__text {
    display: block;
    color: #6c757d;
    font-size: .875rem;
}

.mvt-tile__link {
    display: inline-block;
    padding: .5rem 1rem;
    min-height: 48px;
    line-height: 2;
}

.mvt-checklist { max-width: 70ch; }

/* User administration ----------------------------------------------------- */

/* A field whose value is a sentence rather than a code, so it may not be squeezed into the 190px
   column the rest of the row uses. The option market of the desk is one: "EUREX, klasse ASM
   (10 stuks per contract)" is what tells the reader that a contract there is ten shares and not a
   hundred, and half of that sentence is worse than none. It takes two columns where the row has
   them and the whole width where it does not. */
.mvt-field--wide {
    grid-column: span 2;
}

.mvt-field--check {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
}

.mvt-field--check > span {
    font-size: .875rem;
    font-weight: 400;
    color: #212529;
}

.mvt-roles {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
}

/* De notering onder de keuzelijst Beurs: informatie, geen tweede label. Zonder deze regel erft hij
   de vette labelopmaak van ".mvt-field > span" en leest hij als een veldnaam. */
.mvt-field > span.mvt-field__note {
    min-height: 0;
    font-size: .75rem;
    font-weight: 400;
    color: #6c757d;
}

/* A value that cannot be changed at all is shown as text where its input would have been, so the
   row keeps the shape of the rows around it. Without this reset it would inherit the label styling
   of ".mvt-field > span" and read as a second label instead of as the value. Used for the e-mail
   address and the Admin role of the superuser on /admin/users/{id}. */
.mvt-field > span.mvt-field__fixed,
.mvt-roles > span.mvt-field__fixed {
    display: flex;
    min-height: 32px;
    align-items: center;
    font-size: .875rem;
    font-weight: 400;
    color: #212529;
}

.mvt-section--danger {
    border-left: 4px solid #dc3545;
    padding-left: 1rem;
}

/*
   Show/hide toggle for the password fields on the Identity pages. Those pages render as static
   server HTML, so the toggle is wired up by wwwroot/js/password-toggle.js instead of by Blazor.
   Bootstrap already gives .form-floating position: relative, which is what the button anchors to.
*/
.mvt-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 100%;
    min-height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
}

.mvt-password-toggle:hover,
.mvt-password-toggle:focus {
    color: #0d6efd;
}

.mvt-password-host {
    position: relative;
}

.mvt-password-host > .form-control {
    padding-right: 48px;
}

/* Interested stocks & suggestions screens */
.mvt-subheading {
    margin: 16px 0 8px;
    font-size: 1rem;
}

/* A subheading with its (i) icon beside it. The explanation of a section hangs on the heading it
   belongs to instead of standing above the grid on every visit; align-items: center keeps the icon
   on the baseline of the text rather than on the top margin of the heading. */
.mvt-subheading-row {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex-wrap: wrap;
}

.mvt-suggestion {
    padding: 4px 2px;
}

.mvt-suggestion__answer {
    white-space: pre-wrap;
    line-height: 1.5;
}

.mvt-suggestion__sources {
    margin: 4px 0 8px;
    padding-left: 20px;
}

.mvt-suggestion__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    color: var(--mvt-muted, #666);
    font-size: 0.85rem;
}

/* Page heading with the manual button -------------------------------------- */

.mvt-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.mvt-page-header h1 {
    margin: 0;
}

.mvt-manual__body {
    max-height: 65vh;
    overflow-y: auto;
    line-height: 1.5;
    padding-right: .5rem;
}

.mvt-manual__body h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: .2rem;
    margin: 1.35rem 0 .45rem;
}

.mvt-manual__body h3:first-child {
    margin-top: 0;
}

.mvt-manual__body p {
    margin: .35rem 0;
}

.mvt-manual__body ul {
    margin: .35rem 0;
    padding-left: 1.25rem;
}

.mvt-manual__body li {
    margin: .2rem 0;
}

/* Rendered Markdown: AI answers on the suggestions screen and the document reader.
   Same shape as VSI Dirigent's .dg-markdown, in MV Trader's own naming. */
.mvt-markdown {
    line-height: 1.55;
}

.mvt-markdown > :first-child {
    margin-top: 0;
}

.mvt-markdown > :last-child {
    margin-bottom: 0;
}

.mvt-markdown h1,
.mvt-markdown h2,
.mvt-markdown h3,
.mvt-markdown h4 {
    margin: 1.1em 0 .5em;
    line-height: 1.25;
    font-weight: 600;
}

.mvt-markdown h1 { font-size: 1.4rem; }
.mvt-markdown h2 { font-size: 1.2rem; }
.mvt-markdown h3 { font-size: 1.05rem; }
.mvt-markdown h4 { font-size: .95rem; }

.mvt-markdown p { margin: .5em 0; }

.mvt-markdown ul,
.mvt-markdown ol {
    margin: .5em 0;
    padding-left: 1.5em;
}

.mvt-markdown li { margin: .2em 0; }

.mvt-markdown a { text-decoration: underline; }

.mvt-markdown blockquote {
    margin: .6em 0;
    padding: .2em .9em;
    border-left: 3px solid #d0d0d0;
    color: #555;
}

.mvt-markdown hr {
    border: 0;
    border-top: 1px solid #d0d0d0;
    margin: 1em 0;
}

.mvt-markdown code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
    background: rgba(127, 127, 127, .14);
    padding: .1em .35em;
    border-radius: 4px;
}

.mvt-markdown pre {
    background: #0f1620;
    color: #d7e0ea;
    padding: .8em;
    border-radius: 4px;
    overflow-x: auto;
    margin: .6em 0;
}

.mvt-markdown pre code {
    background: none;
    padding: 0;
    font-size: .82rem;
    color: inherit;
}

.mvt-markdown table {
    border-collapse: collapse;
    margin: .8em 0;
    width: 100%;
}

.mvt-markdown th,
.mvt-markdown td {
    border: 1px solid #d0d0d0;
    padding: .4em .6em;
    text-align: left;
}

.mvt-markdown th {
    background: rgba(127, 127, 127, .1);
    font-weight: 600;
}

/* Option desk -------------------------------------------------------------- */

.mvt-optiondesk {
    padding-top: 4px;
}

/* Row of buttons that behaves like a set of choices: strategy, size, price side. Buttons rather
   than a drop-down because the whole point of this screen is one click per decision. */
.mvt-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mvt-choice__button {
    min-width: 48px;
    min-height: 40px;
}

/* The chosen option has to be visible at a glance; without this every button looks the same and
   the size of the order becomes a guess. */
.mvt-choice__button--on {
    outline: 2px solid #0d6efd;
    outline-offset: 1px;
    font-weight: 600;
}

.mvt-ladder__strike {
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mvt-ladder__strike--atm {
    color: #0d6efd;
}

/* What the order costs, next to what it can lose. Read once before the confirmation window. */
.mvt-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 4px 24px;
    margin: 12px 0;
    padding: 12px 16px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
}

.mvt-preview__line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.mvt-preview__line > span:first-child {
    color: #6c757d;
}

/* Portfolio: totals strip and the quick-sell panel -------------------------- */

/* What is held per currency, in one glance above the table. No conversion into euros: there is no
   FX rate source in this application yet, and a total on an invented rate misleads. */
.mvt-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0 12px;
}

.mvt-totals__item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
}

.mvt-totals__currency {
    font-weight: 600;
}

.mvt-totals__value {
    font-size: 1.1rem;
    font-weight: 600;
}

.mvt-totals__pnl {
    font-variant-numeric: tabular-nums;
}

.mvt-totals__net {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.mvt-totals__meta {
    color: #6c757d;
    font-size: .85rem;
}

/* The euro overview above the positions. Two numbers carry the screen: what everything cost and
   what it is worth now, so those two are the big ones and the rest is support. */
/* The verdict band: the one plain-language sentence that answers "winst of verlies, en hoeveel".
   The colour carries the answer, so all four tones are declared here and PortfolioVerdict decides
   which one applies. It states a bound value, never fixed prose, so the no-paragraph rule holds. */
.mvt-verdict {
    margin: 8px 0 4px;
    padding: .75rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    border-left-width: 6px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: help;
}

.mvt-verdict--positive { background: #d1e7dd; border-color: #a3cfbb; border-left-color: #198754; color: #0a3622; }
.mvt-verdict--negative { background: #f8d7da; border-color: #f1aeb5; border-left-color: #dc3545; color: #58151c; }
.mvt-verdict--neutral { background: #f8f9fa; border-color: #dee2e6; border-left-color: #6c757d; color: #343a40; }
.mvt-verdict--unknown { background: #fff3cd; border-color: #ffe69c; border-left-color: #ffc107; color: #664d03; }

/* How old the stored picture is, on the web application only. Quieter than the verdict itself but
   never hidden: a conclusion about money without the age of its numbers is half an answer. */
.mvt-verdict__age {
    margin: 6px 0 0;
    font-size: .85rem;
    color: #6c757d;
}

/* The one line under the verdict on the start screen: the way to the details. */
.mvt-verdict__link {
    margin: 6px 0 0;
    font-size: .9rem;
}

.mvt-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    /* The column gap is 16 and not 24 so that three tiles fit next to each other at a 1280 pixel
       window with the notification panel open. Now that the explanations are hover texts the tiles
       are two lines instead of three, and three columns turns four rows into three. */
    gap: 10px 16px;
    margin: 8px 0 12px;
    padding: 14px 18px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #f8f9fa;
}

/* Each tile carries its explanation in its title attribute instead of on screen. The dotted
   underline plus the help cursor is what tells the reader there is something to hover over; without
   an affordance a tooltip is the same as no explanation at all. */
.mvt-overview__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: help;
}

.mvt-overview__label {
    color: #6c757d;
    font-size: .8125rem;
    align-self: flex-start;
    border-bottom: 1px dotted #adb5bd;
}

.mvt-overview__amount {
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mvt-overview__amount--small {
    font-size: 1.1rem;
    font-weight: 600;
}

/* An amount with its percentage NEXT to it, not underneath. Neither part breaks internally; the
   percentage only drops to a second line when the tile is genuinely too narrow (a telephone),
   which beats running into the neighbouring tile. */
.mvt-overview__amount--with-percentage {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .35em;
    white-space: nowrap;
}

.mvt-overview__percentage {
    font-size: .9em;
}

.mvt-overview__percentage:empty {
    display: none;
}

/* Why a tile has no number yet. Grey, because it is a fact about the reading, not a warning about
   an amount (that is .mvt-overview__gap). */
.mvt-overview__unknown {
    color: #6c757d;
    font-size: .75rem;
}

/* Names, on the amount itself, the currency that could not be converted and is therefore missing
   from it. Orange rather than grey: this is a warning about the number above it, not a caption. */
.mvt-overview__gap {
    color: #b35c00;
    font-size: .75rem;
    font-weight: 600;
}

/* Which exchange rate the totals above were computed with. Grey while it is the broker's own rate
   and orange the moment it is a remembered or an emergency one, because then the totals are an
   approximation and that has to be visible without being read. */
.mvt-rates {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .6rem;
    margin: -4px 0 8px;
    color: #6c757d;
    font-size: .8125rem;
}

.mvt-rates__item {
    font-variant-numeric: tabular-nums;
    cursor: help;
}

.mvt-rates__source {
    font-style: italic;
}

.mvt-rates--estimated {
    color: #b35c00;
    font-weight: 600;
}

/* The rate in the page header, on every screen. It stands BEFORE the status dots in the markup and
   is deliberately given no auto margin: with one it claimed the whole first line and pushed the
   dots and the connect buttons onto a second one, even on a window with room to spare. Now the
   header fills one line where it fits and wraps where it does not (.top-row grew a min-height for
   exactly that, 24 August 2026). */
.mvt-rate-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-right: 1.25rem;
    font-size: .8125rem;
    cursor: help;
    white-space: nowrap;
}

.mvt-rate-badge__label {
    color: #6c757d;
}

.mvt-rate-badge__value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mvt-rate-badge__source {
    color: #6c757d;
    font-size: .75rem;
}

.mvt-rate-badge--estimated .mvt-rate-badge__value,
.mvt-rate-badge--estimated .mvt-rate-badge__source {
    color: #b35c00;
}

/* The sell panel. It sits above the grid rather than in a modal window on purpose: closing a
   position fast is what this screen is for, and a dialog is one dismissal more than that allows. */
.mvt-sell {
    margin: 8px 0 16px;
    padding: 12px 16px;
    border: 1px solid #0d6efd;
    border-radius: 6px;
    background: #f1f6ff;
}

.mvt-sell__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.mvt-sell__symbol {
    font-size: 1.15rem;
    font-weight: 600;
    margin-right: 12px;
}

.mvt-sell__meta {
    color: #495057;
    font-size: .9rem;
}

.mvt-sell__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.mvt-sell__label {
    min-width: 90px;
    font-weight: 600;
}

.mvt-sell__proceeds {
    color: #495057;
    font-size: .9rem;
}

/* What is left over after buying and selling costs. It gets its own block, a white card inside the
   blue panel, because it is the number the decision is made on and it must not read as one more
   line of small print. */
.mvt-sell__result {
    margin: 10px 0 4px;
    padding: 10px 14px;
    border: 1px solid #cfe2ff;
    border-radius: 6px;
    background: #ffffff;
}

.mvt-sell__result-sum {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    color: #495057;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

.mvt-sell__result-line {
    white-space: nowrap;
}

.mvt-sell__result-value {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #e9ecef;
}

.mvt-sell__result-label {
    font-weight: 600;
}

.mvt-sell__result-amount {
    font-size: 1.35rem;
    font-weight: 700;
}

.mvt-sell__result-percentage {
    font-weight: 600;
}

.mvt-sell__result-none {
    color: #495057;
    font-size: .9rem;
}

/* The button states the whole order, so it is both the action and the confirmation. Large enough
   to hit on a touch screen without aiming. */
.mvt-sell__go {
    min-height: 48px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 1.05rem;
    font-weight: 600;
}

.mvt-sell__row--go {
    margin-top: 12px;
    margin-bottom: 0;
}

/* Notification panel -------------------------------------------------------
   A quarter of the window on the right, on every screen: what MV Trader just did. The panel owns
   its own width so that collapsing it needs no communication with the layout around it.
   --------------------------------------------------------------------------- */

.mvt-activity {
    display: flex;
    flex-direction: column;
    width: 25vw;
    min-width: 260px;
    height: 100%;
    max-height: 100vh;
    border-left: 1px solid #d6d5d5;
    background: #fbfbfd;
    overflow: hidden;
}

.mvt-activity--collapsed {
    width: 2.25rem;
    min-width: 2.25rem;
}

/* On a phone the layout is a single column, so the panel sits under the screen instead of beside
   it. A quarter of a narrow window would be unreadable. */
@media (max-width: 640.98px) {
    .mvt-activity {
        width: 100%;
        min-width: 0;
        max-height: 40vh;
        border-left: 0;
        border-top: 1px solid #d6d5d5;
    }

    .mvt-activity--collapsed {
        width: 100%;
        min-width: 0;
    }
}

.mvt-activity__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 3.5rem;
    padding: 0 .5rem;
    border-bottom: 1px solid #d6d5d5;
    background: #f7f7f7;
    flex: 0 0 auto;
}

.mvt-activity__title {
    font-weight: 600;
}

.mvt-activity__count {
    color: #6c757d;
    font-size: .8125rem;
    margin-right: auto;
}

.mvt-activity__toggle {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background: #fff;
    color: #495057;
    font-size: .8125rem;
    padding: .25rem .5rem;
    cursor: pointer;
    min-width: 1.75rem;
}

.mvt-activity__toggle:hover {
    border-color: #0d6efd;
    color: #0d6efd;
}

/* The quick buttons: what the panel shows, and over which period. Two rows that wrap, because the
   panel is a quarter of the window and five words plus four words do not fit on one line there. */
.mvt-activity__filters {
    flex: 0 0 auto;
    padding: .5rem .5rem .35rem;
    border-bottom: 1px solid #e4e4e6;
    background: #fdfdfe;
}

.mvt-activity__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: .3rem;
}

.mvt-activity__chip {
    border: 1px solid #ced4da;
    border-radius: 1rem;
    background: #fff;
    color: #495057;
    font-size: .75rem;
    line-height: 1.2;
    padding: .25rem .6rem;
    cursor: pointer;
}

.mvt-activity__chip:hover {
    border-color: #0d6efd;
    color: #0d6efd;
}

.mvt-activity__chip--period {
    border-radius: .25rem;
}

/* The chosen one is filled, not merely outlined: on a panel this narrow a border colour alone is
   not enough to say which of nine buttons the list is currently obeying. */
.mvt-activity__chip--on {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
    font-weight: 600;
}

.mvt-activity__chip--on:hover {
    background: #0b5ed7;
    border-color: #0b5ed7;
    color: #fff;
}

.mvt-activity__range {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .3rem;
    margin-bottom: .3rem;
}

.mvt-activity__range-word {
    color: #6c757d;
    font-size: .6875rem;
    white-space: nowrap;
}

/* The list always says what it covers, so a short list is never mistaken for a quiet week. */
.mvt-activity__window {
    color: #6c757d;
    font-size: .6875rem;
    margin: 0;
}

.mvt-activity__empty {
    color: #6c757d;
    font-size: .8125rem;
    padding: .75rem;
    margin: 0;
}

.mvt-activity__list {
    list-style: none;
    margin: 0;
    padding: .5rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* One line of one activity. The left border carries the colour of the group it belongs to. */
.mvt-activity__item {
    border-left: 4px solid #adb5bd;
    border-radius: .25rem;
    background: #fff;
    padding: .4rem .55rem;
    margin-bottom: .35rem;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.mvt-activity__time {
    color: #6c757d;
    font-size: .6875rem;
    font-variant-numeric: tabular-nums;
}

.mvt-activity__message {
    font-size: .8125rem;
    line-height: 1.35;
    word-break: break-word;
}

.mvt-activity__detail {
    color: #6c757d;
    font-size: .75rem;
    line-height: 1.3;
    margin-top: .15rem;
}

/* Six accents, cycled per activity. Same order or research question, same colour; the next one
   gets a different colour, which is what makes the boundary between two activities visible. */
.mvt-activity__item--0 { border-left-color: #0d6efd; background: #f2f7ff; }
.mvt-activity__item--1 { border-left-color: #6f42c1; background: #f7f4fd; }
.mvt-activity__item--2 { border-left-color: #20c997; background: #f0fbf7; }
.mvt-activity__item--3 { border-left-color: #fd7e14; background: #fff7f0; }
.mvt-activity__item--4 { border-left-color: #d63384; background: #fdf2f7; }
.mvt-activity__item--5 { border-left-color: #0dcaf0; background: #f0fbfe; }

/* An outcome must never be mistaken for an instruction, whatever colour the group has. */
.mvt-activity__item--done .mvt-activity__message { font-weight: 600; color: #146c43; }
.mvt-activity__item--bad .mvt-activity__message { font-weight: 600; color: #b02a37; }

/* A line that points at something is a real button, so the keyboard reaches it too. It is styled
   back to looking exactly like the lines around it, because a row of buttons in a ticker reads as
   nine things to press rather than as a list of what happened. */
.mvt-activity__open {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.mvt-activity__open .mvt-activity__time,
.mvt-activity__open .mvt-activity__message,
.mvt-activity__open .mvt-activity__detail {
    display: block;
}

.mvt-activity__open:hover .mvt-activity__message {
    text-decoration: underline;
}

/* The two dialogs behind a clicked line ------------------------------------ */

.mvt-activity-dialog__body {
    max-height: 66vh;
    overflow-y: auto;
}

.mvt-activity-dialog__problem {
    color: #b02a37;
    margin: 0;
}

.mvt-activity-dialog__line {
    font-weight: 600;
    margin: 0 0 .75rem;
}

/* Label left, value right, so the eye finds the same number in the same place every time. */
.mvt-activity-dialog__facts {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: .3rem .75rem;
    margin: 0;
}

.mvt-activity-dialog__facts dt {
    color: #6c757d;
    font-weight: 400;
}

.mvt-activity-dialog__facts dd {
    margin: 0;
    font-weight: 600;
    word-break: break-word;
}

@media (max-width: 640.98px) {
    .mvt-activity-dialog__facts {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .mvt-activity-dialog__facts dd {
        margin-bottom: .4rem;
    }
}

/* The "fondsen" dialog ---------------------------------------------------- */

/*
   The search dialog behind the Fondsen button (19 August 2026). The toolbar is a row that wraps: on
   a narrow window the venue tick lands under the search box instead of squeezing it, because a
   search field of forty pixels is no search field at all.
*/
.mvt-picker__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: .75rem;
}

.mvt-picker__query { flex: 1 1 260px; }

.mvt-picker__actions {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* The dictation button sits ON the toolbar row here, not underneath a field, so it loses the top
   margin it carries everywhere else; with it, the button hangs below the Zoeken button next to it. */
.mvt-picker__actions .mvt-voice {
    margin-top: 0;
}

.mvt-picker__venue {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.mvt-picker__venue-name {
    font-size: .75rem;
    color: #6c757d;
}

/*
   Favourite or not is a colour, not a second icon: SvgIcon.StarOutline is obsolete in the installed
   Telerik.SvgIcons 4.9.3 and this application allows no build warnings. Grey means "not yet", amber
   means "yes", and the button carries the sentence in its title either way.
*/
.mvt-favorite { color: #adb5bd; }
.mvt-favorite--on { color: #f0a500; }

/* De schakelaar "Oordeel per fonds" op /suggestions. Een TelerikSwitch toont Aan/Uit alleen binnen
   het schuifje zelf, wat op een klein scherm nauwelijks te lezen is; het woord ernaast zegt het nog
   een keer voluit. Baseline werkt hier niet: het schuifje is een blokje, geen tekst. */
.mvt-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2rem;
}

.mvt-toggle__state {
    font-size: .8125rem;
    color: #495057;
}

/* Eén strategie op het tabblad Strategieën van /settings: de naam met zijn schakelaar op één regel,
   de uitleg eronder. Flex met wrap, want op een telefoon horen de naam en de schakelaar onder elkaar
   in plaats van dat de naam tot één woord per regel wordt platgedrukt. */
.mvt-strategy {
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: .75rem 1rem;
    margin-bottom: .75rem;
    background-color: #fff;
}

.mvt-strategy__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.mvt-strategy__name {
    margin: 0;
    font-size: 1.0625rem;
}

.mvt-strategy__what {
    margin: .5rem 0 .25rem;
}

/* De configuratiesleutel van een strategie is één lang woord zonder spaties
   (Fluctuation:InsuranceStrikeOutOfMoneyPercentage). Zonder dit duwt hij de hele pagina op een
   telefoon zijwaarts, terwijl het element eromheen perfect meet. Zelfde regel als bij de paden op
   /server en de sleutels in het instellingenscherm. */
.mvt-strategy code {
    overflow-wrap: anywhere;
}

/*
   Elke schakelaar in de applicatie is GROEN als hij aan staat en ROOD als hij uit staat. Het
   Default-thema van Telerik 14.1.0 kleurt een ingeschakelde schakelaar met --kendo-color-primary
   (#ff6358, roodoranje) en een uitgeschakelde met --kendo-color-surface-alt (grijs), dus "aan" zag
   er precies uit als een waarschuwing. Op een scherm met geld erin is dat de verkeerde kant op
   lezen. Deze regels staan na het thema in App.razor en hebben dezelfde specificiteit als de
   themaregels (.k-switch-on .k-switch-track), dus ze winnen op volgorde en niet met !important.
   Groen en rood zijn dezelfde tinten als de rest van de applicatie (.mvt-number--up/--down).
   Bewaakt door SwitchColourTests.
*/
.k-switch-on .k-switch-track {
    border-color: #146c43;
    background-color: #198754;
    color: #fff;
}

.k-switch-off .k-switch-track {
    border-color: #b02a37;
    background-color: #dc3545;
    color: #fff;
}

/* De focusring volgt de kleur van de schakelaar zelf; anders licht een groene schakelaar op in het
   roodoranje van het thema zodra hij focus krijgt. */
.k-switch-on:focus .k-switch-track,
.k-switch-on.k-focus .k-switch-track {
    outline: 2px solid rgba(25, 135, 84, .25);
}

.k-switch-off:focus .k-switch-track,
.k-switch-off.k-focus .k-switch-track {
    outline: 2px solid rgba(220, 53, 69, .25);
}

/* Het schuifje blijft wit, maar met een rand in de kleur van de baan eromheen; de themarand
   (grijs) verdwijnt anders half in het rood. */
.k-switch-on .k-switch-thumb {
    border-color: #146c43;
}

.k-switch-off .k-switch-thumb {
    border-color: #b02a37;
}

/* De argumenten en het tegenargument onder een motivatie in de kopen/houden/verkopen-tabel. De
   opsomming staat in een gridcel, dus de standaard-inspringing van een <ul> zou de kolom nog verder
   versmallen; vandaar de eigen, kleinere inspringing. */
.mvt-fund-verdict__arguments {
    margin: .25rem 0 0;
    padding-left: 1.1rem;
    font-size: .8125rem;
    color: #495057;
}

/* Het tegenargument is met opzet even zichtbaar als de motivatie zelf: een richting zonder
   tegenargument leest als een advies, en dat is dit nadrukkelijk niet. */
.mvt-fund-verdict__counter {
    margin-top: .25rem;
    font-size: .8125rem;
    color: #664d03;
}

/* Waar de volgende vraag aan vastzit, boven het vraagveld van /suggestions. Bewust een gekleurde
   balk en niet een regel tekst: dit is het enige verschil tussen "de assistent krijgt deze zin" en
   "de assistent krijgt dit hele gesprek", en dat verschil kost geld. */
.mvt-followup {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
    border-left: 4px solid #0d6efd;
    background: #f1f6ff;
    border-radius: .25rem;
}

.mvt-followup__label {
    font-weight: 600;
    font-size: .8125rem;
    color: #0a58ca;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.mvt-followup__question {
    flex: 1 1 16rem;
    min-width: 0;
    font-size: .875rem;
    color: #212529;
}

/* De Annuleren-knop staat onder het statuswoord in dezelfde kolom. Een eigen kolom erbij drukte de
   vraagkolom onder de leesbare breedte; zie GridColumnBudgetTests. */
.mvt-job-cancel {
    margin-top: .25rem;
}

/* De vraagboom: hoofdvraag met de vervolgvragen eronder. Het onderwerp staat als eigen blokje voor
   de regel, zodat je aan de linkerkant langs kunt lezen welk fonds een tak beslaat. */
.mvt-question-tree__subject {
    display: inline-block;
    min-width: 4.5rem;
    margin-right: .5rem;
    padding: 0 .35rem;
    border-radius: .2rem;
    background: #e9ecef;
    font-size: .75rem;
    color: #495057;
    text-align: center;
}

.mvt-question-tree__text {
    font-size: .875rem;
}

/* Een antwoord waarvan de hoofdvraag verwijderd is, blijft staan; het zegt alleen dat de aanleiding
   weg is. Een bewaard antwoord verbergen omdat de vraag erboven weg is, is erger dan de melding. */
.mvt-question-tree__orphan {
    margin-left: .5rem;
    font-size: .75rem;
    color: #664d03;
}

/* De vraagboom links en het antwoord rechts, op /suggestions. Gevraagd door de eigenaar op
   28 augustus 2026: een derde voor de boom, twee derde voor het antwoord. De lijst met uitklapbare
   "Eerdere vragen" die eronder stond is vervallen, en daarmee de inspringing per diepte: de boom
   draagt de diepte nu als enige. */
.mvt-answer-split {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) 2fr;
    gap: .75rem;
    align-items: start;
}

/* Onder een tablet is er geen twee derde meer over dat leesbaar is; dan staat het antwoord
   gewoon onder de boom. */
@media (max-width: 900px) {
    .mvt-answer-split {
        grid-template-columns: 1fr;
    }
}

/* Allebei de helften scrollen zelf. Dat is wat de knoppenbalk hieronder vast laat staan: een
   position:sticky plakt aan de dichtstbijzijnde scrollende voorouder, en zonder deze regel is dat
   het hele venster en verdwijnt de balk alsnog uit beeld. */
.mvt-answer-split__tree,
.mvt-answer-split__answer {
    max-height: calc(100vh - 14rem);
    min-height: 12rem;
    overflow-y: auto;
}

/* Een vraag is een hele zin en de kolom is smal: hij wikkelt, hij loopt niet zijwaarts weg. */
.mvt-question-tree .k-treeview-leaf {
    white-space: normal;
}

/* ⛔ De knoppen van een antwoord staan bovenaan en blijven staan. Ze stonden onder het antwoord en
   waren daardoor bij een antwoord van een paar schermen hoog nooit in beeld (eigenaar,
   28 augustus 2026), terwijl daar Opslaan en Verwijderen tussen zitten. */
.mvt-answer__bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0 .5rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid #dee2e6;
    background: #fff;
}

.mvt-answer__title {
    flex: 1 1 14rem;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
}

.mvt-answer__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

/* The daemon on the other machine, as shown in the page header of the web application and at the
   top of the Handelsmachine tab. Reuses the dot styling of the local status indicator so the two
   halves of the installation look like one application. */
.mvt-status__link {
    font-size: .8125rem;
    color: #0d6efd;
    text-decoration: none;
    white-space: nowrap;
}

.mvt-status__link:hover {
    text-decoration: underline;
}

.mvt-daemon__headline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0 12px;
    flex-wrap: wrap;
}

.mvt-daemon__headline .mvt-status__label {
    font-weight: 600;
}

/* Het instellingenscherm. De sleutel staat klein onder het label, want die heb je alleen nodig als
   je hem in een logregel of in de documentatie terugziet. */
.mvt-setting__label {
    font-weight: 600;
}

.mvt-setting__key {
    color: #6c757d;
    font-size: .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.mvt-setting__value {
    font-variant-numeric: tabular-nums;
}

/* Oranje zodra de waarde niet meer is waarmee de applicatie geleverd is: dan is het een keuze van
   iemand en geen aanname van de bouwer, en dat verschil hoort zichtbaar te zijn. */
.mvt-setting__value--changed {
    color: #b35c00;
    font-weight: 700;
}

.mvt-setting__default {
    color: #6c757d;
    font-size: .75rem;
}

/*
   Transactieresultaat (/traderesults): de onderdelen van een trade, in het uitklappaneel van het
   grid. Bewust blokken en geen tweede grid: een grid binnen een grid krijgt zijn vaste kolommen
   niet kwijt in de ingesprongen detailruimte, en op een telefoon scrolt het dan zijwaarts binnen
   iets dat zelf al zijwaarts scrolt. Deze blokken buigen mee met de breedte die er is.
*/
.mvt-trade-detail {
    padding: .25rem 0;
}

.mvt-trade-leg {
    border-left: 3px solid #dee2e6;
    padding: .35rem 0 .35rem .6rem;
    margin-bottom: .5rem;
}

.mvt-trade-leg:last-child {
    margin-bottom: 0;
}

.mvt-trade-leg__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
}

/* De rol van het onderdeel: de positie zelf, of de optie die hem afdekt. */
.mvt-trade-leg__role {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    border: 1px solid #dee2e6;
    border-radius: .75rem;
    padding: 0 .45rem;
}

.mvt-trade-leg__numbers {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    margin-top: .2rem;
}

.mvt-trade-leg__number {
    display: flex;
    flex-direction: column;
}

.mvt-trade-leg__label {
    font-size: .6875rem;
    color: #6c757d;
}

/*
   A weekly report on /autotrading, as it was mailed. The report is a whole HTML mail, so it lives in a
   sandboxed frame that takes the width of the window and scrolls inside itself.
*/
.mvt-report-frame {
    display: block;
    width: 100%;
    height: 60vh;
    border: 1px solid #dee2e6;
    background: #f4f6f8;
}

/* The circuit breakers' sentence carries amounts and percentages; it wraps instead of pushing the page sideways. */
.mvt-risk__line {
    overflow-wrap: anywhere;
}