/* ================================================
   BigMint App — v2 Design System Alignment
   Replaces shared-fixes.css
   Includes: shared fixes + shadow tokens + surface vars
           + card shadows + status tags + heading1
   ================================================ */

/* ---- CONTAINMENT FIX: Keep fixed elements inside phone-frame ---- */

/* Creates a new containing block so position:fixed children
   (toasts, bottom sheets, overlays) stay inside the phone frame
   instead of escaping to the browser viewport */
.phone-frame {
    transform: translateZ(0);
}

/* ---- OVERFLOW & RESPONSIVENESS SAFEGUARDS ---- */

/* Prevent horizontal scroll on phone screen */
.phone-screen {
    overflow-x: hidden;
}

/* Prevent grids and flex containers from overflowing phone width */
.screen,
.detail-content,
.screen-container {
    overflow-x: hidden;
}

/* Flex containers — prevent content from exceeding bounds */
.news-content,
.news-in-detail-content,
.detail-header-title,
.related-content,
.info-content,
.info-value,
.rm-info,
.menu-text,
.profile-name,
.country-name,
.data-card-title,
.chart-title,
.tender-title-text,
.report-title,
.commodity-name,
.drill-left {
    min-width: 0;
}

/* Grid items overflow protection */
.mover-card,
.video-card,
.market-tile,
.tender-detail {
    min-width: 0;
    overflow: hidden;
}

