body {
    background-color: #f4f5f7;
}

.site-card {
    transition: box-shadow 0.15s ease-in-out;
    border-bottom-width: 2px;
    border-right-width: 2px;
    border-bottom-color: rgba(0, 0, 0, 0.3);
    border-right-color: rgba(0, 0, 0, 0.3);
}

.site-card:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

.site-card[role="button"] {
    cursor: pointer;
}

.site-card[role="button"]:hover {
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.12);
}

.site-card[role="button"]:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Per-type tints so adding another site of the same kind picks up the
   color automatically. Keyed off data-site-type, not a specific site id. */
.site-card[data-site-type="courses"] {
    background-color: #f1faf1;
}

.site-card[data-site-type="woocommerce"] {
    background-color: #f7fcf7;
}

.site-card[data-site-type="blocktinu"] {
    background-color: #f1f7fa;
}

.site-card[data-site-type="blocktinu-bld"] {
    background-color: #f3f1fa;
}

.site-card[data-site-type="tcams"],
.site-card[data-site-type="tcams-host"] {
    background-color: #fdfbf0;
}

.site-card[data-site-type="tcams-licenroll"] {
    background-color: #fefdf7;
}

/* Section rule on the combined host card. The label sits on the line. */
.metric-divider {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.35rem 0.15rem 0.15rem;
    color: var(--bs-secondary-color);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.metric-divider::before,
.metric-divider::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
}

.items-heading {
    margin-top: 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.sites-band {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
}

.sites-band + .sites-band {
    margin-top: 0.5rem;
}

.sites-band-cards {
    flex: 1 1 auto;
    min-width: 0;
}

/* Group name sits at the left of its cards, letters turned on their side
   so the word reads downward. The strip stretches to the group's height
   and the word is centered in it. */
.sites-group-label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    margin: 0;
    padding: 0.35rem 0.1rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.metric-box {
    background-color: rgba(0, 0, 0, 0.03);
}

.metric-box.metric-zero {
    background-color: #f7f7f7 !important;
    color: #9a9a9a !important;
}

.metric-box.metric-zero .metric-label {
    color: #9a9a9a !important;
}

.metric-box.metric-new {
    background-color: #d6ebff !important;
}

.metric-box.metric-issues {
    background-color: #f8d4d4 !important;
}

.metric-label {
    font-size: 0.68rem;
}

/* Three-across cells are narrow; keep "Updated 24h" on one line. */
.row-cols-3 .metric-label {
    font-size: 0.58rem;
}

/* Two-line text log under the counters. Empty lines keep their height so
   the row is reserved before anything is written there. */
.tile-log {
    margin-top: 0.25rem;
}

.tile-log-line {
    min-height: 1.15em;
    font-size: 0.68rem;
    line-height: 1.15;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Grid, not flex, so title/subtitle/meta/date line up as real columns across
   every row — each row's spans become grid items via `display: contents` on
   <li>, and grid-template-columns sizes each column to its widest row.
   Only title is flexible/truncating (`minmax(0, 1fr)`) — subtitle/meta/date
   all size to their own content (`max-content`), same as meta/date always
   did. This lets each card's subtitle column take exactly as much room as
   that card type's actual content needs (e.g. a short "[2] username"
   vs. a long WordPress post URL) instead of an artificial equal split with
   title that looked wrong across such differently-shaped card content. */
.items-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content max-content max-content;
    column-gap: 0.4rem;
    align-items: baseline;
}

.items-list li {
    display: contents;
}

.items-list li > span {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.items-list li:first-child > span {
    border-top: none;
}

/* Activity within the last 24h is bold (see dashboard.js isRecent()); within
   the last 1h it's ALSO dark red on top of that (see isVeryRecent()). */
.text-recent {
    color: #8b0000;
}

/* Status-like strip showing the source API's own reported processing time
   (site.duration_ms) when available — hidden (`d-none`, see dashboard.js)
   when the connector doesn't supply it. On tiles this lives in a card
   footer; in the detail modal it is the left side of the modal footer. */
.duration-area {
    background-color: rgba(0, 0, 0, 0.02);
}

#site-detail-modal .duration-area {
    background-color: transparent;
}

#site-detail-card:hover {
    box-shadow: none;
}