/* Docker Card Styles */

.docker-card {
    /* was: background:#F0F9FF (fixed light blue tint) — color-mix keeps the same
       subtle accent look in both themes, blending the current primary into the
       current card surface instead of a fixed hex that only worked on light. */
    background: color-mix(in srgb, var(--tblr-primary) 6%, var(--tblr-bg-surface));
    border: 1px solid var(--tblr-border-color);
    border-radius: 4px;
    padding-top: 6px;
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 14px;
}

.docker-logo {
    width: 60px;
    height: 60px;
}

.badge-up {
    background-color: #10b981;
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.timestamp {
    color: var(--app-muted-color);
    font-size: 14px;
}

.spanText {
    color: var(--tblr-body-color);
    font-size: 15px;   /* was 14px */
}

.docker-card h5,
.docker-card-property h5 {
    color: var(--app-muted-color);
    font-weight: 600;
    font-size: 15px;   /* explicit size so label and value stay visually matched, slightly larger than before */
}

.card-body h5.label-muted {
    color: var(--app-muted-color);
    font-weight: 600;
    font-size: 15px;
}


.status-item {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
    font-size: 14px;
    color: var(--tblr-body-color);
}

.status-item i {
    margin-right: 5px;
}

.status-number {
    font-weight: 600;
    margin-left: 3px;
}

.color-blue {
    color: var(--app-link-color);
}

.color-green {
    color: #10b981;
}

.color-orange {
    color: #f59e0b;
}

.color-red {
    color: #ef4444;
}

.color-pink {
    color: #ec4899;
}

.resource-item {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
    font-size: 13px;
    color: var(--app-muted-color);
}

.resource-item i {
    margin-right: 5px;
}

.edit-icon {
    color: var(--tblr-primary);
    cursor: pointer;
    font-size: 18px;
}

.edit-icon:hover {
    color: var(--tblr-primary);
    opacity: 0.8;
}

.group-label {
    color: var(--app-muted-color);
    font-size: 14px;
}

.standalone-label {
    color: var(--app-muted-color);
    font-size: 13px;
}

.socket-path {
    color: var(--app-muted-color);
    font-size: 13px;
}


/* CID styles */
/* ============ License page: CID info rows ============ */
/* Fixed-width label column, value placed right after it */
.cid-info-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tblr-border-color);
}

.cid-info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cid-info-row h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 160px;
    margin: 0;
}

.cid-info-row h5 svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.cid-info-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--tblr-body-color);
}

/* Hide the "To be used before" row when no date is set */
.cid-info-row-before:has(#cidinfo_before:empty) {
    display: none;
}

[data-bs-theme="dark"] .cid-info-value,
[data-bs-theme="dark"] .cid-info-note {
    color: #fff;
}

/* License page: thin gray border around the CID info card */
#cidInfos .docker-card-property {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    padding: 1rem 1.25rem;
}