/* competitor-base.css — Shared styles for competitor analysis pages
 * Override :root colors in per-directory theme.css
 * Variables: --bg, --surface, --surface2, --border, --text, --text-muted,
 *            --accent, --accent2, --green, --amber, --red, --cyan
 */

:root {
    /* Competitor defaults (overridden per-brand via theme.css) */
    --bg: #f5f6fa;
    --surface: #ffffff;
    --surface2: #f0f1f5;
    --border: #d8dbe5;
    --text: #1a1d27;
    --text-muted: #505468;
    --accent: #2563eb;
    --accent2: #6d28d9;
    --green: #059669;
    --amber: #d97706;
    --red: #dc2626;
    --cyan: #0891b2;
    --radius-card: 12px;
    --radius-profile: 16px;
    --content-width: 1400px;
    --font-size-h1: 2rem;
    --font-size-h2: 1.4rem;
    --font-size-h3: 1.1rem;
    --font-size-sm: 0.95rem;
    --font-size-xs: 0.85rem;
    --font-size-xxs: 0.8rem;
    --font-size-table: 0.85rem;
    --font-size-label: 0.75rem;
    --font-size-badge: 0.75rem;
    --font-size-badge-service: 0.78rem;
    --table-min-width: 1100px;
    --badge-radius: 6px;
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.07);
    --spacing-xxs: 0.15rem;
    --padding-card: 1.25rem;
    --font-size-body: 0.92rem;
    --font-size-profile-h3: 1.3rem;
    --font-size-h1-responsive: 1.5rem;
    --margin-h2: 2.5rem;
    --table-min-width-mobile: 800px;
    --letter-spacing-label: 0.05em;
    --letter-spacing-badge: 0.03em;
    --border-width-section: 2px;
    --list-padding-left: 1.25rem;
    --color-badge-direct-bg: rgba(79, 143, 247, 0.15);
    --color-badge-volume-bg: rgba(124, 92, 252, 0.15);
    --color-badge-luxury-bg: rgba(245, 158, 11, 0.15);
    --color-badge-legacy-bg: rgba(52, 211, 153, 0.15);
    --color-badge-niche-bg: rgba(8, 145, 178, 0.15);
    --badge-padding: 0.15rem 0.5rem;
    --grid-summary-min: 200px;
    /* --color-* bridge aliases — aligns with portal-base and report-base naming convention */
    --color-bg-page: var(--bg);
    --color-surface: var(--surface);
    --color-text-primary: var(--text);
    --color-text-muted: var(--text-muted);
    --color-accent: var(--accent);
    --color-accent2: var(--accent2);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f1117;
        --surface: #1a1d27;
        --surface2: #242836;
        --border: #2e3345;
        --text: #f0f2f5;
        --text-muted: #b0b5c8;
        --accent: #4f8ff7;
        --accent2: #7c5cfc;
        --green: #34d399;
        --amber: #f59e0b;
        --red: #ef4444;
        --cyan: #22d3ee;
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

.skip-link {
    position: absolute;
    left: var(--offscreen-left);
    top: auto;
    width: var(--sr-only-size);
    height: var(--sr-only-size);
    overflow: hidden;
}
.skip-link:focus {
    position: fixed;
    left: var(--spacing-sm);
    top: var(--spacing-sm);
    width: auto;
    height: auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--accent, #2563eb);
    color: var(--color-white);
    border-radius: var(--radius-xs);
    z-index: var(--z-index-skip-link);
    font-weight: var(--font-weight-semibold);
}

body {
    font-family: var(--font-portal, var(--font-sans));
    background: var(--bg, #f5f6fa);
    color: var(--text, #1a1d27);
    line-height: var(--line-height-base);
    padding: var(--spacing-lg);
}

.container { max-width: var(--content-width); margin: 0 auto; }

h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-detail-gap);
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.subtitle { color: var(--text-muted); margin-bottom: var(--spacing-xs); font-size: var(--font-size-sm); }
.date { color: var(--text-muted); font-size: var(--font-size-xxs); margin-bottom: var(--spacing-lg); }

h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    margin: var(--margin-h2) 0 var(--spacing-sm);
    color: var(--accent);
    border-bottom: var(--border-width-section) solid var(--border);
    padding-bottom: var(--spacing-xs);
}
h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold); margin: var(--spacing-md) 0 var(--spacing-xs); }
p, li { font-size: var(--font-size-body); margin-bottom: var(--spacing-xs); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { padding-left: var(--list-padding-left); margin-bottom: var(--spacing-sm); }

/* Summary grid */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-summary-min), 1fr));
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}
.stat-card {
    background: var(--surface);
    border: var(--border-width-1) solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--padding-card);
    text-align: center;
}
.stat-card .number { font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); color: var(--accent); }
.stat-card .label {
    font-size: var(--font-size-label);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
}

