/* Alertas (wms-alerts, J4 of stage 14, Blazor only): the screen (layout of the registration screens with a list of 420px, filters, severity chips, facts and
   history), the bell and the sound preference of the top bar, the popup of the alerts that require an action (fixed at the bottom right of every screen)
   and the alert cards of the home panel. Colors only from the tokens of theme.css (wms-ui). */
.alerts-layout {
    grid-template-columns: minmax(420px, 1fr) minmax(0, 1.6fr)
}

@media(max-width:1000px) {
    .alerts-layout {
        grid-template-columns: 1fr
    }
}

.alert-tabs {
    flex-wrap: wrap;
    margin: 8px 0
}

.alert-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    margin: 0 0 10px
}

.alert-filters .user-field {
    min-width: 0
}

.alert-filters .alert-filter-reference {
    grid-column: span 2
}

.alert-filters .alert-filter-action {
    grid-column: span 2;
    margin: 0
}

@media(max-width:560px) {
    .alert-filters {
        grid-template-columns: 1fr
    }

    .alert-filters .alert-filter-reference,
    .alert-filters .alert-filter-action {
        grid-column: auto
    }
}

.compact-chip.alert-severity.is-critical,
.alert-popup.is-critical .alert-popup-head svg {
    background: var(--danger-soft);
    color: var(--danger-text)
}

.compact-chip.alert-severity.is-warning {
    background: var(--warning-soft);
    color: var(--warning-text)
}

.compact-chip.alert-severity.is-info {
    background: var(--info-soft);
    color: var(--info-text)
}

.alert-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px
}

.alert-status {
    margin-left: auto;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    background: var(--chip-neutral-bg);
    color: var(--chip-neutral-text)
}

.alert-status.is-pending {
    background: var(--warning-soft);
    color: var(--warning-text)
}

.alert-status.is-resolved {
    background: var(--success-soft);
    color: var(--success-text)
}

.alert-facts dd small {
    display: block;
    color: var(--text-muted)
}

.alert-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--info-text);
    font-weight: 600;
    cursor: pointer
}

.alert-link:hover {
    text-decoration: underline
}

.alert-detail {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--text-2);
    overflow-wrap: anywhere
}

.alert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px
}

.alert-history li small {
    flex-basis: 100%;
    overflow-wrap: anywhere
}

.alert-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted)
}

.alert-live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success)
}

/* The bell and the sound preference of the top bar (every screen, only with ALERT). */
.alert-bell-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0
}

.alert-bell,
.alert-sound {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 32px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer
}

.alert-bell:hover,
.alert-sound:hover {
    color: var(--text)
}

.alert-bell.has-pending {
    color: var(--text)
}

.alert-bell-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--chip-neutral-text);
    color: var(--on-fill);
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center
}

.alert-bell-count.is-action {
    background: var(--danger)
}

/* The popup of the alerts that require an action: subtle, at the bottom right, never over the side menu nor the fields of the form. */
.alert-popups {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    display: grid;
    gap: 8px;
    width: min(340px, calc(100vw - 32px));
    pointer-events: none
}

.alert-popup {
    pointer-events: auto;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 6px 18px var(--shadow);
    font-size: 13px
}

.alert-popup.is-critical {
    border-left-color: var(--danger)
}

.alert-popup.is-info {
    border-left-color: var(--info)
}

.alert-popup p {
    margin: 6px 0;
    color: var(--text-2);
    overflow-wrap: anywhere
}

.alert-popup-head {
    display: flex;
    align-items: center;
    gap: 6px
}

.alert-popup-head svg {
    border-radius: var(--radius-sm)
}

.alert-popup-close {
    margin-left: auto;
    display: inline-flex;
    padding: 2px;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer
}

.alert-popup-actions {
    display: flex;
    justify-content: flex-end
}

@media print {
    .alert-popups {
        display: none
    }
}

/* The alert cards of the home panel. */
.alert-summary-row {
    margin-top: 18px
}

.alert-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 6px 0 12px
}

@media(max-width:760px) {
    .alert-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.alert-summary-card {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--chip-neutral-text);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer
}

.alert-summary-card span {
    font-size: 12px;
    color: var(--text-muted)
}

.alert-summary-card strong {
    font-size: 22px
}

.alert-summary-card small {
    color: var(--danger-text);
    font-weight: 600
}

.alert-summary-card.is-pending {
    border-left-color: var(--warning)
}

.alert-summary-card.is-acknowledged {
    border-left-color: var(--info)
}

.alert-summary-card.is-resolved {
    border-left-color: var(--success)
}

/* J7 (wms-box-check): the boxes that wait for the manager and the supplies for a box that did not succeed. */
.alert-summary-card.is-decision {
    border-left-color: var(--warning)
}

.alert-summary-card.is-supply-failed {
    border-left-color: var(--danger-text)
}

/* Actions of the manager (wms-alerts, phase 1 of docs/alertas-acoes/desenho.md): the popup of an action (above the screen, below the alert popups) and its warning. */
.alert-action-dialog {
    width: min(520px, 100%)
}

.alert-action-dialog p {
    margin: 0;
    font-size: 13px;
    color: var(--text-2)
}

.alert-action-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--warning);
    border-radius: var(--radius);
    color: var(--warning-text)
}

.alert-do {
    margin-bottom: 4px
}