#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.app-boot {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--boot-bg, #f4f5f8);
    font-family: 'IBM Plex Sans', Inter, Roboto, -apple-system, Arial, sans-serif;
}

.app-spinner {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(127, 127, 127, 0.25);
    border-top-color: var(--boot-accent, #4f46e5);
    border-radius: 50%;
    animation: app-spin 0.8s linear infinite;
}

.app-boot-text {
    color: var(--boot-text, #646e7d);
    font-size: 0.9rem;
}

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

/* Mail page inner layout (works in tandem with the position: fixed above) */
.mail-page {
    display: flex;
    flex-direction: column;
}
.mail-topbar { flex: 0 0 auto; }
/* MudDivider defaults to `flex: 1 0 auto` — designed for flex rows where
   "fill" means horizontal width. Inside our flex column it grows vertically
   and shoves the body off-screen. Pin it to its intrinsic 1px height. */
.mail-page > hr.mud-divider { flex: 0 0 auto; }
.mail-body {
    flex: 1 1 auto;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.mail-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mail-col-messages { flex: 0 0 420px; }
.mail-col-message { flex: 1 1 auto; min-width: 0; }

.mail-search { flex: 0 0 auto; }
.mail-bulk-bar {
    flex: 0 0 auto;
    background: var(--mud-palette-primary-hover);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mail-message-list, .mail-message-view {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Message rows */
.msg-row {
    display: block;
    width: 100%;
    position: relative;
}
.msg-row .msg-attach {
    position: absolute;
    right: 0;
    top: 0;
}
.msg-row-unread { border-left: 3px solid var(--mud-palette-primary); }
.msg-row-read { border-left: 3px solid transparent; }
.msg-row-check { flex-shrink: 0; margin-right: 4px; }
.msg-row-check .mud-checkbox { padding: 0; }

/* Folder tree */
.folder-tree { padding: 2px 0; }
.folder-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    min-height: 24px;
    line-height: 1.1;
    cursor: pointer;
    user-select: none;
    color: var(--mud-palette-text-primary);
    font-size: 0.82rem;
}
.folder-row:hover { background: var(--mud-palette-action-default-hover); }
.folder-row-selected {
    background: var(--mud-palette-table-hover);
    color: var(--mud-palette-primary);
}
.folder-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}
.folder-chev:hover { background: var(--mud-palette-divider); }
.folder-chev-empty { pointer-events: none; }
.folder-row .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }
.folder-row .mud-chip { height: 18px; min-height: 18px; font-size: 0.7rem; padding: 0 6px; }
.folder-name {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Folder rows inside the NavMenu */
.nav-folder-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    min-height: 26px;
    cursor: pointer;
    user-select: none;
    color: var(--mud-palette-drawer-text);
    font-size: 0.82rem;
}
.nav-folder-row:hover { background: var(--mud-palette-action-default-hover); }
.nav-folder-selected {
    background: var(--mud-palette-table-hover);
    color: var(--mud-palette-primary);
    border-left: 3px solid var(--mud-palette-primary);
}
.nav-folder-dropping {
    background: var(--mud-palette-primary-hover);
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: -2px;
}
.nav-folder-row .mud-icon-root { font-size: 16px; width: 16px; height: 16px; }
.nav-folder-badge {
    margin-left: auto;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: 9px;
    padding: 0 6px;
    font-size: 0.7rem;
    line-height: 16px;
}
.nav-folder-placeholder {
    padding: 12px 16px;
}

.nav-folder-spinner .mud-progress-circular-circle {
    color: var(--mud-palette-primary) !important;
}

/* Mail nav row — full-width MudNavLink for navigation to /mail, with the
   expand/collapse chevron overlaid on the right edge as a separate target.
   On /mail/* routes the link is rendered inert (.mail-nav-inert) — visually
   active but non-clickable, so re-clicking Mail doesn't kick the user back
   to Inbox from whatever folder they're viewing. */
.mail-nav-row { position: relative; }
.mail-nav-row .mail-expand-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
.mail-nav-inert {
    cursor: default;
    pointer-events: none;
}

/* Account row rendered as a parent nav item (like Documentation): mud-nav-link
   look, clickable to expand, with the chevron overlaid right via mail-expand-toggle.
   Reserve space on the right so a long email doesn't run under the chevron. */
.mail-account-link {
    cursor: pointer;
    padding-right: 36px;
}
.mail-account-link .mud-nav-link-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mail page — pinned to the viewport, ignoring MudMainContent padding/margin.
   The left edge follows --cortex-drawer-width, which drawer-resize.js keeps in
   sync with the actual rendered drawer width (and zeroes when the drawer
   toggles closed). MudBlazor's --mud-drawer-width-left is unusable here:
   it's set once from the static Width prop and never tracks user resize. */
.mail-page {
    position: fixed;
    top: var(--mud-appbar-height, 64px);
    bottom: 0;
    left: var(--cortex-drawer-width, 0px);
    right: 0;
    overflow: hidden;
    z-index: 1;
    transition: left 225ms cubic-bezier(0, 0, 0.2, 1);
}

/* Same fix for MudMainContent: override the drawer-width variable at the
   consumer so MudBlazor's `margin-left: var(--mud-drawer-width-left)` rule
   (applied via .mud-drawer-open-responsive-*-left) tracks the live width. */
.mud-main-content {
    --mud-drawer-width-left: var(--cortex-drawer-width, 280px);
}

/* Drawer resize handle — kept inside the drawer's bounding box so the
   handle never causes a horizontal scrollbar on the drawer itself.
   The handle's `position: absolute` anchors to the drawer's own
   `position: fixed` (set by MudBlazor); no extra `position` here. */
.mud-drawer,
.mud-drawer-content {
    overflow-x: hidden;
}
.cortex-drawer-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 100;
    background: transparent;
    transition: background-color 120ms ease;
}
.cortex-drawer-handle:hover {
    background: var(--mud-palette-primary);
    opacity: 0.4;
}

/* Density modes */
.density-compact .mud-list-item {
    padding-top: 2px;
    padding-bottom: 2px;
    min-height: 0;
}
.density-compact .msg-row-line1 .mud-typography-body2,
.density-compact .msg-row-line2 .mud-typography-body2 {
    font-size: 0.8rem;
    line-height: 1.25;
}
.density-compact .msg-row-line1 .mud-typography-caption {
    font-size: 0.7rem;
}
.density-compact .mud-divider { opacity: 0.4; }
.density-cozy .mud-list-item { padding-top: 6px; padding-bottom: 6px; }
.density-comfortable .mud-list-item { padding-top: 8px; padding-bottom: 8px; }
.preview-2lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.3;
}

