:root {
    --cell-padding: 1em;       
    --cell-padding-x: 1em;
    --cell-padding-y: 0.5em; 
    
    --nav-padding-x: 1.1em;
    --nav-padding-y: 0.75em;
    --fancybox-bg: rgba(24, 24, 27, 0.85);
}



.mud-main-content {
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mud-chip.mud-chip-size-medium {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-chip.mud-chip-size-small {
    font-size: var(--mud-typography-body2-size) !important;
}

.mud-chip {
    font-size: var(--mud-typography-default-size);
}

.mud-tabs {
    background-color: var(--mud-palette-surface);
}

/* MudTabs `PanelClass` styles the tab header, not the content area — without this,
   forms/grids placed directly in a tab panel sit flush against the panel edges.
   Pad every tab panel's content so it has breathing room from the container. */
.mud-tabs .mud-tabs-panels {
    padding: 16px;
}

.mud-input-control-margin-dense .mud-input > input.mud-input-root,
.mud-input-control-margin-dense div.mud-input-slot.mud-input-root {
    font-size: var(--mud-typography-default-size);
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: var(--mud-typography-default-size) !important;
}


.mud-simple-table table * tr > td, .mud-simple-table table * tr th {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-expand-panel .mud-expand-panel-header {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-button-year {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-table-cell {
    font-size: var(--mud-typography-default-size) !important;
    padding: var(--cell-padding) !important;
    font-variant-numeric: tabular-nums;
}

.mud-table-dense .mud-table-cell {
    font-size: var(--mud-typography-body2-size) !important;
    padding: var(--cell-padding-y) var(--cell-padding-x) !important;
}

.mud-simple-table.mud-table-dense * tr td, .mud-simple-table.mud-table-dense * tr th {
    font-size: var(--mud-typography-body2-size) !important;
    padding: var(--cell-padding-y) var(--cell-padding-x) !important;
}

.mud-button-outlined-size-small {
    font-size: var(--mud-typography-body2-size);
}

.mud-grid.readonly-grid > .mud-grid-item {
    border-bottom: 1px solid var(--mud-palette-table-lines);
    padding-bottom: 4px;
}

.mud-nav-link {
    white-space: normal !important;
    padding: var(--nav-padding-y) var(--nav-padding-x) !important;
}

.mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link {
    padding-left: calc(var(--nav-padding-x) * 2) !important;
    padding-inline-start: calc(var(--nav-padding-x) * 2) !important;
}

.mud-nav-group * .mud-navmenu > .mud-nav-group .mud-nav-link {
    padding-left: calc(var(--nav-padding-x) * 2) !important;
    padding-inline-start: calc(var(--nav-padding-x) * 2) !important;
}

.mud-nav-group * .mud-navmenu > .mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link {
    padding-left: calc(var(--nav-padding-x) * 3) !important;
    padding-inline-start: calc(var(--nav-padding-x) * 3) !important;
}

.user-button {
    text-transform: none;
    background: rgba(var(--mud-palette-primary-rgb), 0.1)
}

.side-menu .mud-chip.mud-chip-size-small {
    font-size: 0.625rem;
    height: 1.125rem;
    line-height: 1.25;
}

/* ── Active working area banner (drawer header) ──────────────────────────────
   Sits under the tenant selector and names the area whose menu is showing.
   Colours come from the MudBlazor palette vars, so light/dark and any theme
   change are handled for free — no hard-coded hex. Logical properties
   throughout (inline-start, not left) so RTL mirrors correctly. */
.area-banner {
    --area-accent: var(--mud-palette-primary);
    --area-accent-rgb: var(--mud-palette-primary-rgb);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* .mud-drawer-content is a flex column, so the default flex-shrink:1 crushes this band to
       ~20px and laps it over the tenant selector. Opt out of both growing and shrinking. */
    flex: 0 0 auto;
    padding: 0.625rem 1rem;
    margin: 0.25rem 0.75rem 0.5rem;
    border-radius: var(--mud-default-borderradius);
    background: rgba(var(--area-accent-rgb), 0.08);
    border-inline-start: 3px solid var(--area-accent);
    /* The drawer collapses to 88px in Mini mode; clip rather than reflow. */
    overflow: hidden;
}

.area-banner__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: var(--mud-default-borderradius);
    background: rgba(var(--area-accent-rgb), 0.16);
    color: var(--area-accent);
}

.area-banner__icon .mud-icon-root {
    width: 1.125rem;
    height: 1.125rem;
    font-size: 1.125rem;
}

.area-banner__text {
    display: flex;
    flex-direction: column;
    min-width: 0; /* lets the ellipsis actually engage inside a flex child */
    line-height: 1.2;
}

.area-banner__label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.area-banner__name {
    font-size: var(--mud-typography-body1-size);
    font-weight: 600;
    color: var(--area-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Per-area accents. Keys mirror WorkAreas; anything unmapped keeps the primary
   default set on .area-banner above. */
.area-banner--sysadmin {
    --area-accent: var(--mud-palette-secondary);
    --area-accent-rgb: var(--mud-palette-secondary-rgb);
}

.area-banner--admin {
    --area-accent: var(--mud-palette-info);
    --area-accent-rgb: var(--mud-palette-info-rgb);
}

.area-banner--moderator {
    --area-accent: var(--mud-palette-warning);
    --area-accent-rgb: var(--mud-palette-warning-rgb);
}

.area-banner--mentee {
    --area-accent: var(--mud-palette-success);
    --area-accent-rgb: var(--mud-palette-success-rgb);
}

 
.mud-table.mud-data-grid .mud-toolbar {
    height: auto !important;
    padding: 1rem
}


.mud-table.mud-data-grid .mud-toolbar-gutters {
    height: auto !important;
    padding: 1rem
}

.mud-table.mud-data-grid .mud-table-toolbar {
    height: auto !important;
    padding: 1rem;
    min-height: 48px;
}

.mud-table.mud-data-grid .mud-table-pagination-toolbar {
    height: auto !important;
    padding: 0rem !important;
}

.mud-table-cell .mud-icon-button.ma-n3 {
    margin-left: 0 !important;
}

.mud-input {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

.mud-menu-item .mud-button-root:hover {
    background-color: inherit;
}

.mud-typography-subtitle2 {
    color: var(--mud-palette-text-secondary);
}
.fancybox__container {
    z-index: 9999;
}
.fancybox__backdrop {
    background-color: color-mix(in srgb, var(--mud-palette-overlay-dark) 70%, transparent) !important;
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}

/* Clickable ProjectCard wrapper (P5-S1) — a real anchor around the card, styled to be invisible:
   inherits text color, no underline, and a gentle lift on hover to signal navigability. */
.project-card-link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.project-card-link .mud-paper {
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

.project-card-link:hover .mud-paper {
    box-shadow: var(--mud-elevation-4);
    border-color: var(--mud-palette-primary);
}

/* A11y (Phase 11 · P11-S3) ------------------------------------------------- */

/* Skip-to-content: invisible until keyboard-focused, then a clear first tab stop. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 2000;
    padding: 8px 16px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: 4px;
    text-decoration: none;
}

.skip-link:focus {
    left: 8px;
}

/* The one polite live region — present for screen readers, invisible on screen. */
.sr-only-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile (Phase 11 · P11-S4) ---------------------------------------------- */

/* Workroom bottom tab bar (below md): mirrors the drawer's workroom menu. */
.workroom-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1300;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.workroom-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 72px;
    padding: 8px 10px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.workroom-bottom-nav-item.active {
    color: var(--mud-palette-primary);
    border-top: 2px solid var(--mud-palette-primary);
    margin-top: -1px;
}

/* Keep workroom content clear of the fixed bar on small screens. */
@media (max-width: 959.98px) {
    .workroom-body {
        padding-bottom: 72px;
    }
}

/* Floating primary CTA on the party dashboards (below sm) — thumb-reachable. */
.dashboard-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1300;
}

/* Right-hand context panel -------------------------------------------------
   The rail sits beside a body made of cards, so its own sections need some
   visual language of their own or they read as unfinished. Small-caps labels
   (the same treatment the drawer's area banner uses) and links that behave
   like rows rather than loose blue text. */
.context-section__label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* Full-width hit area, pulled back out to the panel's padding edge so the
   hover state reads as a row rather than a floating pill. */
.context-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    margin: 0 -8px;
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: background-color 120ms ease;
}

.context-link:hover {
    background: var(--mud-palette-action-default-hover);
}

.context-link .mud-icon-root {
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

/* Dividers inside the navigation drawer ------------------------------------
   MudDivider ships with flex-grow:1 so it can stretch across a flex ROW. The
   drawer content is a flex COLUMN, where that same declaration makes every
   divider swallow the leftover vertical space instead — measured at 166px
   each, which pushed the whole menu into the middle of the drawer with a gap
   above it and another below.

   Only the footer divider should claim the slack, and it already does that
   with mt-auto, which needs no growing. Scoped to the drawer so dividers used
   as row separators elsewhere keep their stretch. */
.mud-drawer .mud-drawer-content > .mud-divider {
    flex-grow: 0;
}

/* Overlay drawer must not also reserve space -------------------------------
   MudDrawer stamps `mud-drawer-open-{variant}-{side}` onto .mud-layout when it
   opens, and does not re-derive it if Variant changes afterwards. NavigationMenu
   does change it — persistent at lg, mini at md, temporary below that — so
   narrowing the window with the drawer open left the layout still holding
   `mud-drawer-open-persistent-left`, pushing the body aside by the drawer's full
   280px while the drawer itself had already become a fixed overlay. Every page
   was squeezed into a ~95px strip at phone widths.

   An overlay never displaces content, whatever class the layout kept. Scoped to
   .side-menu so the temporary notification drawer, which is always an overlay,
   can't match and zero the margin at desktop widths. */
.mud-layout:has(.mud-drawer.side-menu.mud-drawer-temporary) .mud-main-content {
    margin-left: 0;
    margin-right: 0;
}

/* Unread badge on the header's notification bell ---------------------------
   MudBadge anchors to the corner of its child, and that child is a 48px
   MudIconButton wrapped around a 24px glyph — so the badge landed 12px out
   and 10px up from the bell itself, reading as a detached number, and its top
   edge sat flush against the top of the app bar. Pull it back onto the
   glyph's own top-right corner. The button keeps its 48px hit area.

   Nudged with a transform rather than margins: MudBlazor pins this badge with
   explicit top/right offsets, against which margins move it not at all. */
.mud-badge.header-unread-badge {
    transform: translate(-13px, 12px) !important;
}

/* RTL flips the badge to the left corner, so the horizontal nudge flips too. */
[dir="rtl"] .mud-badge.header-unread-badge {
    transform: translate(13px, 12px) !important;
}

/* Pending-count pill in the navigation drawer ------------------------------
   Replaces a MudBadge that was being used with no ChildContent: its dot is
   absolutely positioned against the child it decorates, so with nothing to
   decorate it anchored to a zero-size box and floated above the menu row.
   An in-flow inline-flex pill centres with the row and occupies real width. */
.nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
}

/* Reading-width column for settings and single-column forms ----------------
   Settings pages used to buy their narrowness by nesting a second
   MudContainer (Small/Medium) inside the shell's own — which also halved
   their top margin against every other page and gave the app five different
   content widths. The container is now the shell's alone, and pages that
   genuinely need a narrow measure ask for it here: a switch row whose label
   sits 600px from its switch is harder to read, not easier. */
.settings-column {
    max-width: 960px;
}

/* Auth pages (login/register/forgot password) ------------------------------
   Full-viewport gradient canvas — previously a radial gradient anchored at
   the top faded to transparent by 60%, leaving most of the screen flat gray. */
.auth-page {
    min-height: 100dvh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background:
        radial-gradient(circle at 18% 15%, rgba(255, 255, 255, 0.14) 0%, transparent 45%),
        radial-gradient(circle at 85% 5%, color-mix(in srgb, var(--mud-palette-tertiary) 45%, transparent) 0%, transparent 55%),
        linear-gradient(160deg, var(--mud-palette-primary-darken) 0%, var(--mud-palette-primary) 55%, var(--mud-palette-primary-darken) 100%);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px -15px rgba(2, 6, 23, 0.45);
}

/* ApexCharts export menu ---------------------------------------------------
   The library ships a hardcoded white background for this menu, while its
   items inherit the app's text colour. In the dark theme that means light
   text on white — opening the chart's export menu shows what looks like an
   empty box. Bind both ends to the theme instead of only one. */
.apexcharts-menu {
    background: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}

.apexcharts-menu-item {
    color: var(--mud-palette-text-primary) !important;
}

.apexcharts-menu-item:hover {
    background: var(--mud-palette-action-default-hover) !important;
}

/* Rendered markdown (contract terms) -----------------------------------------
   Scoped tight: this only styles what MarkdownText emits. Sizes track the theme
   rather than hardcoding, so it stays legible in both light and dark. */
.markdown-body {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
}

.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    font-weight: 600;
    line-height: 1.3;
    margin: 1.25em 0 0.5em;
}

.markdown-body h1 { font-size: 1.35rem; }
.markdown-body h2 { font-size: 1.15rem; }
.markdown-body h3 { font-size: 1rem; }
.markdown-body h4 { font-size: 0.9rem; }

.markdown-body p { margin: 0 0 0.75em; }
.markdown-body ul,
.markdown-body ol { margin: 0 0 0.75em; padding-inline-start: 1.5em; }
.markdown-body li { margin-bottom: 0.25em; }

.markdown-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: var(--mud-palette-action-default-hover);
}

.markdown-body pre {
    padding: 0.75em 1em;
    border-radius: 6px;
    overflow-x: auto;
    background: var(--mud-palette-action-default-hover);
}

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

.markdown-body blockquote {
    margin: 0 0 0.75em;
    padding-inline-start: 1em;
    border-inline-start: 3px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.markdown-body table { border-collapse: collapse; margin-bottom: 0.75em; }
.markdown-body th,
.markdown-body td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.35em 0.6em;
    text-align: start;
}

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