/*
 * Trimmed, adapted copy of the real app's src/main/resources/static/css/app.css —
 * same brand tokens, navbar gradient, card/badge conventions, and dark-mode
 * approach, so this PoC page actually reads as "Rival Dossier" rather than a
 * generic form. Not a byte-for-byte copy; only the rules this page uses.
 */
:root {
    --brand-600: #24466f;
    --brand-500: #2d5686;
    --brand-400: #3a6ea5;
    --accent: #e08a1e;
    --ink: #1f2733;
    --ink-soft: #5b6572;
    --border: #e6e9ee;
    --surface: #ffffff;
    --surface-sunken: #f4f6f9;
    --radius-sm: .5rem;
    --radius: .75rem;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 6px 16px -4px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .06);
    --bs-primary: #1e3a5f;
    --bs-primary-rgb: 30, 58, 95;
    --bs-link-color: #2d5686;
    --bs-border-radius: .75rem;
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    font-family: var(--bs-body-font-family);
    background: var(--surface-sunken);
    color: var(--ink);
    letter-spacing: -0.006em;
}

h1, h2, h3, h4, h5, h6 { font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }

.navbar.app-navbar {
    background: linear-gradient(90deg, #182d47 0%, #1e3a5f 55%, #244a76 100%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08), 0 2px 12px -2px rgba(10, 20, 35, .35);
    padding-top: .45rem;
    padding-bottom: .45rem;
    font-size: .92rem;
}
.navbar-brand { color: #fff !important; letter-spacing: -0.02em; font-size: 1.05rem; }
.navbar-nav .nav-link.nav-project {
    color: #fff !important;
    font-weight: 600;
    font-size: .85rem;
    margin: 0 .4rem 0 0;
    padding: .2rem .65rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-pill);
    background: rgba(224, 138, 30, .16);
}

.card { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }

.competitor-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    height: 100%;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.competitor-card:hover { border-color: var(--brand-400); box-shadow: var(--shadow-md); }

/* Mirrors the real app's .locked-note (app.css) — the "Upgrade to unlock it" /
   "Renew your plan" note shown alongside a disabled Free-plan-blocked action. */
.locked-note { color: var(--ink-soft); }
.locked-note a { font-weight: 600; }
.competitor-card .locked-note, .gtm-card .locked-note {
    display: block;
    border-top: 1px dashed var(--border);
    padding-top: .5rem;
    margin-top: .5rem;
}

.section-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--brand-600);
    margin-bottom: .75rem;
    letter-spacing: -0.01em;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
}

