/* Marsa office application styles. Feature sections are added with their screens. */

/* Application shell */
.dash-topbar { --rax-navbar-max: none; }

/* ---------- Shared surfaces ----------
   Every colour comes from the theme tokens so light, dark and the accent choice all follow. */
.marsa-surface,
.marsa-card,
.marsa-stat,
.marsa-quick-tile,
.marsa-board-col,
.marsa-field-card,
.marsa-doc,
.marsa-fact-tiles > div {
    background: var(--rax-card-bg, var(--bs-body-bg));
    border: 1px solid var(--rax-border-color, var(--bs-border-color));
    border-radius: var(--rax-radius-lg, 0.75rem);
    /* Many small tiles sit side by side; the glass surface shadow is sized for one large card and stacks up too heavy. */
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    -webkit-backdrop-filter: var(--rax-surface-filter, none);
    backdrop-filter: var(--rax-surface-filter, none);
}

/* Same lighter shadow for library cards inside pages, so a grid of cards does not look heavy. */
.dash-main .rax-card { --rax-card-shadow: 0 1px 2px rgb(0 0 0 / 0.04); }
/* Cards must stand out from the page: the theme's darker page color behind, white cards on top (light mode only). */
body { background-color: var(--rax-page-bg, var(--bs-tertiary-bg)); }
:root:not([data-bs-theme=dark]) .dash-main .rax-card { --rax-card-bg: #fff; background-color: #fff; border-color: rgb(0 0 0 / 0.08); --rax-card-shadow: 0 1px 3px rgb(0 0 0 / 0.06); }

.marsa-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.02em; }
.marsa-spacer { flex: 1; }
.marsa-hint { margin: 0.75rem 0 0; font-size: 0.875rem; }
[data-muted="true"] { opacity: 0.6; }

/* ---------- Page header ---------- */
.marsa-demo-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--rax-radius, 0.5rem);
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    font-size: 0.875rem;
}

.marsa-page-header { flex-wrap: wrap; }
.marsa-page-heading h1 { margin: 0; font-size: 1.6rem; font-weight: 700; }
.marsa-page-heading p { margin: 0.25rem 0 0; color: var(--bs-secondary-color); max-width: 46rem; }
.marsa-page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.marsa-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    text-decoration: none;
}
.marsa-back:hover { color: var(--bs-primary); }
[dir="ltr"] .marsa-back-icon { transform: scaleX(-1); }
[dir="rtl"] .marsa-forward-icon { transform: scaleX(-1); }

/* ---------- Toolbar, chips, view switcher ---------- */
/* RaxUI toggle groups; the outline group wraps when there are many choices. */
.marsa-chips { flex-wrap: wrap; margin-bottom: 0.75rem; }
.marsa-toolbar .marsa-chips { margin-bottom: 0; }
.marsa-chips .rax-badge { margin-inline-start: 0.25rem; }

/* Avatar tint for the RaxUI fallback, set here because the CSP blocks the component's inline tint. */
.marsa-avatar .rax-avatar-fallback.rax-avatar-fallback { --rax-avatar-tint-rgb: var(--bs-primary-rgb); }
.marsa-avatar[data-tone="info"] .rax-avatar-fallback.rax-avatar-fallback { --rax-avatar-tint-rgb: var(--bs-info-rgb); }
.marsa-team .rax-avatar { box-shadow: 0 0 0 2px var(--rax-card-bg, var(--bs-body-bg)); }
.marsa-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.marsa-toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: 1; }
.marsa-toolbar-stack { flex-direction: column; align-items: stretch; }
.marsa-search { min-width: min(20rem, 100%); }
.marsa-select { width: auto; min-width: 10rem; }



