/* The frame around every page: the header, the side menu, and the page column between them. Colours are
   the --ms-shell-* tokens, so the frame is steel in the light theme and navy in the dark one. */

/* ---- Frame ---- */

.ms-shell__bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--mud-zindex-appbar);
    display: grid;
    /* Equal outer columns, so the middle is centred on the bar whatever the sides hold. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    height: var(--ms-bar-h);
    padding: 0 12px 0 10px;
    background: var(--ms-shell);
    color: var(--ms-shell-ink);
    border-bottom: 1px solid var(--ms-shell-line);
    overflow: hidden;
}

/* The landing page's ledger grid, as a band behind the pickers. */
.ms-shell__bar::before,
.ms-shell__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ms-shell__bar::before {
    background-image:
        linear-gradient(var(--ms-shell-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--ms-shell-grid) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: 0 -1px;
    -webkit-mask-image: radial-gradient(ellipse 40% 140% at 50% 50%, #000 0%, transparent 85%);
    mask-image: radial-gradient(ellipse 40% 140% at 50% 50%, #000 0%, transparent 85%);
}

.ms-shell__bar::after {
    background: radial-gradient(30% 160% at 50% 50%, var(--ms-shell-glow), transparent 70%);
}

.ms-shell__bar > * {
    position: relative;
    z-index: 1;
}

.ms-shell__left,
.ms-shell__right {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.ms-shell__right {
    justify-content: flex-end;
}

.ms-shell__center {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* The perspective gives way first, truncating its name; the period keeps its size. */
.ms-shell__center > *,
.ms-shell__center .ms-hctl {
    min-width: 0;
    max-width: 100%;
}

.ms-shell__center > :has(> .ms-period) {
    flex: none;
}

.ms-shell__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 8px;
    color: var(--ms-shell-ink);
    font-family: var(--ms-font-ui);
    font-size: .9375rem;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
}

.ms-shell__brand img {
    display: block;
    height: 22px;
    width: auto;
}

.ms-shell__brand b {
    font-weight: 600;
    color: var(--ms-shell-strong);
}

.ms-shell__brand i {
    width: 1px;
    height: 16px;
    background: var(--ms-shell-divider);
}

.ms-shell__brand span {
    font-weight: 500;
    color: var(--ms-shell-muted);
}

.ms-shell__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ms-shell-muted);
    cursor: pointer;
}

.ms-shell__icon:hover {
    background: var(--ms-shell-hover);
    color: var(--ms-shell-strong);
}

.ms-shell__icon .material-symbols-outlined {
    font-size: 22px;
}

/* A labelled button in the bar, such as Min bruker and Logg ut on /start. */
.ms-shell__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--ms-shell-line);
    border-radius: 8px;
    background: var(--ms-shell-ctx);
    color: var(--ms-shell-ink);
    font: 600 .875rem var(--ms-font-ui);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.ms-shell__action:hover {
    background: var(--ms-shell-hover);
    border-color: var(--ms-shell-line-strong);
}

.ms-shell__action .material-symbols-outlined {
    font-size: 18px;
    color: var(--ms-shell-accent);
}

.ms-shell__main {
    padding-top: var(--ms-top-h);
    margin-left: var(--ms-rail-w);
    transition: margin-left .18s ease;
}

/* The page column. Its vertical padding is part of what the fill-height pages subtract from the window. */
.ms-shell__page {
    max-width: var(--ms-page-max);
    margin: 0 auto;
    padding: 16px 28px;
}

.ms-shell--bare .ms-shell__bar {
    grid-template-columns: 1fr auto;
}

.ms-shell--bare .ms-shell__main {
    margin-left: 0;
}

.ms-shell__page--start {
    max-width: 1280px;
}

/* The system messages (SystemNotices): across the whole width, fixed under the bar. */
.ms-notices {
    position: fixed;
    top: var(--ms-bar-h);
    left: 0;
    right: 0;
    z-index: var(--mud-zindex-appbar);
}

/* ---- Side menu ---- */

.ms-shell__rail {
    position: fixed;
    top: var(--ms-top-h);
    bottom: 0;
    left: 0;
    z-index: var(--mud-zindex-drawer);
    display: flex;
    flex-direction: column;
    width: var(--ms-rail-w);
    overflow: hidden;
    background: var(--ms-shell);
    border-right: 1px solid var(--ms-shell-line);
    transition: width .18s ease;
}

/* The scrolling part. Its padding is where the active link's bar sits, so the scroll does not clip it. */
.ms-shell__menu {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 10px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.ms-shell__rail-foot {
    flex: none;
    padding: 10px;
    border-top: 1px solid var(--ms-shell-line);
}

.ms-shell__rail-foot:empty {
    display: none;
}

.ms-shell__heading {
    margin: 18px 10px 6px;
    color: var(--ms-shell-faint);
    font: 600 .75rem var(--ms-font-ui);
    white-space: nowrap;
}

.ms-shell__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    height: 36px;
    margin: 1px 0;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--ms-shell-muted);
    font: 500 .875rem var(--ms-font-ui);
    text-decoration: none;
    white-space: nowrap;
}

