/* ============================================
   Category Pages — Mobile Overrides (≤768px)
   Shared across government, corporate, sgb, tax-free.
   Sticky ticker + compact heading + pill search
   + chip row + feed-style bond rows.
   ============================================ */

/* ── Empty-state rows (no sellers / never traded) — desktop + mobile ── */
body.cardboard .bond-row[data-empty-state] .yield-value {
    display: none !important;
}

body.cardboard .bond-row[data-empty-state] .yield-availability {
    color: rgba(255, 183, 77, 0.85) !important;
    font-weight: 500 !important;
    font-style: italic;
}

body.cardboard .bond-row[data-empty-state] .bond-amount:empty {
    display: none !important;
}

@media (max-width: 768px) {

    /* ── Hide desktop-only surfaces ── */
    body.cardboard #navbar-container,
    body.cardboard .cb-category-header,
    body.cardboard .cb-notes-panel,
    body.cardboard .cb-bonds-table-wrap .bonds-header,
    body.cardboard .cb-filter-bar,
    body.cardboard .cb-active-filters,
    body.cardboard .mobile-floating-ctas,
    body.cardboard .mobile-controls,
    body.cardboard .mobile-persistent-search,
    body.cardboard .market-status-pill-standalone,
    body.cardboard .pulsating-circle {
        display: none !important;
    }

    /* Override desktop top offset on category pages */
    body.cardboard {
        padding-top: 0 !important;
    }

    body.cardboard .cb-category-main {
        padding: 0 !important;
        padding-top: 56px !important; /* sticky ticker */
        padding-bottom: 72px !important; /* bottom nav + safe area */
        min-height: 100vh;
    }

    body.cardboard .cb-category-body {
        display: block !important;
        grid-template-columns: unset !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    body.cardboard .cb-bonds-table-wrap {
        display: block !important;
        flex: none !important;
        flex-direction: unset !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }

    body.cardboard .bonds-table {
        display: block !important;
        flex: none !important;
        flex-direction: unset !important;
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        overflow: visible !important;
    }

    body.cardboard .bonds-list {
        display: block !important;
        flex: none !important;
        overflow: visible !important;
        max-height: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    /* ── Category heading strip (sticky, below ticker) ── */
    .cat-mobile-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        background: rgba(10, 10, 10, 0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        font-family: 'Manrope', sans-serif;
        position: sticky;
        top: 56px;
        z-index: 101;
    }

    .cat-mobile-header-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .cat-mobile-header-title {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--cb-text-primary, #fff);
        text-transform: lowercase;
    }

    .cat-mobile-header-sep {
        color: rgba(255, 255, 255, 0.2);
    }

    .cat-mobile-header-count {
        font-size: 0.68rem;
        color: rgba(255, 255, 255, 0.4);
        text-transform: lowercase;
    }

    /* (colors applied lower in the file after the fallback .bond-row::before rule) */

    /* ── Compact pill search (sticky) ── */
    .cat-mobile-search {
        padding: 6px 12px 8px;
        background: rgba(10, 10, 10, 0.95);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        position: sticky;
        top: 92px; /* 56 ticker + 36 header */
        z-index: 100;
    }

    .cat-mobile-search-wrap {
        position: relative;
    }

    .cat-mobile-search input {
        width: 100%;
        padding: 5px 32px 5px 32px;
        font-family: 'Manrope', sans-serif;
        font-size: 0.72rem;
        color: var(--cb-text-primary, #fff);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        outline: none;
        -webkit-appearance: none;
        height: 28px;
        box-sizing: border-box;
    }

    .cat-mobile-search input::placeholder {
        color: rgba(255, 255, 255, 0.3);
    }

    .cat-mobile-search svg {
        position: absolute;
        left: 11px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        stroke: rgba(255, 255, 255, 0.3);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        pointer-events: none;
    }

    .cat-mobile-search-clear {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.4);
        font-size: 1rem;
        cursor: pointer;
        padding: 0 4px;
        line-height: 1;
        display: none;
    }

    .cat-mobile-search.has-value .cat-mobile-search-clear {
        display: block;
    }

    /* ── Chip row (sticky) ── */
    .cat-mobile-chips {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        position: sticky;
        top: 136px; /* 56 + 36 + ~44 search */
        z-index: 99;
        background: rgba(10, 10, 10, 0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .cat-mobile-chips::-webkit-scrollbar { display: none; }

    /* Yield toggle — segmented 2-button pill */
    .cat-mobile-yield-toggle {
        display: inline-flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        overflow: hidden;
        flex-shrink: 0;
    }

    .cat-mobile-yield-btn {
        padding: 5px 10px;
        font-family: 'Manrope', sans-serif;
        font-size: 0.7rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.5);
        background: transparent;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        text-transform: lowercase;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .cat-mobile-yield-btn.active {
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
    }

    .cat-mobile-yield-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    /* Regular action chip (sort, filter, notes) */
    .cat-mobile-chip {
        flex-shrink: 0;
        padding: 5px 12px;
        font-family: 'Manrope', sans-serif;
        font-size: 0.72rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 14px;
        cursor: pointer;
        white-space: nowrap;
        text-transform: lowercase;
        letter-spacing: 0.01em;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .cat-mobile-chip:active {
        background: rgba(255, 255, 255, 0.08);
    }

    .cat-mobile-chip.active {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .cat-mobile-chip svg {
        width: 11px;
        height: 11px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* ── Bonds footnote (disclaimer) ── */
    body.cardboard .bonds-footnote {
        padding: 8px 14px !important;
        font-size: 0.58rem !important;
        background: rgba(255, 183, 77, 0.04) !important;
        border-top: none !important;
        border-bottom: 1px solid rgba(255, 183, 77, 0.1) !important;
        color: rgba(255, 183, 77, 0.7) !important;
        text-align: left !important;
        margin: 0 !important;
    }

    /* ── Bond rows — feed style (keeps existing 2x2 grid layout) ── */
    body.cardboard .bonds-list {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Flatten boxy card look into hairline-separated feed row + leading colored dot */
    body.cardboard .bond-row {
        padding: 10px 14px 10px 28px !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 0 !important;
        position: relative;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        gap: 2px 10px !important;
        transition: background 0.15s ease;
    }

    body.cardboard .bond-row:hover,
    body.cardboard .bond-row:active {
        background: rgba(255, 255, 255, 0.02) !important;
    }

    /* Leading category dot */
    body.cardboard .bond-row::before {
        content: '';
        position: absolute;
        left: 14px;
        top: 15px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
    }

    /* Hide the rating icon square (replaced by leading colored dot) */
    body.cardboard .bond-row .bond-icon {
        display: none !important;
    }

    /* Hide the "amount per bond" pseudo label (too cluttered) */
    body.cardboard .bond-row .bond-col-2::before {
        display: none !important;
    }

    /* Typography: bond-name */
    body.cardboard .bond-row .bond-name {
        font-size: 0.82rem !important;
        font-weight: 500 !important;
        color: var(--cb-text-primary, #fff) !important;
    }

    body.cardboard .bond-row .bond-tenure {
        font-size: 0.62rem !important;
        color: rgba(255, 255, 255, 0.4) !important;
        font-weight: 400 !important;
        margin-top: 2px;
    }

    /* Amount column (row 1 right) — "₹X,XXX / bond" */
    body.cardboard .bond-row .bond-col-2 .bond-amount {
        font-size: 0.72rem !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.7) !important;
        font-variant-numeric: tabular-nums;
    }

    body.cardboard .bond-row .bond-col-2 .bond-amount::after {
        content: ' / bond';
        font-size: 0.6rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.35);
        letter-spacing: 0.01em;
        margin-left: 2px;
    }

    /* Yield column (row 2 right) */
    body.cardboard .bond-row .bond-col-3 .yield-value {
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        color: #4FC3F7 !important;
        font-variant-numeric: tabular-nums;
    }

    /* SGB-only: append a "+/- gold price changes" pill below the yield */
    body[data-category="SGB"].cardboard .bond-row .bond-col-3 {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 3px !important;
    }

    body[data-category="SGB"].cardboard .bond-row .bond-col-3::after {
        content: '+/- gold price changes';
        font-size: 0.52rem;
        font-weight: 500;
        padding: 1px 7px;
        border-radius: 20px;
        color: rgba(255, 183, 77, 0.9);
        background: rgba(255, 183, 77, 0.08);
        border: 1px solid rgba(255, 183, 77, 0.18);
        text-transform: lowercase;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }

    /* Traded info (bottom left — injected by BottomNav.injectMobileTradedInfo) */
    body.cardboard .bond-row .mobile-traded-info {
        font-size: 0.62rem !important;
        color: rgba(255, 255, 255, 0.4) !important;
    }

    /* Empty-state rows on mobile: unhide availability as the visible message,
       hide the "/ bond" suffix, hide empty traded-info */
    body.cardboard .bond-row[data-empty-state] .yield-availability {
        display: block !important;
        font-size: 0.72rem !important;
        text-align: right;
        white-space: normal;
        line-height: 1.3;
    }

    body.cardboard .bond-row[data-empty-state] .bond-col-2 .bond-amount::after {
        content: none !important;
    }

    body.cardboard .bond-row[data-empty-state] .mobile-traded-info:empty,
    body.cardboard .bond-row[data-empty-state] .bond-traded-info:empty {
        display: none !important;
    }

    /* Category-colored dots (heading + each bond row). Must come AFTER the fallback rule above. */
    body[data-category="Government"] .cat-mobile-header-dot,
    body.cardboard[data-category="Government"] .bond-row::before { background: #4FC3F7 !important; }
    body[data-category="Corporate"] .cat-mobile-header-dot,
    body.cardboard[data-category="Corporate"] .bond-row::before { background: #66BB6A !important; }
    body[data-category="SGB"] .cat-mobile-header-dot,
    body.cardboard[data-category="SGB"] .bond-row::before { background: #FFB74D !important; }
    body[data-category="Tax-free"] .cat-mobile-header-dot,
    body.cardboard[data-category="Tax-free"] .bond-row::before { background: #CE93D8 !important; }

    /* ── Empty / loading / error states ── */
    body.cardboard .bonds-list .no-bonds,
    body.cardboard .bonds-list .no-results,
    body.cardboard .bonds-list .loading-state {
        padding: 40px 20px !important;
        text-align: center;
        color: rgba(255, 255, 255, 0.4);
        font-size: 0.8rem;
    }

    /* Bottom-sheet z-index (above sticky chip row) */
    body.cardboard .mobile-filter-panel,
    body.cardboard .mobile-notes-panel,
    body.cardboard .mobile-sort-dropdown {
        z-index: 10002 !important;
    }

    /* ── Mobile Notes Panel — compact, feed-style ── */
    body.cardboard .mobile-notes-panel {
        max-height: 60vh !important;
        padding: 0 16px 20px !important;
        background: rgba(12, 12, 12, 0.98) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 18px 18px 0 0 !important;
    }

    body.cardboard .mobile-notes-panel-header {
        padding: 14px 0 10px !important;
        background: rgba(12, 12, 12, 0.98) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        margin-bottom: 4px;
    }

    body.cardboard .mobile-notes-panel-title {
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        text-transform: lowercase;
        letter-spacing: 0.01em;
    }

    body.cardboard .mobile-notes-panel-close {
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        color: rgba(255, 255, 255, 0.5) !important;
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    body.cardboard .mobile-notes-panel-body {
        color: rgba(255, 255, 255, 0.65) !important;
        font-size: 0.72rem !important;
        line-height: 1.55 !important;
        padding: 4px 0 0 !important;
    }

    body.cardboard .mobile-notes-panel-body .note-item,
    body.cardboard .mobile-notes-panel-body p {
        padding: 10px 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        font-size: 0.72rem !important;
        line-height: 1.55 !important;
        color: rgba(255, 255, 255, 0.65) !important;
    }

    body.cardboard .mobile-notes-panel-body .note-item:last-child,
    body.cardboard .mobile-notes-panel-body p:last-child {
        border-bottom: none !important;
    }

    body.cardboard .mobile-notes-panel-body .note-tag {
        display: inline-block;
        font-size: 0.58rem !important;
        font-weight: 500;
        padding: 1px 6px !important;
        border-radius: 4px;
        margin-left: 4px;
        background: rgba(255, 255, 255, 0.06) !important;
        color: rgba(255, 255, 255, 0.45) !important;
        text-transform: lowercase;
        vertical-align: middle;
    }

    body.cardboard .mobile-notes-panel-body .note-tag.tag-important {
        background: rgba(255, 183, 77, 0.12) !important;
        color: rgba(255, 183, 77, 0.85) !important;
    }

    body.cardboard .mobile-notes-panel-body .note-tag.tag-new {
        background: rgba(79, 195, 247, 0.12) !important;
        color: rgba(79, 195, 247, 0.85) !important;
    }

    /* ── Mobile Filter Panel — compact ── */
    body.cardboard .mobile-filter-panel {
        max-height: 60vh !important;
        padding: 0 16px 20px !important;
        background: rgba(12, 12, 12, 0.98) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 18px 18px 0 0 !important;
    }

    body.cardboard .mobile-filter-panel-header {
        padding: 14px 0 10px !important;
        background: rgba(12, 12, 12, 0.98) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        margin-bottom: 10px;
    }

    body.cardboard .mobile-filter-panel-title {
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        text-transform: lowercase;
    }

    body.cardboard .mobile-filter-panel-close {
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        color: rgba(255, 255, 255, 0.5) !important;
        font-size: 1rem !important;
    }

    body.cardboard .mobile-filter-panel-body .filter-label {
        font-size: 0.62rem !important;
        color: rgba(255, 255, 255, 0.35) !important;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin: 8px 0 8px !important;
    }

    body.cardboard .mobile-filter-panel-body .cb-filter-pill-chips,
    body.cardboard .mobile-filter-panel-body .rating-chips,
    body.cardboard .mobile-filter-panel-body .frequency-chips {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px !important;
        margin-bottom: 14px !important;
    }

    body.cardboard .mobile-filter-panel-body .cb-filter-chip,
    body.cardboard .mobile-filter-panel-body .rating-chip,
    body.cardboard .mobile-filter-panel-body .frequency-chip {
        display: inline-block !important;
        padding: 6px 12px !important;
        font-family: 'Manrope', sans-serif;
        font-size: 0.72rem !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.6) !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 14px !important;
        cursor: pointer;
        text-transform: lowercase;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    body.cardboard .mobile-filter-panel-body .cb-filter-chip.selected,
    body.cardboard .mobile-filter-panel-body .cb-filter-chip.active,
    body.cardboard .mobile-filter-panel-body .rating-chip.active,
    body.cardboard .mobile-filter-panel-body .rating-chip.selected,
    body.cardboard .mobile-filter-panel-body .frequency-chip.active,
    body.cardboard .mobile-filter-panel-body .frequency-chip.selected {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
    }
}

/* Hide mobile-only elements on desktop */
@media (min-width: 769px) {
    .cat-mobile-header,
    .cat-mobile-search,
    .cat-mobile-chips {
        display: none !important;
    }
}