/* Stats.razor's drag-to-reorder / resize widget grid — ported from the classic app's
   site.css "Stats Widget System" section (drag handle, hover toolbar, SortableJS
   ghost/chosen states). Global because it targets SortableJS's own injected classes,
   which live on elements a component-scoped stylesheet has no attribute to match. */

.widget-cell {
    position: relative;
}

.widget-toolbar {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
    background: var(--mud-palette-surface);
    border-radius: 6px;
    padding: 2px;
}

.widget-cell:hover .widget-toolbar,
.widget-cell:focus-within .widget-toolbar {
    opacity: 1;
}

/* A touch screen has no hover, so the toolbar was invisible there while its buttons still
   took taps over the corner of every tile. Always shown when touch is the main input. */
@media (pointer: coarse) {
    .widget-toolbar {
        opacity: 1;
    }
}

.widget-drag-handle {
    cursor: grab;
}

.widget-drag-handle:active {
    cursor: grabbing;
}

.widget-ghost {
    opacity: 0.35;
}

.widget-chosen {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
    border-radius: 8px;
}

/* Simple colored bar-strip for the monthly trends widget — a plain div-based equivalent of
   the classic app's per-bar-colored Chart.js bars. MudBlazor's bar chart only colors by
   series, not by data point, so a hand-rolled strip is what actually reproduces "red/yellow/
   green per month" rather than one color for the whole chart. */
/* The strip is plotted inside a scaled area with 0/50/100% gridlines. The classic page got
   its scale from Chart.js's own Y axis; without any axis a lone 0% month rendered as a bare
   2px line floating in blank space, with nothing to say what the height meant. Keeping the
   per-month colouring above *and* the axis below is the combination of both versions. */
.trend-chart {
    display: flex;
    gap: 8px;
}

.trend-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 120px;
    padding-top: 8px;
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    text-align: right;
    flex: 0 0 auto;
    /* Aligns the bottom axis label with the baseline rather than the month labels below it. */
    margin-bottom: 18px;
}

.trend-plot {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.trend-gridline {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--mud-palette-lines-default);
    pointer-events: none;
}

.trend-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 120px;
    padding-top: 8px;
    position: relative;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.trend-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 0;
    height: 100%;
}

.trend-bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}

.trend-bar-label {
    font-size: 0.65rem;
    margin-top: 4px;
    white-space: nowrap;
}