/* ===== Site Cards & Grid ===== */

/* Sites grid */
.sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

/* Site card base */
.site-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 16px 18px 12px;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: box-shadow 0.2s, transform 0.15s;
}

.site-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

/* Site header */
.site-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.site-favicon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

.site-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    letter-spacing: -0.01em;
}

/* Card footer with status + meta */
.site-card-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
}

/* Status dot */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.status-up { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); }
.status-dot.status-down { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
.status-dot.status-slow,
.status-dot.status-degraded { background: #f97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15); }
.status-dot.status-unknown { background: #9ca3af; box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.15); }
.status-dot.status-protected { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }
.status-dot.status-testing { background: #6b7280; box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.15); }

.status-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.meta-items {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.meta-item {
    font-size: 12px;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.meta-item i {
    font-size: 10px;
    color: #9ca3af;
}

.meta-item.meta-untested {
    color: #d1d5db;
    font-style: italic;
    font-size: 11px;
}

.meta-item.meta-time {
    color: #9ca3af;
    font-size: 11px;
}

/* Status-specific card accents */
.site-card.status-down {
    border-color: #fecaca;
    background: linear-gradient(to bottom, #fff5f5, #fff);
}

.site-card.status-slow,
.site-card.status-degraded {
    border-color: #fed7aa;
    background: linear-gradient(to bottom, #fffbf5, #fff);
}

.site-card.status-up {
    border-color: #e5e7eb;
}

.site-card.status-unknown {
    border-color: #e5e7eb;
}

.site-card.status-protected {
    border-color: #bfdbfe;
    background: linear-gradient(to bottom, #f0f7ff, #fff);
}

.site-card.status-testing {
    border-color: #e5e7eb;
}

/* Card actions (edit/delete) */
.card-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}

.site-card:hover .card-actions {
    opacity: 1;
}

.card-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: all 0.15s;
    padding: 0;
}

.card-action-btn.edit:hover {
    border-color: #f97316;
    color: #f97316;
    background: #fff7ed;
}

.card-action-btn.delete:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
}

/* Empty state */
.empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: #9ca3af;
    gap: 12px;
}

.empty-state i {
    font-size: 32px;
    opacity: 0.4;
}

.empty-state p {
    margin: 0;
    font-size: 14px;
}

/* Error reason line on cards */
.card-error-reason {
    font-size: 11px;
    color: #9ca3af;
    padding: 6px 10px;
    margin: 0 -18px;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.3;
}

.card-error-reason i {
    font-size: 10px;
    flex-shrink: 0;
}

.site-card.status-down .card-error-reason {
    color: #dc2626;
    background: #fef2f2;
}

.site-card.status-protected .card-error-reason {
    color: #2563eb;
    background: #eff6ff;
}

.site-card.status-slow .card-error-reason {
    color: #ea580c;
    background: #fff7ed;
}

/* Legacy status badge (kept for compatibility) */
.status-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.status-badge.status-up { color: #22c55e; background: #f0fdf4; }
.status-badge.status-down { color: #ef4444; background: #fef2f2; }
.status-badge.status-slow,
.status-badge.status-degraded { color: #f97316; background: #fff7ed; }
.status-badge.status-protected { color: #3b82f6; background: #eff6ff; }
.status-badge.status-unknown { color: #9ca3af; background: #f9fafb; }
.status-badge.status-testing { color: #6b7280; background: #f9fafb; }
.status-badge i { font-size: 10px; }

/* Status indicators (for reactive dashboard component) */
.status-indicator {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.status-indicator.status-up { background: #f0fdf4; color: #22c55e; }
.status-indicator.status-down { background: #fef2f2; color: #ef4444; }
.status-indicator.status-slow,
.status-indicator.status-degraded { background: #fff7ed; color: #f97316; }
.status-indicator.status-unknown { background: #f9fafb; color: #9ca3af; }
.status-indicator i { margin-right: 4px; }

/* Prediction warnings */
.prediction-warning {
    padding: 6px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.predictive-critical .prediction-warning { background: #fef2f2; color: #dc2626; }
.predictive-warning .prediction-warning { background: #fff7ed; color: #ea580c; }
.prediction-warning i { margin-right: 6px; }

/* Connected/disconnected status */
.connected { color: #22c55e; display: flex; align-items: center; font-weight: 500; }
.disconnected { color: #ef4444; display: flex; align-items: center; font-weight: 500; }

/* No sites placeholder */
.no-sites {
    background: #fff;
    border-radius: 6px;
    padding: 24px;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.no-sites p { color: #9ca3af; font-size: 14px; }

/* Compact mode */
.reactive-dashboard.compact .sites-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.reactive-dashboard.compact .site-card {
    padding: 10px 12px;
}

/* Dark mode */
body.dark-mode .site-card {
    background: #2a2a3d;
    border-color: #3f3f5a;
}

body.dark-mode .site-card.status-down {
    border-color: #7f1d1d;
    background: linear-gradient(to bottom, #2d2030, #2a2a3d);
}

body.dark-mode .site-card.status-slow {
    border-color: #7c2d12;
    background: linear-gradient(to bottom, #2d2820, #2a2a3d);
}

body.dark-mode .site-card.status-protected {
    border-color: #1e3a5f;
    background: linear-gradient(to bottom, #1e2a3d, #2a2a3d);
}

body.dark-mode .card-error-reason { background: #1e1e2d; border-top-color: #3f3f5a; }
body.dark-mode .site-card.status-down .card-error-reason { color: #f87171; background: #2d1f20; }
body.dark-mode .site-card.status-protected .card-error-reason { color: #60a5fa; background: #1e2a3d; }
body.dark-mode .site-card.status-slow .card-error-reason { color: #fb923c; background: #2d2820; }

body.dark-mode .site-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.dark-mode .site-header h3 { color: #e4e6eb; }
body.dark-mode .site-card-footer { border-top-color: #3f3f5a; }
body.dark-mode .status-label { color: #9ca3af; }
body.dark-mode .meta-item { color: #9ca3af; }
body.dark-mode .card-action-btn { background: #2a2a3d; border-color: #3f3f5a; }
body.dark-mode .empty-state { color: #6b7280; }

@media (max-width: 768px) {
    .sites-grid {
        grid-template-columns: 1fr;
    }
}