/* Figtree (SIL Open Font License, see fonts/OFL.txt), self-hosted because the CSP allows no external fonts */
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    src: url("../fonts/figtree-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Before Blazor starts (theme-boot.js sets data-theme); afterwards MudBlazor's palette takes over.
   Same values as BambinoTheme.cs. */
html {
    --boot-bg: #F6F5FA;
    --boot-fg: #1E1B2E;
    --boot-track: #E6E3EF;
    --boot-accent: #5B45B0;
    color-scheme: light;
}

html[data-theme="dark"] {
    --boot-bg: #15131F;
    --boot-fg: #ECEAF4;
    --boot-track: #2E2A40;
    --boot-accent: #A894F0;
    color-scheme: dark;
}

body {
    margin: 0;
    background: var(--mud-palette-background, var(--boot-bg));
    color: var(--mud-palette-text-primary, var(--boot-fg));
    font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.loading-progress {
    position: absolute;
    display: block;
    width: 6rem;
    height: 6rem;
    inset: 22vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--boot-track);
    stroke-width: 0.5rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--boot-accent);
    stroke-linecap: round;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    inset: calc(22vh + 2.4rem) 0 auto 0;
    text-align: center;
    font-weight: 600;
    color: var(--boot-fg);
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "");
}

#blazor-error-ui {
    background: var(--mud-palette-warning, #D9962B);
    color: #1E1B2E;
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.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."
}

.cursor-pointer {
    cursor: pointer;
}

.share-url {
    overflow-wrap: anywhere;
}

/* Visible keyboard focus everywhere, also on MudBlazor controls that only show a ripple */
:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Sentence case everywhere; MudBlazor sets uppercase on tabs separately from the button typography */
.mud-tab {
    text-transform: none;
    font-weight: 600;
}

/* The current location in the breadcrumbs is where you are, not a disabled link
   (as specific as MudBlazor's own rule, and loaded after it) */
.mud-breadcrumbs .mud-breadcrumb-item.mud-disabled > a {
    opacity: 1;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

/* Secondary table columns make way for the file name on phones */
@media (max-width: 599.98px) {
    .hide-xs {
        display: none !important;
    }

    .col-size {
        width: 76px !important;
    }
}

/* The app bar sits on the surface color; a hairline separates it from the page */
.app-bar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Drop overlay (Pages/Files.razor). Hidden until js/app.js marks the body while files are dragged
   over the window. The file input covers the whole viewport then, so the drop lands in Blazor's InputFile. */
.drop-zone {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(120% 90% at 50% 110%, color-mix(in srgb, var(--mud-palette-primary) 55%, transparent), transparent 70%),
    color-mix(in srgb, var(--mud-palette-background) 82%, transparent);
    backdrop-filter: blur(6px);
    transition: opacity 160ms ease-out;
}

body.is-dragging-files .drop-zone {
    pointer-events: auto;
    opacity: 1;
}

.drop-zone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: copy;
}

.drop-message {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 2.5rem 3rem;
    border: 2px dashed var(--mud-palette-primary);
    border-radius: 28px;
    background: var(--mud-palette-surface);
    text-align: center;
    pointer-events: none;
    transform: translateY(12px) scale(0.98);
    transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

body.is-dragging-files .drop-message {
    transform: none;
}

.drop-message .mud-icon-root {
    font-size: 4.5rem;
    color: var(--mud-palette-primary);
}

.drop-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.drop-target {
    color: var(--mud-palette-text-secondary);
}

/* Image preview (Shared/ImagePreviewDialog.razor) */
.preview-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 50vh;
    max-height: 72vh;
    border-radius: 12px;
    background: var(--mud-palette-background);
    overflow: hidden;
}

.preview-stage img,
.preview-stage video {
    display: block;
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
}

.preview-stage video {
    width: 100%;
    background: #000;
}

/* PDFs and text fill the stage from the top and scroll inside it */
.preview-stage.is-document {
    display: block;
    place-items: normal;
    height: 72vh;
}

/* Room for the arrows beside the document, so they never cover text */
.preview-stage.is-document.has-nav {
    padding-inline: 3.25rem;
}

/* The file on the page of a file share */
.shared-view img,
.shared-view video {
    display: block;
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
}

.shared-view video {
    background: #000;
}

.shared-view.is-document {
    height: 70vh;
    border-radius: 8px;
    overflow: hidden;
    background: var(--mud-palette-background);
}