/* Message view */
.msg-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
.msg-text {
    white-space: pre-wrap;
    padding: 16px;
    margin: 0;
    color: var(--mud-palette-text-primary);
}
.msg-body {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
}
.attachments-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.empty-state {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--mud-palette-text-secondary);
}

/* Split-page layouts (tasks / projects / companies) — mirror Mail.
   List left, detail right, both pinned to the viewport so they ignore
   MudMainContent padding. The base block is shared via the per-page
   classes below; each page declares its own wrapper class for clarity
   and so that .mail-page (unchanged) keeps its old selector chain. */
.tasks-page,
.projects-page,
.companies-page {
    position: fixed;
    top: var(--mud-appbar-height, 64px);
    bottom: 0;
    left: var(--cortex-drawer-width, 0px);
    right: 0;
    overflow: hidden;
    z-index: 1;
    transition: left 225ms cubic-bezier(0, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.tasks-topbar, .projects-topbar, .companies-topbar { flex: 0 0 auto; }
.tasks-page > hr.mud-divider,
.projects-page > hr.mud-divider,
.companies-page > hr.mud-divider { flex: 0 0 auto; }
.tasks-body, .projects-body, .companies-body {
    flex: 1 1 auto;
    display: flex;
    overflow: hidden;
    min-height: 0;
}
.tasks-col, .projects-col, .companies-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tasks-col-list, .projects-col-list, .companies-col-list { flex: 0 0 420px; }
.tasks-col-detail, .projects-col-detail, .companies-col-detail { flex: 1 1 auto; min-width: 0; }
/* Optional third column on the Tasks page: shows a doc preview when the user
   clicks a Document chip inside the task detail. Splits the remaining space
   roughly 50/50 with the task detail. */
.tasks-col-doc { flex: 1 1 0; min-width: 320px; }
.tasks-doc {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
.tasks-list, .tasks-detail,
.projects-list, .projects-detail,
.companies-list, .companies-detail {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Generic left-column card (used by TaskList, ProjectList, CompanyList) */
.list-card {
    padding: 9px 14px;
    border-bottom: 1px solid var(--mud-palette-divider);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    user-select: none;
}
.list-card:hover { background: var(--mud-palette-action-disabled-background); }
.list-card-selected {
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
    border-left: 3px solid var(--mud-palette-primary);
    padding-left: 11px;
}
.list-card-selected .list-card-title { color: var(--mud-palette-primary); }

/* Small status pill reused across list rows */
.mini-pill { font-size: .68rem; font-weight: 600; padding: 1px 7px; border-radius: 6px; text-transform: capitalize; }
.list-due { font-size: .72rem; color: var(--mud-palette-text-disabled); }
.list-card-line1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.list-card-title {
    flex: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-card-line2 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}
.list-card-shadow { opacity: 0.55; }
.list-card-shadow .list-card-title { text-decoration: line-through; }

/* Priority shown as a small filled circle. Title attribute keeps it
   accessible to screen readers / mouse hover for the name. */
.prio-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.prio-dot-urgent { background: var(--mud-palette-error); }
.prio-dot-high   { background: var(--mud-palette-warning); }
.prio-dot-normal { background: var(--mud-palette-info); }
.prio-dot-low    { background: var(--mud-palette-action-disabled); }

/* Entity tag — colored pill (project code, company code, etc).
   Background color comes from TagColor.For(code) inline; this class
   handles shape + text contrast. */
.entity-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    line-height: 1.5;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* Thread view */
.mail-message-view {
    display: flex;
    flex-direction: column;
}
.msg-header {
    flex: 0 0 auto;
    background: var(--mud-palette-surface);
    position: sticky;
    top: 0;
    z-index: 2;
}
.thread-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
/* Reply/RA/Forward sit inline with the message header; lay them out as a row
   so the icons don't stack vertically when wrapping. */
.thread-msg-actions { display: inline-flex; gap: 2px; flex-shrink: 0; }
.thread-message {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.thread-message:last-child { border-bottom: 0; }
.thread-collapsed { cursor: pointer; }
.thread-collapsed:hover { background: var(--mud-palette-action-default-hover); }
.thread-message-header {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
}
.thread-expanded .thread-message-header { background: var(--mud-palette-table-striped); }
.thread-expanded .msg-body-cell {
    height: 60vh;
    display: flex;
    background: #fff;
}
.thread-expanded .msg-body-cell .msg-iframe { flex: 1 1 auto; }
.min-width-0 { min-width: 0; }

/* Projects */
.mention { color: var(--mud-palette-primary); text-decoration: none; font-weight: 500; }
.mention:hover { text-decoration: underline; }
.comment-reply { margin-left: 32px; padding-left: 16px; border-left: 2px solid var(--mud-palette-divider); }
.comment-deleted { font-style: italic; color: var(--mud-palette-text-disabled); }
.notif-unread { background: var(--mud-palette-background-grey); }
.notif-item, .project-item { padding: 6px 8px; border-radius: 4px; transition: background 80ms ease; }
.notif-item:hover, .project-item:hover { background: var(--mud-palette-action-default-hover); }

/* Generic drag-to-resize splitter (see js/column-resize.js). Sits between two
   flex columns; resizes the column to its left. */
.cortex-splitter {
    flex: 0 0 6px;
    cursor: col-resize;
    background: transparent;
    position: relative;
    user-select: none;
}
.cortex-splitter::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--mud-palette-divider);
    transform: translateX(-50%);
}
.cortex-splitter:hover::before,
.cortex-splitter-dragging::before {
    width: 3px;
    background: var(--mud-palette-primary);
}

/* Tabs in the Tasks page doc preview panel (top of .tasks-col-doc). */
.doc-tabs {
    flex: 0 0 auto;
    background: var(--mud-palette-background-grey);
    gap: 4px;
    padding: 4px 6px;
    overflow-x: auto;
    min-height: 36px;
}
.doc-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 8px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    font-size: 0.85em;
    max-width: 220px;
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
}
.doc-tab:hover { background: var(--mud-palette-action-default-hover); }
.doc-tab-active {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-divider);
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}
.doc-tab-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.doc-tab-close { padding: 0; }
.doc-tab-close .mud-icon-root { font-size: 0.95rem; }

/* ProjectDetail tasks side-by-side layout (list left, detail right). */
.project-tasks-area {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 0;
}
.project-tasks-list {
    flex: 0 0 25%;
    min-width: 0;
    overflow: hidden;
}
.project-tasks-area-solo .project-tasks-list { flex: 1 1 auto; }
.project-tasks-detail {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.project-detail-tabs { margin-bottom: 0; padding: 6px 8px; align-items: center; flex-wrap: nowrap; overflow-x: auto; }
.project-detail-tabs .pv-tab { padding: 5px 8px 5px 10px; white-space: nowrap; }
.pv-tab-text { overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.pv-tab-close-wrap { display: inline-flex; }
.pv-tab-close { padding: 1px !important; }
.pv-tab-close .mud-icon-root { font-size: .9rem; }
.project-tasks-detail-body { max-height: 72vh; overflow: auto; padding: 8px; }
.tasks-drop-zone { display: flex; flex-direction: column; gap: 5px; min-height: 30px; }
.task-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 8px;
    background: var(--mud-palette-surface);
}
.task-row:hover { border-color: var(--mud-palette-primary); }
.task-row-selected { border-color: var(--mud-palette-primary); }
.task-row-title { flex: 1; min-width: 0; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row-assignee { font-size: .74rem; color: var(--mud-palette-text-secondary); flex-shrink: 0; }
.task-row-grip { display: inline-flex; align-items: center; cursor: grab; color: var(--mud-palette-text-disabled); flex-shrink: 0; margin: -4px 0 -4px -2px; }
.task-row-grip:active { cursor: grabbing; }
.task-row-grip .mud-icon-root { font-size: 1.05rem; }

/* Markdown render: restore browser defaults that MudBlazor's CSS reset wipes. */
.markdown-body { line-height: 1.55; }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    margin: 1.5em 0 0.5em;
    line-height: 1.25;
    font-weight: 600;
}
.markdown-body h1 { font-size: 1.85em; border-bottom: 1px solid var(--mud-palette-divider); padding-bottom: 0.3em; }
.markdown-body h2 { font-size: 1.5em;  border-bottom: 1px solid var(--mud-palette-divider); padding-bottom: 0.3em; }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1.1em; }
.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre { margin: 0 0 1em; }
.markdown-body ul,
.markdown-body ol { padding-left: 2em; }
.markdown-body ul ul, .markdown-body ul ol,
.markdown-body ol ul, .markdown-body ol ol { margin: 0.25em 0 0.5em; }
.markdown-body li { margin: 0.2em 0; }
.markdown-body li > p { margin: 0.25em 0; }
.markdown-body blockquote {
    padding: 0 1em;
    border-left: 4px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-secondary);
}
.markdown-body code {
    padding: 0.1em 0.35em;
    background: var(--mud-palette-background-grey);
    border-radius: 3px;
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
}
.markdown-body pre {
    padding: 0.85em 1em;
    background: var(--mud-palette-background-grey);
    border-radius: 6px;
    overflow-x: auto;
}
.markdown-body pre code { padding: 0; background: transparent; }
.markdown-body a { color: var(--mud-palette-primary); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body img { max-width: 100%; height: auto; }
.markdown-body table {
    border-collapse: collapse;
    width: auto;
}
.markdown-body table th,
.markdown-body table td {
    border: 1px solid var(--mud-palette-divider);
    padding: 0.4em 0.75em;
}
.markdown-body table th { background: var(--mud-palette-background-grey); font-weight: 600; }
.markdown-body hr { border: 0; border-top: 1px solid var(--mud-palette-divider); margin: 1.5em 0; }

.rte-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:2px; border:1px solid var(--mud-palette-lines-inputs); border-bottom:none; border-radius:4px 4px 0 0; padding:2px 4px; }
.rte-surface { min-height:220px; max-height:50vh; overflow:auto; border:1px solid var(--mud-palette-lines-inputs); border-radius:0 0 4px 4px; padding:10px 12px; font-size:0.9rem; line-height:1.5; outline:none; }
.rte-surface:focus { border-color: var(--mud-palette-primary); }
.rte-surface blockquote { margin:0 0 0 .8ex; border-left:2px solid var(--mud-palette-lines-default); padding-left:1ex; color:var(--mud-palette-text-secondary); }

