/*
 * pagelift.css
 * -----------------------------------------------------------------------------
 * Port of Q:\WebSite\PageLift\app\static\app.css. Every selector is scoped
 * under .pagelift so it cannot collide with BPS-Corp's own app.css (which
 * defines its own .card, .nav, .metric classes for the marketing site).
 *
 * Wrap PageLift's page body in <div class="pagelift"> and these styles apply.
 * Variables are scoped too so dark-mode + theming stay local.
 *
 * Served at /_content/PageLift.Web/css/pagelift.css thanks to the Razor Class
 * Library convention -- the host serves embedded static assets automatically
 * via UseStaticFiles().
 */

.pagelift {
    --color-background-primary:#ffffff;
    --color-background-secondary:#f4f3ee;
    --color-background-tertiary:#eceae3;
    --color-background-info:#e6f1fb;
    --color-background-danger:#fcebeb;
    --color-background-success:#eaf3de;
    --color-background-warning:#faeeda;
    --color-text-primary:#1a1a18;
    --color-text-secondary:#5f5e5a;
    --color-text-tertiary:#888780;
    --color-text-info:#185fa5;
    --color-text-danger:#a32d2d;
    --color-text-success:#3b6d11;
    --color-text-warning:#854f0b;
    --color-border-tertiary:rgba(0,0,0,0.12);
    --color-border-secondary:rgba(0,0,0,0.22);
    --color-border-primary:rgba(0,0,0,0.32);
    --pl-border-radius-md:8px;
    --pl-border-radius-lg:12px;
    --pl-border-radius-xl:16px;
    --pl-font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --pl-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

    font-family: var(--pl-font-sans);
    color: var(--color-text-primary);
    max-width: 760px;
    margin: 2rem auto;
    line-height: 1.6;
}

@media (prefers-color-scheme:dark) {
    .pagelift {
        --color-background-primary:#201f1d;
        --color-background-secondary:#2b2a27;
        --color-background-tertiary:#191817;
        --color-background-info:#13324c;
        --color-background-danger:#3a1c1c;
        --color-background-success:#22330f;
        --color-background-warning:#3a2a0c;
        --color-text-primary:#f0eee6;
        --color-text-secondary:#b4b2a9;
        --color-text-tertiary:#8a8980;
        --color-text-info:#85b7eb;
        --color-text-danger:#f09595;
        --color-text-success:#97c459;
        --color-text-warning:#ef9f27;
        --color-border-tertiary:rgba(255,255,255,0.13);
        --color-border-secondary:rgba(255,255,255,0.24);
        --color-border-primary:rgba(255,255,255,0.34);
    }
}

.pagelift * { box-sizing: border-box; }
.pagelift input, .pagelift textarea, .pagelift select {
    font: inherit; height: 36px; padding: 0 10px;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--pl-border-radius-md);
    background: var(--color-background-primary);
    color: var(--color-text-primary);
}
.pagelift button {
    font: inherit; cursor: pointer; padding: 7px 12px;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--pl-border-radius-md);
    background: transparent;
    color: var(--color-text-primary);
}
.pagelift button:hover { background: var(--color-background-secondary); }
.pagelift a { color: var(--color-text-info); }

.pagelift .pl-card {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--pl-border-radius-lg);
    padding: 1rem 1.25rem;
}
.pagelift .pl-app-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px; border-bottom: 0.5px solid var(--color-border-tertiary);
}
.pagelift .pl-app-brand {
    display: flex; align-items: center; gap: 8px;
    font-weight: 500; font-size: 16px;
}
.pagelift .pl-app-brand .ti { font-size: 20px; color: var(--color-text-info); }
.pagelift .pl-nav { display: flex; gap: 4px; }
.pagelift .pl-nav-item {
    font-size: 14px; padding: 6px 12px;
    border-radius: var(--pl-border-radius-md);
    color: var(--color-text-secondary);
    text-decoration: none;
}
.pagelift .pl-nav-item:hover { background: var(--color-background-secondary); }
.pagelift .pl-nav-item.on {
    background: var(--color-background-secondary);
    color: var(--color-text-primary); font-weight: 500;
}

.pagelift .pl-url-form {
    display: flex; gap: 8px; align-items: center;
    margin: 1rem 0 0.5rem;
}
.pagelift .pl-url-form input { flex: 1; }
.pagelift .pl-muted {
    font-size: 13px; color: var(--color-text-tertiary);
    margin: 0 0 1rem;
}

