/*
=============================================================================
STYLES.CSS — INDEX
=============================================================================

FOUNDATIONS
   1.  Root & Reset            (variables, * reset)
   2.  Typography & Body

LAYOUT & GLOBAL SYSTEMS
   3.  Header                  (logo, navigation, mega menu, header right)
   4.  Grid System             (reusable layout classes)
   5.  Sticky Table Pages      (global class system)
   6.  Generic Page Header     (coverage, analytics, etc.)

CORE COMPONENTS
   7.  Trending Section        (header, cards, slider)
   8.  Main Content & Filters  (filter bar, filter dropdown, selected filters)
   9.  Tables                  (research tables, info tables, company list,
                                badges [LARA, status], analyst info)
   10. Forms                   (inputs, file upload, enquiry reply form)
   11. Pagination
   12. In-Box Tabs
   13. Toast Notifications
   14. Theme Toggle Switch
   15. Footer

LIGHTBOXES / MODALS
   16. Lightbox System         (generic - works on any page)
   17. Enquiries Lightbox
   18. Enquiry Details Lightbox
   19. Calendar Event Lightbox
   20. Unsubscribed / Restricted Content Lightbox
   21. Alert Lightbox

PAGE TEMPLATES
   22. Company Page
   23. Tear Sheet Page
   24. Analytics Page
   25. Coverage Page
   26. Enquiry Detail Page
   27. Financial Models Table   (filter row)
   28. Model Portfolio          (chart placeholders, region map & actions)
   29. Calendar Page
   30. Methodology Page
   31. Private Credit Page
   32. Report Page              (+ report content list styles)
   33. Advanced Search Page
   34. Weekly Wrap Page
   35. Analyst Link Styles

UTILITIES
   - Expandable Description
   - Info Tooltip

RESPONSIVE
   36. Responsive / Mobile Navigation Components
   37. Media Queries  — breakpoints: 480 / 768 / 992 / 1024 / 1460 / 1820

   NOTE: responsive rules are currently DISTRIBUTED across the file (page
   sections carry their own @media blocks). Consolidation into single
   per-breakpoint blocks is planned. Until then, search "@media" to locate
   all breakpoint rules for a given component.

=============================================================================
*/

/* ========================================
   1. ROOT & RESET
======================================== */

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

:root {
    /* ===== BRAND ===== */
    --lucror-blue: #2A4577;
    --lucror-blue-hover: rgba(42, 69, 119, 0.9);
    --lucror-blue-active: rgba(42, 69, 119, 1);
    --lucror-blue-light: rgba(42, 69, 119, 0.1);
    --lucror-gradient: linear-gradient(182deg, rgba(42, 69, 119, 1) 0%, rgba(34, 58, 100, 1) 100%);
    /* ===== NEUTRALS ===== */
    --white: #ffffff; /* Canonical white */
    --black: #434343; /* Dark text, headings - rgb(67,67,67) */
    --medium-grey: #7f7f7f; /* Secondary / muted text - rgb(127,127,127) */
    --light-grey: #F5F5F5; /* Light backgrounds, hover states - rgb(245,245,245) */
    --light-blue: #eff0f4; /* Subtle blue-tinted background - rgb(239,240,244) */
    --border: #e1e1e1; /* Borders, dividers - rgb(225,225,225) */
    /* Aliases — kept so existing references keep working; values deduped above.
       table-header duplicated the gradient; link-blue-light was visually
       identical to light-blue. */
    --table-header: var(--lucror-gradient);
    --link-blue-light: var(--light-blue);
    --white-translucent: rgba(255, 255, 255, 0.95);
    /* ===== LINKS ===== */
    --link-blue: #2c5282;
    --link-blue-dark: #1e3a5f;
    --dark-blue: #003366; /* Formalised from inline var() fallback */
    /* ===== UI STATES ===== */
    --row-hover: rgba(0,0,0,0.04); /* Table row hover - formalised from inline fallback */
    /* ===== STATUS ===== */
    --status-positive-bg: #c6f6d5;
    --status-positive-text: #22543d;
    --status-positive-border: #9ae6b4;
    --status-stable-bg: #e2e8f0;
    --status-stable-text: #2d3748;
    --status-negative-bg: #fed7d7;
    --status-negative-text: #c53030;
    /* ===== WARNING ===== */
    --warning-bg: #FFF3CD;
    --warning-text: #664D03;
    --warning-border: #FFE69C;
    /* ===== OVERLAY ===== */
    --overlay: rgba(0, 0, 0, 0.5);
    /* ===== SHADOWS ===== */
    --shadow: 0 8px 30px rgba(0,0,0,.1); /* Large, soft - cards, containers, dropdowns */
    --shadow-medium: 0 2px 8px rgba(0,0,0,0.1); /* Standard - buttons, inputs, UI elements */
    --shadow-raised: 0 3px 8px rgba(0,0,0,0.3); /* Strong elevation - modals */
    --shadow-focus: 0 0 0 3px rgba(42,69,119,0.1); /* Blue focus ring - accessibility */
    /* ===== RADIUS ===== */
    --border-5: 5px;
    --border-10: 10px;
    /* ===== SPACING SCALE ===== */
    --space-5: 5px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-15: 15px;
    --space-16: 16px;
    --space-20: 20px;
    --space-25: 25px;
    --space-30: 30px;
    --space-40: 40px;
    --space-50: 50px;
    /* Composite spacing */
    --content-padding: 35px;
    --p-default: 30px 35px;
    /* ===== TYPOGRAPHY ===== */
    /* Font sizes (rem) */
    --font-sm: 0.9rem; /* 14.4px - body small, table text */
    --font-base: 1rem; /* 16px   - base body text */
    --font-md: 1.1rem; /* 17.6px - section titles */
    --font-lg: 1.2rem; /* 19.2px - headings */
    --font-xl: 1.3rem; /* 20.8px - large headings */
    --font-1-5xl: 1.5rem; /* 24px   - between xl and 2xl */
    --font-2xl: 1.7rem; /* 27.2px - page titles */
    --font-3xl: 3rem; /* 48px   - hero text */
    --font-hero: 3.5rem; /* 56px   - hero stats */
    /* Font sizes (px) - specific UI elements */
    --font-11: 11px; /* AI badge, tiny UI */
    --font-13: 13px; /* Small buttons */
    --font-14: 14px; /* Form buttons */
    --font-20: 20px; /* Lightbox headings */
    --font-24: 24px; /* Icons, close buttons */
    --font-32: 32px; /* Large icons */
    /* Line heights */
    --leading-tight: 1;
    --leading-normal: 1.4;
    --leading-relaxed: 1.5;
    --leading-loose: 1.6;
    /* Font weights  (note: 500 is technically "medium"; --weight-semibold
       name retained to avoid breaking existing references) */
    --weight-medium: 500;
    --weight-semibold: 500;
    --weight-bold: 700;
    /* ===== ICON SIZES ===== */
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 32px;
    /* ===== TRANSITIONS ===== */
    --transition-fast: all 0.2s ease;
    --transition-standard: all 0.3s ease;
}



/* Edge-to-edge (negative margins to extend to container edges) */
.edge-to-edge {
    margin-left: calc(-1 * var(--content-padding));
    margin-right: calc(-1 * var(--content-padding));
}

/* Horizontal padding matching content-section */
.px-content {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

/* Border utilities */
.border-bottom {
    border-bottom: 1px solid var(--border);
}

.border-top {
    border-top: 1px solid var(--border);
}

/* Flexbox utilities - Common patterns used throughout */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-gap-8 {
    gap: var(--space-8);
}

.flex-gap-10 {
    gap: var(--space-10);
}

.flex-gap-12 {
    gap: var(--space-12);
}

.flex-gap-15 {
    gap: var(--space-15);
}

.flex-gap-20 {
    gap: var(--space-20);
}

/* Checkbox Group - Single checkbox with label */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-20);
}

    .checkbox-group input[type="checkbox"] {
        cursor: pointer;
    }

    .checkbox-group label {
        cursor: pointer;
    }

/* Checkbox Grid - 2 column layout for checkbox lists */
.checkbox-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10) var(--space-20);
}

/* Section Header Modifier - No bottom margin */
.section-header--no-margin {
    margin-bottom: 0;
}

/* Analytics Filter Row - 2 column variant */
.analytics-filter-row-2col {
    grid-template-columns: repeat(2, 1fr);
}

/* ========================================
   2. TYPOGRAPHY & BODY
======================================== */

body {
    font-family: Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--light-grey);
    color: var(--black);
    font-size: var(--font-base);
}

h1, h2, h3, h4 {
    font-weight: 500;
}

p + p {
    margin-top: var(--space-20);
}

.company-name h1 {
    font-size: var(--font-2xl);
}

a.text-link {
    text-decoration: none;
    color: var(--lucror-blue);
}

.text-link img {
    position: relative;
    top: 6px;
}

strong {
    font-weight: 500;
}

ul li {
    list-style: none;
}

.default-list li {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

/* Arrow List - Generic list with arrow bullets */
ul.arrow-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

    ul.arrow-list li {
        position: relative;
        padding-left: 20px;
        margin-bottom: var(--space-15);
        line-height: var(--leading-loose);
        color: var(--black);
    }

        ul.arrow-list li:last-child {
            margin-bottom: 0;
        }

        ul.arrow-list li:before {
            content: "▸";
            position: absolute;
            left: 0;
            color: var(--lucror-blue);
            font-weight: bold;
        }

    ul.arrow-list a {
        /*Steve*/
        /* color: var(--lucror-blue); */
        text-decoration: none;
    }

        ul.arrow-list a:hover {
            text-decoration: underline;
        }

ol.number-list {
    padding-left: 15px;
}

    ol.number-list li {
        position: relative;
        margin-bottom: var(--space-15);
        line-height: var(--leading-loose);
        color: var(--black);
    }

/* ========================================
   3. HEADER
======================================== */

#main-header {
    background: var(--white);
    padding: 0 35px;
    box-shadow: var(--shadow-medium);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--space-20) 40px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    font-weight: var(--weight-semibold);
    position: relative;
}

/* Header navigation wrapper */
.header-nav {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

    .logo img {
        max-width: 180px;
    }

/* Navigation */
nav {
    display: flex;
    gap: 24px;
    align-items: center;
}


/* Each nav-item acts as a flex item */
.nav-item {
    position: relative;
    display: flex; /* Matches nav's flex context */
    align-items: center;
}

    /* Make <a> fill the nav-item vertically */
    .nav-item > a {
        display: flex; /* Keep icon + text aligned */
        align-items: center;
        padding: 34px 0; /* Add vertical padding for better hover area */
        height: 100%; /* Fill nav-item height */
    }


nav a {
    display: block;
    color: var(--black);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}


    nav a:hover {
        color: var(--lucror-blue);
    }

.nav-item:hover > a {
    color: var(--lucror-blue);
    border-radius: 10px;
}



/* Mega Menu */


.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: var(--shadow);
    border-radius: 8px;
    padding: 35px;
    min-width: 1260px;
    z-index: 1000;
    margin-top: 0px;
    padding-top: 42px;
    transform: translateY(10px);
    transition: var(--transition-standard);
    opacity: 0;
    visibility: hidden;
}

    .mega-menu.small-menu {
        min-width: 400px;
    }

.nav-item:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-30);
}

.small-menu .mega-menu-grid {
    grid-template-columns: 1fr;
}

.mega-menu-column h3 {
    font-weight: var(--weight-semibold);
    color: var(--lucror-blue);
    margin-bottom: var(--space-12);
    font-size: var(--font-base);
}

.mega-menu-column ul {
    list-style: none;
}

.mega-menu-column li {
    margin-bottom: var(--space-8);
}

.mega-menu-column a {
    color: var(--black);
    text-decoration: none;
    display: block;
    padding: 5px 4px;
    position: relative;
    left: -4px;
    transition: var(--transition-fast);
    font-weight: normal;
}

    .mega-menu-column a:hover {
        background: var(--light-grey);
        border-radius: var(--border-5);
        color: var(--lucror-blue);
        padding-left: 6px;
    }

/* Header Right */
.header-right {
    display: flex;
    gap: var(--space-10);
    align-items: center;
}

    .header-right a:not(.advanced-search-link) {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        transition: background 0.2s ease;
    }

        .header-right a:not(.advanced-search-link):hover {
            background: var(--light-grey);
        }

.message-bubble {
    background: red;
    color: var(--white);
    text-align: center;
    width: 17px;
    height: 17px;
    position: absolute;
    left: 0px;
    top: 3px;
    border-radius: 200rem;
    font-size: var(--font-sm);
    z-index: 1;
}

.search-form {
    position: relative;
    flex-direction: unset;
}

    .search-form button {
        background: none;
        border: none;
        position: absolute;
        right: 7px;
        top: 8px;
    }

.advanced-search-link {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--dark-blue, #003366);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.search-form:focus-within .advanced-search-link {
    opacity: 1;
    pointer-events: auto;
}

.advanced-search-link:hover {
    text-decoration: underline;
}

.search-box {
    background: var(--light-grey);
    padding: var(--space-12) 16px;
    border-radius: var(--border-5);
    font-size: var(--font-base);
    width: 250px;
    border: none;
}

/* ========================================
   4. TRENDING SECTION
======================================== */


/* Trending Header */
.trending-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-20);
}

    .trending-header h2 {
        font-size: var(--font-lg);
        font-weight: var(--weight-semibold);
    }

.nav-arrows {
    display: flex;
    gap: 4px;
}

    .nav-arrows button {
        width: var(--icon-lg);
        height: var(--icon-lg);
        border: 1px solid var(--border);
        background: var(--white);
        border-radius: var(--border-5);
        cursor: pointer;
        transition: var(--transition-fast);
    }

        .nav-arrows button:hover {
            background: var(--light-grey);
        }

.arrow-right img {
    transform: rotate(180deg);
}

/* Trending Cards Wrapper for slider */
.trending-cards-wrapper {
    overflow: hidden;
    width: 100%;
    padding: var(--space-10) 5px; /* Top/bottom for shadows, small left/right to prevent overflow */
    margin: 0;
}

/* Trending Cards */
.trending-cards {
    display: flex;
    gap: 16px;
    transition: transform 0.3s ease-in-out;
}

.trending-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: var(--space-20);
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    text-decoration: none;
    flex: 0 0 calc((100% - 64px) / 5); /* 5 cards visible, 4 gaps of 16px = 64px */
    min-width: 0; /* Allow flex items to shrink below content size */
}

    .trending-card:hover {
        box-shadow: var(--shadow-medium);
    }

        .trending-card:hover .card-arrow {
            background: var(--light-grey);
            border-color: var(--light-grey);
        }

.meta-date {
    font-size: var(--font-sm);
    color: var(--medium-grey);
    margin-bottom: 0.8rem;
}

.card-title {
    font-weight: var(--weight-semibold);
    color: var(--black);
    max-width: 80%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-arrow {
    margin-top: 12px;
    color: var(--link-blue);
    position: absolute;
    right: 15px;
    top: 0;
    border: 1px solid var(--border);
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 200rem;
    text-align: center;
    transition: var(--transition-fast);
}

    .card-arrow img {
        opacity: 0.5;
    }

/* ========================================
   5. MAIN CONTENT
======================================== */


.box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* max-width: 900px;*/
    line-height: var(--leading-relaxed);
}

    .box-header > div {
        flex: 1;
    }

.box-info {
    text-align: right;
}

.box-header h2 {
    margin-bottom: 15px;
}

.box-header p {
    line-height: var(--leading-relaxed);
}

/* ===== EXPANDABLE DESCRIPTION ===== */
.description-expandable {
    position: relative;
    max-width: 900px;
}

.description-text {
    max-height: 1.6em;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    .description-text p {
        margin: 0;
    }

.description-expandable.expanded .description-text {
    max-height: 500px;
}

.description-fade {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    height: 1.6em;
    background: linear-gradient(to bottom, transparent, var(--white));
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.description-expandable.expanded .description-fade {
    opacity: 0;
}

.description-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--link-blue);
    font-size: var(--font-sm);
    cursor: pointer;
    padding: 4px 0;
    margin-top: 4px;
}

    .description-toggle:hover {
        color: var(--link-blue-dark);
    }

.toggle-arrow {
    transition: transform 0.3s ease;
}

.description-expandable.expanded .toggle-arrow {
    transform: rotate(180deg);
}

/* ===== INFO TOOLTIP ===== */
.info-tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.info-tooltip-btn {
    background: none;
    border: none;
    color: var(--medium-grey);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    position: relative;
    top: -10px;
    left: -20px;
}

    .info-tooltip-btn:hover {
        color: var(--link-blue);
    }

.info-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    padding: var(--space-15);
    width: 350px;
    box-shadow: var(--shadow-medium);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 101;
}

    .info-tooltip::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid var(--border);
    }

    .info-tooltip::after {
        content: '';
        position: absolute;
        top: -5px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid var(--white);
    }

.info-tooltip-wrapper:hover .info-tooltip,
.info-tooltip-wrapper.active .info-tooltip {
    opacity: 1;
    visibility: visible;
}

.info-tooltip p {
    margin: 0;
    font-size: var(--font-sm);
    line-height: var(--leading-relaxed);
    color: var(--black);
}

/* Section header with tooltip - adjust layout */
.section-header .info-tooltip-wrapper {
    margin-left: var(--space-10);
}

.section-header h2 {
    display: inline-flex;
    align-items: center;
}

.section-body {
    margin-top: -25px;
    margin-left: -35px;
    margin-right: -35px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Filters Container - wraps both filters bar and selected filters */
/* Filters */
.filters {
    padding: var(--p-default);
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: var(--space-30);
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-sm);
    background: var(--white);
}

/* Filters inside content-section - edge-to-edge */
.content-section .filters {
    margin-left: calc(-1 * var(--content-padding));
    margin-right: calc(-1 * var(--content-padding));
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    padding-top: 0;
    border-bottom: none;
    background: transparent;
}

/* Tabs section - left */
.filters-tabs {
    flex-shrink: 0;
}

    .filters-tabs .company-tabs {
        display: flex;
        gap: var(--space-5);
        padding: 0;
        border: none;
        background: transparent;
    }

    .filters-tabs .company-tab {
        padding: 8px 14px;
        font-size: var(--font-sm);
    }

/* Filter buttons - center */
.filters-center {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.filters .search-box {
    font-size: var(--font-sm);
    width: 300px;
}

.filters-left {
    display: flex;
    gap: var(--space-10);
    align-items: center;
}

.filters-right {
    display: flex;
    gap: var(--space-12);
    align-items: center;
    flex-shrink: 0;
}

    /* Separator before buttons in filters-right */
    .filters-right .btn {
        position: relative;
    }

        .filters-right .btn:before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            height: var(--icon-md);
            width: 1px;
            background: var(--border);
        }

/* View Toggle */
.view-toggle {
    display: flex;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    padding: 2px;
}

.view-btn {
    width: var(--icon-lg);
    height: var(--icon-lg);
    border: none;
    background: transparent;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--medium-grey);
    transition: var(--transition-fast);
}

    .view-btn svg {
        width: 18px;
        height: 18px;
    }

    .view-btn:hover {
        background: var(--light-grey);
        color: var(--black);
    }

    .view-btn.active {
        background: var(--lucror-blue);
        color: var(--white);
    }

/* Coverage Columns - Grid View (default) */
.coverage-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-30);
}

    /* Coverage Columns - List View */
    .coverage-columns.list-view {
        display: flex;
        flex-direction: column;
        gap: var(--space-20);
    }

        /* Industry Group - List View */
        .coverage-columns.list-view .coverage-industry-group {
            width: 100%;
        }

        .coverage-columns.list-view .coverage-company-list {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-10);
        }

            .coverage-columns.list-view .coverage-company-list li {
                flex: 0 0 auto;
            }

/* Coverage Type Sections */
.coverage-type-section {
    margin-top: 40px;
}

    .coverage-type-section:first-child {
        margin-top: 0;
    }

.coverage-type-header {
    font-size: var(--font-xl);
    font-weight: var(--weight-semibold);
    color: var(--black);
    margin: 40px -35px 25px -35px;
    padding: var(--space-15) var(--content-padding);
    background: var(--light-grey);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.coverage-type-section:first-child .coverage-type-header {
    margin-top: 0;
}

/* Entries select dropdown */
.entries-select {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    font-family: inherit;
    cursor: pointer;
}

.filter-label {
    font-size: var(--font-sm);
}

.filter-btn {
    background: var(--white);
    padding: var(--space-10) 5px;
    border: 0;
    border-radius: var(--border-5);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-sm);
}

    .filter-btn:hover {
        background: var(--light-grey);
    }

/* Filter Dropdown */
.filter-item {
    position: relative;
}

.filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: var(--shadow);
    border-radius: 8px;
    padding: var(--space-20);
    min-width: 250px;
    display: none;
    z-index: 1000;
}

    .filter-dropdown.open {
        display: block;
    }


.filter-dropdown-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.filter-option {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding: 3px 0;
    cursor: pointer;
}

    .filter-option:hover label {
        color: var(--lucror-blue);
    }

    .filter-option input[type="checkbox"] {
        width: var(--icon-sm);
        height: var(--icon-sm);
        cursor: pointer;
    }

    .filter-option label {
        color: var(--black);
        cursor: pointer;
    }


.search-results {
    padding: var(--space-20) 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.filter-options {
    position: relative;
    padding: 0 10px 0 0;
}

    .filter-options:after {
        height: 37px;
        display: block;
        width: 1px;
        background: var(--border);
        content: " ";
        right: 0;
        top: 0;
        position: absolute;
    }

/* ========================================
   BUTTON SYSTEM - Consistent across all pages
======================================== */

.button {
    text-decoration: none;
    display: inline-block;
    padding: 6px 15px;
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    color: var(--lucror-blue);
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

    .button img {
        opacity: 0.8;
    }


.btn {
    padding: var(--space-12) 16px;
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    font-size: var(--font-14); /* buttons, forms */
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex; /* Use flex for proper icon alignment */
    align-items: center;
    gap: 6px; /* Space between icon and text */
    text-align: center;
    text-decoration: none;
    white-space: nowrap; /* Prevent text wrapping */
}

.btn-primary {
    background: var(--lucror-gradient);
    color: white;
}

    .btn-primary:hover:not(:disabled) {
        opacity: 0.9;
    }

    .btn-primary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-secondary {
    color: var(--black);
}

    .btn-secondary:hover {
        background: var(--border);
    }

.btn img {
    width: var(--icon-sm);
    height: var(--icon-sm);
    vertical-align: middle;
}

.btn-tertiary {
    background: transparent;
    color: var(--lucror-blue);
    border: 1px solid var(--lucror-blue);
}

    .btn-tertiary:hover {
        background: var(--lucror-blue);
        color: white;
    }

/* AI Badge - Small indicator for AI-powered features */
.ai-badge {
    background: var(--lucror-gradient);
    color: var(--white);
    border-radius: 10px;
    display: inline;
    padding: 3px 7px;
    font-size: 9px;
    position: relative;
    top: -3px;
    font-weight: var(--weight-semibold);
    margin-left: 3px;
}


/* ========================================
   6. TABLE
======================================== */


/*
   TABLE PATTERNS - Three distinct patterns for different use cases:
   
   1. RESEARCH TABLES (.research-table-container)
      - Full-featured data tables with filters, sorting, pagination
      - Used for: Research tab, Trade History tab, Calendar tab
      - Features: Search, column sorting, entries selector, pagination
   
   2. INFO TABLES (.info-table)
      - Simple two-column format for displaying lists
      - Used for: Trade Recommendations, Recent Publications
      - Features: Date column + content column, no pagination
   
   3. INFO GRIDS (.info-grid)
      - Div-based label/value pairs (not actual HTML tables)
      - Used for: Fact Box, Company Overview, tear sheet metadata
      - Features: Flexible layout, label + value styling
*/
table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background: var(--lucror-gradient);
    color: white;
}

.info-table thead {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    background: var(--light-grey);
    color: var(--black);
}

th {
    padding: 18px var(--content-padding);
    text-align: left;
    font-weight: var(--weight-semibold);
}
    /* Sortable Table Headers */
    th.sortable {
        cursor: pointer;
        user-select: none;
        transition: background-color 0.2s ease;
        white-space: nowrap;
    }

        th.sortable:hover {
            background: var(--lucror-blue-hover);
        }

        th.sortable:active {
            background: var(--lucror-blue-active);
        }

        th.sortable img {
            transition: transform 0.2s ease;
            display: inline-block;
            vertical-align: middle;
            margin-left: 4px;
        }

        th.sortable.sort-asc img {
            transform: rotate(180deg);
        }

        th.sortable.sort-desc img {
            transform: rotate(0deg);
        }

td {
    padding: 18px var(--content-padding);
    border-bottom: 1px solid var(--border);
}

tbody tr, tr a {
    transition: all ease-in .1s;
}

    tbody tr:hover {
        background: var(--light-grey);
        box-shadow: var(--shadow-medium);
    }

.really-small-column {
    width: 130px;
}

.small-column {
    width: 180px;
}

.middle-column {
    width: 245px;
}

table a {
    color: var(--lucror-blue);
    text-decoration: none;
}

/* Company List */
.company-list {
    color: var(--lucror-blue);
    line-height: var(--leading-relaxed);
    max-width: 520px;
}

    .company-list a {
        display: inline-block;
        padding: 3px 8px;
        background: var(--light-grey);
        border-radius: 15px;
        text-decoration: none;
        color: var(--lucror-blue);
        margin: 2px 0;
        border: 1px solid var(--white);
    }

tr:hover .company-list a {
    border-color: var(--border);
}

.company-list a:hover {
    background: var(--lucror-blue);
    color: var(--white);
    border-color: var(--lucror-blue);
}

/* Badges */
.lara-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-lg);
    height: var(--icon-lg);
}