/* Mail account dashboard — three-pane worklist (own classes so the shared
   Mail.razor inbox columns are untouched). */
.macc-list { flex: 0 0 340px; border-right: 1px solid var(--mud-palette-lines-default); overflow-y: auto; justify-content: flex-start; }
.macc-list .mud-list { display: block; }
/* MudDivider defaults to flex: 1 0 auto, which grows inside our flex columns and
   pushes the list to the bottom. Pin dividers inside the dashboard panes. */
.macc-list hr.mud-divider, .macc-msg hr.mud-divider { flex: 0 0 auto; }
.macc-msg { flex: 1 1 auto; min-width: 0; overflow-y: auto; }
.macc-plan { flex: 0 0 360px; border-left: 1px solid var(--mud-palette-lines-default); overflow-y: auto; }
.mail-acc-row-sel { background: var(--mud-palette-action-default-hover); }

/* ===================== App shell (design system) ===================== */
/* Thin top bar */
.cortex-topbar {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.cortex-topbar-heading {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    font-size: 1rem;
}
.cortex-crumb-muted { color: var(--mud-palette-text-secondary); }
.cortex-crumb-sep { color: var(--mud-palette-text-disabled); }
.cortex-crumb-current { font-weight: 600; color: var(--mud-palette-text-primary); }
.cortex-new-btn { text-transform: none; border-radius: 9px; box-shadow: none; font-weight: 600; }
.cortex-topbar-menu { display: none; }
/* Top-bar icon buttons: muted gray like the design, not near-black */
.cortex-topbar .mud-icon-button { color: var(--mud-palette-text-secondary); }
.cortex-topbar .mud-icon-button:hover { color: var(--mud-palette-text-primary); }

/* Sidebar shell */
.cortex-sidebar {
    background: var(--mud-palette-surface) !important;
    border-right: 1px solid var(--mud-palette-lines-default);
}
.cortex-sidebar.mud-drawer { display: flex; flex-direction: column; }
.cortex-sidebar .mud-drawer-content,
.cortex-sidebar > .mud-drawer-content { flex: 1 1 auto; min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.cortex-sidebar-inner { flex: 1 1 auto; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cortex-sidebar-nav { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 2px 6px; }

/* Workspace switcher */
.cortex-workspace { padding: 12px 12px 6px; }
.cortex-workspace-menu, .cortex-workspace-menu .mud-menu-activator { width: 100%; }
.cortex-workspace-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: 10px; cursor: pointer; width: 100%;
    transition: background .12s ease;
}
.cortex-workspace-row:hover { background: var(--mud-palette-action-disabled-background); }
.cortex-workspace-logo {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    display: flex; align-items: center; justify-content: center;
}
.cortex-workspace-text { flex: 1; min-width: 0; text-align: left; }
.cortex-workspace-name {
    font-weight: 600; font-size: .95rem; color: var(--mud-palette-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cortex-workspace-sub { font-size: .72rem; color: var(--mud-palette-text-secondary); }
.cortex-workspace-chevron { color: var(--mud-palette-text-disabled); flex-shrink: 0; }

/* Search box */
.cortex-search {
    display: flex; align-items: center; gap: 8px; width: calc(100% - 24px);
    margin: 6px 12px 8px; padding: 8px 10px;
    background: var(--mud-palette-action-disabled-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px; cursor: pointer; color: var(--mud-palette-text-secondary);
    font: inherit; text-align: left;
}
.cortex-search:hover { border-color: var(--mud-palette-primary); }
.cortex-search-icon { color: var(--mud-palette-text-disabled); }
.cortex-search-text { flex: 1; font-size: .85rem; }
.cortex-search-kbd {
    font-family: 'IBM Plex Mono', monospace; font-size: .72rem;
    color: var(--mud-palette-text-disabled);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 5px;
    padding: 0 6px; line-height: 1.4;
}

/* Nav links inside the new sidebar — inset pill (not full-row), hover/active */
.cortex-sidebar-nav .mud-nav-link {
    border-radius: 7px;
    margin: 1px 6px;
    width: auto;
}
.cortex-sidebar-nav .mud-nav-link:hover {
    background: var(--mud-palette-action-disabled-background);
}
.cortex-sidebar-nav .mud-nav-link.active {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 600;
}
.cortex-sidebar-nav .mud-nav-link.active .mud-nav-link-icon { color: var(--mud-palette-primary); }

/* User card at the bottom */
.cortex-sidebar-user {
    flex-shrink: 0; display: flex; align-items: center; gap: 6px;
    padding: 10px 12px; border-top: 1px solid var(--mud-palette-lines-default);
}
.cortex-user-menu { flex: 1; min-width: 0; }
.cortex-user-menu .mud-menu-activator { width: 100%; }
.cortex-user-row {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 6px; border-radius: 10px; cursor: pointer; transition: background .12s ease;
}
.cortex-user-row:hover { background: var(--mud-palette-action-disabled-background); }
.cortex-user-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 600;
}
.cortex-user-text { flex: 1; min-width: 0; text-align: left; }
.cortex-user-name {
    font-weight: 600; font-size: .85rem; color: var(--mud-palette-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cortex-user-sub { font-size: .72rem; color: var(--mud-palette-text-secondary); }

@media (max-width: 720px) {
    .cortex-topbar-menu { display: inline-flex; }
}

/* Sidebar nav section labels + tree states */
.cortex-nav-section {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    padding: 14px 12px 4px;
}
.cortex-nav-loading { display: flex; justify-content: center; padding: 10px 0; }
.cortex-nav-empty {
    font-size: .78rem;
    color: var(--mud-palette-text-disabled);
    padding: 4px 0 4px 46px;
}

/* ===================== Sidebar nav density (match design) ===================== */
.cortex-sidebar-nav .mud-nav-link,
.cortex-sidebar-nav .mud-nav-group > .mud-nav-link {
    min-height: 32px;
    padding: 5px 10px;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.2;
}
.cortex-sidebar-nav .mud-nav-link .mud-nav-link-icon {
    min-width: 18px;
    width: 18px;
    font-size: 1.05rem;
    margin-right: 9px;
}
.cortex-sidebar-nav .mud-navmenu { padding: 0; }

/* ----- Legal entities custom tree ----- */
.le-company {
    display: flex; align-items: center; gap: 1px;
    margin: 0 6px; padding: 0 4px 0 0; border-radius: 6px;
    user-select: none;
}
.le-company:hover { background: var(--mud-palette-action-disabled-background); }
.le-chevron-btn {
    display: flex; align-items: center; justify-content: center;
    width: 18px; height: 24px; flex-shrink: 0;
    background: none; border: 0; padding: 0; cursor: pointer; border-radius: 5px;
}
.le-chevron { color: var(--mud-palette-text-disabled); transition: transform .15s ease; }
.le-company.expanded .le-chevron { transform: rotate(90deg); }
.le-company-link {
    display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0;
    padding: 3px 4px; font-size: .8rem; font-weight: 500; color: var(--mud-palette-text-primary);
}
.le-company-icon { font-size: .95rem !important; color: var(--mud-palette-text-secondary); flex-shrink: 0; }
.le-company-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.le-company-count { font-size: .7rem; color: var(--mud-palette-text-disabled); }

.le-projects { margin: 0 6px 2px 16px; padding-left: 8px; border-left: 1px solid var(--mud-palette-lines-default); }
.le-project-node { display: flex; align-items: center; gap: 1px; border-radius: 6px; }
.le-project-node:hover { background: var(--mud-palette-action-disabled-background); }
.le-project-node.expanded .le-chevron { transform: rotate(90deg); }
.le-project-link {
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
    padding: 3px 6px 3px 2px; font-size: .79rem; color: var(--mud-palette-text-secondary);
}
.le-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.le-project-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.le-views { margin: 0 0 2px 17px; padding-left: 8px; border-left: 1px solid var(--mud-palette-lines-default); }
.le-view {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 8px; margin: 1px 0; border-radius: 6px;
    font-size: .78rem; color: var(--mud-palette-text-secondary); cursor: pointer;
}
.le-view:hover { background: var(--mud-palette-action-disabled-background); }
.le-view.active {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary); font-weight: 600;
}
.le-view-icon { font-size: .95rem !important; flex-shrink: 0; }
.le-view.active .le-view-icon { color: var(--mud-palette-primary); }
.le-empty { font-size: .78rem; color: var(--mud-palette-text-disabled); padding: 4px 8px; }

/* ===================== Dashboard ===================== */
.dash { padding: 28px 32px 40px; max-width: 1180px; }
.dash-date {
    font-family: 'IBM Plex Mono', monospace; font-size: .8rem;
    color: var(--mud-palette-text-disabled); text-transform: uppercase; letter-spacing: .04em;
}
.dash-greeting { margin: 6px 0 4px; font-size: 2rem; font-weight: 700; letter-spacing: -.02em; color: var(--mud-palette-text-primary); }
.dash-sub { margin: 0 0 24px; font-size: 1rem; color: var(--mud-palette-text-secondary); }

.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card {
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px; padding: 18px 20px;
}
.stat-head { display: flex; align-items: center; justify-content: space-between; }
.stat-label { font-size: .85rem; font-weight: 500; color: var(--mud-palette-text-secondary); }
.stat-icon { opacity: .9; }
.stat-value { font-size: 2.1rem; font-weight: 700; line-height: 1.1; margin: 8px 0 2px; color: var(--mud-palette-text-primary); }
.stat-caption { font-size: .78rem; color: var(--mud-palette-text-disabled); }
.stat-accent .stat-icon { color: var(--mud-palette-primary); }
.stat-blue .stat-icon { color: var(--mud-palette-info); }
.stat-red .stat-icon { color: var(--mud-palette-error); }
.stat-green .stat-icon { color: var(--mud-palette-success); }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-card {
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px; padding: 18px 20px;
}
.dash-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dash-card-title { font-size: 1.05rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.dash-card-link { font-size: .82rem; font-weight: 600; color: var(--mud-palette-primary); }
.dash-card-link:hover { text-decoration: underline; }
.dash-loading { display: flex; justify-content: center; padding: 20px 0; }
.dash-empty { font-size: .88rem; color: var(--mud-palette-text-secondary); display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }

.dash-project { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-radius: 9px; cursor: pointer; }
.dash-project:hover { background: var(--mud-palette-action-disabled-background); }
.dash-project-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dash-project-main { flex: 1; min-width: 0; }
.dash-project-name { font-size: .9rem; font-weight: 600; color: var(--mud-palette-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-project-meta { font-size: .76rem; color: var(--mud-palette-text-disabled); }
.dash-progress { display: flex; align-items: center; gap: 8px; width: 120px; flex-shrink: 0; }
.dash-progress-track { flex: 1; height: 6px; border-radius: 4px; background: var(--mud-palette-action-disabled-background); overflow: hidden; }
.dash-progress-fill { height: 100%; border-radius: 4px; background: var(--mud-palette-primary); }
.dash-progress-pct { font-size: .76rem; color: var(--mud-palette-text-secondary); width: 34px; text-align: right; }
.dash-chip { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
.chip-green { color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); }
.chip-amber { color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); }
.chip-muted { color: var(--mud-palette-text-secondary); background: var(--mud-palette-action-disabled-background); }

.dash-due { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-radius: 9px; cursor: pointer; }
.dash-due:hover { background: var(--mud-palette-action-disabled-background); }
.dash-due-check { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--mud-palette-lines-default); flex-shrink: 0; }
.dash-due-main { flex: 1; min-width: 0; }
.dash-due-title { font-size: .9rem; font-weight: 500; color: var(--mud-palette-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-due-meta { font-size: .76rem; color: var(--mud-palette-text-disabled); }
.dash-prio { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-prio-high { background: var(--mud-palette-error); }
.dash-prio-medium { background: var(--mud-palette-warning); }
.dash-prio-low { background: var(--mud-palette-success); }

@media (max-width: 960px) {
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
    .dash-grid { grid-template-columns: 1fr; }
}

/* ===================== Global compact density (match design) ===================== */
/* Single lever: scale the rem base down from 16px. Tightens MudBlazor typography
   and every rem-based internal padding app-wide. The landing uses fixed px and is
   unaffected. Bump this value if it reads too small. */
html { font-size: var(--cortex-zoom-size, 14px); }

/* Sentence-case buttons (design uses no uppercase) + tighter control heights */
.mud-button-root { text-transform: none; }
.mud-button-root.mud-button-filled,
.mud-button-root.mud-button-outlined,
.mud-button-root.mud-button-text { padding-top: 6px; padding-bottom: 6px; }

/* Denser lists, tables, inputs, menus */
.mud-list-item { padding-top: 6px; padding-bottom: 6px; }
.mud-table-cell { padding: 7px 12px; }
.mud-table-dense .mud-table-cell { padding: 4px 10px; }
.mud-menu-list .mud-list-item { padding-top: 5px; padding-bottom: 5px; }
.mud-input.mud-input-text { font-size: .875rem; }

/* Cards/papers a touch tighter by default */
.mud-paper.pa-4 { padding: 14px !important; }

/* ===================== Appearance control (top bar) ===================== */
.appearance-panel { padding: 14px 16px; min-width: 220px; }
.appearance-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--mud-palette-text-disabled); margin-bottom: 10px;
}
.appearance-swatches { display: flex; gap: 10px; margin-bottom: 18px; }
.appearance-swatch {
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; padding: 0;
    box-shadow: 0 0 0 2px var(--mud-palette-surface) inset;
}
.appearance-swatch.active { border-color: currentColor; }
.appearance-zoom { display: flex; align-items: center; gap: 8px; }
.appearance-zoom-btn {
    width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary); display: flex; align-items: center; justify-content: center;
}
.appearance-zoom-btn:hover { background: var(--mud-palette-action-disabled-background); }
.appearance-zoom-pct {
    flex: 1; text-align: center; font-family: 'IBM Plex Mono', monospace;
    font-size: .85rem; font-weight: 600; cursor: pointer; border: 0; background: none;
    color: var(--mud-palette-text-primary);
}

.appearance-anchor { position: relative; display: inline-flex; }
.appearance-overlay { position: fixed; inset: 0; z-index: 1300; background: transparent; }
.appearance-pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 1301;
    min-width: 232px; padding: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
}
/* Make sure the top bar / toolbar don't clip the dropdown */
.cortex-topbar, .cortex-topbar .mud-toolbar { overflow: visible; }

/* ===================== Task detail (two-column) ===================== */
.task-detail { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; padding: 24px; }
.task-detail-main { flex: 3 1 360px; min-width: 0; }
.task-detail-props {
    flex: 1 1 260px; min-width: 240px; max-width: 320px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px; padding: 16px 18px; position: sticky; top: 12px;
}

.task-title-row { display: flex; align-items: flex-start; gap: 6px; }
.task-title { margin: 0; flex: 1; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--mud-palette-text-primary); }

.task-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.task-pill { font-size: .76rem; font-weight: 600; padding: 3px 10px; border-radius: 7px; text-transform: capitalize; }
.task-pill-code { font-family: 'IBM Plex Mono', monospace; text-transform: none; color: var(--mud-palette-text-secondary); background: var(--mud-palette-action-disabled-background); }
.pill-muted { color: var(--mud-palette-text-secondary); background: var(--mud-palette-action-disabled-background); }
.pill-blue { color: var(--mud-palette-info); background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent); }
.pill-green { color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); }
.pill-amber { color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); }
.pill-red { color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent); }