.pagelift .pl-metrics {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px; margin-bottom: 1.25rem;
}
.pagelift .pl-metric {
    background: var(--color-background-secondary);
    border-radius: var(--pl-border-radius-md);
    padding: 1rem;
}
.pagelift .pl-metric-label { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 4px; }
.pagelift .pl-metric-value { font-size: 24px; font-weight: 500; margin: 0; }
.pagelift .pl-metric-value .suffix { font-size: 14px; color: var(--color-text-tertiary); }
.pagelift .pl-metric.score .pl-metric-value    { color: var(--color-text-warning); }
.pagelift .pl-metric.critical .pl-metric-value { color: var(--color-text-danger);  }
.pagelift .pl-metric.improve .pl-metric-value  { color: var(--color-text-warning); }
.pagelift .pl-metric.passing .pl-metric-value  { color: var(--color-text-success); }

.pagelift .pl-section-title { font-size: 16px; margin: 0 0 4px; font-weight: 500; }
.pagelift .pl-frow {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 0;
    border-top: 0.5px solid var(--color-border-tertiary);
}
.pagelift .pl-frow > .icon { font-size: 18px; margin-top: 2px; flex-shrink: 0; }
.pagelift .pl-frow > .body { flex: 1; min-width: 0; }
.pagelift .pl-frow .title { margin: 0; font-size: 14px; font-weight: 500; }
.pagelift .pl-frow .hint  { margin: 2px 0 0; font-size: 13px; color: var(--color-text-secondary); }
.pagelift .pl-frow .suggestion {
    margin: 6px 0 0; font-size: 13px;
    color: var(--color-text-secondary); font-style: italic;
}
.pagelift .pl-badge {
    font-size: 12px; padding: 3px 10px;
    border-radius: var(--pl-border-radius-md);
    white-space: nowrap; flex-shrink: 0;
}
.pagelift .pl-badge.critical { background: var(--color-background-danger);  color: var(--color-text-danger);  }
.pagelift .pl-badge.improve  { background: var(--color-background-warning); color: var(--color-text-warning); }
.pagelift .pl-badge.passing  { background: var(--color-background-success); color: var(--color-text-success); }
.pagelift .pl-frow .icon.critical { color: var(--color-text-danger);  }
.pagelift .pl-frow .icon.improve  { color: var(--color-text-warning); }
.pagelift .pl-frow .icon.passing  { color: var(--color-text-success); }

.pagelift .pl-kw-row {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 0.5rem 0 1rem; align-items: center;
}
.pagelift .pl-chip {
    font-size: 12px; padding: 3px 10px;
    border-radius: var(--pl-border-radius-md);
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
}
.pagelift .pl-chip.primary {
    background: var(--color-background-info);
    color: var(--color-text-info);
    font-weight: 500;
}

.pagelift .pl-error {
    background: var(--color-background-danger);
    color: var(--color-text-danger);
    border-radius: var(--pl-border-radius-md);
    padding: 10px 12px;
    font-size: 14px;
}

.pagelift .pl-ai-panel {
    background: var(--color-background-info);
    border-radius: var(--pl-border-radius-lg);
    padding: 1rem 1.25rem;
    margin-top: 1.25rem;
}

/* ------- AI Insights (Section A) ------------------------------------------ */
/*
 * Four-card grid for the deep_analysis / eeat / entities / schema cards
 * rendered below the AI rewrite panel on Analyze.razor. Each card is its
 * own self-contained "Generate" -> "Result" toggle; styling stays loose
 * (auto-fit minmax) so cards stack on narrow screens and pair on wide ones.
 */
.pagelift .pl-insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    margin-top: 0.5rem;
}
.pagelift .pl-insight-card {
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--pl-border-radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pagelift .pl-insight-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
}
.pagelift .pl-insight-title {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 500; font-size: 14px;
    color: var(--color-text-primary);
}
.pagelift .pl-insight-title .ti { font-size: 16px; color: var(--color-text-info); }
.pagelift .pl-insight-badge {
    font-size: 11px; color: var(--color-text-tertiary);
    font-family: var(--pl-font-mono);
}
.pagelift .pl-insight-sub {
    margin: 0; font-size: 12px;
    color: var(--color-text-tertiary);
}
.pagelift .pl-insight-body { margin-top: 4px; }
.pagelift .pl-insight-note {
    margin: 4px 0; font-size: 13px;
    color: var(--color-text-secondary);
}
.pagelift .pl-checklist,
.pagelift .pl-bullets {
    margin: 4px 0 8px; padding-left: 1.1rem;
    font-size: 13px; color: var(--color-text-secondary);
}
.pagelift .pl-checklist { list-style: none; padding-left: 0; }
.pagelift .pl-checklist li { margin: 2px 0; }