/* LARA filter checkbox icons */
.lara-icon {
    width: var(--icon-md);
    height: var(--icon-md);
    vertical-align: middle;
    margin-right: 8px;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 12px;
}

.status-positive {
    background: var(--status-positive-bg);
    color: var(--status-positive-text);
}

.status-stable {
    background: var(--status-stable-bg);
    color: var(--status-stable-text);
}

.status-negative {
    background: var(--status-negative-bg);
    color: var(--status-negative-text);
}

/* Analyst Info */

.analyst-company {
    display: block;
    place-content: center;
}

.analyst-info {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

    .analyst-info.clickable {
        cursor: pointer;
        color: var(--lucror-blue);
        transition: var(--transition-fast);
    }

        .analyst-info.clickable:hover {
            color: var(--lucror-dark-blue);
            text-decoration: underline;
        }

.analyst-avatar {
    display: flex;
    align-items: center;
    gap: var(--space-10);
}

.analyst img {
    border: 5px solid var(--light-grey);
    box-sizing: content-box;
}

.analyst-avatar img {
    width: var(--icon-lg) !important;
    height: var(--icon-lg) !important;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--light-grey);
    box-sizing: content-box;
    transition: var(--transition-fast);
}

.analyst-avatar:hover img {
    border-color: var(--border);
}

/* Analyst Comment Boxes (Morning View) */
.analyst-comment-box {
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    margin-bottom: var(--space-20);
    background: var(--white);
}

.analyst-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    margin-left: calc(-1 * var(--content-padding));
    margin-right: calc(-1 * var(--content-padding));
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    padding-bottom: var(--space-20);
}

.company-metadata {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    flex-wrap: wrap;
}

    .company-metadata .company-logo img {
        max-width: 100px;
    }

.company-name-link a {
    color: var(--lucror-blue);
    cursor: pointer;
    text-decoration: none;
}

    .company-name-link a:hover {
        text-decoration: underline;
    }

.divider {
    color: var(--border);
}

.analyst-comment-body {
    padding-top: var(--space-20);
}

    .analyst-comment-body h4 {
        font-size: var(--font-md);
        font-weight: var(--weight-medium);
        color: var(--black);
        margin-bottom: var(--space-15);
    }

    .analyst-comment-body p {
        line-height: var(--leading-loose);
        color: var(--black);
        margin-bottom: var(--space-15);
    }

        .analyst-comment-body p:last-child {
            margin-bottom: 0;
        }

/* Trade Recommendations */

.trade {
    padding: 4px 12px;
    border-radius: 12px;
    margin-bottom: 5px;
}

.t-negative {
    background: var(--status-negative-bg);
    color: var(--status-negative-text);
}

/* ========================================
   7. LIGHTBOX
======================================== */

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .lightbox.active {
        opacity: 1;
        visibility: visible;
        backdrop-filter: blur(5px);
    }

.lightbox-content {
    background: white;
    border-radius: 12px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.clickable-reco {
    cursor: pointer;
}

    .clickable-reco:hover {
        background-color: var(--row-hover, rgba(0, 0, 0, 0.04));
    }

.lightbox-content.trade-history-lightbox-content {
    max-width: 1080px;
}

.lightbox.active .lightbox-content {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: var(--font-24); /* h3, icons */
    cursor: pointer;
    color: var(--medium-grey);
}

.lightbox-content h3 {
    font-size: var(--font-20); /* lightbox h3 */
    font-weight: var(--weight-semibold);
    color: var(--black);
    margin-bottom: var(--space-20);
}

/* Covenants Iframe Lightbox */
.covenants-lightbox-content {
    position: relative;
    width: 75vw;
    height: 75vh;
    max-width: none;
    max-height: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
}

    .covenants-lightbox-content.maximized {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

.covenants-lightbox-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.lightbox-maximize {
    cursor: pointer;
    color: var(--medium-grey);
    display: flex;
    align-items: center;
}

    .lightbox-maximize:hover,
    .covenants-lightbox-header .lightbox-close:hover {
        color: var(--black);
    }

.covenants-deal-select {
    margin-right: auto;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    font-size: var(--font-13);
    color: var(--black);
    background: var(--white);
    max-width: 350px;
    cursor: pointer;
}

    .covenants-deal-select:focus {
        outline: none;
        border-color: var(--lucror-blue);
    }

.covenants-lightbox-header .lightbox-close {
    position: static;
    font-size: var(--font-24);
    cursor: pointer;
    color: var(--medium-grey);
    line-height: 1;
}

.covenants-lightbox-content iframe {
    flex: 1;
    width: 100%;
    border: none;
}

.lightbox-html {
    flex: 1;
    width: 100%;
    position: relative;
    overflow: auto;
    padding: 16px;
    box-sizing: border-box;
}

    .lightbox-html img,
    .lightbox-html svg {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

/* ----------------------------------------------------------------------------
   Image zoom (global, reusable) - see window.LucrorImageZoom in main.js
   ---------------------------------------------------------------------------- */
.zoom-scroll {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    display: flex;
}

/* margin:auto centers the content when it is smaller than the viewport, yet
   collapses to 0 (keeping the content scrollable from the start) once it is
   larger than the viewport - on both axes. */
.zoom-sizer {
    position: relative;
    flex: 0 0 auto;
    margin: auto;
}

.zoom-layer {
    transform-origin: 0 0;
    transition: transform 0.1s ease-out;
}

.image-zoom-toolbar {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 5;
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    box-shadow: var(--shadow-raised);
}

.image-zoom-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: var(--medium-grey);
    background: transparent;
    border: none;
    border-radius: var(--border-5);
}

    .image-zoom-btn:hover {
        color: var(--black);
        background: var(--light-grey);
    }

    .image-zoom-btn:disabled {
        opacity: 0.4;
        cursor: default;
    }

.financial-summary-wrapper {
    position: relative;
}

.financial-summary-maximize {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: var(--border-5);
    background: rgba(255, 255, 255, 0.85);
    color: var(--medium-grey);
    cursor: pointer;
    transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}

    .financial-summary-maximize:hover {
        color: var(--black);
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    }

/* Analyst Box */
.analyst-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: var(--space-15) 0;
    margin: var(--space-20) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.analyst-company {
    font-size: var(--font-sm);
}

.analyst {
    display: flex;
    align-items: center;
    gap: 16px;
}

.analyst-box img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.analyst-box h4 {
    font-size: var(--font-base); /* 16px */
    font-weight: var(--weight-semibold);
    color: var(--black);
    margin: 0;
    display: flex;
    flex-direction: column;
}

    .analyst-box h4 span {
        font-size: var(--font-13); /* small buttons */
        font-weight: 400;
        color: var(--medium-grey);
        display: block;
    }

/* ========================================
   8. FORM
======================================== */

form {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

    form .form-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-8);
    }

/* For legacy forms with bare divs (enquiry lightboxes) */
.contact-form form div {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

form label {
    font-size: var(--font-14); /* buttons, forms */
    font-weight: var(--weight-semibold);
    color: var(--black);
}

form input[type="text"],
form textarea,
select {
    /*width: 100%;*/
    padding: var(--space-10) 12px;
    background: var(--light-grey);
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    font-size: var(--font-base);
    font-family: inherit;
}

/* Specific padding for select elements */
select {
    padding: 6px 12px;
}

    input[type="text"]:focus,
    form textarea:focus,
    select:focus {
        outline: none;
        border-color: var(--lucror-blue);
    }

form textarea {
    resize: vertical;
    min-height: 120px;
}

form button[type="submit"] {
    padding: var(--space-12) 24px;
    background: var(--lucror-gradient);
    color: white;
    border: none;
    border-radius: var(--border-5);
    font-size: var(--font-14); /* buttons, forms */
    font-weight: var(--weight-semibold);
    cursor: pointer;
    align-self: flex-start;
    width: 100%;
}

    form button[type="submit"]:hover {
        background: var(--link-blue-dark);
    }

/* File Upload */
form input[type="file"] {
    display: none;
}

.file-upload-area {
    width: 100%;
    padding: var(--space-30);
    background: var(--light-grey);
    border: 2px dashed var(--border);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-standard);
}

    .file-upload-area:hover {
        border-color: var(--link-blue);
        background: var(--link-blue-light);
    }

    .file-upload-area span {
        color: var(--medium-grey);
        font-size: var(--font-14); /* buttons, forms */
    }

.file-upload-icon {
    width: var(--icon-lg);
    height: var(--icon-lg);
    margin: 0 auto 8px;
    background-image: url('/Content/icons/upload.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* File List (for attachment display) */
.file-list {
    margin-top: var(--space-10);
}

.file-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    background: var(--light-grey);
    border-radius: var(--border-5);
    margin-bottom: var(--space-5);
    font-size: var(--font-13);
}

    .file-item .file-name {
        color: var(--black);
        word-break: break-all;
    }

    .file-item .file-size {
        color: var(--medium-grey);
        white-space: nowrap;
    }

/* ========================================
   9. PAGINATION
======================================== */

.pagination {
    padding: var(--space-20) 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-info {
    font-size: var(--font-sm);
    color: var(--medium-grey);
}

.page-numbers {
    display: flex;
    gap: var(--space-8);
}

.page-btn {
    width: var(--icon-lg);
    height: var(--icon-lg);
    border: 1px solid var(--border);
    background: white;
    border-radius: var(--border-5);
    cursor: pointer;
    font-size: var(--font-13); /* small buttons */
    transition: var(--transition-fast);
    color: var(--medium-grey);
}

    .page-btn:hover {
        background: var(--light-grey);
        color: var(--black);
    }

    .page-btn.active {
        background: var(--lucror-gradient);
        color: var(--white);
        border-color: var(--lucror-blue);
    }

/* ========================================
   10. FOOTER
======================================== */

footer {
    background: var(--white);
    margin: var(--space-20) 40px;
    padding: var(--p-default);
    text-align: center;
    display: flex;
    justify-content: space-between;
    border-radius: var(--border-10);
    box-shadow: var(--shadow);
    font-size: var(--font-sm);
}

    footer a {
        color: var(--black);
        text-decoration: none;
        margin: 0 12px;
    }

/* Filter button active state */
.filter-btn.active {
    background: var(--light-grey);
    color: var(--lucror-blue);
}

/* Filter dropdown search */
.filter-dropdown-search {
    margin-bottom: var(--space-15);
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

.filter-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    font-size: var(--font-sm);
}

.filter-dropdown {
    max-height: 400px;
    overflow-y: hidden;
    margin-top: 5px;
}

.filter-dropdown-options {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.filter-option label {
    display: flex;
    align-items: center;
}

/* Filter reset button states */
.filter-reset {
    position: relative;
    display: inline-block;
    padding: var(--space-10) 15px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-sm);
    color: var(--medium-grey);
    transition: var(--transition-fast);
    padding-left: 25px;
}

    .filter-reset.active {
        color: var(--lucror-blue);
        font-weight: var(--weight-semibold);
        cursor: pointer;
    }

        .filter-reset.active:hover {
            text-decoration: underline;
        }

    .filter-reset.inactive {
        color: var(--medium-grey);
        cursor: not-allowed;
    }

    .filter-reset:before {
        height: var(--icon-md);
        display: block;
        width: 1px;
        background: var(--border);
        content: " ";
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
    }

/* Selected Filters Display */

/* Selected Filters Display */
.selected-filters {
    background: var(--light-blue);
    padding: var(--space-15) var(--content-padding);
    display: none;
    gap: var(--space-15);
    align-items: center;
    flex-wrap: wrap;
}

/* Edge-to-edge for coverage page */
.content-section .selected-filters {
    margin-left: calc(-1 * var(--content-padding));
    margin-right: calc(-1 * var(--content-padding));
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

.selected-filters-label {
    font-weight: var(--weight-semibold);
    color: var(--black);
    font-size: var(--font-sm);
}

.selected-filters-tags {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
    flex: 1;
}

.filter-tag {
    background: white;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--font-sm);
    transition: var(--transition-fast);
}

    .filter-tag:hover {
        box-shadow: var(--shadow-medium);
    }

.filter-tag-type {
    color: var(--medium-grey);
    font-weight: var(--weight-semibold);
}

.filter-tag-value {
    color: var(--black);
}

.filter-tag-remove {
    background: none;
    border: none;
    color: var(--medium-grey);
    font-size: var(--font-lg);
    cursor: pointer;
    padding: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition-fast);
}

    .filter-tag-remove:hover {
        background: var(--light-grey);
        color: var(--lucror-blue);
    }


/* ========================================
   ENQUIRIES LIGHTBOX
======================================== */

.enquiries-content {
    max-width: 1200px;
    width: 90%;
}

/* Enquiries Header - Title and Controls on same line */
.enquiries-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-20);
}

    .enquiries-header h3 {
        margin: 0;
    }

.enquiries-controls {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    font-size: var(--font-sm);
}

.enquiries-table-wrapper {
    margin-bottom: var(--space-20);
}


.enquiries-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-20);
}

    .enquiries-table thead {
        background: var(--lucror-gradient);
        color: white;
    }

    .enquiries-table th {
        padding: var(--space-15) 20px;
        text-align: left;
        font-weight: var(--weight-semibold);
        font-size: var(--font-sm);
    }

        .enquiries-table th.date-column {
            width: 150px;
        }

    .enquiries-table td {
        padding: var(--space-15) 20px;
        border-bottom: 1px solid var(--border);
    }

    .enquiries-table tbody tr {
        transition: background 0.2s ease;
    }

        .enquiries-table tbody tr:hover {
            background: var(--light-grey);
        }

    .enquiries-table a {
        color: var(--lucror-blue);
        text-decoration: none;
    }

        .enquiries-table a:hover {
            text-decoration: underline;
        }

.enquiries-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-sm);
}

.enquiries-info {
    color: var(--medium-grey);
}

.enquiries-actions {
    display: flex;
    gap: var(--space-10);
    justify-content: flex-end;
    margin-top: var(--space-20);
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* Unread enquiry styling */
.enquiries-table tbody tr.unread {
    background: var(--light-blue);
    font-weight: var(--weight-semibold);
}

    .enquiries-table tbody tr.unread:hover {
        background: var(--light-blue);
    }

    .enquiries-table tbody tr.unread a {
        font-weight: var(--weight-semibold);
        color: var(--lucror-blue);
    }

/* Portfolio Changes Table - No sticky header */
.portfolio-changes-table-wrapper {
    max-height: 500px;
    overflow-y: auto;
}

.portfolio-changes-table thead {
    position: relative;
    top: auto;
}

/* Export button in enquiries controls */
.enquiries-controls .btn {
    margin-left: 20px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: 8px 16px;
}

    .enquiries-controls .btn img {
        width: var(--icon-sm);
        height: var(--icon-sm);
    }

/* Clickable rows */
.enquiries-table tbody tr.clickable {
    cursor: pointer;
}

/* ========================================
   ENQUIRY DETAILS LIGHTBOX
======================================== */

.enquiry-details-content {
    max-width: 800px;
    width: 90%;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

/* Header with back button */
.enquiry-details-header {
    display: flex;
    align-items: center;
    gap: var(--space-15);
    margin-bottom: var(--space-10);
}

.btn-back {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

    .btn-back:hover {
        background: var(--light-grey);
    }

    .btn-back img {
        width: 20px;
        height: 20px;
        transform: rotate(180deg);
    }

.enquiry-details-title {
    display: flex;
    align-items: center;
    gap: var(--space-15);
    flex: 1;
}

    .enquiry-details-title h3 {
        margin: 0;
        font-size: var(--font-lg);
    }

/* Status badge */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
}

    .status-badge.status-open {
        background: var(--light-blue);
        color: var(--lucror-blue);
    }

    .status-badge.status-in-progress {
        background: #fff3cd;
        color: #856404;
    }

    .status-badge.status-closed {
        background: var(--light-grey);
        color: var(--medium-grey);
    }

/* Meta info */
.enquiry-details-meta {
    font-size: var(--font-sm);
    color: var(--medium-grey);
    margin-bottom: var(--space-20);
    padding-bottom: var(--space-15);
    border-bottom: 1px solid var(--border);
}

/* Message Thread */
.message-thread {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-15) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-15);
    min-height: 200px;
    max-height: 400px;
}

.message-loading,
.message-error,
.message-empty {
    text-align: center;
    padding: var(--space-40);
    color: var(--medium-grey);
}

.message-error {
    color: #dc3545;
}

/* Message Bubbles */
/*.message-bubble {
    max-width: 80%;
    padding: var(--space-15);
    border-radius: 12px;
    position: relative;
}

.message-bubble.user {
    align-self: flex-end;
    background: var(--lucror-blue);
    color: white;
    border-bottom-right-radius: 4px;
}

.message-bubble.analyst {
    align-self: flex-start;
    background: var(--light-grey);
    color: var(--dark-grey);
    border-bottom-left-radius: 4px;
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
    gap: var(--space-15);
}

.message-sender {
    font-weight: var(--weight-semibold);
    font-size: var(--font-sm);
}

.message-bubble.user .message-sender {
    color: rgba(255, 255, 255, 0.9);
}

.message-timestamp {
    font-size: var(--font-xs);
    opacity: 0.7;
}

.message-content {
    font-size: var(--font-sm);
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}*/

/* Attachments in messages */
.message-attachments {
    margin-top: var(--space-10);
    padding-top: var(--space-10);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.message-bubble.analyst .message-attachments {
    border-top-color: var(--border);
}

.attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-size: var(--font-xs);
    color: inherit;
    text-decoration: none;
    transition: background 0.2s ease;
}

    .attachment-link:hover {
        background: rgba(255, 255, 255, 0.3);
        text-decoration: none;
    }

    .attachment-link img {
        width: 14px;
        height: 14px;
    }

.message-bubble.analyst .attachment-link {
    background: rgba(0, 0, 0, 0.1);
}

    .message-bubble.analyst .attachment-link:hover {
        background: rgba(0, 0, 0, 0.15);
    }

/* Reply Form */
.enquiry-reply-form {
    margin-top: var(--space-15);
    padding-top: var(--space-15);
    border-top: 1px solid var(--border);
}

.reply-input-wrapper {
    display: flex;
    gap: var(--space-10);
    align-items: flex-end;
}

    .reply-input-wrapper textarea {
        flex: 1;
        resize: none;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: var(--space-10) var(--space-15);
        font-family: inherit;
        font-size: var(--font-sm);
        min-height: 60px;
    }

        .reply-input-wrapper textarea:focus {
            outline: none;
            border-color: var(--lucror-blue);
        }

.reply-actions {
    display: flex;
    gap: var(--space-8);
    align-items: center;
}

.btn-attachment {
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    background: var(--light-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

    .btn-attachment:hover {
        background: var(--border);
    }

    .btn-attachment img {
        width: 20px;
        height: 20px;
    }

/* Attachment preview */
.attachment-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-10);
}

.attachment-preview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--light-grey);
    border-radius: 4px;
    font-size: var(--font-xs);
}

    .attachment-preview button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        font-size: 16px;
        line-height: 1;
        color: var(--medium-grey);
    }

        .attachment-preview button:hover {
            color: #dc3545;
        }

/* ========================================
   GRID SYSTEM - Reusable Layout Classes
======================================== */

/* Page Container */
.page-container {
    margin: var(--space-20) 40px;
}

/* Content Section - White card with shadow (reusable for all cards) */
.content-section {
    background: var(--white);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: var(--space-30) var(--content-padding);
    margin-bottom: var(--space-20);
}

/* Grid Layouts */
.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-20);
}

.grid-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-20);
}

.grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-20);
}

/* Grid column spans */
.col-span-2 {
    grid-column: span 2;
}

.col-span-3 {
    grid-column: span 3;
}

.col-span-full {
    grid-column: 1 / -1;
}

/* Portfolio Grid - 2fr 1fr layout */
.portfolio-grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-20);
}

/* Section Header (inside content-section) */
.section-header {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    margin-top: 0;
    margin-bottom: 25px;
    padding-bottom: 15px;
}

/* Make section headers extend edge-to-edge by default */
.content-section .section-header {
    margin-left: calc(-1 * var(--content-padding));
    margin-right: calc(-1 * var(--content-padding));
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    border-bottom: 1px solid var(--border);
}

/* Section header with space-between layout (for headers with links on right) */
.section-header--spaced {
    justify-content: space-between;
}

/* Section header followed by filters - no bottom margin */
.section-header--no-margin {
    margin-bottom: 0;
}

/* Section header with highlighted background (matches info-table thead).
   Date bars that follow a list keep positive top spacing so they don't
   overlap the previous list's last entry. */
.section-header--highlighted {
    background: var(--light-grey);
    padding-top: 15px;
    margin-top: 20px;
}

/* Only the first date bar (immediately after the main section header) is
   pulled up to butt against it. Subsequent bars follow a list, so they must
   not use the negative margin (which caused overlapping entries). */
.section-header + .section-header--highlighted {
    margin-top: -25px;
}

/* Clean header variant - no border, minimal padding (for page titles) */
.content-section .section-header--clean {
    margin: 0;
    padding: 0;
    border-bottom: none;
}

/* Section header with icon (keeps icon and heading close together) */
.section-header--with-icon {
    gap: var(--space-12);
}

.section-header-icon {
    width: 24px;
    height: 24px;
    color: var(--lucror-blue);
    flex-shrink: 0;
}

/*Steve*/
.section-header h2,
.section-header h3 {
    font-size: var(--font-lg);
    font-weight: var(--weight-semibold);
    color: var(--black);
    margin: 0;
    display: inline-flex;
}

    .section-header h2::before,
    .section-header h3::before {
        content: "";
        flex: 0 0 auto;
        width: 3px;
        height: 1.1em;
        margin-right: var(--space-10);
        background: var(--lucror-blue);
        border-radius: 2px;
    }

/* Section Title (for headers without icons) */
.section-title {
    font-size: var(--font-md);
    font-weight: var(--weight-semibold);
    color: var(--black);
}

/* Form Layouts */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-20);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-group label {
    font-weight: var(--weight-semibold);
    color: var(--black);
    font-size: var(--font-sm);
}

    .form-group label .required {
        color: red;
        margin-left: 2px;
    }

.form-input,
.form-textarea,
.form-select {
    padding: var(--space-10) 16px;
    background: var(--light-grey);
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    font-size: var(--font-base);
    font-family: inherit;
    transition: var(--transition-fast);
}

.form-select {
    background: none;
}

    .form-input:focus,
    .form-textarea:focus,
    .form-select:focus {
        outline: none;
        border-color: var(--lucror-blue);
        background: var(--white);
    }

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-15);
}

/* Checkbox & Radio Styles */
.checkbox-group,
form .checkbox-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-20);
}

    .checkbox-group input[type="checkbox"],
    .checkbox-group input[type="radio"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

    .checkbox-group label {
        cursor: pointer;
        font-weight: normal;
        margin: 0;
    }

.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

    /* Checkbox Grid - 2 column layout (overrides checkbox-list flex) */
    .checkbox-list.checkbox-grid-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10) var(--space-20);
    }

.checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

    .checkbox-item input[type="checkbox"] {
        width: var(--icon-sm);
        height: var(--icon-sm);
        cursor: pointer;
    }

    .checkbox-item label {
        cursor: pointer;
        color: var(--black);
        font-weight: normal;
    }

    .checkbox-item:hover label {
        color: var(--lucror-blue);
    }

/* Info Text */
.info-text {
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-20);
    /*max-width: 960px;*/
}

/* Subsection Headers (h3 inside sections) */
.subsection-title {
    font-size: var(--font-base);
    font-weight: var(--weight-semibold);
    color: var(--black);
    margin-top: 30px;
    margin-bottom: var(--space-15);
}

/* Only remove top margin if it's the very first element in content-section */
.content-section > .subsection-title:first-child {
    margin-top: 0;
}


/* ===========================================
   STICKY TABLE PAGES - Global Class System
   Use .sticky-table-page on pages with sticky filters/tables
   =========================================== */

/* Pages with sticky scrolling tables */
.sticky-table-page .filters-container {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    padding-top: 0;
}

    /* Add padding only when stuck to top */
    .sticky-table-page .filters-container.is-stuck {
        padding-top: 20px;
    }

/* Coverage page only - disable sticky filters */
.research-table-container.coverage-filters .filters-container {
    position: relative;
    top: auto;
}