.task-section-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--mud-palette-text-disabled); margin: 20px 0 8px;
}
.task-detail-props .task-section-label:first-child { margin-top: 0; }
.task-desc { font-size: .92rem; line-height: 1.6; color: var(--mud-palette-text-primary); white-space: pre-wrap; }
.task-desc-empty { color: var(--mud-palette-text-disabled); font-style: italic; }

.prop-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; }
.prop-key { font-size: .82rem; color: var(--mud-palette-text-secondary); }
.prop-val { font-size: .85rem; font-weight: 500; color: var(--mud-palette-text-primary); text-align: right; }

/* ===================== Linked items list (design rows) ===================== */
.link-list { display: flex; flex-direction: column; gap: 8px; }
.link-row {
    display: flex; align-items: center; gap: 11px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 11px;
    padding: 9px 11px; cursor: pointer; background: var(--mud-palette-surface);
}
.link-row:hover { border-color: var(--mud-palette-primary); }
.link-icon {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.link-main { flex: 1; min-width: 0; }
.link-title {
    font-size: .85rem; font-weight: 500; color: var(--mud-palette-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.link-meta { font-size: .72rem; color: var(--mud-palette-text-disabled); }
.link-remove { flex-shrink: 0; opacity: 0; transition: opacity .12s ease; }
.link-row:hover .link-remove { opacity: 1; }
.link-add {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    background: none; border: 0; cursor: pointer; padding: 4px 2px;
    font-size: .82rem; font-weight: 600; color: var(--mud-palette-primary);
}

/* ===================== Mail message rows (design) ===================== */
.msg-lead { position: relative; width: 34px; height: 34px; flex-shrink: 0; margin-right: 11px; margin-top: 2px; }
.msg-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 600; color: #fff;
}
.msg-check {
    position: absolute; inset: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--mud-palette-surface);
    opacity: 0; transition: opacity .1s ease;
}
.msg-check .mud-checkbox { padding: 0; }
.msg-row:hover .msg-check, .msg-row-checked .msg-check { opacity: 1; }
.msg-unread-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    margin-left: 8px; background: var(--mud-palette-primary);
}