.marsa-card:focus-visible,
.marsa-stat:focus-visible,
.marsa-quick-tile:focus-visible,
.marsa-doc-thumb:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ---------- Cards grid ---------- */
.marsa-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    gap: 1rem;
}
.marsa-cards-wide { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.marsa-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem;
    color: inherit;
    text-decoration: none;
    transition: transform var(--rax-duration, 150ms), box-shadow var(--rax-duration, 150ms), border-color var(--rax-duration, 150ms);
}
a.marsa-card:hover { border-color: var(--bs-primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgb(0 0 0 / 0.08); }
.marsa-card-head { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.marsa-card-head-split { justify-content: space-between; align-items: flex-start; }
.marsa-card-title { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.marsa-card-title strong { color: var(--bs-emphasis-color); overflow-wrap: anywhere; }
.marsa-card-title strong.marsa-mono { white-space: nowrap; overflow-wrap: normal; }
.marsa-card-title small { color: var(--bs-secondary-color); }
.marsa-card-line { display: flex; align-items: center; gap: 0.45rem; color: var(--bs-secondary-color); font-size: 0.9rem; }
.marsa-card-line svg { flex: none; }
.marsa-card-foot { margin: 0.5rem 0 0; color: var(--bs-secondary-color); font-size: 0.85rem; }
.marsa-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }

.marsa-row-link { display: inline-flex; align-items: center; gap: 0.6rem; color: inherit; text-decoration: none; }
a.marsa-row-link:hover strong, a.marsa-row-link:hover { color: var(--bs-primary); }
.marsa-row-actions { white-space: nowrap; text-align: end; }
.marsa-pager { margin-top: 1.25rem; justify-content: center; }
.marsa-status svg { width: 0.85rem; height: 0.85rem; }

/* ---------- Empty, error, loading ---------- */
.marsa-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}
.marsa-empty strong { color: var(--bs-emphasis-color); font-size: 1.05rem; }
.marsa-empty p { margin: 0 0 0.5rem; max-width: 28rem; }
.marsa-empty-icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
}
.marsa-empty-icon svg { width: 1.5rem; height: 1.5rem; }
.marsa-error .marsa-empty-icon { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

.marsa-loading-rows { display: grid; gap: 0.6rem; }
.marsa-skeleton {
    display: block;
    border-radius: var(--rax-radius-lg, 0.75rem);
    background: linear-gradient(90deg, var(--bs-secondary-bg) 25%, var(--bs-tertiary-bg) 50%, var(--bs-secondary-bg) 75%);
    background-size: 200% 100%;
    animation: marsa-shimmer 1.4s ease-in-out infinite;
}
.marsa-skeleton-card { height: 8.5rem; }
.marsa-skeleton-row { height: 3rem; border-radius: var(--rax-radius, 0.5rem); }
@keyframes marsa-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .marsa-skeleton { animation: none; }
    a.marsa-card:hover { transform: none; }
}

/* ---------- Home ---------- */
.marsa-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.marsa-quick-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--rax-duration, 150ms), background-color var(--rax-duration, 150ms);
}
.marsa-quick-tile:hover { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.marsa-quick-tile strong { display: block; color: var(--bs-emphasis-color); font-size: 0.925rem; }
.marsa-quick-tile small { color: var(--bs-secondary-color); font-size: 0.8rem; }
.marsa-quick-icon,
.marsa-kind-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--rax-radius, 0.5rem);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

