.start-dashboard {
    --dashboard-accent: #0f8f78;
    --dashboard-accent-strong: #0b6f60;
    --dashboard-accent-soft: #d9f2e9;
    --dashboard-blue: #4f8cc9;
    --dashboard-canvas: var(--taskmanager-light-canvas, #edf9f4);
    --dashboard-panel: var(--taskmanager-light-panel-raised, #f5fbf8);
    --dashboard-panel-muted: var(--taskmanager-light-panel, #e3f4ed);
    --dashboard-panel-strong: #ffffff;
    --dashboard-border: var(--taskmanager-light-border, #b7d8cc);
    --dashboard-border-strong: var(--taskmanager-light-border-strong, #92c5b5);
    --dashboard-text: var(--taskmanager-light-text, #13352f);
    --dashboard-muted: var(--taskmanager-light-muted, #52736b);
    --dashboard-danger: #c94f46;
    --dashboard-danger-soft: #fff0ed;
    --dashboard-warning: #b76b14;
    --dashboard-warning-soft: #fff7e7;
    --dashboard-success: #217a61;
    --dashboard-shadow: 0 1rem 2.8rem rgba(13, 68, 59, .09);
    background:
        radial-gradient(circle at 6% -4%, rgba(121, 220, 190, .22), transparent 24rem),
        radial-gradient(circle at 96% 8%, rgba(79, 140, 201, .1), transparent 22rem),
        var(--dashboard-canvas);
    border: 1px solid color-mix(in srgb, var(--dashboard-border) 72%, transparent);
    border-radius: 1.2rem;
    box-sizing: border-box;
    color: var(--dashboard-text);
    min-height: 40rem;
    min-width: 0;
    overflow: hidden;
    padding: clamp(.9rem, 1.8vw, 1.55rem);
    position: relative;
    width: 100%;
}

.start-dashboard *,
.start-dashboard *::before,
.start-dashboard *::after {
    box-sizing: border-box;
}

.start-dashboard :is(button, select, input) {
    font: inherit;
}

.start-dashboard :is(button, select):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--dashboard-accent) 30%, transparent);
    outline-offset: 2px;
}

.start-dashboard-header {
    align-items: flex-start;
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    margin: 0 auto 1.15rem;
    max-width: 100rem;
}

.start-dashboard-welcome {
    max-width: 54rem;
    min-width: 0;
}

.start-dashboard-welcome h1 {
    font-size: clamp(1.65rem, 2.5vw, 2.45rem);
    font-weight: 760;
    letter-spacing: -.04em;
    line-height: 1.08;
    margin: .12rem 0 .42rem;
}

.start-dashboard-welcome > p:last-child {
    color: var(--dashboard-muted);
    font-size: clamp(.9rem, 1.2vw, 1rem);
    margin: 0;
}

.start-dashboard-eyebrow {
    color: var(--dashboard-accent-strong);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .12em;
    margin: 0;
    text-transform: uppercase;
}

.start-dashboard-header-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: .55rem;
}

.start-dashboard-create,
.start-dashboard-refresh,
.start-dashboard-error button,
.start-dashboard-open-list,
.start-dashboard-drilldown-close {
    align-items: center;
    border: 1px solid var(--dashboard-border);
    border-radius: .68rem;
    cursor: pointer;
    display: inline-flex;
    font-weight: 720;
    justify-content: center;
    min-height: 2.65rem;
    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease,
        color 240ms ease,
        transform 240ms ease;
}

.start-dashboard-create,
.start-dashboard-open-list {
    background: linear-gradient(135deg, #13977f, var(--dashboard-accent-strong));
    border-color: var(--dashboard-accent-strong);
    box-shadow: 0 .5rem 1.1rem rgba(15, 143, 120, .2);
    color: #fff;
    gap: .45rem;
    padding: .55rem .92rem;
}

.start-dashboard-create > span {
    font-size: 1.25rem;
    font-weight: 450;
    line-height: 1;
}

.start-dashboard-create:hover,
.start-dashboard-open-list:hover {
    box-shadow: 0 .7rem 1.4rem rgba(15, 143, 120, .28);
    transform: translateY(-1px);
}

.start-dashboard-refresh,
.start-dashboard-drilldown-close {
    background: color-mix(in srgb, var(--dashboard-panel-strong) 90%, transparent);
    color: var(--dashboard-muted);
    font-size: 1.25rem;
    padding: .25rem;
    width: 2.65rem;
}

.start-dashboard-refresh:hover:not(:disabled),
.start-dashboard-drilldown-close:hover {
    background: var(--dashboard-accent-soft);
    border-color: var(--dashboard-border-strong);
    color: var(--dashboard-accent-strong);
    transform: rotate(4deg);
}

.start-dashboard-refresh:disabled {
    cursor: progress;
    opacity: .55;
}

.start-dashboard-quick-actions {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 auto 1rem;
    max-width: 100rem;
}

.start-dashboard-quick-actions > button {
    align-items: center;
    background: linear-gradient(145deg, var(--dashboard-panel-strong), var(--dashboard-panel));
    border: 1px solid var(--dashboard-border);
    border-radius: .9rem;
    box-shadow: 0 .45rem 1rem rgba(13, 68, 59, .07);
    color: var(--dashboard-text);
    cursor: pointer;
    display: grid;
    gap: .75rem;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    min-height: 5.25rem;
    padding: .75rem .85rem;
    text-align: left;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.start-dashboard-quick-actions > button:hover {
    border-color: var(--dashboard-border-strong);
    box-shadow: 0 .75rem 1.5rem rgba(13, 68, 59, .13);
    transform: translateY(-2px);
}

.start-dashboard-quick-action-icon {
    align-items: center;
    background: var(--dashboard-accent-soft);
    border-radius: .72rem;
    color: var(--dashboard-accent-strong);
    display: inline-flex;
    font-size: 1.45rem;
    font-weight: 760;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.start-dashboard-quick-actions > button.ticket .start-dashboard-quick-action-icon {
    background: var(--dashboard-accent);
    color: #fff;
}

.start-dashboard-quick-actions > button.gantt .start-dashboard-quick-action-icon {
    background: color-mix(in srgb, var(--dashboard-blue) 18%, transparent);
    color: var(--dashboard-blue);
}

.start-dashboard-quick-actions > button > span:nth-child(2) {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.start-dashboard-quick-actions strong {
    font-size: .95rem;
}

.start-dashboard-quick-actions small {
    color: var(--dashboard-muted);
    line-height: 1.25;
}

.start-dashboard-quick-actions i {
    color: var(--dashboard-muted);
    font-size: 1.5rem;
    font-style: normal;
}

.start-dashboard-toolbar {
    align-items: end;
    background: color-mix(in srgb, var(--dashboard-panel) 92%, transparent);
    border: 1px solid var(--dashboard-border);
    border-radius: .9rem;
    box-shadow: 0 .35rem 1rem rgba(13, 68, 59, .045);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin: 0 auto 1rem;
    max-width: 100rem;
    padding: .72rem;
}

.start-dashboard-toolbar > label {
    display: grid;
    gap: .28rem;
    min-width: min(100%, 16rem);
}

.start-dashboard-toolbar label > span,
.start-dashboard-period > span {
    color: var(--dashboard-muted);
    font-size: .66rem;
    font-weight: 790;
    letter-spacing: .06em;
    padding-inline: .12rem;
    text-transform: uppercase;
}

.start-dashboard-toolbar select {
    appearance: none;
    background:
        linear-gradient(45deg, transparent 50%, var(--dashboard-muted) 50%) calc(100% - 1rem) 52% / .34rem .34rem no-repeat,
        linear-gradient(135deg, var(--dashboard-muted) 50%, transparent 50%) calc(100% - .68rem) 52% / .34rem .34rem no-repeat,
        var(--dashboard-panel-strong);
    border: 1px solid var(--dashboard-border);
    border-radius: .58rem;
    color: var(--dashboard-text);
    cursor: pointer;
    min-height: 2.35rem;
    padding: .42rem 2rem .42rem .68rem;
}

.start-dashboard-period {
    display: grid;
    gap: .28rem;
}

.start-dashboard-period > div {
    background: var(--dashboard-panel-muted);
    border: 1px solid var(--dashboard-border);
    border-radius: .62rem;
    display: inline-flex;
    gap: .18rem;
    padding: .18rem;
}

.start-dashboard-period button {
    background: transparent;
    border: 0;
    border-radius: .43rem;
    color: var(--dashboard-muted);
    cursor: pointer;
    font-size: .78rem;
    font-weight: 700;
    min-height: 1.95rem;
    padding: .32rem .62rem;
    transition: background-color 220ms ease, box-shadow 220ms ease, color 220ms ease;
}

.start-dashboard-period button:hover:not(:disabled) {
    color: var(--dashboard-text);
}

.start-dashboard-period button.active,
.start-dashboard-period button[aria-pressed="true"] {
    background: var(--dashboard-panel-strong);
    box-shadow: 0 .18rem .5rem rgba(13, 68, 59, .11);
    color: var(--dashboard-accent-strong);
}

.start-dashboard-data-state {
    align-items: center;
    color: var(--dashboard-muted);
    display: inline-flex;
    font-size: .74rem;
    gap: .42rem;
    margin: 0 .15rem .5rem auto;
}

.start-dashboard-data-state i {
    background: #31b889;
    border: 3px solid color-mix(in srgb, #31b889 20%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 2px color-mix(in srgb, #31b889 15%, transparent);
    height: .48rem;
    width: .48rem;
}

.start-dashboard-skeleton {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(6, minmax(8rem, 1fr));
    margin: 0 auto;
    max-width: 100rem;
}

.start-dashboard-skeleton > span {
    animation: start-dashboard-fade-in 320ms ease both;
    background:
        linear-gradient(110deg, transparent 12%, rgba(255, 255, 255, .42) 42%, transparent 72%),
        var(--dashboard-panel-muted);
    border: 1px solid var(--dashboard-border);
    border-radius: .88rem;
}

.start-dashboard-skeleton .skeleton-tile {
    min-height: 8.5rem;
}

.start-dashboard-skeleton .skeleton-chart {
    grid-column: span 2;
    min-height: 22rem;
}

.start-dashboard-skeleton .skeleton-chart.wide {
    grid-column: span 4;
}

.start-dashboard-error,
.start-dashboard-empty {
    align-items: center;
    background: var(--dashboard-danger-soft);
    border: 1px solid color-mix(in srgb, var(--dashboard-danger) 38%, var(--dashboard-border));
    border-radius: 1rem;
    display: flex;
    gap: .85rem;
    margin: 1.5rem auto;
    max-width: 52rem;
    padding: 1rem;
}

.start-dashboard-error > span {
    align-items: center;
    background: var(--dashboard-danger);
    border-radius: .65rem;
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    font-size: 1.15rem;
    font-weight: 800;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.start-dashboard-error strong,
.start-dashboard-error p {
    display: block;
    margin: 0;
}

.start-dashboard-error p {
    color: var(--dashboard-muted);
    font-size: .82rem;
    margin-top: .2rem;
}

.start-dashboard-error button {
    background: var(--dashboard-panel-strong);
    color: var(--dashboard-danger);
    margin-left: auto;
    padding: .45rem .75rem;
}

.start-dashboard-kpis {
    display: grid;
    gap: .72rem;
    grid-template-columns: repeat(6, minmax(9.5rem, 1fr));
    margin: 0 auto .45rem;
    max-width: 100rem;
}

.start-dashboard-interaction-hint {
    background: var(--dashboard-panel-muted);
    border: 1px solid var(--dashboard-border);
    border-radius: 2rem;
    color: var(--dashboard-muted);
    font-size: .69rem;
    font-weight: 650;
    line-height: 1.4;
    margin: 0 max(calc((100% - 100rem) / 2), 0px) 1rem auto;
    padding: .34rem .62rem;
    text-align: right;
    width: fit-content;
}

.start-dashboard-kpi {
    --kpi-color: var(--dashboard-accent);
    --kpi-soft: var(--dashboard-accent-soft);
    align-items: flex-start;
    animation: start-dashboard-rise 320ms ease both;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--kpi-soft) 68%, transparent), transparent 58%),
        var(--dashboard-panel-strong);
    border: 1px solid var(--dashboard-border);
    border-radius: .92rem;
    box-shadow: 0 .45rem 1.2rem rgba(13, 68, 59, .045);
    color: var(--dashboard-text);
    cursor: pointer;
    display: grid;
    gap: .55rem;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 8.4rem;
    padding: .82rem;
    text-align: left;
    transition:
        border-color 240ms ease,
        box-shadow 240ms ease,
        transform 240ms ease;
}

.start-dashboard-kpi:nth-child(2) { animation-delay: 35ms; }
.start-dashboard-kpi:nth-child(3) { animation-delay: 70ms; }
.start-dashboard-kpi:nth-child(4) { animation-delay: 105ms; }
.start-dashboard-kpi:nth-child(5) { animation-delay: 140ms; }
.start-dashboard-kpi:nth-child(6) { animation-delay: 175ms; }

.start-dashboard-kpi.mine {
    --kpi-color: #337fb8;
    --kpi-soft: #e2f2fb;
}

.start-dashboard-kpi.overdue {
    --kpi-color: var(--dashboard-danger);
    --kpi-soft: #fee8e4;
}

.start-dashboard-kpi.unassigned {
    --kpi-color: #7b6aaa;
    --kpi-soft: #eeeaf9;
}

.start-dashboard-kpi.created {
    --kpi-color: var(--dashboard-blue);
    --kpi-soft: #e7f0fa;
}

.start-dashboard-kpi.resolved {
    --kpi-color: #168a78;
    --kpi-soft: #dcf5ed;
}

.start-dashboard-kpi:hover {
    border-color: color-mix(in srgb, var(--kpi-color) 55%, var(--dashboard-border));
    box-shadow: 0 .85rem 1.8rem rgba(13, 68, 59, .1);
    transform: translateY(-2px);
}

.start-dashboard-kpi-icon {
    align-items: center;
    background: var(--kpi-soft);
    border: 1px solid color-mix(in srgb, var(--kpi-color) 18%, transparent);
    border-radius: .68rem;
    color: var(--kpi-color);
    display: flex;
    font-size: 1.05rem;
    font-weight: 800;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.start-dashboard-kpi-copy {
    display: grid;
    gap: .08rem;
    min-width: 0;
}

.start-dashboard-kpi-copy small {
    color: var(--dashboard-muted);
    font-size: .69rem;
    font-weight: 720;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-dashboard-kpi-copy strong {
    color: var(--dashboard-text);
    font-size: clamp(1.65rem, 2.3vw, 2.2rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.055em;
    line-height: 1.12;
}

.start-dashboard-kpi-copy em {
    color: var(--dashboard-muted);
    font-size: .66rem;
    font-style: normal;
    line-height: 1.3;
}

.start-dashboard-empty {
    background:
        radial-gradient(circle at 50% 0, color-mix(in srgb, var(--dashboard-accent-soft) 82%, transparent), transparent 16rem),
        var(--dashboard-panel);
    border-color: var(--dashboard-border);
    display: grid;
    justify-items: center;
    max-width: 44rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.start-dashboard-empty > span {
    align-items: center;
    background: var(--dashboard-accent-soft);
    border-radius: 50%;
    color: var(--dashboard-accent-strong);
    display: flex;
    font-size: 1.6rem;
    height: 3.4rem;
    justify-content: center;
    width: 3.4rem;
}

.start-dashboard-empty h2,
.start-dashboard-empty p {
    margin: 0;
}

.start-dashboard-empty p {
    color: var(--dashboard-muted);
    max-width: 34rem;
}

.start-dashboard-grid {
    display: grid;
    gap: .85rem;
    margin: 0 auto .85rem;
    max-width: 100rem;
    min-width: 0;
}

.start-dashboard-grid.primary-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(19rem, .8fr);
}

.start-dashboard-grid.secondary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.start-dashboard-grid.action-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .7fr);
}

.start-dashboard-card {
    animation: start-dashboard-rise 360ms ease both;
    background:
        linear-gradient(150deg, color-mix(in srgb, var(--dashboard-panel-strong) 100%, transparent), transparent),
        var(--dashboard-panel);
    border: 1px solid var(--dashboard-border);
    border-radius: 1rem;
    box-shadow: 0 .6rem 1.65rem rgba(13, 68, 59, .055);
    min-width: 0;
    overflow: hidden;
    padding: 1rem;
}

.start-dashboard-grid.secondary-grid .start-dashboard-card:nth-child(2),
.start-dashboard-grid.action-grid .start-dashboard-card:nth-child(2) {
    animation-delay: 55ms;
}

.start-dashboard-grid.secondary-grid .start-dashboard-card:nth-child(3) {
    animation-delay: 110ms;
}

.start-dashboard-card > header {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .8rem;
}

.start-dashboard-card > header h2 {
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    letter-spacing: -.025em;
    line-height: 1.2;
    margin: .15rem 0 0;
}

.start-dashboard-card-subtitle {
    color: var(--dashboard-muted);
    font-size: .72rem;
    line-height: 1.35;
    margin: .3rem 0 0;
}

.start-dashboard-card > header > span {
    color: var(--dashboard-muted);
    font-size: .72rem;
    font-weight: 700;
}

.start-dashboard-card > header > button {
    background: transparent;
    border: 0;
    border-radius: .35rem;
    color: var(--dashboard-accent-strong);
    cursor: pointer;
    font-size: .73rem;
    font-weight: 750;
    padding: .25rem;
}

.start-dashboard-card > header > button:hover {
    text-decoration: underline;
    text-underline-offset: .2rem;
}

.start-dashboard-net {
    background: var(--dashboard-accent-soft);
    border-radius: 2rem;
    color: var(--dashboard-success) !important;
    padding: .25rem .55rem;
    text-align: center;
    white-space: nowrap;
}

button.start-dashboard-net {
    cursor: pointer;
}

button.start-dashboard-net:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.start-dashboard-net.negative {
    background: var(--dashboard-danger-soft);
    color: var(--dashboard-danger) !important;
}

.start-dashboard-chart {
    animation: start-dashboard-chart-reveal 400ms ease both;
    color: var(--dashboard-muted);
    min-height: 19.4rem;
    min-width: 0;
    position: relative;
}

.start-dashboard-chart :is(text, tspan) {
    font-family: inherit !important;
}

.start-dashboard-flow-summary {
    align-items: stretch;
    display: grid;
    gap: .55rem;
    grid-template-columns: minmax(8.5rem, .65fr) minmax(8.5rem, .65fr) minmax(15rem, 1.7fr);
    margin: 0 0 .5rem;
}

.start-dashboard-flow-summary > button {
    --flow-color: var(--dashboard-blue);
    align-items: center;
    background: color-mix(in srgb, var(--flow-color) 8%, var(--dashboard-panel-strong));
    border: 1px solid color-mix(in srgb, var(--flow-color) 24%, var(--dashboard-border));
    border-radius: .72rem;
    color: var(--dashboard-text);
    cursor: pointer;
    display: grid;
    gap: .52rem;
    grid-template-columns: .34rem minmax(0, 1fr);
    min-width: 0;
    padding: .48rem .58rem;
    text-align: start;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.start-dashboard-flow-summary > button.resolved {
    --flow-color: var(--dashboard-accent);
}

.start-dashboard-flow-summary > button:hover {
    background: color-mix(in srgb, var(--flow-color) 13%, var(--dashboard-panel-strong));
    border-color: color-mix(in srgb, var(--flow-color) 48%, var(--dashboard-border));
    transform: translateY(-1px);
}

.start-dashboard-flow-summary > button > i {
    background: var(--flow-color);
    border-radius: 2rem;
    display: block;
    height: 2.2rem;
    width: .28rem;
}

.start-dashboard-flow-summary > button > span:nth-child(2) {
    display: grid;
    gap: .02rem;
    min-width: 0;
}

.start-dashboard-flow-summary small {
    color: var(--dashboard-muted);
    font-size: .65rem;
    font-weight: 720;
}

.start-dashboard-flow-summary strong {
    color: var(--flow-color);
    font-size: 1.28rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.start-dashboard-flow-summary > p {
    align-items: center;
    background: var(--dashboard-panel-muted);
    border: 1px solid var(--dashboard-border);
    border-radius: .72rem;
    color: var(--dashboard-muted);
    display: flex;
    font-size: .71rem;
    line-height: 1.45;
    margin: 0;
    padding: .58rem .7rem;
}

.start-dashboard-flow-chart {
    min-height: 18.8rem;
}

.start-dashboard-flow-chart :is(text, tspan) {
    fill: var(--dashboard-text) !important;
    font-weight: 600 !important;
}

.start-dashboard-flow-value-caption,
.start-dashboard-flow-axis-caption {
    color: var(--dashboard-muted);
    display: block;
    font-size: .65rem;
    font-weight: 760;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.start-dashboard-flow-value-caption {
    margin: 0 0 -.45rem 2.1rem;
}

.start-dashboard-flow-scale {
    bottom: 4.15rem;
    color: var(--dashboard-text);
    display: flex;
    flex-direction: column;
    font-size: .65rem;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    justify-content: space-between;
    left: .18rem;
    pointer-events: none;
    position: absolute;
    top: 2.2rem;
}

.start-dashboard-flow-axis {
    display: grid;
    gap: .2rem;
    grid-template-columns: repeat(var(--flow-axis-columns), minmax(0, 1fr));
    margin: .12rem 1rem 0 2.1rem;
}

.start-dashboard-flow-axis > span {
    color: var(--dashboard-text);
    display: grid;
    font-size: .64rem;
    font-variant-numeric: tabular-nums;
    gap: .02rem;
    justify-items: center;
    line-height: 1.2;
    min-width: 0;
    text-align: center;
}

.start-dashboard-flow-axis strong {
    font-weight: 720;
}

.start-dashboard-flow-axis small {
    color: var(--dashboard-muted);
    font-size: .59rem;
}

.start-dashboard-flow-axis-caption {
    margin-top: .34rem;
    text-align: center;
}

.start-dashboard-chart-note {
    color: var(--dashboard-muted);
    font-size: .68rem;
    line-height: 1.45;
    margin: .35rem .25rem 0;
}

.start-dashboard-flow-empty {
    background: var(--dashboard-panel-muted);
    border: 1px dashed var(--dashboard-border-strong);
    border-radius: .75rem;
    min-height: 16.9rem;
    padding: 1rem;
    text-align: center;
}

.start-dashboard-chart.donut-chart {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(15rem, 1fr) minmax(9rem, .72fr);
    position: relative;
}

.start-dashboard-donut-plot {
    min-height: 19.4rem;
    min-width: 0;
    position: relative;
}

.start-dashboard-donut-center {
    align-items: center;
    display: flex;
    flex-direction: column;
    inset-inline-start: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.start-dashboard-donut-center strong {
    font-size: 1.62rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.05em;
    line-height: 1;
}

.start-dashboard-donut-center span {
    color: var(--dashboard-muted);
    font-size: .68rem;
    margin-top: .15rem;
}

.start-dashboard-donut-legend {
    align-content: center;
    display: grid;
    gap: .72rem;
    min-width: 0;
}

.start-dashboard-donut-legend button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--dashboard-text);
    cursor: pointer;
    display: grid;
    font: inherit;
    font-size: .78rem;
    gap: .6rem;
    grid-template-columns: 1rem minmax(0, 1fr);
    min-width: 0;
    padding: .18rem 0;
    text-align: start;
}

.start-dashboard-donut-legend button:hover,
.start-dashboard-donut-legend button:focus-visible {
    color: var(--dashboard-accent-strong);
}

.start-dashboard-donut-legend button > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-dashboard-donut-swatch {
    display: block;
    height: 1rem;
    width: 1rem;
}

.start-dashboard-chart-empty {
    align-items: center;
    color: var(--dashboard-muted);
    display: flex;
    font-size: .82rem;
    justify-content: center;
    min-height: 12rem;
    text-align: center;
}

.start-dashboard-bars,
.start-dashboard-workload,
.start-dashboard-age {
    display: grid;
    gap: .5rem;
}

.start-dashboard-bars button,
.start-dashboard-workload button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: .62rem;
    color: var(--dashboard-text);
    cursor: pointer;
    display: grid;
    gap: .55rem;
    min-height: 2.6rem;
    padding: .42rem .48rem;
    text-align: left;
    transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
    width: 100%;
}

.start-dashboard-bars button {
    grid-template-columns: minmax(6.4rem, .7fr) minmax(5rem, 1fr) 2rem;
}

.start-dashboard-bars button:hover,
.start-dashboard-workload button:hover {
    background: var(--dashboard-panel-muted);
    border-color: var(--dashboard-border);
    transform: translateX(2px);
}

.start-dashboard-bars button > strong,
.start-dashboard-age strong {
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.bar-label {
    align-items: center;
    display: flex;
    font-size: .76rem;
    font-weight: 680;
    gap: .42rem;
    min-width: 0;
}

.bar-label i,
.start-dashboard-age span i {
    border-radius: 50%;
    flex: 0 0 auto;
    height: .5rem;
    width: .5rem;
}

.bar-track,
.start-dashboard-workload button > i,
.start-dashboard-age b {
    background: color-mix(in srgb, var(--dashboard-border) 48%, transparent);
    border-radius: 2rem;
    display: block;
    height: .4rem;
    overflow: hidden;
}

.bar-track i,
.start-dashboard-workload button > i b,
.start-dashboard-age b i {
    border-radius: inherit;
    display: block;
    height: 100%;
    min-width: .22rem;
    transform-origin: left center;
    transition: width 360ms ease;
}

.start-dashboard-workload button {
    grid-template-columns: auto minmax(0, 1fr) minmax(4rem, .7fr) auto;
}

.start-dashboard-avatar {
    align-items: center;
    background: linear-gradient(145deg, var(--dashboard-accent-soft), #c8e8e0);
    border: 1px solid var(--dashboard-border);
    border-radius: .62rem;
    color: var(--dashboard-accent-strong);
    display: flex;
    font-size: .66rem;
    font-weight: 820;
    height: 2rem;
    justify-content: center;
    letter-spacing: .025em;
    width: 2rem;
}

.start-dashboard-workload-person {
    display: grid;
    min-width: 0;
}

.start-dashboard-workload-person strong {
    font-size: .76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-dashboard-workload-count {
    display: grid;
    justify-items: end;
    line-height: 1.05;
    min-width: 3.7rem;
}

.start-dashboard-workload-count strong {
    color: var(--dashboard-text);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.start-dashboard-workload-count small {
    color: var(--dashboard-muted);
    font-size: .58rem;
    white-space: nowrap;
}

.start-dashboard-workload button > i b {
    background: linear-gradient(90deg, var(--dashboard-accent), #58b8a3);
}

.start-dashboard-age > :is(div, button) {
    align-items: center;
    display: grid;
    gap: .55rem;
    grid-template-columns: minmax(6rem, .8fr) 2rem minmax(4rem, 1fr);
    min-height: 2.2rem;
    padding: .25rem .45rem;
}

.start-dashboard-age > button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: .62rem;
    color: var(--dashboard-text);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
    width: 100%;
}

.start-dashboard-age > button:hover {
    background: var(--dashboard-panel-muted);
    border-color: var(--dashboard-border);
    transform: translateX(2px);
}

.start-dashboard-age > button:focus-visible {
    border-color: var(--dashboard-focus);
    box-shadow: 0 0 0 3px var(--dashboard-focus-ring);
    outline: none;
}

.start-dashboard-age span {
    align-items: center;
    display: flex;
    font-size: .75rem;
    gap: .42rem;
}

.start-dashboard-median {
    align-items: end;
    background: var(--dashboard-panel-muted);
    border: 1px solid var(--dashboard-border);
    border-radius: .7rem;
    display: flex;
    justify-content: space-between;
    margin-top: .78rem;
    padding: .62rem .7rem;
}

.start-dashboard-median span {
    color: var(--dashboard-muted);
    font-size: .7rem;
}

.start-dashboard-median strong {
    color: var(--dashboard-accent-strong);
    font-size: 1.15rem;
    letter-spacing: -.03em;
}

.start-dashboard-all-clear {
    align-items: center;
    background: color-mix(in srgb, var(--dashboard-accent-soft) 65%, transparent);
    border: 1px dashed var(--dashboard-border-strong);
    border-radius: .75rem;
    color: var(--dashboard-success);
    display: flex;
    font-size: .78rem;
    gap: .55rem;
    min-height: 4.5rem;
    padding: .8rem;
}

.start-dashboard-all-clear > span {
    align-items: center;
    background: var(--dashboard-accent);
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    height: 1.55rem;
    justify-content: center;
    width: 1.55rem;
}

.start-dashboard-issue-list {
    display: grid;
    gap: .38rem;
}

.start-dashboard-issue-row {
    align-items: center;
    background: color-mix(in srgb, var(--dashboard-panel-strong) 82%, transparent);
    border: 1px solid transparent;
    border-radius: .68rem;
    color: var(--dashboard-text);
    cursor: pointer;
    display: grid;
    gap: .58rem;
    grid-template-columns: .24rem minmax(0, 1fr) minmax(5rem, .4fr) auto;
    min-height: 3.45rem;
    padding: .48rem .55rem;
    text-align: left;
    transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
    width: 100%;
}

.start-dashboard-issue-row:hover {
    background: var(--dashboard-panel-strong);
    border-color: var(--dashboard-border);
    box-shadow: 0 .35rem .8rem rgba(13, 68, 59, .06);
    transform: translateX(2px);
}

.start-dashboard-issue-row.compact {
    grid-template-columns: .22rem minmax(0, 1fr) auto;
}

.start-dashboard-issue-priority {
    border-radius: 2rem;
    height: 1.75rem;
    width: .22rem;
}

.start-dashboard-issue-main {
    display: grid;
    gap: .22rem;
    min-width: 0;
}

.start-dashboard-issue-main > span {
    align-items: center;
    display: flex;
    gap: .42rem;
    min-width: 0;
}

.start-dashboard-issue-main strong {
    color: var(--dashboard-accent-strong);
    font-size: .66rem;
    letter-spacing: .025em;
}

.start-dashboard-issue-main em {
    background: color-mix(in srgb, var(--status-color, var(--dashboard-accent)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-color, var(--dashboard-accent)) 28%, transparent);
    border-radius: 1rem;
    color: color-mix(in srgb, var(--status-color, var(--dashboard-accent)) 68%, var(--dashboard-text));
    font-size: .59rem;
    font-style: normal;
    font-weight: 700;
    max-width: 10rem;
    overflow: hidden;
    padding: .08rem .34rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-dashboard-issue-main > b {
    font-size: .75rem;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-dashboard-issue-owner,
.start-dashboard-issue-date {
    color: var(--dashboard-muted);
    font-size: .68rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-dashboard-issue-date {
    font-variant-numeric: tabular-nums;
}

.start-dashboard-issue-date.overdue {
    color: var(--dashboard-danger);
    font-weight: 800;
}

.start-dashboard-issue-row > span:last-child {
    color: var(--dashboard-muted);
    font-size: 1rem;
}

.start-dashboard-drilldown {
    animation: start-dashboard-sheet-in 320ms cubic-bezier(.2, .82, .32, 1) both;
    background: color-mix(in srgb, var(--dashboard-panel) 96%, transparent);
    border: 1px solid var(--dashboard-border-strong);
    border-radius: 1rem;
    bottom: 1rem;
    box-shadow: 0 1.4rem 4rem rgba(7, 45, 39, .24);
    display: flex;
    flex-direction: column;
    max-height: min(70dvh, 42rem);
    max-width: calc(100vw - 2rem);
    overflow: hidden;
    position: fixed;
    right: 1rem;
    width: min(45rem, calc(100vw - 2rem));
    z-index: 1080;
}

.start-dashboard-drilldown > header {
    align-items: flex-start;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--dashboard-accent-soft) 75%, transparent), transparent 65%),
        var(--dashboard-panel-strong);
    border-bottom: 1px solid var(--dashboard-border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .85rem 1rem;
}

.start-dashboard-drilldown > header h2 {
    font-size: 1.05rem;
    margin: .1rem 0;
}

.start-dashboard-drilldown > header > div:first-child > span {
    color: var(--dashboard-muted);
    font-size: .7rem;
}

.start-dashboard-drilldown > header > div:last-child {
    align-items: center;
    display: flex;
    gap: .45rem;
}

.start-dashboard-open-list {
    font-size: .75rem;
    min-height: 2.25rem;
    padding: .36rem .65rem;
}

.start-dashboard-drilldown-close {
    min-height: 2.25rem;
    width: 2.25rem;
}

.start-dashboard-drilldown-body {
    display: grid;
    gap: .35rem;
    overflow: auto;
    overscroll-behavior: contain;
    padding: .75rem;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .start-dashboard,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .start-dashboard {
    --dashboard-accent: #42dcc1;
    --dashboard-accent-strong: #79e7d2;
    --dashboard-accent-soft: #24443f;
    --dashboard-blue: #77addb;
    --dashboard-canvas: var(--taskmanager-dark-canvas, #101820);
    --dashboard-panel: var(--taskmanager-dark-panel, #17232d);
    --dashboard-panel-muted: var(--taskmanager-dark-panel-header, #1b2732);
    --dashboard-panel-strong: var(--taskmanager-dark-panel-raised, #1d2935);
    --dashboard-border: var(--taskmanager-dark-border, #3b4a58);
    --dashboard-border-strong: var(--taskmanager-dark-border-strong, #4a5a68);
    --dashboard-text: var(--taskmanager-dark-text, #edf4f1);
    --dashboard-muted: var(--taskmanager-dark-muted, #a9b7c4);
    --dashboard-danger: #ff8a80;
    --dashboard-danger-soft: #3b292c;
    --dashboard-warning: #f1bd6d;
    --dashboard-warning-soft: #3a3224;
    --dashboard-success: #83dec6;
    --dashboard-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, .3);
    background:
        radial-gradient(circle at 5% -4%, rgba(66, 220, 193, .12), transparent 25rem),
        radial-gradient(circle at 98% 6%, rgba(90, 145, 190, .12), transparent 22rem),
        var(--dashboard-canvas);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .start-dashboard-create,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .start-dashboard .start-dashboard-create,
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .start-dashboard-open-list,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .start-dashboard .start-dashboard-open-list {
    background: linear-gradient(135deg, #43d9bf, #2ab49f);
    border-color: #42dcc1;
    color: #092c27;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .start-dashboard-kpi.mine,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .start-dashboard .start-dashboard-kpi.mine {
    --kpi-color: #8bc3ed;
    --kpi-soft: #253e52;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .start-dashboard-kpi.overdue,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .start-dashboard .start-dashboard-kpi.overdue {
    --kpi-color: #ff9389;
    --kpi-soft: #442d30;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .start-dashboard-kpi.unassigned,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .start-dashboard .start-dashboard-kpi.unassigned {
    --kpi-color: #c6b4ee;
    --kpi-soft: #393448;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .start-dashboard-kpi.created,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .start-dashboard .start-dashboard-kpi.created {
    --kpi-color: #8bc3ed;
    --kpi-soft: #253e52;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .start-dashboard-kpi.resolved,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .start-dashboard .start-dashboard-kpi.resolved {
    --kpi-color: #6fe6d1;
    --kpi-soft: #24443f;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .start-dashboard-avatar,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .start-dashboard .start-dashboard-avatar {
    background: linear-gradient(145deg, #24443f, #2c5249);
}

@media (max-width: 1280px) {
    .start-dashboard-kpis {
        grid-template-columns: repeat(3, minmax(10rem, 1fr));
    }
}

@media (max-width: 1050px) {
    .start-dashboard-grid.primary-grid,
    .start-dashboard-grid.action-grid {
        grid-template-columns: 1fr;
    }

    .start-dashboard-grid.secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .start-dashboard-grid.secondary-grid .age-card {
        grid-column: 1 / -1;
    }

}

@media (max-width: 760px) {
    .start-dashboard {
        border-inline: 0;
        border-radius: .8rem;
        padding: .85rem;
    }

    .start-dashboard-header {
        align-items: stretch;
        flex-direction: column;
    }

    .start-dashboard-header-actions {
        justify-content: flex-end;
    }

    .start-dashboard-quick-actions {
        grid-template-columns: 1fr;
    }

    .start-dashboard-chart.donut-chart {
        grid-template-columns: 1fr;
    }

    .start-dashboard-flow-summary {
        grid-template-columns: 1fr 1fr;
    }

    .start-dashboard-flow-summary > p {
        grid-column: 1 / -1;
    }

    .start-dashboard-donut-legend {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .start-dashboard-donut-legend button {
        width: auto;
    }

    .start-dashboard-create {
        flex: 1 1 auto;
    }

    .start-dashboard-toolbar {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .start-dashboard-toolbar > label {
        min-width: 0;
    }

    .start-dashboard-period > div {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .start-dashboard-data-state {
        margin: .1rem 0 0;
    }

    .start-dashboard-kpis,
    .start-dashboard-grid.secondary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .start-dashboard-kpi {
        min-height: 7.75rem;
    }

    .start-dashboard-grid.secondary-grid .age-card {
        grid-column: 1 / -1;
    }

    .start-dashboard-skeleton {
        grid-template-columns: 1fr 1fr;
    }

    .start-dashboard-skeleton .skeleton-chart,
    .start-dashboard-skeleton .skeleton-chart.wide {
        grid-column: 1 / -1;
    }

    .start-dashboard-issue-row:not(.compact) {
        grid-template-columns: .22rem minmax(0, 1fr) auto;
    }

    .start-dashboard-issue-owner {
        display: none;
    }

    .start-dashboard-drilldown {
        border-end-end-radius: 0;
        border-end-start-radius: 0;
        bottom: 0;
        left: 0;
        max-height: 78dvh;
        max-width: 100vw;
        right: 0;
        width: 100%;
    }
}

@media (max-width: 510px) {
    .start-dashboard-kpis {
        grid-template-columns: 1fr;
    }

    .start-dashboard-kpi {
        min-height: 6.6rem;
    }

    .start-dashboard-interaction-hint {
        margin-left: 0;
        text-align: left;
    }

    .start-dashboard-grid.secondary-grid {
        grid-template-columns: 1fr;
    }

    .start-dashboard-flow-summary {
        grid-template-columns: 1fr;
    }

    .start-dashboard-flow-summary > p {
        grid-column: auto;
    }

    .start-dashboard-grid.secondary-grid .age-card {
        grid-column: auto;
    }

    .start-dashboard-card {
        padding: .8rem;
    }

    .start-dashboard-bars button {
        grid-template-columns: minmax(5.5rem, .8fr) minmax(4rem, 1fr) 1.6rem;
    }

    .start-dashboard-drilldown > header {
        align-items: stretch;
        flex-direction: column;
    }

    .start-dashboard-drilldown > header > div:last-child {
        justify-content: flex-end;
    }
}

@keyframes start-dashboard-rise {
    from {
        opacity: 0;
        transform: translateY(.55rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes start-dashboard-chart-reveal {
    from {
        clip-path: inset(0 100% 0 0 round .5rem);
        opacity: .45;
    }
    to {
        clip-path: inset(0 0 0 0 round .5rem);
        opacity: 1;
    }
}

@keyframes start-dashboard-sheet-in {
    from {
        opacity: 0;
        transform: translateY(1rem) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes start-dashboard-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .start-dashboard *,
    .start-dashboard *::before,
    .start-dashboard *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .start-dashboard :is(button, .start-dashboard-kpi, .start-dashboard-issue-row):hover {
        transform: none;
    }
}