/* Mail reading pane header */
.msg-header .mud-typography-h6 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }

/* ===================== Plan action cards (AI assistant) ===================== */
.plan-card { border-radius: 12px !important; }
.plan-action-icon {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.plan-action-kind { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.plan-action-title { line-height: 1.3; }

/* ===================== Detail surfaces (projects / companies / billing) ===================== */
/* Consistent rounded card on top of MudPaper/MudCard Outlined surfaces. */
.detail-card { border-radius: 14px !important; }
.detail-section-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--mud-palette-text-disabled); margin: 0 0 8px;
}

/* ===================== Plans list rows (match PlanDetail cards) ===================== */
.plan-list { display: flex; flex-direction: column; gap: 8px; max-width: 1100px; }
.plan-row {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 12px;
    padding: 11px 14px; cursor: pointer; background: var(--mud-palette-surface);
}
.plan-row:hover { border-color: var(--mud-palette-primary); }
.plan-row-icon {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}
.plan-row-main { flex: 1; min-width: 0; }
.plan-row-title {
    font-size: .9rem; font-weight: 600; color: var(--mud-palette-text-primary);
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plan-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.plan-row-date { font-size: .72rem; color: var(--mud-palette-text-disabled); }

/* ===================== Mail folder panel (in-page left column) ===================== */
.mail-col-folders {
    flex: 0 0 230px;
    min-width: 180px;
    overflow-y: auto;
    border-right: 1px solid var(--mud-palette-lines-default);
    padding-bottom: 12px;
}
.mail-col-folders .cortex-nav-section { padding: 14px 14px 4px; }
.mail-col-folders .mail-folder-list { padding: 0 6px; }
.mail-col-folders .folder-row { border-radius: 8px; padding: 3px 8px; min-height: 30px; gap: 6px; }
.mail-col-folders .folder-row-selected {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* ===================== Mail search bar (subtle filled look) ===================== */
.mail-search .mud-input-control .mud-input.mud-input-outlined {
    background: var(--mud-palette-background-grey);
    border-radius: 10px;
}
.mail-search .mud-input-control .mud-input-outlined-border { border-color: transparent; }
.mail-search .mud-input-control .mud-input.mud-input-outlined.mud-input-focused {
    background: var(--mud-palette-surface);
}
.mail-search .mud-input-control .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--mud-palette-primary);
}