.pagelift .pl-codeblock-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 8px 0 4px;
    font-size: 12px; color: var(--color-text-tertiary);
    font-family: var(--pl-font-mono);
}
.pagelift .pl-copy-btn {
    font-size: 12px; padding: 3px 8px;
    border-radius: var(--pl-border-radius-md);
    border: 0.5px solid var(--color-border-secondary);
    background: var(--color-background-primary);
    color: var(--color-text-primary); cursor: pointer;
}
.pagelift .pl-copy-btn:hover { background: var(--color-background-tertiary); }
.pagelift .pl-codeblock {
    background: var(--color-background-tertiary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--pl-border-radius-md);
    padding: 10px 12px;
    font-family: var(--pl-font-mono); font-size: 12px;
    line-height: 1.5;
    overflow: auto; max-height: 320px;
    white-space: pre-wrap; word-break: break-word;
    margin: 0;
}

/* ------- Scan page (Phase C step 1) -------------------------------------- */
/*
 * Scan-results table. Wider than the default 760px card so the URL column
 * doesn't get crushed; the .pl-card-wide override widens the outer card.
 * Hover row highlight + clickable headers for click-to-sort.
 */
.pagelift.pl-wide { max-width: 1080px; }
.pagelift .pl-scan-progress {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--color-background-secondary);
    border-radius: var(--pl-border-radius-md);
    padding: 12px 14px; margin: 0.75rem 0;
}
.pagelift .pl-scan-progress progress {
    width: 100%; height: 8px;
    -webkit-appearance: none; appearance: none;
    border: none;
}
.pagelift .pl-scan-progress progress::-webkit-progress-bar {
    background: var(--color-background-tertiary);
    border-radius: 4px;
}
.pagelift .pl-scan-progress progress::-webkit-progress-value {
    background: var(--color-text-info);
    border-radius: 4px;
}
.pagelift .pl-scan-progress progress::-moz-progress-bar {
    background: var(--color-text-info);
    border-radius: 4px;
}
.pagelift .pl-scan-status {
    font-size: 13px; color: var(--color-text-secondary);
    display: flex; justify-content: space-between; gap: 8px;
}
.pagelift .pl-scan-status .url { font-family: var(--pl-font-mono); font-size: 12px;
    color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }

.pagelift .pl-scan-controls {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    margin: 0.75rem 0;
}
.pagelift .pl-scan-controls label {
    font-size: 13px; color: var(--color-text-secondary);
    display: inline-flex; gap: 6px; align-items: center;
}

.pagelift .pl-table {
    width: 100%; border-collapse: collapse; font-size: 14px;
    margin-top: 0.5rem;
}
.pagelift .pl-table th, .pagelift .pl-table td {
    text-align: left; padding: 10px 8px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    vertical-align: middle;
}
.pagelift .pl-table th {
    font-weight: 500; font-size: 13px;
    color: var(--color-text-secondary);
    user-select: none;
}
.pagelift .pl-table th.sortable { cursor: pointer; }
.pagelift .pl-table th.sortable:hover { color: var(--color-text-primary); }
.pagelift .pl-table th .ti { font-size: 14px; vertical-align: -2px; }
.pagelift .pl-table tbody tr:hover { background: var(--color-background-secondary); }
.pagelift .pl-table td.url-cell {
    font-family: var(--pl-font-mono); font-size: 12px;
    max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pagelift .pl-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pagelift .pl-table td.actions { text-align: right; white-space: nowrap; }
.pagelift .pl-table .pl-row-err { color: var(--color-text-danger); font-size: 12px; }

.pagelift .pl-score-pill {
    display: inline-block; min-width: 38px; text-align: center;
    padding: 2px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.pagelift .pl-score-pill.good { background: var(--color-background-success); color: var(--color-text-success); }
.pagelift .pl-score-pill.warn { background: var(--color-background-warning); color: var(--color-text-warning); }
.pagelift .pl-score-pill.bad  { background: var(--color-background-danger);  color: var(--color-text-danger);  }
.pagelift .pl-score-pill.err  { background: var(--color-background-tertiary); color: var(--color-text-tertiary); }

.pagelift .pl-summary-bar {
    display: flex; gap: 16px; flex-wrap: wrap;
    padding: 10px 12px; margin: 0.5rem 0;
    background: var(--color-background-secondary);
    border-radius: var(--pl-border-radius-md);
    font-size: 13px;
}
.pagelift .pl-summary-bar strong { color: var(--color-text-primary); }

/* HTMX indicator: shown only while a request is in flight. */
.pagelift .htmx-indicator { display: none; }
.pagelift .htmx-request .htmx-indicator {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--color-text-secondary);
}
.pagelift .htmx-request.pl-url-form button { opacity: 0.6; }

/* ------- Section B: AI drafting cards + chat ----------------------------- */
/*
 * Section B adds 7 cards under AI Insights and a chat thread under that.
 * Visual language reuses the existing pl-insight-card / pl-codeblock /
 * pl-table primitives -- these styles just add a few wrappers (snippet
 * preview frame, per-section draft frame, chat bubbles).
 */

/* Featured-snippet preview frame for the rendered list/table form so the
   embedded HTML doesn't bleed into the surrounding card styling. */
.pagelift .pl-snippet-preview {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--pl-border-radius-md);
    padding: 10px 14px;
    margin: 4px 0 8px;
    font-size: 13px;
}
.pagelift .pl-snippet-preview ul,
.pagelift .pl-snippet-preview ol { margin: 4px 0 4px 1.1rem; padding: 0; }
.pagelift .pl-snippet-preview table {
    border-collapse: collapse; width: 100%; margin: 4px 0;
}
.pagelift .pl-snippet-preview th,
.pagelift .pl-snippet-preview td {
    border: 0.5px solid var(--color-border-tertiary);
    padding: 4px 8px; text-align: left;
}

