/* Page Speed Module Styles */

.sf-metric-card {
    /* Theme tokens: the literal #F8FAFC stayed white in dark mode. */
    background: var(--sf-gray-50, #F8FAFC);
    border: 1px solid var(--sf-gray-200, #E2E8F0);
    border-left: 3px solid var(--sf-gray-200, #E2E8F0);
    border-radius: 8px;
    padding: 12px 14px;
    text-align: center;
    transition: border-left-color 0.3s;
}

.sf-metric-label {
    font-weight: 700;
    font-size: 12px;
    color: var(--sf-gray-500, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.sf-metric-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--sf-gray-800, #1E293B);
    margin-bottom: 2px;
    transition: color 0.3s;
}

.sf-metric-desc {
    font-size: 11px;
    color: var(--sf-gray-500, #94A3B8);
    line-height: 1.3;
}

/* Score badges for overview table */
.sf-score-badge {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    color: #fff;
}

.sf-score-good {
    background: #22C55E;
}

.sf-score-avg {
    background: #F59E0B;
}

.sf-score-bad {
    background: #EF4444;
}

.sf-score-na {
    background: var(--sf-gray-200, #CBD5E1);
    color: var(--sf-gray-500, #64748B);
}

/* Loading spinner */
.sf-speed-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 4px solid var(--sf-gray-200, #E2E8F0);
    border-top-color: var(--sf-primary, #4F46E5);
    border-radius: 50%;
    animation: sf-spin 0.8s linear infinite;
}

@keyframes sf-spin {
    to { transform: rotate(360deg); }
}

/* Post meta speed styles */
.sf-meta-metric {
    font-size: 12px;
    padding: 4px 0;
    color: var(--sf-gray-600, #475569);
}

.sf-meta-metric strong {
    color: var(--sf-gray-800, #1E293B);
}

.seo-fury-speed-meta-wrap .button {
    font-size: 12px;
    padding: 2px 10px;
}

/* Overview table */
.sf-overview-check-btn {
    font-size: 12px !important;
    padding: 2px 10px !important;
}

/* Score gauges: SVG presentation attributes cannot use var(), so the
   number and the ring track are coloured here (dark text on the dark
   theme made the score unreadable). */
.sf-gauge-track { stroke: var(--sf-gray-200, #E2E8F0); }
.sf-gauge-score { fill: var(--sf-gray-800, #1E293B); }

/* Score tones. page-speed.js / class-page-speed.php set .is-good / .is-warn /
   .is-bad instead of inline hex colours, so they follow the theme tokens
   (dark mode, new design). Text uses the readable tone tokens; bars, rings
   and card edges use the brighter status colours. */
.sf-ps-tone.is-good { color: var(--sfa-good, var(--sf-tone-good, #047857)); }
.sf-ps-tone.is-warn { color: var(--sfa-ok, var(--sf-tone-warn, #b45309)); }
.sf-ps-tone.is-bad  { color: var(--sfa-bad, var(--sf-tone-bad, #b91c1c)); }
.sf-ps-score { font-weight: 700; }
.sf-ps-muted { color: var(--sf-gray-400, #94A3B8); }
.sf-ps-small { font-size: 12px; }

.sf-gauge-bar.is-good { stroke: var(--sfa-good, var(--sf-success, #22C55E)); }
.sf-gauge-bar.is-warn { stroke: var(--sfa-ok, var(--sf-warning, #F59E0B)); }
.sf-gauge-bar.is-bad  { stroke: var(--sfa-bad, var(--sf-danger, #EF4444)); }

.sf-metric-card.is-good { border-left-color: var(--sfa-good, var(--sf-success, #22C55E)); }
.sf-metric-card.is-warn { border-left-color: var(--sfa-ok, var(--sf-warning, #F59E0B)); }
.sf-metric-card.is-bad  { border-left-color: var(--sfa-bad, var(--sf-danger, #EF4444)); }
.sf-metric-card.is-good .sf-metric-value { color: var(--sfa-good, var(--sf-tone-good, #047857)); }
.sf-metric-card.is-warn .sf-metric-value { color: var(--sfa-ok, var(--sf-tone-warn, #b45309)); }
.sf-metric-card.is-bad  .sf-metric-value { color: var(--sfa-bad, var(--sf-tone-bad, #b91c1c)); }

/* Opportunities (tool page) */
.sf-ps-opp {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--sf-gray-100, #F1F5F9);
}
.sf-ps-opp-body { flex: 1; }
.sf-ps-opp-bar {
    width: 4px;
    height: 30px;
    border-radius: 2px;
    background: var(--sf-gray-200, #E2E8F0);
}
.sf-ps-opp-bar.is-good { background: var(--sfa-good, var(--sf-success, #22C55E)); }
.sf-ps-opp-bar.is-warn { background: var(--sfa-ok, var(--sf-warning, #F59E0B)); }
.sf-ps-opp-bar.is-bad  { background: var(--sfa-bad, var(--sf-danger, #EF4444)); }
/* Opportunities (post meta box) */
.sf-ps-opp-list { margin: 4px 0 0; padding-left: 16px; }

/* Per-post speed history */
.sf-ps-history {
    margin-top: 16px;
    border-top: 1px solid var(--sf-gray-200, #E2E8F0);
    padding-top: 12px;
}
.sf-ps-history h5 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-gray-700, #475569);
}
.sf-ps-history table { width: 100%; font-size: 11px; border-collapse: collapse; }
.sf-ps-history thead tr { border-bottom: 1px solid var(--sf-gray-200, #E2E8F0); }
.sf-ps-history th { padding: 4px 6px; color: var(--sf-gray-500, #64748B); font-weight: 600; }
.sf-ps-history td { padding: 4px 6px; }
.sf-ps-history-row { border-bottom: 1px solid var(--sf-gray-100, #F1F5F9); }
.sf-ps-history .sf-ps-history-date { text-align: left; }
td.sf-ps-history-date { color: var(--sf-gray-700, #475569); }
.sf-ps-history .sf-ps-history-device,
.sf-ps-history .sf-ps-history-score { text-align: center; }
.sf-ps-history-device .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--sf-gray-500, #64748B);
}

/* Mobile / Desktop segmented switch: same height as the URL field next to it. */
.sf-speed-strategy-toggle .sf-speed-strategy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
}