/* ------------------------------------------------------------------
   The app's design system. Every new screen is built from it and legacy
   screens move onto it as they are touched: the rules, the component
   catalogue and the migration playbook are in docs/design-system.md.
   Everything is scoped to `.wm`; `.wm-report` is kept as an alias so the
   report pages work unchanged.
   Built on the existing brand: #1c6758 green, #fd841f accent, #f3f7f6 page.
   ------------------------------------------------------------------ */

.wm,
.wm-report,
.wm-nav,
.wm-topbar {
    --wm-page: #f3f7f6;
    --wm-green: #1c6758;
    --wm-green-600: #17564a;
    --wm-green-050: #eef5f3;
    --wm-accent: #fd841f;
    --wm-accent-050: #fff4e9;
    --wm-danger: #b3261e;
    --wm-danger-050: #fdeceb;
    --wm-ink: #12241f;
    /* Muted text. #5b6f6a on white is 5.4:1, so secondary lines stay AA. */
    --wm-muted: #5b6f6a;
    --wm-line: #e3ece9;
    --wm-line-soft: #eef3f2;
    --wm-surface: #fff;

    /* Chart marks. The brand green reads as gray at chart sizes (it fails the chroma floor), so marks
       use a slightly livelier pair. Both clear 3:1 on white and stay apart under colour blindness. */
    --wm-chart-1: #1c8a6e;
    --wm-chart-2: #e0680c;
    --wm-chart-muted: #c2d2ce;

    --wm-radius: 14px;
    --wm-shadow: 0 1px 2px rgba(18, 36, 31, .04);
    --wm-shadow-lift: 0 2px 4px rgba(18, 36, 31, .06), 0 10px 24px rgba(18, 36, 31, .09);
    --wm-ease: .18s ease;

    color: var(--wm-ink);
}

/* Tabular figures everywhere a number is compared down a column. */
:is(.wm, .wm-report) .wm-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------- Shell */

.wm-head,
.wm-report__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.wm-title,
.wm-report__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.wm-subtitle,
.wm-report__subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--wm-muted);
}

/* Segmented pill tab bar, replacing the default bootstrap nav-tabs look. */
.wm-tabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.3rem;
    margin: 0 0 1.5rem;
    list-style: none;
    background: var(--wm-green-050);
    border: 1px solid var(--wm-line);
    border-radius: 999px;
}

.wm-tabs__btn {
    appearance: none;
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 0.5rem 1.15rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--wm-muted);
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.wm-tabs__btn:hover {
    color: var(--wm-green);
}

.wm-tabs__btn.is-active {
    background: var(--wm-surface);
    color: var(--wm-green);
    box-shadow: 0 1px 2px rgba(18, 36, 31, .08), 0 3px 8px rgba(18, 36, 31, .06);
}

/* ------------------------------------------------------------- Filters */

.wm-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--wm-surface);
    border: 1px solid var(--wm-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(18, 36, 31, .04);
}

.wm-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 170px;
}

.wm-field--grow {
    flex: 1 1 190px;
}

.wm-field__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wm-muted);
}

:is(.wm, .wm-report) .wm-input {
    height: 42px;
    padding: 0 0.75rem;
    font-size: 0.9rem;
    color: var(--wm-ink);
    background-color: var(--wm-surface);
    border: 1px solid var(--wm-line);
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

:is(.wm, .wm-report) .wm-input:focus {
    outline: 0;
    border-color: var(--wm-green);
    box-shadow: 0 0 0 3px rgba(28, 103, 88, .14);
}

:is(.wm, .wm-report) .wm-input:disabled {
    background-color: var(--wm-line-soft);
    color: var(--wm-muted);
}

/* Custom chevron so the selects match the date field instead of falling back to the OS widget. */
:is(.wm, .wm-report) select.wm-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7f7a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 14px 14px;
}

:is(.wm, .wm-report) input[type="date"].wm-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
}

:is(.wm, .wm-report) input[type="date"].wm-input:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

:is(.wm, .wm-report) .wm-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 42px;
    padding: 0 1.3rem;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
}

:is(.wm, .wm-report) .wm-btn:active {
    transform: translateY(1px);
}

:is(.wm, .wm-report) .wm-btn--primary {
    color: #fff;
    background: linear-gradient(180deg, #227a68 0%, var(--wm-green) 100%);
    box-shadow: 0 1px 2px rgba(18, 36, 31, .12), 0 4px 12px rgba(28, 103, 88, .22);
}

:is(.wm, .wm-report) .wm-btn--primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #24856f 0%, var(--wm-green-600) 100%);
}

:is(.wm, .wm-report) .wm-btn--primary:disabled {
    opacity: .6;
    box-shadow: none;
}

:is(.wm, .wm-report) .wm-btn--ghost {
    color: var(--wm-green);
    background: var(--wm-surface);
    border-color: var(--wm-line);
}

:is(.wm, .wm-report) .wm-btn--ghost:hover:not(:disabled) {
    background: var(--wm-green-050);
}

/* ----------------------------------------------------------- KPI tiles */

.wm-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

.wm-kpi {
    position: relative;
    padding: 1rem 1.1rem 1.05rem 1.35rem;
    overflow: hidden;
    background: var(--wm-surface);
    border: 1px solid var(--wm-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(18, 36, 31, .04);
}

/* Colour spine, so the tiles read as a set without shouting. */
.wm-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--wm-green);
}

.wm-kpi--accent::before { background: var(--wm-accent); }
.wm-kpi--danger::before { background: var(--wm-danger); }
.wm-kpi--muted::before  { background: #c2d2ce; }

.wm-kpi__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wm-muted);
}

.wm-kpi__value {
    margin-top: 0.35rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.wm-kpi__value small {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wm-muted);
    margin-left: 0.25rem;
}

.wm-kpi__caption {
    margin-top: 0.3rem;
    font-size: 0.74rem;
    color: var(--wm-muted);
}

/* ---------------------------------------------------------- Aging bands */