/* Legacy support - keep old styling for pages without class */
.filters-container {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    padding-top: 0;
}

    .filters-container.is-stuck {
        padding-top: 20px;
    }

table thead {
    position: sticky;
    top: 0;
    z-index: 99;
}

/* Research table container - special styling for table that goes to edges */
.research-table-container {
    overflow: visible; /* Allow sticky positioning to work */
}

/* Research table container inside content-section */
.content-section .research-table-container {
    margin: 0;
    padding: 0;
}

    /* Tables inside content-section - edge-to-edge */
    .content-section .research-table-container table {
        margin-left: calc(-1 * var(--content-padding));
        margin-right: calc(-1 * var(--content-padding));
        width: calc(100% + 70px);
    }

    /* Pagination inside content-section - edge-to-edge */
    .content-section .research-table-container .pagination {
        margin-left: calc(-1 * var(--content-padding));
        margin-right: calc(-1 * var(--content-padding));
        padding-left: var(--content-padding);
        padding-right: var(--content-padding);
    }



/* ========================================
   GENERIC PAGE HEADER (for Coverage, Analytics, etc.)
======================================== */

/* Page Header Container */
.page-header {
    padding: 0;
    overflow: hidden;
}

.identity-bar {
    padding: var(--space-30) var(--content-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-title-section {
    display: flex;
    align-items: center;
    gap: var(--space-20);
}

.page-title-wrapper {
    position: relative;
}

    .page-title-wrapper h1 {
        font-size: var(--font-24); /* h3, icons */
        font-weight: var(--weight-semibold);
        margin: 0;
    }

.page-description {
    margin-top: var(--space-15);
    font-size: var(--font-sm);
    line-height: var(--leading-loose);
    max-width: 800px;
}

.page-metrics {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    color: var(--black);
    align-items: flex-end;
}

.page-metrics-row {
    display: flex;
    gap: var(--space-30);
}

.page-metric {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.page-metric-label {
    font-weight: var(--weight-semibold);
}

.page-metric img {
    height: var(--icon-md);
    width: var(--icon-md);
    margin-left: var(--space-5);
}

/* ========================================
   COMPANY PAGE STYLES
======================================== */

/* Company Profile Header Container */
.company-profile-header {
    padding: 0;
    overflow: hidden;
}

.company-identity-bar {
    padding: var(--space-30) var(--content-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.company-logo-name {
    display: flex;
    align-items: center;
    gap: var(--space-20);
}

.company-logo {
    max-width: 180px;
    display: block;
}

    .company-logo img, .company-logo-name img {
        max-height: 50px;
    }

.company-name-wrapper {
    position: relative;
    padding-left: 15px;
}

.company-name-divider {
    height: 50px;
    width: 1px;
    background: var(--border);
    position: absolute;
    left: 0;
    top: -8px;
}

.company-name-wrapper h1 {
    font-size: var(--font-24); /* h3, icons */
    font-weight: var(--weight-semibold);
    margin: 0;
}

.company-metrics {
    display: flex;
    gap: var(--space-30);
    color: var(--black);
}

.company-metric {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.company-metric-label {
    font-weight: var(--weight-semibold);
}

.company-metric img {
    height: var(--icon-md);
    width: var(--icon-md);
    margin-left: var(--space-5);
}

/* Company Tabs */
.company-tabs {
    padding: var(--space-15) var(--content-padding);
    border-top: 1px solid var(--border);
    background: var(--white);
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.company-tab {
    padding: var(--space-10) 15px;
    color: var(--medium-grey);
    text-decoration: none;
    font-weight: var(--weight-semibold);
    border-radius: 5px;
    transition: var(--transition-fast);
}

    .company-tab:hover {
        background: var(--light-grey);
        color: var(--black);
    }

    .company-tab.active {
        color: var(--lucror-blue);
        background: var(--light-grey);
        font-weight: var(--weight-semibold);
    }

/* Company Content Grid (2/3 + 1/3) */
/* Generic 2/3 Main + 1/3 Sidebar Grid Layout */
.grid-main-sidebar {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-20);
}

    .grid-main-sidebar > * {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .grid-main-sidebar img {
        max-width: 100%;
        height: auto;
        /*display: block;*/
    }

    .grid-main-sidebar > div > .content-section {
        margin-bottom: var(--space-20);
    }

        .grid-main-sidebar > div > .content-section:last-child {
            margin-bottom: 0;
        }

/* Section with edge-to-edge table */
.section-with-table {
    padding: 0;
}

    .section-with-table .section-header {
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 30px;
        padding-left: var(--content-padding);
        padding-right: var(--content-padding);
        padding-bottom: 20px;
    }

    .section-with-table .box-tabs {
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 30px;
        padding-left: var(--content-padding);
        padding-right: var(--content-padding);
    }

    .section-with-table .info-table {
        margin: 0;
    }

        .section-with-table .info-table thead th,
        .section-with-table .info-table tbody td {
            padding-left: var(--content-padding);
            padding-right: var(--content-padding);
        }

        /* Add bottom spacing to last row so table doesn't look cut off */
        .section-with-table .info-table tbody tr:last-child td {
            padding-bottom: 20px;
        }

/* Info Tables */
.info-table {
    width: 100%;
    border-collapse: collapse;
}

    .info-table thead th {
        text-align: left;
        padding: var(--space-10) 0;
        color: var(--black);
        font-weight: var(--weight-semibold);
        border-bottom: 1px solid var(--border);
        background: var(--light-grey);
    }

    .info-table tbody td {
        padding: var(--space-15) 0;
        border-bottom: 1px solid var(--border);
        vertical-align: top;
        color: var(--black);
    }


    .info-table a {
        color: var(--lucror-blue);
        text-decoration: none;
    }

        .info-table a:hover {
            text-decoration: underline;
        }

/* ========================================
   INFO LIST (grid alternative to .info-table
   for simple date + title rows — no scroll wrapper needed)
   ======================================== */
.info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.info-list-head,
.info-list-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-20);
    border-bottom: 1px solid var(--border);
}

.info-list-head {
    padding: var(--space-10) 0;
    background: var(--light-grey);
    color: var(--black);
    font-weight: var(--weight-semibold);
}

/* whole row is the link, so the entire line is clickable */
a.info-list-row {
    padding: var(--space-15) 0;
    align-items: baseline;
    text-decoration: none;
    color: var(--black);
    transition: var(--transition-fast);
}

    a.info-list-row:hover {
        background: var(--light-grey);
        box-shadow: var(--shadow-medium);
    }

.info-list-date {
    color: var(--black);
    white-space: nowrap;
}

.info-list-title {
    color: var(--lucror-blue);
}

a.info-list-row:hover .info-list-title {
    text-decoration: underline;
}

/* Full-bleed inside .section-with-table so the hover spans side to side
   (content inset by content-padding, exactly like .info-table) */
.section-with-table .info-list-head,
.section-with-table .info-list-row {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

/* Section Header Links */
.section-header-link {
    color: var(--medium-grey);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

    .section-header-link img {
        width: var(--icon-sm);
        height: var(--icon-sm);
        opacity: 0.6;
    }

    .section-header-link:hover {
        color: var(--lucror-blue);
    }

        .section-header-link:hover img {
            opacity: 1;
        }

.section-header-links {
    display: flex;
    gap: var(--space-15);
    margin-left: auto;
}

/* Default Paragraph Styles */
p {
    line-height: var(--leading-loose);
    color: var(--black);
    margin: 0 0 15px 0;
}

    p:last-child {
        margin-bottom: 0;
    }

/* Fact List */
/* Info Grid - Global component for label/value pairs (used in Fact Box, Company Overview, etc.) */
.info-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.info-grid-item {
    display: flex;
    gap: 25px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--light-grey);
}

    .info-grid-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.info-grid-label {
    font-weight: var(--weight-semibold);
    color: var(--black);
    flex-shrink: 0;
    width: 110px;
}

.info-grid-value {
    color: var(--black);
    /*flex: 1;*/
}

    .info-grid-value a {
        color: var(--lucror-blue);
        text-decoration: none;
    }

        .info-grid-value a:hover {
            text-decoration: underline;
        }

/* Financial Summary Image */
.financial-summary-image {
    width: 100%;
    display: block;
}

/* Last table row - rounded corners on hover */
tbody tr:last-child:hover td:first-child {
    border-bottom-left-radius: 8px;
}

tbody tr:last-child:hover td:last-child {
    border-bottom-right-radius: 8px;
}

/* ========================================
   IN-BOX TABS (for content sections)
======================================== */

.box-tabs {
    display: flex;
    gap: var(--space-5);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-20);
    margin-left: calc(-1 * var(--content-padding));
    margin-right: calc(-1 * var(--content-padding));
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

.box-tab {
    padding: var(--space-15) 20px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: var(--medium-grey);
    text-decoration: none;
    font-weight: var(--weight-semibold);
    font-size: var(--font-sm);
    transition: var(--transition-fast);
    cursor: pointer;
    position: relative;
    margin-bottom: -1px;
}

    .box-tab:hover {
        color: var(--black);
        border-color: var(--border);
        border-bottom-color: transparent;
    }

    .box-tab.active {
        background: var(--white);
        color: var(--lucror-blue);
        border-color: var(--border);
        border-bottom-color: var(--white);
        font-weight: var(--weight-semibold);
    }

    .box-tab.disabled {
        color: var(--border);
        cursor: not-allowed;
        opacity: 0.5;
    }

/* Tab Content visibility */
.tab-content {
    display: none;
}

    .tab-content.active {
        display: block;
    }

/* ========================================
   TEAR SHEET PAGE STYLES
======================================== */

/* Section Actions - Generic action buttons/links container */
.section-actions {
    display: flex;
    gap: var(--space-5);
    align-items: center;
}

.section-date {
    color: var(--black);
    margin-right: 12px;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    white-space: nowrap;
}

/* Generic separator - adds vertical line after element */
.separator-after {
    position: relative; /* Need this for :after positioning */
}

    .separator-after:after {
        content: "";
        position: absolute;
        right: -10px;
        top: 50%;
        transform: translateY(-50%);
        height: var(--icon-md);
        width: 1px;
        background: var(--border);
    }

/* Spaced variant - line sits inside the element's padding */
.separator-after--spaced {
    padding-right: var(--space-10);
}

    .separator-after--spaced:after {
        right: 0;
    }

/* Legacy support for tearsheet-date */
.section-actions .section-date {
    position: relative;
}

    .section-actions .section-date:after {
        content: "";
        position: absolute;
        right: -10px;
        top: 50%;
        transform: translateY(-50%);
        height: var(--icon-md);
        width: 1px;
        background: var(--border);
    }


/* Icon Button/Link - Works with both <button> and <a> tags */
.icon-btn {
    width: 42px;
    height: 42px;
    border-radius: var(--border-5);
    border: 1px solid var(--border);
    background: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    position: relative;
    text-decoration: none; /* For anchor tags */
}


    .icon-btn:hover {
        background: var(--lucror-gradient);
        border-color: var(--lucror-blue);
    }

        .icon-btn:hover img {
            filter: brightness(0) invert(1);
        }

    .icon-btn img {
        width: 22px;
        height: 22px;
    }

    /* SVG icons in icon buttons */
    .icon-btn svg {
        width: 20px;
        height: 20px;
        color: var(--black); /* Default color */
    }

    .icon-btn:hover svg {
        color: var(--white); /* White on hover (blue gradient background) */
    }

/* Text Subtitle - Generic subtitle style */
/*Steve*/
h3.text-subtitle, h3.ck-sub-title, h3.overview-title {
    font-size: var(--font-xl) !important;
    font-weight: var(--weight-semibold) !important;
    color: var(--black) !important;
    margin: 0 0 var(--space-20) 0 !important;
    padding-top: 20px !important;
}

/* Tear Sheet Metadata */
.tearsheet-metadata {
    display: flex;
    gap: var(--space-30);
    margin-bottom: var(--space-20);
}

.metadata-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metadata-label {
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    color: var(--medium-grey);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metadata-value {
    font-size: var(--font-sm);
    color: var(--black);
}

/* Tear Sheet Notice Box */
.tearsheet-notice {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: 6px;
    padding: var(--space-15);
    margin-bottom: 25px;
    color: var(--warning-text);
    font-size: var(--font-sm);
    line-height: var(--leading-relaxed);
}

/* Trade Recommendation Callout */
.trade-recommendation {
    border-left: 4px solid var(--lucror-blue);
    background: var(--light-blue);
    padding: var(--space-20);
    margin-bottom: 25px;
    border-radius: 0 var(--border-5) var(--border-5) 0;
}

    .trade-recommendation p {
        margin: 0 0 var(--space-8) 0;
        line-height: var(--leading-relaxed);
    }

        .trade-recommendation p:last-child {
            margin-bottom: 0;
        }

/* Horizontal Rule - Semantic section divider */
hr {
    height: 1px;
    background: var(--border);
    border: none;
    margin: 30px 0;
}

/* Tear Sheet Section Titles */
.tearsheet-subsection-title {
    font-size: var(--font-base);
    font-weight: var(--weight-semibold);
    color: var(--black);
    margin-top: var(--space-20);
    margin-bottom: var(--space-12);
}

/* Tear Sheet Lists */
/* Company Overview Grid (right sidebar) */
/* Related Research List */
.related-research-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    list-style-position: inside;
    padding-left: 0;
}

/* Inline icon (for LARA icons in info-grid values) */
.inline-icon {
    width: var(--icon-md);
    height: var(--icon-md);
    vertical-align: middle;
    margin-left: var(--space-5);
}

.related-research-list li {
    border-bottom: 1px solid var(--light-grey);
    padding-bottom: var(--space-12);
}

    .related-research-list li:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.related-research-list a {
    color: var(--lucror-blue);
    text-decoration: none;
}

    .related-research-list a:hover {
        text-decoration: underline;
    }

.research-item {
    text-decoration: none;
    color: var(--lucror-blue);
}

    .research-item:hover {
        background: var(--white);
        border-color: var(--lucror-blue);
        box-shadow: var(--shadow-medium);
    }

.research-title {
    line-height: var(--leading-normal);
    color: var(--lucror-blue);
}

.research-item:hover .research-title {
    color: var(--lucror-blue);
}

/* Year separator rows in calendar table */
.table-separator {
    background: var(--light-grey);
    font-weight: var(--weight-semibold);
}

    .table-separator td {
        color: var(--black);
        padding: var(--space-15) var(--content-padding);
        border-bottom: none;
    }

    .table-separator:hover {
        background: var(--light-grey);
        box-shadow: none;
    }

/* Date column width - consolidated for all tables */
th.date-col,
td.date-col,
.info-table .date-col {
    width: 120px;
}

/* ========================================
   ANALYTICS PAGE
======================================== */

/* Analytics Layout - Two columns: Description + Filters */
.analytics-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 40px;
    margin-top: 25px;
    align-items: start;
}

/* Analytics Filters Container */
.analytics-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
}

.analytics-filter-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-15);
    align-items: end;
}

.analytics-filter-three-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-15);
    align-items: end;
}

.analytics-filter-one-row {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-15);
    align-items: end;
}

/* Two-column row for Region & Company */
.analytics-filter-row--two-col {
    grid-template-columns: 1fr 2fr;
}

/* Year slider row - own row, full width */
.analytics-filter-row--slider {
    grid-template-columns: 1fr;
}

.analytics-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* Year slider fills its container */

.analytics-filter-group--large {
    grid-column: span 2;
}

.analytics-filter-group--full {
    grid-column: span 2;
}

.analytics-filter-group label, .analytics-filter-group-full label {
    font-weight: var(--weight-semibold);
    color: var(--black);
    font-size: var(--font-sm);
}

.analytics-select {
    padding: var(--space-10) 12px;
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    background: var(--white);
    font-size: var(--font-sm);
    font-family: inherit;
    color: var(--black);
    cursor: pointer;
    transition: var(--transition-fast);
    width: 100%;
}

    .analytics-select:hover {
        border-color: var(--lucror-blue);
    }

    .analytics-select:focus {
        outline: none;
        border-color: var(--lucror-blue);
        box-shadow: var(--shadow-focus);
    }

/* Companies Multi-Select */
.companies-multi-select {
    position: relative;
}

.companies-select-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-10) 12px;
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    background: var(--white);
    font-size: var(--font-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    min-height: 42px;
}

    .companies-select-container:hover {
        border-color: var(--lucror-blue);
    }

    .companies-select-container .placeholder {
        color: var(--medium-grey);
    }

    .companies-select-container .dropdown-arrow {
        width: 12px;
        height: 12px;
        opacity: 0.6;
        transition: transform 0.2s;
    }

.companies-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    box-shadow: var(--shadow-md);
    z-index: 100;
    max-height: 350px;
    display: flex;
    flex-direction: column;
}

.companies-search {
    padding: var(--space-10);
    border-bottom: 1px solid var(--border);
}

    .companies-search .filter-search-input {
        width: 100%;
        padding: var(--space-8) var(--space-10);
        border: 1px solid var(--border);
        border-radius: var(--border-5);
        font-size: var(--font-sm);
        font-family: inherit;
    }

        .companies-search .filter-search-input:focus {
            outline: none;
            border-color: var(--lucror-blue);
        }

.companies-list {
    flex: 1;
    overflow-y: auto;
    max-height: 220px;
    padding: var(--space-8) 0;
}

.company-option {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    cursor: pointer;
    transition: background 0.15s;
}

    .company-option:hover {
        background: var(--light-blue);
    }

    .company-option input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: var(--lucror-blue);
    }

    .company-option label {
        flex: 1;
        font-size: var(--font-sm);
        cursor: pointer;
        margin: 0;
        font-weight: normal;
    }

.companies-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-10) var(--space-12);
    border-top: 1px solid var(--border);
    background: var(--light-grey);
}

    .companies-footer .clear-link {
        font-size: var(--font-sm);
        color: var(--lucror-blue);
        text-decoration: none;
    }

        .companies-footer .clear-link:hover {
            text-decoration: underline;
        }

    .companies-footer .btn-sm {
        padding: var(--space-5) var(--space-12);
        font-size: var(--font-sm);
    }

/* Metrics Multi-Select (for filter checkboxes) */
.metrics-multi-select {
    position: relative;
}

.metrics-select-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-10) 12px;
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    background: var(--white);
    font-size: var(--font-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    min-height: 42px;
}

    .metrics-select-container:hover {
        border-color: var(--lucror-blue);
    }

    .metrics-select-container .dropdown-arrow {
        width: 12px;
        height: 12px;
        opacity: 0.6;
        transition: transform 0.2s;
    }

.metrics-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    box-shadow: var(--shadow-md);
    z-index: 100;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    min-width: 200px;
}

.metrics-list {
    flex: 1;
    overflow-y: auto;
    max-height: 220px;
    padding: var(--space-8) 0;
}

.metric-option {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    cursor: pointer;
    transition: background 0.15s;
}

    .metric-option:hover {
        background: var(--light-blue);
    }

    .metric-option input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: var(--lucror-blue);
    }

    .metric-option label {
        flex: 1;
        font-size: var(--font-sm);
        cursor: pointer;
        margin: 0;
        font-weight: normal;
        white-space: nowrap;
    }

.metrics-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-10) var(--space-12);
    border-top: 1px solid var(--border);
    background: var(--light-grey);
}

    .metrics-footer .select-all-link {
        font-size: var(--font-sm);
        color: var(--lucror-blue);
        text-decoration: none;
    }

        .metrics-footer .select-all-link:hover {
            text-decoration: underline;
        }

    .metrics-footer .btn-sm {
        padding: var(--space-5) var(--space-12);
        font-size: var(--font-sm);
    }

/* Selected Companies Tags */
.selected-companies-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-10);
}

.company-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-10);
    background: var(--light-blue);
    border: 1px solid var(--lucror-blue-light, #c5d9f0);
    border-radius: var(--border-5);
    font-size: var(--font-xs);
    color: var(--black);
}

    .company-tag button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--medium-grey);
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
        border-radius: 50%;
        transition: var(--transition-fast);
    }

        .company-tag button:hover {
            background: rgba(0, 0, 0, 0.1);
            color: var(--black);
        }


/* Year Range Slider - styled like select boxes */
.year-range-slider {
    position: relative;
    padding: 40px 20px 25px 20px;
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    background: var(--white);
    transition: var(--transition-fast);
}

    .year-range-slider:hover {
        border-color: var(--lucror-blue);
    }

.year-range-track {
    position: relative;
    height: 6px;
    background: var(--light-grey);
    border-radius: 3px;
    margin: var(--space-10) 0 10px 0;
}

.year-range-selected {
    position: absolute;
    height: 100%;
    background: var(--lucror-blue);
    border-radius: 3px;
    transition: var(--transition-fast);
}

.year-range-labels {
    position: absolute;
    top: 25px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
}

.year-label {
    position: absolute;
    font-size: var(--font-sm);
    color: var(--medium-grey);
    transform: translateX(-50%);
    user-select: none;
    transition: var(--transition-fast);
}

    .year-label.active {
        color: var(--lucror-blue);
        font-weight: var(--weight-semibold);
    }

.year-range-inputs {
    position: relative;
    height: 6px;
}

.year-range-input {
    position: absolute;
    width: 100%;
    height: 6px;
    top: 0;
    left: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    margin: 0;
}

    .year-range-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--lucror-blue);
        border: 3px solid var(--white);
        box-shadow: var(--shadow-medium);
        cursor: pointer;
        pointer-events: all;
        transition: var(--transition-fast);
    }

        .year-range-input::-webkit-slider-thumb:hover {
            transform: scale(1.2);
            box-shadow: var(--shadow-raised);
        }

    .year-range-input::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--lucror-blue);
        border: 3px solid var(--white);
        box-shadow: var(--shadow-medium);
        cursor: pointer;
        pointer-events: all;
        transition: var(--transition-fast);
    }

        .year-range-input::-moz-range-thumb:hover {
            transform: scale(1.2);
            box-shadow: var(--shadow-raised);
        }

/* Year range slider — horizontal scroll on small screens so the year ticks don't cram */
.year-range-scroll {
    width: 100%;
}

/* Analytics Action Buttons */
.analytics-actions {
    display: flex;
    gap: var(--space-10);
    justify-content: flex-end;
}

/* Analytics Results - Single table with section headers */
.analytics-results-table {
    width: calc(100% + 70px);
    border-collapse: collapse;
    margin-left: calc(-1 * var(--content-padding));
    margin-right: calc(-1 * var(--content-padding));
    margin-bottom: 30px;
}

    /* Section header rows - grey background like .info-table thead */
    .analytics-results-table .section-header-row td {
        background: var(--medium-grey);
        color: var(--white);
        font-weight: var(--weight-semibold);
        padding: var(--space-10) 35px;
        border-bottom: 1px solid var(--border);
    }

    /* Company Assessment - blue header */
    .analytics-results-table .section-header-blue td {
        background: var(--lucror-gradient);
        color: var(--white);
        padding: 18px var(--content-padding);
    }

    .analytics-results-table .section-header-lightgrey td {
        background: var(--light-grey);
        color: var(--black);
        padding: 18px var(--content-padding);
    }

    .analytics-results-table .section-header-darkgrey td {
        background: var(--medium-grey);
        color: var(--white);
        padding: 18px var(--content-padding);
    }

    /* Regular data rows */
    .analytics-results-table tbody td {
        padding: 18px var(--content-padding);
        border-bottom: 1px solid var(--border);
    }

    .analytics-results-table tbody tr:hover:not(.section-header-row) {
        background: var(--light-blue);
    }

/* Data Attribution Notice */
.data-attribution-notice {
    padding: var(--space-20) 25px;
    background: var(--light-grey);
    border-radius: var(--border-5);
    font-size: var(--font-sm);
    line-height: var(--leading-loose);
}

    .data-attribution-notice p {
        margin: 0 0 10px 0;
    }

        .data-attribution-notice p:last-of-type {
            margin-bottom: 5px;
        }

    .data-attribution-notice ol {
        margin: 0;
        padding-left: 20px;
    }

    .data-attribution-notice li {
        margin-bottom: var(--space-8);
    }

        .data-attribution-notice li:last-child {
            margin-bottom: 0;
        }

/* ========================================
   COVERAGE PAGE
======================================== */

/* Coverage Description under h1 */
.coverage-description {
    margin-top: var(--space-15);
    font-size: var(--font-sm);
    line-height: var(--leading-loose);
    color: var(--medium-grey);
    max-width: 800px;
}

/* Coverage Tabs and Search Bar - side by side */
.coverage-tabs-search-bar {
    padding: var(--space-15) var(--content-padding);
    border-top: 1px solid var(--border);
    background: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-30);
}

    .coverage-tabs-search-bar .company-tabs {
        padding: 0;
        border: none;
        background: transparent;
    }

/* Coverage Search and Filter Bar */
.coverage-search-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-15);
}

.coverage-search-bar {
    position: relative;
    width: 350px;
}

    .coverage-search-bar .search-box {
        width: 100%;
    }

