/* Scanner Results - Stats Component */

/* Layout */
.scanner-stats__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 30px;
}

@media (min-width: 769px) {
    .scanner-stats__container { grid-template-columns: 1fr 1fr; }
}

/* Enhanced Stats Box */
.scanner-stats__box--enhanced {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border-radius: 18px;
    padding: 36px 28px;
    border: 1px solid rgba(0, 174, 239, 0.12);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.3s ease;
}
.scanner-stats__box--enhanced:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
}

/* Header */
.scanner-stats__header h3 { font-size: 1.4rem; font-weight: 700; color: #0f3c6e; margin-bottom: 6px; }
.scanner-stats__subtitle { color: #64748b; font-size: 0.95rem; margin-bottom: 24px; }

/* Total */
.scanner-stats__total { margin-bottom: 24px; }
.scanner-stats__total-value { font-size: 3rem; font-weight: 700; color: #007ecc; line-height: 1; }
.scanner-stats__total-label { color: #334155; font-size: 0.95rem; opacity: 0.9; }

/* Compliance Score */
.scanner-stats__score { margin: 20px auto 28px; max-width: 340px; }
.scanner-stats__score span { display: block; font-weight: 600; font-size: 0.95rem; color: #0f3c6e; margin-bottom: 6px; }
.scanner-stats__progress { width: 100%; height: 10px; background: #e2e8f0; border-radius: 6px; overflow: hidden; margin-bottom: 4px; }
.scanner-stats__progress-bar { height: 100%; background: linear-gradient(90deg, #00b7ff, #00e1b4); transition: width 0.4s ease; }
.score--red .scanner-stats__progress-bar { background: #e53935; }
.score--orange .scanner-stats__progress-bar { background: #fb8c00; }
.score--blue .scanner-stats__progress-bar { background: #007ecc; }
.score--green .scanner-stats__progress-bar { background: #2e7d32; }
.scanner-stats__score small { color: #475569; font-size: 0.85rem; }

/* Stats Grid */
.scanner-stats__stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin-bottom: 22px; }
.scanner-results__stat-item { background: #ffffff; border: 1px solid #e2e8f0; border-left: 6px solid transparent; border-radius: 10px; padding: 14px; transition: all 0.3s ease; }
.scanner-results__stat-item:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05); }
.scanner-results__stat-value { font-size: 1.4rem; font-weight: 700; color: #0f3c6e; }
.scanner-results__stat-label { font-size: 0.9rem; color: #475569; }

/* Category Colors */
.necessary { border-left-color: #007ecc; }
.functional { border-left-color: #6c5ce7; }
.analytical { border-left-color: #00b894; }
.marketing { border-left-color: #e74c3c; }
.firstparty { border-left-color: #00c9a7; }
.thirdparty { border-left-color: #ffb347; }

/* Legend */
.scanner-results__legend small { color: #64748b; font-size: 0.85rem; display: block; max-width: 420px; margin: 0 auto; opacity: 0.85; line-height: 1.5; }

/* Responsive */
@media (max-width: 768px) {
  .scanner-stats__box--enhanced { padding: 28px 20px; }
  .scanner-stats__total-value { font-size: 2.4rem; }
  .scanner-stats__stats-grid { grid-template-columns: repeat(2, 1fr); }
}