.wm-aging {
    padding: 1.1rem 1.25rem 1.2rem;
    margin-bottom: 1.25rem;
    background: var(--wm-surface);
    border: 1px solid var(--wm-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(18, 36, 31, .04);
}

.wm-aging__title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wm-muted);
    margin-bottom: 0.75rem;
}

.wm-aging__bar {
    display: flex;
    height: 14px;
    overflow: hidden;
    background: var(--wm-line-soft);
    border-radius: 999px;
}

.wm-aging__seg {
    height: 100%;
    transition: width .5s cubic-bezier(.22, .61, .36, 1);
}

.wm-aging__seg + .wm-aging__seg {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .85);
}

/* Sequential ramp: fresher debt pale, oldest debt darkest red. */
.wm-aging__seg--b1 { background: #7fb3a5; }
.wm-aging__seg--b2 { background: #e8b77a; }
.wm-aging__seg--b3 { background: var(--wm-accent); }
.wm-aging__seg--b4 { background: #dd6a4a; }
.wm-aging__seg--b5 { background: var(--wm-danger); }

.wm-aging__legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem 1.1rem;
    margin-top: 0.95rem;
}

.wm-aging__item {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.78rem;
}

.wm-aging__dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    transform: translateY(-1px);
}

.wm-aging__name {
    color: var(--wm-muted);
}

.wm-aging__val {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- Badges */

.wm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.13rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 6px;
    white-space: nowrap;
}

.wm-badge--warn    { color: #8a4a06; background: var(--wm-accent-050); }
.wm-badge--danger  { color: var(--wm-danger); background: var(--wm-danger-050); }
.wm-badge--neutral { color: var(--wm-muted); background: var(--wm-line-soft); }
.wm-badge--ok      { color: var(--wm-green); background: var(--wm-green-050); }

.wm-cell-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.wm-cell-name__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wm-link {
    color: var(--wm-green);
    font-weight: 600;
    text-decoration: none;
}

.wm-link:hover {
    color: var(--wm-green-600);
    text-decoration: underline;
}

.wm-money        { font-variant-numeric: tabular-nums; font-weight: 600; }
.wm-money--debt  { color: var(--wm-danger); }

/* --------------------------------------------------- Syncfusion grid skin */

.wm-grid {
    background: var(--wm-surface);
    border: 1px solid var(--wm-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(18, 36, 31, .04);
}

.wm-grid .e-grid {
    border: 0;
    font-size: 0.86rem;
}

.wm-grid .e-grid .e-gridheader {
    border-top: 0;
    background: var(--wm-green-050);
    border-bottom: 1px solid var(--wm-line);
}

.wm-grid .e-grid .e-headercell {
    background: transparent;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.wm-grid .e-grid .e-headertext {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wm-green);
}

.wm-grid .e-grid .e-rowcell {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    border-color: var(--wm-line-soft);
    color: var(--wm-ink);
}

.wm-grid .e-grid .e-row:hover .e-rowcell {
    background-color: var(--wm-green-050);
}

.wm-grid .e-grid .e-toolbar {
    border: 0;
    border-bottom: 1px solid var(--wm-line);
    background: var(--wm-surface);
}

.wm-grid .e-grid .e-altrow .e-rowcell {
    background-color: #fbfdfc;
}

/* ------------------------------------------------------- Empty / hint states */

.wm-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--wm-muted);
    background: var(--wm-surface);
    border: 1px dashed var(--wm-line);
    border-radius: 14px;
}

.wm-empty__icon {
    font-size: 2rem;
    color: #bfd2cd;
}

.wm-empty__title {
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--wm-ink);
}

.wm-empty__text {
    font-size: 0.84rem;
    margin-top: 0.2rem;
}

/* A quiet caveat line under a figure that needs one. */
.wm-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.7rem 0.95rem;
    margin-bottom: 1.25rem;
    font-size: 0.79rem;
    line-height: 1.45;
    color: #7a5217;
    background: var(--wm-accent-050);
    border: 1px solid #f7ddc0;
    border-radius: 10px;
}

.wm-note__icon {
    flex: 0 0 auto;
    font-size: 1rem;
    color: var(--wm-accent);
}

@media (max-width: 767.98px) {
    .wm-filters { padding: 1rem; }
    .wm-field, .wm-field--grow { flex: 1 1 100%; min-width: 0; }
    :is(.wm, .wm-report) .wm-btn { width: 100%; justify-content: center; }
    .wm-kpi__value { font-size: 1.35rem; }
    .wm-tabs { display: flex; width: 100%; overflow-x: auto; border-radius: 12px; }
}

/* ======================================================================
   Dashboard and list components
   ====================================================================== */

:is(.wm, .wm-report) :focus-visible {
    outline: 2px solid var(--wm-green);
    outline-offset: 2px;
}

/* The router focuses the page heading on navigation so screen readers announce it; sighted users need no ring there. */
:is(.wm, .wm-report) h1:focus-visible {
    outline: 0;
}

:is(.wm, .wm-report) .wm-btn--sm {
    height: 34px;
    padding: 0 0.9rem;
    font-size: 0.82rem;
}

:is(.wm, .wm-report) .wm-btn--ghost,
:is(.wm, .wm-report) .wm-btn--primary {
    text-decoration: none;
}

/* ------------------------------------------------------------ Page header */

.wm-back {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--wm-muted);
    text-decoration: none;
}

.wm-back:hover {
    color: var(--wm-green);
}

.wm-greeting {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.9rem 1.5rem;
    margin-bottom: 1.25rem;
}

.wm-greeting__hello {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.wm-greeting__date {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--wm-muted);
}

.wm-greeting__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.wm-updated {
    font-size: 0.76rem;
    color: var(--wm-muted);
    white-space: nowrap;
}

/* ----------------------------------------------------------------- Panel */

.wm-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--wm-surface);
    border: 1px solid var(--wm-line);
    border-radius: var(--wm-radius);
    box-shadow: var(--wm-shadow);
}

.wm-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 1rem 1.25rem 0.6rem;
}

.wm-panel__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.wm-panel__subtitle {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    color: var(--wm-muted);
}

.wm-panel__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.wm-panel__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.2rem 1.25rem 1.25rem;
}