.coverage-type-filter {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    white-space: nowrap;
}

    .coverage-type-filter label {
        font-weight: var(--weight-semibold);
        color: var(--black);
        font-size: var(--font-sm);
    }

.coverage-select {
    padding: var(--space-10) 14px;
    background: var(--light-grey);
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    font-size: var(--font-sm);
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition-fast);
    min-width: 160px;
}

    .coverage-select:focus {
        outline: none;
        border-color: var(--lucror-blue);
        background: var(--white);
    }

/* Coverage Columns Layout - 4 columns */
/* Coverage Industry Group - NO separate boxes, just grouped content */
.coverage-industry-group {
    margin-bottom: 30px;
}

.coverage-industry-header {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    margin-bottom: var(--space-15);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

    .coverage-industry-header h3 {
        font-size: var(--font-base);
        font-weight: var(--weight-semibold);
        margin: 0;
    }

.industry-icon-wrapper {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}

.industry-icon {
    width: 24px;
    height: 24px;
    color: var(--lucror-blue);
    flex-shrink: 0;
}

/* Coverage Company List */
.coverage-company-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .coverage-company-list li {
        margin-bottom: var(--space-8);
    }

    .coverage-company-list a {
        display: block;
        padding: 8px 12px;
        color: var(--black);
        text-decoration: none;
        border-radius: var(--border-5);
        transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease, border-color 0.2s ease;
        position: relative;
        left: -12px;
        padding-left: 12px;
    }

        .coverage-company-list a:hover {
            background: var(--light-grey);
            color: var(--lucror-blue);
            padding-left: 16px;
        }

/* List View - Pill/Badge Style */
.coverage-columns.list-view .coverage-company-list a {
    display: inline-block;
    padding: 3px 8px;
    background: var(--light-grey);
    border-radius: 15px;
    /*color: var(--lucror-blue);*/
    margin: 2px 0;
    border: 1px solid var(--white);
    position: static;
    left: auto;
}

    .coverage-columns.list-view .coverage-company-list a:hover {
        background: var(--lucror-blue);
        color: var(--white);
        border-color: var(--lucror-blue);
        padding-left: 8px;
    }

/* Filter Divider */
.filter-divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-10) 0;
}

/* End Analytics Page */

/* ========================================
   ENQUIRY DETAIL PAGE
======================================== */

/* Enquiry Detail Header */
.enquiry-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.enquiry-meta {
    display: flex;
    gap: var(--space-15);
    align-items: center;
    margin-bottom: var(--space-10);
    font-size: var(--font-sm);
}

.enquiry-number {
    color: var(--lucror-blue);
    font-weight: var(--weight-semibold);
}

.enquiry-date {
    color: var(--medium-grey);
}

.enquiry-subject {
    font-size: var(--font-1-5xl);
    font-weight: var(--weight-semibold);
    margin: 0;
    color: var(--black);
}

.enquiry-actions {
    display: flex;
    gap: var(--space-10);
}

/* Message Thread */
.message-item {
    padding: var(--space-30) 0;
    border-bottom: 1px solid var(--border);
}

    .message-item:last-of-type {
        border-bottom: none;
    }

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
}

.message-sender {
    color: var(--black);
    font-size: var(--font-base);
}

    .message-sender strong {
        font-weight: var(--weight-semibold);
    }

.message-date {
    color: var(--medium-grey);
    font-size: var(--font-sm);
}

.message-meta {
    color: var(--medium-grey);
    font-size: var(--font-sm);
    margin-bottom: var(--space-15);
    font-style: italic;
}

.message-body {
    margin-top: var(--space-15);
    line-height: var(--leading-loose);
}

.message-detail-box {
    background: var(--light-grey);
    padding: var(--space-15) 20px;
    border-radius: var(--border-5);
    margin-bottom: var(--space-15);
    font-size: var(--font-sm);
}

    .message-detail-box p {
        margin: 5px 0;
        color: var(--black);
    }

    .message-detail-box strong {
        font-weight: var(--weight-semibold);
        margin-right: 8px;
    }

.message-warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--border-5);
    padding: var(--space-12) 15px;
    margin: 15px 0;
    color: var(--warning-text);
    font-size: var(--font-sm);
    line-height: var(--leading-relaxed);
}

    .message-warning strong {
        font-weight: var(--weight-semibold);
    }

.message-body p {
    margin: var(--space-10) 0;
    color: var(--black);
}

.message-divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-20) 0;
}

.message-original {
    background: var(--light-blue);
    padding: var(--space-15) 20px;
    border-radius: var(--border-5);
    font-size: var(--font-sm);
}

    .message-original p {
        margin: 5px 0;
        color: var(--black);
    }

    .message-original strong {
        font-weight: var(--weight-semibold);
    }

/* Message Attachments */
.message-attachments {
    margin-top: var(--space-20);
    padding: var(--space-15);
    background: var(--light-grey);
    border-radius: var(--border-5);
}

.attachment-label {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-weight: var(--weight-semibold);
    color: var(--black);
    margin-bottom: var(--space-10);
    font-size: var(--font-sm);
}

    .attachment-label svg {
        color: var(--lucror-blue);
    }

.attachment-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: 8px 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    text-decoration: none;
    color: var(--lucror-blue);
    font-size: var(--font-sm);
    transition: var(--transition-fast);
}

    .attachment-item:hover {
        background: var(--light-blue);
        border-color: var(--lucror-blue);
    }

    .attachment-item svg {
        color: var(--medium-grey);
        flex-shrink: 0;
    }

.attachment-size {
    color: var(--medium-grey);
    font-size: var(--font-sm);
    margin-left: auto;
}

/* End Enquiry Detail Page */

/* ========================================
   ENQUIRY REPLY FORM
======================================== */

.reply-form-title {
    font-size: var(--font-lg);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-20);
    color: var(--black);
}

.reply-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
}

    .reply-form .form-actions {
        display: flex;
        justify-content: flex-end;
    }

    .reply-form button[type="submit"] {
        width: auto;
    }

/* File List - Selected files display */
.file-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-top: var(--space-10);
}

    .file-list:empty {
        display: none;
    }

.file-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: 8px 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    font-size: var(--font-sm);
}

    .file-item svg {
        color: var(--medium-grey);
        flex-shrink: 0;
    }

    .file-item .file-name {
        color: var(--black);
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .file-item .file-size {
        color: var(--medium-grey);
    }

    .file-item .file-remove {
        background: none;
        border: none;
        color: var(--medium-grey);
        font-size: 18px;
        cursor: pointer;
        padding: 0 4px;
        line-height: 1;
        transition: var(--transition-fast);
    }

        .file-item .file-remove:hover {
            color: var(--status-negative-text);
        }

/* Enquiry Thread Container */
.enquiry-thread {
    margin-top: var(--space-10);
}

/* ========================================
   FINANCIAL MODELS TABLE - Filter Row
======================================== */

/* Filter row in thead */
thead tr.filter-row {
    background: var(--white);
}

    thead tr.filter-row th {
        padding: var(--space-10) 35px;
        border-bottom: 1px solid var(--border);
    }

/* Table filter selects in header row */
.table-filter-select {
    width: 100%;
    padding: 8px 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    font-size: var(--font-sm);
    color: var(--black);
    cursor: pointer;
    font-family: inherit;
}

    .table-filter-select:hover {
        border-color: var(--lucror-blue);
    }

    .table-filter-select:focus {
        outline: none;
        border-color: var(--lucror-blue);
    }

/* Icon link for download buttons */
.icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: var(--border-5);
    transition: var(--transition-fast);
}

    .icon-link:hover {
        background: var(--light-grey);
    }

/* Status badge negative */
.status-negative {
    background: var(--status-negative-bg);
    color: var(--status-negative-text);
}

/* ========================================
   CHART PLACEHOLDERS - For Model Portfolio
======================================== */

/* Core Holdings Table */
.core-holdings-table {
    width: calc(100% + 70px);
    margin-left: calc(-1 * var(--content-padding));
    margin-right: calc(-1 * var(--content-padding));
    border-collapse: collapse;
    font-size: var(--font-sm);
}

    .core-holdings-table thead {
        background: var(--lucror-gradient);
        color: white;
    }

    .core-holdings-table th {
        padding: var(--space-12) 15px;
        text-align: left;
        font-weight: var(--weight-semibold);
        font-size: var(--font-sm);
        white-space: nowrap;
    }

        /* First and last header cells - extra padding for alignment */
        .core-holdings-table th:first-child {
            padding-left: var(--content-padding);
        }

        .core-holdings-table th:last-child {
            padding-right: var(--content-padding);
        }

    .core-holdings-table tbody td {
        padding: var(--space-12) 15px;
        border-bottom: 1px solid var(--border);
    }

        /* First and last body cells - extra padding for alignment */
        .core-holdings-table tbody td:first-child {
            padding-left: var(--content-padding);
        }

        .core-holdings-table tbody td:last-child {
            padding-right: var(--content-padding);
        }

    .core-holdings-table tbody tr:hover {
        background: var(--light-grey);
    }

    /* Remove border from last row */
    .core-holdings-table tbody tr:last-child td {
        border-bottom: none;
    }

/* ========================================
   CHART PLACEHOLDERS & LIGHTBOX
======================================== */

/* ============================================================================
   LIGHTBOX SYSTEM (Generic - works on any page)
   ============================================================================ */

/* Wrapper for images that should open in lightbox */
.lightbox-trigger-wrapper {
    position: relative;
    width: 100%;
    display: block;
}

.chart-image {
    width: 100%;
    display: block;
}

/* Images that will open in lightbox when clicked */
/* Images that will open in lightbox when clicked */
.lightbox-image {
    width: 100%;
    display: block;
    border-radius: var(--border-5);
    cursor: pointer; /* Clickable images */
}

/* Expand button that appears on hover */
.lightbox-trigger-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: var(--white-translucent);
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: var(--transition-fast);
    z-index: 10;
}

.lightbox-trigger-wrapper:hover .lightbox-trigger-button {
    opacity: 1;
}

.lightbox-trigger-button:hover {
    background: var(--white);
    border-color: var(--lucror-blue);
    box-shadow: var(--shadow-medium);
}

.lightbox-trigger-button svg {
    color: var(--black);
}

.lightbox-trigger-button:hover svg {
    color: var(--lucror-blue);
}

/* Chart Lightbox */
.chart-lightbox-content {
    max-width: 1100px;
    max-height: 90vh;
    padding: var(--space-20);
    overflow: auto;
}

    .chart-lightbox-content img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: var(--border-5);
    }

    .chart-lightbox-content .lightbox-close {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 36px;
        height: 36px;
        background: var(--white-translucent);
        border: 1px solid var(--border);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-24); /* h3, icons */
        cursor: pointer;
        color: var(--black);
        transition: var(--transition-fast);
        box-shadow: var(--shadow-medium);
    }

        .chart-lightbox-content .lightbox-close:hover {
            background: var(--white);
            border-color: var(--lucror-blue);
            color: var(--lucror-blue);
            box-shadow: var(--shadow-raised);
        }


/* ========================================
   PORTFOLIO REGION MAP & ACTIONS - For Model Portfolio
======================================== */

.portfolio-region-map {
    width: 180px;
    height: 120px;
    background: var(--light-grey);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-20);
    border: 2px solid var(--border);
}

.region-map-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.portfolio-actions {
    display: flex;
    gap: var(--space-8);
    align-items: center;
}

    .portfolio-actions .btn {
        display: flex;
        align-items: center;
        gap: var(--space-8);
    }

        .portfolio-actions .btn svg {
            width: var(--icon-sm);
            height: var(--icon-sm);
        }

.portfolio-date-select {
    display: flex;
    align-items: center;
    gap: var(--space-10);
}

    .portfolio-date-select select.form-select {
        padding: var(--space-10) 16px;
    }

    .portfolio-date-select label {
        font-weight: var(--weight-semibold);
        color: var(--black);
        font-size: var(--font-sm);
        white-space: nowrap;
    }

/* Portfolio Description Grid */
.portfolio-description-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-30);
    padding: var(--space-30) var(--content-padding);
    border-top: 1px solid var(--border);
}

.portfolio-description {
    line-height: var(--leading-loose);
    color: var(--black);
}

/* Portfolio Performance Stats */
.portfolio-performance-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-15);
}

.source {
    text-align: center;
    color: var(--medium-grey);
    font-size: 0.85rem;
    margin-top: var(--space-10);
}

/* Hero Performance Stat - Green box style */
.perf-stat-hero {
    background: linear-gradient(11deg, rgba(56, 140, 11, 1) 0%, rgba(101, 176, 48, 1) 98%);
    border: 1px solid #388C0B;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
}

.perf-stat-value-hero {
    font-size: var(--font-hero);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-8);
    color: var(--white);
}

.perf-stat-label-hero {
    font-size: var(--font-base);
    color: var(--white);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Small stats grid */
.perf-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12);
}

.perf-stat-small {
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    padding: var(--space-15) 10px;
    text-align: center;
}

.perf-stat-value-small {
    font-size: var(--font-xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    margin-bottom: 5px;
    color: #65B030;
}

    .perf-stat-value-small.negative {
        color: var(--status-negative-text);
    }

.perf-stat-label-small {
    color: var(--medium-grey);
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Legacy styles kept for compatibility */
.perf-stat-large {
    background: var(--status-positive-bg);
    border: 1px solid var(--status-positive-border);
    border-radius: var(--border-5);
    padding: 25px;
    text-align: center;
}

.perf-stat-value {
    font-size: var(--font-3xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-8);
}

    .perf-stat-value.positive {
        color: var(--status-positive-text);
    }

.perf-stat-label {
    color: var(--status-positive-text);
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Compact Investment Objective - Legacy */
.portfolio-objective-compact {
    background: var(--light-blue);
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    padding: var(--space-15) 18px;
}

    .portfolio-objective-compact .objective-label {
        font-weight: var(--weight-semibold);
        color: var(--lucror-blue);
        margin-bottom: var(--space-8);
        font-size: var(--font-sm);
    }

    .portfolio-objective-compact p {
        margin: 0;
        line-height: var(--leading-relaxed);
        color: var(--black);
        font-size: var(--font-sm);
    }

/* Investment Objective - Full Width Version */
.portfolio-objective-box-full {
    background: var(--light-blue);
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    padding: 25px 30px;
    text-align: center;
}

    .portfolio-objective-box-full .objective-label {
        font-weight: var(--weight-semibold);
        color: var(--lucror-blue);
        margin-bottom: var(--space-12);
        font-size: var(--font-base);
    }

    .portfolio-objective-box-full p {
        margin: 0;
        line-height: var(--leading-loose);
        color: var(--black);
        font-size: var(--font-base);
        max-width: 900px;
        margin: 0 auto;
    }

.portfolio-objective-box {
    background: var(--light-blue);
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    padding: var(--space-20);
}

.objective-label {
    font-weight: var(--weight-semibold);
    color: var(--lucror-blue);
    margin-bottom: var(--space-12);
    font-size: var(--font-sm);
}

.portfolio-objective-box p {
    margin: 0;
    line-height: var(--leading-loose);
    color: var(--black);
    font-size: var(--font-sm);
}




/* ============================================================================
   RESPONSIVE STYLING
   ============================================================================ */

/* ============================================================================
   MOBILE NAVIGATION COMPONENTS
   Always rendered in DOM, shown/hidden via CSS + JS
   ============================================================================ */

/* Overlay (darkens page when nav is open) */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .mobile-nav-overlay.active {
        opacity: 1;
        visibility: visible;
    }

/* Slide-out nav panel */
.mobile-nav-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background: var(--white);
    z-index: 999;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    visibility: hidden;
}

    .mobile-nav-panel.active {
        transform: translateX(0);
        visibility: visible;
    }

/* Panel header: close button row */
.mobile-nav-header {
    padding: var(--space-15) var(--space-20);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.mobile-nav-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-8);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mobile-nav-close:hover {
        color: var(--lucror-blue);
    }

/* Scrollable nav content */
.mobile-nav-content {
    flex: 1;
    overflow-y: auto;
}

/* Top-level nav items */
.mobile-nav-item {
    margin: 0 15px 0 15px;
    border-radius: var(--border-10);
}

.mobile-nav-link {
    width: 100%;
    padding: var(--space-15);
    background: none;
    border: none;
    text-align: left;
    font-size: var(--font-base);
    font-weight: var(--weight-semibold);
    color: var(--black);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s ease;
    border-radius: var(--border-5);
}

    .mobile-nav-link:hover,
    .mobile-nav-link:active {
        color: var(--link-blue);
        background: #f8f8f8;
    }

/* Icon + label group inside the link (kept together while chevron sits right) */
.mobile-nav-link-label {
    font-family: Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    display: flex;
    align-items: center;
    gap: var(--space-12);
    font-weight: 500;
}

.mobile-nav-link-icon {
    width: var(--icon-md);
    height: var(--icon-md);
    flex-shrink: 0;
}

/* Arrow rotates when submenu opens */
.mobile-nav-arrow {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.mobile-nav-item.active .mobile-nav-arrow {
    transform: rotate(180deg);
}

/* Accordion submenu */
.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: all 0.35s ease;
}


.mobile-nav-item.active .mobile-submenu {
    max-height: 2000px;
}

.mobile-submenu a {
    display: block;
    padding: var(--space-12) 0 var(--space-12) var(--space-15);
    color: var(--black);
    text-decoration: none;
    font-size: var(--font-sm-alt);
    transition: background 0.2s ease;
}

    .mobile-submenu a:hover {
        background: var(--white);
    }

/* Grouped submenu sections (e.g. Research has sub-groups) */
.mobile-submenu-section {
    padding: var(--space-15) 0 var(--space-15) var(--space-15);
}

    .mobile-submenu-section:last-child {
        border-bottom: none;
    }

    .mobile-submenu-section h4, .mobile-filter-group h4 {
        font-size: var(--font-base);
        font-weight: var(--weight-semibold);
        margin-bottom: var(--space-10);
        letter-spacing: 0.5px;
        position: relative;
        padding-left: 10px;
    }

        .mobile-submenu-section h4::after, .mobile-filter-group h4::after {
            background: var(--link-blue);
            content: "";
            width: 3px;
            height: 15px;
            display: block;
            position: absolute;
            left: 0;
            top: 1px;
        }

    .mobile-submenu-section a {
        padding: var(--space-8) 0;
    }

/* Panel footer: search + icon shortcuts */
.mobile-nav-footer {
    border-top: 1px solid var(--border);
    padding: var(--space-20);
    background: var(--light-grey);
}

.mobile-nav-search {
    position: relative;
    margin-bottom: var(--space-20);
}

.mobile-search-input {
    width: 100%;
    padding: var(--space-12) var(--space-12) var(--space-12) 40px;
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    font-size: var(--font-sm-alt);
}

.mobile-nav-search svg {
    position: absolute;
    left: var(--space-12);
    top: 50%;
    transform: translateY(-50%);
    color: var(--medium-grey);
}

/* Icon shortcuts grid (enquiries, account, etc.) */
.mobile-nav-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-10);
}

.mobile-nav-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-12);
    text-decoration: none;
    color: var(--black);
    border-radius: var(--border-5);
    transition: background 0.2s ease;
    position: relative;
}

    .mobile-nav-icon:hover {
        background: var(--white);
    }

    .mobile-nav-icon img {
        width: var(--icon-md);
        height: var(--icon-md);
    }

    .mobile-nav-icon span {
        font-size: var(--font-11);
        font-weight: var(--weight-semibold);
    }

.mobile-icon-badge {
    position: absolute;
    top: 8px;
    right: 14px;
    background: red;
    color: var(--white);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Hamburger Button */
.hamburger-btn {
    display: none;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
}

    .hamburger-btn:hover {
        background: var(--light-grey);
    }

    .hamburger-btn span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--black);
        transition: all 0.3s ease;
    }

    .hamburger-btn.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .hamburger-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }


/* ============================================================================
   RESPONSIVE - CONTENT & FILTERS
   ============================================================================ */

/* Filter Slide-out Panel (Mobile) */
/* Mobile Filter Button */
.mobile-filter-btn {
    display: none;
    position: relative;
    background: var(--lucror-blue);
    color: var(--white);
    border: none;
    border-radius: 50px;
    padding: var(--space-10) var(--space-15);
    font-weight: var(--weight-semibold);
    font-size: var(--font-sm-alt);
    box-shadow: var(--shadow-medium);
    cursor: pointer;
    gap: var(--space-8);
    align-items: center;
    transition: all 0.3s ease;
    white-space: nowrap;
}

    .mobile-filter-btn:hover {
        background: var(--lucror-blue-dark);
        box-shadow: var(--shadow-raised);
    }

    .mobile-filter-btn svg {
        width: 18px;
        height: 18px;
    }

.mobile-filter-badge {
    background: var(--white);
    color: var(--lucror-blue);
    font-size: 12px;
    font-weight: var(--weight-bold);
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    margin-left: var(--space-5);
}

.mobile-filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 997;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .mobile-filter-overlay.active {
        opacity: 1;
        visibility: visible;
    }

.mobile-filter-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background: var(--white);
    z-index: 998;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease, visibility 0.3s ease;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    visibility: hidden;
}

    .mobile-filter-panel.active {
        transform: translateX(0);
        visibility: visible;
    }

.mobile-filter-header {
    padding: var(--space-20);
    border-bottom: 2px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--light-grey);
}

    .mobile-filter-header h3 {
        font-size: var(--font-lg);
        font-weight: var(--weight-semibold);
        color: var(--black);
    }

.mobile-filter-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-8);
    color: var(--black);
}

.mobile-filter-content {
    flex: 1;
    padding: var(--space-20);
    overflow-y: auto;
}

.mobile-filter-group {
    margin-bottom: var(--space-20);
}

    .mobile-filter-group h4 {
        font-size: var(--font-base);
        font-weight: var(--weight-semibold);
        color: var(--black);
        margin-bottom: var(--space-12);
    }

.mobile-filter-footer {
    padding: var(--space-20);
    border-top: 2px solid var(--border);
    background: var(--light-grey);
    display: flex;
    gap: var(--space-10);
}

    .mobile-filter-footer button {
        flex: 1;
        padding: var(--space-12);
        border-radius: var(--border-5);
        font-weight: var(--weight-semibold);
        cursor: pointer;
        transition: all 0.2s ease;
    }

.mobile-filter-apply {
    background: var(--lucror-blue);
    color: var(--white);
    border: none;
}

    .mobile-filter-apply:hover {
        background: var(--lucror-blue-dark);
    }

.mobile-filter-clear {
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--border);
}

    .mobile-filter-clear:hover {
        background: var(--light-grey);
    }

/* Selected Filters Count (Mobile) */
.selected-filters-mobile {
    display: none;
    padding: var(--space-12) var(--space-15);
    background: var(--light-blue);
    border-radius: var(--border-5);
    margin-bottom: var(--space-15);
    font-size: var(--font-sm-alt);
    color: var(--black);
}

    .selected-filters-mobile strong {
        color: var(--lucror-blue);
        font-weight: var(--weight-semibold);
    }

/* Table Horizontal Scroll with Arrow Indicator */
/* Table Horizontal Scroll with Arrow Indicator */
.table-scroll-wrapper {
    position: relative;
}

/* Model Portfolio: the full-width report tables (Core Holdings, Model Portfolio
   Holdings, Investment Performance) sit in a plain .table-scroll-wrapper with no
   .section-body, so their .ckeditor-table kept the edge-to-edge bleed width
   (calc(100% + 70px)) and negative margins. With many columns that pushes the
   table past its card and overflows the content-section — both above the 1024px
   breakpoint (where the shared overflow-x:auto rule hasn't engaged yet) and on
   mobile (where the wrapper's own bleed margins add to it). Give the wrapper the
   horizontal scroll at every width and neutralise the table bleed so the table
   scrolls inside the card instead of overflowing it. Mirrors the existing
   .section-body .ckeditor-table reset. Id-scoped so other pages are untouched. */
#modelPortfolioApp .table-scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

    #modelPortfolioApp .table-scroll-wrapper > .ckeditor-table {
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
    }

/* Mobile "Swipe to explore" hint — anchored to the table container, fades on first touch/scroll */
.swipe-hint {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 6px;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    width: fit-content;
    transition: opacity 0.4s ease;
}

    .swipe-hint.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .swipe-hint svg {
        flex-shrink: 0;
        animation: swipeHintArrow 1s ease-in-out infinite alternate;
    }

@keyframes swipeHintArrow {
    from {
        transform: translateX(-3px);
    }

    to {
        transform: translateX(3px);
    }
}

/* Trending Reports - Mobile Single Card View */
.trending-slider-mobile {
    display: none;
}

.trending-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-15);
}

.trending-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.3s ease;
}

    .trending-dot.active {
        width: 24px;
        border-radius: 4px;
        background: var(--lucror-blue);
    }

.trending-position {
    display: none;
    text-align: center;
    margin-top: var(--space-10);
    font-size: var(--font-sm);
    color: var(--medium-grey);
}


