/* Scan-stats card — renders on the scan-results page under the similar-sites
   section. Owned by the Vue results template in resources/views/sections/vue/results.blade.php.

   Loaded inline by headerFooter.blade.php so the styles are present at first
   paint (the Vue template strips <style> blocks from inside its scope).
*/

/* 2-column scan-results layout kicks in at ≥1500px viewport width.
   Below 1500px the wrapper behaves like Bootstrap's standard .container
   and both columns force back to full width so the sidebar stacks below
   the main results — same flow as before the sidebar was introduced. */
.results.results-wide {
    max-width: 1140px;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1500px) {
    .results.results-wide {
        max-width: 1600px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Force columns back to 100% below 1500px (Bootstrap's lg=992px breakpoint
   would otherwise split them at 992-1499px, which is the cramped state). */
@media (max-width: 1499px) {
    .results.results-wide .main-results.col-lg-8,
    .results.results-wide .scan-stats-sidebar.col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
.scan-stats {
    margin: 2em 0;
    padding: 1.5em;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #111827;
}
.scan-stats .scan-stats-heading {
    margin: 0 0 0.3em 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    text-align: left;
}
.scan-stats .scan-stats-meta {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 1em;
}
.scan-stats .scan-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.scan-stats .scan-stats-table thead th {
    background: #f9fafb;
    padding: 0.55em 0.75em;
    text-align: left;
    border-bottom: 2px solid #e5e7eb;
    font-weight: 600;
    color: #374151;
}
.scan-stats .scan-stats-table tbody td {
    padding: 0.55em 0.75em;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}
.scan-stats .scan-stats-table tbody tr:nth-child(even) {
    background: #fafbfc;
}
.scan-stats .scan-stats-table td.rank {
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    width: 3em;
}
.scan-stats .scan-stats-table td.name {
    font-weight: 500;
}
.scan-stats .scan-stats-table td.name a {
    color: #5e8e3e !important;
    text-decoration: none;
}
.scan-stats .scan-stats-table td.name a:hover {
    text-decoration: underline;
}
.scan-stats .scan-stats-table td.name .category {
    color: #9ca3af;
    font-size: 0.85em;
    margin-left: 0.4em;
    font-weight: 400;
}
.scan-stats .scan-stats-table td.count,
.scan-stats .scan-stats-table td.percent {
    text-align: right;
    font-variant-numeric: tabular-nums;
    width: 6em;
}
.scan-stats .scan-stats-table td.bar {
    width: 30%;
}
.scan-stats .scan-stats-table .bar-fill {
    display: inline-block;
    height: 14px;
    background: linear-gradient(to right, #7ba858, #5e8e3e);
    border-radius: 3px;
    vertical-align: middle;
}

@media (max-width: 700px) {
    .scan-stats { padding: 1em; }
    .scan-stats .scan-stats-table { font-size: 0.85rem; }
    .scan-stats .scan-stats-table td.bar { display: none; }
}

/* Gap-analysis card — distinct accent so it reads as a CTA module. */
.scan-stats.scan-stats-gap {
    border-left: 4px solid #5e8e3e;
    background: #f8fafc;
}
.scan-stats.scan-stats-gap .gap-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.scan-stats.scan-stats-gap .gap-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 0.7em 0;
    border-bottom: 1px solid #e5e7eb;
}
.scan-stats.scan-stats-gap .gap-row:last-child {
    border-bottom: 0;
}
.scan-stats.scan-stats-gap .gap-info {
    flex: 1;
    min-width: 0;
}
.scan-stats.scan-stats-gap .gap-app-name {
    font-size: 1rem;
    font-weight: 600;
}
.scan-stats.scan-stats-gap .gap-app-name a {
    color: #111827 !important;
    text-decoration: none;
}
.scan-stats.scan-stats-gap .gap-app-name a:hover {
    color: #5e8e3e !important;
}
.scan-stats.scan-stats-gap .gap-app-meta {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.15em;
}
.scan-stats.scan-stats-gap .gap-app-meta strong {
    color: #5e8e3e;
    font-variant-numeric: tabular-nums;
}
.scan-stats.scan-stats-gap .gap-cta {
    flex-shrink: 0;
    display: inline-block;
    padding: 0.45em 1em;
    background: #5e8e3e;
    color: #fff !important;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}
.scan-stats.scan-stats-gap .gap-cta:hover {
    background: #4a7c31;
    text-decoration: none;
}

/* Vertical-norm comparison card — sits below detected-apps in the main column.
   Two rows, each with a big number and a sentence comparing the store to the
   vertical norm. Color cue: green if at/above norm, amber if below. */
.scan-stats.scan-norm {
    border-left: 4px solid #059669;
    background: #f0fdf4;
}
.scan-stats.scan-norm .scan-norm-stats {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-top: 0.5em;
}
.scan-stats.scan-norm .scan-norm-row {
    display: flex;
    align-items: center;
    gap: 1.2em;
}
.scan-stats.scan-norm .scan-norm-figure {
    font-size: 2.4rem;
    font-weight: 700;
    min-width: 4em;
    text-align: center;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    padding: 0.3em 0.5em;
    border-radius: 8px;
}
.scan-stats.scan-norm .scan-norm-figure.above {
    color: #047857;
    background: #d1fae5;
}
.scan-stats.scan-norm .scan-norm-figure.below {
    color: #b45309;
    background: #fef3c7;
}
.scan-stats.scan-norm .scan-norm-text {
    flex: 1;
    font-size: 1rem;
    color: #1f2937;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .scan-stats.scan-norm .scan-norm-row { flex-direction: column; align-items: flex-start; }
    .scan-stats.scan-norm .scan-norm-figure { font-size: 1.8rem; min-width: 0; }
}

/* Skeleton loader — same outer card shape, gray pulsing rectangles inside.
   Disappears the moment the corresponding real card has data to show. */
.scan-stats.scan-stats-skeleton {
    border-left-color: #e5e7eb;
}
.scan-stats.scan-stats-skeleton .skeleton-line,
.scan-stats.scan-stats-skeleton .skeleton-cell {
    background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: scan-stats-shimmer 1.4s ease-in-out infinite;
}
.scan-stats.scan-stats-skeleton .skeleton-line.skeleton-heading {
    height: 1.3em;
    width: 70%;
    margin-bottom: 0.6em;
}
.scan-stats.scan-stats-skeleton .skeleton-line.skeleton-meta {
    height: 0.9em;
    width: 55%;
    margin-bottom: 1.2em;
}
.scan-stats.scan-stats-skeleton .skeleton-row {
    display: flex;
    gap: 0.75em;
    align-items: center;
    padding: 0.55em 0;
    border-bottom: 1px solid #f3f4f6;
}
.scan-stats.scan-stats-skeleton .skeleton-row:last-child { border-bottom: 0; }
.scan-stats.scan-stats-skeleton .skeleton-cell { height: 1em; }
.scan-stats.scan-stats-skeleton .skeleton-rank { width: 1.5em; }
.scan-stats.scan-stats-skeleton .skeleton-name { width: 35%; }
.scan-stats.scan-stats-skeleton .skeleton-bar { flex: 1; height: 14px; }
.scan-stats.scan-stats-skeleton .skeleton-cta { width: 4em; height: 1.8em; border-radius: 4px; }
.scan-stats.scan-stats-skeleton.scan-norm { border-left-color: #d1fae5; }
.scan-stats.scan-stats-skeleton .skeleton-figure { width: 4em; height: 2.4em; }

@keyframes scan-stats-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* =========================================================================
   Chrome extension install ask (resources/views/sections/extension-install.blade.php).

   Renders inside the scan-results card, under the theme answer and under the
   affiliate CTA. Deliberately quieter than that CTA - Chrome blue rather than
   the brand green, a smaller button, no gradient - because it sits on the same
   screen as the click that pays for the site and must not compete with it.

   Lives in a stylesheet rather than a <style> in the partial: the partial is
   included inside the Vue results template, which strips style blocks.
   ========================================================================= */
.ext-install {
    display: flex;
    align-items: center;
    gap: 1em;
    margin: 1.75em 0 0.5em;
    padding: 1em 1.25em;
    background: #f7f9fd;
    border: 1px solid #dbe5f5;
    border-radius: 10px;
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ext-install__icon {
    flex: none;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #dbe5f5;
    color: #1a73e8;
    font-size: 20px;
}
.ext-install__text { flex: 1 1 auto; }
.ext-install .ext-install__title {
    margin: 0 0 0.15em 0;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}
.ext-install .ext-install__body {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #5b6472;
    font-weight: 400;
}
.ext-install__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #1a73e8;
    color: #fff !important;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all .3s ease;
}
.ext-install__btn:hover {
    background: #1660c9;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 115, 232, .3);
}

@media (max-width: 700px) {
    .ext-install {
        flex-direction: column;
        text-align: center;
        gap: 0.75em;
    }
    .ext-install__btn { width: 100%; justify-content: center; }
}