.cat-badge { display: inline-block; padding: .2rem .6rem; border-radius: var(--radius-pill); font-size: .72rem; font-weight: 600; }
.cat-platform { background: #dbeafe; color: #1e3a8a; }
.cat-payment { background: #d1fae5; color: #065f46; }
.cat-ai { background: #ede9fe; color: #5b21b6; }
.cat-other { background: #f3f4f6; color: #374151; }

/* Labels the three EnrichmentService merge behaviors each entity below demonstrates. */
.pattern-pill { display: inline-block; padding: .18rem .55rem; border-radius: var(--radius-pill); font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.pattern-append { background: #eff6ff; color: #1e40af; }
.pattern-upsert { background: #fef3c7; color: #92400e; }
.pattern-skip   { background: #ede9fe; color: #5b21b6; }

.action-flash { font-size: .72rem; font-weight: 700; color: #166534; }

.breadcrumb-link { font-size: .875rem; color: var(--ink-soft); text-decoration: none; }
.breadcrumb-link:hover { color: var(--brand-600); }

.app-footer { border-top: 1px solid var(--border) !important; background: var(--surface); }
.app-footer a:hover { color: var(--brand-600) !important; }


/* Exact tokens from the real app's [data-bs-theme="dark"] block (app.css:898-915),
   not an approximation — this is the actual production dark palette. */
[data-bs-theme="dark"] {
    --ink: #e6ebf2;
    --ink-soft: #9aa7b8;
    --border: #2b3648;
    --surface: #161d29;
    --surface-sunken: #0f1521;
    --brand-600: #6ea8e0;
}
[data-bs-theme="dark"] body { background: var(--surface-sunken); color: var(--ink); }
[data-bs-theme="dark"] .navbar.app-navbar {
    background: linear-gradient(90deg, #0f1521 0%, #16233a 60%, #1c2f4a 100%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06), 0 2px 14px -2px rgba(0, 0, 0, .6);
}
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .competitor-card {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
[data-bs-theme="dark"] .competitor-card:hover {
    border-color: #3c4a61;
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .65);
}
[data-bs-theme="dark"] .section-title { color: var(--brand-600); border-bottom-color: var(--border); }
[data-bs-theme="dark"] .breadcrumb-link { color: var(--ink-soft); }
[data-bs-theme="dark"] .cat-platform { background: #1e3a8a; color: #93c5fd; }
[data-bs-theme="dark"] .cat-payment  { background: #064e3b; color: #6ee7b7; }
[data-bs-theme="dark"] .cat-ai       { background: #3b0764; color: #c4b5fd; }
[data-bs-theme="dark"] .cat-other    { background: #374151; color: #d1d5db; }
[data-bs-theme="dark"] .table { color: var(--ink); }

/* ── Static-preview shell pages (dashboard, matrix, product, industries,
   positioning, pain points, team, gtm, news, changes, assistant) ──
   These pages have no backend behind them in this PoC — no Firestore
   entities, no scoring, no LLM calls — so every one of them carries this
   banner and disables its own controls, rather than silently looking
   functional. */
.shell-banner {
    display: flex; align-items: center; gap: .5rem;
    background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
    border-radius: var(--radius-sm); padding: .6rem 1rem;
    font-size: .85rem; font-weight: 600; margin-bottom: 1.25rem;
}
[data-bs-theme="dark"] .shell-banner { background: #451a03; color: #fdba74; border-color: #78350f; }
.shell-disabled { pointer-events: none; opacity: .55; }

.score-pill { display: inline-block; padding: .2rem .55rem; border-radius: var(--radius-pill); font-size: .75rem; font-weight: 600; background: #eff6ff; color: #1e40af; }
.score-pill.high { background: #fef3c7; color: #92400e; }
.score-pill.mid  { background: #e0f2fe; color: #075985; }
.score-pill.low  { background: #ede9fe; color: #5b21b6; }
[data-bs-theme="dark"] .score-pill      { background: #1e3a8a; color: #93c5fd; }
[data-bs-theme="dark"] .score-pill.high { background: #78350f; color: #fcd34d; }
[data-bs-theme="dark"] .score-pill.mid  { background: #0c4a6e; color: #7dd3fc; }
[data-bs-theme="dark"] .score-pill.low  { background: #3b0764; color: #c4b5fd; }

.opp-badge { display: inline-block; padding: .2rem .6rem; border-radius: var(--radius-sm); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.opp-critical { background: #dc2626; color: #fff; }
.opp-high { background: #fbbf24; color: #78350f; }
.opp-low { background: #64748b; color: #fff; }

.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.25rem; }
.stat-tile .stat-number { font-size: 2rem; font-weight: 700; color: var(--brand-600); line-height: 1.2; }
.stat-tile .stat-label { color: var(--ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }

.matrix-cell { min-width: 130px; vertical-align: top; font-size: .78rem; }
.matrix-cell .cell-score { font-weight: 700; font-size: 1rem; display: block; margin-bottom: 2px; }
.matrix-score-0 { background: rgba(100,116,139,.12); }
.matrix-score-1 { background: rgba(59,130,246,.14); }
.matrix-score-2 { background: rgba(59,130,246,.28); }
.matrix-score-3 { background: rgba(59,130,246,.42); }
.matrix-score-4 { background: rgba(59,130,246,.58); }
.matrix-score-5 { background: rgba(59,130,246,.75); }
[data-bs-theme="dark"] .matrix-score-0 { background: rgba(100,116,139,.18); }
[data-bs-theme="dark"] .matrix-score-1 { background: rgba(59,130,246,.18); }
[data-bs-theme="dark"] .matrix-score-2 { background: rgba(59,130,246,.30); }
[data-bs-theme="dark"] .matrix-score-3 { background: rgba(59,130,246,.42); }
[data-bs-theme="dark"] .matrix-score-4 { background: rgba(59,130,246,.56); }
[data-bs-theme="dark"] .matrix-score-5 { background: rgba(59,130,246,.70); }
.our-col { outline: 2px solid var(--brand-600); outline-offset: -2px; }