/* Image-prompt / section-drafter sub-card -- wrap multiple within one card
   with a subtle divider. */
.pagelift .pl-image-prompt,
.pagelift .pl-section-draft {
    border-top: 0.5px solid var(--color-border-tertiary);
    padding-top: 8px; margin-top: 8px;
}
.pagelift .pl-image-prompt:first-child,
.pagelift .pl-section-draft:first-child {
    border-top: 0; padding-top: 0; margin-top: 0;
}

/* ------- "Ask about this page" chat -------------------------------------- */
.pagelift .pl-chat {
    background: var(--color-background-secondary);
    border-radius: var(--pl-border-radius-md);
    padding: 12px 14px;
    margin: 0.5rem 0;
    max-height: 480px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
}
.pagelift .pl-chat-empty {
    font-size: 13px; color: var(--color-text-tertiary);
    font-style: italic; text-align: center; padding: 8px;
}
.pagelift .pl-chat-bubble {
    padding: 8px 12px;
    border-radius: var(--pl-border-radius-md);
    font-size: 13px; line-height: 1.5;
    /* pre-wrap so newlines from Claude survive without using <pre>; word-break
       keeps long URLs from blowing the card width. */
    white-space: pre-wrap; word-break: break-word;
    max-width: 90%;
}
.pagelift .pl-chat-user {
    align-self: flex-end;
    background: var(--color-background-info);
    color: var(--color-text-info);
}
.pagelift .pl-chat-assistant {
    align-self: flex-start;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    color: var(--color-text-primary);
}
.pagelift .pl-chat-input-row {
    display: flex; gap: 8px; align-items: stretch;
    margin-bottom: 0.5rem;
}
.pagelift .pl-chat-input-row textarea {
    flex: 1; height: auto; min-height: 56px;
    padding: 8px 10px; resize: vertical;
    font-family: var(--pl-font-sans);
}

/* ------- Demo mode banner + notices ----------------------------------------
 *
 * Lives OUTSIDE the .pagelift wrapper because MainLayout renders it above
 * everything else (sticky at the top). All classes are .pl-demo-* so they
 * stay out of the generic .pagelift namespace.
 *
 * Banner is a thin amber strip with the message + a "get the real thing"
 * CTA. Notice classes (pl-demo-notice) are inline yellow callouts on Analyze /
 * Scan / SiteInsights / Home that explain demo-mode behavior in-context.
 *
 * Both render ONLY when DemoOptions.Enabled=true (the @if guard in each
 * Razor file). On the production deploy these never appear.
 */
.pl-demo-banner {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fef3c7;
    color: #92400e;
    border-bottom: 1px solid #fbbf24;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
}
.pl-demo-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px;
}
.pl-demo-banner-content .ti {
    font-size: 16px;
    flex-shrink: 0;
}
.pl-demo-banner-content > span {
    flex: 1;
    font-weight: 500;
}
.pl-demo-banner-cta {
    display: inline-block;
    padding: 4px 12px;
    background: #ffffff;
    color: #c2410c;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #fbbf24;
    flex-shrink: 0;
    white-space: nowrap;
}
.pl-demo-banner-cta:hover {
    background: #fff7ed;
    color: #9a3412;
}

/* Per-page friendly notice -- nestled INSIDE .pagelift cards so it picks
   up the local font + spacing. Pale yellow tint, small, informational. */
.pagelift .pl-demo-notice {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde68a;
    border-radius: var(--pl-border-radius-md);
    padding: 8px 12px;
    margin: 0.5rem 0;
    font-size: 13px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.pagelift .pl-demo-notice .ti {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    color: #ca8a04;
}
.pagelift .pl-demo-notice a {
    color: #854d0e;
    font-weight: 600;
    text-decoration: underline;
}