/* ══════════════════════════════════════════════════════════════════════
   TariffVault Shared Styles (tv-common.css)
   Single source of truth for cross-page UI elements.
   Each HTML page includes: <link rel="stylesheet" href="shared/tv-common.css">

   Contents:
   1. .tv-link — blue underlined link, no state changes
   2. .tv-select — native dropdown styling (light + dark)
   3. .tv-btn-primary — blue primary action button
   4. h1 — site-wide heading standard
   ══════════════════════════════════════════════════════════════════════ */


/* ── 1. Links ──────────────────────────────────────────────────────── */
/* Blue, underlined at rest, no hover/visited/active state changes.
   #3B82F6 in both light and dark modes. Underline provides
   accessibility cue for color-blind users.

   Selectors are written as a.tv-link rather than .tv-link on purpose.
   report.html defines a page-level ".dark .text-xs { color:
   var(--text-secondary) }" rule. That has the same specificity as
   ".dark .tv-link" and is defined later, so it used to win: any link
   carrying both text-xs and tv-link rendered gray in dark mode while
   staying blue in light mode. Adding the element selector raises this to
   (0,2,1) so a shared link class holds its own color against a generic
   sizing class. Do not drop the "a" without re-checking that. */

a.tv-link,
a.tv-link:hover,
a.tv-link:active,
a.tv-link:visited {
    color: #3B82F6;
    text-decoration: underline;
}
.dark a.tv-link,
.dark a.tv-link:hover,
.dark a.tv-link:active,
.dark a.tv-link:visited {
    color: #3B82F6;
    text-decoration: underline;
}


/* ── 2. Native Select (.tv-select) ─────────────────────────────────── */
/* For native <select> elements. Matches the hub picker trigger visually. */

.tv-select {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.78rem;
    padding: 6px 24px 6px 10px;
    border: 1px solid #94A3B8;
    border-radius: 6px;
    background-color: #FFFFFF;
    color: #0F172A;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 6px center;
    background-repeat: no-repeat;
    background-size: 1em 1em;
}