/* PDF viewer (Shared/PdfViewer.razor): toolbar above, pages on a grey desk below */
.pdf-viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pdf-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pdf-position {
    min-width: 8rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pdf-pages {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    outline: none;
}

/* Pages stay white in dark mode, like paper */
.pdf-page {
    position: relative;
    flex-shrink: 0;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
}

.pdf-page canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* pdf.js text layer (from its pdf_viewer.css): invisible text over the drawn page, for selecting */
.pdf-page {
    --scale-round-x: 1px;
    --scale-round-y: 1px;
}

.pdf-page .textLayer {
    position: absolute;
    text-align: initial;
    inset: 0;
    overflow: clip;
    opacity: 1;
    line-height: 1;
    text-size-adjust: none;
    forced-color-adjust: none;
    transform-origin: 0 0;
    z-index: 0;
    --min-font-size: 1;
    --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
    --min-font-size-inv: calc(1 / var(--min-font-size));
}

.pdf-page .textLayer :is(span, br) {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
}

.pdf-page .textLayer > :not(.markedContent),
.pdf-page .textLayer .markedContent span:not(.markedContent) {
    z-index: 1;
    --font-height: 0;
    font-size: calc(var(--text-scale-factor) * var(--font-height));
    --scale-x: 1;
    --rotate: 0deg;
    transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}

.pdf-page .textLayer .markedContent {
    display: contents;
}

.pdf-page .textLayer ::selection {
    background: color-mix(in srgb, AccentColor, transparent 50%);
    color: transparent;
}

.pdf-page .textLayer br::selection {
    background: transparent;
}

.pdf-page .textLayer .endOfContent {
    display: block;
    position: absolute;
    inset: 100% 0 0;
    z-index: 0;
    cursor: default;
    user-select: none;
}

.pdf-page .textLayer.selecting .endOfContent {
    top: 0;
}

/* Text files (Shared/TextViewer.razor) */
.text-viewer {
    height: 100%;
    margin: 0;
    padding: 1rem 1.25rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: ui-monospace, "Cascadia Code", "DejaVu Sans Mono", Consolas, monospace;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    outline: none;
}

/* Markdown (Shared/TextViewer.razor): a switch above, the formatted or plain text below */
.text-document {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.text-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0.25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.text-document .text-viewer,
.markdown-view {
    flex: 1;
    min-height: 0;
}

.markdown-view {
    padding: 1rem 1.5rem;
    overflow: auto;
    overflow-wrap: anywhere;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    outline: none;
}

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

.markdown-view :is(h1, h2, h3, h4, h5, h6) {
    margin: 1.4em 0 0.5em;
    line-height: 1.25;
    font-weight: 600;
}

.markdown-view h1 {
    font-size: 1.75rem;
}

.markdown-view h2 {
    font-size: 1.4rem;
}

.markdown-view h3 {
    font-size: 1.15rem;
}

.markdown-view :is(h1, h2) {
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.markdown-view :is(p, ul, ol, blockquote, pre, table) {
    margin: 0 0 1em;
}

.markdown-view :is(ul, ol) {
    padding-left: 1.75em;
}

.markdown-view ul {
    list-style: disc;
}

.markdown-view ol {
    list-style: decimal;
}

.markdown-view .contains-task-list {
    list-style: none;
    padding-left: 0.5em;
}

.markdown-view a {
    color: var(--mud-palette-primary);
}

.markdown-view blockquote {
    padding: 0 1em;
    color: var(--mud-palette-text-secondary);
    border-left: 3px solid var(--mud-palette-lines-default);
}

.markdown-view :is(code, pre) {
    font-family: ui-monospace, "Cascadia Code", "DejaVu Sans Mono", Consolas, monospace;
    font-size: 0.875em;
    border-radius: 6px;
    background: var(--mud-palette-background);
}

.markdown-view code {
    padding: 0.15em 0.35em;
}

.markdown-view pre {
    padding: 0.75rem 1rem;
    overflow: auto;
}

.markdown-view pre code {
    padding: 0;
    background: none;
}

.markdown-view table {
    border-collapse: collapse;
    display: block;
    overflow: auto;
}

.markdown-view :is(th, td) {
    padding: 0.4em 0.8em;
    border: 1px solid var(--mud-palette-lines-default);
}

.markdown-view hr {
    border: none;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin: 1.5em 0;
}

/* Audio (Shared/AudioPlayer.razor): the cover, or a note symbol, above the player */
.audio-player {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    width: min(100%, 26rem);
    padding: 2rem 1rem;
}

.preview-stage .audio-cover,
.shared-view .audio-cover,
.audio-cover {
    display: grid;
    place-items: center;
    width: min(100%, 18rem);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.2);
}

.audio-cover.is-empty {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    box-shadow: none;
}

.audio-cover.is-empty .mud-icon-root {
    font-size: 4.5rem;
}

.audio-player audio {
    width: 100%;
}

.shared-view .audio-player {
    margin-inline: auto;
}

/* In place of a file the browser cannot show */
.viewer-note,
.video-unplayable {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
}

.preview-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--mud-palette-surface) 85%, transparent) !important;
}

.preview-nav.prev {
    left: 0.75rem;
}

.preview-nav.next {
    right: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
    .drop-zone,
    .drop-message,
    .loading-progress circle:last-child {
        transition: none;
    }
}

/* Conflicting file names in the upload conflict dialog */
.conflict-list {
    margin: 0 0 0.25rem 0;
    padding-left: 1.25rem;
}

