/* ============================================
   Compare Plans / Feature Comparison table
   Shared between landing.html (which also has these rules in landing.css)
   and dashboard.html (Help & Support → Compare Plans tab).
   Dark-mode overrides at the bottom — apply wherever body.dark-mode /
   html.dark-mode is set. (Landing was previously locked to light mode by
   dark-mode-init.js; that lock was removed 2026-05-28, so these now also
   apply on landing when dark mode is active.)
   ============================================ */

.comparison-section {
    margin-top: 2rem;
}

.comparison-note {
    text-align: center;
    color: #64748b;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 114, 128, 0.7) rgba(0, 0, 0, 0.08);
    padding-bottom: 4px;
}

.table-wrapper::-webkit-scrollbar { height: 10px; }
.table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.06);
    border-radius: var(--lr-r-sm, 4px);
}
.table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(107, 114, 128, 0.7);
    border-radius: var(--lr-r-sm, 4px);
}
.table-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(107, 114, 128, 0.95); }

@media (max-width: 1199px) {
    .table-wrapper { overflow-x: scroll; }
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.comparison-table thead tr {
    background: #f1f5f9;
    color: #1e293b;
}

.tier-group-row { background: #f1f5f9 !important; }

.tier-group-row th {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    color: #64748b;
    background: #f1f5f9;
}

.tier-group-row th:first-child { background: #f1f5f9; }
.tier-group-academic   { color: #3b82f6 !important; border-bottom: 3px solid #3b82f6; }
.tier-group-commercial { color: #8b5cf6 !important; border-bottom: 3px solid #8b5cf6; }
.tier-group-enterprise { color: #7c3aed !important; border-bottom: 3px solid #7c3aed; }

.tier-recommended { position: relative; }

.tier-badge {
    display: inline-block;
    background: #fbbf24;
    color: #1e293b;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: var(--lr-r-sm, 4px);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.comparison-table th {
    padding: 0.75rem 0.5rem;
    text-align: left;
    font-size: 0.85rem;
    white-space: nowrap;
}
.comparison-table th:not(:first-child) { text-align: center; }

.comparison-table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.9rem;
    color: #1e293b;
}
.comparison-table td:not(:first-child) { text-align: center; }

.comparison-table td:first-child {
    font-weight: 600;
    position: sticky;
    left: 0;
    background: white;
    z-index: 1;
    white-space: nowrap;
}

.comparison-table tr:nth-child(even) td:first-child { background: #f1f5f9; }

.comparison-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #f1f5f9;
}

.comparison-table tr { border-bottom: 1px solid #f1f5f9; }
.comparison-table tr:nth-child(even) { background: #f1f5f9; }

/* Group divider lines */
.comparison-table thead tr:not(.tier-group-row) th:nth-child(3),
.comparison-table thead tr:not(.tier-group-row) th:nth-child(6),
.comparison-table thead tr:not(.tier-group-row) th:nth-child(9),
.comparison-table td:nth-child(3),
.comparison-table td:nth-child(6),
.comparison-table td:nth-child(9) {
    border-left: 2px solid #64748b;
}

/* Tooltips inside the comparison table open downward (table-wrapper has
   overflow that would clip an upward tooltip). The JS portal supersedes
   this when js-feature-tip-portal is set, but pseudo fallback keeps the
   downward direction. */
.comparison-table .feature-tip[data-tip]::after {
    bottom: auto;
    top: calc(100% + 10px);
}
.comparison-table .feature-tip[data-tip]::before {
    bottom: auto;
    top: calc(100% + 4px);
    border-top-color: transparent;
    border-bottom-color: #1a1a1a;
}

/* ============================================
   Dark mode overrides
   ============================================ */
body.dark-mode .comparison-table,
html.dark-mode .comparison-table {
    background: #16213e;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

body.dark-mode .comparison-note,
html.dark-mode .comparison-note {
    color: #a0aec0;
}

body.dark-mode .comparison-table thead tr,
body.dark-mode .tier-group-row,
body.dark-mode .tier-group-row th,
body.dark-mode .tier-group-row th:first-child,
body.dark-mode .comparison-table th:first-child,
html.dark-mode .comparison-table thead tr,
html.dark-mode .tier-group-row,
html.dark-mode .tier-group-row th,
html.dark-mode .tier-group-row th:first-child,
html.dark-mode .comparison-table th:first-child {
    background: #0f3460 !important;
    color: #e2e8f0;
}

body.dark-mode .comparison-table th,
html.dark-mode .comparison-table th {
    color: #e2e8f0;
}

body.dark-mode .comparison-table td,
html.dark-mode .comparison-table td {
    color: #cbd5e1;
}

body.dark-mode .comparison-table td:first-child,
html.dark-mode .comparison-table td:first-child {
    background: #16213e;
    color: #e2e8f0;
}

body.dark-mode .comparison-table tr:nth-child(even),
html.dark-mode .comparison-table tr:nth-child(even) {
    background: #1a2342;
}

body.dark-mode .comparison-table tr:nth-child(even) td:first-child,
html.dark-mode .comparison-table tr:nth-child(even) td:first-child {
    background: #1a2342;
}

body.dark-mode .comparison-table tr,
html.dark-mode .comparison-table tr {
    border-bottom-color: #2d3748;
}

body.dark-mode .comparison-table thead tr:not(.tier-group-row) th:nth-child(3),
body.dark-mode .comparison-table thead tr:not(.tier-group-row) th:nth-child(6),
body.dark-mode .comparison-table thead tr:not(.tier-group-row) th:nth-child(9),
body.dark-mode .comparison-table td:nth-child(3),
body.dark-mode .comparison-table td:nth-child(6),
body.dark-mode .comparison-table td:nth-child(9),
html.dark-mode .comparison-table thead tr:not(.tier-group-row) th:nth-child(3),
html.dark-mode .comparison-table thead tr:not(.tier-group-row) th:nth-child(6),
html.dark-mode .comparison-table thead tr:not(.tier-group-row) th:nth-child(9),
html.dark-mode .comparison-table td:nth-child(3),
html.dark-mode .comparison-table td:nth-child(6),
html.dark-mode .comparison-table td:nth-child(9) {
    border-left-color: #475569;
}

body.dark-mode .tier-group-academic,
html.dark-mode .tier-group-academic {
    color: #93c5fd !important;
    border-bottom-color: #93c5fd;
}

body.dark-mode .tier-group-commercial,
html.dark-mode .tier-group-commercial {
    color: #c4b5fd !important;
    border-bottom-color: #c4b5fd;
}

body.dark-mode .tier-group-enterprise,
html.dark-mode .tier-group-enterprise {
    color: #a78bfa !important;
    border-bottom-color: #a78bfa;
}

body.dark-mode .tier-badge,
html.dark-mode .tier-badge {
    background: #fbbf24;
    color: #1e293b;
}