/* ---------- Global fonts (offline-safe stacks) ---------- */
html, body, .mud-typography, .mud-button, .mud-input, .mud-table, .mud-chip, .mud-alert, .mud-list-item, .mud-tab {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

html[dir="rtl"] body,
html[dir="rtl"] .mud-typography,
html[dir="rtl"] .mud-button,
html[dir="rtl"] .mud-input,
html[dir="rtl"] .mud-table {
    font-family: Tahoma, "Segoe UI", Arial, sans-serif !important;
}

html, body {
    margin: 0;
    background-color: #f8fafc;
}

/* Numbers & money stay LTR even in RTL context */
.pm-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

/* ---------- Splash screen ---------- */
.pm-splash {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(160deg, #1e3a5f 0%, #0f2342 100%);
    color: #fff;
}

.pm-splash-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
}

.pm-splash-title { font-size: 22px; font-weight: 700; }
.pm-splash-sub { font-size: 13px; opacity: .75; }

.pm-splash-bar {
    width: 180px;
    height: 4px;
    margin-top: 12px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .15);
    overflow: hidden;
}

.pm-splash-bar div {
    width: 40%;
    height: 100%;
    border-radius: 2px;
    background: #60a5fa;
    animation: pm-loading 1.2s ease-in-out infinite;
}

@keyframes pm-loading {
    0% { margin-inline-start: -40%; }
    100% { margin-inline-start: 100%; }
}

/* ---------- Blazor error bar ---------- */
#blazor-error-ui {
    background: #b91c1c;
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .3);
    display: none;
    inset-inline-start: 0;
    padding: .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

#blazor-error-ui .reload { color: #fff; margin-inline-start: 8px; }
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    inset-inline-end: .75rem;
    top: .5rem;
}

/* ---------- Kanban ---------- */
.pm-kanban-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 12px;
    align-items: flex-start;
}

.pm-kanban-column {
    min-width: 275px;
    width: 275px;
    background: #f1f5f9;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.pm-kanban-dropzone {
    min-height: 120px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pm-kanban-card {
    cursor: grab;
    transition: box-shadow .18s ease, transform .18s ease;
}
.pm-kanban-card:hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
    transform: translateY(-1px);
}
.pm-kanban-card:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Task-card metadata (checklist / comments / attachments) */
.pm-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    line-height: 1;
}
.pm-card-meta .mud-icon-root { font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
    .pm-kanban-card { transition: none; }
    .pm-kanban-card:hover { transform: none; }
}

.mud-drop-item-preview .pm-kanban-card { opacity: .4; }

/* ---------- Risk heatmap ---------- */
.pm-heatmap {
    display: grid;
    grid-template-columns: auto repeat(5, 1fr);
    gap: 4px;
    max-width: 460px;
}

.pm-heatmap-cell {
    aspect-ratio: 1.6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: transform .1s ease;
}

.pm-heatmap-cell:hover { transform: scale(1.05); }

.pm-heatmap-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #64748b;
}

/* Directional icons flip in RTL */
html[dir="rtl"] .rtl-flip { transform: rotate(180deg); }

/* ---------- Executive dashboard ---------- */
.pm-lift { transition: transform .15s ease, box-shadow .15s ease; }
.pm-lift:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(15, 35, 66, .28); }
.pm-legend { display: flex; flex-direction: column; gap: 7px; }
.pm-legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pm-legend-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.pm-legend-row .pm-legend-val { margin-inline-start: auto; font-weight: 700; }
.pm-exec-accent { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px 0 0 4px; }
html[dir="rtl"] .pm-exec-accent { border-radius: 0 4px 4px 0; }

/* ---------- Misc ---------- */
.pm-page { padding: 8px 4px; }
.pm-clickable { cursor: pointer; }
/* Neutralise native <button> chrome when a clickable div/span/card is promoted to a real button
   for keyboard operability (Enter AND Space activate, Space doesn't scroll). Keep the element's own
   card/box styling via its existing class or an inline style. Pair with pm-btn-block for full-width cards. */