/* Twelve-column board: 5 + 7 side by side from 992px, one column below. */
.marsa-home { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.marsa-home > * { grid-column: 1 / -1; min-width: 0; margin: 0; }
@media (min-width: 992px) {
    .marsa-home > .marsa-col-5 { grid-column: span 5; }
    .marsa-home > .marsa-col-7 { grid-column: span 7; }
}
.marsa-skeleton-panel { height: 18rem; }
.marsa-subhead { margin: 0 0 0.5rem; color: var(--bs-secondary-color); font-size: 0.8rem; font-weight: 600; }

.marsa-kpis-card { overflow: hidden; }
.marsa-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: 100%; }
.marsa-kpi {
    --marsa-tone: var(--bs-primary-text-emphasis);
    --marsa-tone-bg: var(--bs-primary-bg-subtle);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    min-width: 0;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--rax-duration, 150ms);
}
.marsa-kpi:nth-child(odd) { border-inline-end: 1px solid var(--bs-border-color-translucent); }
.marsa-kpi:nth-last-child(-n + 2) { border-bottom: 0; }
.marsa-kpi:hover { background: var(--bs-tertiary-bg); }
.marsa-kpi:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.marsa-kpi[data-tone="info"] { --marsa-tone: var(--bs-info-text-emphasis); --marsa-tone-bg: var(--bs-info-bg-subtle); }
.marsa-kpi[data-tone="warning"] { --marsa-tone: var(--bs-warning-text-emphasis); --marsa-tone-bg: var(--bs-warning-bg-subtle); }
.marsa-kpi[data-tone="danger"] { --marsa-tone: var(--bs-danger-text-emphasis); --marsa-tone-bg: var(--bs-danger-bg-subtle); }
.marsa-kpi-label { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--bs-secondary-color); font-size: 0.85rem; }
.marsa-kpi-label svg { flex: none; width: 1.7rem; height: 1.7rem; padding: 0.35rem; border-radius: 0.45rem; background: var(--marsa-tone-bg); color: var(--marsa-tone); }
.marsa-kpi-value { color: var(--bs-emphasis-color); font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.marsa-kpi-hint { color: var(--bs-secondary-color); font-size: 0.78rem; }

.marsa-bars { margin: 0; }
.marsa-bars svg { display: block; width: 100%; height: 11rem; }
[dir="rtl"] .marsa-bars svg { transform: scaleX(-1); }
.marsa-bar { fill: var(--bs-primary-bg-subtle); transition: fill var(--rax-duration, 150ms); }
.marsa-bar:hover { fill: var(--bs-primary-border-subtle); }
.marsa-bar-now, .marsa-bar-now:hover { fill: var(--bs-primary); }
.marsa-bars-labels { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin-top: 0.5rem; text-align: center; }
.marsa-bars-labels span { display: flex; flex-direction: column; min-width: 0; }
.marsa-bars-labels strong { color: var(--bs-emphasis-color); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.marsa-bars-labels small { overflow: hidden; color: var(--bs-secondary-color); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.marsa-bars-labels span[data-now="true"] strong,
.marsa-bars-labels span[data-now="true"] small { color: var(--bs-primary-text-emphasis); }

.marsa-alerts, .marsa-latest, .marsa-spread, .marsa-mini-list { display: grid; margin: 0; padding: 0; list-style: none; }
.marsa-alerts { gap: 0.35rem; }
.marsa-alerts a, .marsa-latest a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--rax-radius, 0.5rem);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--rax-duration, 150ms);
}
.marsa-alerts a:hover, .marsa-latest a:hover { background: var(--bs-tertiary-bg); }
.marsa-alert-dot { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--bs-warning); box-shadow: 0 0 0 4px var(--bs-warning-bg-subtle); }
.marsa-alerts a[data-alert="Overdue"] .marsa-alert-dot,
.marsa-alerts a[data-alert="DueToday"] .marsa-alert-dot { background: var(--bs-danger); box-shadow: 0 0 0 4px var(--bs-danger-bg-subtle); }
.marsa-alert-text, .marsa-latest-text, .marsa-mini-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.marsa-alert-text strong, .marsa-latest-text strong, .marsa-mini-text strong { overflow: hidden; color: var(--bs-emphasis-color); font-size: 0.9rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.marsa-alert-text small, .marsa-latest-text small, .marsa-mini-text small { overflow: hidden; color: var(--bs-secondary-color); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.marsa-alert-pill { flex: none; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.marsa-alerts a[data-alert="Overdue"] .marsa-alert-pill,
.marsa-alerts a[data-alert="DueToday"] .marsa-alert-pill { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

.marsa-usd-chip { padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); font-weight: 700; font-variant-numeric: tabular-nums; }
.marsa-mini-list li { display: flex; align-items: center; gap: 0.7rem; padding-block: 0.55rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.marsa-mini-list li:last-child { border-bottom: 0; }
.marsa-mini-icon { display: grid; flex: none; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.marsa-mini-icon svg { width: 1rem; height: 1rem; }
.marsa-mini-icon[data-dir="in"] { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }

.marsa-spread { gap: 0.7rem; }
.marsa-spread li { display: grid; grid-template-columns: minmax(7rem, 9rem) 1fr 2rem; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
.marsa-spread-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Native progress keeps fully round ends at any width; it fills from the start side in both directions. */
.marsa-spread-bar {
    --marsa-fill: var(--bs-primary);
    display: block;
    width: 100%;
    height: 0.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--bs-secondary-bg);
    overflow: hidden;
    appearance: none;
}
.marsa-spread-bar::-webkit-progress-bar { border-radius: 999px; background: var(--bs-secondary-bg); }
.marsa-spread-bar::-webkit-progress-value { border-radius: 999px; background: var(--marsa-fill); }
.marsa-spread-bar::-moz-progress-bar { border-radius: 999px; background: var(--marsa-fill); }
.marsa-spread-bar[data-status="Delivered"] { --marsa-fill: var(--bs-info); }
.marsa-spread-bar[data-status="AwaitingSettlement"] { --marsa-fill: var(--bs-warning); }
.marsa-spread-bar[data-status="Closed"] { --marsa-fill: var(--bs-secondary-color); }
.marsa-spread-value { color: var(--bs-emphasis-color); font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }

.marsa-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.marsa-stat-grid-2 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.marsa-stat {
    --marsa-tone-bg: var(--bs-primary-bg-subtle);
    --marsa-tone-fg: var(--bs-primary-text-emphasis);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    color: inherit;
    text-decoration: none;
}
a.marsa-stat:hover { border-color: var(--marsa-tone-fg); }
.marsa-stat[data-tone="info"] { --marsa-tone-bg: var(--bs-info-bg-subtle); --marsa-tone-fg: var(--bs-info-text-emphasis); }
.marsa-stat[data-tone="success"] { --marsa-tone-bg: var(--bs-success-bg-subtle); --marsa-tone-fg: var(--bs-success-text-emphasis); }
.marsa-stat[data-tone="warning"] { --marsa-tone-bg: var(--bs-warning-bg-subtle); --marsa-tone-fg: var(--bs-warning-text-emphasis); }
.marsa-stat[data-tone="danger"] { --marsa-tone-bg: var(--bs-danger-bg-subtle); --marsa-tone-fg: var(--bs-danger-text-emphasis); }
.marsa-stat-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--rax-radius, 0.5rem);
    background: var(--marsa-tone-bg);
    color: var(--marsa-tone-fg);
}
.marsa-stat-text { display: flex; flex-direction: column; min-width: 0; }
.marsa-stat-label { color: var(--bs-secondary-color); font-size: 0.875rem; }
.marsa-stat-value { color: var(--bs-emphasis-color); font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.marsa-stat-hint { color: var(--bs-secondary-color); font-size: 0.8rem; }

.marsa-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.25rem;
}
.marsa-columns-wide-end { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.marsa-panel .card-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; }
.marsa-panel { margin-bottom: 1rem; }
.marsa-columns .marsa-panel { margin-bottom: 0; }
.marsa-more { margin: 0.75rem 0 0; font-size: 0.875rem; }
.marsa-link-more { display: inline-block; margin-top: 0.75rem; font-size: 0.9rem; }

/* ---------- Money ---------- */
.marsa-money { display: grid; gap: 0.4rem; }
.marsa-money-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--rax-radius, 0.5rem);
    background: var(--bs-tertiary-bg);
}
.marsa-money-currency { color: var(--bs-secondary-color); font-size: 0.875rem; }
.marsa-money-amount { display: flex; align-items: baseline; gap: 0.4rem; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.marsa-money-amount small { color: var(--bs-secondary-color); font-size: 0.8rem; font-weight: 500; }
.marsa-money-row[data-sign="minus"] .marsa-money-amount { color: var(--bs-danger-text-emphasis); }
.marsa-money-row[data-sign="plus"] .marsa-money-amount { color: var(--bs-success-text-emphasis); }
.marsa-money .marsa-money-row[data-sign] .marsa-money-amount:not(:has(small)) { color: var(--bs-emphasis-color); }
.marsa-money-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.75rem; color: var(--bs-secondary-color); font-size: 0.85rem; }
.marsa-money-split .marsa-money-amount { font-size: 0.95rem; }
.marsa-money-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.marsa-money-title { display: block; margin-bottom: 0.5rem; color: var(--bs-secondary-color); font-weight: 600; }
.marsa-amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.marsa-amount[data-dir="in"] { color: var(--bs-success-text-emphasis); }
.marsa-amount[data-dir="reverse"] { color: var(--bs-secondary-color); }
.marsa-entry-type { display: inline-flex; align-items: center; gap: 0.5rem; }
.marsa-entry-type > svg { flex: none; color: var(--bs-secondary-color); }
.marsa-entry-type[data-dir="in"] > svg { color: var(--bs-success-text-emphasis); }
.marsa-entry-type span { display: flex; flex-direction: column; }
.marsa-entry-type small, .marsa-entry-details small { display: block; color: var(--bs-secondary-color); font-size: 0.8rem; }
.marsa-ledger-table tr[data-reversed="true"] td { color: var(--bs-secondary-color); }
.marsa-ledger-table tr[data-reversed="true"] .marsa-amount bdi { text-decoration: line-through; }
.marsa-receipt { color: var(--bs-success-text-emphasis); }
.marsa-amount-input { font-size: 1.2rem; font-weight: 600; }

/* ---------- Dossiers ---------- */
.marsa-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(15rem, 1fr));
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}
.marsa-board-col { display: flex; flex-direction: column; gap: 0.6rem; min-height: 20rem; padding: 0.75rem; background: var(--bs-tertiary-bg); }
.marsa-board-head { display: flex; align-items: center; justify-content: space-between; }
.marsa-board-count { min-width: 1.75rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--bs-body-bg); font-weight: 700; text-align: center; }
.marsa-board-hint { margin: 0; color: var(--bs-secondary-color); font-size: 0.8rem; }
.marsa-board-empty { margin: 1rem 0; text-align: center; }
.marsa-board .marsa-card { padding: 0.75rem; }

