/*
    Action buttons.

    Deliberately NOT part of the status palette: an ordinary action must never
    read as "resolved". Kept here so there is still one file to edit.

    Applies to every Radzen primary button, so one action does not sit beside
    another in a different blue. status.css is linked after material-base.css
    so this simply wins on source order - no specificity games.
*/
:root {
    --action-blue: #3B82F6;
    --action-blue-hover: #2563EB;
}

.rz-button.rz-primary {
    background-color: var(--action-blue);
    border-color: var(--action-blue);
    color: #fff;
}

.rz-button.rz-primary:hover,
.rz-button.rz-primary:focus {
    background-color: var(--action-blue-hover);
    border-color: var(--action-blue-hover);
}

/*
    Incident status presentation.

    The colours themselves are NOT here - they arrive as custom properties
    (--status-new, --status-investigating, --status-solved and their -tint
    variants) emitted from MyClasses/IncidentStatus.cs by _Host.cshtml. That
    keeps a single definition rather than one in C# and another here.

    Replaces gray.png / yellow.png / blue.png. A dot drawn in CSS takes its
    colour from a token, so changing the palette is one edit instead of
    redrawing image files.

    Colour is never the only signal: every dot sits beside its status text,
    either in the row's Πρόοδος column or in the badge itself.
*/

.status-dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    vertical-align: middle;
    background-color: var(--status-unknown);
    /* A hairline keeps the pale statuses visible on a white row. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.status-dot--new           { background-color: var(--status-new); }
.status-dot--investigating { background-color: var(--status-investigating); }
.status-dot--solved        { background-color: var(--status-solved); }
.status-dot--unknown       { background-color: var(--status-unknown); }

/* Badge: dot plus text, for places with room for both. */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
    flex: 0 0 8px;
}

.status-badge--new           { color: var(--status-new);           background-color: var(--status-new-tint); }
.status-badge--investigating { color: var(--status-investigating); background-color: var(--status-investigating-tint); }
.status-badge--solved        { color: var(--status-solved);        background-color: var(--status-solved-tint); }
.status-badge--unknown       { color: var(--status-unknown);       background-color: var(--status-unknown-tint); }

/*
    Filter toggles above the incident grid. These were btn-dark / btn-warning
    / btn-primary, which tied the filters to Bootstrap's palette rather than
    to the statuses they filter by - so the toggle and the row it filtered
    could disagree.
*/
.status-toggle,
.map-toggle {
    /*  inline-flex centres the label both ways. A plain text-align would not:
        the input is visually hidden but still a child, and the markup leaves a
        whitespace node before the text, which pushed the wording off-centre.  */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*  min-width, not width: "ΝΕΟ ΠΕΡΙΣΤΑΤΙΚΟ" is half as long again as the
        "ΝΕΑ" these buttons used to say, and a fixed width would clip it.  */
    min-width: 110px;
    min-height: 32px;
    border-radius: 5px;
    margin-left: 5px;
    border: 1px solid #ced4da;
    background-color: #fff;
    color: #212529;
    font-size: .875rem;
    padding: .25rem .5rem;
    cursor: pointer;
    text-align: center;
    /*  Long Greek labels (ΔΙΕΡΕΥΝΙΣΗ) must not wrap the button taller than
        its neighbours.  */
    white-space: nowrap;
}

.status-toggle--new.is-on           { background-color: var(--status-new);           border-color: var(--status-new);           color: #fff; }
.status-toggle--investigating.is-on { background-color: var(--status-investigating); border-color: var(--status-investigating); color: #212529; }
.status-toggle--solved.is-on        { background-color: var(--status-solved);        border-color: var(--status-solved);        color: #fff; }

/*
    These were <label> wrapping a hidden <input>, which is how Bootstrap's
    btn-group-toggle worked. Removing that JS left the click depending on
    native label-to-input activation plus a Blazor `checked` attribute, and
    the filters stopped responding. They are plain buttons now: no input to
    hide, no checked attribute to fight the DOM, focusable and operable from
    the keyboard without any help.
*/
.status-toggle:focus-visible,
.map-toggle:focus-visible {
    outline: 2px solid #212529;
    outline-offset: 2px;
}

.status-toggle--new:not(.is-on)           { color: var(--status-new); }
.status-toggle--investigating:not(.is-on) { color: #8a6100; }
.status-toggle--solved:not(.is-on)        { color: var(--status-solved); }

/*
    Map layer toggle (ΣΥΝΟΡΑ ΔΗΜΟΥ). Shares the control's shape with the status
    filters beside it, but deliberately NOT a status colour - it switches the
    boundary overlay, and borrowing green or amber would imply it filters by
    status. Neutral near-black keeps it legible as a different kind of control.
*/
.map-toggle {
    min-width: 140px;
}

.map-toggle.is-on {
    background-color: #212529;
    border-color: #212529;
    color: #fff;
}

/*
    Progress blocks in the officer diagram (ProgressPopUpDiagram).

    Were three shaped images - ProgressGray/Orange/Blue.png - so the colour
    lived in the artwork. The shape is still the PNG, but it is now used as a
    mask on a pseudo-element and filled from the status token, so one image
    serves every status and the palette stays in one place.

    The shape sits on ::before behind the text rather than on the element
    itself: masking the element would mask its content, and these blocks
    render the officer name and action inside them.
*/
.progressBlock {
    /*  inherit, not relative: these blocks take `absolute` from
        .progressBlockDiv and are placed by inline bottom/left. Making them
        relative turned that into an offset from flow position and the blocks
        piled on top of each other.  */
    position: inherit;
    width: 200px;
    height: 99px;
    /*  Own stacking context, so the z-index:-1 fill below stays behind this
        block's text but in front of .progressBlockDiv's antiquewhite
        background - without it the container showed through the shape.  */
    isolation: isolate;
}

.progressBlock::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;                       /* behind the text, not over it */
    background-color: var(--status-unknown);
    -webkit-mask: url('../IMAGES/ProgressGray.png') no-repeat center / 200px 99px;
    mask: url('../IMAGES/ProgressGray.png') no-repeat center / 200px 99px;
}

.progressBlock--new::before           { background-color: var(--status-new); }
.progressBlock--investigating::before { background-color: var(--status-investigating); }
.progressBlock--solved::before        { background-color: var(--status-solved); }