.wm-panel__body--flush {
    padding: 0;
}

.wm-panel__error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    padding: 0.85rem 1rem;
    font-size: 0.84rem;
    color: var(--wm-danger);
    background: var(--wm-danger-050);
    border-radius: 10px;
}

.wm-panel__error .wm-link {
    color: var(--wm-danger);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
}

.wm-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.wm-dash-stack {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* ------------------------------------------------------------ KPI tiles */

.wm-kpis--wide {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.wm-kpi__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.wm-kpi__chev {
    font-size: 1.15rem;
    line-height: 1;
    color: var(--wm-muted);
    transition: transform var(--wm-ease), color var(--wm-ease);
}

.wm-kpi__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin-top: 0.4rem;
}

.wm-kpi__meta .wm-kpi__caption {
    margin-top: 0;
}

/* Big standalone numbers use proportional figures; tabular is for columns. */
.wm-kpi--link .wm-kpi__value {
    font-variant-numeric: normal;
    font-feature-settings: normal;
}

.wm-kpi__spark {
    margin-top: 0.7rem;
}

a.wm-kpi--link,
.wm-kpi--link {
    display: block;
    color: var(--wm-ink);
    text-decoration: none;
    transition: transform var(--wm-ease), box-shadow var(--wm-ease), border-color var(--wm-ease);
}

.wm-kpi--link:hover {
    color: var(--wm-ink);
    border-color: #cfe0db;
    transform: translateY(-2px);
    box-shadow: var(--wm-shadow-lift);
}

.wm-kpi--link:hover .wm-kpi__chev {
    color: var(--wm-green);
    transform: translateX(2px);
}

.wm-kpi--link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(28, 103, 88, .35), var(--wm-shadow-lift);
}

.wm-kpi.is-loading .wm-kpi__value,
.wm-kpi.is-loading .wm-kpi__caption {
    visibility: hidden;
}

/* Change against the previous period. Direction is the glyph; tone says whether the change is good. */
.wm-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    white-space: nowrap;
}

.wm-delta--good    { color: var(--wm-green);  background: var(--wm-green-050); }
.wm-delta--bad     { color: var(--wm-danger); background: var(--wm-danger-050); }
.wm-delta--neutral { color: var(--wm-muted);  background: var(--wm-line-soft); }

/* ------------------------------------------------------------ Sparklines */

.wm-spark {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.wm-spark__base {
    stroke: var(--wm-line);
    stroke-width: 1;
}

.wm-spark__line {
    fill: none;
    stroke: var(--wm-chart-1);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wm-spark__area {
    fill: var(--wm-chart-1);
    opacity: 0.1;
}

.wm-spark__dot {
    fill: var(--wm-chart-1);
    stroke: var(--wm-surface);
    stroke-width: 2;
}

/* Bars: the earlier days recede, the latest day carries the colour. */
.wm-spark__bar {
    fill: var(--wm-chart-muted);
}

.wm-spark__bar--last {
    fill: var(--wm-chart-1);
}

.wm-spark__hit {
    fill: transparent;
}

.wm-spark--accent .wm-spark__line {
    stroke: var(--wm-chart-2);
}

.wm-spark--accent .wm-spark__area,
.wm-spark--accent .wm-spark__dot,
.wm-spark--accent .wm-spark__bar--last {
    fill: var(--wm-chart-2);
}

/* ------------------------------------------------------------ Stack bar */

.wm-stackbar {
    display: flex;
    gap: 2px;
    height: 10px;
    background: transparent;
}

.wm-stackbar--empty {
    background: var(--wm-line-soft);
    border-radius: 4px;
}

.wm-stackbar__seg {
    height: 100%;
    min-width: 4px;
    border-radius: 4px;
    transition: flex-grow .4s cubic-bezier(.22, .61, .36, 1);
}

.wm-stackbar__seg--1 { background: var(--wm-chart-1); }
.wm-stackbar__seg--2 { background: var(--wm-chart-2); }
.wm-stackbar__seg--3 { background: var(--wm-chart-muted); }

.wm-stackbar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.1rem;
    margin-top: 0.6rem;
    font-size: 0.78rem;
}

.wm-stackbar__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}

.wm-stackbar__dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    transform: translateY(-1px);
}

.wm-stackbar__name { color: var(--wm-muted); }
.wm-stackbar__val  { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- Ranked bars */

.wm-rank {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wm-rank__row {
    display: grid;
    grid-template-columns: minmax(6.5rem, 11rem) minmax(0, 1fr) auto 3.2rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.55rem;
    color: inherit;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color var(--wm-ease);
}

a.wm-rank__row:hover {
    color: inherit;
    background: var(--wm-green-050);
}

.wm-rank__row.is-you {
    background: var(--wm-green-050);
}

.wm-rank__name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 600;
}

.wm-rank__name span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The track is a lighter step of the same ramp; the fill is square at the baseline, rounded at its end. */
.wm-rank__track {
    height: 10px;
    background: var(--wm-line-soft);
    border-radius: 4px;
}

.wm-rank__fill {
    height: 100%;
    min-width: 2px;
    background: var(--wm-chart-1);
    border-radius: 0 4px 4px 0;
    transition: width .4s cubic-bezier(.22, .61, .36, 1);
}

.wm-rank__amount {
    font-size: 0.86rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.wm-rank__pct {
    font-size: 0.78rem;
    color: var(--wm-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ Linked metric lines */

.wm-lines {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wm-line-link {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.6rem 0.5rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--wm-line-soft);
    border-radius: 8px;
    transition: background-color var(--wm-ease);
}

.wm-lines li:last-child .wm-line-link {
    border-bottom-color: transparent;
}

.wm-line-link:hover {
    color: inherit;
    background: var(--wm-green-050);
}

.wm-line-link__label {
    flex: 0 0 6.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wm-muted);
}

.wm-line-link__value {
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wm-line-link__sub {
    margin-left: auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--wm-muted);
    font-variant-numeric: tabular-nums;
}

.wm-line-link__chev {
    align-self: center;
    font-size: 1rem;
    line-height: 1;
    color: var(--wm-muted);
}

.wm-line-link--muted .wm-line-link__label {
    flex: 1 1 auto;
    letter-spacing: 0.04em;
}

.wm-line-link--muted .wm-line-link__value {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--wm-muted);
    white-space: nowrap;
}

.wm-footnote {
    margin: 0.8rem 0 0;
    font-size: 0.76rem;
    color: var(--wm-muted);
}

/* ------------------------------------------------------ Segmented control */

.wm-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    padding: 0.2rem;
    background: var(--wm-green-050);
    border: 1px solid var(--wm-line);
    border-radius: 10px;
}

.wm-segmented__btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0.38rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wm-muted);
    white-space: nowrap;
    border-radius: 8px;
    transition: background-color var(--wm-ease), color var(--wm-ease), box-shadow var(--wm-ease);
}

