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

/* Full-screen "something's saving" overlay - deliberately brief/unobtrusive for the
   common case (a normal note autosave completes in milliseconds) but gives clear,
   unambiguous feedback for anything that takes a noticeable moment (e.g. saving a large
   paste), rather than leaving the user wondering whether the app has gotten stuck. */
.premfs-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background-color: rgba(15, 22, 38, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: premfs-fade-in 0.15s ease;
}

.premfs-loading-mark {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.25);
}

@keyframes premfs-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* MudDrawer normally offsets itself below the fixed AppBar via JS measuring its height,
   but that doesn't complete correctly once the drawer lives in its own separate
   interactive island (needed so the hamburger toggle works) - so pin it directly to
   our AppBar's known fixed height instead. */
.mud-drawer.mud-drawer-clipped-always {
    top: 64px !important;
    height: calc(100% - 64px) !important;
}

/* ClientSearchBox lives directly on the dark navy AppBar. The outlined variant has no
   fill of its own, so its default dark input text was rendering on the dark AppBar
   background with almost no contrast ("can't see what I typed"). Force a light pill
   background with dark text so it reads regardless of where it's embedded. */
.premfs-search-box .mud-input-outlined {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
}

.premfs-search-box .mud-input-outlined fieldset {
    border-color: transparent;
}

.premfs-search-box .mud-input-outlined:hover fieldset,
.premfs-search-box .mud-input-outlined.mud-shrink fieldset {
    border-color: var(--mud-palette-secondary);
}

.premfs-search-box input,
.premfs-search-box .mud-input-adornment .mud-icon-root {
    color: #0f1626 !important;
}

/* ---- General modernization pass -------------------------------------------------
   Softer motion, more consistent depth-on-hover, and a clearer active nav state -
   applied globally so every page (not just the ones with bespoke styling below)
   picks up the same more contemporary feel. */

.mud-paper, .mud-button-root, .mud-chip, .mud-table-row {
    transition: box-shadow 0.18s ease, transform 0.18s ease, background-color 0.15s ease;
}

/* Clickable "card" surfaces (client rows, general-note tiles) lift slightly on hover
   rather than just changing background color, which reads as flatter/older. */
.premfs-card-hover {
    cursor: pointer;
}

.premfs-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--mud-elevation-4);
}

.mud-table-row:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

.mud-nav-link {
    border-radius: 8px;
    margin: 2px 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* A filled pill in the brand navy (echoing the AppBar) plus a left accent bar reads as a
   clearly current, modern nav state rather than MudNavLink's own faint default tint. */
.mud-nav-link.active {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    position: relative;
}

.mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary-text) !important;
}

.mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background-color: var(--mud-palette-secondary);
}

/* Login screen: a two-panel layout - a navy brand "hero" on the left echoing the AppBar
   color, and a clean white form panel on the right - rather than a small card floating on
   a plain page. The hero collapses away below a tablet-ish width, replaced by the small
   inline "mark" header at the top of the form panel instead. */
.premfs-login-page {
    min-height: 100vh;
    display: flex;
}

.premfs-login-hero {
    position: relative;
    flex: 0 0 44%;
    max-width: 560px;
    background: linear-gradient(160deg, #00154d 0%, #001c66 60%, #061c4d 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    overflow: hidden;
}

.premfs-login-hero-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 15%, rgba(251, 188, 65, 0.18), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(251, 188, 65, 0.10), transparent 45%),
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.08), transparent 35%);
}

.premfs-login-hero-content {
    position: relative;
    max-width: 380px;
}

.premfs-login-hero-mark {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background-color: rgba(251, 188, 65, 0.16);
    border: 1px solid rgba(251, 188, 65, 0.35);
    color: #fbbc41;
    display: flex;
    align-items: center;
    justify-content: center;
}

.premfs-login-hero-tagline {
    color: rgba(255, 255, 255, 0.72);
}

.premfs-login-hero-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.premfs-login-hero-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.premfs-login-hero-feature .mud-icon-root {
    color: #fbbc41;
    flex-shrink: 0;
}

.premfs-login-form-panel {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: var(--mud-palette-background);
}

.premfs-login-form-inner {
    width: 100%;
    max-width: 380px;
}

.premfs-login-mobile-header {
    display: none;
    align-items: center;
    margin-bottom: 2rem;
}

.premfs-login-mark {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.premfs-login-submit {
    height: 46px;
    box-shadow: 0 8px 20px rgba(0, 21, 77, 0.18);
}

@media (max-width: 900px) {
    .premfs-login-hero {
        display: none;
    }

    .premfs-login-mobile-header {
        display: flex;
    }
}

.premfs-client-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

.premfs-drop-target {
    outline: 2px dashed var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);
}

