/*
Theme Name: Status Page Theme
Author: Gemini
Description: A theme for creating a system status page based on the user's request.
Version: 1.4
*/

/* This theme uses Tailwind CSS via a CDN, which is loaded in functions.php. */

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}
.status-up {
    background-color: #28a745; /* green */
}
.status-down {
    background-color: #dc3545; /* red */
}

/* Severity Tags */
.severity-tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 9999px; /* pill shape */
    color: #fff;
}

/* * セレクタをより具体的に変更 (.severity-tag.tag-***)
 * これにより、article要素に付与されるクラスには影響せず、
 * タグのspan要素にのみスタイルが適用されます。
*/

/* 障害発生中 */
.severity-tag.tag-incidentnow {
    background-color: #ed1a3d; /* red */
}

/* 解決済み */
.severity-tag.tag-resolved {
    background-color: #28a745; /* green */
}

/* 調査中 */
.severity-tag.tag-investigation {
    background-color: #007bff; /* blue */
}

/* 状況注視中 */
.severity-tag.tag-monitoring {
    background-color: #ffc107; /* yellow */
    color: #212529; /* dark text for yellow bg */
}

/* 対応中 */
.severity-tag.tag-nowopreation {
    background-color: #6f42c1; /* purple */
}