/* ========================================
   CALENDAR PAGE
   ========================================
   Styles for the Company Calendar component.
   Forward this section to the developer.
   ======================================== */

/* Region Tabs - Centered */
.calendar-tabs {
    display: flex;
    gap: var(--space-8);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Section header needs relative positioning for centered tabs */
.section-header:has(.calendar-tabs) {
    position: relative;
    border-bottom: none;
    padding-bottom: var(--space-15);
    margin-bottom: 0;
}

.calendar-tab {
    padding: 8px 20px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    color: var(--medium-grey);
    cursor: pointer;
    transition: var(--transition-fast);
}

    .calendar-tab:hover {
        border-color: var(--lucror-blue);
        color: var(--lucror-blue);
    }

    .calendar-tab.active {
        background: var(--lucror-blue);
        border-color: var(--lucror-blue);
        color: var(--white);
    }

/* Calendar Controls Bar - Edge to Edge */
.calendar-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-15) var(--content-padding);
    margin-left: calc(-1 * var(--content-padding));
    margin-right: calc(-1 * var(--content-padding));
    background: var(--table-header);
    color: var(--white);
}

.calendar-controls-left {
    display: flex;
    align-items: center;
    gap: var(--space-15);
}

.calendar-controls-center {
    flex: 1;
    text-align: center;
}

.calendar-controls-right {
    display: flex;
    align-items: center;
}

/* Calendar Navigation Arrows */
.calendar-nav {
    display: flex;
    gap: 4px;
}

.calendar-nav-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-5);
    color: var(--white);
    cursor: pointer;
    transition: var(--transition-fast);
}

    .calendar-nav-btn:hover {
        background: rgba(255, 255, 255, 0.25);
    }

    .calendar-nav-btn svg {
        stroke: currentColor;
    }

/* Today Button */
.calendar-today-btn {
    background: var(--white);
    color: var(--lucror-blue);
    border-color: var(--white);
    padding: 6px 16px;
}

    .calendar-today-btn:hover {
        background: var(--light-grey);
        border-color: var(--light-grey);
    }

/* Calendar Title (Month/Year) */
.calendar-title {
    font-size: var(--font-lg);
    font-weight: var(--weight-semibold);
    color: var(--white);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* View Toggle (Month/Week/Day) */
.calendar-view-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--border-5);
    overflow: hidden;
}

.view-toggle-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: var(--transition-fast);
}

    .view-toggle-btn:hover {
        color: var(--white);
        background: rgba(255, 255, 255, 0.1);
    }

    .view-toggle-btn.active {
        background: var(--white);
        color: var(--lucror-blue);
    }

/* Calendar Grid Container - Edge to Edge */
.calendar-grid {
    margin-left: calc(-1 * var(--content-padding));
    margin-right: calc(-1 * var(--content-padding));
}

/* Calendar Views - Show/Hide */
.calendar-view {
    display: none;
}

    .calendar-view.active {
        display: block;
    }

/* Week View - Taller cells */
.calendar-view--week .calendar-days--week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-view--week .calendar-day {
    min-height: 150px;
}

/* Day View */
.calendar-day-header {
    padding: var(--space-12) var(--content-padding);
    background: var(--light-grey);
    border-bottom: 1px solid var(--border);
    text-align: center;
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
}

.calendar-day-events {
    padding: var(--space-15) var(--content-padding);
    min-height: 200px;
}

    .calendar-day-events .calendar-event {
        margin-bottom: var(--space-10);
    }

    .calendar-day-events .event-link {
        padding: var(--space-10) var(--space-15);
    }

/* Weekday Headers */
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--light-grey);
    border-bottom: 1px solid var(--border);
}

.calendar-weekday {
    padding: var(--space-12) var(--space-10);
    text-align: center;
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    color: var(--black);
    text-transform: uppercase;
}

/* Calendar Days Grid */
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.day-number span {
    display: none;
    text-transform: uppercase;
}

/* Individual Day Cell */
.calendar-day {
    min-height: 100px;
    padding: var(--space-8);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--white);
    transition: var(--transition-fast);
}

    .calendar-day:nth-child(7n) {
        border-right: none;
    }

    .calendar-day:hover {
        background: var(--light-blue);
    }



/* Day Number */
.day-number {
    display: block;
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    color: var(--black);
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border-radius: 200rem;
}

/* Other Month Days (greyed out) */
.calendar-day.other-month {
    background: var(--light-grey);
}

    .calendar-day.other-month .day-number {
        color: var(--medium-grey);
    }

    .calendar-day.other-month:hover {
        background: var(--border);
    }

/* Today Highlight */

.calendar-day.today .day-number {
    background: var(--lucror-blue);
    color: var(--white);
}

/* Calendar Events */
.calendar-event {
    margin-bottom: var(--space-8);
}

    .calendar-event:last-child {
        margin-bottom: 0;
    }

.event-link {
    display: block;
    padding: 6px 8px;
    background: var(--white);
    border-left: 3px solid var(--lucror-blue);
    text-decoration: none;
    transition: var(--transition-fast);
    border-radius: var(--border-5);
    box-shadow: var(--shadow-medium);
}

    .event-link:hover {
        background: var(--light-blue);
    }

.calendar-day:hover .event-link {
    background: var(--white);
}

.event-company {
    display: block;
    font-size: var(--font-xs);
    font-weight: var(--weight-semibold);
    color: var(--lucror-blue);
    margin-bottom: 2px;
    line-height: 1.3;
}

.event-link:hover .event-company {
    color: var(--link-blue-dark);
}

.event-description {
    display: block;
    font-size: var(--font-xs);
    color: var(--medium-grey);
    line-height: 1.3;
}

/* Today's events styling */
.calendar-day.today .event-link {
    background: rgba(255, 255, 255, 0.2);
    border-left-color: var(--white);
}

    .calendar-day.today .event-link:hover {
        background: rgba(255, 255, 255, 0.3);
    }

/* ========================================
   CALENDAR EVENT LIGHTBOX
   ======================================== */

.calendar-event-lightbox {
    position: relative;
    max-width: 450px;
    padding: var(--space-30);
}

.event-lightbox-date {
    font-size: var(--font-sm);
    color: var(--medium-grey);
    margin-bottom: var(--space-10);
}

.calendar-event-lightbox h3 {
    font-size: var(--font-lg);
    margin-bottom: var(--space-8);
}

.event-lightbox-description {
    color: var(--black);
    margin-bottom: var(--space-20);
    line-height: var(--leading-relaxed);
}

.event-outlook-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
}

    .event-outlook-btn img {
        width: 18px;
        height: 18px;
    }

/* ========================================
   UNSUBSCRIBED/RESTRICTED CONTENT LIGHTBOX
   ======================================== */

.unsubscribed-lightbox {
    position: relative;
    max-width: 450px;
    padding: var(--space-40);
    text-align: center;
}

.unsubscribed-icon {
    margin-bottom: var(--space-20);
}

    .unsubscribed-icon img {
        width: 48px;
        height: 48px;
        opacity: 0.7;
    }

.unsubscribed-lightbox h3 {
    font-size: var(--font-xl);
    color: var(--black);
    margin-bottom: var(--space-15);
}

.unsubscribed-message {
    color: var(--dark-grey);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-25);
}

    .unsubscribed-message a {
        color: var(--primary);
        text-decoration: none;
    }

        .unsubscribed-message a:hover {
            text-decoration: underline;
        }

.unsubscribed-lightbox .btn {
    min-width: 120px;
    display: inline;
}

/* Locked item indicator in tables */
.locked-item {
    cursor: pointer;
    opacity: 0.7;
}

    .locked-item:hover {
        opacity: 0.85;
    }

.lock-icon {
    width: 20px;
    height: 20px;
    /*    margin-left: var(--space-5);*/
    vertical-align: middle;
    /*    opacity: 0.6;*/
}

/* END CALENDAR PAGE */

/* ========================================
   METHODOLOGY PAGE
   ========================================
   Styles for the Methodology documentation page.
   Forward this section to the developer.
   ======================================== */

/* Methodology Header */
.methodology-header {
    border-bottom: none;
    padding-bottom: var(--space-15);
    margin-bottom: 0;
}

/* Methodology Tabs - Centered */
.methodology-tabs {
    display: flex;
    gap: var(--space-8);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.methodology-tab {
    padding: 8px 20px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    color: var(--medium-grey);
    cursor: pointer;
    transition: var(--transition-fast);
}

    .methodology-tab:hover {
        border-color: var(--lucror-blue);
        color: var(--lucror-blue);
    }

    .methodology-tab.active {
        background: var(--lucror-blue);
        border-color: var(--lucror-blue);
        color: var(--white);
    }

/* Methodology Content */
.methodology-content {
    padding: var(--space-30) 0;
}

/* Methodology Panels - Show/Hide */
.methodology-panel {
    display: none;
}

    .methodology-panel.active {
        display: block;
    }

/* Methodology Intro */
.methodology-intro {
    margin-bottom: var(--space-30);
    padding-bottom: var(--space-20);
    border-bottom: 1px solid var(--border);
}

    .methodology-intro h3 {
        font-size: var(--font-xl);
        font-weight: var(--weight-semibold);
        color: var(--black);
        margin-bottom: var(--space-8);
    }

.methodology-subtitle {
    font-size: var(--font-sm);
    color: var(--medium-grey);
}

/* Methodology Sections */
.methodology-section {
    margin-bottom: var(--space-30);
    padding-bottom: var(--space-30);
    border-bottom: 1px solid var(--border);
}

    .methodology-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

/* No borders when inside grid */
.grid-3col .methodology-section {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ESG grid boxes with blue background */
.grid-3col .methodology-section {
    background: var(--lucror-blue-light);
    padding: var(--space-20);
    border-radius: var(--border-5);
}

.grid-3col .methodology-section {
    margin-bottom: var(--space-30);
}

/* Status badge margin when used as heading */
.methodology-section h3 .status-badge {
    margin-bottom: var(--space-10);
    display: inline-block;
}

.methodology-section p {
    line-height: var(--leading-relaxed);
    color: var(--black);
    margin-bottom: var(--space-15);
}

    .methodology-section p:last-child {
        margin-bottom: 0;
    }

.methodology-section ul {
    margin: var(--space-15) 0;
    padding-left: var(--space-20);
}

.methodology-section li {
    line-height: var(--leading-relaxed);
    color: var(--black);
    margin-bottom: var(--space-10);
    position: relative;
}

    .methodology-section li::marker {
        color: var(--lucror-blue);
    }

/* Methodology Note Box */
.methodology-note {
    background: var(--light-blue);
    border-left: 3px solid var(--lucror-blue);
    padding: var(--space-15);
    margin-top: var(--space-15);
    border-radius: 0 var(--border-5) var(--border-5) 0;
    font-size: var(--font-sm);
    line-height: var(--leading-relaxed);
    color: var(--black);
}

.methodology-note, .simple-note {
    background: var(--light-blue);
    border-left: 3px solid var(--lucror-blue);
    padding: var(--space-15);
    margin-top: var(--space-15);
    border-radius: 0 var(--border-5) var(--border-5) 0;
    font-size: var(--font-sm);
    line-height: var(--leading-relaxed);
    color: var(--black);
}

.simple-note {
    margin: var(--content-padding) 0;
}

/* Methodology Table (for LARA, ESG scales) */
.methodology-table {
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    overflow: hidden;
    margin-top: var(--space-20);
}

.methodology-table-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    border-bottom: 1px solid var(--border);
}

    .methodology-table-row:last-child {
        border-bottom: none;
    }

.methodology-table-label {
    padding: var(--space-15);
    background: var(--light-grey);
    font-weight: var(--weight-semibold);
    color: var(--lucror-blue);
    display: flex;
    align-items: center;
    gap: var(--space-10);
    border-right: 1px solid var(--border);
}

.methodology-table-content {
    padding: var(--space-15);
    line-height: var(--leading-relaxed);
    color: var(--black);
}

/* LARA Risk Icons */
.lara-icon {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}

/* ESG Icons */
.esg-icon {
    width: 24px;
    height: 24px;
    margin-right: var(--space-8);
    vertical-align: middle;
}

/* END METHODOLOGY PAGE */

/* ========================================
   PRIVATE CREDIT PAGE
   ========================================
   Styles for the Private Credit landing page.
   Forward this section to the developer.
   ======================================== */

/* Landing Hero - Two Column Layout */
.landing-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-40);
    align-items: start;
    padding: var(--space-30) 0;
}

/* Left: Content */
.landing-content {
    max-width: 720px;
}

.page-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    margin-bottom: var(--space-20);
}

    .page-title-row h1 {
        font-size: var(--font-32);
        font-weight: var(--weight-semibold);
        margin: 0;
    }

/* AI Badge */
.badge-ai {
    background: var(--lucror-blue);
    color: var(--white);
    font-size: var(--font-xs);
    font-weight: var(--weight-semibold);
    padding: 2px 8px;
    border-radius: var(--border-5);
    text-transform: uppercase;
    vertical-align: super;
}

/* Landing Description */
.landing-description {
    line-height: var(--leading-relaxed);
    color: var(--black);
    margin-bottom: var(--space-15);
}

    .landing-description:last-of-type {
        margin-bottom: var(--space-20);
    }

    .landing-description a {
        color: var(--link-blue);
    }

        .landing-description a:hover {
            color: var(--link-blue-dark);
        }

/* CTA */
.landing-cta {
    display: flex;
    gap: var(--space-15);
    margin-top: var(--space-30);
}

    .landing-cta .btn {
        font-weight: bold;
        font-size: var(--font-18);
        padding: 15px 45px;
    }

/* Benefits List with Checkmarks */
.benefits-list {
    list-style: none;
    padding: 0;
    margin: var(--space-20) 0;
}

    .benefits-list li {
        position: relative;
        padding-left: 28px;
        margin-bottom: var(--space-12);
        line-height: var(--leading-relaxed);
        color: var(--black);
    }

        .benefits-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 4px;
            width: 18px;
            height: 18px;
            background: var(--lucror-blue);
            border-radius: 50%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
            background-size: 12px;
            background-position: center;
            background-repeat: no-repeat;
        }

/* Contact Lightbox */
.contact-lightbox-content {
    max-width: 500px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-15);
}

    .contact-form .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-15);
    }

    .contact-form .form-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-8);
    }

    .contact-form label {
        font-size: var(--font-sm);
        font-weight: var(--weight-medium);
        color: var(--black);
    }

    .contact-form .form-input {
        padding: var(--space-10) var(--space-12);
        border: 1px solid var(--border);
        border-radius: var(--border-5);
        font-size: var(--font-sm);
        transition: var(--transition-fast);
    }

        .contact-form .form-input:focus {
            outline: none;
            border-color: var(--lucror-blue);
        }

    .contact-form textarea.form-input {
        resize: vertical;
        min-height: 80px;
    }

    .contact-form .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-10);
        margin-top: var(--space-10);
        padding-top: var(--space-15);
        border-top: 1px solid var(--border);
    }

/* Full width button with centered text */
.btn-full {
    width: 100%;
    text-align: center;
    justify-content: center;
}

/* Right: Video Thumbnail */
.landing-media {
    display: flex;
    justify-content: center;
}

.video-thumbnail {
    position: relative;
    width: 100%;
    border-radius: var(--border-5);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-medium);
    transition: var(--transition-fast);
}

    .video-thumbnail:hover {
        box-shadow: var(--shadow-raised);
        transform: translateY(-2px);
    }

.video-thumb-img {
    width: 103%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    position: relative;
    left: -3px;
    border-radius: var(--border-10);
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    cursor: pointer;
    transition: var(--transition-fast);
    border: 15px solid rgba(250,250,250,0.4);
    border-radius: 200rem;
    box-shadow: var(--shadow-medium);
}

    .video-play-btn:hover {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: var(--shadow-raised);
    }

    .video-play-btn svg circle {
        transition: var(--transition-fast);
    }

.video-thumbnail:hover .video-play-btn svg circle {
    fill: rgba(42, 69, 119, 1);
}

/* Video Lightbox */
.video-lightbox-content {
    max-width: 900px;
    width: 90%;
    padding: 0;
    background: var(--black);
    border-radius: var(--border-5);
    overflow: hidden;
}

    .video-lightbox-content .lightbox-close {
        position: absolute;
        top: -40px;
        right: 0;
        color: var(--white);
        font-size: var(--font-xl);
        z-index: 10;
    }

.video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

    .video-embed iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

/* END PRIVATE CREDIT PAGE */

/* ========================================
   REPORT PAGE
   ========================================
   Minimal styles for Report pages.
   Uses existing classes: .grid-main-sidebar, .content-section, 
   .section-header, .info-grid, .info-table, etc.
   ======================================== */

/* Company link in report header */
.company-link {
    font-size: var(--font-lg);
    font-weight: var(--weight-semibold);
    color: var(--lucror-blue);
    display: block;
    margin-bottom: var(--space-8);
}

    .company-link:hover {
        color: var(--link-blue-dark);
    }

/* Chart box for report charts */
.chart-box {
    margin: var(--space-25) 0;
    padding: var(--space-20);
    background: var(--light-grey);
    border-radius: var(--border-5);
}

    .chart-box h4 {
        font-size: var(--font-sm);
        font-weight: var(--weight-semibold);
        color: var(--black);
        margin-bottom: var(--space-15);
        text-align: center;
    }

.chart-placeholder {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--border-5);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .chart-placeholder img {
        max-width: 100%;
        height: auto;
    }

.chart-source {
    font-size: var(--font-xs);
    color: var(--medium-grey);
    margin-top: var(--space-10);
    margin-bottom: 0;
}

/* Table notes */
.table-note,
.table-source {
    font-size: var(--font-xs);
    color: var(--medium-grey);
    font-style: italic;
    padding: var(--space-10) var(--content-padding);
}

/* Disclaimer text */
.disclaimer-text {
    font-size: var(--font-xs);
    color: var(--medium-grey);
    line-height: var(--leading-relaxed);
}

    .disclaimer-text p {
        margin-bottom: var(--space-10);
    }

/* Link list for related research */
.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .link-list li {
        padding: var(--space-10) 0;
        border-bottom: 1px solid var(--border);
    }

        .link-list li:last-child {
            border-bottom: none;
        }

    .link-list a {
        font-size: var(--font-sm);
        color: var(--link-blue);
        line-height: var(--leading-relaxed);
    }

        .link-list a:hover {
            color: var(--link-blue-dark);
        }

/* END REPORT PAGE */

/* ========================================
   ADVANCED SEARCH PAGE
   ======================================== */

/* Search form layout */
.advanced-search-form {
    display: block;
}

    .advanced-search-form .search-form-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-20);
        margin-bottom: var(--space-20);
    }

    .advanced-search-form .search-form-row--4col {
        grid-template-columns: repeat(4, 1fr);
    }

    .advanced-search-form .form-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-8);
    }

    .advanced-search-form .form-label {
        font-size: var(--font-sm);
        font-weight: var(--weight-medium);
        color: var(--black);
    }

    .advanced-search-form .form-input,
    .advanced-search-form .form-select {
        padding: var(--space-12) var(--space-15);
        border: 1px solid var(--border);
        border-radius: var(--border-5);
        font-size: var(--font-sm);
        background: var(--white);
        transition: var(--transition-fast);
    }

        .advanced-search-form .form-input:focus,
        .advanced-search-form .form-select:focus {
            outline: none;
            border-color: var(--lucror-blue);
        }

    .advanced-search-form .form-actions button[type="submit"] {
        width: auto;
    }

/* Search Results */
.search-results-meta {
    font-size: var(--font-sm);
    margin: 0;
}

.refine-search-link {
    margin-left: 8px;
    font-weight: 600;
    color: var(--dark-blue, #003366);
    text-decoration: none;
}

    .refine-search-link:hover {
        text-decoration: underline;
    }

.search-results-list {
    display: flex;
    flex-direction: column;
}

.search-result-item {
    display: block;
    padding: var(--space-20) var(--content-padding);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: var(--transition-fast);
}

    .search-result-item:hover {
        background: var(--light-blue);
    }

.search-result-title {
    font-size: var(--font-base);
    font-weight: var(--weight-medium);
    color: var(--lucror-blue);
    display: block;
    margin-bottom: var(--space-8);
}

.search-result-item:hover .search-result-title {
    color: var(--link-blue-dark);
}

.search-result-meta {
    font-size: var(--font-sm);
    color: var(--medium-grey);
    display: block;
    margin-bottom: var(--space-5);
}

.search-result-excerpt {
    font-size: var(--font-sm);
    color: var(--black);
    line-height: var(--leading-relaxed);
    display: block;
}

/* END ADVANCED SEARCH PAGE */

/* ========================================
   WEEKLY WRAP PAGE
   ======================================== */

/* Weekly Wrap Day Section */
.weekly-wrap-day {
    margin-bottom: var(--space-20);
}

.weekly-wrap-day-header {
    padding-bottom: var(--space-15);
    border-bottom: 2px solid var(--lucror-blue);
    margin-bottom: var(--space-15);
}

    .weekly-wrap-day-header h3 {
        font-size: var(--font-md);
        font-weight: var(--weight-semibold);
        color: var(--lucror-blue);
        margin: 0;
    }

/* Weekly Wrap Items */
.weekly-wrap-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.weekly-wrap-item {
    padding: var(--space-10) 0;
    border-bottom: 1px solid var(--border);
}

    .weekly-wrap-item:last-child {
        border-bottom: none;
    }

.weekly-wrap-item-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.weekly-wrap-item-type {
    display: inline-block;
    padding: var(--space-5) var(--space-10);
    font-size: var(--font-11);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--border-5);
    background: var(--light-grey);
    color: var(--medium-grey);
    white-space: nowrap;
}

    .weekly-wrap-item-type.type-morningviews {
        background: #e3f2fd;
        color: #1565c0;
    }

    .weekly-wrap-item-type.type-report {
        background: #f3e5f5;
        color: #7b1fa2;
    }

    .weekly-wrap-item-type.type-thematicpieces {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .weekly-wrap-item-type.type-creditviews {
        background: #fff3e0;
        color: #e65100;
    }

    .weekly-wrap-item-type.type-esg {
        background: #e0f2f1;
        color: #00695c;
    }

.weekly-wrap-item-title {
    font-size: var(--font-sm);
    color: var(--link-blue);
    text-decoration: none;
}

    .weekly-wrap-item-title:hover {
        color: var(--link-blue-dark);
        text-decoration: underline;
    }

.weekly-wrap-item-company {
    font-size: var(--font-sm);
    color: var(--medium-grey);
}

    .weekly-wrap-item-company a {
        color: var(--link-blue);
        text-decoration: none;
    }

        .weekly-wrap-item-company a:hover {
            text-decoration: underline;
        }

/* Region Buttons */
.region-buttons {
    display: flex;
    gap: var(--space-10);
    flex-wrap: wrap;
}

    .region-buttons .btn {
        flex: 1;
        min-width: 80px;
        text-align: center;
    }

/* Trending List (used in Weekly Wrap sidebar) */
.trending-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.trending-item {
    padding: var(--space-12) 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

    .trending-item:last-child {
        border-bottom: none;
    }

    .trending-item a {
        font-size: var(--font-sm);
        color: var(--link-blue);
        text-decoration: none;
        line-height: var(--leading-relaxed);
    }

        .trending-item a:hover {
            color: var(--link-blue-dark);
            text-decoration: underline;
        }

    .trending-item .locked-item {
        display: flex;
        align-items: center;
        gap: var(--space-5);
        color: var(--medium-grey);
    }

        .trending-item .locked-item:hover {
            color: var(--medium-grey);
            text-decoration: none;
        }

    .trending-item .lock-icon {
        width: 14px;
        height: 14px;
        opacity: 0.6;
    }

.trending-date {
    font-size: var(--font-11);
    color: var(--medium-grey);
}

/* No items message */
.no-items-message {
    padding: var(--space-20);
    text-align: center;
    color: var(--medium-grey);
    font-size: var(--font-sm);
}

/* END WEEKLY WRAP PAGE */

/* ============================================================================
   REPORT CONTENT LIST STYLES
   Proper formatting for ul/li in MorningViews, ConvertiblesBrief, and other reports
   ============================================================================ */

/* Analyst Comment Body - Lists in analyst comments */
.analyst-comment-body ul,
.analyst-comment-body ol {
    margin: var(--space-15) 0;
    padding-left: var(--space-25);
}

.analyst-comment-body ul {
    list-style-type: disc;
}

.analyst-comment-body ol {
    list-style-type: decimal;
}

.analyst-comment-body li {
    list-style: inherit;
    line-height: var(--leading-relaxed);
    color: var(--black);
    margin-bottom: var(--space-8);
    padding-left: var(--space-5);
}

    .analyst-comment-body li:last-child {
        margin-bottom: 0;
    }

/* Nested lists */
.analyst-comment-body ul ul,
.analyst-comment-body ol ul {
    list-style-type: circle;
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
}

    .analyst-comment-body ul ul ul,
    .analyst-comment-body ol ul ul {
        list-style-type: square;
    }

.analyst-comment-body ul ol,
.analyst-comment-body ol ol {
    list-style-type: lower-alpha;
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
}

/* Content Section - Lists in general content areas (market comment, etc.) */
.content-section > div:not(.section-header):not(.section-actions) ul,
.content-section > div:not(.section-header):not(.section-actions) ol {
    margin: var(--space-15) 0;
    padding-left: var(--space-25);
}

.content-section > div:not(.section-header):not(.section-actions) ul {
    list-style-type: none;
}

.content-section > div:not(.section-header):not(.section-actions) ol {
    list-style-type: decimal;
}

.content-section > div:not(.section-header):not(.section-actions) li {
    list-style: inherit;
    line-height: var(--leading-relaxed);
    color: var(--black);
    margin-bottom: var(--space-8);
    /*padding-left: var(--space-5);*/
}

    .content-section > div:not(.section-header):not(.section-actions) li:last-child {
        margin-bottom: 0;
    }

/* Report Content Class - explicit class for report HTML content */
.report-content ul,
.report-content ol {
    margin: var(--space-15) 0;
    padding-left: var(--space-25);
}

.report-content ul {
    list-style-type: none;
}

.report-content ol {
    list-style-type: decimal;
}

.report-content li {
    list-style: inherit;
    line-height: var(--leading-relaxed);
    color: var(--black);
    margin-bottom: var(--space-8);
    margin-left: var(--space-20);
    padding-left: var(--space-5);
}

    .report-content li:last-child {
        margin-bottom: 0;
    }

/* Nested lists in report content */
.report-content ul ul,
.report-content ol ul {
    list-style-type: circle;
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
}

    .report-content ul ul ul,
    .report-content ol ul ul {
        list-style-type: square;
    }

.report-content ul ol,
.report-content ol ol {
    list-style-type: lower-alpha;
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
}

/* END REPORT CONTENT LIST STYLES */

/* ============================================================================
   ANALYST LINK STYLES
   Clickable analyst name in MorningViews and ConvertiblesBrief reports
   ============================================================================ */

.analyst-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--lucror-blue);
    transition: color 0.2s ease;
    cursor: pointer;
    /*Steve*/
    min-width: max-content;
}

    .analyst-link:hover {
        color: var(--link-blue-dark);
    }

    .analyst-link .analyst-avatar {
        display: flex;
        align-items: center;
        gap: var(--space-8);
    }

    .analyst-link .contact-icon {
        width: 16px;
        height: 16px;
        opacity: 0.7;
        transition: opacity 0.2s ease;
    }

    .analyst-link:hover .contact-icon {
        opacity: 1;
    }