.wm-segmented__btn:hover {
    color: var(--wm-green);
}

.wm-segmented__btn.is-active {
    color: var(--wm-green);
    background: var(--wm-surface);
    box-shadow: 0 1px 2px rgba(18, 36, 31, .08), 0 3px 8px rgba(18, 36, 31, .06);
}

.wm-range__custom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

:is(.wm, .wm-report) .wm-range__custom .wm-input {
    width: 9.5rem;
    height: 36px;
    min-width: 0;
    flex: 0 0 auto;
}

/* ------------------------------------------------------- Filter extras */

.wm-filters--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
}

.wm-filters__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.9rem 1.25rem;
}

.wm-filters__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--wm-line-soft);
}

.wm-search {
    position: relative;
    flex: 1 1 320px;
}

.wm-search .bx {
    position: absolute;
    top: 50%;
    left: 0.8rem;
    font-size: 1.1rem;
    color: var(--wm-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

:is(.wm, .wm-report) .wm-search .wm-input {
    width: 100%;
    padding-left: 2.4rem;
}

.wm-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.wm-chips__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wm-muted);
}

.wm-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.18rem 0.3rem 0.18rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--wm-green);
    background: var(--wm-green-050);
    border: 1px solid var(--wm-line);
    border-radius: 999px;
}

.wm-chip__x {
    appearance: none;
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--wm-muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
    transition: background-color var(--wm-ease), color var(--wm-ease);
}

.wm-chip__x:hover {
    color: var(--wm-green);
    background: rgba(28, 103, 88, .12);
}

.wm-linkbtn {
    appearance: none;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wm-green);
    background: none;
    border: 0;
}

.wm-linkbtn:hover {
    color: var(--wm-green-600);
    text-decoration: underline;
}

/* ----------------------------------------------------------------- Table */

.wm-tablewrap {
    position: relative;
    background: var(--wm-surface);
    border: 1px solid var(--wm-line);
    border-radius: var(--wm-radius);
    box-shadow: var(--wm-shadow);
    /* clip, not hidden: it rounds the corners without becoming a scroll container, so the header can stay sticky */
    overflow: clip;
}

.wm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.86rem;
}

.wm-table thead th {
    position: sticky;
    top: var(--wm-sticky-top, 0);
    z-index: 2;
    padding: 0.7rem 0.9rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--wm-green);
    background: var(--wm-green-050);
    border-bottom: 1px solid var(--wm-line);
}

.wm-table th.is-num,
.wm-table td.is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.wm-table tbody td {
    height: 52px;
    padding: 0.45rem 0.9rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--wm-line-soft);
}

.wm-table tbody tr:last-child td {
    border-bottom: 0;
}

.wm-table tbody tr {
    transition: background-color var(--wm-ease);
}

.wm-table tbody tr:hover {
    background: #f8fbfa;
}

.wm-table__sort {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    background: none;
    border: 0;
}

.wm-table__sort:hover {
    text-decoration: underline;
}

.wm-table__sort .bx {
    font-size: 0.95rem;
    line-height: 1;
}

.wm-sub {
    display: block;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--wm-muted);
}

.wm-cell-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
}

.wm-badge--muted {
    color: var(--wm-muted);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--wm-line);
}

/* Refetching keeps the rows on screen under a veil, so the layout does not jump. */
.wm-is-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity var(--wm-ease);
}

.wm-tablewrap [aria-busy="true"] {
    cursor: progress;
}

.wm-skeleton {
    display: block;
    height: 0.9rem;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--wm-line-soft) 25%, #f8fbfa 50%, var(--wm-line-soft) 75%);
    background-size: 200% 100%;
    animation: wm-shimmer 1.4s linear infinite;
}

.wm-skeleton--tile { height: 1.7rem; width: 60%; margin-top: 0.4rem; }
.wm-skeleton--line { height: 0.7rem; width: 45%; margin-top: 0.55rem; }
.wm-skeleton--row { height: 1rem; }

@keyframes wm-shimmer {
    to { background-position: -200% 0; }
}

/* ----------------------------------------------------------------- Pager */

.wm-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1.25rem;
    padding: 0.8rem 1rem;
    font-size: 0.82rem;
    color: var(--wm-muted);
    border-top: 1px solid var(--wm-line);
}

.wm-pager__size {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

:is(.wm, .wm-report) .wm-pager__size .wm-input {
    height: 34px;
    font-size: 0.82rem;
}

.wm-pager__pages {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.wm-pager__btn {
    appearance: none;
    min-width: 34px;
    height: 34px;
    padding: 0 0.4rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--wm-ink);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background-color var(--wm-ease), color var(--wm-ease);
}

.wm-pager__btn:hover:not(:disabled):not(.is-active) {
    background: var(--wm-green-050);
}

.wm-pager__btn.is-active {
    color: #fff;
    background: var(--wm-green);
}

.wm-pager__btn:disabled {
    opacity: 0.4;
}

.wm-pager__gap {
    padding: 0 0.15rem;
    color: var(--wm-muted);
}

/* --------------------------------------------------------- Icon buttons */

.wm-iconbtn {
    appearance: none;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--wm-green);
    background: var(--wm-surface);
    border: 1px solid var(--wm-line);
    border-radius: 8px;
    text-decoration: none;
    transition: background-color var(--wm-ease), border-color var(--wm-ease);
}