/* Navigation drawer: surface color, a hairline towards the content, storage at the bottom */
.app-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

.app-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.app-drawer .mud-nav-link {
    font-weight: 500;
}

.storage-meter {
    margin-top: auto;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Page header: where you are on the left, actions on the right, whatever the path length */
.page-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.page-header-place {
    flex: 1 1 16rem;
    min-width: 0;
}

.page-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Sortable column headers look like headers, not like buttons */
.sort-button {
    margin-left: -0.5rem;
    font-weight: 600;
    text-transform: none;
}

/* Room below the list so the selection bar never covers the last rows */
.files-table.with-selection {
    margin-bottom: 5.5rem;
}

/* Floating bar for the selected items */
.selection-bar {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 1200;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    /* As wide as its buttons; with left: 50% it would otherwise wrap at half the viewport */
    width: max-content;
    max-width: calc(100vw - 2rem);
    padding: 0.375rem 0.5rem 0.375rem 1rem;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
}

.selection-count {
    font-weight: 600;
    margin-right: 0.5rem;
}

/* Upload progress in the bottom right corner */
.upload-tray {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1150;
    width: min(22rem, calc(100vw - 2rem));
    border-radius: 14px;
    overflow: hidden;
}

.upload-tray.above-selection {
    bottom: 5.5rem;
}

.upload-tray-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.upload-tray-list {
    max-height: 40vh;
    overflow-y: auto;
}

.upload-tray-item {
    padding: 0.625rem 1rem;
}

.upload-tray-item + .upload-tray-item {
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Storage bar: the server's disk; own files strong, other usage light */
.storage-bar {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.storage-bar-other,
.storage-bar-own {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 3px;
}

.storage-bar-other {
    background: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}

.storage-bar-own {
    background: var(--mud-palette-primary);
}

/* Almost at the account's quota */
.storage-bar.is-full .storage-bar-own {
    background: var(--mud-palette-warning);
}

/* Account page and admin settings: one card of rows, what it is on the left, the control on the right.
   Below 720px the two columns stack. */
.profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.25rem 0 1.5rem;
}

.person-avatar.is-profile {
    width: 64px;
    height: 64px;
    font-size: 1.75rem;
    font-weight: 650;
}

.profile-names {
    min-width: 0;
}

.profile-name {
    overflow-wrap: anywhere;
}

.profile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.625rem;
    color: var(--mud-palette-text-secondary);
}

/* A quiet role marker: tinted in the accent, no outline */
.role-badge {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.5;
}

.role-badge.is-muted {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 14%, transparent);
    color: var(--mud-palette-text-secondary);
}

.role-badge.is-error {
    background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
    color: var(--mud-palette-error);
}

.settings-list {
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-1);
}

.account-settings {
    max-width: 56rem;
}

.settings-heading {
    margin: 2rem 0 0.75rem;
    font-size: 1.0625rem;
    font-weight: 650;
}

.settings-heading:first-of-type {
    margin-top: 0.5rem;
}

.settings-row {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: 0.75rem 2.5rem;
    padding: 1.5rem;
}

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

.settings-row.is-quota .mud-input-control {
    margin-top: 0.5rem;
    max-width: 14rem;
}

.settings-row-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.4;
}

.settings-row-hint {
    margin: 0.25rem 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.settings-row-control {
    min-width: 0;
}

.settings-form {
    display: grid;
    gap: 0.5rem;
    max-width: 24rem;
}

.settings-form > :last-child {
    margin-top: 0.75rem;
}

/* On, off, how many: one line with an icon */
.state-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

@media (max-width: 719.98px) {
    .settings-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-row {
        padding: 1.25rem 1rem;
    }
}

/* First-start wizard: actions at the bottom right, the next steps as a calm list */
.setup-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2rem;
}

.setup-next .mud-list-item {
    padding-left: 0;
    padding-right: 0;
}

/* Admin status page: cards side by side where there is room */
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
}

.status-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem 1.5rem;
    margin: 0;
}

.status-facts dt {
    color: var(--mud-palette-text-secondary);
}

.status-facts dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.status-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.status-result {
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
}

.status-row:first-of-type {
    border-top: none;
}

/* Files whose content is gone, on the status page */
.missing-list {
    margin: 0.25rem 0 0.5rem 2rem;
    padding: 0;
    overflow-wrap: anywhere;
}

/* Storage per account on the admin page: figures above a thin bar */
.user-usage {
    min-width: 9rem;
}

.user-usage .storage-bar {
    margin-top: 0.375rem;
}

/* The selection checkbox gets a fixed, narrow column; the name column takes the rest */
.files-table th:first-child,
.files-table td:first-child {
    width: 48px;
    padding-right: 0;
}

/* With the drawer open on wide screens, snackbars appear next to it instead of over its bottom */
@media (min-width: 960px) {
    .mud-snackbar-location-bottom-left {
        left: calc(248px + 1rem) !important;
    }
}

/* Search in the app bar (Shared/SearchBox.razor). A quiet tinted field that turns into the surface with a
   violet ring when focused; results float below it. */