.ms-shell__link:hover {
    background: var(--ms-shell-hover);
    color: var(--ms-shell-ink);
}

.ms-shell__link .material-symbols-outlined {
    flex: none;
    font-size: 20px;
    color: var(--ms-shell-faint);
}

.ms-shell__link:hover .material-symbols-outlined {
    color: var(--ms-shell-muted);
}

.ms-shell__link.active {
    background: var(--ms-shell-active);
    color: var(--ms-shell-strong);
}

.ms-shell__link.active .material-symbols-outlined {
    color: var(--ms-shell-accent);
    font-variation-settings: "FILL" 1;
}

.ms-shell__link.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ms-shell-accent);
}

.ms-shell__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The page name beside an icon while the menu shows icons only; placed by js/shell.js. */
.ms-shell__tip {
    position: fixed;
    z-index: var(--mud-zindex-tooltip);
    transform: translateY(-50%);
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--ms-shell-tip);
    color: var(--ms-shell-tip-ink);
    font: 500 .8125rem var(--ms-font-ui);
    white-space: nowrap;
    box-shadow: var(--ms-shadow-pop);
    pointer-events: none;
    opacity: 0;
}

.ms-shell__tip.is-shown {
    opacity: 1;
}

.ms-shell__scrim {
    display: none;
}

/* Icons only, collapsed by choice on a wide screen. Headings become thin dividers so the groups still
   show. The narrow-screen rules below repeat these for a menu that has not been opened. */
:root[data-rail="collapsed"] {
    --ms-rail-w: var(--ms-rail-w-collapsed);
}

:root[data-rail="collapsed"] .ms-shell__link {
    justify-content: center;
    width: 44px;
    padding: 0;
    gap: 0;
}

:root[data-rail="collapsed"] .ms-shell__label {
    display: none;
}

:root[data-rail="collapsed"] .ms-shell__heading {
    height: 1px;
    margin: 12px 6px;
    font-size: 0;
    background: var(--ms-shell-line);
}

@media (max-width: 1099.98px) {
    :root,
    :root[data-rail="collapsed"] {
        --ms-rail-w: var(--ms-rail-w-collapsed);
    }

    :root:not([data-rail-open]) .ms-shell__link {
        justify-content: center;
        width: 44px;
        padding: 0;
        gap: 0;
    }

    :root:not([data-rail-open]) .ms-shell__label {
        display: none;
    }

    :root:not([data-rail-open]) .ms-shell__heading {
        height: 1px;
        margin: 12px 6px;
        font-size: 0;
        background: var(--ms-shell-line);
    }

    /* Opened on a narrow screen: the full menu over the page, with the page dimmed behind it. */
    :root[data-rail-open] .ms-shell__rail {
        width: 236px;
        box-shadow: 8px 0 32px rgba(0, 0, 0, .2);
    }

    :root[data-rail-open] .ms-shell__link {
        justify-content: flex-start;
        width: auto;
        padding: 0 10px;
        gap: 11px;
    }

    :root[data-rail-open] .ms-shell__label {
        display: inline;
    }

    :root[data-rail-open] .ms-shell__heading {
        height: auto;
        margin: 18px 10px 6px;
        font-size: .75rem;
        background: none;
    }

    :root[data-rail-open] .ms-shell__scrim {
        display: block;
        position: fixed;
        inset: var(--ms-top-h) 0 0 0;
        z-index: calc(var(--mud-zindex-drawer) - 1);
        background: rgba(11, 26, 41, .28);
    }

    .ms-shell__brand span,
    .ms-shell__brand i {
        display: none;
    }
}