.tv-select:hover { border-color: #64748B; }
.tv-select:focus { border-color: #64748B; box-shadow: none; }
.dark .tv-select { background-color: #1F2937; border-color: #475569; color: #E2E8F0; }
.dark .tv-select:hover { border-color: #64748B; }
.tv-select option { background-color: #FFFFFF; color: #0F172A; }
.dark .tv-select option { background-color: #1F2937; color: #E2E8F0; }
.tv-select:disabled { opacity: 0.5; cursor: not-allowed; }

/* Medium variant — matches modeler input fields (py-2 text-sm rounded-lg).
   Used on workforce-modeler.html where pulldowns sit beside number/text inputs. */
.tv-select-md {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.875rem;
    padding: 8px 24px 8px 12px;
    border: 1px solid #94A3B8;
    border-radius: 8px;
    background-color: #FFFFFF;
    color: #0F172A;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
}
.tv-select-md:hover { border-color: #64748B; }
.tv-select-md:focus { border-color: #64748B; box-shadow: none; }
.dark .tv-select-md { background-color: #1F2937; border-color: #475569; color: #E2E8F0; }
.dark .tv-select-md:hover { border-color: #64748B; }
.tv-select-md option { background-color: #FFFFFF; color: #0F172A; }
.dark .tv-select-md option { background-color: #1F2937; color: #E2E8F0; }
.tv-select-md:disabled { opacity: 0.5; cursor: not-allowed; }

/* Large variant — matches py-3 search fields and buttons.
   Used on report.html search row where pulldown sits next to
   a tall search input and Run Report button. */
.tv-select-lg {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.875rem;
    padding: 12px 28px 12px 14px;
    border: 1px solid #94A3B8;
    border-radius: 6px;
    background-color: #FFFFFF;
    color: #0F172A;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
}
.tv-select-lg:hover { border-color: #64748B; }
.tv-select-lg:focus { border-color: #64748B; box-shadow: none; }
.dark .tv-select-lg { background-color: #1F2937; border-color: #475569; color: #E2E8F0; }
.dark .tv-select-lg:hover { border-color: #64748B; }
.tv-select-lg option { background-color: #FFFFFF; color: #0F172A; }
.dark .tv-select-lg option { background-color: #1F2937; color: #E2E8F0; }
.tv-select-lg:disabled { opacity: 0.5; cursor: not-allowed; }


/* ── 3. Custom Pulldown (.hub-picker-*) ───────────────────────────── */
/* Div-based dropdown for cases where native <select> can't deliver
   (grouped options, upward opening, custom hover effects).
   Reference implementation: atlas corridor hub pickers.
   Used by: atlas hub selectors, atlas scenario simulator. */

.hub-picker { position: relative; flex-shrink: 0; }

.hub-picker-display {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.78rem;
    border-radius: 6px;
    padding: 6px 24px 6px 10px;
    border: 1px solid #94A3B8;
    background: #FFFFFF;
    color: #0F172A;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

.hub-picker-display::after {
    content: '\25BC';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: #94A3B8;
    pointer-events: none;
}

.hub-picker-display:hover { border-color: #64748B; }
.hub-picker-display.placeholder { color: #94A3B8; }

.dark .hub-picker-display {
    background: #1F2937;
    border-color: #475569;
    color: #E2E8F0;
}
.dark .hub-picker-display.placeholder { color: #94A3B8; }
.dark .hub-picker-display:hover { border-color: #64748B; }

.hub-picker-panel {
    display: none;
    position: fixed;
    min-width: 230px;
    overflow-y: auto;
    scrollbar-width: thin;
    background: #FFFFFF;
    border: 1px solid #94A3B8;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 9999;
}
.hub-picker-panel.open { display: block; }
.dark .hub-picker-panel {
    background: #1E293B;
    border-color: #475569;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.hub-picker-group {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748B;
    padding: 6px 12px 4px;
    position: sticky;
    top: 0;
    background: #F1F5F9;
    border-bottom: 2px solid #94A3B8;
}
.dark .hub-picker-group {
    color: #94A3B8;
    background: #1E293B;
    border-bottom-color: #475569;
}

.hub-picker-option,
.hub-picker-option:visited {
    font-size: 0.78rem;
    padding: 3px 12px;
    cursor: pointer;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hub-picker-option:hover { background: #E2E8F0; }
.hub-picker-option.selected { font-weight: normal; }
.dark .hub-picker-option { color: #E2E8F0; }
.dark .hub-picker-option:hover { background: #334155; }


/* ── 4. Buttons ───────────────────────────────────────────────────── */

/* Primary: solid blue, white text.
   Compact default matches atlas toolbar buttons (Analyze, Run Scenario).
   Used for primary actions that trigger data updates. */
.tv-btn-primary {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 6px 16px;
    background-color: #2563EB;
    color: #FFFFFF;
    border: 1px solid #2563EB;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s;
}
.tv-btn-primary:hover { background-color: rgba(37, 99, 235, 0.9); }
.tv-btn-primary:disabled { background-color: #94A3B8; border-color: #94A3B8; cursor: not-allowed; }

/* Large primary: tall variant for search rows where button sits next
   to py-3 inputs (report.html Run Report button). */
.tv-btn-primary-lg {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    padding: 12px 24px;
    background-color: #2563EB;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s;
}
.tv-btn-primary-lg:hover { background-color: #1D4ED8; }
.tv-btn-primary-lg:disabled { background-color: #94A3B8; cursor: not-allowed; }

/* Secondary: blue text on light blue bg, blue border.
   Used for tile Open buttons, pricing Buy buttons, success Unlock. */
.tv-btn-secondary {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    color: #2563EB;
    background-color: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.tv-btn-secondary:hover { background-color: #DBEAFE; border-color: #93C5FD; }
.dark .tv-btn-secondary {
    color: #60A5FA;
    background-color: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.3);
}
.dark .tv-btn-secondary:hover { background-color: rgba(37, 99, 235, 0.25); }


/* ── 5. Loading Dots (.tv-loading) ────────────────────────────────── */
/* Three pulsing blue dots. Used as a progress indicator when user
   actions trigger visible updates (scenario run, country select, etc.).
   Usage: <div class="tv-loading"><div class="tv-dot"></div><div class="tv-dot"></div><div class="tv-dot"></div></div>
   Show: el.classList.add('visible')
   Hide: el.classList.remove('visible') */

.tv-loading {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
}
.tv-loading.visible { display: flex; }

.tv-dot {
    width: 14px;
    height: 14px;
    background-color: #2563EB;
    border-radius: 50%;
    transform: scale(0.7);
    opacity: 0.3;
}
.tv-dot:nth-child(1) { animation: tv-pulse1 1000ms ease-in-out infinite; }
.tv-dot:nth-child(2) { animation: tv-pulse2 1000ms ease-in-out infinite; }
.tv-dot:nth-child(3) { animation: tv-pulse3 1000ms ease-in-out infinite; }

@keyframes tv-pulse1 {
    0%, 20%, 80%, 100% { transform: scale(0.7); opacity: 0.3; }
    10%, 90% { transform: scale(1.2); opacity: 1; }
}
@keyframes tv-pulse2 {
    0%, 40%, 60%, 100% { transform: scale(0.7); opacity: 0.3; }
    30%, 70% { transform: scale(1.2); opacity: 1; }
}
@keyframes tv-pulse3 {
    0%, 40%, 60%, 100% { transform: scale(0.7); opacity: 0.3; }
    50% { transform: scale(1.2); opacity: 1; }
}


/* ── 6. Section Group Heading (.label-group-heading) ──────────────── */
/* Used for major section dividers (e.g., "Company & Tariff Profile",
   "Financial Impact", "Supply Chain Restructuring" on the modeler).
   1.25rem sits below the h1 (1.5rem) in the heading hierarchy.
   Margin-top varies by context: apply via Tailwind mt-8 or mt-12. */

.label-group-heading {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #0F172A;
}
.dark .label-group-heading { color: #F0F0F0; }


/* ── Gated Export Links ───────────────────────────────────────────── */
/* Grayed out export links for unpaid users or unavailable formats.
   Tooltip shows on hover via data-tooltip attribute. */
.export-gated { color: #94A3B8 !important; cursor: default !important; text-decoration: none !important; position: relative; }
.export-gated:hover { text-decoration: none !important; color: #94A3B8 !important; }
.export-gated:hover::after {
    content: attr(data-tooltip);
    position: absolute; bottom: 100%; right: 0;
    background: #FFFFFF; color: #1E293B;
    font-size: 0.8rem; padding: 10px 12px;
    border-radius: 6px; border: 1px solid #64748B;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    white-space: normal; width: max-content; max-width: 320px; z-index: 50; margin-bottom: 6px;
}
.dark .export-gated:hover::after {
    background: #0F172A; color: #F1F5F9;
    border: 1px solid #64748B;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5);
}
/* Tooltip below variant — for elements near the top of viewport (e.g., tab bars) */
.export-gated.tooltip-below:hover::after {
    bottom: auto; top: 100%; margin-bottom: 0; margin-top: 6px;
}
.dark .export-gated.tooltip-below:hover::after {
    bottom: auto; top: 100%; margin-bottom: 0; margin-top: 6px;
}


/* ── Print Styles ─────────────────────────────────────────────────── */
/* Shared print CSS for PDF export via window.print().
   All tool pages inherit these rules. Forces light mode, hides nav
   and interactive elements, adds branded header/footer via @page. */

@media print {
    /* Force light mode */
    html, body { background: #FFFFFF !important; color: #0F172A !important; }
    .dark body { background: #FFFFFF !important; color: #0F172A !important; }
    .dark h1, .dark h2, .dark h3, .dark h4 { color: #0F172A !important; }
    .dark .text-text-s, .dark .text-s, .dark .content-body, .dark .instruction-text { color: #475569 !important; }
    .dark .surface { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
    .dark .card-with-source, .dark .rounded-lg { background: #FFFFFF !important; }

    /* Page setup */
    @page {
        size: landscape;
        margin: 18mm 12mm 22mm 12mm;
    }

    /* Branded header — generated by ::before on body */
    body::before {
        content: 'TariffVault  |  tariffvault.com';
        display: block;
        font-size: 10px;
        font-weight: 700;
        color: #0F172A;
        border-bottom: 1px solid #94A3B8;
        padding-bottom: 8px;
        margin-bottom: 16px;
    }

    /* Branded footer — generated by ::after on body */
    body::after {
        content: 'This report is provided for informational purposes only. It does not constitute legal, trade compliance, or customs advisory. Verify all data with primary authorities. TariffVault is owned and operated by Venture Outsource LLC. Full data sources: tariffvault.com/data-sources';
        display: block;
        font-size: 7px;
        color: #94A3B8;
        border-top: 1px solid #94A3B8;
        padding-top: 8px;
        margin-top: 24px;
        line-height: 1.5;
    }

    /* Hide non-printable elements */
    .fixed-header, .mobile-menu, .back-to-top, #backToTop,
    .hamburger, .tools-dropdown-menu,
    .export-gated, #export-links,
    .section-nav, #sectionNav,
    #compactSliderWidget,
    #modeler-paywall-overlay, #atlas-paywall-overlay,
    .tv-btn-primary, .tv-btn-secondary,
    button[onclick*="export"], a[onclick*="export"],
    .theme-toggle, #theme-toggle { display: none !important; }

    /* Prevent cards and charts from being split across pages */
    .card-with-source, .surface.rounded-lg, .rounded-lg.border,
    svg, canvas, table, .chart-container,
    section, .metric-card { break-inside: avoid; page-break-inside: avoid; }

    /* Section headings stay with content */
    h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

    /* Remove shadows and unnecessary borders */
    * { box-shadow: none !important; }
    .surface { border: 1px solid #E2E8F0 !important; }

    /* Ensure charts and SVGs are visible */
    svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

    /* Links show URL for reference */
    .tv-link { color: #2563EB !important; }
}

/* Gold informational banner. Site-wide pattern for cross-page handoffs
   (modeler to atlas, atlas to report) and for in-page notices that
   inform the user about partial or unavailable data. Full-width
   horizontal lines top and bottom, open ends, shaded background,
   centered text. */
.notice-banner-info {
    text-align: center;
    font-size: 0.82rem;
    color: #92400E;
    background: rgba(234, 179, 8, 0.08);
    border-top: 1px solid #D97706;
    border-bottom: 1px solid #D97706;
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: 10px 12px;
}
.dark .notice-banner-info {
    color: #FCD34D;
    background: rgba(234, 179, 8, 0.12);
    border-top-color: #F59E0B;
    border-bottom-color: #F59E0B;
}
.notice-banner-info .notice-banner-link {
    margin-left: 12px;
    cursor: pointer;
}

/* Shared shading for the header row in any TariffVault data table.
   Apply to <tr> inside <thead>. Matches the visual treatment used by
   the mini-footer "Data Sources and Freshness" tables across pages.
   Light mode value mirrors the existing #f0f0f0 footer-table inline
   style; dark mode value is the computed result of rgba(255,255,255,
   0.04) over --gray-surface (the surface the mini-footer table sits
   on), expressed directly so it renders consistently regardless of
   the parent's background. */
.tv-table-header-row {
    background: #f0f0f0;
}
.dark .tv-table-header-row {
    background: var(--gray-card-elevated);
    color: var(--text-secondary);
}