.badge {
    padding: 5px 10px;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    display: inline-block;
}

.green {
    background: #28a745;
}

.yellow {
    background: #ffc107;
    color: #000;
}

.red {
    background: #dc3545;
}

.type {
    background: #17a2b8; /* teal */
    color: #fff;
}

#progressBar {
    width: 100%;
    height: 25px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 15px;
}

#progressFill {
    height: 100%;
    width: 0%;
    background: #28a745;
    transition: width 0.3s ease;
}

.table-description {
    margin: 12px 0 18px;
    padding: 10px 12px;
    background: #f7f7f7;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    line-height: 1.4;
}

.table-description p {
    margin: 0;
}

.table-description code {
    background: #fff;
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid #eaeaea;
}

/* Expanded General fields */
.general-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.general-fields .badge {
    min-width: 0;
}

/* Expanded Social fields */
.social-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.social-fields .badge {
    min-width: 0;
}

/* Expanded Schema fields */
.schema-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.schema-fields .badge {
    min-width: 0;
}

.schema-issues {
    margin-top: 6px;
    font-size: 12px;
    color: #333;
    background: #f7f7f7;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 6px 8px;
    line-height: 1.35;
}

/* Clickable schema fix badge */
.schema-fix-trigger {
    cursor: pointer;
}

.badge.schema-fix-trigger {
    text-decoration: underline;
    text-underline-offset: 2px;
}