/* ===================================================
   mixed-content.css — Mixed Content Scanner Styles
   Sử dụng color tokens từ semantic.css và palette.css
=================================================== */
.page--mixed {
    --color-url: var(--cyan-500);
}

/* ─── Summary Stats ────────────────────────────────── */
.mc-stats {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
}

.mc-actions {
    justify-content: center;
}

.mc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
    transition: transform 0.15s ease;
}

.mc-stat:hover {
    transform: translateY(-2px);
}

.mc-btn-guide {
    background-color: #28a745 !important;
    color: #fff !important;
    border: none !important;
}

.mc-btn-guide:hover {
    background-color: #218838 !important;
    opacity: 0.9;
}

.mc-stat__value {
    font-size: var(--text-h1);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.mc-stat__label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    margin-top: var(--spacing-1);
    text-align: center;
}

.mc-stat--total .mc-stat__value  { color: var(--color-text-primary); }
.mc-stat--active .mc-stat__value  { color: var(--red-600); }
.mc-stat--passive .mc-stat__value { color: var(--yellow-600); }

[data-theme="dark"] .mc-stat--active .mc-stat__value  { color: var(--red-400); }
[data-theme="dark"] .mc-stat--passive .mc-stat__value { color: var(--yellow-400); }

/* ─── URL Highlight ─────────────────────────────────── */
.mc-url-highlight {
    color: var(--color-url);
    font-weight: 600;
    word-break: break-all;
}

/* ─── Truncated Banner ──────────────────────────────── */
.mc-truncated-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background-color: color-mix(in srgb, var(--yellow-500) 12%, transparent);
    border: 1px solid var(--yellow-400);
    border-radius: var(--radius-md);
    color: var(--yellow-700);
}

[data-theme="dark"] .mc-truncated-banner {
    color: var(--yellow-300);
    border-color: var(--yellow-600);
    background-color: color-mix(in srgb, var(--yellow-500) 15%, transparent);
}

/* ─── Severity Badges ───────────────────────────────── */
.mc-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wider);
    white-space: nowrap;
}

.mc-badge--critical {
    background-color: var(--red-100);
    color: var(--red-700);
    border: 1px solid var(--red-300);
}
.mc-badge--warning {
    background-color: var(--yellow-100);
    color: var(--yellow-700);
    border: 1px solid var(--yellow-300);
}
.mc-badge--info {
    background-color: var(--blue-100);
    color: var(--blue-700);
    border: 1px solid var(--blue-200);
}

/* Origin badges */
.mc-badge--same {
    background-color: var(--green-100);
    color: var(--green-700);
    border: 1px solid var(--green-300);
}
.mc-badge--third {
    background-color: var(--orange-100);
    color: var(--orange-700);
    border: 1px solid var(--orange-300);
}

/* Dark mode badges */
[data-theme="dark"] .mc-badge--critical {
    background-color: color-mix(in srgb, var(--red-500) 20%, transparent);
    color: var(--red-300);
    border-color: var(--red-700);
}
[data-theme="dark"] .mc-badge--warning {
    background-color: color-mix(in srgb, var(--yellow-500) 15%, transparent);
    color: var(--yellow-300);
    border-color: var(--yellow-600);
}
[data-theme="dark"] .mc-badge--same {
    background-color: color-mix(in srgb, var(--green-500) 15%, transparent);
    color: var(--green-300);
    border-color: var(--green-700);
}
[data-theme="dark"] .mc-badge--third {
    background-color: color-mix(in srgb, var(--orange-500) 15%, transparent);
    color: var(--orange-300);
    border-color: var(--orange-700);
}

[data-theme="dark"] .mc-badge--info {
    background-color: color-mix(in srgb, var(--blue-500) 15%, transparent);
    color: var(--blue-300);
    border-color: var(--blue-700);
}

/* ─── Table ──────────────────────────────────────────── */
.results-table th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
}

.mc-table td {
    vertical-align: middle;
    color: var(--color-text-secondary);
    padding: var(--space-3) var(--space-4);
}

/* Badge spacing when stacked */
.mc-table td:first-child {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    align-items: flex-start;
    justify-content: center;
}

.mc-combined-cell {
    min-width: 300px;
}

.mc-url-block {
    margin-bottom: var(--space-1);
}

.mc-fix-block {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.mc-url-link {
    color: var(--red-600);
    text-decoration: underline;
    word-break: break-all;
}
.mc-url-link:hover { color: var(--red-700); }

.mc-fix-arrow {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.mc-fix-url {
    color: var(--color-success);
    word-break: break-all;
}

.mc-foundin {
    font-family: var(--font-family-mono);
    color: var(--color-text-muted);
    background-color: var(--color-surface-muted);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* ─── No Issues ─────────────────────────────────────── */
.mc-no-issues-icon {
    font-size: var(--icon-size-200);
    color: var(--color-brand);
}

.mc-no-issues-title {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.mc-no-issues-subtitle {
    color: var(--color-text-muted);
}