.wm-iconbtn:hover:not(:disabled) {
    color: var(--wm-green);
    background: var(--wm-green-050);
    border-color: #cfe0db;
}

.wm-iconbtn:disabled {
    color: var(--wm-muted);
    opacity: 0.5;
}

/* ------------------------------------------------------ Empty state extras */

.wm-empty__action {
    margin-top: 1rem;
}

.wm-empty--flat {
    border: 0;
    padding: 2rem 1rem;
}

/* ------------------------------------------------------------ Cash panel */

.wm-balance {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.25rem;
}

.wm-balance__value {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.wm-balance__value.is-negative {
    color: var(--wm-danger);
}

.wm-balance__unit {
    margin-left: 0.3rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wm-muted);
}

/* Balance, period figures and actions beside the movements when the panel is wide enough, stacked when not.
   A container query, because the panel's width depends on the sidebar as much as on the screen. */
.wm-cash {
    container-type: inline-size;
}

.wm-cash__grid {
    display: grid;
    gap: 1.5rem;
}

.wm-cash__summary {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.wm-cash__caption {
    margin: 0.1rem 0 0;
    font-size: 0.76rem;
    color: var(--wm-muted);
}

.wm-cash__period {
    margin-bottom: 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wm-muted);
}

.wm-cash__stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem;
}

.wm-cash__stat {
    padding: 0.7rem 0.85rem;
    background: #fbfdfc;
    border: 1px solid var(--wm-line-soft);
    border-radius: 10px;
}

.wm-cash__stat-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wm-muted);
}

.wm-cash__stat-value {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wm-cash__stat-value.is-in   { color: var(--wm-green); }
.wm-cash__stat-value.is-out  { color: var(--wm-danger); }
.wm-cash__stat-value.is-zero { color: var(--wm-muted); }

.wm-cash__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem;
}

:is(.wm, .wm-report) .wm-cash__actions .wm-btn {
    justify-content: center;
}

.wm-cash__actions .is-out .bx {
    color: var(--wm-danger);
}

.wm-cash__list-title {
    margin: 0 0 0.15rem;
    font-size: 0.86rem;
    font-weight: 700;
}

@container (min-width: 720px) {
    .wm-cash__grid {
        grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
        gap: 2rem;
    }

    .wm-cash__list {
        padding-left: 1.75rem;
        border-left: 1px solid var(--wm-line-soft);
    }
}

/* ----------------------------------------------------------------- Ledger */

/* Money movements grouped by day. Each row is one button that opens the movement for editing: a phone gets a
   full-width tap target, the keyboard one tab stop per row. Direction is told three ways (icon, sign, colour),
   so it never rests on colour alone. */
.wm-ledger {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wm-ledger__day {
    padding: 0.9rem 0.5rem 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wm-muted);
}

.wm-ledger__day:first-child {
    padding-top: 0.35rem;
}

.wm-ledger__row {
    appearance: none;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto 1rem;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 56px;
    padding: 0.5rem;
    font: inherit;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 10px;
    transition: background-color var(--wm-ease);
}

.wm-ledger__row:hover {
    background: var(--wm-green-050);
}

.wm-ledger__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
    border-radius: 50%;
}

.wm-ledger__icon--in  { color: var(--wm-green);  background: rgba(28, 138, 110, .14); }
.wm-ledger__icon--out { color: var(--wm-danger); background: rgba(179, 38, 30, .09); }

.wm-ledger__text {
    min-width: 0;
}

.wm-ledger__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.wm-ledger__desc.is-empty {
    font-weight: 500;
    color: var(--wm-muted);
}

.wm-ledger__meta {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.76rem;
    color: var(--wm-muted);
    font-variant-numeric: tabular-nums;
}

.wm-ledger__amount {
    font-size: 0.95rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wm-ledger__amount--in  { color: var(--wm-green); }
.wm-ledger__amount--out { color: var(--wm-danger); }

.wm-ledger__edit {
    font-size: 1rem;
    color: var(--wm-muted);
    opacity: 0.55;
    transition: color var(--wm-ease), opacity var(--wm-ease);
}

.wm-ledger__row:hover .wm-ledger__edit,
.wm-ledger__row:focus-visible .wm-ledger__edit {
    color: var(--wm-green);
    opacity: 1;
}

/* ------------------------------------------------------------------ Forms */

.wm-form {
    display: grid;
    gap: 1.1rem;
}

.wm-form .wm-field {
    min-width: 0;
}

:is(.wm, .wm-report) textarea.wm-input {
    height: auto;
    min-height: 84px;
    padding: 0.6rem 0.75rem;
    line-height: 1.45;
    resize: vertical;
}

/* The one number a form is about, set large. */
:is(.wm, .wm-report) .wm-input--lg {
    height: 56px;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* Spinner arrows are useless for money and look like a browser default. */
:is(.wm, .wm-report) input[type="number"].wm-input {
    appearance: textfield;
    -moz-appearance: textfield;
}

:is(.wm, .wm-report) input[type="number"].wm-input::-webkit-inner-spin-button,
:is(.wm, .wm-report) input[type="number"].wm-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

:is(.wm, .wm-report) .wm-input[aria-invalid="true"] {
    border-color: var(--wm-danger);
}

:is(.wm, .wm-report) .wm-input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .14);
}

/* An input with its unit inside the field ("MKD"). */
.wm-affix {
    position: relative;
}

:is(.wm, .wm-report) .wm-affix .wm-input {
    width: 100%;
    padding-right: 3.75rem;
}

.wm-affix__suffix {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wm-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.wm-field__error {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--wm-danger);
}

.wm-field__hint {
    font-size: 0.76rem;
    color: var(--wm-muted);
}

/* Full-width segmented control, for a choice inside a form. */
.wm-segmented--block {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
}

.wm-segmented--block .wm-segmented__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 40px;
    font-size: 0.86rem;
}

.wm-segmented__btn.is-active.is-danger {
    color: var(--wm-danger);
}