.marsa-journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.marsa-journey li { position: relative; display: flex; align-items: flex-start; gap: 0.6rem; }
.marsa-journey-dot {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
}
.marsa-journey li[data-state="done"] .marsa-journey-dot { border-color: var(--bs-success); background: var(--bs-success); color: var(--bs-white, #fff); }
.marsa-journey li[data-state="current"] .marsa-journey-dot { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.marsa-journey-text { display: flex; flex-direction: column; padding-top: 0.25rem; }
.marsa-journey li[data-state="todo"] .marsa-journey-text { color: var(--bs-secondary-color); }
.marsa-journey-text small { color: var(--bs-secondary-color); font-size: 0.8rem; }

.marsa-clock-alert { margin-bottom: 0.75rem; }
.marsa-clock-alert-list { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.marsa-clock-alert-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.marsa-clock-alert-list strong { font-weight: 600; }
.marsa-clock-alert-list .marsa-mono { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; font-size: 0.85rem; opacity: 0.85; }
.marsa-fact-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.6rem; margin: 0 0 1rem; }
.marsa-fact-tiles > div { padding: 0.65rem 0.85rem; }
.marsa-agent-fact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.marsa-fact-tiles dt { color: var(--bs-secondary-color); font-size: 0.8rem; font-weight: 500; }
.marsa-fact-tiles dd { margin: 0.15rem 0 0; color: var(--bs-emphasis-color); font-weight: 600; overflow-wrap: anywhere; }
.marsa-note { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.85rem; border-radius: var(--rax-radius, 0.5rem); background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.marsa-tabs { margin-top: 0.5rem; }
.marsa-tabs .rax-tabs-content { padding-top: 1rem; }

.marsa-stages { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin: 0.75rem 0; }
.marsa-stage { height: 0.5rem; border-radius: 999px; background: var(--bs-secondary-bg); }
.marsa-stage[data-state="done"] { background: var(--bs-success); }
.marsa-stage[data-state="current"] { background: var(--bs-primary); }
.marsa-next { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0; color: var(--bs-secondary-color); font-size: 0.9rem; }
.marsa-next strong { color: var(--bs-emphasis-color); }
.marsa-next-done { justify-content: flex-start; color: var(--bs-success-text-emphasis); }

.marsa-timeline { position: relative; display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.marsa-timeline::before { content: ""; position: absolute; inset-block: 0.5rem; inset-inline-start: 1rem; width: 2px; background: var(--bs-border-color); }
.marsa-timeline li { position: relative; display: flex; gap: 0.85rem; }
.marsa-timeline-dot {
    z-index: 1;
    display: grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}
.marsa-timeline-dot svg { width: 1rem; height: 1rem; }
.marsa-timeline-body { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.2rem; min-inline-size: 0; overflow-wrap: anywhere; }
.marsa-timeline-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; color: var(--bs-secondary-color); font-size: 0.85rem; }
.marsa-timeline-body p { margin: 0.25rem 0 0; padding: 0.4rem 0.6rem; border-radius: var(--rax-radius, 0.5rem); background: var(--bs-tertiary-bg); font-size: 0.9rem; }
.marsa-timeline li[data-voided="true"] .marsa-timeline-body > strong { color: var(--bs-secondary-color); text-decoration: line-through; }
.marsa-timeline-actions { margin-block-start: .35rem; }
.marsa-void-details { display: grid; justify-items: start; gap: .25rem; margin-block-start: .35rem; }

/* ---------- Wizard ---------- */
.marsa-wizard { max-width: 52rem; }
.marsa-stepper { margin-bottom: 1.5rem; }
.marsa-wizard-body { display: grid; gap: 1rem; min-height: 16rem; }
.marsa-step-title { margin: 0; font-size: 1.2rem; font-weight: 700; }
.marsa-step-title + p { margin: -0.5rem 0 0; }
.marsa-wizard-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--bs-border-color-translucent); }
.marsa-step-alert { margin: 0; }
.marsa-container-entry { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 0.75rem; align-items: end; }
.marsa-check { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 600; }
.marsa-check[data-valid="true"] { color: var(--bs-success-text-emphasis); }
.marsa-check[data-valid="false"] { color: var(--bs-danger-text-emphasis); }
.marsa-container-list { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.marsa-container-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.4rem 0.4rem 0.75rem; border-radius: var(--rax-radius, 0.5rem); background: var(--bs-tertiary-bg); }
.marsa-container-list bdi { flex: 1; font-weight: 600; }
.marsa-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.25rem; margin: 0; }
.marsa-facts dt { color: var(--bs-secondary-color); font-weight: 500; }
.marsa-facts dd { margin: 0; color: var(--bs-emphasis-color); }
.marsa-field-error { margin: 0.35rem 0 0; color: var(--bs-danger-text-emphasis); font-size: 0.875rem; }

/* ---------- Sheets: choices ---------- */
/* RaxUI radio cards. The library marks the chosen card from data-state, which its native radio does not set, so :checked does it here. */
.marsa-radio-list { gap: 0.5rem; }
.marsa-radio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.marsa-radio-card { align-items: center; min-height: 3.5rem; padding: 0.65rem 0.85rem; }
.marsa-radio-card .rax-radio { margin-top: 0; }
.marsa-radio-compact .marsa-radio-card { min-height: 2.75rem; padding: 0.45rem 0.7rem; font-size: 0.9rem; }
.rax-radio-card:has(.rax-radio-input:checked) {
    border-color: rgb(var(--rax-radio-rgb));
    background-color: rgba(var(--rax-radio-rgb), 0.06);
    box-shadow: 0 0 0 1px rgb(var(--rax-radio-rgb));
}
.rax-radio-card:has(.rax-radio-input:focus-visible) { box-shadow: 0 0 0 0.25rem rgba(var(--rax-radio-rgb), 0.3); }
.marsa-radio-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.marsa-radio-text strong { color: var(--bs-emphasis-color); font-weight: 600; }
.marsa-radio-text small { color: var(--bs-secondary-color); font-size: 0.85rem; }
.marsa-radio-icon { flex: none; color: var(--bs-secondary-color); }
.marsa-radio-card[data-done="true"] .marsa-radio-text { color: var(--bs-secondary-color); }
.marsa-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.marsa-fieldset legend { margin-bottom: 0.5rem; font-size: 0.95rem; font-weight: 600; float: none; }
.marsa-check-row { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.4rem 0.75rem; border: 1px solid var(--bs-border-color); border-radius: var(--rax-radius, 0.5rem); margin-bottom: 0.4rem; cursor: pointer; }

/* ---------- Field agent (phone first) ---------- */
.marsa-field { max-width: 40rem; margin-inline: auto; }
.marsa-field-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.marsa-field-card { padding: 1rem; }
.marsa-field-card[data-alert="DueSoon"] { border-color: var(--bs-warning-border-subtle); }
.marsa-field-card[data-alert="DueToday"], .marsa-field-card[data-alert="Overdue"] { border-color: var(--bs-danger-border-subtle); }
.marsa-field-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.marsa-field-head > span { display: flex; flex-direction: column; min-width: 0; }
.marsa-field-no { font-size: 1.2rem; color: var(--bs-emphasis-color); }
.marsa-field-head small { color: var(--bs-secondary-color); }
.marsa-field-alert { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.75rem; color: var(--bs-danger-text-emphasis); font-weight: 600; }
.marsa-field-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.5rem; }
.marsa-field-actions .btn { min-height: 3rem; justify-content: center; }