/* ===================== Mail reading-pane reply bar (sticky bottom) ===================== */
.mail-reply-bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ===================== Mail compose dialog ===================== */
.mail-compose .mud-input.mud-input-outlined { border-radius: 10px; }
.mail-compose .mud-dialog-content { padding-top: 8px; }

/* ===================== Mail folder navigator (design) ===================== */
.mailbox-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 6px; }
.mailbox-title { font-size: 1.05rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.mailbox-add { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); border-radius: 8px; }
.mailbox-all {
    display: flex; align-items: center; gap: 10px;
    margin: 4px 8px 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
    font-size: .875rem; font-weight: 600; color: var(--mud-palette-text-primary);
}
.mailbox-all:hover { background: var(--mud-palette-action-disabled-background); }
.mailbox-all.active { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); color: var(--mud-palette-primary); }
.mailbox-all-icon { color: var(--mud-palette-primary); }
.mailbox-all-label { flex: 1; min-width: 0; }
.mailbox-count {
    background: var(--mud-palette-primary); color: #fff; border-radius: 8px;
    padding: 0 7px; font-size: .7rem; font-weight: 700; line-height: 1.6;
}

/* Mail account accordion header */
.mailbox-account {
    display: flex; align-items: center; gap: 6px;
    margin: 6px 8px 2px; padding: 5px 8px; border-radius: 7px; cursor: pointer; user-select: none;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}