/* ------------------------------------------------------- Buttons: extras */

:is(.wm, .wm-report) .wm-btn--danger {
    color: #fff;
    background: var(--wm-danger);
    box-shadow: 0 1px 2px rgba(18, 36, 31, .12), 0 4px 12px rgba(179, 38, 30, .2);
}

:is(.wm, .wm-report) .wm-btn--danger:hover:not(:disabled) {
    background: #9c2019;
}

:is(.wm, .wm-report) .wm-btn--danger:disabled {
    opacity: .6;
    box-shadow: none;
}

/* Shown inside a button while its action runs; the button is disabled at the same time. */
.wm-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: wm-spin .7s linear infinite;
}

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

.wm-link--chev {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    font-size: 0.84rem;
}

/* ----------------------------------------------------------------- Dialog */

/* A native <dialog> opened with showModal() (Shared/Wm/Dialog.razor): the browser draws it above everything, so
   it never fights the fixed header's z-index, and it makes the page behind inert and keeps focus inside.
   A centred card from 576px up, a bottom sheet below. */
.wm-dialog {
    width: min(480px, calc(100vw - 2rem));
    max-height: min(720px, calc(100vh - 2rem));
    max-height: min(720px, calc(100dvh - 2rem));
    padding: 0;
    color: var(--wm-ink);
    background: var(--wm-surface);
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(18, 36, 31, .22), 0 2px 8px rgba(18, 36, 31, .08);
    overflow: hidden;
}

.wm-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: wm-dialog-in .2s cubic-bezier(.22, .61, .36, 1);
}

/* Literal colours: custom properties do not reach ::backdrop in every browser still in use. */
.wm-dialog::backdrop {
    background: rgba(18, 36, 31, .42);
    backdrop-filter: blur(2px);
    animation: wm-fade-in .2s ease;
}

.wm-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem 0.8rem;
}

.wm-dialog__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.wm-dialog__subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--wm-muted);
}

.wm-dialog__close {
    flex: 0 0 auto;
    margin: -0.3rem -0.45rem 0 0;
    color: var(--wm-muted);
    border-color: transparent;
}

.wm-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.25rem 1.25rem 1.35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wm-dialog__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.9rem 1.25rem;
    background: #fbfdfc;
    border-top: 1px solid var(--wm-line-soft);
}

body.wm-dialog-open {
    overflow: hidden;
}

@keyframes wm-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
}

@keyframes wm-sheet-in {
    from { transform: translateY(100%); }
}

@keyframes wm-fade-in {
    from { opacity: 0; }
}

@media (max-width: 575.98px) {
    .wm-dialog {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 2.5rem);
        max-height: calc(100dvh - 2.5rem);
        margin: auto 0 0;
        border-radius: 18px 18px 0 0;
    }

    .wm-dialog[open] {
        animation: wm-sheet-in .24s cubic-bezier(.22, .61, .36, 1);
    }

    .wm-dialog__foot {
        padding-bottom: calc(0.9rem + env(safe-area-inset-bottom));
    }
}

/* ------------------------------------------------------------ Responsive */

@media (min-width: 768px) {
    .wm { --wm-sticky-top: 4rem; }
}

@media (max-width: 991.98px) {
    .wm-dash-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .wm-greeting__hello { font-size: 1.25rem; }
    .wm-panel__head { padding: 0.9rem 1rem 0.5rem; }
    .wm-panel__body { padding: 0.2rem 1rem 1rem; }

    .wm-filters__row { gap: 0.75rem; }
    .wm-search { flex-basis: 100%; }
    .wm-pager { justify-content: center; }

    /* Name and amount share the first line, the bar spans the second. */
    .wm-rank__row {
        grid-template-columns: minmax(0, 1fr) auto 3rem;
        gap: 0.3rem 0.6rem;
    }
    .wm-rank__track { grid-column: 1 / -1; grid-row: 2; }

    /* The archive table collapses into stacked cards instead of scrolling sideways. */
    .wm-table--cards thead { display: none; }
    .wm-table--cards,
    .wm-table--cards tbody,
    .wm-table--cards tr,
    .wm-table--cards td { display: block; width: 100%; }
    .wm-table--cards tbody tr {
        padding: 0.7rem 1rem;
        border-bottom: 1px solid var(--wm-line);
    }
    .wm-table--cards tbody tr:last-child { border-bottom: 0; }
    .wm-table--cards tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        height: auto;
        padding: 0.25rem 0;
        text-align: right;
        border-bottom: 0;
    }
    .wm-table--cards tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--wm-muted);
    }
    .wm-table--cards tbody td[data-label=""]::before { content: none; }
    .wm-table--cards .wm-cell-actions { justify-content: flex-end; }

    /* Touch targets: 40px minimum on phones. */
    .wm-segmented__btn { min-height: 40px; }
    .wm-iconbtn { width: 40px; height: 40px; }

    /* In a card row, a cell with two lines (a title and its detail) stacks them instead of putting them side by side. */
    .wm-table--cards .wm-cell-stack { min-width: 0; }

    /* Dialog actions share the row equally instead of each taking a full line. */
    .wm-dialog__foot .wm-btn { flex: 1 1 0; }

    .wm-ledger__row { gap: 0.6rem; padding: 0.5rem 0.25rem; }
    .wm-ledger__day { padding-left: 0.25rem; }
}

/* ------------------------------------------------------------ Detail and form pages
   Pieces for a record's page (ticket, and later contract, customer) and for a page-sized form. */

/* A form page that stops at a comfortable reading width instead of stretching across a wide screen. */
.wm-narrow { max-width: 880px; }

.wm-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    margin-top: 0.55rem;
}

/* A clickable table row: the whole row opens the record, the title in it stays a real link. */
.wm-table tbody tr.is-link { cursor: pointer; }

.wm-cell-link {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    color: var(--wm-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* Wrap a cell's lines in this so a card row keeps them stacked (see the card rules in the responsive block). */
.wm-cell-stack { min-width: 0; }

.wm-cell-link:hover { color: var(--wm-green); text-decoration: underline; }

/* Label over value, as many columns as fit. Use <dl><div><dt/><dd/></div></dl>. */
.wm-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.9rem 1.5rem;
    margin: 0;
}

.wm-facts > div { min-width: 0; }

.wm-facts dt {
    margin: 0 0 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wm-muted);
}