@media (max-width: 599.98px) {
    :root,
    :root[data-rail="collapsed"] {
        --ms-rail-w: 0px;
    }

    :root:not([data-rail-open]) .ms-shell__rail {
        display: none;
    }

    .ms-shell__page {
        padding: 12px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ms-shell__main,
    .ms-shell__rail {
        transition: none;
    }
}

/* ---- Header controls: the pickers ---- */

.ms-hctl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--ms-shell-line);
    border-radius: 8px;
    background: var(--ms-shell-ctx);
    color: var(--ms-shell-ink);
    font-family: var(--ms-font-ui);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.ms-hctl:hover,
.ms-hctl--open {
    background: var(--ms-shell-hover);
    border-color: var(--ms-shell-line-strong);
}

.ms-hctl__icon {
    flex: none;
    font-size: 18px;
    color: var(--ms-shell-accent);
}

.ms-hctl__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .875rem;
    font-weight: 500;
}

.ms-hctl .mud-icon-root {
    color: var(--ms-shell-faint);
}

.ms-hctl__caret {
    transition: transform 120ms ease;
}

.ms-hctl--open .ms-hctl__caret {
    transform: rotate(180deg);
}

/* The period's step arrows sit inside the control. */
.ms-hctl.ms-period {
    gap: 2px;
    padding: 0 2px;
}

.ms-hctl__step.mud-button-root {
    padding: 5px;
    border-radius: 6px;
}

.ms-hctl__step.mud-button-root .mud-icon-root {
    font-size: 16px;
    color: var(--ms-shell-muted);
}

.ms-hctl__step.mud-button-root:disabled {
    cursor: default;
}

.ms-hctl__step.mud-button-root:disabled .mud-icon-root {
    opacity: .38;
}

.ms-period__face {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    min-width: 140px;
    padding: 0 4px;
}

.ms-perspective {
    min-width: 260px;
    max-width: 460px;
}

.ms-perspective .ms-hctl__value {
    flex: 1 1 auto;
}

.ms-account__value {
    max-width: 180px;
}

/* Currency next to the perspective: a marker, not a second control. */
.ms-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 7px;
    border-radius: 5px;
    background: var(--ms-shell-tag);
    color: var(--ms-shell-accent);
    font: 600 .6875rem/1 var(--ms-font-data);
    letter-spacing: .04em;
}

.ms-refresh-spin .material-symbols-outlined {
    animation: ms-refresh-spin 800ms linear infinite;
}

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

.ms-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    margin-left: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ms-shell-avatar);
    color: var(--ms-shell-accent);
    font: 600 .75rem var(--ms-font-ui);
    letter-spacing: .02em;
    cursor: pointer;
    user-select: none;
}

.ms-avatar:hover {
    box-shadow: 0 0 0 3px var(--ms-shell-hover);
}

.ms-avatar--static {
    cursor: default;
}

.ms-avatar--static:hover {
    box-shadow: none;
}

/* Who you are signed in as, in the /start bar. */
.ms-signedin {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    margin-right: 4px;
}

.ms-signedin__label {
    font-size: .6875rem;
    color: var(--ms-shell-muted);
}

.ms-signedin__name {
    font-size: .875rem;
    font-weight: 600;
}

/* The header gives way in steps: the account first, then the brand's words, then on a phone the
   steppers, the currency and the refresh button. */
@media (max-width: 1279.98px) {
    .ms-account {
        display: none;
    }

    .ms-perspective {
        min-width: 200px;
    }
}