/* ============================================================================
   TOAST NOTIFICATIONS
   Fixed-position success/error messages triggered by Vue apps (e.g. Account page)
   ============================================================================ */

.toast {
    position: fixed;
    top: var(--space-20);
    right: var(--space-20);
    z-index: 9999;
    min-width: 280px;
    max-width: 420px;
    padding: var(--space-12) var(--space-20);
    border-radius: var(--border-5);
    border: 1px solid transparent;
    box-shadow: var(--shadow);
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

    .toast.show {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

.toast-success {
    background-color: var(--status-positive-bg);
    color: var(--status-positive-text);
    border-color: var(--status-positive-border);
}

.toast-error {
    background-color: var(--status-negative-bg);
    color: var(--status-negative-text);
    border-color: #feb2b2;
}

/* ============================================================================
   ALERT LIGHTBOX
   Replacement for window.alert - rendered via _Lightbox.cshtml partial
   ============================================================================ */

.alert-lightbox-content {
    max-width: 480px;
    text-align: center;
    position: relative;
}

.alert-lightbox-message {
    color: var(--black);
    font-size: var(--font-base);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-20);
    white-space: pre-wrap;
    word-break: break-word;
}

.alert-lightbox-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-12);
}

/* END ANALYST LINK STYLES */

/* ========================================
   THEME TOGGLE SWITCH
======================================== */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    margin-top: 0.5rem;
}

.theme-toggle-label {
    font-size: 0.95rem;
    color: var(--medium-grey);
    transition: color 0.15s ease;
}

    .theme-toggle-label.is-active {
        color: var(--black);
        font-weight: 600;
    }

.theme-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.theme-toggle-track {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background-color: var(--border);
    border-radius: 999px;
    transition: background-color 0.2s ease;
}

.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: var(--white);
    border-radius: 50%;
    box-shadow: var(--shadow-medium);
    transition: transform 0.2s ease;
}

.theme-toggle-input:checked + .theme-toggle-track {
    background-color: var(--lucror-blue);
}

    .theme-toggle-input:checked + .theme-toggle-track .theme-toggle-thumb {
        transform: translateX(20px);
    }

.theme-toggle-input:focus-visible + .theme-toggle-track {
    outline: 2px solid var(--lucror-blue);
    outline-offset: 2px;
}

/* Reserved placeholder column in the Appearance grid row */
.content-section--placeholder {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* ============================================================================
   PORTED FROM PROTOTYPE (assets/styles.css)
   Rules that exist in the prototype but were missing here and apply to markup
   that already exists in ClientPortal.
   ============================================================================ */

/* Mobile trending slider: own the horizontal swipe, let the browser pan vertically */
.trending-slider-mobile .trending-card {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
}

/* Mobile filter panel — date section (custom range) */
.mobile-filter-date .filter-custom-date {
    margin-top: var(--space-12);
}

    .mobile-filter-date .filter-custom-date > label {
        display: block;
        font-size: var(--font-sm);
        color: var(--medium-grey);
        margin-bottom: var(--space-8);
    }

.mobile-filter-date .date-inputs {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

    .mobile-filter-date .date-inputs input[type="date"] {
        width: 100%;
        padding: var(--space-10);
        border: 1px solid var(--border);
        border-radius: 6px;
        font-family: inherit;
    }


/* ============================================================================
   MERGED FROM styles-new.css  (rules that existed only there)
   styles.css remains the source of truth; nothing above this line was changed.
   ============================================================================ */

/* Form elements don't inherit body font by default — force it */
button,
input,
select,
textarea {
    font-family: inherit;
}

.header-right a {
    /*position: relative;*/
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background 0.2s ease;
}

    .header-right a:hover {
        background: var(--light-grey);
    }

.company-name-link {
    color: var(--lucror-blue);
    cursor: pointer;
    text-decoration: none;
}

    .company-name-link:hover {
        text-decoration: underline;
    }

/* Text Subtitle - Generic subtitle style */
h3.text-subtitle, h3.overview-title {
    font-size: var(--font-xl);
    font-weight: var(--weight-semibold);
    color: var(--black);
    margin: 0 0 var(--space-20) 0;
}

/* Tab labels: long shown by default, short revealed on mobile.
   Allows tabs to fit in a single row at narrow widths without truncation. */
.methodology-tab .tab-label-long {
    display: inline;
}

.methodology-tab .tab-label-short {
    display: none;
}

/* Tablet header icons + hamburger — hidden by default */
.header-tablet-right {
    display: none;
    align-items: center;
    gap: var(--space-15);
}

.header-icon-btn {
    display: flex;
    align-items: center;
    position: relative;
    color: var(--black);
    text-decoration: none;
}

    .header-icon-btn img {
        width: var(--icon-md);
        height: var(--icon-md);
    }

/* Tablet search dropdown */
.header-search-dropdown {
    position: relative;
}

.header-search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: var(--space-8);
}

    .header-search-toggle img {
        width: var(--icon-md);
        height: var(--icon-md);
    }

.header-search-panel {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: var(--white);
    border-radius: var(--border-10);
    box-shadow: var(--shadow-medium);
    padding: var(--space-15);
    width: 320px;
    z-index: 200;
    animation: searchDropIn 0.2s ease;
}

    .header-search-panel.active {
        display: block;
    }

@keyframes searchDropIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-search-inner {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    border-radius: var(--border-5);
    padding: var(--space-10) var(--space-12);
    background: var(--light-grey);
}

    .header-search-inner img {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        opacity: 0.5;
    }

.header-search-input {
    flex: 1;
    border: none;
    background: none;
    font-size: var(--font-sm-alt);
    outline: none;
    color: var(--black);
}

    .header-search-input::placeholder {
        color: var(--medium-grey);
    }

.header-search-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--medium-grey);
    display: flex;
    align-items: center;
    padding: 0;
    flex-shrink: 0;
}

    .header-search-close:hover {
        color: var(--black);
    }

/* Hide on desktop — only shown on tablet range via media query */
.header-search-dropdown {
    display: none;
}

/* Tablet search — hide old inline search form */
.search-form--tablet {
    display: none;
}

/* ============================================================================
   RESPONSIVE - CONSOLIDATED MEDIA QUERIES (bounded, non-cascading)
   Each viewport band is fully self-contained: editing one band does not
   affect any other. Bands are mutually exclusive (no overlap, no cascade).
============================================================================ */