.wm-facts dd { margin: 0; font-size: 0.88rem; overflow-wrap: anywhere; }

/* Free text written by a person: keeps its line breaks, wraps long words. */
.wm-prose {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* A quiet box inside a panel (an earlier resolution, a step being edited). */
.wm-inset {
    padding: 0.9rem 1rem;
    background: var(--wm-green-050);
    border: 1px solid var(--wm-line);
    border-radius: 10px;
}

.wm-subhead {
    margin: 1.1rem 0 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wm-muted);
}

.wm-steps {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding-left: 1.3rem;
    font-size: 0.88rem;
}

.wm-steps li::marker { font-weight: 700; color: var(--wm-green); }

/* Comments: a person, when, and what they wrote, oldest first. */
.wm-thread {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wm-comment {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0.7rem;
}

.wm-comment__avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--wm-green);
    background: var(--wm-green-050);
}

.wm-comment__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.6rem;
}

.wm-comment__name { font-size: 0.86rem; font-weight: 700; }
.wm-comment__time { font-size: 0.76rem; color: var(--wm-muted); }

.wm-comment__text {
    margin: 0.15rem 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wm-composer {
    display: grid;
    gap: 0.6rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--wm-line-soft);
}

.wm-composer__actions { display: flex; justify-content: flex-end; }

/* A search box inside a form field is a block, not a flex item that stretches to its 320px basis. */
.wm-field > .wm-search { flex: none; }

/* Choose a record by typing: the results drop under the input, the choice replaces it. */
.wm-pick__list {
    max-height: 320px;
    margin: 0.4rem 0 0;
    padding: 0.25rem;
    overflow-y: auto;
    list-style: none;
    background: var(--wm-surface);
    border: 1px solid var(--wm-line);
    border-radius: 10px;
    box-shadow: var(--wm-shadow-lift);
}

.wm-pick__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    font: inherit;
    font-size: 0.88rem;
    color: inherit;
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: 8px;
}

.wm-pick__item:hover,
.wm-pick__item:focus-visible { background: var(--wm-green-050); }

.wm-pick__name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.wm-pick__meta { flex: none; font-size: 0.78rem; color: var(--wm-muted); }

.wm-pick__empty {
    margin: 0.4rem 0 0;
    padding: 0.7rem 0.8rem;
    font-size: 0.84rem;
    color: var(--wm-muted);
}

.wm-pick__chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.8rem;
    background: var(--wm-green-050);
    border: 1px solid var(--wm-line);
    border-radius: 10px;
}

.wm-pick__chosen strong { overflow-wrap: anywhere; }

/* A checkbox with a label, as big as a finger. */
.wm-check {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 40px;
    font-size: 0.88rem;
    cursor: pointer;
}

.wm-check input {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--wm-green);
}

/* A numbered, reorderable row of fields (the steps taken to resolve a ticket). */
.wm-stepedit {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: start;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--wm-line-soft);
}

.wm-stepedit__no {
    padding-top: 0.7rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--wm-green);
    text-align: right;
}

.wm-stepedit__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.wm-stepedit__fields > :first-child { grid-column: 1 / -1; }
.wm-stepedit__actions { display: flex; gap: 0.25rem; padding-top: 0.15rem; }

/* A picture viewer: the Dialog, taken to full screen on a dark ground. */
.wm-dialog.wm-lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    color: #fff;
    background: var(--wm-ink);
    border-radius: 0;
}

.wm-lightbox .wm-dialog__head { padding: 0.6rem 0.9rem; }
.wm-lightbox .wm-dialog__title { font-size: 0.9rem; overflow-wrap: anywhere; }
.wm-lightbox .wm-dialog__subtitle { color: rgba(255, 255, 255, .78); }
/* The close button keeps its white chip (green icon) so it reads on the dark ground */
.wm-lightbox .wm-dialog__close { margin: 0; color: var(--wm-green); background: var(--wm-surface); }
.wm-lightbox__picture .wm-spinner { font-size: 2rem; }

.wm-lightbox .wm-dialog__body {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.wm-lightbox .wm-dialog__foot {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.wm-lightbox__stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.5rem;
    outline: 0;
}

.wm-lightbox__picture {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wm-lightbox__picture img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.wm-lightbox__nav {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    font-size: 1.75rem;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    background: rgba(255, 255, 255, .15);
    border: 0;
    border-radius: 50%;
}

.wm-lightbox__nav:hover:not(:disabled) { background: rgba(255, 255, 255, .26); }
.wm-lightbox__nav:disabled { opacity: .25; cursor: default; }
.wm-lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.wm-lightbox__caption {
    flex: none;
    padding: 0.5rem 0.9rem 0.8rem;
    font-size: 0.82rem;
    text-align: center;
    color: rgba(255, 255, 255, .85);
}

@media (max-width: 575.98px) {
    .wm-stepedit { grid-template-columns: 1.6rem minmax(0, 1fr); }
    .wm-stepedit__actions { grid-column: 2; justify-content: flex-end; }
    .wm-stepedit__fields { grid-template-columns: minmax(0, 1fr); }
    .wm-lightbox__nav { width: 2.25rem; height: 2.25rem; }
}

/* ---------------------------------------------------------------- Navigation shell
   The top bar and the drawer sit outside any page's `.wm` root, so they carry their own token scope (first rule
   of this file). Whether the drawer is open is the contract in app.js: `nav-visible` / `nav-hidden` on #nav-bar.
   Default: open from 768px, closed below. A closed drawer is also `visibility: hidden`, so its links leave the
   tab order. Page offsets (main, body-pd, overlay) still come from navbar.css. */

.wm-topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 101;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0.75rem;
    background: var(--wm-page);
    border-bottom: 1px solid var(--wm-line);
}

.wm-topbar__start {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.wm-topbar__toggle,
.wm-topbar__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 10px;
    color: var(--wm-green);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--wm-ease), border-color var(--wm-ease);
}