.mailbox-account:hover { background: var(--mud-palette-action-disabled-background); color: var(--mud-palette-text-secondary); }
.mailbox-account-chevron { flex-shrink: 0; transition: transform .15s ease; }
.mailbox-account.expanded .mailbox-account-chevron { transform: rotate(90deg); }
.mailbox-account-email { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-primary); }

/* Mail account small initials icon */
.mailbox-account-avatar {
    width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .02em;
}

/* ===================== Mail summary panel ===================== */
.mail-summary-col { flex: 1 1 auto; min-width: 0; overflow-y: auto; }
.mail-summary { padding: 24px 28px; }
.mail-summary-head { margin-bottom: 20px; }
.mail-summary-title { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--mud-palette-text-primary); }
.mail-summary-sub { margin: 4px 0 0; font-size: .9rem; color: var(--mud-palette-text-secondary); }
.mail-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.mail-summary-card {
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px; padding: 16px 18px; cursor: pointer; transition: border-color .12s ease;
}
.mail-summary-card:hover { border-color: var(--mud-palette-primary); }
.mail-summary-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mail-summary-email { font-size: .9rem; font-weight: 600; color: var(--mud-palette-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-summary-provider { font-size: .72rem; color: var(--mud-palette-text-disabled); text-transform: capitalize; }
.mail-summary-card-head .mini-pill { margin-left: auto; flex-shrink: 0; }
.mail-summary-stats { display: flex; gap: 10px; margin-bottom: 14px; }
.mail-summary-stat { flex: 1; background: var(--mud-palette-action-disabled-background); border-radius: 10px; padding: 10px; text-align: center; }
.mail-summary-stat-value { font-size: 1.3rem; font-weight: 700; color: var(--mud-palette-text-primary); line-height: 1.1; }
.mail-summary-stat-label { font-size: .7rem; color: var(--mud-palette-text-disabled); text-transform: uppercase; letter-spacing: .04em; }
.mail-summary-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mail-summary-toprocess { font-size: .76rem; font-weight: 600; color: var(--mud-palette-primary); }
.mail-summary-sync { font-size: .72rem; color: var(--mud-palette-text-disabled); margin-left: auto; }

/* ===================== Document viewer ===================== */
.doc-view { max-width: 880px; margin: 0 auto; padding: 8px 4px 40px; }
.doc-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 90px 20px; color: var(--mud-palette-text-disabled);
}
.doc-empty .mud-icon-root { font-size: 2.4rem; opacity: .6; }
.doc-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.doc-title { margin: 0; flex: 1; min-width: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; color: var(--mud-palette-text-primary); }
.doc-page {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px; padding: 28px 32px;
}

/* ===================== Files (documents) two-pane ===================== */
.docs-page {
    position: fixed;
    top: var(--mud-appbar-height, 64px);
    bottom: 0;
    left: var(--cortex-drawer-width, 0px);
    right: 0;
    display: flex;
    overflow: hidden;
    z-index: 1;
    transition: left 225ms cubic-bezier(0, 0, 0.2, 1);
}
.docs-tree-col {
    flex: 0 0 260px; display: flex; flex-direction: column; overflow: hidden;
    border-right: 1px solid var(--mud-palette-lines-default);
}
.docs-search { flex: 0 0 auto; padding: 0 10px 8px; }
.docs-tree { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-bottom: 12px; }
.docs-content-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }
.docs-content-head { flex: 0 0 auto; padding: 12px 16px 0; }

/* ===================== Project views (board / tabs) ===================== */
.board-page { padding: 20px 24px 28px; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.board-loading { display: flex; justify-content: center; padding: 40px; }
.pv-tabs { display: flex; gap: 4px; margin-bottom: 18px; flex-shrink: 0; }
.pv-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 8px; font-size: .85rem; font-weight: 600;
    color: var(--mud-palette-text-secondary); cursor: pointer;
}
.pv-tab:hover { background: var(--mud-palette-action-disabled-background); color: var(--mud-palette-text-primary); }
.pv-tab.active { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); color: var(--mud-palette-primary); }
.pv-tab .mud-icon-root { font-size: 1.05rem; }