/* Profile card */
.profile-card {
    background: linear-gradient(135deg, var(--surface), var(--surface2));
    border: var(--border-width-section) solid var(--accent);
    border-radius: var(--radius-profile);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
.profile-card h3 { color: var(--accent); margin-top: 0; font-size: var(--font-size-profile-h3); }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm) var(--spacing-lg); }
.profile-item .label {
    font-size: var(--font-size-label);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
}
.profile-item .value { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.profile-item-full { grid-column: 1 / -1; }

/* Tables */
.table-wrap {
    overflow-x: auto;
    margin-bottom: var(--spacing-lg);
    border-radius: var(--radius-card);
    border: var(--border-width-1) solid var(--border);
}
table { width: 100%; border-collapse: collapse; font-size: var(--font-size-table); min-width: var(--table-min-width); }
thead { background: var(--surface2); }
th {
    padding: var(--spacing-table-cell) var(--spacing-sm);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: var(--font-size-label);
    letter-spacing: var(--letter-spacing-label);
    white-space: nowrap;
    border-bottom: var(--border-width-section) solid var(--border);
}
td {
    padding: var(--spacing-table-cell) var(--spacing-sm);
    border-bottom: var(--border-width-1) solid var(--border);
    vertical-align: top;
    background: var(--surface);
}
tr:hover td { background: var(--surface2); }

/* Badges */
.badge {
    display: inline-block;
    padding: var(--badge-padding);
    border-radius: var(--badge-radius);
    font-size: var(--font-size-badge);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-badge);
}
.badge-direct  { background: var(--color-badge-direct-bg); color: var(--accent); }
.badge-volume  { background: var(--color-badge-volume-bg); color: var(--accent2); }
.badge-luxury  { background: var(--color-badge-luxury-bg); color: var(--amber); }
.badge-legacy  { background: var(--color-badge-legacy-bg); color: var(--green); }
.badge-niche   { background: var(--color-badge-niche-bg); color: var(--cyan); }

/* Services list */
.services-list { list-style: none; padding: 0; margin: 0; }
.services-list li {
    font-size: var(--font-size-badge-service);
    margin-bottom: var(--spacing-xxs);
    padding-left: var(--spacing-table-cell);
    position: relative;
}
.services-list li::before { content: "\2022"; position: absolute; left: 0; color: var(--accent); }

/* SWOT grid */
.swot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); }
.swot-card {
    background: var(--surface);
    border: var(--border-width-1) solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--padding-card);
}
.swot-card.strengths     { border-left: var(--border-accent-width) solid var(--green); }
.swot-card.weaknesses    { border-left: var(--border-accent-width) solid var(--red); }
.swot-card.opportunities { border-left: var(--border-accent-width) solid var(--accent); }
.swot-card.threats       { border-left: var(--border-accent-width) solid var(--amber); }
.swot-card h4 { font-size: var(--font-size-sm); margin-bottom: var(--spacing-xs); }
.swot-card.strengths h4     { color: var(--green); }
.swot-card.weaknesses h4    { color: var(--red); }
.swot-card.opportunities h4 { color: var(--accent); }
.swot-card.threats h4       { color: var(--amber); }
.swot-card li { font-size: var(--font-size-xs); }

/* Insight box */
.insight-box {
    background: var(--surface);
    border: var(--border-width-1) solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}
.insight-box h4 {
    font-size: var(--font-size-xs);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-badge);
    margin-bottom: var(--spacing-xs);
}

/* Sources */
.sources {
    background: var(--surface);
    border: var(--border-width-1) solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
}
.sources h3 { color: var(--text-muted); font-size: var(--font-size-sm); margin-bottom: var(--spacing-table-cell); }
.sources a { display: block; font-size: var(--font-size-xxs); margin-bottom: var(--spacing-xxs); color: var(--text-muted); }
.sources a:hover { color: var(--accent); }

.na { color: var(--text-muted); font-style: italic; }
.rating { color: var(--amber); font-weight: var(--font-weight-semibold); }

/* Responsive */
@media (max-width: 768px) {
    body { padding: var(--spacing-sm); }
    .profile-grid { grid-template-columns: 1fr; }
    .swot-grid { grid-template-columns: 1fr; }
    table { min-width: var(--table-min-width-mobile); }
}

@media (max-width: 480px) {
    h1 { font-size: var(--font-size-h1-responsive); }
    .summary-grid { grid-template-columns: 1fr 1fr; }
}

@media print {
    body { background: var(--color-white); padding: var(--spacing-sm); }
    .table-wrap { border: var(--border-width-1) solid var(--border); }
    td { background: var(--color-white); }
}

.sr-only {
    position: absolute;
    width: var(--sr-only-size);
    height: var(--sr-only-size);
    padding: 0;
    margin: var(--sr-only-margin);
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Spacing utilities shared with report-base.css */
.mb-sm { margin-bottom: var(--spacing-sm); }