.wm-topbar__toggle {
    width: 40px;
    font-size: 1.5rem;
}

.wm-topbar__back {
    gap: 0.15rem;
    padding: 0 0.85rem 0 0.5rem;
    font-size: 0.86rem;
    font-weight: 600;
    background: var(--wm-surface);
    border-color: var(--wm-line);
    color: var(--wm-ink);
    box-shadow: var(--wm-shadow);
}

.wm-topbar__back i { font-size: 1.25rem; color: var(--wm-green); }

.wm-topbar__toggle:hover { background: var(--wm-green-050); }
.wm-topbar__back:hover { background: var(--wm-green-050); border-color: var(--wm-green); }

.wm-topbar__toggle:focus-visible,
.wm-topbar__back:focus-visible,
.wm-topbar__brand:focus-visible {
    outline: 2px solid var(--wm-green);
    outline-offset: 2px;
}

.wm-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.25rem 0.4rem;
    border-radius: 10px;
    color: var(--wm-ink);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.015em;
    text-decoration: none;
}

.wm-topbar__brand:hover { color: var(--wm-ink); }

.wm-topbar__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--wm-green);
    color: #fff;
    font-size: 1rem;
}

.wm-topbar__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The drawer. */
.wm-nav {
    --wm-nav-text: rgba(255, 255, 255, .9);
    /* Group labels and e-mail: 4.6:1 on --wm-green. */
    --wm-nav-muted: rgba(255, 255, 255, .78);
    --wm-nav-hover: rgba(255, 255, 255, .1);
    --wm-nav-active: rgba(255, 255, 255, .17);
    --wm-nav-hair: rgba(255, 255, 255, .14);

    position: fixed;
    left: 0;
    top: var(--header-height);
    z-index: 100;
    width: min(86vw, 300px);
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    background: var(--wm-green);
    color: var(--wm-nav-text);
    box-shadow: 8px 0 28px rgba(18, 36, 31, .3);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .3s;
}

.wm-nav.nav-visible {
    transform: none;
    visibility: visible;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s;
}

.wm-nav__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

.wm-nav__user {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.75rem 0.75rem 0.25rem;
    padding: 0.6rem 0.7rem;
    border-radius: 12px;
    background: var(--wm-nav-hover);
    min-width: 0;
}

.wm-nav__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    color: var(--wm-green);
    font-size: 0.8rem;
    font-weight: 700;
}

.wm-nav__who { display: flex; flex-direction: column; min-width: 0; }

.wm-nav__name {
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.wm-nav__email {
    color: var(--wm-nav-muted);
    font-size: 0.74rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.wm-nav__scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 0.75rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .3) transparent;
}

.wm-nav__label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 1rem 0 0.35rem;
    padding: 0 1.25rem;
    color: var(--wm-nav-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.wm-nav__label i { font-size: 0.95rem; }

.wm-nav__list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0 0.5rem;
    list-style: none;
}

/* Administrator-only zone: an inset panel, so the staff/admin boundary reads at a glance. */
.wm-nav__group--admin {
    margin: 1rem 0.25rem 0;
    padding: 0 0 0.35rem;
    border-radius: 14px;
    background: rgba(8, 30, 25, .3);
    border: 1px solid var(--wm-nav-hair);
}

/* Paddings chosen so icons and labels line up with the groups above (the panel adds 4px margin + 1px border). */
.wm-nav__group--admin .wm-nav__label { margin-top: 0.7rem; padding: 0 0.9rem; }
.wm-nav__group--admin .wm-nav__list { padding: 0 0.2rem; }

.wm-nav__foot {
    flex: none;
    padding: 0.5rem;
    border-top: 1px solid var(--wm-nav-hair);
}

.wm-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--wm-nav-text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--wm-ease), color var(--wm-ease);
}

.wm-nav__link:hover { background: var(--wm-nav-hover); color: #fff; }

.wm-nav__link:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #fff; }

.wm-nav__icon {
    flex: none;
    width: 22px;
    font-size: 1.3rem;
    line-height: 1;
    text-align: center;
    font-style: normal;
}

/* A long label wraps to a second line; it never pushes the drawer wider. */
.wm-nav__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* `.active` is set by NavLink; navbar.css also paints a global `.active::before`, so reset it first. */
.wm-nav .active::before { content: none; }

.wm-nav__link.active {
    background: var(--wm-nav-active);
    color: #fff;
    font-weight: 700;
}

.wm-nav__link.active::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 24%;
    bottom: 24%;
    width: 3px;
    height: auto;
    border-radius: 3px;
    background: var(--wm-accent);
}

@media (max-width: 479.98px) {
    /* Icon-only back button on phones; the label stays for screen readers. */
    .wm-topbar__back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .wm-topbar__back { padding: 0 0.5rem; width: 40px; }
}

@media (min-width: 768px) {
    .wm-topbar {
        height: calc(var(--header-height) + 1rem);
        padding: 0 1.5rem;
    }

    .wm-nav {
        top: calc(var(--header-height) + 1rem);
        height: calc(100vh - var(--header-height) - 1rem);
        height: calc(100dvh - var(--header-height) - 1rem);
        width: var(--nav-width);
        box-shadow: none;
    }

    /* Open by default on desktop; only an explicit hide closes it. */
    .wm-nav:not(.nav-hidden) {
        transform: none;
        visibility: visible;
        transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s;
    }
}

/* Motion is decoration here: switch it off for anyone who asks. */
@media (prefers-reduced-motion: reduce) {
    .wm-nav, .wm-nav *, .wm-topbar * { transition-duration: 0.01ms !important; }
    .wm *, .wm *::before, .wm *::after,
    .wm-report *, .wm-report *::before, .wm-report *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .wm-kpi--link:hover { transform: none; }
    .wm-dialog[open], .wm-dialog::backdrop { animation: none; }
}

@media print {
    .wm-kpi--link:hover { transform: none; box-shadow: var(--wm-shadow); }
    .wm-table thead th { position: static; }
}