.app-search {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
    margin: 0 1.5rem;
}

.search-box {
    position: relative;
    width: 100%;
    max-width: 36rem;
}

.search-field {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 42px;
    padding: 0 0.375rem 0 0.875rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, var(--mud-palette-surface));
    transition: background-color 120ms ease-out, border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.search-field:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, var(--mud-palette-surface));
}

.search-box:focus-within .search-field {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.search-icon {
    flex: none;
    color: var(--mud-palette-text-secondary);
    transition: color 120ms ease-out;
}

.search-box:focus-within .search-icon {
    color: var(--mud-palette-primary);
}

.search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.95rem;
}

/* The ring around the field shows the focus */
.search-input:focus,
.search-input:focus-visible {
    outline: none;
}

.search-input::placeholder {
    color: var(--mud-palette-text-secondary);
    opacity: 1;
}

.search-key {
    flex: none;
    margin-right: 0.375rem;
    padding: 0 0.45rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.search-box:focus-within .search-key {
    visibility: hidden;
}

.search-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-height: min(70vh, 34rem);
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--mud-palette-text-primary) 20%, transparent);
    animation: search-panel-in 120ms ease-out;
}

@keyframes search-panel-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

.search-progress {
    position: absolute !important;
    inset: 0 0 auto 0;
}

.search-list {
    margin: 0;
    padding: 0.375rem;
    overflow-y: auto;
    list-style: none;
}

.search-list:empty {
    display: none;
}

.search-option {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: 10px;
    cursor: pointer;
}

.search-option.is-active,
.search-all.is-active {
    background: var(--mud-palette-table-hover);
}

.search-option-text {
    display: grid;
    min-width: 0;
}

.search-option-name,
.search-option-path {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.search-option-name {
    font-weight: 500;
}

.search-option-path {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* The part of a name that matches: violet tint, the letters themselves stay readable */
mark.search-match {
    border-radius: 3px;
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    color: inherit;
    font-weight: 650;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.search-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-primary);
    font-weight: 600;
    text-decoration: none;
}

.search-all-count {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    font-size: 0.8125rem;
}

.search-empty {
    display: grid;
    gap: 0.25rem;
    padding: 1.125rem 1.25rem;
}

.search-empty span {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* On wide screens the field is always there; the icon and the back arrow are for phones */
.search-trigger,
.search-back {
    display: none !important;
}

@media (hover: none) {
    .search-key {
        display: none;
    }
}

@media (max-width: 599.98px) {
    .app-search {
        justify-content: flex-end;
        margin: 0 0.25rem 0 auto;
    }

    .search-trigger {
        display: inline-flex !important;
    }

    .search-key {
        display: none;
    }

    .app-search:not(.is-expanded) .search-box {
        display: none;
    }

    /* Opened, the field covers the whole app bar */
    .app-search.is-expanded .search-box {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        max-width: none;
        padding: 0 0.75rem 0 0.25rem;
        background: var(--mud-palette-appbar-background);
    }

    .app-search.is-expanded .search-back {
        display: inline-flex !important;
    }

    .app-search.is-expanded .search-field {
        flex: 1 1 auto;
    }

    .app-search.is-expanded .search-panel {
        left: 0.5rem;
        right: 0.5rem;
        top: calc(100% + 4px);
    }
}

/* Results page: the folder a hit lives in, below its name */
.search-hit-name {
    font-weight: 500;
}

.search-hit-path {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.search-hit-path:hover {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

/* A search hit opened in its folder: a violet glow that fades, with a bar at the row's edge */
@keyframes row-found {
    0%, 40% {
        background-color: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    }
    100% {
        background-color: transparent;
    }
}

@keyframes row-found-edge {
    0%, 60% {
        box-shadow: inset 3px 0 0 var(--mud-palette-primary);
    }
    100% {
        box-shadow: inset 3px 0 0 transparent;
    }
}

.mud-table-row.row-found > td {
    animation: row-found 2.8s ease-out;
}

.mud-table-row.row-found > td:first-child {
    animation: row-found 2.8s ease-out, row-found-edge 2.8s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .search-panel {
        animation: none;
    }

    .search-field,
    .search-icon {
        transition: none;
    }
}

/* Versions of a file (Shared/VersionsDialog.razor): a timeline from the current content down to the
   oldest. The current one is a filled violet dot, earlier ones are hollow. */
.version-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.version {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.875rem;
    padding: 0.625rem 0;
}

/* The line through the dots, from the first dot to the last */
.version::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--mud-palette-lines-default);
}

.version:first-child::before {
    top: 1.25rem;
}

.version:last-child::before {
    bottom: calc(100% - 1.25rem);
}

.version:only-child::before {
    display: none;
}

.version-dot {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    margin: 0.375rem 4px 0;
    border: 2px solid var(--mud-palette-text-secondary);
    border-radius: 50%;
    background: var(--mud-palette-surface);
}

.version.is-current .version-dot {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.version-title {
    font-weight: 600;
}

.version.is-current .version-title {
    color: var(--mud-palette-primary);
}

.version-meta {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.version-actions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

/* After a restore the new current entry lights up briefly, so the swap is visible */
@keyframes version-restored {
    0%, 30% {
        background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    }
    100% {
        background-color: transparent;
    }
}

.version.is-restored {
    margin: 0 -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 10px;
    animation: version-restored 1.8s ease-out;
}

.version.is-restored::before {
    left: calc(9px + 0.5rem);
}

/* On phones the actions move below the text, which keeps the full width */
@media (max-width: 599.98px) {
    .version {
        grid-template-columns: 20px minmax(0, 1fr);
        row-gap: 0.25rem;
    }

    .version-actions {
        grid-column: 2;
        margin-left: -0.5rem;
    }
}

/* Previews (Shared/Thumbnail.razor): the image once loaded, the file's icon until then */
.thumb {
    display: grid;
    place-items: center;
    overflow: hidden;
}

.thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: thumb-in 220ms ease-out;
}

.thumb {
    position: relative;
}

/* A PDF's first page lies on the tile like a sheet of paper; drop-shadow follows the page, not the box */
.thumb.is-page img {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    padding: 9%;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.25));
}

.thumb-row.is-page img {
    padding: 0;
    filter: none;
}

/* A video's still with a play symbol in the middle */
.thumb-play {
    position: absolute;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    color: #fff;
    background: rgb(0 0 0 / 0.5);
    pointer-events: none;
}

.thumb-row .thumb-play {
    width: 1rem;
    height: 1rem;
}

.thumb-row .thumb-play .mud-icon-root {
    font-size: 0.75rem;
}

@keyframes thumb-in {
    from {
        opacity: 0;
    }
}

/* In the list: a small rounded preview where the icon would be */
.thumb-row {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

/* List or tiles (Pages/Files.razor) */
.view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
}

.view-toggle .mud-icon-button {
    border-radius: 8px;
}

.view-toggle .mud-icon-button.is-active {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

.view-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 36px;
    margin: -0.25rem 0 0.75rem;
}

.view-bar .sort-menu {
    margin-left: -0.5rem;
}

.view-bar .view-toggle {
    margin-left: auto;
}

.sort-menu .mud-button-root {
    font-weight: 600;
}

.with-selection {
    margin-bottom: 5.5rem;
}

/* Tiles (Shared/FileGrid.razor). Photos fill their square without a card around them; folders are amber
   places, other files a quiet surface with their icon. The name sits below on the page itself. */
.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
    gap: 1.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tile {
    position: relative;
    min-width: 0;
}

.tile-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 140ms ease-out, box-shadow 140ms ease-out;
}