/* ---------- SMALL MOBILE  (max-width: 480px) ---------- */
@media (max-width: 480px) {
    /* - from (max-width: 480px) - */

    .coverage-columns {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-30);
    }

    /* - from (max-width: 1024px) - */

    /* Description + Investment Objective (2fr/1fr): stack to a single column. */
    #modelPortfolioApp .portfolio-grid-2-1 {
        grid-template-columns: 1fr;
        display: block;
    }

    /* Statistics (3col) and Positioning (4col): fit as many ~280px cards as the
       width allows, so they step down 4→3→2→1 fluidly rather than collapsing to
       a single column at the tablet breakpoint. A partial final row left-aligns
       (e.g. 3 cards at two-up = a row of 2 then a half-width card). */
    #modelPortfolioApp .grid-3col,
    #modelPortfolioApp .grid-4col {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    /* Keep report content images (charts) within their section on small screens */
    #modelPortfolioApp .content-section:not(.company-profile-header) img {
        max-width: 100%;
        height: auto;
    }

    /* Swipe hint floats over the top-right of the table (like the Dashboard).
       In-flow + negative bottom margin overlaps it onto the table without
       depending on header height. Hidden until JS confirms the table overflows. */
    #modelPortfolioApp .swipe-hint,
    #companyApp .swipe-hint {
        display: none;
        position: relative;
        z-index: 5;
        margin: 0 var(--space-8) -32px auto;
    }

        #modelPortfolioApp .swipe-hint.is-scrollable,
        #companyApp .swipe-hint.is-scrollable {
            display: flex;
        }

        #modelPortfolioApp .swipe-hint.hidden,
        #companyApp .swipe-hint.hidden {
            display: none;
        }

    /* Company research-tab tables (Research / Trade History / Calendar) only
       have 2-3 columns, so the shared 1100px min-width is far too wide. Use a
       comfortable width that scrolls (and shows the swipe hint) on phones but
       fits on tablets. */
    #companyApp .content-section .research-table-container table {
        min-width: 640px;
    }

    /* - from (max-width: 768px) - */

    #reportApp .section-header--spaced {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-15);
    }

        #reportApp .section-header--spaced .section-actions {
            flex-wrap: wrap;
        }

    /* - from (max-width: 1024px) - */

    .coverage-filters .filters {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-12);
    }

    /* Region tabs scroll horizontally instead of overflowing the row */
    .coverage-filters .filters-tabs .company-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .coverage-filters .filters-tabs .company-tabs::-webkit-scrollbar {
            display: none;
        }

    /* Filter dropdowns wrap and left-align */
    .coverage-filters .filters-center {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    /* Re-show search + view toggle (the generic mobile rule hides .filters-right) */
    .coverage-filters .filters-right {
        display: flex;
        flex-wrap: wrap;
    }

        .coverage-filters .filters-right .search-form {
            flex: 1;
        }

        .coverage-filters .filters-right .search-box {
            width: 100%;
        }

    /* - from (max-width: 768px) - */

    .year-range-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        /* Give the slider room so the year labels can spread out; the wrapper scrolls */
        .year-range-scroll .year-range-slider {
            min-width: 760px;
        }

    /* - from (max-width: 768px) - */

    #modelPortfolioApp .portfolio-actions {
        flex-wrap: wrap;
        width: 100%;
    }

    #modelPortfolioApp .portfolio-date-select {
        /* flex-basis: 100%;*/
    }

        #modelPortfolioApp .portfolio-date-select select.form-select {
            flex: 1;
            min-width: 0;
        }

    #modelPortfolioApp .portfolio-actions .btn {
        flex-basis: 100%;
        justify-content: center;
    }

    /* - from (max-width: 768px) - */


    /* --- Header --- */

    #main-header {
        margin: 0 0 var(--space-15) 0;
        border-radius: 0;
        padding: 0 var(--space-20);
        height: 60px;
        display: flex;
        align-items: center;
    }

    /* Header-nav fills the header and spaces logo + hamburger to opposite ends */
    .header-nav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }

    /* Logo */
    .logo img {
        max-width: 130px;
    }

    /* Hide desktop nav and right-side icon row */
    #main-header nav,
    #main-header .header-right,
    .header-tablet-right {
        display: none;
    }

    /* Show hamburger */
    .hamburger-btn {
        display: flex;
    }

    /* --- Page container --- */

    .page-container {
        padding: 0 var(--space-15);
        margin: 0;
    }

    .content-section {
        padding: var(--space-15);
        margin-bottom: var(--space-15);
    }

        /* The edge-to-edge section header bleeds by --content-padding (35px) to match
       the desktop card padding. The card padding drops to 15px here, so the 35px
       bleed overruns the card by 20px each side and overflows the content-section.
       Re-match the bleed to the mobile padding so the header stays edge-to-edge
       without overflowing. */
        .content-section .section-header {
            margin-left: calc(-1 * var(--space-15));
            margin-right: calc(-1 * var(--space-15));
            padding-left: var(--space-15);
            padding-right: var(--space-15);
        }

    /* --- Footer --- */

    footer {
        margin: var(--space-20) var(--space-15);
    }

    /* --- Research filters row --- */

    /* Show "Filters" button, hide desktop filter controls */
    .mobile-filter-btn {
        display: flex;
    }

    .filters-left,
    .filters-right {
        display: none;
    }

    /* "Research" heading + Filters button sit side by side */
    .filters {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-15);
        margin-bottom: var(--space-15);
        padding: var(--space-15) 0;
    }

        .filters h2 {
            margin: 0;
        }

    /* Remove sticky behaviour on mobile */
    .filters-container,
    .sticky-table-page .filters-container {
        position: static;
        top: auto;
    }

    /* Show active-filter summary text (mobile only, when filters are active) */
    .selected-filters-mobile.has-filters {
        display: block;
    }

    .selected-filters {
        display: none !important;
    }

    /* --- Footer --- */

    footer {
        flex-direction: column;
        align-items: center;
        gap: var(--space-12);
        text-align: center;
        margin: var(--space-15);
        padding: var(--space-20);
    }

        footer a {
            margin: 0 8px;
        }

    /* --- Lightboxes: bottom sheet on mobile --- */

    .lightbox {
        align-items: flex-end;
    }

    .lightbox-content {
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
        padding: var(--space-20);
        transform: translateY(100%);
        transition: transform 0.35s ease;
    }

    .lightbox.active .lightbox-content {
        transform: translateY(0);
    }

    /* Drag handle */
    .lightbox-content::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--border);
        border-radius: 2px;
        margin: 0 auto var(--space-20);
    }

    .lightbox-close {
        top: 16px;
        right: 16px;
    }

    /* Images inside any lightbox: cap height so they don't overflow the sheet.
       Width stays 100% as set by the desktop rules; only height is constrained. */
    .lightbox-content img {
        max-height: 75vh;
    }

    /* --- Image lightboxes: revert to desktop-style centered modal ---
       Bottom-sheet UX makes sense for content/forms (enquiries, contact author),
       but for image previews (charts, financial summaries) the user just wants
       to see the image enlarged, like on desktop. */

    /* Center the overlay container that holds an image-lightbox */
    .lightbox:has(.chart-lightbox-content) {
        align-items: center;
    }

    /* Restore desktop-like sizing & animation for the image-lightbox sheet */
    .chart-lightbox-content {
        width: 90%;
        max-width: 600px;
        max-height: 90vh;
        border-radius: 12px;
        padding: var(--space-20);
        transform: scale(0.9);
        transition: transform 0.3s ease;
    }

    .lightbox.active .chart-lightbox-content {
        transform: scale(1);
    }

    /* Hide the drag-handle pseudo-element on image lightboxes */
    .chart-lightbox-content::before {
        display: none;
    }

    /* Enquiries table fits its container — only two columns, no need to scroll */
    .enquiries-table {
        min-width: 0;
        width: 100%;
    }

    /* Swipe hint anchors to this */
    .research-table-container {
        position: relative;
    }

    .swipe-hint {
        display: flex;
        /* Sit over the first table body row, below the section header + thead */
        top: 120px;
        right: var(--space-15);
    }

    .table-scroll-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        /* No bleed — table scrolls inside the card padding */
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* Override desktop edge-to-edge bleed on filters */
    .content-section .filters {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 0;
    }

    /* Override the desktop edge-to-edge bleed on mobile */
    .content-section .research-table-container table {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .analyst-box {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }

    .analyst-company {
        display: block;
    }

    /* Prevent table from collapsing — allow horizontal scroll */
    table {
        min-width: 1100px;
        font-size: var(--font-sm);
    }

    /* Research table: company column needs more room on mobile.
       min-width works on td cells; max-width does not (auto table layout). */
    .research-table-container .company-list {
        min-width: 360px;
    }

    table th,
    table td {
        padding: var(--space-10) var(--space-8);
    }

    /* Remove sticky thead on mobile */
    table thead {
        position: static;
        top: auto;
    }

        table thead th {
            position: static;
        }

    /* --- Trending reports: single-card slider --- */

    /* Hide the desktop grid */
    .trending-cards {
        display: none;
    }

    /* Show single-card mobile slider */
    .trending-slider-mobile {
        display: block;
    }

    .trending-dots {
        display: flex;
    }

    .trending-position {
        display: block;
    }

    /* Section header: stack title + buttons vertically */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-12);
    }

        .section-header button,
        .section-header .btn {
            width: 100%;
        }

    /* --- Shared grids: stack to single column on mobile --- */

    .grid-2col,
    .grid-3col,
    .grid-4col,
    .grid-main-sidebar,
    .portfolio-grid-2-1 {
        grid-template-columns: 1fr;
    }

    /* Form layouts: two-column field rows stack so inputs stay usable */
    .form-grid {
        grid-template-columns: 1fr;
    }

    /* Advanced search: 4-column filter row stacks */
    .advanced-search-form .search-form-row--4col {
        grid-template-columns: 1fr;
    }

    /* Analytics: layout stacks, all filter rows stack */
    .analytics-layout {
        grid-template-columns: 1fr;
        gap: var(--space-20);
    }

    .analytics-filter-row,
    .analytics-filter-row--two-col {
        grid-template-columns: 1fr;
    }

    /* Analytics action buttons full width and stacked */
    .analytics-actions {
        flex-direction: column;
    }

        .analytics-actions .btn {
            width: 100%;
            justify-content: center;
        }

    /* Analytics results table: no edge-bleed (would overflow on mobile);
       falls back to standard horizontal-scroll behaviour from shared rules */
    .analytics-results-table {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Checkbox grids stack on mobile */
    .checkbox-grid-2col,
    .checkbox-list.checkbox-grid-2col {
        grid-template-columns: 1fr;
    }

    /* Box header: title block + right-aligned info stack vertically */
    .box-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-12);
    }

    .box-info {
        text-align: left;
    }

    /* Company identity bar: stack children vertically.
       On model-portfolio: title row above portfolio-actions.
       On company profile: logo+name row above company-metrics row.
       Padding removed (the parent .content-section already provides it). */
    .company-identity-bar {
        display: block;
        padding: 0;
        padding-top: var(--space-15);
    }

        .company-identity-bar .portfolio-actions {
            margin-top: var(--space-15);
            flex-wrap: wrap;
        }

    /* Company profile metrics: wrap so all 4 fit comfortably below the name */
    .section-with-table .company-identity-bar .company-metrics {
        margin-top: var(--space-30);
        flex-wrap: wrap;
        gap: var(--space-10) var(--space-20);
        border-top: 1px solid var(--border);
        padding: var(--space-15) 0;
    }

    /* Company Profile Tables */

    .tab-content .section-with-table .section-header {
        padding: 0 0 var(--space-15) 0;
        margin: 0;
        display: grid;
        grid-template-columns: 2fr 1fr;
    }

    .section-with-table .section-header, .search-result-item {
        padding-left: 0;
        padding-right: 0;
    }


    /* Company tabs: horizontal scroll on mobile.
       7 tabs (some with AI badges) overflow phone width; scrollable strip
       preserves the tab metaphor and works with one tap. */
    .company-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: var(--space-10) 0;
        /* Hide scrollbar (still scrollable by touch/wheel) */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .company-tabs::-webkit-scrollbar {
            display: none;
        }

    .company-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Search results */



    /* Pagination: stack info above page numbers, both centred */
    .pagination {
        flex-direction: column;
        gap: var(--space-12);
        padding: var(--space-15);
    }

    /* Perf stats: 2-up on mobile (3 across is too cramped on phones,
       1 across is reserved for the 480px block below). */
    .perf-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* --- Methodology page --- */

    /* Tabs: drop absolute centering, sit in a single row spanning full width.
       Each tab flexes equally so all four fit; long labels swap to short. */
    .methodology-tabs {
        position: static;
        left: auto;
        transform: none;
        width: 100%;
    }

    .methodology-tab {
        flex: 1;
        padding: 8px 6px;
        font-size: var(--font-sm);
        white-space: nowrap;
    }

        .methodology-tab .tab-label-long {
            display: none;
        }

        .methodology-tab .tab-label-short {
            display: inline;
        }

    .methodology-content {
        padding: var(--space-20) 0;
    }

    .methodology-section {
        margin-bottom: var(--space-20);
        padding-bottom: var(--space-20);
    }

    /* Methodology table rows: label sits on top of content, not beside it */
    .methodology-table-row {
        grid-template-columns: 1fr;
    }

    .methodology-table-label {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    /* --- Private Credit landing --- */

    /* Hero stacks: text above, video below */
    .landing-hero {
        grid-template-columns: 1fr;
        gap: var(--space-20);
    }

    /* Contact form: two-column rows stack */
    .contact-form .form-row {
        grid-template-columns: 1fr;
    }

    /* - from (max-width: 480px) - */


    #main-header {
        padding: 0 var(--space-15);
        height: 56px;
    }

    .logo img {
        max-width: 115px;
    }

    .page-container {
    }

    .content-section {
        padding: var(--space-12);
    }

        /* Card padding tightens to 12px here — re-match the edge-to-edge header bleed
       so it doesn't overrun the card (see the 768px rule for the full rationale). */
        .content-section .section-header {
            margin-left: calc(-1 * var(--space-12));
            margin-right: calc(-1 * var(--space-12));
            padding-left: var(--space-12);
            padding-right: var(--space-12);
        }

    /* Full-width mobile nav panel on very small screens */
    .mobile-nav-panel {
        width: 100%;
        max-width: 100%;
    }

    /* Full-width mobile filter panel on very small screens */
    .mobile-filter-panel {
        width: 100%;
        max-width: 100%;
    }

    table th,
    table td {
        padding: var(--space-8) var(--space-5);
    }

    /* Perf stat boxes: keep 2 across even on the smallest phones */
    .perf-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* - from (max-width: 1024px) - */

    .table-scroll-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        margin-left: calc(-1 * var(--space-20));
        margin-right: calc(-1 * var(--space-20));
        padding-left: var(--space-20);
        padding-right: var(--space-20);
    }

    /* - from (max-width: 768px) - */

    .table-scroll-wrapper {
        margin-left: calc(-1 * var(--space-15));
        margin-right: calc(-1 * var(--space-15));
        padding-left: var(--space-15);
        padding-right: var(--space-15);
    }

    /* - from (max-width: 480px) - */

    .table-scroll-wrapper {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* - from (max-width: 1024px) - */


    /* Show mobile filter button */
    .mobile-filter-btn {
        display: flex;
    }

    /* Make filters container flex to position h2 and button side by side */
    .filters {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-15);
        margin-bottom: var(--space-15);
        padding: var(--space-15) 0; /* Add vertical padding to prevent overlap */
    }

        .filters h2 {
            margin: 0;
        }

    /* Hide desktop filter controls but keep heading */
    .filters-left,
    .filters-right {
        display: none;
    }

    /* Show mobile selected filters count (only when filters are active) */
    .selected-filters-mobile.has-filters {
        display: block;
    }

    /* Hide desktop selected filters */
    .selected-filters {
        display: none;
    }

    /* Table scrolling - swipe hint + forced horizontal scroll */
    .research-table-container {
        position: relative; /* Swipe hint anchors to this */
    }

    .swipe-hint {
        display: flex;
        /* Sit over the first table body row, below the section header + thead */
        top: 120px;
        right: var(--space-15);
    }

    /* Force the table wider than the wrapper so it scrolls horizontally instead of squishing */
    .content-section .research-table-container table {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        min-width: 1100px;
    }

    /* Company column needs room so pills don't collapse (min-width works with auto layout; max-width does not) */
    .research-table-container .company-list {
        min-width: 360px;
    }

    /* Trending Reports - Keep flex layout on tablet */
    .trending-cards {
        flex-wrap: wrap;
    }

    .trending-card {
        flex: 0 0 calc((100% - 16px) / 2); /* 2 cards on tablet */
    }

    /* Section headers - stack buttons */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-12);
    }

        .section-header button,
        .section-header .btn {
            width: 100%;
        }

    /* - from (max-width: 768px) - */


    /* Trending Reports - Single card with navigation */
    .trending-cards {
        display: none;
    }

    .trending-slider-mobile {
        display: block;
    }

    .trending-card {
        margin-bottom: 0;
    }

    .trending-dots {
        display: flex;
    }

    .trending-position {
        display: block;
    }

    /* Slider controls */
    .trending-controls {
        margin-top: var(--space-15);
    }

    /* Search bar - full width */
    .search-container {
        margin-bottom: var(--space-15);
    }

    .company-search {
        width: 100%;
    }

    /* Section spacing */
    .content-section {
        margin-bottom: var(--space-20);
    }

    /* Action buttons stack */
    .trending-controls,
    .filter-actions {
        flex-direction: column;
    }

        .trending-controls button,
        .filter-actions button {
            width: 100%;
        }

    /* - from (max-width: 480px) - */


    /* Mobile filter panel full width */
    .mobile-filter-panel {
        width: 100%;
        max-width: 100%;
    }

    /* Reduce spacing */
    .page-container {
        padding: 0 var(--space-8);
    }

    .content-section {
        padding: var(--space-12);
    }

    /* Section headers */
    .section-header h2 {
        font-size: var(--font-xl);
    }

    /* Tables - smaller text */
    table {
        font-size: var(--font-sm);
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

        table th,
        table td {
            padding: var(--space-8) var(--space-5);
            /*padding-left: 0!important;
            padding-right: 0!important;*/
        }

    /* Trending cards - full width */
    .trending-card {
        padding: var(--space-15);
    }

        .trending-card h3 {
            font-size: var(--font-base);
        }

    /* Filter button */
    .mobile-filter-btn {
        /*bottom: 15px;
        left: 15px;*/
        padding: var(--space-12) var(--space-15);
        font-size: var(--font-sm);
    }

    .research-table-container {
        overflow: hidden;
    }

    .grid-main-sidebar {
        grid-template-columns: 1fr;
    }

    .company-identity-bar {
        /*padding: var(--space-30) var(--content-padding);*/
        flex-direction: column;
        justify-content: space-between;
        padding-left: 0;
        align-items: start;
    }

    .company-logo-name {
        display: flex;
        align-items: center;
        gap: var(--space-20);
        margin-bottom: var(--space-10);
    }

    .company-metrics {
        display: flex;
        flex-direction: column;
        gap: var(--space-20);
        color: var(--black);
        margin-left: 0;
        padding-left: 0;
    }

    .section-with-table .section-header {
        margin-left: initial;
        margin-right: initial;
        margin-top: initial;
        margin-bottom: initial;
        padding-top: 10px;
        padding-left: initial;
        padding-right: initial;
        padding-bottom: 20px;
    }

    .company-tabs {
        display: flex;
        gap: 0;
        overflow: auto;
        background: none;
        border-top: none;
    }

    .company-tab {
        padding: 12px 24px;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        font-size: 1rem;
        font-weight: 500;
        color: #666;
        cursor: pointer;
        transition: all 0.2s;
        text-wrap-mode: nowrap;
    }

    .identity-bar {
        padding: 0px;
        display: grid;
        justify-content: space-between;
        /* align-items: center; */
    }

    .page-metrics {
        /* display: flex; */
        flex-direction: column;
        gap: var(--space-20);
        color: var(--black);
        align-items: start;
    }

    .page-metrics-row {
        display: grid;
        gap: var(--space-20);
        padding-top: 20px;
    }

    /* - from (max-width: 768px) - */


    /* Remove page container margins on mobile */
    .page-container {
        margin: 8px;
    }

    /* Remove sticky filter bar on mobile */
    .filters-container,
    .sticky-table-page .filters-container {
        position: static;
        top: auto;
    }

    /* Remove sticky table header on mobile */
    table thead {
        position: static;
        top: auto;
    }

        table thead th {
            position: static;
        }

    /* - from (max-width: 992px) - */

    .calendar-day {
        min-height: 80px;
        padding: 6px;
    }

    .event-description {
        display: none;
    }

    /* - from (max-width: 768px) - */

    .calendar-controls {
        flex-direction: column;
        gap: var(--space-15);
        padding: var(--space-15);
    }

    .calendar-controls-left {
        width: 100%;
        justify-content: space-between;
    }

    .calendar-controls-right {
        width: 100%;
    }

    .calendar-view-toggle {
        width: 100%;
    }

    .view-toggle-btn {
        flex: 1;
        text-align: center;
    }

    .calendar-day {
        min-height: 60px;
        padding: 4px;
    }

    .event-link {
        padding: 4px;
    }

    /* - from (max-width: 430px) - */

    .calendar-tabs {
        display: flex;
        gap: 0;
        border-bottom: 2px solid var(--border);
        padding-bottom: var(--space-5);
        margin-bottom: var(--space-5);
        position: relative;
    }

    /* Calendar header: icons share the title row (right-aligned); the tabs
       drop to their own full-width row below. Overrides the column stacking. */
    .section-header:has(.calendar-tabs) {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

        .section-header:has(.calendar-tabs) .section-actions {
            order: 1;
            margin-left: auto;
        }

        .section-header:has(.calendar-tabs) .calendar-tabs {
            order: 2;
            flex-basis: 100%;
        }

    .calendar-tab {
        padding: 12px 24px;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        font-size: 1rem;
        font-weight: 500;
        color: #666;
        cursor: pointer;
        transition: all 0.2s;
    }

    .calendar-day {
        min-height: 50px;
    }


    .calendar-view--month .calendar-weekdays, .calendar-view--week .calendar-weekdays {
        display: none;
    }

    .day-number {
        width: 37px;
        height: 38px;
        line-height: 15px;
        padding-top: 4px;
    }

        .day-number span {
            display: block;
            font-size: 0.7rem;
        }

    .calendar-days, .calendar-view--week .calendar-days--week {
        display: grid;
        grid-template-columns: 1fr;
    }

    .calendar-view--week .calendar-day {
        min-height: unset;
    }

    .calendar-day {
        position: relative;
        border-right: none;
    }

    .calendar-day-header {
        background: none;
    }


    #dayView .calendar-event {
        display: block;
    }

    #dayView .calendar-day-events {
        padding: var(--space-15) 0;
        min-height: 200px;
    }

    .calendar-day.has-events::after {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        background: var(--lucror-blue);
        border-radius: 50%;
        margin: 4px auto 0;
    }

    .calendar-day.today.has-events::after {
        background: var(--white);
    }

    .calendar-controls {
        margin-left: 0;
        margin-right: 0;
        border-radius: var(--border-5);
    }

    .calendar-grid {
        margin-left: 0;
        margin-right: 0;
    }

    /* - from (max-width: 992px) - */

    .methodology-tabs {
        position: static;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: var(--space-15);
        order: 2;
    }

    /* Icons share the title row (right-aligned); tabs drop to their own row */
    .methodology-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-15);
    }

        .methodology-header .section-actions {
            position: static;
            order: 1;
            margin-left: auto;
        }

    /* - from (max-width: 768px) - */

    .methodology-tab {
        padding: 6px 14px;
        font-size: var(--font-xs);
    }

    .methodology-content {
        padding: var(--space-20) 0;
    }

    .methodology-section {
        margin-bottom: var(--space-20);
        padding-bottom: var(--space-20);
    }

    .methodology-table-row {
        grid-template-columns: 1fr;
    }

    .methodology-table-label {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    /* - from (max-width: 992px) - */

    .landing-hero {
        grid-template-columns: 1fr;
        gap: var(--space-30);
    }

    .landing-content {
        max-width: 100%;
    }

    .landing-media {
        order: -1;
    }

    /* - from (max-width: 992px) - */

    .search-form-row--4col {
        grid-template-columns: repeat(2, 1fr);
    }

    /* - from (max-width: 600px) - */

    .search-form-row--4col {
        grid-template-columns: 1fr;
    }

    /* - from (max-width: 768px) - */

    /* Analytics action buttons: full-width and stacked */
    .analytics-actions {
        flex-direction: column;
    }

        .analytics-actions .btn {
            width: 100%;
            justify-content: center;
        }

    /* Company tabs: hide the scrollbar on the horizontally scrollable strip */
    .company-tabs {
        scrollbar-width: none;
        -ms-overflow-style: none;
        border-top: solid 1px var(--border);
        margin-top: 15px;
    }

        .company-tabs::-webkit-scrollbar {
            display: none;
        }


    /* Small screens: divider above metrics; smaller logo + name */
    .company-profile-header .company-logo img {
        max-height: 35px;
    }

    .company-profile-header .company-logo {
        max-width: 100px;
    }

    .company-profile-header .company-name-divider {
        height: var(--space-30);
    }

    .company-profile-header .company-name-wrapper h1 {
        font-size: var(--font-lg);
    }

    .company-profile-header .company-metrics {
        padding-top: var(--space-20);
        border-top: 1px solid var(--border);
    }

    /* Info list: stack date above title on small screens (no h-scroll) */
    .info-list-head {
        display: none;
    }

    .info-list-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .info-list-date {
        color: var(--medium-grey);
        font-size: var(--font-sm);
    }

    /* Spaced section headers: keep title + links on ONE row, links pushed right.
       Specificity must beat .tab-content .section-with-table .section-header,
       which otherwise forces display:grid (2fr 1fr) and left-aligns the link. */
    .content-section.section-with-table .section-header--spaced,
    #companyApp .content-section.section-with-table .section-header--spaced {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-10);
    }

    .content-section .section-header--spaced .section-header-link {
        white-space: nowrap;
    }

    .content-section .section-header--spaced .section-header-links {
        flex-wrap: nowrap;
        margin-left: auto;
    }

    /* Info list: drop the 35px content-padding so rows line up with the
       section title (the card already provides the inset) */
    .section-with-table .info-list-head,
    .section-with-table .info-list-row {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---------- MOBILE  (min-width: 481px) and (max-width: 768px) ---------- */
@media (min-width: 481px) and (max-width: 768px) {
    /* - from (max-width: 1024px) - */

    /* Description + Investment Objective (2fr/1fr): stack to a single column. */
    #modelPortfolioApp .portfolio-grid-2-1 {
        grid-template-columns: 1fr;
        display: block;
    }

    /* Statistics (3col) and Positioning (4col): fit as many ~280px cards as the
       width allows, so they step down 4→3→2→1 fluidly rather than collapsing to
       a single column at the tablet breakpoint. A partial final row left-aligns
       (e.g. 3 cards at two-up = a row of 2 then a half-width card). */
    #modelPortfolioApp .grid-3col,
    #modelPortfolioApp .grid-4col {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    /* Keep report content images (charts) within their section on small screens */
    #modelPortfolioApp .content-section:not(.company-profile-header) img {
        max-width: 100%;
        height: auto;
    }

    /* Swipe hint floats over the top-right of the table (like the Dashboard).
       In-flow + negative bottom margin overlaps it onto the table without
       depending on header height. Hidden until JS confirms the table overflows. */
    #modelPortfolioApp .swipe-hint,
    #companyApp .swipe-hint {
        display: none;
        position: relative;
        z-index: 5;
        margin: 0 var(--space-8) -32px auto;
    }

        #modelPortfolioApp .swipe-hint.is-scrollable,
        #companyApp .swipe-hint.is-scrollable {
            display: flex;
        }

        #modelPortfolioApp .swipe-hint.hidden,
        #companyApp .swipe-hint.hidden {
            display: none;
        }

    /* Company research-tab tables (Research / Trade History / Calendar) only
       have 2-3 columns, so the shared 1100px min-width is far too wide. Use a
       comfortable width that scrolls (and shows the swipe hint) on phones but
       fits on tablets. */
    #companyApp .content-section .research-table-container table {
        min-width: 640px;
    }

    /* - from (max-width: 768px) - */

    #reportApp .section-header--spaced {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-15);
    }

        #reportApp .section-header--spaced .section-actions {
            flex-wrap: wrap;
        }

    /* - from (max-width: 1024px) - */

    .coverage-filters .filters {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-12);
    }

    /* Region tabs scroll horizontally instead of overflowing the row */
    .coverage-filters .filters-tabs .company-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .coverage-filters .filters-tabs .company-tabs::-webkit-scrollbar {
            display: none;
        }

    /* Filter dropdowns wrap and left-align */
    .coverage-filters .filters-center {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    /* Re-show search + view toggle (the generic mobile rule hides .filters-right) */
    .coverage-filters .filters-right {
        display: flex;
        flex-wrap: wrap;
    }

        .coverage-filters .filters-right .search-form {
            flex: 1;
        }

        .coverage-filters .filters-right .search-box {
            width: 100%;
        }

    /* - from (max-width: 768px) - */

    .year-range-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        /* Give the slider room so the year labels can spread out; the wrapper scrolls */
        .year-range-scroll .year-range-slider {
            min-width: 760px;
        }

    /* - from (max-width: 768px) - */

    #modelPortfolioApp .portfolio-actions {
        flex-wrap: wrap;
        width: 100%;
    }

    #modelPortfolioApp .portfolio-date-select {
        /* flex-basis: 100%;*/
    }

        #modelPortfolioApp .portfolio-date-select select.form-select {
            flex: 1;
            min-width: 0;
        }

    #modelPortfolioApp .portfolio-actions .btn {
        flex-basis: 100%;
        justify-content: center;
    }

    /* - from (max-width: 768px) - */


    /* --- Header --- */

    #main-header {
        margin: 0 0 var(--space-15) 0;
        border-radius: 0;
        padding: 0 var(--space-20);
        height: 60px;
        display: flex;
        align-items: center;
    }

    /* Header-nav fills the header and spaces logo + hamburger to opposite ends */
    .header-nav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }

    /* Logo */
    .logo img {
        max-width: 130px;
    }

    /* Hide desktop nav and right-side icon row */
    #main-header nav,
    #main-header .header-right,
    .header-tablet-right {
        display: none;
    }

    /* Show hamburger */
    .hamburger-btn {
        display: flex;
    }

    /* --- Page container --- */

    .page-container {
        padding: 0 var(--space-15);
        margin: 0;
    }

    .content-section {
        padding: var(--space-15);
        margin-bottom: var(--space-15);
    }

        /* The edge-to-edge section header bleeds by --content-padding (35px) to match
       the desktop card padding. The card padding drops to 15px here, so the 35px
       bleed overruns the card by 20px each side and overflows the content-section.
       Re-match the bleed to the mobile padding so the header stays edge-to-edge
       without overflowing. */
        .content-section .section-header {
            margin-left: calc(-1 * var(--space-15));
            margin-right: calc(-1 * var(--space-15));
            padding-left: var(--space-15);
            padding-right: var(--space-15);
        }

    /* --- Footer --- */

    footer {
        margin: var(--space-20) var(--space-15);
    }

    /* --- Research filters row --- */

    /* Show "Filters" button, hide desktop filter controls */
    .mobile-filter-btn {
        display: flex;
    }

    .filters-left,
    .filters-right {
        display: none;
    }

    /* "Research" heading + Filters button sit side by side */
    .filters {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-15);
        margin-bottom: var(--space-15);
        padding: var(--space-15) 0;
    }

        .filters h2 {
            margin: 0;
        }

    /* Remove sticky behaviour on mobile */
    .filters-container,
    .sticky-table-page .filters-container {
        position: static;
        top: auto;
    }

    /* Show active-filter summary text (mobile only, when filters are active) */
    .selected-filters-mobile.has-filters {
        display: block;
    }

    .selected-filters {
        display: none !important;
    }

    /* --- Footer --- */

    footer {
        flex-direction: column;
        align-items: center;
        gap: var(--space-12);
        text-align: center;
        margin: var(--space-15);
        padding: var(--space-20);
    }

        footer a {
            margin: 0 8px;
        }

    /* --- Lightboxes: bottom sheet on mobile --- */

    .lightbox {
        align-items: flex-end;
    }

    .lightbox-content {
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
        padding: var(--space-20);
        transform: translateY(100%);
        transition: transform 0.35s ease;
    }

    .lightbox.active .lightbox-content {
        transform: translateY(0);
    }

    /* Drag handle */
    .lightbox-content::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--border);
        border-radius: 2px;
        margin: 0 auto var(--space-20);
    }

    .lightbox-close {
        top: 16px;
        right: 16px;
    }

    /* Images inside any lightbox: cap height so they don't overflow the sheet.
       Width stays 100% as set by the desktop rules; only height is constrained. */
    .lightbox-content img {
        max-height: 75vh;
    }

    /* --- Image lightboxes: revert to desktop-style centered modal ---
       Bottom-sheet UX makes sense for content/forms (enquiries, contact author),
       but for image previews (charts, financial summaries) the user just wants
       to see the image enlarged, like on desktop. */

    /* Center the overlay container that holds an image-lightbox */
    .lightbox:has(.chart-lightbox-content) {
        align-items: center;
    }

    /* Restore desktop-like sizing & animation for the image-lightbox sheet */
    .chart-lightbox-content {
        width: 90%;
        max-width: 600px;
        max-height: 90vh;
        border-radius: 12px;
        padding: var(--space-20);
        transform: scale(0.9);
        transition: transform 0.3s ease;
    }

    .lightbox.active .chart-lightbox-content {
        transform: scale(1);
    }

    /* Hide the drag-handle pseudo-element on image lightboxes */
    .chart-lightbox-content::before {
        display: none;
    }

    /* Enquiries table fits its container — only two columns, no need to scroll */
    .enquiries-table {
        min-width: 0;
        width: 100%;
    }

    /* Swipe hint anchors to this */
    .research-table-container {
        position: relative;
    }

    .swipe-hint {
        display: flex;
        /* Sit over the first table body row, below the section header + thead */
        top: 120px;
        right: var(--space-15);
    }

    .table-scroll-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        /* No bleed — table scrolls inside the card padding */
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* Override desktop edge-to-edge bleed on filters */
    .content-section .filters {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 0;
    }

    /* Override the desktop edge-to-edge bleed on mobile */
    .content-section .research-table-container table {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .analyst-box {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }

    .analyst-company {
        display: block;
    }

    /* Prevent table from collapsing — allow horizontal scroll */
    table {
        min-width: 1100px;
        font-size: var(--font-sm);
    }

    /* Research table: company column needs more room on mobile.
       min-width works on td cells; max-width does not (auto table layout). */
    .research-table-container .company-list {
        min-width: 360px;
    }

    table th,
    table td {
        padding: var(--space-10) var(--space-8);
    }

    /* Remove sticky thead on mobile */
    table thead {
        position: static;
        top: auto;
    }

        table thead th {
            position: static;
        }

    /* --- Trending reports: single-card slider --- */

    /* Hide the desktop grid */
    .trending-cards {
        display: none;
    }

    /* Show single-card mobile slider */
    .trending-slider-mobile {
        display: block;
    }

    .trending-dots {
        display: flex;
    }

    .trending-position {
        display: block;
    }

    /* Section header: stack title + buttons vertically */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-12);
    }

        .section-header button,
        .section-header .btn {
            width: 100%;
        }

    /* --- Shared grids: stack to single column on mobile --- */

    .grid-2col,
    .grid-3col,
    .grid-4col,
    .grid-main-sidebar,
    .portfolio-grid-2-1 {
        grid-template-columns: 1fr;
    }

    /* Form layouts: two-column field rows stack so inputs stay usable */
    .form-grid {
        grid-template-columns: 1fr;
    }

    /* Advanced search: 4-column filter row stacks */
    .advanced-search-form .search-form-row--4col {
        grid-template-columns: 1fr;
    }

    /* Analytics: layout stacks, all filter rows stack */
    .analytics-layout {
        grid-template-columns: 1fr;
        gap: var(--space-20);
    }

    .analytics-filter-row,
    .analytics-filter-row--two-col {
        grid-template-columns: 1fr;
    }

    /* Analytics action buttons full width and stacked */
    .analytics-actions {
        flex-direction: column;
    }

        .analytics-actions .btn {
            width: 100%;
            justify-content: center;
        }

    /* Analytics results table: no edge-bleed (would overflow on mobile);
       falls back to standard horizontal-scroll behaviour from shared rules */
    .analytics-results-table {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Checkbox grids stack on mobile */
    .checkbox-grid-2col,
    .checkbox-list.checkbox-grid-2col {
        grid-template-columns: 1fr;
    }

    /* Box header: title block + right-aligned info stack vertically */
    .box-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-12);
    }

    .box-info {
        text-align: left;
    }

    /* Company identity bar: stack children vertically.
       On model-portfolio: title row above portfolio-actions.
       On company profile: logo+name row above company-metrics row.
       Padding removed (the parent .content-section already provides it). */
    .company-identity-bar {
        display: block;
        padding: 0;
    }

        .company-identity-bar .portfolio-actions {
            margin-top: var(--space-15);
            flex-wrap: wrap;
        }

    /* Company profile metrics: wrap so all 4 fit comfortably below the name */
    .company-profile-header .company-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10) var(--space-30);
        margin-top: var(--space-20);
        padding-top: var(--space-20);
        border-top: 1px solid var(--border);
    }

    /* Company Profile Tables */

    .tab-content .section-with-table .section-header {
        padding: 0 0 var(--space-15) 0;
        margin: 0;
        display: grid;
        grid-template-columns: 2fr 1fr;
    }

    .section-with-table .section-header, .search-result-item {
        padding-left: 0;
        padding-right: 0;
    }


    /* Company tabs: horizontal scroll on mobile.
       7 tabs (some with AI badges) overflow phone width; scrollable strip
       preserves the tab metaphor and works with one tap. */
    .company-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: var(--space-10) 0;
        /* Hide scrollbar (still scrollable by touch/wheel) */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .company-tabs::-webkit-scrollbar {
            display: none;
        }

    .company-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Search results */



    /* Pagination: stack info above page numbers, both centred */
    .pagination {
        flex-direction: column;
        gap: var(--space-12);
        padding: var(--space-15);
    }

    /* Perf stats: 2-up on mobile (3 across is too cramped on phones,
       1 across is reserved for the 480px block below). */
    .perf-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* --- Methodology page --- */

    /* Tabs: drop absolute centering, sit in a single row spanning full width.
       Each tab flexes equally so all four fit; long labels swap to short. */
    .methodology-tabs {
        position: static;
        left: auto;
        transform: none;
        width: 100%;
    }

    .methodology-tab {
        flex: 1;
        padding: 8px 6px;
        font-size: var(--font-sm);
        white-space: nowrap;
    }

        .methodology-tab .tab-label-long {
            display: none;
        }

        .methodology-tab .tab-label-short {
            display: inline;
        }

    .methodology-content {
        padding: var(--space-20) 0;
    }

    .methodology-section {
        margin-bottom: var(--space-20);
        padding-bottom: var(--space-20);
    }

    /* Methodology table rows: label sits on top of content, not beside it */
    .methodology-table-row {
        grid-template-columns: 1fr;
    }

    .methodology-table-label {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    /* --- Private Credit landing --- */

    /* Hero stacks: text above, video below */
    .landing-hero {
        grid-template-columns: 1fr;
        gap: var(--space-20);
    }

    /* Contact form: two-column rows stack */
    .contact-form .form-row {
        grid-template-columns: 1fr;
    }

    /* - from (max-width: 1024px) - */

    .table-scroll-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        margin-left: calc(-1 * var(--space-20));
        margin-right: calc(-1 * var(--space-20));
        padding-left: var(--space-20);
        padding-right: var(--space-20);
    }

    /* - from (max-width: 768px) - */

    .table-scroll-wrapper {
        margin-left: calc(-1 * var(--space-15));
        margin-right: calc(-1 * var(--space-15));
        padding-left: var(--space-15);
        padding-right: var(--space-15);
    }

    /* - from (max-width: 1024px) - */


    /* Show mobile filter button */
    .mobile-filter-btn {
        display: flex;
    }

    /* Make filters container flex to position h2 and button side by side */
    .filters {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-15);
        margin-bottom: var(--space-15);
        padding: var(--space-15) 0; /* Add vertical padding to prevent overlap */
    }

        .filters h2 {
            margin: 0;
        }

    /* Hide desktop filter controls but keep heading */
    .filters-left,
    .filters-right {
        display: none;
    }

    /* Show mobile selected filters count (only when filters are active) */
    .selected-filters-mobile.has-filters {
        display: block;
    }

    /* Hide desktop selected filters */
    .selected-filters {
        display: none;
    }

    /* Table scrolling - swipe hint + forced horizontal scroll */
    .research-table-container {
        position: relative; /* Swipe hint anchors to this */
    }

    .swipe-hint {
        display: flex;
        /* Sit over the first table body row, below the section header + thead */
        top: 120px;
        right: var(--space-15);
    }

    /* Force the table wider than the wrapper so it scrolls horizontally instead of squishing */
    .content-section .research-table-container table {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        min-width: 1100px;
    }

    /* Company column needs room so pills don't collapse (min-width works with auto layout; max-width does not) */
    .research-table-container .company-list {
        min-width: 360px;
    }

    /* Trending Reports - Keep flex layout on tablet */
    .trending-cards {
        flex-wrap: wrap;
    }

    .trending-card {
        flex: 0 0 calc((100% - 16px) / 2); /* 2 cards on tablet */
    }

    /* Section headers - stack buttons */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-12);
    }

        .section-header button,
        .section-header .btn {
            width: 100%;
        }

    /* - from (max-width: 768px) - */


    /* Trending Reports - Single card with navigation */
    .trending-cards {
        display: none;
    }

    .trending-slider-mobile {
        display: block;
    }

    .trending-card {
        margin-bottom: 0;
    }

    .trending-dots {
        display: flex;
    }

    .trending-position {
        display: block;
    }

    /* Slider controls */
    .trending-controls {
        margin-top: var(--space-15);
    }

    /* Search bar - full width */
    .search-container {
        margin-bottom: var(--space-15);
    }

    .company-search {
        width: 100%;
    }

    /* Section spacing */
    .content-section {
        margin-bottom: var(--space-20);
    }

    /* Action buttons stack */
    .trending-controls,
    .filter-actions {
        flex-direction: column;
    }

        .trending-controls button,
        .filter-actions button {
            width: 100%;
        }

    /* - from (max-width: 768px) - */


    /* Remove page container margins on mobile */
    .page-container {
        margin: 8px;
    }

    /* Remove sticky filter bar on mobile */
    .filters-container,
    .sticky-table-page .filters-container {
        position: static;
        top: auto;
    }

    /* Remove sticky table header on mobile */
    table thead {
        position: static;
        top: auto;
    }

        table thead th {
            position: static;
        }

    /* - from (max-width: 992px) - */

    .calendar-day {
        min-height: 80px;
        padding: 6px;
    }

    .event-description {
        display: none;
    }

    /* - from (max-width: 768px) - */

    .calendar-controls {
        flex-direction: column;
        gap: var(--space-15);
        padding: var(--space-15);
    }

    .calendar-controls-left {
        width: 100%;
        justify-content: space-between;
    }

    .calendar-controls-right {
        width: 100%;
    }

    .calendar-view-toggle {
        width: 100%;
    }

    .view-toggle-btn {
        flex: 1;
        text-align: center;
    }

    .calendar-day {
        min-height: 60px;
        padding: 4px;
    }

    .event-link {
        padding: 4px;
    }

    /* - from (max-width: 992px) - */

    .methodology-tabs {
        position: static;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: var(--space-15);
        order: 2;
    }

    /* Icons share the title row (right-aligned); tabs drop to their own row */
    .methodology-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-15);
    }

        .methodology-header .section-actions {
            position: static;
            order: 1;
            margin-left: auto;
        }

    /* - from (max-width: 768px) - */

    .methodology-tab {
        padding: 6px 14px;
        font-size: var(--font-xs);
    }

    .methodology-content {
        padding: var(--space-20) 0;
    }

    .methodology-section {
        margin-bottom: var(--space-20);
        padding-bottom: var(--space-20);
    }

    .methodology-table-row {
        grid-template-columns: 1fr;
    }

    .methodology-table-label {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    /* - from (max-width: 992px) - */

    .landing-hero {
        grid-template-columns: 1fr;
        gap: var(--space-30);
    }

    .landing-content {
        max-width: 100%;
    }

    .landing-media {
        order: -1;
    }

    /* - from (max-width: 992px) - */

    .search-form-row--4col {
        grid-template-columns: repeat(2, 1fr);
    }

    /* - from (max-width: 600px) - */

    .search-form-row--4col {
        grid-template-columns: 1fr;
    }

    /* - from (max-width: 768px) - */

    /* Analytics action buttons: full-width and stacked */
    .analytics-actions {
        flex-direction: column;
    }

        .analytics-actions .btn {
            width: 100%;
            justify-content: center;
        }

    /* Company tabs: hide the scrollbar on the horizontally scrollable strip */
    .company-tabs {
        scrollbar-width: none;
        -ms-overflow-style: none;
        border-top: solid 1px var(--border);
        margin-top: 15px;
    }

        .company-tabs::-webkit-scrollbar {
            display: none;
        }


    /* Calendar: force single-column layout (mirrored from small-mobile —
       not enough width here either). Placed last so it overrides the
       band’s earlier .calendar-day / .calendar-controls rules. */
    .calendar-tabs {
        display: flex;
        gap: 0;
        border-bottom: 2px solid var(--border);
        padding-bottom: var(--space-5);
        margin-bottom: var(--space-5);
        position: relative;
    }

    /* Calendar header: icons share the title row (right-aligned); the tabs
       drop to their own full-width row below. Overrides the column stacking. */
    .section-header:has(.calendar-tabs) {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

        .section-header:has(.calendar-tabs) .section-actions {
            order: 1;
            margin-left: auto;
        }

        .section-header:has(.calendar-tabs) .calendar-tabs {
            order: 2;
            flex-basis: 100%;
        }

    .calendar-tab {
        padding: 12px 24px;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        font-size: 1rem;
        font-weight: 500;
        color: #666;
        cursor: pointer;
        transition: all 0.2s;
    }

    .calendar-day {
        min-height: 50px;
    }


    .calendar-view--month .calendar-weekdays, .calendar-view--week .calendar-weekdays {
        display: none;
    }

    .day-number {
        width: 37px;
        height: 38px;
        line-height: 15px;
        padding-top: 4px;
    }

        .day-number span {
            display: block;
            font-size: 0.7rem;
        }

    .calendar-days, .calendar-view--week .calendar-days--week {
        display: grid;
        grid-template-columns: 1fr;
    }

    .calendar-view--week .calendar-day {
        min-height: unset;
    }

    .calendar-day {
        position: relative;
        border-right: none;
    }

    .calendar-day-header {
        background: none;
    }


    #dayView .calendar-event {
        display: block;
    }

    #dayView .calendar-day-events {
        padding: var(--space-15) 0;
        min-height: 200px;
    }

    .calendar-day.has-events::after {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        background: var(--lucror-blue);
        border-radius: 50%;
        margin: 4px auto 0;
    }

    .calendar-day.today.has-events::after {
        background: var(--white);
    }

    .calendar-controls {
        margin-left: 0;
        margin-right: 0;
        border-radius: var(--border-5);
    }

    .calendar-grid {
        margin-left: 0;
        margin-right: 0;
    }


    /* Info list: stack date above title on small screens (no h-scroll) */
    .info-list-head {
        display: none;
    }

    .info-list-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .info-list-date {
        color: var(--medium-grey);
        font-size: var(--font-sm);
    }

    /* Spaced section headers: keep title + links on ONE row, links pushed right.
       Specificity must beat .tab-content .section-with-table .section-header,
       which otherwise forces display:grid (2fr 1fr) and left-aligns the link. */
    .content-section.section-with-table .section-header--spaced,
    #companyApp .content-section.section-with-table .section-header--spaced {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-10);
    }

    .content-section .section-header--spaced .section-header-link {
        white-space: nowrap;
    }

    .content-section .section-header--spaced .section-header-links {
        flex-wrap: nowrap;
        margin-left: auto;
    }

    /* Info list: drop the 35px content-padding so rows line up with the
       section title (the card already provides the inset) */
    .section-with-table .info-list-head,
    .section-with-table .info-list-row {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---------- TABLET  (min-width: 769px) and (max-width: 1024px) ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
    /* - from (max-width: 1024px) - */

    /* Description + Investment Objective (2fr/1fr): stack to a single column. */
    #modelPortfolioApp .portfolio-grid-2-1 {
        grid-template-columns: 1fr;
        display: block;
    }

    /* Statistics (3col) and Positioning (4col): fit as many ~280px cards as the
       width allows, so they step down 4→3→2→1 fluidly rather than collapsing to
       a single column at the tablet breakpoint. A partial final row left-aligns
       (e.g. 3 cards at two-up = a row of 2 then a half-width card). */
    #modelPortfolioApp .grid-3col,
    #modelPortfolioApp .grid-4col {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    /* Keep report content images (charts) within their section on small screens */
    #modelPortfolioApp .content-section:not(.company-profile-header) img {
        max-width: 100%;
        height: auto;
    }

    /* Swipe hint floats over the top-right of the table (like the Dashboard).
       In-flow + negative bottom margin overlaps it onto the table without
       depending on header height. Hidden until JS confirms the table overflows. */
    #modelPortfolioApp .swipe-hint,
    #companyApp .swipe-hint {
        display: none;
        position: relative;
        z-index: 5;
        margin: 0 var(--space-8) -32px auto;
    }

        #modelPortfolioApp .swipe-hint.is-scrollable,
        #companyApp .swipe-hint.is-scrollable {
            display: flex;
        }

        #modelPortfolioApp .swipe-hint.hidden,
        #companyApp .swipe-hint.hidden {
            display: none;
        }

    /* Company research-tab tables (Research / Trade History / Calendar) only
       have 2-3 columns, so the shared 1100px min-width is far too wide. Use a
       comfortable width that scrolls (and shows the swipe hint) on phones but
       fits on tablets. */
    #companyApp .content-section .research-table-container table {
        min-width: 640px;
    }

    /* - from (max-width: 1024px) - */

    .coverage-filters .filters {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-12);
    }

    /* Region tabs scroll horizontally instead of overflowing the row */
    .coverage-filters .filters-tabs .company-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .coverage-filters .filters-tabs .company-tabs::-webkit-scrollbar {
            display: none;
        }

    /* Filter dropdowns wrap and left-align */
    .coverage-filters .filters-center {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    /* Re-show search + view toggle (the generic mobile rule hides .filters-right) */
    .coverage-filters .filters-right {
        display: flex;
        flex-wrap: wrap;
    }

        .coverage-filters .filters-right .search-form {
            flex: 1;
        }

        .coverage-filters .filters-right .search-box {
            width: 100%;
        }

    /* - from (max-width: 1024px) - */

    .table-scroll-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        margin-left: calc(-1 * var(--space-20));
        margin-right: calc(-1 * var(--space-20));
        padding-left: var(--space-20);
        padding-right: var(--space-20);
    }

    /* - from (max-width: 1024px) - */


    /* Show mobile filter button */
    .mobile-filter-btn {
        display: flex;
    }

    /* Make filters container flex to position h2 and button side by side */
    .filters {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-15);
        margin-bottom: var(--space-15);
        padding: var(--space-15) 0; /* Add vertical padding to prevent overlap */
    }

        .filters h2 {
            margin: 0;
        }

    /* Hide desktop filter controls but keep heading */
    .filters-left,
    .filters-right {
        display: none;
    }

    /* Show mobile selected filters count (only when filters are active) */
    .selected-filters-mobile.has-filters {
        display: block;
    }

    /* Hide desktop selected filters */
    .selected-filters {
        display: none;
    }

    /* Table scrolling - swipe hint + forced horizontal scroll */
    .research-table-container {
        position: relative; /* Swipe hint anchors to this */
    }

    .swipe-hint {
        display: flex;
        /* Sit over the first table body row, below the section header + thead */
        top: 120px;
        right: var(--space-15);
    }

    /* Force the table wider than the wrapper so it scrolls horizontally instead of squishing */
    .content-section .research-table-container table {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        min-width: 1100px;
    }

    /* Company column needs room so pills don't collapse (min-width works with auto layout; max-width does not) */
    .research-table-container .company-list {
        min-width: 360px;
    }

    /* Trending Reports - 3-card horizontal slider (matches laptop band).
       Inherits base .trending-cards flex/nowrap + overflow:hidden wrapper;
       card width is set to 3-up by the rule further down in this band. */

    /* Section headers - stack buttons */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-12);
    }

        .section-header button,
        .section-header .btn {
            width: 100%;
        }

        /* Calendar header: keep title, centered tabs and icons on ONE row -
       enough width at tablet. Overrides the column stacking above. */
        .section-header:has(.calendar-tabs) {
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
        }

    /* Calendar: drop the edge-to-edge bleed - not needed at this width */
    .calendar-controls,
    .calendar-grid {
        margin-left: 0;
        margin-right: 0;
    }

    /* - from (max-width: 992px) - */

    .calendar-day {
        min-height: 80px;
        padding: 6px;
    }

    .event-description {
        display: none;
    }

    /* - from (max-width: 992px) - */

    /* Methodology header on ONE row (title left, centered tabs, icons right) -
       matches the laptop band; overrides the column stacking above. */
    .methodology-header {
        flex-direction: row;
        align-items: center;
    }

    /* - from (max-width: 992px) - */

    .landing-hero {
        grid-template-columns: 1fr;
        gap: var(--space-30);
    }

    .landing-content {
        max-width: 100%;
    }

    .landing-media {
        order: -1;
    }

    /* - from (max-width: 992px) - */

    .search-form-row--4col {
        grid-template-columns: repeat(2, 1fr);
    }

    /* - from (min-width: 769px) and (max-width: 1460px) - */


    /* --- Header --- */

    .logo img {
        max-width: 180px;
        padding: 10px 0;
    }

    #main-header {
        margin: var(--space-15) var(--space-20);
        padding: 0 var(--space-20);
    }

        /* Hide desktop nav and search, show tablet icons + hamburger */
        #main-header nav,
        #main-header .header-right {
            display: none;
        }

    /* Hide the mobile-only hamburger (inside header-nav) */
    .hamburger-btn {
        display: none;
    }

    /* Show tablet right: icons + hamburger */
    .header-tablet-right {
        display: flex;
    }

        .header-tablet-right .hamburger-btn {
            display: flex;
        }

    /* Show full inline search */
    .header-search-dropdown {
        display: block;
    }

    .header-search-panel {
        display: block;
        position: static;
        box-shadow: none;
        padding: 0;
        width: auto;
        animation: none;
    }

    /*Steve*/
    .message-bubble {
        left: 10px;
        top: 10px;
        position: relative;
    }

    .header-search-toggle {
        display: none;
    }

    .header-search-close {
        display: none;
    }

    .header-search-inner {
        width: 300px;
    }

    /* --- Page container --- */

    .page-container {
        margin: var(--space-20) 0;
        padding: 0 var(--space-20);
    }

    .content-section {
        padding: var(--space-20);
        margin-bottom: var(--space-20);
    }

        /* Card padding is 20px in this tablet range — re-match the edge-to-edge
       section-header bleed so it doesn't overrun the card (the default bleed is
       -35px to match desktop padding). Mirrors the 768px/480px header rules. */
        .content-section .section-header {
            margin-left: calc(-1 * var(--space-20));
            margin-right: calc(-1 * var(--space-20));
            /*Steve*/
            /* padding-left: var(--space-20);
        padding-right: var(--space-20); */
        }


    #companyApp .content-section .section-header {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    #companyApp .content-section.section-with-table .section-header {
        padding-left: var(--space-20);
        padding-right: var(--space-20);
        padding-top: 0;
        display: flex;
        align-items: center;
        flex-direction: row;
    }

    /* --- Trending cards: show 3 at a time --- */

    .trending-card {
        flex: 0 0 calc((100% - 32px) / 3); /* 3 cards, 2 gaps */
    }

    /* --- Research filters: same filter button as mobile --- */

    .mobile-filter-btn {
        display: flex;
    }

    .filters-left,
    .filters-right {
        display: none;
    }

    .filters {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-15);
        padding: var(--space-15) 0;
    }

        .filters h2 {
            margin: 0;
        }

    .filters-container,
    .sticky-table-page .filters-container {
        position: static;
        top: auto;
    }

    /* Override desktop edge-to-edge bleed on filters */
    .content-section .filters {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* --- Table --- */

    /* Static like mobile: the overflow-x:auto wrapper hijacks the sticky
       context here, so sticky never worked at these widths and the JS inline
       top offset only opened a gap. Keep it static to match the mobile bands. */

    table thead {
        position: static;
        top: auto;
    }

    /* Swipe hint anchors to this */
    .research-table-container {
        position: relative;
    }

    .swipe-hint {
        display: flex;
        /* Sit over the first table body row, below the section header + thead */
        top: 120px;
        right: var(--space-15);
    }

    /* --- Research table: horizontal scroll --- */

    .table-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .content-section .research-table-container table {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        min-width: 1100px;
    }

    /* Research table: company column needs more room on tablet.
       min-width works on td cells; max-width does not (auto table layout). */
    .research-table-container .company-list {
        min-width: 360px;
    }

    /* --- Footer --- */

    footer {
        margin: var(--space-15) var(--space-20);
    }

    /* --- Shared grids: reduce density on tablet --- */

    /* 3-column and 4-column grids drop to 2 across */
    .grid-3col,
    .grid-4col {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    /* Advanced search: 4-column filter row drops to 2 across */
    .advanced-search-form .search-form-row--4col {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Analytics: layout stacks (description above filters);
       5-column filter rows drop to 3 across */
    .analytics-layout {
        grid-template-columns: 1fr;
        gap: var(--space-20);
    }

    .analytics-filter-row {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Perf stats stay 3 across — they're small and read fine */

    /* --- Methodology page --- */

    /* Tabs sit in a single row with short labels (matches mobile behaviour).
       Centred via the parent's absolute positioning (set in base CSS). */
    .methodology-tab .tab-label-long {
        display: none;
    }

    .methodology-tab .tab-label-short {
        display: inline;
    }

    .methodology-tab {
        padding: 6px 14px;
    }


    .company-profile-header .company-identity-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 0 0 var(--space-15);
    }

    .company-profile-header .company-tabs {
        padding: var(--space-15) 0 0 0;
    }
    /* Tabs scroll horizontally instead of breaking words, so the AI badges stay aligned */
    .company-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .company-tabs::-webkit-scrollbar {
            display: none;
        }

    .company-tab {
        white-space: nowrap;
    }

    .company-profile-header .company-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10) var(--space-30);
        margin-top: var(--space-20);
        padding-top: var(--space-20);
        border-top: 1px solid var(--border);
    }

    /* Spaced section headers: keep title + links on ONE row, links pushed right.
       Specificity must beat .tab-content .section-with-table .section-header,
       which otherwise forces display:grid (2fr 1fr) and left-aligns the link. */
    .content-section.section-with-table .section-header--spaced,
    #companyApp .content-section.section-with-table .section-header--spaced {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-10);
    }

    .content-section .section-header--spaced .section-header-link {
        white-space: nowrap;
    }

    .content-section .section-header--spaced .section-header-links {
        flex-wrap: nowrap;
        margin-left: auto;
    }

    /* Info list: drop the 35px content-padding so rows line up with the
       section title (the card already provides the inset) */
    .section-with-table .info-list-head,
    .section-with-table .info-list-row {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---------- LAPTOP  (min-width: 1025px) and (max-width: 1460px) ---------- */
@media (min-width: 1025px) and (max-width: 1460px) {
    /* - from (min-width: 769px) and (max-width: 1460px) - */

    /* Calendar: drop the edge-to-edge bleed - not needed at this width */
    .calendar-controls,
    .calendar-grid {
        margin-left: 0;
        margin-right: 0;
    }


    /* --- Header --- */

    .logo img {
        max-width: 180px;
        padding: 10px 0;
    }

    #main-header {
        margin: var(--space-15) var(--space-20);
        padding: 0 var(--space-20);
    }

        /* Hide desktop nav and search, show tablet icons + hamburger */
        #main-header nav,
        #main-header .header-right {
            display: none;
        }

    /* Hide the mobile-only hamburger (inside header-nav) */
    .hamburger-btn {
        display: none;
    }

    /* Show tablet right: icons + hamburger */
    .header-tablet-right {
        display: flex;
    }

        .header-tablet-right .hamburger-btn {
            display: flex;
        }

    /* Show full inline search */
    .header-search-dropdown {
        display: block;
    }

    .header-search-panel {
        display: block;
        position: static;
        box-shadow: none;
        padding: 0;
        width: auto;
        animation: none;
    }

    /*Steve*/
    .message-bubble {
        left: 10px;
        top: 10px;
        position: relative;
    }

    .header-search-toggle {
        display: none;
    }

    .header-search-close {
        display: none;
    }

    .header-search-inner {
        width: 300px;
    }

    /* --- Page container --- */

    .page-container {
        margin: var(--space-20) 0;
        padding: 0 var(--space-20);
    }

    .content-section {
        /*Steve*/
        /* padding: var(--space-20);
        margin-bottom: var(--space-20); */
    }

        /* Card padding is 20px in this tablet range — re-match the edge-to-edge
       section-header bleed so it doesn't overrun the card (the default bleed is
       -35px to match desktop padding). Mirrors the 768px/480px header rules. */
        .content-section .section-header {
            margin-left: calc(-1 * var(--space-20));
            margin-right: calc(-1 * var(--space-20));
            /*Steve*/
            /* padding-left: var(--space-20);
        padding-right: var(--space-20); */
        }

    #companyApp .content-section .section-header {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    #companyApp .content-section.section-with-table .section-header {
        padding-left: var(--space-20);
        padding-right: var(--space-20);
    }

    /* --- Trending cards: show 3 at a time --- */

    .trending-card {
        flex: 0 0 calc((100% - 32px) / 3); /* 3 cards, 2 gaps */
    }

    /* --- Research filters: same filter button as mobile --- */

    .mobile-filter-btn {
        display: flex;
    }

    .filters-left,
    .filters-right {
        display: none;
    }

    .filters {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-15);
        padding: var(--space-15) 0;
    }

        .filters h2 {
            margin: 0;
        }

    .filters-container,
    .sticky-table-page .filters-container {
        position: static;
        top: auto;
    }

    /* Override desktop edge-to-edge bleed on filters */
    .content-section .filters {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* --- Table --- */

    /* Static like mobile: the overflow-x:auto wrapper hijacks the sticky
       context here, so sticky never worked at these widths and the JS inline
       top offset only opened a gap. Keep it static to match the mobile bands. */

    table thead {
        position: static;
        top: auto;
    }

    /* Swipe hint anchors to this */
    .research-table-container {
        position: relative;
    }

    .swipe-hint {
        display: flex;
        /* Sit over the first table body row, below the section header + thead */
        top: 120px;
        right: var(--space-15);
    }

    /* --- Research table: horizontal scroll --- */

    .table-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .content-section .research-table-container table {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        min-width: 1100px;
    }

    /* Research table: company column needs more room on tablet.
       min-width works on td cells; max-width does not (auto table layout). */
    .research-table-container .company-list {
        min-width: 360px;
    }

    /* --- Footer --- */

    footer {
        margin: var(--space-15) var(--space-20);
    }

    /* --- Shared grids: reduce density on tablet --- */

    /* 3-column and 4-column grids drop to 2 across */
    .grid-3col,
    .grid-4col {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    /* Advanced search: 4-column filter row drops to 2 across */
    .advanced-search-form .search-form-row--4col {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Analytics: layout stacks (description above filters);
       5-column filter rows drop to 3 across */
    .analytics-layout {
        grid-template-columns: 1fr;
        gap: var(--space-20);
    }

    .analytics-filter-row {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Perf stats stay 3 across — they're small and read fine */

    /* --- Methodology page --- */

    /* Tabs sit in a single row with short labels (matches mobile behaviour).
       Centred via the parent's absolute positioning (set in base CSS). */
    .methodology-tab .tab-label-long {
        display: none;
    }

    .methodology-tab .tab-label-short {
        display: inline;
    }

    .methodology-tab {
        padding: 6px 14px;
    }

    .company-profile-header {
        padding: var(--space-20);
    }

        .company-profile-header .company-identity-bar {
            flex-direction: column;
            align-items: stretch;
            padding: 0 0 var(--space-15);
        }

        .company-profile-header .company-tabs {
            padding: var(--space-15) 0 0 0;
        }

        .company-profile-header .company-metrics {
            margin-top: var(--space-20);
            padding-top: var(--space-20);
            border-top: 1px solid var(--border);
        }

    /*Steve*/
    #modelPortfolioApp .swipe-hint.is-scrollable, #companyApp .swipe-hint.is-scrollable {
        display: flex;
    }

    /*Steve*/
    #modelPortfolioApp .swipe-hint, #companyApp .swipe-hint {
        display: none;
        position: relative;
        z-index: 5;
        margin: 0 var(--space-8) -32px auto;
    }

    .grid-main-sidebar > div > .content-section {
        margin-bottom: var(--space-15);
    }
}

/* ---------- DESKTOP  (min-width: 1461px) and (max-width: 1820px) ---------- */
@media (min-width: 1461px) and (max-width: 1820px) {
    /* - from (min-width: 1461px) and (max-width: 1820px) - */


    /* Show search dropdown icon, hide the inline search form */
    .search-form {
        display: none;
    }

    .header-search-dropdown {
        display: block;
    }
}