/* ---------- Documents ---------- */
.marsa-upload { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.marsa-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.5rem 1rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--rax-radius-lg, 0.75rem);
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    text-align: center;
    cursor: pointer;
}
.marsa-dropzone:hover, .marsa-dropzone:focus-within { border-color: var(--bs-primary); color: var(--bs-primary-text-emphasis); }
.marsa-dropzone strong { color: var(--bs-emphasis-color); }
.marsa-dropzone[data-busy="true"] { opacity: 0.7; cursor: progress; }
.marsa-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.marsa-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.75rem; }
.marsa-doc { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.marsa-doc-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 7rem;
    border: 0;
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.marsa-doc-thumb[data-type="Jpeg"], .marsa-doc-thumb[data-type="Png"] { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.marsa-doc-thumb svg { width: 2rem; height: 2rem; }
.marsa-doc-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.7rem 0.8rem; }
.marsa-doc-body strong { max-width: 100%; overflow: hidden; color: var(--bs-emphasis-color); font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }
.marsa-doc-body small { color: var(--bs-secondary-color); font-size: 0.8rem; }
.marsa-doc-delete { position: absolute; inset-block-start: 0.35rem; inset-inline-end: 0.35rem; }
.marsa-file { display: inline-flex; align-items: center; gap: 0.45rem; }
.marsa-documents .marsa-toolbar { flex-wrap: wrap; }
.marsa-documents .marsa-toolbar-filters { min-width: 0; }
.marsa-document-upload-fields { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.marsa-document-upload-fields .rax-field { grid-template-columns: minmax(0, 1fr); }
.marsa-documents .marsa-chips, .marsa-document-upload-fields .marsa-chips { flex-wrap: wrap; max-inline-size: 100%; }

/* ---------- Administration ---------- */
.marsa-office { gap: 0.85rem; }
.marsa-office-name { color: inherit; text-decoration: none; }
.marsa-office-name:hover strong { color: var(--bs-primary); }
.marsa-office .marsa-card-title small { display: inline-flex; align-items: center; gap: 0.3rem; }
.marsa-office .marsa-card-title small svg { width: 0.9rem; height: 0.9rem; }
.marsa-office-figures a { display: flex; flex-direction: column; padding: 0.6rem 0.75rem; border-radius: var(--rax-radius, 0.5rem); background: var(--bs-tertiary-bg); color: inherit; text-decoration: none; }
.marsa-office-figures a:hover { background: var(--bs-primary-bg-subtle); }
.marsa-team { display: flex; align-items: center; min-height: 2.25rem; padding-inline-start: 0.4rem; }
.marsa-team > span { margin-inline-start: -0.4rem; }
.marsa-team-more { display: grid; place-items: center; width: 2rem; height: 2rem; border: 2px solid var(--rax-card-bg, var(--bs-body-bg)); border-radius: 50%; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-size: 0.75rem; font-weight: 700; }
.marsa-team-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.7rem; }
.marsa-office-spread { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.marsa-office-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.marsa-office-figures span { display: flex; flex-direction: column; padding: 0.6rem 0.75rem; border-radius: var(--rax-radius, 0.5rem); background: var(--bs-tertiary-bg); }
.marsa-office-figures strong { font-size: 1.35rem; color: var(--bs-emphasis-color); }
.marsa-office-figures small { color: var(--bs-secondary-color); }
.marsa-narrow { max-width: 40rem; }
.marsa-inline-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.marsa-inline-form > :first-child { flex: 1; }
.marsa-sortable { display: grid; gap: 0.4rem; }
.marsa-sortable-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem; border: 1px solid var(--bs-border-color); border-radius: var(--rax-radius, 0.5rem); background: var(--bs-body-bg); }
.marsa-sortable-name { flex: 1; font-weight: 500; }

/* ---------- Small screens ---------- */
@media (max-width: 991.98px) {
    .marsa-columns, .marsa-columns-wide-end { grid-template-columns: 1fr; }
    .marsa-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
}

@media (max-width: 575.98px) {
    .marsa-documents .marsa-toolbar-filters { flex-basis: 100%; }
    .marsa-page-heading h1 { font-size: 1.35rem; }
    .marsa-page-actions { width: 100%; }
    .marsa-page-actions > .btn { flex: 1; justify-content: center; }
    .marsa-toolbar { align-items: stretch; }
    .marsa-toolbar-filters { flex-direction: column; align-items: stretch; }
    .marsa-search, .marsa-select { width: 100%; min-width: 0; }
    .marsa-viewswitch { align-self: flex-start; }
    .marsa-container-entry { grid-template-columns: 1fr 1fr; }
    .marsa-container-entry > :first-child { grid-column: 1 / -1; }
    .marsa-radio-grid { grid-template-columns: 1fr; }
    .marsa-facts { grid-template-columns: 1fr; gap: 0.15rem; }
    .marsa-facts dd { margin-bottom: 0.5rem; }
    .marsa-money-split { grid-template-columns: 1fr; }
    .marsa-field-actions { grid-template-columns: 1fr; }
}

/* Short labels: expense types stay in two columns even on a phone. */
@media (max-width: 575.98px) {
    .marsa-radio-grid.marsa-radio-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}