.tile-thumb {
    aspect-ratio: 1;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, var(--mud-palette-surface));
    transition: transform 160ms cubic-bezier(0.2, 0.9, 0.3, 1.1), border-radius 160ms ease-out;
}

.tile.is-folder .tile-thumb {
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, var(--mud-palette-surface));
}

.tile-thumb .thumb-icon {
    font-size: 3rem;
    color: var(--mud-palette-text-secondary);
}

.tile.is-folder .tile-thumb .thumb-icon {
    font-size: 3.75rem;
    color: var(--mud-palette-warning);
}

.tile:not(.is-selected) .tile-open:hover .tile-thumb {
    filter: brightness(0.96);
}

/* Selected: the picture steps back into a violet frame, like a photo in a mount */
.tile.is-selected .tile-open {
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

.tile.is-selected .tile-thumb {
    transform: scale(0.86);
    border-radius: 8px;
}

.tile-name {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0 0.125rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.tile-name-text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tile.is-selected .tile-name {
    color: var(--mud-palette-primary);
}

/* Check and menu appear on hover or keyboard focus, always while selecting, and always on touch screens */
.tile-check,
.tile-menu {
    position: absolute;
    top: 0.5rem;
    opacity: 0;
    transition: opacity 120ms ease-out;
}

.tile-check {
    left: 0.5rem;
    width: 24px;
    height: 24px;
}

.tile-menu {
    right: 0.375rem;
    top: 0.375rem;
}

.tile:hover .tile-check,
.tile:hover .tile-menu,
.tile:focus-within .tile-check,
.tile:focus-within .tile-menu,
.file-grid.is-selecting .tile-check,
.tile.is-selected .tile-menu {
    opacity: 1;
}

@media (hover: none) {
    .tile-check,
    .tile-menu {
        opacity: 1;
    }
}

.tile-check input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.tile-check-box {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid var(--mud-palette-text-secondary);
    border-radius: 50%;
    background: var(--mud-palette-surface);
    color: transparent;
    pointer-events: none;
}

.tile.is-image .tile-check-box {
    border-color: #FFFFFF;
    background: rgba(30, 27, 46, 0.28);
    box-shadow: 0 1px 4px rgba(30, 27, 46, 0.35);
}

.tile-check input:checked + .tile-check-box {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.tile-check input:focus-visible + .tile-check-box {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.tile-menu .mud-icon-button {
    background: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent);
}

@media (max-width: 599.98px) {
    .file-grid {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
        gap: 1rem 0.625rem;
    }

    .tile-thumb .thumb-icon {
        font-size: 2.25rem;
    }

    .tile.is-folder .tile-thumb .thumb-icon {
        font-size: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .thumb img {
        animation: none;
    }

    .tile-open,
    .tile-thumb,
    .tile-check,
    .tile-menu {
        transition: none;
    }
}

/* People (Shared/PersonAvatar.razor): five dusk tones next to the violet, picked from the name. Mixed with the
   text color, they turn deeper in light mode and lighter in dark mode, with the surface color as the initial. */
:root {
    --person-0: #8A5A9E;
    --person-1: #5A70AE;
    --person-2: #4A8A8C;
    --person-3: #B05E78;
    --person-4: #A87A35;
}

.person-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--person) 70%, var(--mud-palette-text-primary));
    color: var(--mud-palette-surface);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

.person-avatar.is-small {
    width: 20px;
    height: 20px;
    font-size: 0.6875rem;
}

.person-avatar.is-large {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
}

/* After a name: the people a folder is shared with, each ringed in the surface so they read as a stack */
.people-stack {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.people-stack .person-avatar {
    box-shadow: 0 0 0 2px var(--mud-palette-surface);
}

.people-stack .person-avatar + .person-avatar {
    margin-left: -6px;
}

.people-more {
    margin-left: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* A folder someone shared with you wears its owner's initial like a sticker on the folder */
.has-owner {
    position: relative;
    display: inline-flex;
}

.owner-sticker {
    position: absolute;
    right: -8px;
    bottom: -6px;
    box-shadow: 0 0 0 2px var(--mud-palette-surface);
}

.has-owner .owner-sticker.is-small {
    width: 16px;
    height: 16px;
    font-size: 0.5625rem;
}

/* On a tile it sits on the folder's lower corner, like on the small icon in the list */
.tile-open {
    position: relative;
}

.tile .owner-sticker {
    right: auto;
    bottom: auto;
    left: calc(50% + 12px);
    top: calc(50% + 4px);
    width: 26px;
    height: 26px;
    font-size: 0.8125rem;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-warning) 16%, var(--mud-palette-surface));
}

/* Sharing with people (Shared/ShareDialog.razor): who and what they may on one line, the people below */
.share-people {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.share-people-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.share-people-name {
    flex: 1 1 12rem;
}

.share-people-permission {
    flex: 0 0 9rem;
}

.share-people-add {
    flex: none;
    margin-bottom: 2px;
}

.share-people-empty {
    padding: 0.75rem 0 0.25rem;
}

.share-people-list {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.share-people-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 52px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.share-people-who {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

/* The permission and the button to end the share stay together at the end of the row */
.share-row-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.25rem;
}

.share-people-can {
    width: 9.5rem;
    margin-top: 0;
}

.share-people-can .mud-input {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* Inside a folder someone else shared (Pages/Files.razor): the owner's face and what you may do, quiet and
   tinted in their tone rather than the app's violet, so it reads as their place */
.shared-note {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin: -0.25rem 0 1rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--person, var(--mud-palette-primary)) 9%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--person, var(--mud-palette-primary)) 22%, transparent);
}

.shared-note-title {
    font-weight: 650;
    line-height: 1.35;
}

.shared-note-text {
    max-width: 68ch;
    margin-top: 0.125rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

/* Freigaben (Pages/Shares.razor): one calm list per kind of sharing, people first */
.shares-intro {
    max-width: 68ch;
}

.shares-section + .shares-section {
    margin-top: 2rem;
}

.shares-section > .mud-typography-h6 {
    margin-bottom: 0.625rem;
}

.shares-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shares-list li {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 64px;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
}

.shares-list li + li {
    border-top: 1px solid var(--mud-palette-table-lines);
}

.shares-what {
    flex: 1;
    min-width: 0;
}

.shares-folder,
.shares-person {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.shares-folder {
    color: inherit;
    text-decoration: none;
}

.shares-folder:hover {
    text-decoration: underline;
}

.shares-detail {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.shares-detail a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

.shares-folder-icon {
    font-size: 1rem;
}

@media (max-width: 599px) {
    .shares-list .share-people-can {
        width: 8rem;
    }
}

/* The code from the authenticator app (Shared/CodeField.razor): large digits in fixed width, spaced like the
   app shows them, on a quiet tinted field. The one bold thing of two-factor sign-in. */
.code-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.code-field-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.code-field input {
    box-sizing: border-box;
    width: 100%;
    max-width: 18rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: 2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.35em;
    text-indent: 0.35em;
    text-align: center;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.code-field input::placeholder {
    color: color-mix(in srgb, var(--mud-palette-text-secondary) 35%, transparent);
}

.code-field input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.code-field.is-invalid input {
    border-color: var(--mud-palette-error);
}

/* Recovery codes are letters and a dash: smaller, less spacing */
.code-field.is-recovery input {
    font-size: 1.375rem;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
}

@media (prefers-reduced-motion: reduce) {
    .code-field input {
        transition: none;
    }
}

/* The second step on the login page */
.login-second-step {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
}

.login-second-step .code-field input {
    max-width: none;
}

/* Setting it up (Shared/TwoFactorDialog.razor): the QR code on a white card like paper (also in dark mode, so
   every camera reads it), the steps beside it, below it on phones */
.totp-setup {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

.qr-card {
    flex: none;
    width: 184px;
    height: 184px;
    padding: 12px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid var(--mud-palette-lines-default);
}

.qr-card svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Connecting a device (Shared/ConnectDeviceDialog.razor, Pages/Connect.razor). The code's ring runs down
   with its ten minutes: violet for the time left, a muted gray for the time gone, so the one accent on
   the dialog says how long there is. --left goes from 1 to 0. */
.connect-setup {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    align-items: flex-start;
}

.connect-qr {
    --left: 1;
    flex: none;
    padding: 4px;
    border-radius: 18px;
    background: conic-gradient(var(--mud-palette-primary) calc(var(--left) * 1turn),
        color-mix(in srgb, var(--mud-palette-text-secondary) 28%, transparent) 0);
}

.connect-qr .qr-card {
    border: none;
}

.connect-qr.is-expired .qr-card svg {
    opacity: 0.12;
}

.connect-ways {
    flex: 1 1 17rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.connect-way-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.4;
}

.connect-way-text {
    margin: 0.125rem 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* A link or command to copy: one line, cut at the end, the button beside it */
.connect-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.375rem;
    padding: 0.125rem 0.125rem 0.125rem 0.75rem;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-gray);
}

.connect-link-text,
.connect-link .command-line {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
}

.connect-link-text {
    color: var(--mud-palette-text-secondary);
}

/* A real shell command, so it keeps the look of one */
.command-line {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", "DejaVu Sans Mono", monospace;
    background: none;
    color: var(--mud-palette-text-primary);
}

.connect-countdown {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
}

.connect-countdown .tabular {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    color: var(--mud-palette-text-primary);
}

.connect-countdown.is-expired {
    color: var(--mud-palette-text-primary);
    font-weight: 650;
}

/* The page connect links lead to: the other way below a quiet line */
.connect-page-other {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* The moment a device connects: the check grows in once */
.connect-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0.5rem 0.5rem;
    text-align: center;
}

.connect-done-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 0.5rem;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    animation: connect-done-in 360ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

.connect-done-icon .mud-icon-root {
    font-size: 2.25rem;
}

@keyframes connect-done-in {
    from {
        transform: scale(0.4);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .connect-done-icon {
        animation: none;
    }
}

@media (max-width: 599.98px) {
    .connect-qr {
        margin: 0 auto;
    }
}

.totp-setup-text {
    flex: 1 1 16rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.totp-steps {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.55;
}

.totp-steps li + li {
    margin-top: 0.375rem;
}

.totp-secret {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

/* Figtree with fixed-width digits is enough: neither alphabet has characters that look alike (no 0/O, 1/l) */
.totp-secret code,
.recovery-codes code {
    font-family: inherit;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    background: none;
    color: var(--mud-palette-text-primary);
}

/* Breaks only between the groups of four */
.totp-secret code {
    font-size: 0.875rem;
    word-break: normal;
    overflow-wrap: normal;
}

/* Ten codes to copy onto paper: two calm columns, like a list on a card */
.recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 1rem 1.25rem;
    list-style: none;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface));
    border: 1px dashed var(--mud-palette-lines-default);
}

.recovery-codes code {
    font-size: 1.0625rem;
}

/* In place of every page while it still has to be set up */
.two-factor-required {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 36rem;
    margin: 3rem auto 0;
}

.two-factor-required-icon {
    font-size: 2.5rem;
}

/* App bar: the signed-in person as the account button */
.account-button {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -6px;
    border-radius: 50%;
    cursor: pointer;
}

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

/* Devices page: an icon per kind of device, the current one in the accent */
.device-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
    color: var(--mud-palette-text-secondary);
}

.device-icon.is-current {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

.device-name {
    font-weight: 600;
}

.device-meta {
    display: none;
    font-size: 0.8125rem;
}

@media (max-width: 599.98px) {
    .device-meta {
        display: block;
    }

    .sessions-table td:first-child,
    .sessions-table th:first-child {
        width: 44px !important;
        padding-right: 0;
    }
}

/* Switch rows (admin settings): the label is the row's title, the switch sits on the right edge */
.settings-row.is-switch {
    display: block;
}

.settings-row.is-switch .settings-row-hint {
    max-width: 44rem;
    padding-right: 4rem;
}

.settings-switch,
.settings-switch .mud-switch {
    width: 100%;
}

.settings-switch .mud-switch {
    justify-content: space-between;
    margin: 0;
}

.settings-switch .mud-switch-label-text,
.settings-switch .mud-switch > p {
    font-weight: 650;
}

/* The GB field below a switch; the switch itself is a mud-input-control too and must keep the full width */
.settings-row.is-switch .mud-input-control:not(.settings-switch) {
    margin-top: 0.5rem;
    max-width: 14rem;
}

/* Admin user list */
.user-name {
    font-weight: 600;
}

.person-avatar.is-disabled {
    opacity: 0.45;
}

/* Open invitations above the accounts: one quiet row each, withdrawing on the right */
.invitation-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem 0.875rem 1.25rem;
}

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

.invitation-icon {
    flex: none;
    color: var(--mud-palette-text-secondary);
}

.invitation-text {
    flex: 1;
    min-width: 0;
}

/* The invitation page: who invites, beside the welcome */
.invite-from {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-usage-inline {
    display: none;
}

@media (max-width: 599.98px) {
    .user-usage-inline {
        display: block;
    }

    .users-table td:first-child,
    .users-table th:first-child {
        width: 44px !important;
        padding-right: 0;
    }
}

/* Card titles on the status page, as strong as the setting titles */
.card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.4;
}

/* For screen readers only */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* MudSwitch sizes its label to the text; in setting rows it spans the row so the switch reaches the right edge */
.settings-switch label,
.settings-switch .mud-input-control-input-container {
    display: flex;
    width: 100%;
}

/* The text takes the free space, never the track (with the label at the start, the track comes first in the DOM) */
.settings-switch .mud-switch-span {
    flex: none;
}

.settings-switch .mud-switch-label-text,
.settings-switch .mud-switch > p {
    flex: 1;
}

/* The page of an upload link (Shared/UploadRequest.razor). The drop target is the page's one big thing: a
   dashed field in a faint wash of the accent that fills in when files are dragged over the window. Its file
   input covers it, so a click or tap opens the picker and a drop lands there. */
.request-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.request-head-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

.request-drop {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    margin-top: 1.5rem;
    padding: 2.5rem 1.5rem 2.25rem;
    border: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
    border-radius: 20px;
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
    text-align: center;
    transition: background-color 160ms ease-out, border-color 160ms ease-out;
}

.request-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.request-drop:hover,
body.is-dragging-files .request-drop:not(.is-busy) {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
}

.request-drop:focus-within {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

.request-drop.is-busy input[type="file"] {
    cursor: default;
}

.request-drop.is-busy {
    border-style: solid;
    border-color: var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.request-drop .request-drop-icon {
    font-size: 2.75rem;
    color: var(--mud-palette-primary);
    margin-bottom: 0.25rem;
}

.request-drop.is-busy .request-drop-icon {
    color: var(--mud-palette-text-secondary);
}

.request-drop-title {
    font-size: 1.0625rem;
    font-weight: 650;
}

.request-drop-hint {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

/* Above a shared folder's listing: one line instead of a field */
.request-drop.is-compact {
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.875rem 1.25rem;
    border-radius: var(--mud-default-borderradius);
}

.request-drop.is-compact .request-drop-icon {
    font-size: 1.75rem;
    margin-bottom: 0;
}

.request-drop.is-compact .request-drop-title {
    font-size: 0.9375rem;
}

.request-drop.is-compact .request-drop-button {
    margin-top: 0;
    padding: 0.375rem 1rem;
}

@media (max-width: 599.98px) {
    .request-drop.is-compact .request-drop-hint {
        display: none;
    }
}

/* What a new link allows (Shared/ShareDialog.razor): a segmented switch of three words; native radios
   underneath, so arrow keys and screen readers work as with any radio group */
.link-modes {
    margin: 0.75rem 0 0;
    padding: 0;
    border: none;
}

.link-modes-legend {
    margin-bottom: 0.375rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.link-mode-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-gray);
}

.link-mode {
    flex: 1 1 auto;
    position: relative;
    padding: 0.375rem 0.75rem;
    border-radius: calc(var(--mud-default-borderradius) - 2px);
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

.link-mode.is-selected {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: var(--mud-elevation-1);
}

.link-mode input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.link-mode:has(input:focus-visible) {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

@media (hover: none) and (pointer: coarse) {
    .request-drop .request-drop-drag {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .request-drop {
        transition: none;
    }
}

/* Looks like the page's button; the input above it takes the click */
.request-drop-button {
    margin-top: 0.375rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.request-summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0 0.5rem;
    font-weight: 600;
}

.request-summary .tabular {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.request-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 22rem;
    overflow-y: auto;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.request-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.request-item-icon {
    flex: none;
    color: var(--mud-palette-text-secondary);
}

.request-item-text {
    flex: 1;
    min-width: 0;
    display: grid;
}

.request-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
}

.request-item-meta {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.request-item.is-failed .request-item-meta {
    color: var(--mud-palette-error);
}

.request-item-state {
    flex: none;
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--mud-palette-primary);
}