.pm-btn-reset { appearance: none; -webkit-appearance: none; background: transparent; border: 0; margin: 0; padding: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.pm-btn-block { display: block; width: 100%; text-align: start; }
/* Stretched-overlay button: makes a whole card clickable WITHOUT wrapping (and thus nesting) any
   interactive children. Put it as the first child of a position:relative card; give real controls
   inside the card position:relative + z-index:2 so they stay clickable above the overlay. */
.pm-card-overlay { position: absolute; inset: 0; z-index: 1; background: transparent; border: 0; margin: 0; padding: 0; cursor: pointer; border-radius: inherit; }
.pm-clickable:focus-visible,
.pm-btn-reset:focus-visible,
.pm-cal-ev:focus-visible,
.pm-doc-item:focus-visible,
.pm-gantt-bar:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; border-radius: 6px; }
.flex-1 { flex: 1 1 auto; min-width: 0; }
.pm-rag-green { background: #10b981; }
.pm-rag-amber { background: #f59e0b; }
.pm-rag-red { background: #ef4444; }
.pm-rag-none { background: #94a3b8; }

/* ========================================================================
   Sidebar / navigation drawer
   Robust flex column: header pinned on top, nav list scrolls in the middle,
   footer pinned at the bottom. Fixes overflow ("menu runs off the bottom")
   and keeps spacing consistent on every screen height.
   ======================================================================== */
.pm-drawer .mud-drawer-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pm-drawer .pm-drawer-header,
.pm-drawer .pm-drawer-footer { flex: 0 0 auto; }

/* The nav list takes the remaining height and scrolls inside itself */
.pm-drawer .mud-navmenu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.pm-drawer .mud-navmenu::-webkit-scrollbar { width: 6px; }
.pm-drawer .mud-navmenu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 3px;
}
.pm-drawer .mud-navmenu::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .30); }

/* Nav links — comfortable density, readable colours on the navy ground.
   Selectors intentionally match/exceed MudBlazor's own specificity so the
   palette wins deterministically (not just via cascade order). */
.pm-drawer .mud-navmenu .mud-nav-link {
    color: #c7d4e8 !important;
    margin: 2px 0;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.3;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pm-drawer .mud-navmenu .mud-nav-link .mud-nav-link-icon,
.pm-drawer .mud-navmenu .mud-nav-link .mud-icon-root {
    color: #8ea4c6 !important;
    transition: color .15s ease;
}

/* Hover */
.pm-drawer .mud-navmenu .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, .07) !important;
    color: #ffffff !important;
}
.pm-drawer .mud-navmenu .mud-nav-link:hover .mud-nav-link-icon,
.pm-drawer .mud-navmenu .mud-nav-link:hover .mud-icon-root { color: #e2e8f0 !important; }

/* Active — clearly visible: azure tint, white text, accent bar on the inline-start edge */
.pm-drawer .mud-navmenu .mud-nav-link.active,
.pm-drawer .mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: rgba(96, 165, 250, .16) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 #60a5fa;
}
.pm-drawer .mud-navmenu .mud-nav-link.active .mud-nav-link-icon,
.pm-drawer .mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.pm-drawer .mud-navmenu .mud-nav-link.active .mud-icon-root {
    color: #60a5fa !important;
}
html[dir="rtl"] .pm-drawer .mud-navmenu .mud-nav-link.active { box-shadow: inset -3px 0 0 0 #60a5fa !important; }

/* ---------- Nav groups (collapsible) ---------- */
.pm-drawer .mud-navmenu .mud-nav-group > .mud-nav-link { font-weight: 600; }
.pm-drawer .mud-navmenu .mud-nav-group .mud-nav-group .mud-nav-link,
.pm-drawer .mud-navmenu .mud-nav-group .mud-nav-item .mud-nav-link { font-size: 13.5px; }
.pm-nav-grouptitle { line-height: 1.15; }
.pm-nav-grouptitle > span:first-child { font-size: 14px; }
.pm-nav-project {
    font-size: 11px;
    color: #60a5fa;
    max-width: 155px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-nav-project-muted { color: #7c8db0; font-weight: 400; }

/* ---------- Interactive Gantt bars ---------- */
.pm-gantt-bar {
    min-width: 16px;                 /* guarantee even zero-duration tasks are grabbable */
    box-shadow: 0 1px 3px rgba(15, 35, 66, .25);
    transition: filter .12s ease, box-shadow .12s ease;
}
.pm-gantt-bar:hover {
    filter: brightness(1.08) saturate(1.08);
    box-shadow: 0 2px 7px rgba(15, 35, 66, .38);
    opacity: 1 !important;
}
.pm-gantt-bar.pm-gantt-dragging {
    filter: brightness(1.12);
    box-shadow: 0 5px 12px rgba(15, 35, 66, .5);
    opacity: 1 !important;
    z-index: 5;
}
.pm-gantt-tip {
    position: fixed;
    z-index: 4000;
    pointer-events: none;
    display: none;
    background: #0f2342;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    font-variant-numeric: tabular-nums;
}

/* ---------- Calendar ---------- */
.pm-cal { border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px -3px rgba(15, 35, 66, .10); }
.pm-cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #e2e8f0; }
.pm-cal-dow { background: #f8fafc; padding: 10px 4px; text-align: center; font-size: 12px; font-weight: 700; color: #64748b; }
.pm-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #e2e8f0; border-top: 1px solid #e2e8f0; }
.pm-cal-cell { background: #fff; min-height: 120px; padding: 5px 6px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.pm-cal-cell.other { background: #fafbfc; }
.pm-cal-cell.today { background: #eff6ff; }
.pm-cal-daynum { font-size: 12.5px; font-weight: 700; color: #334155; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.pm-cal-cell.other .pm-cal-daynum { color: #cbd5e1; }
.pm-cal-cell.today .pm-cal-daynum { background: #2563eb; color: #fff; }
.pm-cal-ev { font-size: 11px; line-height: 1.35; border-radius: 6px; padding: 2px 7px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.pm-cal-ev:hover { filter: brightness(0.95); }
.pm-cal-ev.done { opacity: .55; text-decoration: line-through; }
.pm-cal-ev-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.pm-cal-more { font-size: 10.5px; color: #64748b; cursor: default; padding-inline-start: 4px; }
.pm-cal-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #64748b; }

/* ---------- Chat / discussion ---------- */
.pm-chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: #f8fafc; }
.pm-chat-row { display: flex; }
.pm-chat-row.mine { justify-content: flex-end; }
.pm-chat-bubble { max-width: 72%; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 8px 12px; box-shadow: 0 1px 2px rgba(15, 35, 66, .06); }
.pm-chat-bubble.mine { background: #2563eb; color: #fff; border-color: #2563eb; }
.pm-chat-author { font-size: 11.5px; font-weight: 700; color: #2563eb; margin-bottom: 2px; }
.pm-chat-text { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.pm-chat-time { font-size: 10.5px; color: var(--mud-palette-text-secondary); margin-top: 3px; }
.pm-chat-bubble.mine .pm-chat-time { color: rgba(255, 255, 255, .75); }
.pm-chat-input { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid #e2e8f0; background: #fff; }
.pm-chat-input .flex-1 { flex: 1; }

/* ---------- Mind map ---------- */
.pm-mm-node {
    position: absolute; box-sizing: border-box; min-height: 46px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 6px 10px; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 600;
    cursor: pointer; box-shadow: 0 3px 8px -3px rgba(15, 35, 66, .3);
    border: 2px solid transparent; transition: transform .1s ease, box-shadow .1s ease;
    word-break: break-word; line-height: 1.3; z-index: 1;
}
.pm-mm-node:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -4px rgba(15, 35, 66, .42); }
.pm-mm-node.sel { border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .4); }
.pm-mm-board { position: relative; border-radius: 14px; overflow: auto; background: #f6f8fc; height: 66vh; border: 1px solid #e6ecf5; }
.pm-mm-board.panning { cursor: grabbing; user-select: none; }
.pm-mm-canvas { position: relative; transform-origin: 0 0; transition: transform .05s linear; }
.pm-mm-link { stroke: #c2cede; stroke-width: 2.5; fill: none; }
.pm-mm-zoom { display: inline-flex; align-items: center; gap: 2px; border: 1px solid #e2e8f0; border-radius: 9px; padding: 2px; background: #fff; }
.pm-mm-zoom-val { min-width: 46px; text-align: center; font-size: 12.5px; font-weight: 700; color: #475569; font-variant-numeric: tabular-nums; }
.pm-mm-palette { display: inline-flex; align-items: center; gap: 5px; }
.pm-mm-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; cursor: pointer; padding: 0; transition: transform .1s ease; }
.pm-mm-swatch:hover { transform: scale(1.14); }
:root[data-theme="dark"] .pm-mm-board { background: #0b1220; border-color: #21324b; }
:root[data-theme="dark"] .pm-mm-zoom { background: #111c30; border-color: #21324b; }
:root[data-theme="dark"] .pm-mm-zoom-val { color: #9fb0c7; }
/* free (ClickUp-style) mind map */
.pm-mm-canvas.free .pm-mm-node { cursor: grab; touch-action: none; }
.pm-mm-node.pm-mm-dragging { cursor: grabbing; opacity: .9; z-index: 100; box-shadow: 0 12px 28px -8px rgba(15, 35, 66, .55); }
.pm-mm-node.pm-mm-drop { outline: 3px dashed #22c55e; outline-offset: 3px; }
.pm-mm-add { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: #2563eb; color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .28); padding: 0; z-index: 5; font-family: inherit; }
.pm-mm-node:hover .pm-mm-add { display: flex; }

/* ---------- Command palette (Ctrl+K) ---------- */
.pm-cmdk-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(2px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 12vh 16px 16px;
}
.pm-cmdk {
    width: min(640px, 94vw);
    background: #fff; border-radius: 14px;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .45);
    display: flex; flex-direction: column; max-height: 72vh; overflow: hidden;
}
.pm-cmdk-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #e2e8f0; }
.pm-cmdk-input { flex: 1; border: none; outline: none; background: transparent; font-size: 16px; color: #0f172a; font-family: inherit; }
.pm-cmdk-esc { font-size: 11px; color: var(--mud-palette-text-secondary); border: 1px solid #e2e8f0; border-radius: 6px; padding: 2px 7px; }
.pm-cmdk-body { overflow-y: auto; padding: 6px; }
.pm-cmdk-empty { padding: 30px; text-align: center; color: var(--mud-palette-text-secondary); font-size: 14px; }
.pm-cmdk-group { font-size: 11px; font-weight: 700; color: var(--mud-palette-text-secondary); padding: 9px 12px 4px; letter-spacing: .05em; }
.pm-cmdk-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px; cursor: pointer; }
.pm-cmdk-item.sel { background: #eff6ff; }
.pm-cmdk-item-ic { color: #64748b; flex: 0 0 auto; }
.pm-cmdk-item.sel .pm-cmdk-item-ic { color: #2563eb; }
.pm-cmdk-item-txt { display: flex; flex-direction: column; min-width: 0; }
.pm-cmdk-item-title { font-size: 14px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-cmdk-item-sub { font-size: 12px; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-cmdk-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid #e2e8f0; font-size: 11.5px; color: var(--mud-palette-text-secondary); background: #f8fafc; }

/* App-bar search affordance */
.pm-searchbtn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid #e2e8f0; border-radius: 9px;
    padding: 6px 12px; cursor: pointer; color: #64748b; background: #f8fafc;
    font-size: 13px; transition: background .15s ease, border-color .15s ease;
}
.pm-searchbtn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.pm-searchbtn kbd {
    font-family: inherit; font-size: 11px; color: #64748b;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 5px; padding: 1px 6px;
}

/* ---------- Documents (wiki) ---------- */
.pm-doc-list { display: flex; flex-direction: column; gap: 6px; max-height: 64vh; overflow-y: auto; }
.pm-doc-item { display: block; width: 100%; text-align: start; font: inherit; color: inherit; background: transparent; appearance: none; -webkit-appearance: none; margin: 0; padding: 9px 11px; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.pm-doc-item:hover { background: #f8fafc; }
.pm-doc-item.sel { background: #eff6ff; border-color: #bfdbfe; }
.pm-doc-excerpt { font-size: 12px; color: var(--mud-palette-text-secondary); margin: 2px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.pm-md-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border: 1px solid #e2e8f0; border-radius: 8px 8px 0 0; background: #f8fafc; }
.pm-md-edit { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #e2e8f0; border-top: none; border-radius: 0 0 8px 8px; overflow: hidden; }
.pm-md-textarea { border: none; outline: none; resize: vertical; padding: 12px; font-family: "Consolas", "Courier New", monospace; font-size: 13.5px; line-height: 1.6; min-height: 340px; background: #fff; color: #0f172a; direction: ltr; text-align: start; }
.pm-md-preview { border-inline-start: 1px solid #e2e8f0; padding: 12px 16px; overflow-y: auto; max-height: 520px; background: #fff; }
@media (max-width: 900px) {
    .pm-md-edit { grid-template-columns: 1fr; }
    .pm-md-preview { border-inline-start: none; border-top: 1px solid #e2e8f0; }
}

/* Rendered markdown */
.pm-md { line-height: 1.75; color: #1e293b; overflow-wrap: break-word; }
.pm-md h1, .pm-md h2, .pm-md h3, .pm-md h4, .pm-md h5, .pm-md h6 { color: #0f172a; font-weight: 800; line-height: 1.3; margin: 1em 0 .4em; }
.pm-md h1 { font-size: 1.6rem; }
.pm-md h2 { font-size: 1.35rem; }
.pm-md h3 { font-size: 1.15rem; }
.pm-md h4 { font-size: 1rem; }
.pm-md p { margin: .5em 0; }
.pm-md ul, .pm-md ol { margin: .5em 0; padding-inline-start: 1.6em; }
.pm-md li { margin: .2em 0; }
.pm-md a { color: #2563eb; text-decoration: underline; }
.pm-md code { background: #f1f5f9; color: #be123c; padding: 1px 6px; border-radius: 5px; font-family: "Consolas", "Courier New", monospace; font-size: .9em; }
.pm-md pre { background: #0f172a; color: #e2e8f0; padding: 14px 16px; border-radius: 10px; overflow-x: auto; direction: ltr; text-align: left; }
.pm-md pre code { background: transparent; color: inherit; padding: 0; }
.pm-md blockquote { margin: .6em 0; padding: 6px 14px; border-inline-start: 4px solid #93c5fd; background: #f8fafc; color: #475569; }
.pm-md hr { border: none; border-top: 1px solid #e2e8f0; margin: 1.2em 0; }
.pm-md del { color: var(--mud-palette-text-secondary); }

/* Section headers between groups */
.pm-drawer .pm-nav-section {
    display: block;
    color: #8196b9 !important;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .09em;
    padding: 14px 14px 4px;
    margin: 0;
}
.pm-drawer .mud-navmenu > .pm-nav-section:first-child { padding-top: 4px; }

/* ---------- Collaborative whiteboard ---------- */
.pm-wb-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pm-wb-tools { display: inline-flex; align-items: center; gap: 2px; border: 1px solid #e2e8f0; border-radius: 10px; padding: 2px 4px; background: #fff; }
.pm-wb-swatches { display: inline-flex; align-items: center; gap: 5px; }
.pm-wb-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; cursor: pointer; padding: 0; transition: transform .1s ease; }
.pm-wb-swatch:hover { transform: scale(1.12); }
.pm-wb-swatch.on { box-shadow: 0 0 0 2px #1e3a5f; }

.pm-wb-scroll { border: 1px solid #e2e8f0; border-radius: 14px; overflow: auto; height: 62vh; background: #fbfcfe; }
.pm-wb-canvas {
    position: relative; width: 2400px; height: 1500px;
    background-image: radial-gradient(#dbe3ee 1px, transparent 1px);
    background-size: 22px 22px;
}
.pm-wb-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }

.pm-shape {
    position: absolute; box-sizing: border-box; border-radius: 10px;
    box-shadow: 0 4px 12px -4px rgba(15, 35, 66, .28);
    border: 1px solid rgba(15, 35, 66, .08);
    display: block; overflow: visible;
}
.pm-shape.sel { outline: 2px solid #2563eb; outline-offset: 2px; }
.pm-shape-dragging { z-index: 50; box-shadow: 0 14px 30px -8px rgba(15, 35, 66, .5); }
.pm-shape-rect { border-radius: 8px; }
.pm-shape-ellipse { border-radius: 50%; }
.pm-shape-text { background: transparent !important; box-shadow: none; border-color: transparent; }
.pm-shape-text.sel { outline-color: #60a5fa; }

.pm-shape-grip {
    position: absolute; top: 3px; inset-inline-start: 3px; z-index: 2;
    display: inline-flex; align-items: center; gap: 1px; height: 20px; padding: 0 3px;
    border-radius: 6px; cursor: grab; color: #475569; background: rgba(255, 255, 255, .6);
}
.pm-shape-grip:active { cursor: grabbing; }
.pm-shape-del {
    border: none; background: transparent; color: #64748b; cursor: pointer;
    font-size: 18px; line-height: 1; padding: 0 3px; border-radius: 5px; font-family: inherit;
}
.pm-shape-del:hover { color: #dc2626; background: rgba(220, 38, 38, .12); }
.pm-shape-text-area, .pm-shape > textarea.pm-shape-text {
    width: 100%; height: 100%; box-sizing: border-box;
    border: none; outline: none; background: transparent; resize: none;
    padding: 26px 10px 12px; font-family: inherit; font-size: 13.5px; line-height: 1.45;
    color: #1e293b; overflow: auto;
}
.pm-shape-ellipse > textarea.pm-shape-text { text-align: center; padding: 30px 16px; }
.pm-shape-resize {
    position: absolute; bottom: 2px; inset-inline-end: 2px; width: 14px; height: 14px; z-index: 2;
    cursor: nwse-resize; border-radius: 3px;
    background:
        linear-gradient(135deg, transparent 0 50%, #94a3b8 50% 60%, transparent 60% 70%, #94a3b8 70% 80%, transparent 80%);
    opacity: 0; transition: opacity .12s ease;
}
.pm-shape:hover .pm-shape-resize, .pm-shape.sel .pm-shape-resize { opacity: 1; }

/* extra whiteboard shapes (diamond / arrow / line), selection raise, custom colour */
.pm-shape.sel { z-index: 40; }
.pm-shape-diamond, .pm-shape-arrow, .pm-shape-line { background: transparent !important; border-color: transparent; box-shadow: none; }
.pm-shape-fill { position: absolute; inset: 0; z-index: 0; }
.pm-shape-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
/* arrow/line endpoint handles — drag to change the angle & length */
.pm-arrow-h {
    position: absolute; width: 13px; height: 13px; margin-inline-start: -7px; margin-top: -7px;
    border-radius: 50%; background: #fff; border: 2px solid #2563eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .28); cursor: crosshair; z-index: 4; display: none; touch-action: none;
}
.pm-shape-arrow:hover .pm-arrow-h, .pm-shape-line:hover .pm-arrow-h,
.pm-shape.sel .pm-arrow-h { display: block; }
.pm-shape > textarea.pm-shape-text { position: relative; z-index: 1; }
.pm-shape-diamond > textarea.pm-shape-text { text-align: center; padding: 34px 18px; }
.pm-wb-color { width: 30px; height: 30px; padding: 2px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; cursor: pointer; }
/* live collaborator cursors */
.pm-wb-cursor { position: absolute; z-index: 60; pointer-events: none; transform: translate(-2px, -2px); transition: left .05s linear, top .05s linear; }
.pm-wb-cursor-name { position: absolute; top: 15px; inset-inline-start: 12px; font-size: 11px; font-weight: 700; color: #fff; padding: 1px 7px; border-radius: 7px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }

/* ---------- app bar border (theme-aware) + small-screen hide ---------- */
.pm-appbar { border-bottom: 1px solid #e2e8f0; }
@media (max-width: 600px) { .pm-hide-sm { display: none !important; } }

/* ---------- keyboard shortcuts dialog ---------- */
.pm-kbd-list { display: flex; flex-direction: column; gap: 4px; }
.pm-kbd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 2px; border-bottom: 1px dashed #e2e8f0; }
.pm-kbd-row:last-child { border-bottom: none; }
.pm-kbd { font-family: "Consolas", monospace; font-size: 12px; background: #eef2f7; border: 1px solid #cbd5e1; border-radius: 6px; padding: 2px 8px; color: #1e3a5f; white-space: nowrap; font-weight: 700; }

/* ============ DARK THEME — custom surfaces (MudBlazor components self-theme via PaletteDark) ============ */
:root[data-theme="dark"] body { background-color: #0b1220; }
:root[data-theme="dark"] .pm-appbar { border-bottom-color: #21324b; }
:root[data-theme="dark"] .pm-kbd { background: #0e1728; border-color: #21324b; color: #cfe0f5; }
:root[data-theme="dark"] .pm-kbd-row { border-bottom-color: #21324b; }

/* kanban + generic light surfaces */
:root[data-theme="dark"] .pm-kanban-column { background: #0f1b2e; border-color: #21324b; }
:root[data-theme="dark"] .pm-heatmap-label { color: #9fb0c7; }

/* calendar */
:root[data-theme="dark"] .pm-cal { background: #111c30; border-color: #21324b; }
:root[data-theme="dark"] .pm-cal-head, :root[data-theme="dark"] .pm-cal-grid { background: #21324b; border-top-color: #21324b; }
:root[data-theme="dark"] .pm-cal-dow { background: #0e1728; color: #9fb0c7; }
:root[data-theme="dark"] .pm-cal-cell { background: #111c30; color: #e5eefb; }
:root[data-theme="dark"] .pm-cal-cell.other { background: #0e1728; }
:root[data-theme="dark"] .pm-cal-cell.today { background: #16233b; }
:root[data-theme="dark"] .pm-cal-daynum { color: #e5eefb; }
:root[data-theme="dark"] .pm-cal-cell.other .pm-cal-daynum { color: #56688a; }
:root[data-theme="dark"] .pm-cal-more, :root[data-theme="dark"] .pm-cal-lg { color: #9fb0c7; }

/* chat */
:root[data-theme="dark"] .pm-chat-body { background: #0b1220; }
:root[data-theme="dark"] .pm-chat-bubble { background: #111c30; border-color: #21324b; color: #e5eefb; }
:root[data-theme="dark"] .pm-chat-author { color: #7cc0ff; }
:root[data-theme="dark"] .pm-chat-input { background: #111c30; border-top-color: #21324b; }
/* Author label on own (blue) bubbles stays white for contrast — the own bubble is blue in both themes.
   Placed after the dark override so it wins the equal-specificity tie in dark mode too. */
.pm-chat-bubble.mine .pm-chat-author { color: rgba(255, 255, 255, .9); }

/* command palette (Ctrl+K) — real classes are .pm-cmdk* */
:root[data-theme="dark"] .pm-cmdk { background: #111c30; }
:root[data-theme="dark"] .pm-cmdk-search { border-bottom-color: #21324b; }
:root[data-theme="dark"] .pm-cmdk-input { color: #e5eefb; }
:root[data-theme="dark"] .pm-cmdk-esc { color: #9fb0c7; border-color: #21324b; }
:root[data-theme="dark"] .pm-cmdk-item.sel { background: #16233b; }
:root[data-theme="dark"] .pm-cmdk-item-title { color: #e5eefb; }
:root[data-theme="dark"] .pm-cmdk-item.sel .pm-cmdk-item-ic { color: #7cc0ff; }
:root[data-theme="dark"] .pm-cmdk-foot { background: #0e1728; border-top-color: #21324b; color: #9fb0c7; }

/* docs / markdown */
:root[data-theme="dark"] .pm-doc-item { border-color: #21324b; }
:root[data-theme="dark"] .pm-doc-item:hover { background: #0e1728; }
:root[data-theme="dark"] .pm-doc-item.sel { background: #16233b; border-color: #26456e; }
:root[data-theme="dark"] .pm-md-toolbar { background: #0e1728; border-color: #21324b; }
:root[data-theme="dark"] .pm-md-edit { border-color: #21324b; }
:root[data-theme="dark"] .pm-md-textarea { background: #111c30; color: #e5eefb; }
:root[data-theme="dark"] .pm-md-preview { background: #111c30; border-inline-start-color: #21324b; }
:root[data-theme="dark"] .pm-md { color: #d6e2f2; }
:root[data-theme="dark"] .pm-md h1, :root[data-theme="dark"] .pm-md h2, :root[data-theme="dark"] .pm-md h3,
:root[data-theme="dark"] .pm-md h4, :root[data-theme="dark"] .pm-md h5, :root[data-theme="dark"] .pm-md h6 { color: #f0f5fc; }
:root[data-theme="dark"] .pm-md code { background: #0e1728; color: #fca5a5; }
:root[data-theme="dark"] .pm-md blockquote { background: #0e1728; color: #9fb0c7; border-inline-start-color: #26456e; }
:root[data-theme="dark"] .pm-md hr { border-top-color: #21324b; }

/* whiteboard */
:root[data-theme="dark"] .pm-wb-tools { background: #111c30; border-color: #21324b; }
:root[data-theme="dark"] .pm-wb-scroll { background: #0b1220; border-color: #21324b; }
:root[data-theme="dark"] .pm-wb-canvas { background-image: radial-gradient(#20304a 1px, transparent 1px); }
:root[data-theme="dark"] .pm-wb-color { background: #111c30; border-color: #21324b; }

/* mind map */
:root[data-theme="dark"] .pm-mm-board { background: #0b1220; }
:root[data-theme="dark"] .pm-mm-link { stroke: #33507a; }

/* assistant */
:root[data-theme="dark"] .pm-ask-body { background: #0b1220; }
:root[data-theme="dark"] .pm-ask-card { background: #111c30; border-color: #21324b; color: #e5eefb; }
:root[data-theme="dark"] .pm-ask-title { color: #cfe0f5; }
:root[data-theme="dark"] .pm-ask-summary { color: #9fb0c7; }
:root[data-theme="dark"] .pm-ask-md { color: #d6e2f2; }
:root[data-theme="dark"] .pm-ask-md h1, :root[data-theme="dark"] .pm-ask-md h2, :root[data-theme="dark"] .pm-ask-md h3 { color: #cfe0f5; }
:root[data-theme="dark"] .pm-ask-md strong { color: #e5eefb; }
:root[data-theme="dark"] .pm-ask-md code { background: #0e1728; color: #cfe0f5; }
:root[data-theme="dark"] .pm-ask-cites { border-top-color: #21324b; }
:root[data-theme="dark"] .pm-ask-cites-label { color: #7c8ba3; }
:root[data-theme="dark"] .pm-ask-cite { background: #0e1728; border-color: #21324b; color: #9fb0c7; }
:root[data-theme="dark"] .pm-ask-cite.link { color: #cfe0f5; }
:root[data-theme="dark"] .pm-ask-cite.link:hover { background: #16233b; border-color: #26456e; }
:root[data-theme="dark"] .pm-ask-line { background: #0e1728; }
:root[data-theme="dark"] .pm-ask-line.link:hover { background: #16233b; }
:root[data-theme="dark"] .pm-ask-line-txt { color: #d6e2f2; }
:root[data-theme="dark"] .pm-ask-action { background: #0e1728; border-color: #26456e; }
:root[data-theme="dark"] .pm-ask-chip { background: #111c30; border-color: #21324b; color: #cfe0f5; }
:root[data-theme="dark"] .pm-ask-chip:hover { background: #16233b; border-color: #26456e; }
:root[data-theme="dark"] .pm-ask-input { background: #111c30; border-top-color: #21324b; }
:root[data-theme="dark"] .pm-ask-user { background: #1e3a5f; color: #fff; }
:root[data-theme="dark"] .pm-ask-toolbar { background: #0e1728; border-bottom-color: #21324b; }
:root[data-theme="dark"] .pm-ask-toolbar-note { color: #9fb0c7; }
:root[data-theme="dark"] .pm-ask-lineheader { color: #cfe0f5; border-bottom-color: #21324b; }
:root[data-theme="dark"] .pm-ask-progress { background: #21324b; }
:root[data-theme="dark"] .pm-ask-welcome-title { color: #9fb0c7; }

/* search pill in the app bar */
:root[data-theme="dark"] .pm-searchbtn { background: #0e1728; border-color: #21324b; color: #9fb0c7; }
:root[data-theme="dark"] .pm-searchbtn kbd { background: #111c30; border-color: #21324b; color: #cfe0f5; }

/* ---------- Change-request approval cycle ---------- */
.pm-cr-approver { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px dashed #eef2f7; flex-wrap: wrap; }
.pm-cr-approver:last-child { border-bottom: none; }
.pm-cr-comment { max-width: 220px; }
:root[data-theme="dark"] .pm-cr-approver { border-bottom-color: #21324b; }

/* ---------- Customizable dashboards ---------- */
.pm-dash-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pm-dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pm-dash-cell { grid-column: span 2; min-width: 0; }
.pm-dash-cell.size-sm { grid-column: span 1; }
.pm-dash-cell.size-md { grid-column: span 2; }
.pm-dash-cell.size-lg { grid-column: span 4; }
@media (max-width: 900px) { .pm-dash-grid { grid-template-columns: repeat(2, 1fr); } .pm-dash-cell.size-lg, .pm-dash-cell.size-md { grid-column: span 2; } .pm-dash-cell.size-sm { grid-column: span 1; } }
@media (max-width: 560px) { .pm-dash-grid { grid-template-columns: 1fr; } .pm-dash-cell { grid-column: span 1 !important; } }
.pm-dash-widget { background: #fff; border: 1px solid #e6ecf5; border-radius: 14px; padding: 12px 14px; height: 100%; box-shadow: 0 2px 8px -5px rgba(15, 35, 66, .18); display: flex; flex-direction: column; }
.pm-dash-grid.editing .pm-dash-cell { cursor: grab; }
.pm-dash-grid.editing .pm-dash-widget { border-style: dashed; border-color: #bcd0ec; }
.pm-drag-src { opacity: .45; }
.pm-dash-wtitle { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; color: #334155; margin-bottom: 8px; }
.pm-dash-drag { cursor: grab; color: var(--mud-palette-text-secondary); }
.pm-dash-wbody { flex: 1; min-height: 60px; display: flex; flex-direction: column; justify-content: center; }
.pm-dash-empty { color: var(--mud-palette-text-secondary); font-size: 13px; text-align: center; padding: 12px; }
.pm-stat { text-align: center; }
.pm-stat-num { font-size: 2.4rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pm-stat-lbl { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12.5px; color: #64748b; margin-top: 2px; }
.pm-dash-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.pm-dash-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pm-dash-row-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1e293b; }
.pm-dash-badge { font-size: 11.5px; font-weight: 700; color: #475569; white-space: nowrap; }
.pm-dash-badge.bad { color: #dc2626; }
.pm-dash-caption { font-size: 12px; color: #64748b; margin-top: 6px; text-align: center; }
/* Task funnel (custom — MudChart has no funnel type). Bars are centred with decreasing width. */
.pm-funnel { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 6px 0; width: 100%; }
.pm-funnel-row { width: 100%; display: flex; flex-direction: column; align-items: center; }
.pm-funnel-bar { min-width: 44px; max-width: 100%; height: 34px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 1px 3px rgba(15, 35, 66, .18); }
.pm-funnel-meta { display: flex; gap: 8px; align-items: baseline; margin-top: 3px; font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.pm-funnel-name { font-weight: 600; }
.pm-dash-notes { width: 100%; min-height: 120px; border: none; outline: none; resize: vertical; background: transparent; font-family: inherit; font-size: 13.5px; line-height: 1.6; color: #1e293b; }
.pm-dash-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pm-dash-galitem { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 16px 10px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; cursor: pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; font-family: inherit; }
.pm-dash-galitem:hover { border-color: #93c5fd; background: #f5f9ff; transform: translateY(-2px); }
.pm-dash-galname { font-weight: 700; font-size: 13px; color: #1e293b; }
.pm-dash-galdesc { font-size: 11.5px; color: var(--mud-palette-text-secondary); }

/* ---------- Team Pulse ---------- */
.pm-pulse-mini { width: 100%; }
.pm-pulse-count { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 1.1rem; color: #16a34a; }
.pm-pulse-count > span:last-child { font-weight: 500; font-size: 12px; color: #64748b; }
.pm-pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); animation: pm-pulse 1.8s ease-in-out infinite; flex: 0 0 auto; }
@keyframes pm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pm-pulse-avatars { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.pm-pulse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pm-pulse-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e6ecf5; border-radius: 14px; background: #fff; }
.pm-pulse-card.online { border-color: #bbf7d0; box-shadow: 0 0 0 1px #bbf7d0 inset; }
.pm-pulse-name { font-weight: 700; font-size: 14px; color: #1e293b; }
.pm-pulse-sub { font-size: 12px; color: var(--mud-palette-text-secondary); }

/* dashboards + pulse — dark */
:root[data-theme="dark"] .pm-dash-widget { background: #111c30; border-color: #21324b; }
:root[data-theme="dark"] .pm-dash-grid.editing .pm-dash-widget { border-color: #2b3f5e; }
:root[data-theme="dark"] .pm-dash-wtitle { color: #cfe0f5; }
:root[data-theme="dark"] .pm-dash-row-txt { color: #d6e2f2; }
:root[data-theme="dark"] .pm-dash-badge { color: #9fb0c7; }
:root[data-theme="dark"] .pm-dash-notes { color: #e5eefb; }

/* ---------- @mentions (task comments) ---------- */
.pm-mention { color: #2563eb; font-weight: 700; background: #eff6ff; border-radius: 4px; padding: 0 3px; }
.pm-mention-pop { position: absolute; bottom: 100%; inset-inline-start: 0; margin-bottom: 4px; min-width: 240px; max-height: 220px; overflow-y: auto; z-index: 30; border-radius: 10px; padding: 4px; }
.pm-mention-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.pm-mention-item:hover { background: #eff6ff; }
:root[data-theme="dark"] .pm-mention { color: #93c5fd; background: #1b2c47; }
:root[data-theme="dark"] .pm-mention-item:hover { background: #1b2c47; }

/* ---------- Inline chip that opens a menu (accessible activator) ---------- */
.pm-chip-activator { all: unset; cursor: pointer; display: inline-flex; align-items: center; border-radius: 999px; }
.pm-chip-activator:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* ---------- Webhook event catalog ---------- */
.pm-webhook-catalog { display: flex; flex-direction: column; gap: 4px; }
.pm-webhook-catalog-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pm-webhook-catalog-row > span { color: #475569; }
:root[data-theme="dark"] .pm-webhook-catalog-row > span { color: #94a3b8; }

/* ---------- Workload / capacity grid ---------- */
.pm-workload { border-collapse: collapse; width: 100%; font-size: 13px; }
.pm-workload th, .pm-workload td { border: 1px solid #e2e8f0; padding: 6px 8px; text-align: center; }
.pm-workload thead th { background: #0f2744; color: #fff; font-weight: 600; position: sticky; top: 0; }
.pm-workload-cell { border-radius: 0; }
:root[data-theme="dark"] .pm-workload th, :root[data-theme="dark"] .pm-workload td { border-color: #24405f; }
:root[data-theme="dark"] .pm-workload-cell { color: #0f172a; }

/* ---------- Gantt baseline ghost bar ---------- */
.pm-gantt-ghost { position: absolute; background: #cbd5e1; border-radius: 5px; opacity: 0.75; }
:root[data-theme="dark"] .pm-gantt-ghost { background: #475569; }
:root[data-theme="dark"] .pm-dash-caption { color: #9fb0c7; }
:root[data-theme="dark"] .pm-dash-galitem { background: #111c30; border-color: #21324b; }
:root[data-theme="dark"] .pm-dash-galitem:hover { background: #16233b; border-color: #26456e; }
:root[data-theme="dark"] .pm-dash-galname { color: #e5eefb; }
:root[data-theme="dark"] .pm-pulse-card { background: #111c30; border-color: #21324b; }
:root[data-theme="dark"] .pm-pulse-card.online { border-color: #14532d; box-shadow: 0 0 0 1px #14532d inset; }
:root[data-theme="dark"] .pm-pulse-name { color: #e5eefb; }

/* ---------- Smart assistant ---------- */
.pm-ask-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #f8fafc; }
.pm-ask-welcome { margin: auto; text-align: center; max-width: 520px; padding: 24px 12px; }
.pm-ask-row { display: flex; }
.pm-ask-row.user { justify-content: flex-end; }
.pm-ask-user { max-width: 76%; background: #2563eb; color: #fff; border-radius: 12px; padding: 8px 13px; font-size: 14px; line-height: 1.5; box-shadow: 0 1px 2px rgba(15, 35, 66, .1); }
.pm-ask-card { max-width: 88%; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(15, 35, 66, .07); }
.pm-ask-title { display: flex; align-items: center; gap: 7px; font-weight: 800; color: #1e3a5f; font-size: 15px; }
.pm-ask-summary { margin-top: 5px; font-size: 13.5px; color: #475569; line-height: 1.55; }
/* LLM prose (Markdown) */
.pm-ask-md { margin-top: 6px; font-size: 14px; color: #24405f; line-height: 1.65; }
.pm-ask-md p { margin: 0 0 8px; }
.pm-ask-md p:last-child { margin-bottom: 0; }
.pm-ask-md ul, .pm-ask-md ol { margin: 6px 0 8px; padding-inline-start: 22px; }
.pm-ask-md li { margin: 2px 0; }
.pm-ask-md h1, .pm-ask-md h2, .pm-ask-md h3 { margin: 10px 0 6px; font-size: 15px; font-weight: 800; color: #1e3a5f; }
.pm-ask-md code { background: #eef2f7; border-radius: 5px; padding: 1px 5px; font-size: 12.5px; }
.pm-ask-md strong { color: #17304d; }
.pm-ask-md a { color: #2563eb; }
/* Knowledge sources (RAG citations) */
.pm-ask-cites { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e2e8f0; }
.pm-ask-cites-label { font-size: 11.5px; font-weight: 700; color: #64748b; margin-inline-end: 2px; }
.pm-ask-cite { border: 1px solid #dbe4ee; background: #f8fafc; color: #475569; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-family: inherit; }
.pm-ask-cite.link { cursor: pointer; color: #1e3a5f; }
.pm-ask-cite.link:hover { background: #eff6ff; border-color: #93c5fd; }
.pm-ask-action { margin-top: 10px; padding: 12px; border: 1px dashed #bfdbfe; background: #f5f9ff; border-radius: 10px; }
.pm-ask-actionbtns { display: flex; gap: 8px; justify-content: flex-end; }
.pm-ask-actiondone { display: flex; align-items: center; gap: 7px; color: #0f9d6e; font-weight: 700; font-size: 13.5px; }
.pm-ask-lines { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.pm-ask-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; background: #f8fafc; }
.pm-ask-line.link { cursor: pointer; transition: background .12s ease; }
.pm-ask-line.link:hover { background: #eff6ff; }
.pm-ask-line-txt { flex: 1; min-width: 0; font-size: 13.5px; color: #1e293b; }
.pm-ask-badge { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pm-ask-badge.tone-neutral { background: #e2e8f0; color: #475569; }
.pm-ask-badge.tone-good { background: #dcfce7; color: #15803d; }
.pm-ask-badge.tone-warn { background: #fef3c7; color: #b45309; }
.pm-ask-badge.tone-bad { background: #fee2e2; color: #b91c1c; }
.pm-ask-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pm-ask-chip { border: 1px solid #cbd5e1; background: #fff; color: #1e3a5f; border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-family: inherit; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.pm-ask-chip:hover { background: #eff6ff; border-color: #93c5fd; }
.pm-ask-input { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid #e2e8f0; background: #fff; }
.pm-ask-input .flex-1 { flex: 1; }

/* Assistant v2: toolbar, section headers, progress bars, welcome groups */
.pm-ask-toolbar { display: flex; align-items: center; gap: 7px; padding: 7px 14px; border-bottom: 1px solid #e2e8f0; background: #fbfdff; }
.pm-ask-toolbar-note { font-size: 12px; color: #64748b; }
.pm-ask-lineheader { margin-top: 6px; padding: 3px 4px 1px; font-size: 12.5px; font-weight: 800; color: #1e3a5f; border-bottom: 1px dashed #e2e8f0; }
.pm-ask-line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pm-ask-line-toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pm-ask-progress { height: 4px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.pm-ask-progress-fill { height: 100%; border-radius: 999px; background: #3b82f6; transition: width .3s ease; }
.pm-ask-progress-fill.tone-good { background: #10b981; }
.pm-ask-progress-fill.tone-warn { background: #f59e0b; }
.pm-ask-progress-fill.tone-bad { background: #ef4444; }
.pm-ask-welcome-group { margin-top: 14px; text-align: start; }
.pm-ask-welcome-title { font-size: 12px; font-weight: 800; color: #64748b; margin-bottom: 6px; }

/* ---------- MudBlazor popover positioning (selects / menus / date pickers) ----------
   MudBlazor 9.8's popover engine positions every open popover itself: it anchors the content to the
   trigger (getBoundingClientRect) and pins it with position:fixed — the inline marker is
   .mud-popover-cascading-value, which is always fixed, so the engine writes the exact left/top and
   re-runs on scroll/resize/flip. That makes lists land correctly on scrolled pages AND inside fixed
   dialogs with no help from us. We only assert the fixed pin as a defensive default.

   DO NOT add any transform/offset of our own here: the engine already computes the final left/top for
   each transform-origin. A previous `transform: translateX(-50%)` on relative-width top-left lists
   dragged every select popover half its own width to the side, so the list opened under the
   neighbouring field instead of its own (reported on the RAID "Owner" select). Removed. */
.mud-popover.mud-popover-open {
    position: fixed !important;
}

/* Governance action-item add/edit rows: tidy wrapping with consistent field sizing so the
   owner / due-date / status controls line up instead of squeezing on one line. */
.pm-actionitem-row { row-gap: 8px; }
.pm-actionitem-row .mud-select { min-width: 170px; }

/* ---------- Tasks workspace view switcher (board / list / timeline) ---------- */
.pm-view-toggle .mud-button-root { white-space: nowrap; }

/* ---------- Board / map tabs (whiteboard & mind map can each hold several) ---------- */
.pm-wb-topbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pm-board-tabs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pm-board-tab {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    border: 1px solid #d9e2ec; background: #fff; color: #475569; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: background .12s, border-color .12s, color .12s;
}
.pm-board-tab:hover { border-color: #93c5fd; background: #f5f9ff; }
.pm-board-tab.on { background: #1e3a5f; border-color: #1e3a5f; color: #fff; }
.pm-board-tab-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-board-tab-count { font-size: 11px; background: rgba(15, 35, 66, .08); border-radius: 999px; padding: 0 6px; min-width: 18px; text-align: center; }
.pm-board-tab.on .pm-board-tab-count { background: rgba(255, 255, 255, .22); }
:root[data-theme="dark"] .pm-board-tab { background: #111c30; border-color: #21324b; color: #9fb0c7; }
:root[data-theme="dark"] .pm-board-tab:hover { border-color: #3b82f6; background: #16233b; }
:root[data-theme="dark"] .pm-board-tab.on { background: #2563eb; border-color: #2563eb; color: #fff; }
:root[data-theme="dark"] .pm-board-tab-count { background: rgba(255, 255, 255, .10); }

/* ===== Mobile bottom navigation (rendered < Md via MudHidden; desktop keeps the drawer) ===== */
.pm-bottomnav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1100;
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 12px rgba(15, 39, 68, .08);
}
.pm-bn-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px 4px;
    border: 0;
    background: transparent;
    color: #64748b;
    font: 600 11px/1.15 inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease, background .15s ease;
}
.pm-bn-item .mud-icon-root { font-size: 23px; width: 24px; height: 24px; }
.pm-bn-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-bn-item:active { background: rgba(30, 58, 95, .06); }
.pm-bn-item.active { color: #1e3a5f; }
.pm-bn-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: 26px;
    block-size: 3px;
    border-radius: 0 0 3px 3px;
    background: #1e3a5f;
}
/* Reserve space so the fixed bar never hides content (matches the MudHidden Md breakpoint). */
@media (max-width: 959.98px) {
    .mud-main-content { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
}
:root[data-theme="dark"] .pm-bottomnav { background: #0f1b2e; border-top-color: #21324b; box-shadow: 0 -2px 12px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .pm-bn-item { color: #9fb0c7; }
:root[data-theme="dark"] .pm-bn-item:active { background: rgba(96, 165, 250, .12); }
:root[data-theme="dark"] .pm-bn-item.active { color: #60a5fa; }
:root[data-theme="dark"] .pm-bn-item.active::before { background: #60a5fa; }