/* ==========================================================================
   MÓDULO: SITE HEALTH AUDIT
   ========================================================================== */

/* --- (FIX) Layout de 2 Columnas de Site Health --- */
.smg-dashboard-grid#smg-site-health-results {
    grid-template-columns: repeat(2, 1fr) !important;
}
@media (max-width: 1200px) {
    .smg-dashboard-grid#smg-site-health-results {
        grid-template-columns: 1fr !important;
    }
}

/* --- Tarjetas de Carga / Error / Overall (Ocupan toda la fila) --- */
.smg-loading-card,
.smg-error-card,
.smg-overall-score-card,
#smg-prioritized-list-card,
#smg-sh-progress-card {
    grid-column: 1 / -1 !important;
}

/* --- Tarjeta Overall Score --- */
.smg-overall-score-card {
    text-align: center;
}
.smg-overall-score-card.smg-score-good { border-color: var(--smg-success-color); }
.smg-overall-score-card.smg-score-ok { border-color: var(--smg-warning-color); }
.smg-overall-score-card.smg-score-poor { border-color: var(--smg-error-color); }
.smg-overall-score-card.smg-score-na { border-color: var(--smg-border-color); }

.smg-overall-score-card .smg-health-score-main {
    margin-bottom: 20px;
}
.smg-overall-score-card p {
    font-size: 13px;
    color: var(--smg-text-secondary);
    margin: 0;
}
.smg-error-card p {
    color: var(--smg-error-color);
}

/* --- (FIX) Barra de Progreso de Site Health --- */
#smg-sh-progress-card {
    padding: 15px 20px;
}
.smg-sh-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
#smg-sh-progress-bar {
    background-color: var(--smg-accent-fuchsia) !important; /* (FIX) Color fucsia */
    /* El width es dinámico (inline) */
}

/* --- Tarjetas de Métricas (PageSpeed, Tech SEO) --- */
.smg-health-card h4 {
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--smg-border-color);
    padding-bottom: 10px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--smg-text-primary);
}
.smg-health-card h4 .dashicons {
    color: var(--smg-accent-blue);
}

.smg-health-score-main {
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    margin-bottom: 10px;
    padding-bottom: 15px;
}
.smg-health-score-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--smg-text-secondary);
    margin-top: 5px;
}

/* Clases de color para puntuaciones (0-100) */
.smg-score-good, strong.smg-score-good { color: var(--smg-success-color) !important; }
.smg-score-ok, strong.smg-score-ok { color: var(--smg-warning-color) !important; }
.smg-score-poor, strong.smg-score-poor { color: var(--smg-error-color) !important; }
.smg-score-na, strong.smg-score-na { color: var(--smg-text-secondary) !important; font-style: italic; }

.smg-health-metric-list {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 14px;
}
.smg-health-metric-list li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--smg-border-color);
    display: flex;
    justify-content: space-between;
    color: var(--smg-text-secondary);
}
.smg-health-metric-list li:last-child {
    border-bottom: none;
}
.smg-health-metric-list li span { /* Etiqueta de la métrica */
    margin-right: 10px;
}
.smg-health-metric-list li strong { /* Valor de la métrica */
    color: var(--smg-text-primary);
    font-weight: 600;
    text-align: right;
}
.smg-health-metric-list hr.smg-health-separator {
    border: none;
    border-top: 1px solid var(--smg-border-color);
    margin: 10px 0;
    padding: 0;
    height: 0;
}

.smg-health-card-footer {
    margin-top: 15px;
    margin-bottom: 0 !important; /* Override default p margin */
    font-size: 13px !important;
    text-align: right;
}
.smg-health-card-footer a {
    color: var(--smg-accent-blue);
    text-decoration: none;
    font-weight: 600;
}
.smg-health-card-footer a:hover {
    text-decoration: underline;
}

/* --- Tarjeta de Lista Priorizada (Posts) --- */
.smg-prioritized-list-table {
    margin: 0;
}
.smg-prioritized-list-table th.smg-priority-col-title { width: 60%; }
.smg-prioritized-list-table th.smg-priority-col-score { width: 20%; text-align: center; }
.smg-prioritized-list-table th.smg-priority-col-actions { width: 20%; text-align: center; }

.smg-prioritized-list-table td.smg-priority-cell-score,
.smg-prioritized-list-table td.smg-priority-cell-actions {
    text-align: center;
}

.smg-health-pagination-bar {
    border-top: 1px solid var(--smg-border-color);
    margin-top: 1px;
    padding: 15px 0 0 0; /* Espacio superior, sin padding horizontal/inferior */
}

/* Badges para la tabla de posts */
.smg-score-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 4px;
    color: #fff !important;
    min-width: 60px;
    text-align: center;
}
.smg-score-badge.smg-score-good { background-color: var(--smg-success-color); }
.smg-score-badge.smg-score-ok { background-color: var(--smg-warning-color); }
.smg-score-badge.smg-score-poor { background-color: var(--smg-error-color); }
.smg-score-badge.smg-score-na { background-color: #A0AEC0; }



/* Site Health: estilos del progress bar usados por el JS */
.smg-progress-track {
  background-color: var(--smg-bg-primary);
  border: 1px solid var(--smg-border-color);
  border-radius: 9999px;
  overflow: hidden;
  height: 22px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.smg-progress-track .smg-progress-bar {
  background-color: var(--smg-accent-fuchsia); /* el rosa del plugin */
  height: 100%;
  transition: width .25s ease;
}


/* Site Health: evitar que se recorte el borde/sombra del card */
.smg-site-health-grid { 
  overflow: visible;             /* antes heredaba hidden en algunos layouts */
}
.smg-site-health-grid .smg-placeholder-card {
  overflow: visible;             /* por si el recorte venía del propio card */
  grid-column: 1 / -1;
  width: 100%;
  min-height: 140px;
  display: flex;
  align-items: center;
}

/* Stronger empty-state rules so the initial placeholder always spans the full audit area */
#smg-site-health-results.smg-dashboard-grid.smg-site-health-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100%;
  align-items: stretch;
}
#smg-site-health-results.smg-dashboard-grid.smg-site-health-grid > .smg-placeholder-card,
#smg-site-health-results.smg-dashboard-grid.smg-site-health-grid > .smg-loading-card,
#smg-site-health-results.smg-dashboard-grid.smg-site-health-grid > .smg-error-card {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  box-sizing: border-box;
}
#smg-site-health-results .smg-placeholder-card p {
  margin: 0;
}