/* Table overflow prevention — only for tables inside phone content */
.participants-table,
.data-table {
    table-layout: fixed;
    width: 100%;
}
.participants-table td,
.participants-table th,
.data-table td,
.data-table th {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ---- DRAG-TO-SCROLL — Desktop horizontal scroll support ---- */

/* Grab cursor for scrollable tab bars, filter chips, and carousels */
.tabs,
.sub-tabs,
.filter-row,
.filter-tabs,
.filter-scroll,
.search-filters-scroll,
.search-tabs,
.market-tabs,
.event-tabs,
.events-filters,
.commodity-chips,
.bookmarks-tabs,
.region-chips,
.sub-commodity-filter,
.industry-pulse-tabs,
.price-carousel,
.price-cards-scroll,
.reports-scroll,
.industry-scroll,
.tenders-home-scroll,
.stats-region-scroll,
.stats-infographics-scroll,
.regional-trends-grid,
.tender-collections,
.speakers-scroll,
.shorts-scroll,
.infog-scroll,
.features-grid {
    cursor: grab;
}
.drag-scrolling {
    cursor: grabbing !important;
    -webkit-user-select: none;
    user-select: none;
}

/* ---- SMOOTH ANIMATIONS — Universal ---- */

/* Button press — clean spring effect */
button,
[role="button"],
.btn,
.action-btn,
.book-now-btn,
.event-book-btn,
.subscribe-btn,
.submit-btn,
.save-btn,
.apply-btn,
.filter-btn,
.share-btn {
    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.15s ease, background 0.2s ease, box-shadow 0.15s ease;
    will-change: transform;
}

button:active,
[role="button"]:active,
.btn:active,
.action-btn:active,
.book-now-btn:active,
.event-book-btn:active,
.subscribe-btn:active,
.submit-btn:active,
.save-btn:active,
.apply-btn:active,
.filter-btn:active,
.share-btn:active {
    transform: scale(0.96);
}

/* Back button — quick responsive tap */
.back-button,
.back-btn {
    transition: transform 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.15s ease;
}
.back-button:active,
.back-btn:active {
    transform: scale(0.88);
}

/* Header icons — subtle responsive tap */
.header-icon,
.detail-header-action,
.bottom-action {
    transition: transform 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.12s ease;
}
.header-icon:active,
.detail-header-action:active,
.bottom-action:active {
    transform: scale(0.85);
    opacity: 0.6;
}

/* Detail tabs — smooth underline transition */
.detail-tab {
    transition: color 0.2s ease, font-weight 0.15s ease;
}
.detail-tab:active {
    transform: scale(0.95);
}

/* Cards — smooth press feedback */
.card,
.price-card,
.news-card,
.event-card,
.tender-card,
.report-card,
.infographic-card,
.video-card,
.stat-card,
.media-card {
    transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.18s ease;
}

.card:active,
.price-card:active,
.tender-card:active,
.report-card:active,
.stat-card:active,
.media-card:active {
    transform: scale(0.97);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* List items — horizontal slide hint on tap */
.list-item,
.menu-item,
.faq-item,
.setting-item,
.notification-item {
    transition: background 0.15s ease, transform 0.12s ease;
}
.list-item:active,
.menu-item:active,
.setting-item:active,
.notification-item:active {
    background: var(--gray-50, #f9fafb);
    transform: translateX(2px);
}

/* Tab chips — smooth select */
.tab,
.filter-tab,
.market-filter-tab,
.sub-tab,
.category-chip,
.filter-chip {
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tab:active,
.filter-tab:active,
.market-filter-tab:active,
.sub-tab:active,
.category-chip:active,
.filter-chip:active {
    transform: scale(0.94);
}

/* Share options — bounce tap */
.share-option,
.social-btn {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.share-option:active,
.social-btn:active {
    transform: scale(0.85);
}

/* Carousel scroll — smooth behavior */
.scroll-container,
.tabs-scroll,
.filter-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Bottom sheet / modal transitions */
.bottom-sheet,
.modal-overlay,
.sheet-overlay {
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.bottom-sheet-content,
.modal-content,
.sheet-content {
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Accordion / collapsible sections */
.collapsible-content,
.drill-children,
.faq-answer {
    transition: max-height 0.35s ease, opacity 0.25s ease;
}

/* Smooth icon rotations (expand/collapse arrows) */
.expand-icon,
.drill-arrow,
.collapse-arrow,
.chevron {
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Image zoom / lightbox */
.image-zoom {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
}

/* Toast notifications */
.toast {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

/* Scroll containers — hide scrollbars consistently */
.scroll-container::-webkit-scrollbar,
.tabs::-webkit-scrollbar,
.filter-row::-webkit-scrollbar,
.chips-scroll::-webkit-scrollbar {
    display: none;
}
.scroll-container,
.tabs,
.filter-row,
.chips-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}


/* ================================================================
   V2 ADDITIONS — Shadow Tokens, Surface Variables, Card Shadows,
   Price Status Tags, Heading1 Typography
   ================================================================ */

/* ---- SHADOW TOKENS ---- */
:root {
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);
    --shadow-2xl: 0 24px 64px rgba(0,0,0,0.24);
    --surface: #ffffff;
}

[data-theme="dark"] {
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.12);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.12);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.24);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.32);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.40);
    --shadow-2xl: 0 24px 64px rgba(0,0,0,0.56);
    --surface: #1e293b;
}

/* ---- CARD SHADOWS (SM elevation) ---- */
.card,
.price-card,
.news-card,
.event-card,
.tender-card,
.report-card,
.infographic-card,
.video-card,
.stat-card,
.media-card,
.mover-card,
.data-card,
.info-card,
.rm-card,
.analyst-card,
.speaker-card,
.attendee-card,
.related-card,
.collection-card,
.commodity-card,
.industry-card,
.flash-card,
.faq-item,
.menu-card,
.profile-card,
.setting-card,
.help-card,
.notification-card {
    box-shadow: var(--shadow-sm);
}

/* ---- SHEET / MODAL SHADOWS (LG / XL elevation) ---- */
.bottom-sheet-content,
.sheet-content {
    box-shadow: var(--shadow-lg);
}

.modal-content {
    box-shadow: var(--shadow-xl);
}

/* Dropdown / popover shadows */
.dropdown,
.popover,
.tooltip-content,
.autocomplete-dropdown {
    box-shadow: var(--shadow-md);
}

/* ---- SURFACE BACKGROUND OVERRIDES ---- */
/* Replace hardcoded #fff with var(--surface) for dark mode compatibility */

.app-header,
.detail-header,
.bottom-nav,
.bottom-navigation {
    background: var(--surface);
}

.card,
.price-card,
.news-card,
.event-card,
.tender-card,
.report-card,
.infographic-card,
.video-card,
.stat-card,
.media-card,
.mover-card,
.data-card,
.info-card,
.rm-card,
.analyst-card,
.speaker-card,
.attendee-card,
.related-card,
.collection-card,
.commodity-card,
.industry-card,
.flash-card,
.menu-card,
.profile-card,
.setting-card,
.help-card,
.notification-card {
    background: var(--surface);
}

.bottom-sheet-content,
.sheet-content,
.modal-content {
    background: var(--surface);
}

.tab-bar,
.tabs-container,
.detail-tabs {
    background: var(--surface);
}

.sidebar,
.sidebar-content,
.nav-drawer {
    background: var(--surface);
}

.phone-frame {
    background: var(--surface);
}

/* ---- PRICE STATUS TAGS ---- */
.price-status-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 8px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}
.price-status-tag .status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.price-status-tag.delayed { background: #fef3c7; color: #92400e; }
.price-status-tag.delayed .status-dot { background: #f59e0b; }
.price-status-tag.early,
.price-status-tag.on-hold,
.price-status-tag.withheld,
.price-status-tag.under-review { background: var(--gray-100); color: var(--gray-700); border: none; }
.price-status-tag.early .status-dot,
.price-status-tag.on-hold .status-dot,
.price-status-tag.withheld .status-dot,
.price-status-tag.under-review .status-dot { background: var(--gray-500); }

.price-status-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    padding: 6px 10px;
    border-radius: 6px;
    z-index: 100;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    max-width: 180px;
    white-space: normal;
    text-align: center;
}
.price-status-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1f2937;
}
.price-status-tag:hover .price-status-tooltip,
.price-status-tag.show-tooltip .price-status-tooltip { display: block; }

/* ---- HEADING1 TYPOGRAPHY ---- */
.heading1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

/* ================================================================
   MOBILE RESPONSIVE — Universal rules for real-device viewing
   Applied on screens <= 500px (mobile phones).
   These provide a consistent foundation; individual pages may
   add page-specific overrides in their own <style> blocks.
   ================================================================ */

@media screen and (max-width: 500px) {

    /* ---- Remove phone-frame chrome ---- */
    body {
        padding: 0;
        background: #fff;
    }

    .phone-frame {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        box-shadow: none;
    }

    .phone-screen {
        height: 100%;
    }

    /* ---- Hide prototype-only elements ---- */
    .dynamic-island,
    .status-bar {
        display: none;
    }

    /* ---- Bottom navigation (main screens) — prevent cutoff ---- */
    .bottom-nav,
    .bottom-navigation {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        padding-top: 8px;
        padding-bottom: 20px;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    }

    /* ---- Bottom action bars (detail pages) — prevent cutoff ---- */
    .bottom-bar,
    .bottom-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding-bottom: 20px;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    }

    /* ---- Header safe-area handling ---- */
    .app-header,
    .detail-header {
        padding-top: 12px;
        padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    }

    /* ---- Toast positioning with safe area ---- */
    .toast {
        bottom: 100px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 100px);
    }

    /* ---- Phone label (reports-tenders dual-frame) ---- */
    .phone-label {
        display: none;
    }
}