@media (max-width: 1099.98px) {
    .ms-shell__bar {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .ms-shell__center {
        justify-content: center;
    }

    .ms-shell__brand b {
        display: none;
    }

    .ms-perspective {
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
    .ms-hctl__step,
    .ms-hctl__caret {
        display: none;
    }

    .ms-hctl.ms-period {
        padding: 0 6px;
    }
}

@media (max-width: 599.98px) {
    .ms-shell__bar {
        gap: 6px;
        padding: 0 8px 0 4px;
    }

    .ms-shell__brand,
    .ms-badge,
    .ms-shell__right > .ms-shell__icon:first-child,
    .ms-signedin {
        display: none;
    }

    .ms-period__face {
        min-width: 0;
    }

    .ms-shell__center {
        justify-content: flex-start;
    }
}

/* ---- The user menu ---- */

.ms-usermenu {
    width: 280px;
    padding: 6px;
    font-family: var(--ms-font-ui);
}

.ms-usermenu__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ms-avatar.ms-avatar--large {
    width: 40px;
    height: 40px;
    margin: 0;
    background: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary);
    font-size: .875rem;
    cursor: default;
}

.ms-avatar.ms-avatar--large:hover {
    box-shadow: none;
}

.ms-usermenu__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ms-usermenu__who b {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.ms-usermenu__who span {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.ms-usermenu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--mud-palette-text-primary);
    font: 500 .875rem var(--ms-font-ui);
    justify-content: flex-start;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ms-usermenu__item:hover {
    background: var(--mud-palette-action-default-hover);
}

.ms-usermenu__item .material-symbols-outlined {
    font-size: 20px;
    color: var(--mud-palette-text-secondary);
}

.ms-usermenu__divider {
    height: 1px;
    margin: 4px 6px;
    background: var(--mud-palette-lines-default);
}

/* ---- Picker panels ---- */

/* The period picker's panel: the years on offer over a month grid three wide, so a row is a quarter. */

.ms-period-panel {
    display: flex;
    flex-direction: column;
    width: 380px;
    outline: none;
}

.ms-period__years {
    display: flex;
    gap: 4px;
    padding: 10px 10px 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.ms-period__year {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    user-select: none;
}

.ms-period__year:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.ms-period__year.is-current {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 500;
}

.ms-period__months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 4px 10px 10px;
    border-top: 1px solid var(--mud-palette-divider);
}

.ms-period__month {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 6px;
    font-size: .875rem;
    cursor: pointer;
    user-select: none;
}

/* The same three states as the perspective list: what is selected, what the keyboard is on, what the
   mouse is over. */
.ms-period__month:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.ms-period__month.is-current {
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.ms-period__month.is-cursor {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

.ms-period__now {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mud-palette-primary);
    font: inherit;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.ms-period__now:hover {
    text-decoration: underline;
}

/* The perspective picker's panel: a search field over the list of viewpoints, inside the popover. */

.ms-plist-panel {
    display: flex;
    flex-direction: column;
    width: 440px;
    max-width: 92vw;
}

.ms-plist__search {
    padding: 12px 12px 8px;
}

.ms-plist {
    max-height: 340px;
    overflow-y: auto;
    padding: 0 6px 6px;
    scrollbar-gutter: stable;
}

/* Opaque: rows scroll underneath it. */
.ms-plist__section {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--mud-palette-surface);
    padding: 8px 10px 4px;
    font-family: var(--ms-font-ui);
    font-size: .75rem;
    font-weight: 600;
    color: var(--ms-ink-3);
}

.ms-plist__row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 10px;
    border-left: 3px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}

/* Three states that can all be true at once: what is selected, what the keyboard is on, what the mouse
   is over. Hover is the faintest of the three - it must not read as a choice being made. */
.ms-plist__row:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.ms-plist__row.is-current {
    background-color: var(--mud-palette-primary-hover);
    border-left-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.ms-plist__row.is-current .ms-plist__name {
    font-weight: 600;
}

.ms-plist__row.is-cursor {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

.ms-plist__icon {
    font-size: 20px;
    color: var(--mud-palette-text-secondary);
}

.ms-plist__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-plist__row--group .ms-plist__name {
    font-weight: 600;
}

.ms-plist__currency {
    font-size: .75rem;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
}

.ms-plist__check {
    font-size: 18px;
    color: var(--mud-palette-primary);
}

.ms-plist__row.is-current .ms-plist__icon {
    color: var(--mud-palette-primary);
}

.ms-plist__empty {
    padding: 20px 12px;
    text-align: center;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

/* The bar under a picker panel: what is on offer on the left, the keys that work on the right. */

.ms-pickerfoot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-top: 1px solid var(--mud-palette-divider);
    font-size: .6875rem;
    color: var(--mud-palette-text-secondary);
}

.ms-keys {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.ms-keys > span + span::before {
    content: '·';
    margin: 0 12px;
    font-size: 1.15rem;
    line-height: 0;
    vertical-align: middle;
    opacity: .55;
}

/* A key to press, not a word to read. */
.ms-keys kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-right: 4px;
    padding: 0 5px;
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom-width: 2px;
    border-radius: 4px;
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: .6875rem;
    line-height: 1;
}

/* ---- Lost connection ---- */

/* Blazor draws the dialog in a shadow root with a fixed white box, out of reach of our rules; only inherited
   properties get in, and the dark theme's light text would land on that white. */
#components-reconnect-modal {
    color: var(--ms-reconnect-ink);
}