/* ===== Danger Level Indicators ===== */

/* Danger Badge */
.danger-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
}

/* Safe Level (安全) */
.danger-safe {
    background-color: var(--danger-safe);
}

/* Caution Level (注意) */
.danger-caution {
    background-color: var(--danger-caution);
}

/* Danger Level (危険) */
.danger-danger {
    background-color: var(--danger-danger);
}

/* Row Highlighting for Dangerous Commands */
tr[data-danger="danger"] {
    background-color: #fff5f5;
}

tr[data-danger="danger"]:hover {
    background-color: #ffebee;
}

tr[data-danger="caution"] {
    background-color: #fffdf5;
}

tr[data-danger="caution"]:hover {
    background-color: #fff8e1;
}

/* Danger Legend */
.danger-legend {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    background: white;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.danger-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.danger-legend-item .danger-badge {
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
}

/* Tooltip for danger explanation */
.danger-tooltip {
    position: relative;
    cursor: help;
}

.danger-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.4rem 0.6rem;
    background: #333;
    color: white;
    font-size: 0.75rem;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
}

.danger-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}