/* Modern document tree: rounded hover rows, actions that fade in on hover instead of
   always-on icon clutter, and a rotating chevron instead of static folder icons alone. */
.premfs-tree-root {
    padding: 4px;
}

.premfs-tree-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--mud-palette-lines-default);
}

.premfs-tree-row {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.premfs-tree-folder {
    cursor: pointer;
}

.premfs-tree-row:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.premfs-tree-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.premfs-tree-children {
    margin-left: 22px;
    padding-left: 12px;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.premfs-chevron {
    transition: transform 0.15s ease;
    opacity: 0.6;
}

.premfs-chevron-open {
    transform: rotate(90deg);
}

.premfs-tree-actions {
    display: flex;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.premfs-tree-row:hover .premfs-tree-actions {
    opacity: 1;
}

@media (max-width: 600px) {
    .premfs-tree-actions {
        opacity: 1;
    }
}

.premfs-diff-added {
    background-color: #e6ffed;
    color: #22863a;
}

.premfs-diff-removed {
    background-color: #ffeef0;
    color: #b31d28;
    text-decoration: line-through;
}

.premfs-diff-unchanged {
    color: var(--mud-palette-text-secondary);
}

.premfs-diff-scroll {
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px 2px;
}

.note-content {
    font-size: 0.875rem;
}

.note-content h2 {
    font-size: 1.25rem;
    margin: 0.5em 0;
}

.note-content h3 {
    font-size: 1.1rem;
    margin: 0.5em 0;
}

.note-content p {
    margin: 0.25em 0;
}

.note-content ul, .note-content ol {
    margin: 0.25em 0;
    padding-left: 1.5em;
}

/* Note editor: a toolbar "ribbon" above a distinct white page sitting on a slightly
   darker canvas. */
.rte-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-gray);
}

.rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    top: 0;
    z-index: 1;
}

.rte-toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.rte-page {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
}

/* The free-form canvas: a white "page" that hosts independently-positioned text boxes,
   like OneNote's own page surface. Clicking empty canvas space (handled in JS) drops a
   new text box wherever you clicked. */
.rte-canvas {
    position: relative;
    background-color: var(--mud-palette-surface);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    outline: none;
    cursor: text;
}

.rte-canvas:empty:before {
    content: attr(data-placeholder);
    color: var(--mud-palette-text-secondary);
    position: absolute;
    top: 20px;
    left: 24px;
    pointer-events: none;
}

.rte-textbox {
    position: absolute;
    min-width: 120px;
    min-height: 1.6em;
    padding: 10px 10px 8px 10px;
    border: 1px dashed transparent;
    border-radius: 4px;
    outline: none;
    font-size: 1rem;
    line-height: 1.6;
    cursor: text;
}

.rte-textbox:hover {
    border-color: var(--mud-palette-lines-default);
}

.rte-textbox:focus {
    border: 1px solid var(--mud-palette-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.rte-textbox.rte-dragging {
    opacity: 0.85;
}

/* A small resize handle at the bottom-right corner, visible only when hovering near it. */
.rte-textbox:hover::after {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 10px;
    height: 10px;
    cursor: nwse-resize;
    border-right: 2px solid var(--mud-palette-lines-inputs);
    border-bottom: 2px solid var(--mud-palette-lines-inputs);
}

/* A visible drag handle across the top edge, matching the 14px hit-zone the JS drag logic
   actually uses (see richTextEditor.js's rteAttachBoxBehavior). Without this the drag zone
   was invisible - only a cursor change on hover - which made it very hard to discover. */
.rte-textbox:hover::before {
    content: "\00b7\00b7\00b7\00b7\00b7\00b7";
    position: absolute;
    top: 0;
    left: 0;
    right: 10px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 3px;
    font-size: 14px;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    background-color: rgba(0, 21, 77, 0.05);
    border-radius: 4px 4px 0 0;
    cursor: move;
}

.rte-textbox h2 {
    font-size: 1.5rem;
    margin: 0.6em 0 0.3em;
}

.rte-textbox h3 {
    font-size: 1.2rem;
    margin: 0.6em 0 0.3em;
}

.rte-textbox p {
    margin: 0.4em 0;
}

.rte-table {
    border-collapse: collapse;
    margin: 0.4em 0;
}

.rte-table td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 6px 12px;
    min-width: 60px;
}

.rte-swatch {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
}