.board { display: flex; gap: 16px; flex: 1 1 auto; min-height: 0; overflow-x: auto; align-items: flex-start; }
.board-col {
    flex: 0 0 290px; display: flex; flex-direction: column; max-height: 100%;
    background: var(--mud-palette-background-gray, var(--mud-palette-action-disabled-background));
    border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; padding: 12px;
}
.board-col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 0 2px; }
.board-col-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; flex-shrink: 0; }
.mini-pill, .task-pill { border: 1px solid transparent; }
.board-toolbar { display: flex; align-items: center; gap: 8px; }
.board-customize { margin-left: auto; flex-shrink: 0; }
.board-view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 60vh; }
.board-view-head { display: flex; justify-content: flex-end; margin-bottom: 10px; flex-shrink: 0; }
.manage-statuses { display: flex; flex-direction: column; gap: 4px; min-width: 520px; }
.ms-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.ms-head { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--mud-palette-text-disabled); padding-bottom: 4px; border-bottom: 1px solid var(--mud-palette-divider); }
.ms-head .ms-name { flex: 1; }
.ms-head .ms-cat { width: 120px; flex-shrink: 0; }
.ms-color-head { width: 28px; flex-shrink: 0; text-align: center; }
.ms-pt-head { margin-left: auto; flex-shrink: 0; text-align: center; }
.ms-actions-head { flex-shrink: 0; text-align: right; }
.ms-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.ms-row .ms-name { flex: 1; }
.ms-row .ms-cat { width: 120px; flex-shrink: 0; }
.ms-color { width: 28px; height: 24px; padding: 0; border: none; background: none; cursor: pointer; flex-shrink: 0; }
.ms-add { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mud-palette-divider); }
.ms-add .ms-name { flex: 1; }
.ms-add .ms-cat { width: 120px; flex-shrink: 0; }
.board-col-title { font-size: .9rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.board-col-count { margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--mud-palette-text-disabled); }
.dot-muted { background: var(--mud-palette-text-disabled); }
.dot-blue { background: var(--mud-palette-info); }
.dot-amber { background: var(--mud-palette-warning); }
.dot-green { background: var(--mud-palette-success); }
.board-zone { flex: 1 1 auto; overflow-y: auto; min-height: 40px; display: flex; flex-direction: column; gap: 9px; }
.board-card {
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default);
    border-radius: 11px; padding: 11px 12px; cursor: pointer; transition: border-color .12s ease;
}
.board-card:hover { border-color: var(--mud-palette-primary); }
.board-card-title { font-size: .85rem; font-weight: 500; color: var(--mud-palette-text-primary); margin-bottom: 8px; line-height: 1.35; }
.board-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.board-card-assignee { font-size: .72rem; color: var(--mud-palette-text-secondary); }
.board-card-due { font-size: .72rem; color: var(--mud-palette-text-disabled); margin-left: auto; }
.mud-drop-item-preview { opacity: .5; }
/* MudBlazor renders a permanent empty "preview-start" placeholder at the head of a
   reorderable zone; it occupies height and eats clicks on the first card. Collapse
   the idle placeholder (the live drag preview uses .mud-drop-item-preview, untouched). */
.tasks-drop-zone .mud-drop-item-preview-start,
.tasks-list-zone .mud-drop-item-preview-start,
.board-zone .mud-drop-item-preview-start {
    height: 0; min-height: 0; padding: 0; margin: 0; overflow: hidden;
}

.view-placeholder {
    flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; color: var(--mud-palette-text-disabled); text-align: center;
}
.view-placeholder .mud-icon-root { font-size: 2.6rem; opacity: .6; }

/* Timeline (Gantt) */
.timeline-view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 4px 2px 12px; }
.tl-modes { display: flex; gap: 4px; margin-bottom: 8px; flex: 0 0 auto; }
.tl-scroll { overflow: auto; min-height: 0; flex: 1 1 auto; }
.tl-grid { min-width: 640px; }
.tl-scrollmode .tl-grid { width: max-content; min-width: 100%; }
.tl-row { display: flex; align-items: stretch; height: 30px; }
.tl-row:not(.tl-axis-row) { cursor: pointer; border-radius: 6px; }
.tl-row:not(.tl-axis-row):hover { background: var(--mud-palette-action-default-hover); }
.tl-axis-row { height: 26px; position: sticky; top: 0; z-index: 2; background: var(--mud-palette-surface); }
.tl-label-col {
    flex: 0 0 220px; min-width: 0; padding: 0 10px; display: flex; align-items: center;
    font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}
.tl-scrollmode .tl-label-col { position: sticky; left: 0; z-index: 1; background: var(--mud-palette-surface); }
.tl-scrollmode .tl-axis-row .tl-label-col { z-index: 3; }
.tl-track { position: relative; flex: 1 1 auto; min-width: 0; }
.tl-scrollmode .tl-track { flex: 0 0 auto; }
.tl-tick { position: absolute; top: 4px; transform: translateX(-50%); font-size: .68rem; color: var(--mud-palette-text-disabled); white-space: nowrap; }
.tl-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--mud-palette-lines-default); opacity: .5; }
.tl-bar {
    position: absolute; top: 5px; height: 20px; border-radius: 5px; padding: 0 6px;
    display: flex; align-items: center; overflow: hidden; min-width: 6px; font-weight: 600;
}
.tl-bar-text { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-unscheduled { margin-top: 14px; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tl-chip { font-size: .74rem; font-weight: 600; padding: 3px 9px; border-radius: 6px; cursor: pointer; }

/* Calendar view */
.calendar-view { padding: 4px 0; }
.cal-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.cal-title { min-width: 170px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--mud-palette-lines-default); border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; overflow: hidden; }
.cal-dow { background: var(--mud-palette-background-grey); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--mud-palette-text-secondary); text-align: center; padding: 6px 0; }
.cal-cell { background: var(--mud-palette-surface); min-height: 96px; padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; }
.cal-cell-out { background: var(--mud-palette-background-grey); }
.cal-cell-out .cal-cell-num { color: var(--mud-palette-text-disabled); }
.cal-cell-today { box-shadow: inset 0 0 0 2px var(--mud-palette-primary); }
.cal-cell-num { font-size: .76rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.cal-cell-tasks { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-task { font-size: .72rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-unscheduled { margin-top: 14px; }
.cal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }